CoreUI DataTable sort values by specific column values

user_10427807 0
Viewed 960

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:

enter image description here

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.

core-ui reactjs datatable javascript
2 Answers

There's two points:

  1. For descending sort you must set asc:false
  2. Default sort value must pass to sorterValue option in CDataTable

So , 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
/>
user_53090840

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.

user_24670360
Related