Data Table

The DataTable component helps you to simply create a beautiful data table for your data, it uses react-table in base for creating the data table but it doesn't support all of the features of reac-table.


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

// NextJS Material Dashboard 2 Examples import DataTable from "/examples/Tables/DataTable";
  entries per page
name
position
office
age
Hanny Baniard
Data Coordiator
Baorixile
42
Lara Puleque
Payment Adjustment Coordinator
Cijangkar
47
Torie Repper
Administrative Officer
Montpellier
25
Nat Gair
Help Desk Technician
Imider
57
Maggi Slowan
Help Desk Technician
Jaunpils
56
Marleah Snipe
Account Representative II
Orekhovo-Borisovo Severnoye
31
Georgia Danbury
Professor
Gniezno
50
Bev Castan
Design Engineer
Acharnés
19
Reggi Westney
Financial Advisor
Piuí
56
Bartholomeus Prosh
Project Manager
Kelīshād va Sūdarjān
28
Showing 1 to 10 of 12 entries

Props Information

NameTypeDefaultDescription
entriesPerPage*bool{ defaultValue: number, entries: array }{ defaultValue: 10, entries: [5, 10, 15, 20, 25] }Used to set how much entries should be visible on a table page.
canSearchboolfalseIf true the table will has a search input that makes the user able to search.
showTotalEntriesbooltrueIf true the total amount of entries will be visible at the bottom of the table.
table*objectUsed to set the columns and rows of the table. Its a required prop.
pagination{ variant: ["contained", "gradient"], color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light"] }{ variant: "gradient", color: "dark" }Used to set the pagination style of the table.
isSortedbooltrueIf true the table will have the sorting buttons of the columns.
noEndBorderboolfalseIf true the table will remove the last item border in a table page.

It should be mentioned that you can pass nodes for the keys insides the rows of the table prop.

Contents