How to Create a MUI Table with Edit and Delete Rows Feature

The MUI Table can quickly be enhanced with edit and delete functionality. A good approach is to use state management, perhaps even useState, and click listeners to swap a TextField into a Cell and capture user typing. Deleting requires a component column and another useState value. Here’s what we will build: Notice there is no … Read more

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