2

I am using react-table v7 to create a basic datatable with column sorting. I am adding an aria-sort attribute to the column headers (<th>) tags.

What I am trying to do is make sure that when someone decides to sort a specific column, when isSortedDesc is true, the aria-sort attribute should get set to aria-sort='descending' otherwise it should be set to aria-sort='ascending' and if isSorted is true then set aria-sort='none'

I am able to set aria-sort correctly based on the conditions, but the problem I'm running in to is that when I click on "First Name" it doesn't change the aria-sort attribute for that column but instead changes the aria-sort attribute for "Last Name" and so on.

Any ideas why this is happening?

You can see the problem in this code sandbox. Inspect the table header and you should see the aria-sort attribute on each <th>. Try to sort by "First Name" and you will see that the aria-sort attribute on "Last Name" changes.

https://codesandbox.io/s/happy-sammet-677rfi?file=/src/App.js

Pajama_Jeans
  • 49
  • 4
  • I'm not entirely sure why your original behavior happens, but an interesting property emerges that for every *n*-th column that is sorted, the aria attribute on the *n+1*-th column is altered instead. "First Name" toggles "Last Name", "Last Name" toggles "Age", and so on, until the end. Something similar happens if you attempt to add a `sortDirection` attribute to the `column` where you're using sortDirection now. I imagine this is something related to React or JS render/life-cycles, with a simple fix, but I can't think of it right now. – toki Oct 07 '22 at 06:56

0 Answers0