Semantic-ui-react: Table sortable

[ssachtleben]

Is sortable table somehow supported? There is no props for this so I tried to add it via the classNames:

<Table basic="very" className="sortable" padded stackable selectable>
....
    <Table.HeaderCell className="sorted descending">

The sort icon shows up but I cant click on the headers to change the sorting.

Anyone got an idea?

[keeslinp]

As far as I know there isn't a baked-in feature for sorting a table (I could be wrong, there's a lot of stuff not in the docs). If I were in your position I would set a onClick event for the icon and just sort the data myself.

[levithomason]

We do not currently support sortable tables, the only supported features are those which have props.

I believe the sorting should happen outside of the component, though, we should certainly provide the callbacks and props for enabling sorting. I'd gladly accept a PR that added this.

[ssachtleben]

Ok thanks for the information. I will try to add the sorting myself and see if it fits into the lib.

[svrcekmichal]

@ssachtleben I believe it is impossible to make universal sorting for lib but I would add at least props which will activate sorting visually and let everyone implemenet what is needed. @levithomason I can make PR with changes:

• add sortable to Table
• add sorted="ascending" OR sorted="descending" to Table.HeaderCell

[belohlavek]

FWIW, I'm working on a generic table component in my spare time (supports sorting among other features).
Current demo uses Semantic but it's designed to work with any UI library.
https://github.com/belohlavek/react-tabler

[svrcekmichal]

@belohlavek Yeah, that's what I believe is good. You can create custom data sort library and use semantic-ui-react for only visual sorting. Than you can implement what ever algorithm you want.

[levithomason]

@levithomason I can make PR with changes:

• add sortable to Table
• add sorted="ascending" OR sorted="descending" to Table.HeaderCell

@svrcekmichal Precisely what I was thinking. Then, users can use the click handlers to sort their data and re-render the table.

[layershifter]

Closing for housekeeping. Follow for #1195.

[levithomason]

Note, this is available in 0.64.4 including typings. The doc site is only pending some examples.

[hopewise]

@ssachtleben did you have it working with the new release? can you share an example please