Exploring JavaScript Libraries
Ant Design Table Rows can be styled by targeting classes built-in to Ant Design tables. This makes height, font size, background color, and more styling easy to control. We can also quickly apply row click handlers using the onRow prop. Inside this prop we have access to row data, index, and event objects. Here is … Read more
The Ant Design Select component can have components rendered in its options list by adding them to the options label field. However, getting the clicks and event bubbling to play well together is challenging. In this tutorial I will create the Select with Checkboxes seen below: I used the default classes on the Select to … Read more
Ant Design is currently the second largest React component library, and it was created to reduce design waste and friction. In this tutorial, we will explore customizing table column width using column object fields, custom classes, and class overrides. We will build this simple table where each column’s width is set differently. Full code for … Read more
The ESLint max-lines-per-function rule is not enabled by default, and that is probably a good thing because it would often flag reasonable function components as too long. However, the rule can be useful when selectively applied. I believe it can ensure that developers don’t get lazy and pack too much functionality into one function. In … Read more
The MUI Theme can be customized with new values for existing breakpoints, and it can even have new breakpoints added (i.e. bg: 1000). In this tutorial we will customize theme breakpoints and show an example of every breakpoint function being used (i.e. theme.breakpoints.up and theme.breakpoints.down). Here’s a screenshot of what we will create. It can … Read more
Bootstrap 3 is still widely used, despite being two version behind the current Boostrap release. It’s grid system is intuitive and adds spacing and alignment for grid children. Margin can be tricky to add, however. In this tutorial we will create the following grid using Bootstrap 3: The grid has some margin by default. I … Read more
Sometimes just because we can code something doesn’t mean we should use it in production. That’s how I feel about creating an expandable/collapsible row in the Material UI DataGrid. In this tutorial, I added expand and collapse to the free MUI DataGrid (imported from “@mui/x-data-grid”). See the screenshot below: This feature is only available on … Read more
MUI has a great example in the docs of creating a basic MUI dropdown button. In this post I take that example and customize the position of the dropdown and the styling of the dropdown and button. Here’s what we will build: The button style changes based on the open state of the dropdown. The … Read more
The Material UI Dropdown component is not actually a specific component. Instead, there are three choices of component you can use as a “Dropdown”: A basic “dropdown” version of each of these components look identical but have significantly different APIs. The Autocomplete and Select have a Popper menu by default, but the TextField must be … Read more
The MUI RadioGroup is a specialized component for wrapping radio buttons and controlling alignment. As we will see later, it renders the same as a FormGroup except with role=”radiogroup”. Here’s the example we will build in this tutorial: This RadioGroup has an onChange handler and can be given error and disabled states through its parent … Read more
