In its most basic usage scenario, the DataTable component only requires records and columns properties to be set:
import { DataTable } from 'mantine-datatable';
import companies from '~/data/companies.json';
export function BasicUsageExample() {
return (
<DataTable
columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
records={companies}
/>
);
}The code above will produce the following result:
Name
Street address
City
State
Feest, Bogan and Herzog 21716 Ratke Drive Stromanport WY Cummerata - Kuhlman 6389 Dicki Stream South Gate NH Goyette Inc 8873 Mertz Rapid Dorthyside ID Runte Inc 2996 Ronny Mount McAllen MA Goldner, Rohan and Lehner 632 Broadway Avenue North Louie WY Doyle, Hodkiewicz and O'Connell 576 Joyce Ways Tyraburgh KS Rau - O'Hara 7508 Lansdowne Road Shieldsborough MI Tillman - Jacobi 57918 Gwendolyn Circles Sheridanport MI Connelly, Feest and Hodkiewicz 7057 Stanley Road Kearaburgh CA Shanahan, Robel and Beier 378 Berta Crescent West Gerry KS Kling - McLaughlin 8346 Kertzmann Square South Joesph ID Jogi - McLaughlin 83462 Shazam Street North Joesph ID Jogi - McLaughlin 83462 Shazam Street North Joesph IDHowever, there’s much more you can do with Mantine DataTable.
Head over to the next example to learn about its basic properties.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4