Several questions about some issues with the new ColumnControl extension

slolo

Link to test case: https://live.datatables.net/toziquka/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

I'm trying to use the new ColumnControl extension and I'm running into several small issues.

1./ How do I prevent the sorting from displaying on the "Action" column?

2./ How do I prevent the "Action" column from being moved via drag and drop?

3./ How do I prevent the "Action" column from appearing in the "SearchBuilder" component?

4./ Why aren't the field labels displayed in the SearchPanes component?

5./ Why don't the search fields take up the entire width of the column (given that with Bootstrap 4, a component with the form-control class has a size of 100%)?

It is really more visible when the content of the cell is longer.

If you have a look to this test case , you can see that it works well for the SearchPanes and SearchBuilder.

I'll continue to look for solutions in the meantime.

Thank you in advance for your help and I wish you a pleasant day.

allan

Hi,

1./ How do I prevent the sorting from displaying on the "Action" column?

I don't see any sorting in your screenshot there? Can you link to a test case showing the issue so I can see how it is configured please?

2./ How do I prevent the "Action" column from being moved via drag and drop?

Use colReorder.columns to specify which columns you want to be reorderable by ColReorder.

3./ How do I prevent the "Action" column from appearing in the "SearchBuilder" component?

searchBuilder.columns for this one.

4./ Why aren't the field labels displayed in the SearchPanes component?

Don't know. Happy to have a look at a test case showing the issue.

5./ Why don't the search fields take up the entire width of the column (given that with Bootstrap 4, a component with the form-control class has a size of 100%)?

Again, I'd need a test case please. I'd guess they have a max-width.

Allan

slolo

Hi @allan,

The link to the test case is in the header of the current post.
But here is the link: https://live.datatables.net/toziquka/1/edit

allan

Gah - can't believe I missed that. Sorry.

1. I'm not seeing any sorting icons on the Actions column. Do you mean you want to remove the search? Use columns.columnControl to override for a specific column. See this example for details.
2. Answered above
3. Also above.
4. Its because you have "titleRow": 1,. So DataTables is attempting to read from header row index 1. That is added by ColumnControl and has no content. It would need to be set to 0 to read the titles.
5. Add:

.dtcc-content {
  flex-grow: 1;
}

I need to look into what impact that will have before I include it in ColumnControl directly.

Allan

slolo

Thanks for your answer.

---

1./ How do I prevent the sorting from displaying on the "Action" column?

I'm not seeing any sorting icons on the Actions column. Do you mean you want to remove the search? Use columns.columnControl to override for a specific column. See this example for details.

As you can see in my test case, I already use: { "targets": -1, "columnControl": [] }

    "columnDefs": [
      { "orderable": false, "targets": [-1] },
      { "searchable": false, "targets": [-1] },
      { "visible": false, "targets": "no-col-visible" },
      { "orderable": false, "targets": "no-col-orderable" },
      { "searchable": false, "targets": "no-col-searchable" },
      { "targets": ':not(.no-col-extended-search)', "searchPanes": {"show": true} },
      { "targets": -1, "columnControl": [] },
    ],

That is why I don't have ColumnControl icons on the hearder on "Action" column.
But the Search control is still present on the second row for the column "Action"

---

2./ How do I prevent the "Action" column from being moved via drag and drop?

Always in my example, I already use the line below:

{ "orderable": false, "targets": [-1] }

But for an unknown reason, the column can still be moved.
do you see what I mean?

---

3./ same as the point 2./ I am not sure to see how to do

Ideally, I want to be able to identify columns by a class name and not by the column number (placement in the table).
This is why I use the "columnDefs" option a lot, and ideally, I'd like to be able to use this solution.

---

4./ Why aren't the field labels displayed in the SearchPanes component?

"titleRow": 0 works great!

---

5./ Adding the code below work very too!

.dtcc-content {
    flex-grow: 1;
}

kthorngren

1. How do I prevent the "Action" column from being moved via drag and drop?

orderable applies to the ability to sort the column and does not control moving the column using colReorder. Use colReorder.columns as Allan mentioned for this.

1. How do I prevent the sorting from displaying on the "Action" column?

@allan will need to look at this. Seems like it should remove the search input too.

Kevin

slolo

Use colReorder.columns as Allan mentioned for this.

"colReorder": {
"headerRows": [0],
"columns" : ":visible :not(.no-col-extended-search)",
},

I try this but without success, the column "Action" is still movable.
Any idea how I can do this?

kthorngren

That does work except there seems to be a compatibility issue with ColReorder and ColumnControl. Removing ColumnControl allows ColReorder with that selector to work properly.
https://live.datatables.net/toziquka/6/edit

