Examples › Basic usage | Mantine DataTable

Examples › Basic usage

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	ID