Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to sort ant table column by date?

I would like to sort antd table by a Date column.

Trying to sort like sorter: (a, b) => new Date(a) - new Date(b)

What I've been doing so far here and failed to solve it.

like image 474
unreleased Avatar asked Jun 16 '19 22:06

unreleased


People also ask

How do I sort a column in ANTD table?

Simply define a new sorting routine in utils/sorter. js , add it to the Sorter “enum,” and use it in your sorter prop for any column that needs it. You can check out the CodeSandbox for this tutorial to play around with the result.

How do I make an ANTD table responsive?

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.

How do I select rows in ANTD table?

Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox . selection happens when clicking checkbox by default.


2 Answers

Try this one. This will automatically sort by date ASC to DESC, DESC to ASC as you click the column header. You need to install moment

imports:

import moment from 'moment';

Sorter:

sorter: (a, b) => moment(a.date).unix() - moment(b.date).unix()
like image 74
Ken Labso Avatar answered Sep 19 '22 12:09

Ken Labso


a,b are table records, so you need new Date(a.date) - new Date(b.date):

{
  title: 'Date',
  dataIndex: 'date',
  key: 'date',
  sorter: (a, b) => new Date(a.date) - new Date(b.date)
}

Edit Q-56623185-SO-sort by date

like image 38
Dennis Vash Avatar answered Sep 20 '22 12:09

Dennis Vash