DataTables: Keep both Date and Time columns active during linked sorting (two-column combined sort)

sinon

Hi everyone,

I’m using DataTables with FixedColumns, and I’ve split a single datetime value (in yyyymmddHHMMSS format) into two separate columns: Date and Time.

I’m trying to implement a linked sort behavior, where these two columns are always sorted together and both should remain visually active when sorted.

Requirements

1. Two linked columns (Date + Time)
* The table shows:
** Date→ formatted as YYYY-MM-DD
** Time→ formatted as HH:mm:ss
* Sorting must always consider both columns:
** Primary sort → Date
** Secondary sort → Time

There are 4 valid combinations:
* Date ↑ + Time ↑
* Date ↑ + Time ↓
* Date ↓ + Time ↑
* Date ↓ + Time ↓

When the user clicks on the Dateheader, only the Date direction should toggle,
and when clicking the Time **header, only the Time direction should toggle — but **both should stay active.

2. UI requirement
* When Date/Time sorting is active, **both **headers should visually display sorting arrows (sorting_asc / sorting_desc).
* When any other column is sorted, only that single column should be active (the normal DataTables behavior).

3. Other columns
* For all other columns, sorting should behave normally (single-column sort, with only one active sort indicator).

The issue

Technically, I can handle the sorting logic (since the source data has the combined yyyymmddHHMMSS field — extracting date/time parts for comparison works fine, Date ↑ + Time ↑, Date ↓ + Time ↓ worked).
However, the UI part is problematic.

After sorting, DataTables automatically resets sorting classes and aria-sort attributes,
so only one column (the last sorted one) keeps sorting_asc or sorting_desc,
while the other column (e.g., Date) is reset back to just sorting.

Even when I reapply classes in drawCallback, DataTables overwrites them again.
It seems that DataTables internally supports only one “active” sorted column at a time.

Question

Is there a way to configure DataTables to visually keep two columns active at once (both with sorting icons and aria-sort attributes)?
Or should this be handled completely outside DataTables (e.g., manual sorting + custom header styling)?

If anyone has implemented or seen an example of two linked columns with synchronized sort UI,
please share your approach — I’d really appreciate it.

Thanks in advance!

allan

Hi,

Have you had a look at the columns.orderData option? Using it as an array is how to tell DataTables that you want a specific column to use multi-column ordering data when ordering on that column.

Allan