Mantine DataTable

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { DataTable } from 'mantine-datatable';

dayjs.extend(relativeTime);

export default function DefaultColumnPropertiesExample() {
  return (
    <DataTable
      withBorder
      withColumnBorders
      striped
      records={[
        { id: 1, bookTitle: 'The Lord of the Rings', published: new Date(1954, 6, 29), pages: 1178, chapters: 37 },
        // more records...
      ]}
      columns={[
        { accessor: 'bookTitle', width: '100%', textAlignment: 'left' },
        {
          accessor: 'published',
          render: ({ published }) => dayjs(published).fromNow(),
        },
        { accessor: 'pages' },
        { accessor: 'chapters' },
      ]}
      defaultColumnProps={{
        textAlignment: 'right',
        noWrap: true,
        ellipsis: true,
        cellsSx: { fontStyle: 'italic' },
        titleSx: (theme) => ({ '&&': { color: theme.colors.green[6] } }),
      }}
    />
  );
}