A new sort approach

[ShahriarKh]

const [records, setRecords] = useState(data); /* whatever the data is */
const [activeSort, setActiveSort] = useState({ columnAccessor: null, direction: null });

function handleSort(x) {
   let newSort;
    if (x === activeSort.columnAccessor) {
        if (activeSort.direction === "asc") {
            newSort = { columnAccessor: x, direction: "desc" };
        } else {
            newSort = { columnAccessor: null, direction: null };
        }
    } else {
        newSort = { columnAccessor: x, direction: "asc" };
    }
    setActiveSort(newSort)
    setRecords(orderBy(registers, newSort.columnAccessor, newSort.direction)); /* loadsh/orderBy */
}

<DataTable
    columns={[
        { accessor: "id", sortable: true },
        { accessor: "something", sortable: true },                
        { accessor: "something.else", sortable: true },
    ]}
    records={records}
    sortStatus={activeSort}
    onSortStatusChange={(col) => handleSort(col.columnAccessor)}
/>

I tweaked the sorting example and made it so that the users can disable the sorting by clicking on the header. So, instead of asc -> desc, it will be like asc -> desc -> no sort.
What do you think?

[otobot1]

I feel like in most situations I would want to force the user to be sorting by at least 1 column. On the other hand, if there is a need for it then more configuration flexibility is usually a good thing so shrug.

[ShahriarKh]

Yeah, sorting by multiple columns is required in many situations, and by passing an array to _loadsh's orderBy (not sortBy), it's possible. However, what I did here is to let the user "unselect" a filter by clicking on it. In the example found in the docs, it isn't possible; clicking on a table header only selects the filter and there's no way to unselect it.