React-table: Disable multi-sort (shift)

[timkelty]

I'm using server-side rendering that does not support multi-column sorting.

How can I disable shift-click multi-sorting?

[gary-menzel]

There's no flag to do this. Is it causing problems (where the code breaks) or is it just an inconvenience? When you say you are using ssr - is that for the whole table or just the data itself ?

[timkelty]

@gary-menzel In truth I'm using Algolia for the search results, not SSR, but the application should be similar. The component is re-rendered with any sort change, so results.hits will always be current (ie, I don't want ReactTable to do any sorting of its own).

It doesn't quite _break_, no, the results are just misleading. The UI allows _looks_ like you're multi-sorting, but given my results, it really isn't.

      ReactDOM.render(
        <ReactTable
          data={results.hits}
          columns={columns}
          manual
          pageSize={null}
          showPagination={false}
          showPageJump={false}
          onSortedChange={onSortedChange}
        />,
        containerNode
      );

[gary-menzel]

Have you considered just disabling the sorting on ReactTable then ?

[gary-menzel]

You could potentially do some clever things by overriding the ThComponent - I was going to suggest looking at replacing the toggleSort prop function to tell it not to take any notice of the shiftKey (which is what triggers the multi sorting). The ThComponent body is not very complex and your replacement would get all the props as well as being able to override toggleSort.

You could also consider just replacing ThComponent completely so it was more aligned with the external package.

This is what the current toggleSort looks like on the component in the code (and is the only place where it does this).....

          toggleSort={e => {
            isSortable && this.sortColumn(column, e.shiftKey)
          }}

You could try overriding this with something like:

getThProps: (e)=>{
// you'd have to work out how to call the sort routine
// better still you could just call your own code instead of using the onSortedChange

// NOTE: because this is called during a render you'd have to work out a sensible way
// to get around the setState loop you might trigger
// but if you called another library that pushes props down, it should not be an issue

}

[timkelty]

Thanks! I'll try that approach out.

Would you be open to a PR with a multiSort bool prop defaulting to true?

[gary-menzel]

PRs are always welcome - however, due to the few who can actually do the merge and the deployment of a new version may mean it would take a while to make it into a public build.

[gary-menzel]

I am reopening this as I may be able to sneak it in with some other source code work I am doing at the moment.

[timkelty]

Hooray, thanks!

[gary-menzel]

A PR for this change has been submitted. I am just not sure when it will be merged into a new version.

[gary-menzel]

This should now be released in 6.7.5