ant-design / ant-design/pro-components
ProTable syncToUrl with sorting
- 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
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