Frontend

Ant Design Pro Cookbook

  1. Set the default language to Chinese globally
  2. Add a menu on the navigation bar
  3. ProTable sort data from server

This article is based on Ant Design Pro 5.2.0.

Set the default language to Chinese globally

Edit config/config.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default defineConfig({
  layout: {
    locale: false,
    // ...
  },
  // ... other options
  // https://umijs.org/zh-CN/plugins/plugin-locale
  locale: {
    default: 'zh-CN',
    antd: false,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: false,
  },
  // ... other options
});

Add a menu on the navigation bar

First of all, edit config/routes.ts and add a new item for your new menu link:

1
2
3
4
5
6
7
8
9
export default [
  // ... other routes
  {
    path: '/mypage',
    name: 'My Page',
    icon: 'table',
    component: './MyPage',
  },
];

In the previous code snippet, we created a menu item call My Page on the navigation bar, which has a path of /mypage in the URL, and it uses a component saved in the file src/pages/MyPage/index.tsx.

Next, we create the file src/pages/MyPage/index.tsx with the following content:

1
2
3
4
5
export default function() {
  return (
    <div>A new page</div>
  )
};

Then you will be able to visit this ‘/mypage’ route, for example http://localhost:8000/mypage.

ProTable sort data from server

ProTable is a component which can be used to build a CRUD page, it has the following sections:

There is an attribute called columns, which is used to specify the columns of the table. For example:

1
2
3
4
5
6
7
8
9
10
11
const columns = [
  {
    title: 'Product name',
    dataIndex: 'title',
  {
    title: 'Price',
    sorter: true,
    valueType: 'money',
    dataIndex: 'price',
  },
];

If you click a specific table field header, all the data in the table should be sorted locally or on the server side by this field in ascending order or descending order.

We are going to sort all the records by the price field on the server side.

ProTable use the request attribute to fetch data from a remote API endpoint, for example:

1
2
3
4
5
6
7
8
9
10
11
12
<ProTable
  columns={columns}
  request={(params,sort,filter)=>{
    // fetch data from remote server
    const res = await fetchDataFromServer({...params}); // `fetchDataFromServer` should be an async function which return the data needed
    return {
      data: res.data, // The data to be displayed on current table
      success: true,
      total: 123, // Total number of recoreds
    };
  }}
/>

Next, we need to listen to the change event triggered by the click on the field head by using the onChange attribute. Also, in order to trigger the request automatically, we resort to the params attribute, everytime when its values changes, the request callback function will be called.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const [formParams, setFormParams] = useState();

<ProTable
  params={formParams}
  columns={columns}
  request={(params,sort,filter)=>{
    // fetch data from remote server
    const res = await fetchDataFromServer({...params}); // `fetchDataFromServer` should be an async function which return the data needed
    return {
      data: res.data, // The data to be displayed on current table
      success: true,
      total: 123, // Total number of recoreds
    };
  }}
  onChange={(pagination, filters, sorter, extra) => {
    if (extra.action === 'sort') {
      // Update formParams
      setFormParams(sorter.order ? {
        sort: {
          field: sorter.field,
          order: sorter.order
        }
      } : {});
    }
  }}
/>