ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.3k stars 1.36k forks source link

ProTable syncToUrl with sorting #8594

Closed lyallo closed 3 months ago

lyallo commented 3 months ago

🧐 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<DataSourceType>[] = [
    {
      title: 'Title',
      dataIndex: 'title',
      sorter: true,
      defaultSortOrder: 'descend'
    },
    {
      title: 'Description',
      dataIndex: 'description',
    }
  ];

  return <ProTable<DataSourceType>
    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-7kuw4l?file=App.tsx

github-actions[bot] commented 3 months ago

当前 Issue 未检测到标题,请规范填写,谢谢!

The title of the current issue is not detected, please fill in according to the specifications, thank you!

lyallo commented 3 months ago

Title updated