2

I have a table that is grouped with an initial sort order applied.

I want to be able to sort on the UI but at the same time preserve the initial grouping sort order.

So it would be like a multi-sort but that one sorting rule is always applied to the group.

This is the initial sorting rule:

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

RISK_SCORE column would be 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;
    },
  },

And we would force RISK_GROUP to be sorted the same every time without being sortable itself from user interaction:

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

Any ideas how to do this?

I think it would be similar to programmatically setting the sort option in one column when another is sorted?

RyanP13
  • 7,413
  • 27
  • 96
  • 166

4 Answers4

1
useTable({ columns, data, autoResetSortBy: false }, useSortBy))
Jonache Hilton
  • 13
  • 3
  • 1
    While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌​code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – holydragon Dec 14 '21 at 02:44
0

I managed to do this by passing a controlled state into my table as suggested here:

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

RyanP13
  • 7,413
  • 27
  • 96
  • 166
0

i was stuck with this for a while, turns out there is a property on table instance

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

docs:

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

Sonic Soul
  • 23,855
  • 37
  • 130
  • 196
0

I would like to add to this. I your using TypeScript and getting an error from adding autoResetSortBy: false to the arguments of useTable try adding a @ts-ignore comment before autoResetSortBy: false. This resolved the issue for me.

useTable(
  {
    columns,
    data,
    // @ts-ignore <-- tell TypeScript to ignore the next line.
    autoResetSortBy: false,
  },
  useSortBy
);

TypeScript docs: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-6.html#suppress-errors-in-ts-files-using--ts-ignore-comments

0mppu
  • 25
  • 1
  • 4