Mantine DataTable

'use client';

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

dayjs.extend(relativeTime);

const records = [
  { id: 1, bookTitle: 'The Lord of the Rings', published: new Date(1954, 6, 29), pages: 1178, chapters: 37 },
  // more records...
];

const average = (arr: number[]) => arr.reduce((a, b) => a + b, 0) / arr.length;
const minPublishingDateYearsAgo = dayjs().diff(Math.min(...records.map((r) => r.published.valueOf())), 'years');
const maxPublishingDateYearsAgo = dayjs().diff(Math.max(...records.map((r) => r.published.valueOf())), 'years');

export function DefaultColumnPropertiesExample() {
  return (
    <DataTable
      withTableBorder
      withColumnBorders
      striped
      records={records}
      columns={[
        { accessor: 'bookTitle', width: '100%', textAlign: 'left' },
        {
          accessor: 'published',
          render: ({ published }) => dayjs(published).fromNow(),
          footer: `${maxPublishingDateYearsAgo} to ${minPublishingDateYearsAgo} years ago`,
        },
        {
          accessor: 'pages',
          footer: `μ ${Math.round(average(records.map((r) => r.pages)))}`,
        },
        {
          accessor: 'chapters',
          footer: `μ ${Math.round(average(records.map((r) => r.chapters)))}`,
        },
      ]}
      defaultColumnProps={{
        textAlign: 'right',
        noWrap: true,
        ellipsis: true,

        // 👇 customize cell style based on record data and Mantine theme
        cellsStyle: ({ bookTitle }) =>
          bookTitle === 'The Hobbit' ? (theme) => ({ fontStyle: 'italic', color: theme.colors.red[6] }) : undefined,
        // ...or you could simply return this, if you don't use the record data and Mantine theme:
        //    `cellsStyle: () => ({ fontStyle: 'italic', color: '#F00' })`

        // 👇 customize column title style based on Mantine theme
        titleStyle: (theme) => ({ color: theme.colors.green[6] }),
        // ...or you could simply return an object, if you don't use Mantine theme:
        //    `titleStyle: { color: '#0F0' }`

        footerStyle: (theme) => ({ color: theme.colors.blue[6] }),
      }}
    />
  );
}