Mantine DataTable

import { DataTable } from 'mantine-datatable';

export default function NonStandardRecordIdsExample() {
  return (
    <DataTable
      withBorder
      withColumnBorders
      striped
      records={[
        { name: 'Joe Biden', bornIn: 1942 },
        // more records...
      ]}
      columns={[
        { accessor: 'name', width: '100%' },
        { accessor: 'bornIn', textAlignment: '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"
    />
  );
}

import { DataTable } from 'mantine-datatable';

export default function NonStandardRecordIdsFunctionExample() {
  return (
    <DataTable
      withBorder
      withColumnBorders
      striped
      records={[
        { bookTitle: 'The Fellowship of the Ring', character: 'Frodo Baggins', bornIn: 2968 },
        // more records...
      ]}
      columns={[
        { accessor: 'character', width: '100%' },
        { accessor: 'bornIn', textAlignment: '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}`}
    />
  );
}