Semantic-UI Table, persistent sort

Question

Is there a way to make Semantic-UI Table sort to be persistent across multiple component re-renders. For example if I sort ascending by column "Name" is there a way to make this sort stay applied even when my table parent component re-renders ?

Is there a way to do this without messing with table implementation ?

Answer 1

Based on your demand,I have created an example for you.And the output is like in the picture.

The input and checkbox in the bottom is simulating the user add data.After click on "Submit" button,the data will add in the Table in order automatically.The method to handle the data adding is like the below:

addDate1 = () => {

    const { column, data, direction} = this.state
    let addData = {
        name: this.state.inputName,
        age: this.state.inputAge,
        gender: this.state.gender
    }
    let newData = [...data,addData]
    if (!column){
        console.log('Please select a colume')
    } else if (column === 'name'){
        this.setState({
            column: 'name',
            data: _.sortBy(newData, ['name']),
            direction: 'ascending',
        })
    } else if (column === 'age'){
        this.setState({
            column: 'age',
            data: _.sortBy(newData, ['age']),
            direction: 'ascending',
        })
    } else if (column === 'gender'){
        this.setState({
            column: 'gender',
            data: _.sortBy(newData, ['gender']),
            direction: 'ascending',
        })
    } else {
        console.log('error')
    }
}

And the working example is in here: https://codesandbox.io/s/github/stackOverflow166/setable

Answer 2

For sure, you can set a column name to sort (IE: "Name") and direction ("ASC"/"DESC") in your local state/redux state and then apply sort based on state on each reload.

This is well demonstrated in the DOCS:

import _ from 'lodash'
import React, { Component } from 'react'
import { Table } from 'semantic-ui-react'

const tableData = [
  { name: 'John', age: 15, gender: 'Male' },
  { name: 'Amber', age: 40, gender: 'Female' },
  { name: 'Leslie', age: 25, gender: 'Female' },
  { name: 'Ben', age: 70, gender: 'Male' },
]

export default class TableExampleSortable extends Component {
  state = {
    column: null,
    data: tableData,
    direction: null,
  }

  handleSort = clickedColumn => {
    const { column, data, direction } = this.state

    if (column !== clickedColumn) {
      this.setState({
        column: clickedColumn,
        data: _.sortBy(data, [clickedColumn]),
        direction: 'ascending',
      })

      return
    }

    this.setState({
      data: data.reverse(),
      direction: direction === 'ascending' ? 'descending' : 'ascending',
    })
  }

  render() {
    const { column, data, direction } = this.state

    return (
      <Table sortable celled fixed>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell
              sorted={column === 'name' ? direction : null}
              onClick={this.handleSort('name')}
            >
              Name
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'age' ? direction : null}
              onClick={this.handleSort('age')}
            >
              Age
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'gender' ? direction : null}
              onClick={this.handleSort('gender')}
            >
              Gender
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {_.map(data, ({ age, gender, name }) => (
            <Table.Row key={name}>
              <Table.Cell>{name}</Table.Cell>
              <Table.Cell>{age}</Table.Cell>
              <Table.Cell>{gender}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    )
  }
}

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