ant-design / ant-design/pro-components

ProTable syncToUrl with sorting

Open
#8,595 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🧐 Problem description

The `form.syncToUrl` feature of `ProTable` doesn't appear to support syncronising column sorting with the URL. Sorting is mentioned in a few old issues (e.g. https://github.com/ant-design/pro-components/issues/1234) so I was hoping for it to "just work" like it does with pagination.

### 💻 Sample code

```
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import React from 'react';

type DataSourceType = {
id: React.Key;
title: string;
description: string;
};

const defaultData: DataSourceType[] = [
{
id: 624748504,
title: '1st',
description: 'first row'
},
{
id: 624691229,
title: '2nd',
description: 'second row'
},
{
id: 624691230,
title: '3rd',
description: 'third row'
},
{
id: 624691231,
title: '4th',
description: 'fourth row'
},
{
id: 624691232,
title: '5th',
description: 'fifth row'
},
];

const getData = (sort: any) : DataSourceType[] => {

if (sort.title === "descend")
{
return defaultData.sort((a, b) => a.title.localeCompare(b.title));
}

if (sort.title === "ascend")
{
return defaultData.sort((a, b) => b.title.localeCompare(a.title));
}

return defaultData;
};

export default () => {
const columns: ProColumns[] = [
{
title: 'Title',
dataIndex: 'title',
sorter: true,
defaultSortOrder: 'descend'
},
{
title: 'Description',
dataIndex: 'description',
}
];

return
rowKey="id"
form={{
syncToUrl: true
}}
pagination={{
defaultPageSize: 4
}}
columns={columns}
request={async (params, sort) => {
return {
data: getData(sort),
total: 6,
success: true,
}
}}
/>;
};
```

### 🚑 Other information

Stackblitz example here: https://stackblitz.com/edit/react-9gmv7e-ennjje?file=App.tsx

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz example in App.tsx and reproduce the ProTable form.syncToUrl behavior using the shown sortable Title column. Trace how sorting and pagination are synchronized, then verify that changing and restoring the sort state is reflected in the URL without breaking the existing request parameters.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.