Examples › Basic usage

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

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 default function BasicUsageExample() {
  return (
    <DataTable
      columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
      records={companies}
    />
  );
}

[
  {
    "id": "9d7b6df5-aa1e-4203-bfa8-7d9464e331cb",
    "name": "Sipes Inc",
    "streetAddress": "280 Rigoberto Divide",
    "city": "Twin Falls",
    "state": "MT",
    "missionStatement": "Strategize magnetic vortals."
  },
  {
    "id": "3c147f0b-c63f-4830-8ced-f378aad9efc6",
    "name": "Runolfsdottir - Cummerata",
    "streetAddress": "102 Konopelski Greens",
    "city": "Missouri City",
    "state": "KY",
    "missionStatement": "Leverage one-to-one methodologies."
  },
  {
    "id": "331992e8-7144-49c4-a8fd-fae9a6921b13",
    "name": "Johnston LLC",
    "streetAddress": "230 Julie Lake",
    "city": "Hartford",
    "state": "KY",
    "missionStatement": "Transition wireless initiatives."
  },
  {
    "id": "eb089974-a0ed-4ec2-84a3-4d7bd3935b63",
    "name": "Crist and Sons",
    "streetAddress": "3387 Blick Turnpike",
    "city": "Attleboro",
    "state": "WV",
    "missionStatement": "Revolutionize out-of-the-box infomediaries."
  },
  {
    "id": "fc257801-7b32-41ca-a31b-57ae6739415b",
    "name": "Schmidt and Sons",
    "streetAddress": "286 Leif Lock",
    "city": "Collierville",
    "state": "AL",
    "missionStatement": "Optimize bricks-and-clicks eyeballs."
  },
  {
    "id": "c942ac73-2c51-4bf1-b4a7-04419acf58c0",
    "name": "Nicolas Group",
    "streetAddress": "09622 Marcel Place",
    "city": "Highland",
    "state": "OR",
    "missionStatement": "Transition vertical interfaces."
  },
  {
    "id": "ad36f2d0-b186-4f1e-9a04-57e59715dc8f",
    "name": "Kub and Sons",
    "streetAddress": "8699 Upton Fords",
    "city": "East Providence",
    "state": "IN",
    "missionStatement": "Drive proactive models."
  },
  {
    "id": "e4a64ab6-4a9f-4f53-8f9e-dbf761fe9a69",
    "name": "Jakubowski - Rolfson",
    "streetAddress": "191 O'Connell Greens",
    "city": "San Rafael",
    "state": "MA",
    "missionStatement": "Streamline cutting-edge architectures."
  },
  {
    "id": "996fdd92-a399-4bef-9188-b0458ecee682",
    "name": "Welch - Tremblay",
    "streetAddress": "31622 Isobel Fall",
    "city": "Olathe",
    "state": "AR",
    "missionStatement": "Deploy wireless solutions."
  },
  {
    "id": "d0d0f9b1-7bb9-4b1e-967d-3ea81de7dd59",
    "name": "Mueller, Hodkiewicz and Beahan",
    "streetAddress": "21751 Elisa Village",
    "city": "Grand Prairie",
    "state": "WA",
    "missionStatement": "Facilitate bleeding-edge web-readiness."
  }
]