Exploring JavaScript Libraries
The Material-UI DataGrid component is designed for interacting with large data sets. However, it can be tricky to get the layout exactly like you want. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply insert the styling code directly into … Read more
Many React Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop). The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs. Link to full JavaScript … Read more
The goal of this demo is to achieve equal item heights and masonry-style item wrapping in Material-UI’s Grid. This guide focuses on two things: Stretch all items in a Material-UI Grid row to be the same height. Achieve a “masonry-style” layout where shorter and narrower items can wrap in a column when vertical space allows … Read more
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
Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. Simply wrap a component with Box and set internal margin, padding, and more. ***Update for MUI 5: Take a look at the new Stack component for handling one-dimensional vertical and horizontal layouts! Also, Material-UI moved to a new styling API where … Read more
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
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
The Material-UI Table documentation has examples of tables that have slick horizontal scroll. But how is this accomplished? There is no specific code in the example that enables this. However, we can accomplish horizontal scroll in only a few lines of code. A Code Sandbox link is in the Resources section. Wrap the Table in a TableContainer … Read more
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
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
