custom Column.toggleSortBy not called

[tyre]

Might be doing this incorrectly, so bear with me.

I'm using react-table to manage data fetched from a server. The pagination, ordering, and filters are all happening serverside.

Here is my table instance:

const table: TableInstance = useTable({
      data: memoizedData,
      columns: props.columns,
      manualFilters: true,
      manualSortBy: true,
      defaultCanSort: true,
      // when the underlying data changes, don't alter the sort
      autoResetSortBy: false
    },
    useFilters,
    useSortBy
  );

Here is one example column definition with a custom toggleSortBy (in the future those will set controlled state to then re-fetch data but for now they log and throw):

{
        Header: 'Name',
        accessor: (appointment: Appointment) => {
          return [
            appointment.patient.firstName,
            appointment.patient.lastName
          ].join(' ');
        },
        width: 30,
        canSort: true,
        toggleSortBy: (...props: any) => { console.log({ toggleSortBy:props}); throw "toggleSortBy" },
        clearSortBy: (...props: any) => { console.log({ clearSortBy:props}); throw "clearSortBy" }
},

and here is the header definition:

      <TableHeader>
        {headerGroups.map(headerGroup => (
          <TableRow {...headerGroup.getHeaderGroupProps()} header>
            {headerGroup.headers.map(column => {
              return (
                <TableCell
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  width={column.width}
                >
                  {column.render('Header')}<span>
                    {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
                  </span>
                </TableCell>
              )
            })}
          </TableRow>
        ))}
      </TableHeader>

When clicking the headers, the custom toggleSortBy is not called; nothing is logged nor thrown. From what I could gather from the docs and also the function definition of the toggleSortBy function on the column itself, this should call my defined function.

Have I misunderstood the docs or is this a bug?

[e-monson]

Any updates on this? I'm trying to do something similar.

[dioklecijan]

Your custom toggleSortBy and clearSortBy are overwritten in useSortBy hook:

// from useSortBy.js
if (column.canSort) {
      column.toggleSortBy = (desc, multi) => {        
        toggleSortBy(column.id, desc, multi);        
      };
      ...

@tannerlinsley probably forgot to include manualSortBy into the business.

Fastest way to workaround this problem is to introduce new callbacks like toggleSortByCustom and clearSortByCustom which is easy to implement but changes API :(

if (column.canSort) {
      column.toggleSortBy = (desc, multi) => {        
        if (column.toggleSortByCustom) 
          column.toggleSortByCustom(desc, multi);
        toggleSortBy(column.id, desc, multi);
      };
      ...      

If modifying useSortBy hook is no option, you can remove hook and handle column click event.

BTW - this is a great library.

[akshaymittal143]

@tyre : do you have an example for using manualFilters? I am trying to filter via server-side..