React-table: Internal sort state overriding controlled sort state

[ldstein]

Problem Description

When defining a controlled sort state via the sorted prop, React table appears to be updating it's view based on it's internal state.

Expected Behaviour:

1. Internal model is updated with new sort parametrics.
2. onSortedChange is fired

Actual behaviour:

1. Internal model is updated with new sort parametrics.
2. onSortedChange is fired
3. Table is re-rendered to reflect changes to internal state (now different to controlled state)

Code Snippet(s)

See https://codepen.io/anon/pen/VbNPda?editors=0010

Steps to Reproduce

In the above code snippet, rendering occurs on a fixed loop and the application state never changes.

If you click on the headers, you'll notice the sorting behaves erratically as it renders it's own internal state immediately followed by the controlled sort state.

One thought that occured to me: Is the sorted prop really a defaultSorted prop? Ie more like the behaviour of defaultValue and value on React's Input component.

System Information

• Browser & Browser Version:58.0.3029.110 (64-bit)
• Node Version:n/a
• OS Version:Windows 10 x64
• NPM Version:n/a
• Yarn Version:n/a

[tannerlinsley]

A few things first:

• You are right that the table does maintain internal state all the time.
• sorted is a controlled prop, which overrides the internal state.
• onSortedChange is a callback that fires when the user changes the desired sorting model.

So whats happening here is the following:

• You are rendering the table manually via ReactDOM every 500ms. I'm not sure why you're doing this, but for the sake of the issue, let's keep going.
• When the user clicks on a header to change the sort, the table resorts. This is because the internal sorting model has changed (it is always tracked regardless of controlled props)
• Because you are merely logging the new sorting value from onSortedChange, and not immediately placing it in the sorted prop, the table does not detect a change on the sorted prop.
• Technically the only change that has occurred is an internal sorting change. The sorted prop has not changed at all, and because of this, the table will default to using the sorting that did change from the internal state.

To fix this problem, you would simply need to capture the sorting change from the callback, and replace the current sorted prop with the new value.

I understand that this may feel strange at first, and maybe it is. I won't technically consider this a bug, but it is an edge case that we could handle better. I'll keep this in consideration for the future, but I've provided a codepen that shows how to fix the issue: https://codepen.io/tannerlinsley/pen/zwVLKp?editors=0010