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

Question

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.

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 {  }

Answer 1

You can pass a default the sortOrder value: This can be ascend, descend or false; that would allow you to set a default sort order.

https://ant.design/components/table/#Column

As far as the default filter goes, you need to set the filteredValue prop as @Panther has mentioned above.