Mantine DataTable

'use client';

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

dayjs.extend(relativeTime);

export function DefaultColumnRenderExample() {
  return (
    <DataTable
      withTableBorder
      withColumnBorders
      striped
      records={[
        { bookTitle: 'The Lord of the Rings', published: new Date(1954, 6, 29) },
        // more records...
      ]}
      idAccessor="bookTitle"
      columns={[
        { accessor: 'bookTitle', width: '100%' },
        { accessor: 'published', textAlign: 'right', ellipsis: true },
      ]}
      defaultColumnRender={(row, _, accessor) => {
        const data = row[accessor as keyof typeof row];
        return typeof data === 'string' ? data : dayjs(data).fromNow();
      }}
    />
  );
}