DEV Community

Cover image for Create a Table with material-ui and material-table
Koji (he/him)
Koji (he/him)

Posted on

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

GitHub logo Marak / faker.js

generate massive amounts of realistic fake data in Node.js and the browser

faker.js - generate massive amounts of fake data in the browser and node.js

Faker.js

Build Status Coverage Status

npm version

OpenCollective OpenCollective Gitter chat

Demo

https://rawgit.com/Marak/faker.js/master/examples/browser/index.html

Faker Cloud

Don't have a local development setup ready?

Try our hosted version of Faker at https://fakercloud.com/api

https://github.com/faker/faker-cloud

Usage

Browser

    <script src = "faker.js" type = "text/javascript"></script>
    <script>
      var randomName = faker.name.findName(); // Caitlyn Kerluke
      var randomEmail = faker.internet.email(); // Rusty@arne.info
      var randomCard = faker.helpers.createCard(); // random contact card containing many properties
    </script>
Enter fullscreen mode Exit fullscreen mode

Node.js

    var faker = require('faker');
    var randomName = faker.name.findName(); // Rowan Nikolaus
    var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
    var randomCard = faker.helpers.createCard
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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()
}));
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

step4. Run application

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

Initially, the table shows 10 rows.

Image sample-app

codesandbox

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

Discussion (0)