Сортированная по умолчанию таблица ui-semantic React - PullRequest
Новая
       27

Сортированная по умолчанию таблица ui-semantic React

0 голосов
/ 31 января 2019

Я создал таблицу в ui-semantic-реакции следующим образом: 

  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

, что приводит к enter image description here

ссылка

https://react.semantic -ui.com / collection / table / # types-структурированные

Как мне сделать эту таблицу по умолчанию отсортированной по столбцу 'Evidence Rating'без необходимости вручную нажимать на значок сортировки в заголовке?

1 Ответ

0 голосов
/ 01 февраля 2019

Semantic UI React не включает встроенную сортировку.В заголовке отсутствуют значки сортировки, если вы их не добавите.Он будет отображать именно то, что вы говорите, реагировать на визуализацию в указанном порядке.Таким образом, чтобы выполнить сортировку, вам нужно отделить данные от презентации, а затем отсортировать данные, как вы хотите: 

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>
)

, и вы должны отобразить это в другом компоненте, например: <TableExamplePadded tableData:{sortedData} />

Что здесь происходит, так это то, что данные (массив объектов) теперь передаются как tableData опора (это может быть любое имя, которое вы хотите, но tableData имеет смысл для меня)структура таблицы, а .map используется для создания строки для каждого элемента в массиве данных.Здесь вы можете передать все, что угодно, в том числе и другие визуализированные элементы реагирования, но для вашего варианта использования массив объектов данных выглядит так, как вам нужно.

Что касается порядка сортировки, то он будет в любом порядке в вашем массиве данных.Вы можете сортировать этот массив по своему усмотрению.Для получения дополнительной информации о том, как это сделать, посмотрите эту библиотеку , этот вопрос (для сортировки числовых значений) или этот аналогичный вопрос (для строковых значений)

...