Default sorted table ui-semantic React

Question

I've created a table in ui-semantic-react as following,

  import React from 'react'
import { Header, Table, Rating } from 'semantic-ui-react'
const TableExamplePadded = () => (
  <Table celled padded>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell singleLine>Evidence Rating</Table.HeaderCell>
        <Table.HeaderCell>Effect</Table.HeaderCell>
        <Table.HeaderCell>Efficacy</Table.HeaderCell>
        <Table.HeaderCell>Consensus</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Header as='h2' textAlign='center'>
            A
          </Header>
        </Table.Cell>
        <Table.Cell singleLine>Power Output</Table.Cell>
        <Table.Cell>
          <Rating icon='star' defaultRating={3} maxRating={3} />
        </Table.Cell>
        <Table.Cell textAlign='right'>
          80% <br />
          <a href='#'>18 studies</a>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Header as='h2' textAlign='center'>
            A
          </Header>
        </Table.Cell>
        <Table.Cell singleLine>Weight</Table.Cell>
        <Table.Cell>
          <Rating icon='star' defaultRating={3} maxRating={3} />
        </Table.Cell>
        <Table.Cell textAlign='right'>
          100% <br />
          <a href='#'>65 studies</a>
        </Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
)
export default TableExamplePadded

which results in

reference

https://react.semantic-ui.com/collections/table/#types-structured

How do I make this table default sorted by column 'Evidence Rating' without user having to manually click on a sorting icon in header?

Garrett Motzner · Answer 1 · 2019-01-31T22:03:57.087

Semantic UI React doesn't include built in sorting. There are no sorting icons in the header, unless you add them. It will render exactly what you tell react to render, in the order given. So in order to get sorting, you'll need to separate the data from the presentation, and then sort the data how you wish:

const TableExamplePadded = ({tableData}) => ( // extract the prop `tableData` from props
  <Table celled padded>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell singleLine>Evidence Rating</Table.HeaderCell>
        <Table.HeaderCell>Effect</Table.HeaderCell>
        <Table.HeaderCell>Efficacy</Table.HeaderCell>
        <Table.HeaderCell>Consensus</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      {tableData.map((rowData) => ( // render one row per item in tableData
      <Table.Row key={rowData.key}> // let react know which data item a row corresponds to using `key`
        <Table.Cell>
          <Header as='h2' textAlign='center'>
            {rowData.evidenceRating}
          </Header>
        </Table.Cell>
        <Table.Cell singleLine>{rowData.evidenceRating}</Table.Cell>
        <Table.Cell>
          <Rating icon='star' defaultRating={rowData.efficacy} maxRating={3} />
        </Table.Cell>
        <Table.Cell textAlign='right'>
          {tableData.concensusPercentage}% <br />
          <a href='#'>{tableData.consensusStudyCount} studies</a>
        </Table.Cell>
      </Table.Row>
      ))}
    </Table.Body>
  </Table>
)

and you would render this in another component like: <TableExamplePadded tableData:{sortedData} />

What is happening here is that data (an array of objects) is now being passed in as the tableData prop (it could be whatever name you wanted, but tableData made sense to me) to the table structure, and the .map is used to create a row for every item in the data array. You could pass in anything here, including other rendered react elements, but for your use case an array of data object seems about what you want.

As far as sort order goes, the order is whatever order you have in your data array. You can sort that array however you want. For more info on how to do that, take a look at this library, this question (for sorting numeric values), or this similar question (for string values)

Default sorted table ui-semantic React

1 Answers1