Create a Table with material-ui and material-table

In this post, we will create a simple table with material-ui and material-table. The sample data is generated by facker.js

Marak / faker.js

What really happened with Aaron Swartz?

View on GitHub

npm packages

@material-table/core
@material-ui/core
@material-ui/icons
faker

In this case, I used codesandbox.io Reactjs TypeScript template that is almost same as using create-react-app.
The difference between codesandbox and create-react-app is App.tsx

step1. install packages

$ yarn add @material-table/core @material-ui/core @material-ui/icons faker

# if you want to use npm

$ npm install "@material-table/core": "4.3.6",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "faker": "5.5.3",

step2. generate sample data

I create utils.ts, but you can move the following code to App.tsx and pass it as props to Table component or move to Table component.

The followings are generating 3 types of data, UUID, First Name, and Last Name.

You can check the details ↓.
https://marak.github.io/faker.js/

import faker from "faker";

// generate data
faker.seed(0);
export const data = [...new Array(100)].map(() => ({
  id: faker.datatype.uuid(),
  firstName: faker.name.firstName(),
  lastName: faker.name.lastName()
}));

step3. Create Table component

In terms of icons, you can follow the official installation page.
https://material-table.com/#/docs/install

In this post, passing 4 props.

columns
data
icons
options

You can check details on All Props page
https://material-table.com/#/docs/all-props

import React, { forwardRef } from "react";
import MaterialTable, { Column, Icons } from "@material-table/core";
import {
  AddBox,
  ArrowDownward,
  Check,
  ChevronLeft,
  ChevronRight,
  Clear,
  DeleteOutline,
  Edit,
  FilterList,
  FirstPage,
  LastPage,
  Remove,
  SaveAlt,
  Search,
  ViewColumn
} from "@material-ui/icons";
import { Container } from "@material-ui/core";
import { Person } from "../type";

const tableIcons: Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => (
    <ChevronRight {...props} ref={ref} />
  )),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

type Props = {
  data: Person[];
};

const columns: Array<Column<Person>> = [
  { title: "Id", field: "id" },
  { title: "First Name", field: "firstName" },
  { title: "Last Name", field: "lastName" }
];

const options = {
  paging: true,
  pageSize: 10,
  emptyRowsWhenPaging: false,
  pageSizeOptions: [10, 20, 50]
};

export const Table = ({ data }: Props) => {
  return (
    <Container>
      <MaterialTable
        columns={columns}
        data={data}
        icons={tableIcons}
        options={options}
      />
    </Container>
  );
};

step4. Run application

If there is no errors, you will see something like this.

Initially, the table shows 10 rows.

codesandbox

https://codesandbox.io/s/frosty-bash-icd6t?file=/src/App.tsx