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

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

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

我希望能够在 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,

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

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

解决方法

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

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