In this post, we will create a simple table with material-ui and material-table. The sample data is generated by facker.js
What really happened with Aaron Swartz?
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
Top comments (0)