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. In this intro to material-table, I’ll implement a few material-table examples and discuss the pros and cons.

First, some stats:

• The first material-table version was released in 2018.
• As of writing this, material-table runs about 100k weekly downloads (one-quarter of react-table).
• 292KB unpacked size (one-third of react-table) but it does require Material-UI, which is pretty hefty.

So we’ve got a table that is relatively popular (read: good community support) and, if you’re already using MUI in your app, material-table doesn’t add too much additional weight. From here, let’s dive into actual code. I will investigate the following:

• How quickly can I spin up the most basic table?
• How quickly can we add a few out-of-the-box features? I will add an action and override a component. These are the first two features listed in the docs. I will also add styling because that will be almost universally desired.
• How quickly can I find a solution to some kind of customization I want to do? I decided I simply wanted to remove the title but not the search box.

Here’s the final code sandbox. We’ll build it together in the steps below.

material-table example

If you prefer live coding with commentary, I embedded a video at the end in the Resources section. I also include a gist with the final code there.

---

A Basic material-table

I’d peg spinning up the most basic material-table example in CodeSandbox or with create-react-app at less than two minutes. It was as simple as:

• Use the code sandbox React template (or create-react-app).
• Include @material-ui/core, @material-ui/icons, and material-table as dependencies.
• Use code like the following from the material-table Getting Started docs:

import React, { useState } from "react"; 
	import "./styles.css"; 
	import MaterialTable from "material-table"; 
	export default function App() { 
	   const [data, setData] = useState([
	     { name: "Jon", job: "Software Dev", age: 29 }
	   ]);
	   return ( 
	      <div className="App"> 
	        <h1>Material-Table Demo</h1> 
	        <div style={{ maxWidth: "100%" }}>
	          <MaterialTable 
	            columns={[
	              { 
	                title: "Name", 
	                field: "name"
	              },
	              { 
	                title: "Occupation",
	                field: "job" 
	              }, 
	              { 
	                title: "Age", 
	                field: "age",
	                type: "numeric"
	              }
	            ]}
	            data={data}
	            title="Material-Table Demo" 
	          />
	       </div> 
	     </div> 
	   ); 
	}
view raw
basic material-table hosted with ❤ by GitHub

The docs were easy to follow and the only dependency is @material-ui/core (m-ui icons are recommended). I’d label this a beginner-friendly library.

#react #programming #reactjs #material-ui #javascript