Question

我已经在ui-semantic-react中创建了一个如下表，

  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

结果为

参考

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

如何使该表默认为按“证据等级”列排序，而无需用户手动单击标题中的排序图标？

Answer 1

语义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用于为数据数组中的每个项目创建一行。您可以在此处传递任何内容，包括其他呈现的react元素，但对于您的用例，似乎需要一个数据对象数组。

就排序顺序而言，该顺序就是您在数据数组中具有的顺序。您可以根据需要对该数组进行排序。有关如何执行此操作的更多信息，请查看this library，this question (for sorting numeric values)或this similar question (for string values)

默认排序表UI语义React

1 个答案: