Issue with ColumnControl after upgrate to V3

Wernfried · October 21

I have another small issue with ColumnControl search function.

As you may remember I have a SSP table with date columns where I combine the date-picker searchInput plus some pre-defined ranges searchList. It worked perfect in v2 but now in v3 it is not that perfect anymore.

When I click on the search button, then the header opens like this:
https://cloud.domscheit.ch/index.php/s/y5mpwePbKWcWMaw

(Sorry to use the link, upload of screenshot does not work.)

The v2 the date-picker was shown when you put focus on the input. Now it is shown instantly which is rather bad for my specific use-case. Another minor issue is, sometimes - I did not managed to determine when exactly - the logic icon (e.g. "=") is missing and it shows "und" which most likes stands for "undefined"

It there a possibility to avoid that the data-picker is shown always and instantly? I would really prefer to have it show when you put your cursor into the input field as it was the case in DTv2

Wernfried

allan · October 22

(Sorry to use the link, upload of screenshot does not work.)

Back to working now. I disabled file upload for a short while due to the global PHP security issues yesterday...

Now it is shown instantly which is rather bad for my specific use-case.

ColumnControl 2 added a new autoFocus option for dropdown which can be used to control this behaviour. Set that option to be an empty string to disable.

From the release notes:

autoFocus option for dropdown. This will allow ColumnControl to automatically select an element to gain focus when the dropdown is focused. By default, this will now happen for search content types in the dropdown (e.g. the search input in searchDropdown will gain focus when displayed).

it shows "und" which most likes stands for "undefined"

Agreed. The select is empty in your screenshot, which shouldn't happen, and is almost certainly why the icon is not shown correctly. Can you show me the configuration you are using for this dropdown please? I'm not sure how it would get into that state. I presume that if you change the logic combiner from the select it will then show an icon correctly?

Allan

Wernfried · October 22

I will check tomorrow. I use

columnControl: [
            'order',
            [
               { extend: 'searchDateTime', format: 'YYYY-MM-DD', excludeLogic: ['notEmpty', 'empty', 'notEqual'] },
               { extend: 'searchList', select: false, search: false, title: 'Optional Ranges' }
            ]
         ]

According documentation this option does not exist for searchDateTime.

allan · October 22

I see what you mean about the focus being annoying... I'll look into a way of making the out of the box experience better for that.

Here is a little example using that code: https://live.datatables.net/quvecuki/1/edit .

It does limit the search logic, and doesn't show undefined.

undefined in that location would suggest to me that the SVG for the icon can't be found - so the question is, what logic is it trying to apply!

Allan

Wernfried · October 23

Regarding undefined label, I found a way to reproduce it.

Use extension ColReorder and ColumnControl and option stateSave: true
Move this date column to a different position and reload the page. Then you will get undefined in some cases.

ColumnControl tries to use contains which does not exist for date columns. The new position of this column was previously used by a column having text where contains was selected.

I see in v3 you changed the data structure of DT state. Looks like for state restore, ColumnControl picks the wrong column.

Wernfried

allan · October 23

The immediate fix will be to make sure that the state value being restored actually makes sense to restore for the column in question - I'll check that.

Restoring a state out of column order is a bit more serious though. Can you give me a link to a test case showing that please?

Allan

allan · October 23

I've committed this change to add to have a defense against the error.

Allan

Wernfried · October 23

Here the code to reproduce the issue:

const dataTable = new DataTable('#dataTable', {
   columns: [
      { name: 'title', title: 'Title', data: 'title' },
      {
         name: 'planStartDate', title: 'Planned Start Time', data: 'planStartDate',
         columnControl: [
            'order',
            [{ extend: 'searchDateTime', format: 'YYYY-MM-DD', excludeLogic: ['notEmpty', 'empty', 'notEqual'] }]
         ]
      }
   ],
   columnControl: [
      'order', [{
         extend: 'searchText', excludeLogic: ['notEqual', 'empty', 'notEmpty']
      }]
   ],
   data: [
      { title: 'some text', planStartDate: '2026-10-12T12:30:45Z' }
   ],
   stateSave: true,
   colReorder: true
})

Open the page, move column 'Planned Start Time' to left, re-open the page:

Included libraries:
JSZip 3.10.1, DataTables 3.1.4, Buttons 4.1.2, Column visibility 4.1.2, HTML5 export 4.1.2, Print view 4.1.2, ColReorder 3.1.2, ColumnControl 2.1.2, DateTime 2.1.2, FixedHeader 5.1.2, Responsive 4.1.1, Scroller 3.1.1, Select 4.1.1

Best Regards

allan · October 23

Many thanks. The column ordering interplay is going to be the issue. I'll let you know what I find.

Allan

Wernfried · October 23

Regarding this annoying focus, I found a workaround. I changed the order so I get

However, as mentioned, I consider this really as a workaround, not a solution

allan · October 23

Did you try the autoFocus option I mentioned? That should stop it appearing automatically.

Allan

Wernfried · October 23

As already mentioned, option autoFocus does not exist for searchList and searchDateTime button.
I tried, perhaps they were just missing in documentation, but no changes.

Wernfried

allan · October 23

It's not on the search content types but rather the host dropdown like in my example here: https://live.datatables.net/quvecuki/1/edit .

It's a bit more verbose to set up, but that should work.

Allan

Wernfried · October 24

Ah, sorry there was a misunderstanding about the autoFocus option. It's working fine now, thank you.

I leave this question open, because the issue with selecting wrong logic when column have been re-ordered is still open - if this is fine for you.

Wernfried

allan · October 24

Absolutely. Good to hear the other one is working now and I'll look at that ColReorder issue soon.

Allan

allan · October 26

I've committed a fix for the ColumnReorder issue when used with columns.name, search and state saving.

I'll issue the patch release in the next few days.

Allan

Issue with ColumnControl after upgrate to V3

Issue with ColumnControl after upgrate to V3

Answers