Custom renderers

Table of contents

You can specify a custom renderer for every cell of your table. In particular:

• Default renderer for all header cells
• Default renderer for all body table cells
• Custom renderer for a specific header
• Custom renderer for a specific column

In case both a custom renderer and a default renderer are specified, only the custom renderer will be used.

info

In the next sections other specific renderer types will be defined for some functionality (pagination, selection ...).

Default renderers

Header cell default renderer

To set a default header renderer, firstly define a custom component that will be used to generate all the cells.
Once this is done, all you have to do is set the renderer in the table definition as shown below.

Please note that the type of DefaultHeaderCellProps is imported directly from reTables.

DefaultHeaderCell.tsx

import { DefaultHeaderCellProps } from 'retables';

function DefaultHeaderCell(props: DefaultHeaderCellProps) {
    return (
        <div className='text-xs text-gray-700 uppercase font-extrabold dark:text-gray-400'>
            {props.title}
        </div>
    );
}

CustomRenderersTable.tsx

function CustomRenderersTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            headerRenderer={DefaultHeaderCell} // Apply the default renderer to all header cells
        />
    );
}

columns.ts

export const peopleColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Last name', key: 'about.lastName' },
    { title: 'Age', key: 'about.age', flex: 0.5 },
    { title: 'Job', key: 'about.job', flex: 1.5 },
    { title: 'Company', key: 'company', flex: 1.5 }
];

Live example

Table cell default renderer

The definition of a custom renderer for the table cells is analog to the one seen above.
This time, make sure to use the DefaultCellRendererProps as your input type.

DefaultTableCell.tsx

import { DefaultCellRendererProps } from 'retables';

function DefaultTableCell(props: DefaultCellRendererProps) {
    return <div className='text-center'>{props.text}</div>;
}

CustomRenderersTable.tsx

function CustomRenderersTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            headerRenderer={DefaultHeaderCell}
            cellRenderer={DefaultTableCell} // Apply the default renderer to all table cells
        />
    );
}

columns.ts

export const peopleColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Last name', key: 'about.lastName' },
    { title: 'Age', key: 'about.age', flex: 0.5 },
    { title: 'Job', key: 'about.job', flex: 1.5 },
    { title: 'Company', key: 'company', flex: 1.5 }
];

Live example

Custom specific renderers

Header cell custom renderer

If you need to apply specific styles to just one column, you can specify a custom readerer for each individual header via ColumnConfig via the headerRenderer property. If a default renderer has been specified, it will be overridden.

CustomHeaderCell.tsx

import { ColumnHeaderCellProps } from 'retables';

function CustomHeaderCell(props: ColumnHeaderCellProps) {
    return (
        <div className='text-xs italic text-green-700 uppercase font-extrabold'>{props.title}</div>
    );
}

CustomRenderersTable.tsx

function CustomRenderersTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={customHeaderColumns} // use the updated columns config
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            headerRenderer={DefaultHeaderCell}
            cellRenderer={DefaultTableCell}
        />
    );
}

columns.ts

export const customHeaderColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Last name', key: 'about.lastName', headerRenderer: CustomHeaderCell },
    { title: 'Age', key: 'about.age', flex: 0.5 },
    { title: 'Job', key: 'about.job', flex: 1.5 },
    { title: 'Company', key: 'company', flex: 1.5 }
];

Live example

Table cell custom renderer

A custom renderer can also be specified for each column of the table using the renderer property of ColumnConfig. In this case the entire row object is made available to allow the creation of complex cells.

With this renderer, you are not limited solely by the value specified by the key property.

DoubleTableCell.tsx

import { ColumnCellRendererProps } from 'retables';

function DoubleTableCell(props: ColumnCellRendererProps<Person>) {
    return (
        <div className='whitespace-nowrap w-full overflow-hidden overflow-ellipsis'>
            <div className='font-semibold'>{props.item.about.lastName}</div>
            <div className='opacity-60'>{props.item.about.firstName}</div>
        </div>
    );
}

CustomRenderersTable.tsx

function CustomRenderersTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            headerRenderer={DefaultHeaderCell}
            cellRenderer={DefaultTableCell} // Apply the default renderer to all table cells
        />
    );
}

columns.ts

export const customCellColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Name', key: 'about.lastName', renderer: DoubleTableCell },
    { title: 'Age', key: 'about.age', flex: 0.5 },
    { title: 'Job', key: 'about.job', flex: 1.5 },
    { title: 'Company', key: 'company', flex: 1.5 }
];

Live example