sharing sortFns across columns

[gofford]

Hey @rwieruch -- great library you've created here!

Question: in sorting, is it possible to obtain the index or name of the column clicked for sorting?

Context: I'm working with data where I don't know the columns up-front, so I'm trying to implement generic sorting based on the data type of the column. All of the existing examples use dedicated sorfFns for each column. What I'm looking for is something like:

const sort = useSort(
        data,
        {
            onChange: (action, state) => {
                console.log(action, state);
            }
        },
        {
            sortToggleType: SortToggleType.AlternateWithReset,
            sortFns: {
                text: (array, ...) => array.sort((a, b) => a[??].localeCompare(b[??])),
                numeric: (array, ...) => array.sort(...)
            }
        }
    );

where [??] would hopefully be some form of generic selector for the selected column.

Any ideas?

[rwieruch]

Yes. Usually you have to write sortFns for each column. What may help is defining the columns as an array and then using this array to create the sortFns on the fly:

const columns = [
	{
		title: 'Name',
		sortKey: 'NAME',
		sortFn: (nodes: TableNode[]) =>
			nodes.sort((a, b) => a.name?.localeCompare(b.name)),
		getContent: (node: TableNode) => node.name
	},
	{
		title: 'Description',
		sortKey: 'DESCRIPTION',
		sortFn: (nodes: TableNode[]) =>
			nodes.sort((a, b) => a.description?.localeCompare(b.description)),
		getContent: (node: TableNode) => node.description
	},
 ];

And in your useSort hook:

const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortFns: columns
        .reduce(
          (acc, column) => ({ ...acc, [column.sortKey!]: column.sortFn }),
          {}
        ),
    }
  );

Does this help?

[gofford]

A variant of this worked perfectly, thank you!