Creative Tim  |  Docs

Table

The Table component helps you to simply create a beautiful table for your data.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Otis Kit PRO examples import Table from "examples/Tables/Table"; // Otis Kit PRO components import MKBox from "components/MKBox"; import MKBadge from "components/MKBadge";
NAMEFUNCTIONSTATUSEMAILEMPLOYED
John Micheal
Manageronline[email protected]23/04/18
Alexa Liras
Programatoroffline[email protected]11/01/19
Laurent Perrier
Executiveonline[email protected]19/09/17
Michael Levi
Backend Developeronline[email protected]24/12/08
Richard Gran
Manageroffline[email protected]04/10/21
Miriam Eric
Programtoroffline[email protected]14/09/20

Props Information

NameTypeDefaultDescription
columnsarray[]Used to set the table columns.
rowsarray[{}]Used to set the table rows.

It should be mentioned that if you want to display an image in a column you should define the column data in an array that contains the image and data of the column, the first element of the array should be the image and the second element of the array should be the data.

You can also pass nodes for the keys insides the objects of the rows prop.

Contents