Issues with combined export selectors (`:not(.no-export):visible`) and `titleRow` sorting indicators

K3nguruh

Bug Report: Issues with combined export selectors (:not(.no-export):visible) and titleRow sorting indicators

Description

While configuring DataTables with the Buttons extension, I encountered issues regarding combined column export selectors and missing sorting indicators when using titleRow.

Testcase / Live Example:
https://live.datatables.net/xepumexo/6/edit?html,js,output

---

1. Combined Column Selectors in exportOptions (:not(.no-export):visible)

• Issue: Combining class-based exclusions with visibility selectors (e.g., :not(.no-export):visible or passing an array [":not(.no-export)", ":visible"]) fails to export the expected columns.
• Observed Behavior:
  
  • age (marked with .no-export) is still included in the export.
  • position is missing from the exported output.
• Regression Note: Works as expected in DataTables 2.3.7, but is broken in newer versions.

2. Missing Sorting Arrows with titleRow: 1

• Issue: Enabling titleRow: 1 prevents sorting UI elements from rendering properly.
• Observed Behavior: Columns id, position, and age do not display sorting arrows in the table header.

---

Minimal Reproducible Example

const data = [
  { id: "1", fullname: "Tiger Nixon", firstname: "Tiger", lastname: "Nixon", age: 32, position: "System Architect" },
  { id: "2", fullname: "Garrett Winters", firstname: "Garrett", lastname: "Winters", age: 78, position: "Accountant" },
  { id: "3", fullname: "Ashton Cox", firstname: "Ashton", lastname: "Cox", age: 44, position: "Accountant" },
];

const table = new DataTable("#example", {
  data: data,
  layout: {
    topStart: null,
    topEnd: "buttons",
    bottomStart: null,
    bottomEnd: null,
  },
  buttons: {
    buttons: [
      {
        extend: "colvis",
        columns: ":not(.no-colvis)", // Works
      },
      {
        extend: "pdfHtml5",
        exportOptions: {
          // columns: ":not(.no-export)", // Works
          // columns: ":visible", // Works
          // columns: [":not(.no-export)", ":visible"], // doesn't work

          // Fails: combined selectors do not resolve correctly
          columns: ":not(.no-export):visible",
        },
      },
    ],
  },
  titleRow: 1, // Causes missing sorting arrows on certain columns
  columns: [
    { data: "id", className: "no-colvis" },
    { data: "firstname" },
    { data: "lastname" },
    { data: "position" }, // Missing from export output
    {
      data: "age",
      className: "no-colvis no-export", // Still included in export despite "no-export"
    },
  ],
});

K3nguruh

Update

Testcase / Live Example:
https://live.datatables.net/xepumexo/7/edit?html,js,output

allan

Many thanks for the test cases.

1) This was caused by the multi-row header and an incorrect assumption in the code that the index of the node in the selected array would match the column index. I've committed a fix. Unfortunately, 3.0.3 went out this morning, so it will need to be 3.0.4 for this fix, but it is now in the nightly build.

2) This is an interesting (and frustrating) one. Its due to the th cell being in the top row only (the actual cell). I'm updating the code to cope with this, but its is a bit more involved that I initially though. I'll have to work on this tomorrow as well.

Allan

K3nguruh

.

K3nguruh

Hi Allan,

I took another look at the documentation for titleRow. Apologies if I misunderstood anything here, as I'm translating the text into German to read it.

If I understand correctly, for my setup I wouldn't need to set titleRow: 1 at all. Instead, I should set titleRow: null or simply omit the option entirely since null is the default value.

My understanding is that titleRow: null looks for rows where cells have colspan="1" and uses them as the title row for sorting, etc. Since "FullName" in my example has a colspan="2", that row shouldn't be picked up as the title row.

Did I get that right?

P.S. However, when I set titleRow: null, all columns receive sorting arrows.

Testcase / Live Example:
https://live.datatables.net/xepumexo/8/edit?html,js,output

allan

Hi,

titleRow: null means that all cells will have ordering indicators and the click to sort event handler (unless the cell or row has data-dt-order="disable" as an attribute).

I've committed my change to fix the issue of a rowspan cell, defined on a different row from the titleRow not getting the ordering indicators / handlers. It is available in the nightly build now and I've updated your test case with it](https://live.datatables.net/xepumexo/9/edit). Hopefully that will fit the bill for you now?

Allan

K3nguruh

Hi Allan,

Thanks a lot for fixing this! This is exactly what I had in mind.

Just one small observation:
* columns: ":not(.no-export):visible" – works now (Nightly / coming in DT 3.0.4)
* columns: [":not(.no-export)", ":visible"] – does (still) not work

I'm not entirely sure though if DataTable.ColumnSelector accepting an array is supposed to do the exact same thing here.

Either way, I'm completely happy with this solution.

allan

columns: [":not(.no-export)", ":visible"] – does (still) not work

It will match columns which match either expression. i.e. an OR operation over the array elements, rather than AND, so I think that is actually working as I would expect at the moment.

Allan