Installation#

tip

Already using material-table? After installing @material-table/core, simply update your imports and you're good to go!

See here for more on breaking changes

- import MaterialTable from 'material-table';
+ import MaterialTable from '@material-table/core';

yarn#

yarn add @material-ui/core
yarn add @material-table/core

npm#

npm install @material-ui/core
npm install @material-table/core

Basic Usage#

This basic examples should help get you started.

TypeScript#

myFirstTable.ts
import React from "react";
import MaterialTable, { Column } from "@material-table/core";
interface IPerson {
firstName: string;
lastName: string;
birthYear: number;
availability: boolean;
}
const lookup = { true: "Available", false: "Unavailable" };
const columns: Array<Column<IPerson>> = [
{ title: "First Name", field: "firstName" },
{ title: "Last Name", field: "lastName" },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{ title: "Availablity", field: "availability", lookup }
];
const data: Array<IPerson> = [
{ firstName: "Tod", lastName: "Miles", birthYear: 1987, availability: true },
{ firstName: "Jess", lastName: "Smith", birthYear: 2000, availability: false }
];
export const App = () => <MaterialTable columns={columns} data={data} />;

JavaScript#

//todo