Right now, it's not showing sorted result according to title. I want to show the rows by default in ascending.
Please have a look:
Below is my code:
const fields = [
{ key: 'title', _classes: 'font-weight-bold' },
{ key: 'category', _style: { width: '20%'} }
]
<CDataTable
items={list}
fields={fields}
columnFilter
tableFilter={{ 'placeholder': 'Type something...'}}
itemsPerPageSelect
itemsPerPage={5}
hover
sorter
pagination
/>
Note: From the Documentation: I have tried something i.e. sorter={{'resetable': 'ascending'}} but nothing works for me.
There's two points:
asc:falsesorterValue option in CDataTableSo , you can try this:
<CDataTable
items={list}
fields={fields}
columnFilter
tableFilter={{ 'placeholder': 'Type something...'}}
itemsPerPageSelect
itemsPerPage={5}
hover
sorter
sorterValue={{column: "title", asc: true}}
pagination
/>
Here is how it works for me:
<CDataTable
items={list}
fields={fields}
columnFilter
tableFilter={{ 'placeholder': 'Type something...'}}
itemsPerPageSelect
itemsPerPage={5}
hover
sorter
sorterValue={{column: "title", asc: true}}
onSorterValueChange={(params) => {
if (params.column === order.sorting.column && params.asc === order.sorting.asc) return;
dispatch(actions.getOrders(.....));
dispatch(actions.sortingChanged(params));
}}
pagination
/>
You should avoid cyclic code call by making sure in onSorterValueChange() that params.column & params.asc are not equal to what is already set. If true - return; otherwise - call your API request and change state with new sorting params.