How to Create a Material-UI Table Sticky Column in Only Three Lines of Code

Material-UI Table with Sticky Column

Material-UI is a popular component library with excellent functionality and slick styling. Sometimes, however, we need just a bit more than what is available “out-of-the-box”. Material-UI comes with a Table component with significant customizations and styling options. The Table even includes a sticky header option. However, it does not have a prop for setting ‘sticky … Read more

How to Align Buttons in Material-UI Using the Box Component

Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. In this example I will wrap Buttons in the Box component and align left, center, and right with justifyContent. I will align vertically with alignItems. Then I will add margin and padding for additional spacing. This tutorial show both MUI v4 … Read more

How to Customize Material UI AppBar Color and Styling

Material-UI AppBar is a useful component for positioning titles, hamburger menus, admin buttons, and more. Styling the AppBar background color, text color, positioning, font, and any other CSS property is a common need and can be tricky to figure out. This demo will show several methods for customizing the AppBar, with a particular focus on … Read more

The Easiest Way to Implement Material-UI Table Search and Filter

A search bar on a UI table is a feature many users have come to expect. However, the Material-UI Table component does not have an out-of-the-box search feature. Not to worry, the React community has stepped up and provided several Material-UI search bar examples and solutions, two of which I will discuss in this article. … Read more

How to Customize Material-UI Table Cell Width and Styling

Material-UI Table Cell Width

Customizing Material-UI Table Cell width is a common requirement. Precisely styling the TableCell component is also often requested by users. In this demo, I will show how to create a table sized with fixed width or a dynamic width that fits to the contents of the table cells. I will also set TableCell hover color, … Read more

The Ultimate Guide To Material-UI Table Row Height

Material-UI’s table component is a versatile table capable of many customizations. However, finding the proper syntax for simple styling changes can sometimes be challenging. This guide will show you how to set row height for a table row. By default, MUI Table has a minimum height of about 56px that is difficult to override. Below … Read more

The Complete Guide to Material-UI Grid Item Alignment

This guide focuses on aligning items in every conceivable way in Material-UI Grid: aligning right, left, and horizontally centered; aligning top, bottom, and vertically centered. In this example I will use the Material-UI Grid, but the alignment principles apply for aligning all MUI components. You will learn how to align items in any vertical or … Read more

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: https://youtu.be/YO5jGf3_-gc Flexbox, Bootstrap, and CSS Grid have proven … 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