Hopefully you can help me with a problem that i have. I'm using React Table on my site. I'd like to use the properties filterable and sortable at the same time. I've noticed that when I use filterable, sortable doesn't work anymore. Can be a bug of React Table? Do you know how can I tackle this problem?
const columns = () => [
{
Header: 'Name',
accessor: 'name',
sortable: true,
},
{
Header: 'ID',
accessor: 'id',
width: 80,
sortable: true,
},
{
Header: 'Country',
accessor: 'country',
width: 100,
filterable: true,
Filter: ({ filter, onChange }) => (
// DROPDOWN WITH OPTIONS ...
),
},
]
I forgot to mention that i was using react-table v6. As some of you have said, definitely was possible to use filterable and sortable at the same time. Unfortunately it seems that this need to be done using a different row. If for example you want to filter by a dropdown, this is place underneath the column label.
After debugging a lot, I noticed that my problem came from CSS. The filterable row was on the top of the columns label and therefore, disabling the sortable function. Not sure if you have ever seen an example of how to tackle this. To replace the column label for the the select tag. If so.. i'll really appreciate if you share it. Thanks a lot for your answers
You definitely can make a table filterable and sortable at the same time with react-table hooks. I created an example to illustrate it:
You don't need to pass sortable or filterable props to your array of columns. If you implemented filtering on your table and want to add sorting all you have to do is to follow next steps:
useSortBy hookuseTable hook after useFilters hook : useTable(..., useFilters, useSortBy)th element some UI which will show a user the order of sorting:<span>
{column.isSorted ?
column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
This is a modification that shows how it can work for you (as your entire solution was not shared). See: https://github.com/vaclav18/react-table/blob/master/examples/filtering/src/App.js
Live example is here: https://react-table.tanstack.com/docs/examples/filtering
The live example is for filtering only - so the changes would be at: line 3 line 277 line 347 The sortable: true is not necessary here
Please refer to /docs/src/pages/docs/api/useSortBy.md for more insight.