I might misunderstand but it seems like there is an issue with the column-selectors. Looking at this example the first and last columns can't be reordered. However using :not(:first-child, :last-child) in your test case doesn't seem to work properly. The first column has the reorder icon displayed but it can't be reordered. Based on the example docs the icon shouldn't display in this configuration.
https://live.datatables.net/becesovo/1/edit

@allan will need to look at this issue.

Kevin

slolo

Hi,

I have seen that you have released a new version of ColumnControl (v1.0.3).
Could you tell me what has changed?

I have done a "new" test case from the original and the column "Action" is still movable.

After several tests, it seems that most of the strange behavior come from these lines:

{
    "target": 1,
    "content": ['search']
},

If you comment these lines:
* the column "Action" is no more movable (but the label Action is no mere vertically centered)
* The column Action is no more visible in SearchBuilder Data combobox

You can have a look the the new test case here:
https://live.datatables.net/toziquka/7/edit

Also, can you have a look to the SearchPane component for which the display is really broken when its button on the layer is placed on the right.

Thank you in advance for your help and most importantly, thank you very much for continuing to improve the DataTables components.

allan

Release notes:

• 1.0.1
• 1.0.2
• 1.0.3

1.0.4 will likely drop tomorrow, possibly today if things go well...

Regarding the Action column - the problem is the extra row being added by ColumnControl. It doesn't have the no-col-extended-search class on that cell, so when SearchBuilder / SearchPanes selects columns, that cell passes and is used.

I need to have a think about the best way to address this. I could copy the class over when creating the new row. Or SearchPanes / SearchBuilder should perhaps only select based on the title row. Or they could have an option similar to colReorder.headerRows.

In the mean time if you use columns: [0, 1, 2, 3, 4] it will correctly pick only the first 5 columns.

Allan

slolo

Hi @allan,

Thanks for your answer.

Regarding the Action column - the problem is the extra row being added by ColumnControl. It doesn't have the no-col-extended-search class on that cell, so when SearchBuilder / SearchPanes selects columns, that cell passes and is used.

I understand indeed and it's actually quite logical.

I need to have a think about the best way to address this. I could copy the class over when creating the new row. Or SearchPanes / SearchBuilder should perhaps only select based on the title row. Or they could have an option similar to colReorder.headerRows

I really hope you find a good way to do this, because specifying all columns by number is not the best in terms of configurability (especially once you have tasted the possibility of using classes to specify the columns on which you apply a specific treatment).

Please, let me know if you need me to test a nightly build.

slolo

Hi @allan,

I have seen you have released the extension ColumnControl v1.0.4 and DataTables v2.3.2 but it seems there are some new problems.

As you can see in this test case, the vertical alignement of header titles seems to be broken with this new version.
Test case: https://live.datatables.net/toziquka/9

Regarding the Action column - the problem is the extra row being added by ColumnControl. It doesn't have the no-col-extended-search class on that cell, so when SearchBuilder / SearchPanes selects columns, that cell passes and is used.

I do not understand why the search filed is visible is the extra row if I specify in columdef this line:

{ "targets": [-1], "columnControl": [] },

    "columnDefs": [
      { "orderable": false, "targets": [-1] },
      { "searchable": false, "targets": [-1] },
      { "visible": false, "targets": "no-col-visible" },
      { "orderable": false, "targets": "no-col-orderable" },
      { "searchable": false, "targets": "no-col-searchable" },
      { "targets": ":not(.no-col-extended-search)", "searchPanes": {"show": true} },
      //{ "targets": ":visible .no-col-extended-search", "columnControl": [] },
      { "targets": [-1], "columnControl": [] },
    ],

And also why the column "Action" is still orderable.

Thanks in advance for your help.

allan

Use:

columnControl: [{target:0, content:[]}, {target:1, content:[]}]

for the action column. It is seeing [] as a content array, which defaults to target: 0, and thus isn't overriding the globally specified target:1. If I can't think of a better way to handle that, I'll document it clearly.

Regarding the alignment, yes I can see it is slightly out. I'll look at that.

Allan

slolo

Hi @allan,

Thanks for your answer, it works very well with the tip columnControl: [{target:0, content:[]}, {target:1, content:[]}]

Here is the last test case:
https://live.datatables.net/pucekami/1/

For the SearchBuilder component, it also works if I initialize comlums like you told me with columns: [0, 1, 2, 3, 4]
It's not as convenient as using a css class. I hope you will be able to find a better way of doing this.

What's especially strange is that the SearchPane component doesn't add the Action column.
Perhaps this is the solution.

allan

It's not as convenient as using a css class. I hope you will be able to find a better way of doing this.

I will do! That's going to take a bit longer than the other fixes though.

Allan