2

我有一个按应用的初始排序顺序分组的表。

我希望能够在 UI 上进行排序，但同时保留初始分组排序顺序。

所以它就像一个多重排序，但一个排序规则总是应用于组。

这是最初的排序规则：

  const initialSortBy: Array<RisksIdentifiedSortBy> = [
    {
      id: DataAccessors.RISK_SCORE,
      desc: true,
    },
    {
      id: DataAccessors.GROUP,
      desc: false,
    },
  ];

RISK_SCORE列将是可排序的：

{
    Header: (): JSX.Element => {
      return (
        <Box sx={{ margin: 'auto' }}>
          {t('policy-management/summary:TABLE.HDR.RISK_SCORE')}
        </Box>
      );
    },
    accessor: DataAccessors.RISK_SCORE,
    sortType: 'alphanumeric',
    Cell: ({
      value,
      row,
    }: DataTableCell<RiskLevel>): JSX.Element | null => {
      return !row.canExpand ? (
      ...
      ) : null;
    },
  },

而且我们会强制RISK_GROUP每次都进行相同的排序，而不是通过用户交互来排序：

  {
    Header: t('policy-management/summary:TABLE.HDR.RISK_GROUP'),
    accessor: DataAccessors.GROUP,
    Cell: ({ value }: DataTableCell<string>): string => value,
    SubCell: ({ row }: Pick<DataTableCell<any>, 'row'>): JSX.Element => {
      const {
        original: { riskCategory },
      } = row;
      return <Box sx={{ ml: '1.5rem' }}>{riskCategory}</Box>;
    },
    width: '20%',
    disableSortBy: true,
  },

任何想法如何做到这一点？

我认为这类似于在对另一列进行排序时以编程方式在一个列中设置排序选项？

4

3 回答 3

0 
useTable({ columns, data, autoResetSortBy: false }, useSortBy))
于 2021-12-13T04:31:33.717 回答
0

我设法通过按照此处的建议将受控状态传递到我的表中来做到这一点：

https://react-table.tanstack.com/docs/faq#how-can-i-manually-control-the-table-state

于 2021-02-22T15:43:53.647 回答
0

我被这个卡住了一段时间，结果表实例上有一个属性

const tableInstance = useTable<any>(
    { columns, data: memoData, autoResetExpanded: false, autoResetSortBy: false }, ...)

文档：

autoResetSortBy: 布尔值

默认为 true 为 true 时，如果满足以下任一条件，sortBy 状态将自动重置： 数据已更改 要禁用，设置为 false变化？”

https://react-table.tanstack.com/docs/api/useSortBy

于 2021-12-03T18:48:30.867 回答