Sorting

The <Table /> component allows by default data sorting by clicking on one of the header cells. This is done using to the key property specified in ColumnConfig.

Custom sort icons

The default sort icons can be changed via the orderIconsConfig prop.

SortingTable.tsx

function SortingTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            // Add custom order icons config
            orderIconsConfig={{
                ASC: () => <p className='h-2 w-4 mr-1 cursor-pointer'>🍎</p>,
                DESC: () => <p className='h-2 w-4 mr-1 cursor-pointer'>🍐</p>,
                INITIAL: () => <p className='h-2 w-4 mr-1 cursor-pointer'>🍋</p>
            }}
        />
    );
}

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

Disable sorting on some headers

If some columns should not be sortable, you can do it via the disableOrderIcon property in ColumnConfig.

columns.ts

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

SortingTable.tsx

function SortingTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={disableSortColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
        />
    );
}

Live example

Custom compare function

By default, retables simply compares the different column values with the native javascript operators (<,>,=). However, this only works well with primitive types like strings and numbers.

If a column displays a complex data type, or the standard comparison simply isn't enough, you can use the compare property of ColumnConfig to indicate a new sort function.

In the next example we will give priority in the job column to people who have an executive title.

The signature of the function is:

compare?: (a: T, b: T) => -1 | 0 | 1;

columns.ts

export const customCompareColumns: 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,
        compare: (a, b) => {
            const isAExecutive = a.about.job.toLowerCase().includes('executive');
            const isBExecutive = b.about.job.toLowerCase().includes('executive');
            if (isAExecutive && !isBExecutive) return -1;
            if (isBExecutive && !isAExecutive) return 1;
            return 0;
        }
    },
    { title: 'Company', key: 'company', flex: 1.5 }
];

SortingTable.tsx

function SortingTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={customCompareColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
        />
    );
}

Live example

Caveats

Currently you can only sort by one column at a time.