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

How to Set Ant Design Table Column Width (3 Ways!)

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 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