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 Biden1942
Donald Trump1946
Barack Obama1961
George W. Bush1946
Bill Clinton1946
George H. W. Bush1924
Ronald Reagan1911
Jimmy Carter1924
Gerald Ford1913
Richard Nixon1913
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 Baggins2968The Fellowship of the Ring
Samwise Gamgee2980The Fellowship of the Ring
Meriadoc Brandybuck2982The Fellowship of the Ring
Peregrin Took2990The Fellowship of the Ring
Gandalf1000The Fellowship of the Ring
Aragorn son of Arathorn2931The Fellowship of the Ring
Legolas2931The Fellowship of the Ring
Gimli son of Gloin2879The Fellowship of the Ring
Boromir son of Denethor2978The Fellowship of the Ring
Frodo Baggins2968The Two Towers
Samwise Gamgee2980The Two Towers
Meriadoc Brandybuck2982The Two Towers
Peregrin Took2990The Two Towers
Gandalf1000The Two Towers
Aragorn son of Arathorn2931The Two Towers
Legolas2931The Two Towers
Gimli son of Gloin2879The Two Towers
Boromir son of Denethor2978The Two Towers
Frodo Baggins2968The Return of the King
Samwise Gamgee2980The Return of the King
Meriadoc Brandybuck2982The Return of the King
Peregrin Took2990The Return of the King
Gandalf1000The Return of the King
No records

Head over to the next example to discover more features.