Examples › Default column render

If you provide a defaultColumnRender function to the DataTable, it will be used to render the cells of all columns that don’t have their own render function.
The defaultColumnRender function receives the current record, its index in records and the column accessor as arguments, and should return a ReactNode.

In the example below, a single function renders strings as they are and dates as relative time intervals, so the columns don’t need individual render functions:

Book title	Published
The Lord of the Rings	72 years ago
The Hobbit	89 years ago
The Silmarillion	49 years ago
The Children of Húrin	19 years ago
The Fall of Gondolin	8 years ago
The Lay of Aotrou and Itroun	7 years ago
The Lays of Beleriand	7 years ago
The Book of Lost Tales, Part One	42 years ago
The Book of Lost Tales, Part Two	42 years ago

No records

Here is the code for the above example:

'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();
      }}
    />
  );
}

A column’s own render function always takes precedence over defaultColumnRender.
Also keep in mind that defaultColumnRender receives the accessor as-is; if you’re using dot-notation accessors such as 'department.name', you can resolve them with the getValueAtPath(record, accessor) helper exported by the package.

Head over to the next example to learn more.

Go back

Examples › Default column properties

Up next

Examples › Row styling