CoreUI DataTable sort values by specific column values

Question

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.

I read the doc for your question and don't find right thing. — Danial
– Danial, Commented Aug 9, 2021 at 9:53
Is CoreUI use github.com/coreui/coreui-datatables for DataTables? — Danial
– Danial, Commented Aug 9, 2021 at 10:02

Danial · Accepted Answer · 2021-08-10 06:20:33Z

4

There's two points:

For descending sort you must set asc:false
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
/>

answered Aug 10, 2021 at 6:20

Danial

1,6432 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danial Over a year ago

They have a very poor documentation!

1nstinct · Accepted Answer · 2022-08-19 04:12:16Z

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.

Collectives™ on Stack Overflow

CoreUI DataTable sort values by specific column values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related