Skip to main content

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​

myFirstTable.js
import React from "react";
import MaterialTable, { Column } from "@material-table/core";

const lookup = { true: "Available", false: "Unavailable" };

const columns = [
  { title: "First Name", field: "firstName" },
  { title: "Last Name", field: "lastName" },
  { title: "Birth Year", field: "birthYear", type: "numeric" },
  { title: "Availablity", field: "availability", lookup }
];

const data = [
  { firstName: "Tod", lastName: "Miles", birthYear: 1987, availability: true },
  { firstName: "Jess", lastName: "Smith", birthYear: 2000, availability: false }
];

export const App = () => <MaterialTable columns={columns} data={data} />;