Material-UI’s Grid Component vs Flexbox, Bootstrap, and CSS Grid

The Material-UI Grid Component is MUI’s grid system solution. It also has the features and APIs of MUI components that MUI users are familiar with. The question when considering using MUI Grid is: will this be superior to other grid alternatives? YouTube video version of this article here: Flexbox, Bootstrap, and CSS Grid have proven … Read more

Set a Minimum Display Time for Material-UI Skeleton Loader

The Material-UI Skeleton gives a great visual treat to users of your website or app. It’s strength is that it makes the user feel as though the app is useful and useable before critical loading is completed. Let’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API … Read more

How to Override TextField Border Color in Material UI

Disabled TextField with customer border color

I spent quite a few hours recently on a seemingly simple task: customizing the border color of a Material UI TextField when a variant and disabled state were applied. It was difficult to find good documentation and I expect others may benefit from a few examples presented here. The Resources section has a Code Sandbox … Read more

Build a Feature Rich Table with Material-Table for React

material-table react examples

Material-Table is a relatively new addition to the suite of libraries providing data table functionality in React. The particular claims to fame for material-table is that it is quick to get running and built on Material-UI. It is a Table component that augments the existing Material-UI Table. In this intro to material-table I’ll implement a … Read more

Material-Table AutoFocus on Row Add

material-table autofocus

Material-Table is a react data table based on Material-UI. It is quick to implement and will feel familiar to any developer experienced with React and MUI. It is also relatively easy to customize, such as adding autoFocus to the first input when adding a new row to a table. I recently was using an editable … Read more