DataTable sortRow function needs additional information

Summary

For <DataTable sortRow="{customSortRow}" ...>, customSortRow function needs additional values (rowA and rowB) to properly sort complex cells.

For a DataTable that contains complex cells, such as a <Link onClick={doClick(row.url)}>{row.name}</Link> , or <>{formatDate(row.date)}</>, the default sort does not handle complex cells correctly. Using sortRow={customSortRow} does not help, because for complex cells, the objects passed to customSortRow(cellA, cellB, …) are React components.

Justification

Our customers will demand the ability to correctly sort even on complex cells.

Desired UX and success metrics

customSortRow will be passed the necessary information (rowA and rowB) to properly sort complex cells.

“Must have” functionality

In addition to the parameters already passed to the customSortRow(cellA, cellB, {key, sortDirection, locale, sortStates, compare}, please add rowA and rowB to the third parameter object.

Specific timeline issues / requests

It is related to a December 2019 deliverable.

Available extra resources

[asudoh]

Hi 👋 thank you for reporting! A workaround is writing state manager for table by your own, our data table has low-level presentational components, like <TableRow>.

[emyarod]

as mentioned earlier most likely you would need to implement this with a custom state manager, meaning you would be implementing that logic using Carbon table primitives like Table, TableHead, TableRow, etc. rather than using the built in state manager in DataTable, if that makes sense