Examples › Non-standard record IDs

By default, the DataTable will assume each record to have a property called id, holding a unique value of a primitive data type.
The record IDs are used internally as .map() keys and to compare records when necessary.

You can override the default ID property name by adding an idAccessor property on the DataTable, like so:

import { DataTable } from 'mantine-datatable';

export function NonStandardRecordIdsStringExample() {
  return (
    <DataTable
      withTableBorder
      withColumnBorders
      striped
      records={[
        { name: 'Joe Biden', bornIn: 1942 },
        // more records...
      ]}
      columns={[
        { accessor: 'name', width: '100%' },
        { accessor: 'bornIn', textAlign: 'right' },
      ]}
      /**
       * Non-standard record ID.
       * In this case we're using the `name` property, but we could also use dot-notation to access
       * a nested object property value.
       */
      idAccessor="name"
    />
  );
}

The code above will produce the following result:

Name	Born in
Joe Biden	1942
Donald Trump	1946
Barack Obama	1961
George W. Bush	1946
Bill Clinton	1946
George H. W. Bush	1924
Ronald Reagan	1911
Jimmy Carter	1924
Gerald Ford	1913
Richard Nixon	1913

No records

Using functions to generate composite record IDs

You can also use a function to generate record IDs. This is useful for composite IDs, for example, when you need to generate a unique ID based on multiple record properties:

import { DataTable } from 'mantine-datatable';

export function NonStandardRecordIdsFunctionExample() {
  return (
    <DataTable
      withTableBorder
      withColumnBorders
      striped
      records={[
        { bookTitle: 'The Fellowship of the Ring', character: 'Frodo Baggins', bornIn: 2968 },
        // more records...
      ]}
      columns={[
        { accessor: 'character', width: '100%' },
        { accessor: 'bornIn', textAlign: 'right' },
        { accessor: 'bookTitle', noWrap: true },
      ]}
      /**
       * Non-standard record ID.
       * In this case we're using a function that returns a "composite" ID
       */
      idAccessor={({ bookTitle, character }) => `${bookTitle}:${character}`}
    />
  );
}

The code above will produce the following result:

Character	Born in	Book title
Frodo Baggins	2968	The Fellowship of the Ring
Samwise Gamgee	2980	The Fellowship of the Ring
Meriadoc Brandybuck	2982	The Fellowship of the Ring
Peregrin Took	2990	The Fellowship of the Ring
Gandalf	1000	The Fellowship of the Ring
Aragorn son of Arathorn	2931	The Fellowship of the Ring
Legolas	2931	The Fellowship of the Ring
Gimli son of Gloin	2879	The Fellowship of the Ring
Boromir son of Denethor	2978	The Fellowship of the Ring
Frodo Baggins	2968	The Two Towers
Samwise Gamgee	2980	The Two Towers
Meriadoc Brandybuck	2982	The Two Towers
Peregrin Took	2990	The Two Towers
Gandalf	1000	The Two Towers
Aragorn son of Arathorn	2931	The Two Towers
Legolas	2931	The Two Towers
Gimli son of Gloin	2879	The Two Towers
Boromir son of Denethor	2978	The Two Towers
Frodo Baggins	2968	The Return of the King
Samwise Gamgee	2980	The Return of the King
Meriadoc Brandybuck	2982	The Return of the King
Peregrin Took	2990	The Return of the King
Gandalf	1000	The Return of the King