`react-table` v7 如何在对组的行进行排序时保留分组的排序顺序

Question

我有一个 table 分组并应用了初始排序顺序。

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

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

这是初始排序规则：

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

RISK_SCORE 列将是 sortable:

{
    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 每次都进行相同的排序，而不是从用户交互中排序 table 本身：

  {
    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,
  },

知道怎么做吗？

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

Answer 1

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

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

Answer 2

我坚持了一段时间，结果 table 实例

上有一个属性

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

文档：

autoResetSortBy: Boolean

Defaults to true When true, the sortBy state will automatically reset if any of the following conditions are met: data is changed To disable, set to false For more information see the FAQ "How do I stop my table state from automatically resetting when my data changes?"

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

Answer 3

useTable({ columns, data, autoResetSortBy: false }, useSortBy))

`react-table` v7 如何在对组的行进行排序时保留分组的排序顺序

`react-table` v7 how to preserve a grouping's sort order whilst the rows of the groups are sorted

javascript

reactjs

sorting

react-table

react-table-v7