Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set default sorter and filters on antd table components?

Tags:

reactjs

antd

I am using ant-design react components to make a dashboard and have used a table component where I can define how the filters and sorters once the data is populated.

dashboard table page

If have a requirement where I want to apply default sorting(descending) on ID column and in environment column I want prod to be selected by default(to show only prod alerts by default). Since I can't ask usage question on ant-design website, I wanted to know if someone knows about it and can help me with this. I am open to a different approach if you can share.

function onChange(pagination, filters, sorter) {
    console.log('params', pagination, filters, sorter);

    let order_by = sorter.field;
    if (sorter.order == 'descend'){
        order_by = `-${order_by}`;
        console.log(order_by);
    }

    let offset = ((pagination.current - 1) * pagination.pageSize);
    let url = `${baseUrl}&offset=${offset}&ordering=${order_by}`;
    this.fetchResults(url);
}

output for console.log

>>> params Object { showQuickJumper: true, pageSize: 20, current: 1, total: 301 } Object { env: Array['prod'], incident_type: Array['loadChk'] } Object {  }
like image 331
Manjit Kumar Avatar asked Apr 01 '17 06:04

Manjit Kumar


People also ask

How do I add sorting to ANTD table?

Use sorter to make a column sortable. sorter can be a function of the type function(a, b) { ... } for sorting data locally.

How do you make an ant design table responsive?

You can make use of the responsive property on the column that you want to control for screen sizes. Just add a From To column with a custom render function, and set the responsive property on that column to only show on xs screens. The From and To columns will have the responsive property set to show on md and above.

How do you use an ANTD component?

Explore more components Click the "Open in Editor" icon in the first example to open an editor with source code to use out-of-the-box. Now you can import the Alert component into the codesandbox: - import { DatePicker, message } from 'antd'; + import { DatePicker, message, Alert } from 'antd';

How do I hide columns in ANTD table?

Add a property "hidden" to the column object, then filter it out. Save this answer.


1 Answers

Use defaultSortOrder like defaultSortOrder: 'descend'

like image 50
Pavel Kulesha Avatar answered Sep 21 '22 13:09

Pavel Kulesha