Business Background:

I got a demand for Table data display today. Since the business needs to select and filter data and THE Table in ANTD has been selected originally, I chose to use the filtering function of ANTD Table.

About filtering Method

Firstly, there are roughly two ways to filter and filter data in the table:

  • The first is the back-end data screening, that is, the processing of query keywords, when the amount of data is large, the server pressure is small under the circumstances of selection.

  • The second is in the front end of the data screening, that is, in the front end of the data processing after the display, the client page rendering pressure is less under the circumstances of selection, it has one advantage is to reduce the HTTP request to the back end, can reduce the pressure on the background server

Here we choose the second method for data screening.

The optimization of the TABLE

In practice, it is found that the logic of ANTD table is to filter the data of the whole page, and then only the current page on the page conforms to the data filtering logic. This will lead to the situation that all pages have 32 pages even though there is only one data on the page as shown below, and this data may appear on any page of the 32 pages. This is extremely unfriendly to users, so I decided to modify this method after discussing with the team leader

Here paste antD Table local filtering example code rewrite to demonstrate –(company business code confidential, not allowed to show)

import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', filters: [ { text: 'Joe', value: 'Joe', }, { text: 'Jim', value: 'Jim', }, { text: 'Submenu', value: 'Submenu', children: [ { text: 'Green', value: 'Green', }, { text: 'Black', value: 'Black', }, ], }, ], // specify the condition of filtering result // here is that finding the name started with `value` }, { title: 'Age', dataIndex: 'age', defaultSortOrder: 'descend', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', }, ], filterMultiple: false, onFilter: (value, record) => record.address.indexOf(value) === 0, sorter: (a, b) => a.address.length - b.address.length, sortDirections: ['descend', 'ascend'], }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park',}, {key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park',},// pretend to have hundreds of pages]; let showData = []; function onChange(pagination, filters, sorter, extra) { console.log('params', pagination, filters, sorter, extra); showData = []; filters.name.map((value, index) => { for (let i = 0; i < data.length; i++){ if (data[i].name.indexof(value) === 0 ){ showData.push(data[i]); }}}} // Change the filtering method to here /* - the first step is to save all the data is to an initial large array, because later do not want to need to request data - the second step is to compare the initial big data filtering, Render (<Table columns={columns} dataSource={showData} onChange={onChange} />, mountNode);Copy the code

conclusion

Through the above changes, all data can be filtered to the previous page for unified display, reducing the trouble of users looking for data page by page, improving user experience, and reducing the backend request pressure.

, of course, this is very important is not all businesses are suitable for filtering the data on the front end, only the specific business context: display data volume is small, the pressure is big, and the user read more than half of the amount of data is frequently the case, using the front-end data screening also can yet be regarded as a feasible optimization scheme.