Sorting Table Semantic UI React not working?

Question

Hi everyone i have just copied exactly from the website the code for the DataTable from React Semantic Ui https://react.semantic-ui.com/collections/table/#variations-sortable , and everything works perfectly , except that the descending sort does not work , when i click for the first time it sorts ascending but when i click again (the console print descending) but then nothing change in the table anymore.

import _ from 'lodash'
import React 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: 'Other' },
  { name: 'Ben', age: 70, gender: 'Male' },
]

function exampleReducer(state, action) {
  switch (action.type) {
    case 'CHANGE_SORT':
      if (state.column === action.column) {
        return {
          ...state,
          data: state.data.reverse(),
          direction:
            state.direction === 'ascending' ? 'descending' : 'ascending',
        }
      }

      return {
        column: action.column,
        data: _.sortBy(state.data, [action.column]),
        direction: 'ascending',
      }
    default:
      throw new Error()
  }
}

function TableExampleSortable() {
  const [state, dispatch] = React.useReducer(exampleReducer, {
    column: null,
    data: tableData,
    direction: null,
  })
  const { column, data, direction } = state

  return (
    <Table sortable celled fixed>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell
            sorted={column === 'name' ? direction : null}
            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'name' })}
          >
            Name
          </Table.HeaderCell>
          <Table.HeaderCell
            sorted={column === 'age' ? direction : null}
            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'age' })}
          >
            Age
          </Table.HeaderCell>
          <Table.HeaderCell
            sorted={column === 'gender' ? direction : null}
            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'gender' })}
          >
            Gender
          </Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map(({ 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>
  )
}

export default TableExampleSortable

Pechlivanis Dimitrios · Accepted Answer · 2020-10-10 12:20:47Z

2

Maybe the reducer doesn't like the fact that it's state is manipulated directly: state.data.reverse(), so i tried to solve it by

using the lodash method for sorting and clone data: _.reverse(_.clone(state.data)).
without the use of lodash data: state.data.slice().reverse() Both ways seemed to work.

answered Oct 10, 2020 at 12:20

Pechlivanis Dimitrios

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alexjbrown2 Over a year ago

Thanks so much for this answer. I was banging my head against the wall because I literally had the exact same code from the documentation and it wasn't working.

Collectives™ on Stack Overflow

Sorting Table Semantic UI React not working?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related