React-table: [Feature] Pass sorting state in props to Header and ThComponent

[simonedavico]

What version of React-Table are you using?

Version 6.5.3

What bug are you experiencing, or what feature are you proposing?

Feature proposal: pass sorting state in props to Header and ThComponent.
This would allow to implement conditional rendering for the header depending on the column's sorting state.

What are the steps to reproduce the issue?

No issue to reproduce. Would you ben open to a pull request implementing this change?

[gary-menzel]

If we were to pass the sorted data to the head components then it would also make sense to provide it to address #457 ?

[simonedavico]

In the meantime, if someone wants to get sorting state in the column header of the table, it can be achieved by providing a custom getTheadThProps:

export const getTheadThProps = ({ sorted }, rowInfo, column) => ({
  sorted: sorted.find(col => col.id === column.id)
});

I use it in a custom ColumnHeader:

const ColumnHeader = ({ toggleSort, className, children, sorted, ...rest }) => (
  // render logic leverages sorted props
)

ColumnHeader.propTypes = {
  sorted: PropTypes.shape({
    sorted: PropTypes.bool,
    id: PropTypes.string
  }).isRequired,
  // more propTypes
};

and finally

<ReactTable
    ThComponent={ColumnHeader}
    getTheadThProps={getTheadThProps}
    // more props
/>

[gary-menzel]

V 6.7.4 addresses a number of PRs - was one submitted for this and is it now in that version?

If so, this issue can be closed. Otherwise, maybe someone would like to submit a PR for a suggested change.

[simonedavico]

@gary-menzel is there a changelog somewhere? I wanted to check the additions to v6.7.4, but the changelog file is out of date. Nevertheless, if this is not implemented yet and you think it could be useful I can work on a PR, just let me know :)

[gary-menzel]

I don't think what you want was submitted in any PR. The best place to look at the changes is from the Pull Requests item (look at the closed ones and sort by recently updated). There is no automated change log - but if there were, it would just be pulled from the PRs.

Basically, if it wasn't in a PR then it hasn't been implemented as tanner is up to his neck in changes for react-static at present.

PRs seem to take between 2-3 weeks to get merged at present and usually when there are enough of them to warrant all the deployment work (updating npm, etc.).

[simonedavico]

I looked at the closed PRs from August up to today and this doesn't seem to be implemented. I'll try to put something together as soon as I can.

[gary-menzel]

Yeah - there were some other things related to sorting and components but I was not convinced this request was in there (hence I left it open).

[simonedavico]

I'm implementing the feature, I think it was enough to change the default getTheadThProps.
How should I go about testing this? The storybook relies on CodeSandbox and does not load the local react-table. Any suggestion?

[gary-menzel]

There is currently no way to check the examples during development. As you have pointed out, the examples were split out into codesandbox.io and aren't part of the main source (this is partially why development has slowed down on any major features - and there is no solution in sight as yet).

[simonedavico]

I will try to put together an example using my local copy and submit the PR.

[gary-menzel]

I've been discussing with @tannerlinsley as to how we might go about doing testing during development but all I have done is added my own examples folder in the storybook and got a basic page working off build changes. I have not actually contributed anything but I might look at putting those examples into a different repo and just including them when I want to work on it.

A nicer solution would be to try some of the github integration or API of codesandbox (but I think that is still in some state of flux for now and I just don't even have time to work on react-table let alone get that resolved).

[simonedavico]

What about integrating styleguidist? I've been using it to demo a component collection and it's easy to integrate.

[gary-menzel]

The reason for the demos being on codesandbox is the flexibility it brings in being able to just add other components into an existing example. You can easily fork an example, add some other packages (like a Datepicker or a Chart tool) and see if you can integrate them.

react-story is a home-grown "storybook" style of tool (like styleguidist) but it is now only being used for the main doco page and then a menu back into all the examples on codesandbox.

So the "challenge" is not the storybook but to retain all the examples on codesandbox (and keep them up-to-date) as well as keeping the bulk in the main source to a minimum.

[simonedavico]

Yeah, I guess that my problem would be better solved with tests. I see there is a test target in package.json, but it only runs the linter. It may be worthwhile to consider some snapshot tests.

[tannerlinsley]

Closing due to issue age. If you think this issue needs to be reopened, please check the latest version of React-Table for the issue once more and reopen if appropriate. Thanks!

Specifically for this issue, plan on an overhaul of React-Table coming down the pipeline soon, complete with unit tests.

[ertejaspatel]

Hi,

Has this been implemented ? If not - What would be the easiest way to change header content based on sort change?