React Data Table - Soft UI
PROThe 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
// Soft UI Dashboard PRO React examples
import DataTable from "examples/Tables/DataTable";
entries per page
10
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 |
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
| canSearch | bool | false | If true the table will has a search input that makes the user able to search. |
| showTotalEntries | bool | true | If true the total amount of entries will be visible at the bottom of the table. |
| table* | object | Used 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: "info" } | Used to set the pagination style of the table. |
| isSorted | bool | true | If true the table will have the sorting buttons of the columns. |
| noEndBorder | bool | false | If 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.