Tom
Posted on August 24, 2021
Carbon's DataTable supports client-side sorting out of the box. If you need to call a web service to sort your data, it gets a little hackier. This is how I solved it:
First add the isSortable
property to DataTable
:
<DataTable
isSortable
{...rest}
>
Then add the following properties to TableHeader
:
<TableHeader
onClick={() => {
/** Retrieve data from server */
})}
isSortHeader={Boolean}
sortDirection={'ASC' | 'DESC'}
>
{header}
</TableHeader>
Please note I use 3 undocumented features of Carbon here:
- The
onClick
handler is used to override the default behavior (client-side sorting) and can be used to retrieve server data. - The
sortDirection
property is used to display the correct arrow on the sorted column header. -
isSortHeader
indicates that the current column is the one that is sorted.
As these properties are not documented they might change at any time without warning.
Bonus: Make sortable part of the Carbon headers object
Carbon uses a header object to generate table headers, example:
const headers = [
{
key: 'name',
header: 'Name',
},
{
key: 'status',
header: 'Status',
},
];
We can extend this object to indicate whether a certain column is sortable:
const headers = [
{
key: 'name',
header: 'Name',
},
{
key: 'status',
header: 'Status',
sort: 'sortByStatus',
},
];
You can now use the sort
key to determine if the column is sortable, and once clicked, which field the server should sort on. You'll end up with something like this:
{ headers.map( header => (
<TableHeader
{...getHeaderProps({
header,
isSortable: Boolean(header.sort),
})}
onClick={header.sort ? handleSort : undefined}
isSortHeader={Boolean(header.sort)}
sortDirection={getSortDirection(orderBy, header.sort)}
>
{header.header}
</TableHeader>
))}
Typescript
The headers object now gives a TypeScript error, because the sort
doesn't exist. This can be solved as follows:
import { DataTableHeader } from 'carbon-components-react';
export interface DataTableHeader extends DataTableHeader {
sort?: string;
}
Posted on August 24, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.