问题描述
我希望能够在 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