Add docs for sortable Table and sorted TableCell

[levithomason]

See #1109 which was merged without:

• docs
• typings

[levithomason]

/cc @ben174

[layershifter]

PR for typings was merged, we need docs 😄

[levithomason]

Updated the description with a task list, thanks!

[ben174]

Trying to wrap my head around how this sorting functionality is expected to be implemented. Shouldn't there be a onColumnSorted property for the table? I don't see it in the PR.

[levithomason]

It is a style only prop, it does not affect your data. Use a click handler to handle sorting and updating the sort direction.

[hopewise]

It seems that its not working?

I have tried as:

<Table celled className="sortable">
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell >First Name</Table.HeaderCell>
                    <Table.HeaderCell sorted='descending'>Last Name</Table.HeaderCell>
                    <Table.HeaderCell>Circuit title</Table.HeaderCell>
                    <Table.HeaderCell>Created at</Table.HeaderCell>
                    <Table.HeaderCell>Updated at</Table.HeaderCell>
                    <Table.HeaderCell></Table.HeaderCell>
                </Table.Row>
            </Table.Header>

for the sorted cell above, I tried both enums for sorted property, but the table list users the same order

is there some consideration when building the table rows?
I do build it like this:

<Table.Body>
                {this.state.experiments.map(experiment=>(
                    <Table.Row key={experiment.id}>
                        <Table.Cell collapsing>
                            <a href={experiment.user_url} target="_blank">
                                {experiment.creator.firstname}
                            </a>                             
                        </Table.Cell>
                        <Table.Cell collapsing>
                            <a href={experiment.user_url} target="_blank">
                                {experiment.creator.lastname}
                            </a>                             
                        </Table.Cell>

also, clicking on arrow of table header cell will not do anything, I have:

"semantic-ui-react": "^0.86.0"

[levithomason]

The prop just adds the styling to appear sortable. See the logic here:

https://react.semantic-ui.com/collections/table/#variations-sortable