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 { }
Use sorter to make a column sortable. sorter can be a function of the type function(a, b) { ... } for sorting data locally.
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.
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';
Add a property "hidden" to the column object, then filter it out. Save this answer.
Use defaultSortOrder like defaultSortOrder: 'descend'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With