Ant Design Table Row Example: Height, Background Color, and onClick

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 Ultimate Guide to Material UI Theme Breakpoints

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

How to Create a Material UI DataGrid with Expandable Rows

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

The Ultimate Guide to MUI Dropdown Components (3 Examples!)

The Material UI Dropdown component is not actually a specific component. Instead, there are three choices of component you can use as a “Dropdown”: Autocomplete Select TextField 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 … Read more

The Ultimate MUI RadioGroup Example (Five Best Features!)

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