Did the collectionLayout: function() {} stop working in the most recent release of DataTables? I was calculating the visible columns based on the window width, but now I get an error message and no dropdown is showing.

Error from browser:

dataTables.buttons.min.js:4 
** Uncaught TypeError: h.collectionLayout.includes is not a function**
_popover    @   dataTables.buttons.min.js:4
(anonymous) @   dataTables.buttons.min.js:4
map @   dataTables.min.js:4
(anonymous) @   dataTables.buttons.min.js:4
(anonymous) @   dataTables.min.js:4
action  @   dataTables.buttons.min.js:4
s   @   dataTables.buttons.min.js:4
r   @   dataTables.buttons.min.js:4
(anonymous) @   dataTables.buttons.min.js:4
dispatch    @   jquery.js:2
v.handle    @   jquery.js:2

Portion of code:
layout: {
top2Start: {
buttons: [{
text: '<span class="fa-layers fa-fw"><i class="fa fa-ban"></i><i class="fa fa-filter" data-fa-transform="shrink-7"></i></span> Clear Filter',
action: function(e, dt, node, config) {
// Clear Filter Button
$('#dogs tfoot th').find('input,select').val('');
$('input.flt:checkbox').prop('checked', false).parent().removeClass('active');
$('input.flt:text,select.flt,input.flt:hidden').val('').data('null', '');
$('.fltcol').addClass('d-none');
$('#dogs').DataTable().columns().search('').draw();
window.history.pushState({}, document.title, "<?= $us_url_root ?>index.php?view=dogs");
}
}
<? if ($user->isLoggedIn()) { ?>,
{
extend: 'collection',
text: '<span class="fa-layers fa-fw"><i class="fa fa-filter" data-fa-transform="shrink-2 down-3 left-3"></i><i class="fa fa-plus" data-fa-transform="shrink-7 up-5 right-5"></i></span> Add Filter',
buttons: [
//{ text: '<? //=$lang['DOG_SIRE'] ?? 'Sire' ?>', action: function () {showFormControl('sire-id');} },
//{ text: '<? //=$lang['DOG_DAM'] ?? 'Dam' ?>', action: function () {showFormControl('dam-id');} },
<? if ($GLOBALS['config']['fields']['breeder'] == 0 || ($user->isLoggedIn() && hasPerm($GLOBALS['config']['fields']['breeder'], $user->data()->id))) { ?> {
text: '<?= $lang['DOG_BREEDER'] ?? 'Breeder' ?>',
action: function() {
showFormControl('breeder-id');
}
},
<? } ?>
more fields ...
{
text: '<?= $lang['DOG_ADMIN_NOTES'] ?? 'Hidden Notes' ?>',
action: function() {
showFormControl('hiddenNotes');
}
}
<? } ?>
],
autoClose: true,
collectionLayout: function() {
var colsAllow = Math.floor(window.innerWidth / 300);
if (colsAllow >= 4) {
return 'four-column';
} else if (colsAllow == 3) {
return 'three-column';
} else if (colsAllow == 2) {
return 'two-column';
} else {
return 'one-column';
}
},
fade: true
}

To be brief, I find it useful to be able to cancel a table export by returning FALSE from the 'customize' callback that can be defined for each button.

This is desired for all of the export button options: csv, excelHtml5, pdfHtml5, print, and, perhaps, copy to clipboard.

Here's the documentation for the excelHtml5 one.
Function call looks like this: config.customize(xlsx, config, dt).

Context

This is mostly useful as this is where I do report validation using the data fed into 'customize' to generate custom reports from the table data. Sometimes the state of the table data is invalid for the selected report and I don't need to continue exporting anymore. Or the changes cause an issue with the export if continued (which likely might've been my fault; got it working before I found out what was going wrong).

I've been manually applying the edit myself due to wanting to take advantage of DataTables' capability to package the table into the export format for me and I've been able to find the five locations in the Buttons code with .customize( to place the edits to make this possible.

Perhaps I'm doing something unrecommended but it's been working well for me.

i think its related to

<li class="dt-button buttons-selected buttons-edit disabled" aria-controls="example">
<a href="#" tabindex="0" class="dropdown-item">Edit</a></li>

the disabled class is being set on the <li> and possibly should be on the <a>
ref:https://getbootstrap.com/docs/5.3/components/dropdowns/#disabled

thanks in advance for any help
pete

It doesn't look like focus is occurring correctly on the first column. The focus border is surrounding the anchor tag and not the li tag. Not sure if that's part of the issue, but it's something I've noticed.

I'm using Foundation 6.4.3 in my application, too, which I believe is also being used by DataTables.

Any ideas on a workaround?

Thank you,

Tanner

I'd like to know if we can update pdfmake to the latest version 0.2.x without any issues?

The pdfmake version provided by the Datatables plugins is v0.2.7 and was released on December 17, 2022.
The latest v0.2.18 was released on January 1, 2025.

Is there a reason why this plugin isn't updated?

Thanks in advance and have a nice day.

_layout:{
     topEnd:{
           buttons[
               {extend:'collection',text:'Export', buttons:['copy','csv','excel','pdf','print']},
                      ],
             search {},
               },_

But the problem is that the search box appears on top of the "Export" button

Appreciate your help

Hi

In the example, PDF button - it has a custom order set exportOptions: { columns: [3,4,5,2] } - in the PDF the data in the columns reflects this order but the headings dont - should be D E F C not C D E F

Hope I have not missed something obvious

Let me know if you need more information.

Thanks

pete

 format: {
          body: function (data, row, column, node) {
            // Check for button groups first
            const buttonGroups = $(node).find('.btn-group');
            if (buttonGroups.length) {
              // Process button groups
              return buttonGroups.map(function () {
                const primary = $(this).find('.btn-primary').text().trim(); // Get the primary button text
                const success = $(this).find('.btn-success').text().trim(); // Get the success button text
                return `${primary}:${success}`; // Combine the values with a colon
              }).get().join(', '); // Join multiple button groups with a comma
            }

            // Check for individual buttons
            const buttons = $(node).find('button');
            if (buttons.length) {
              return buttons.map(function () {
                return $(this).text().trim(); // Get the text of each button
              }).get().join(', '); // Join button values with a comma
            }

            const inputElement = $(node).find('input');
            if (inputElement.length) {
              return inputElement.val(); // Return the value of the input element
            }
            return data; // Otherwise, return the cell data as-is
          }
        }

      },

I am upgrading from DataTables 1.13.6 --> 2.1.8, Buttons 2.4.2 --> 3.1.2. I have tables with multi-row headers, some of which I wish to exclude from the "column visibility" list, e.g.:

      <table id="example" class="display nowrap" width="100%">
        <thead>
        <tr>
           <th rowspan="2">Name</th>
           <th rowspan="2" class="noColvis">Position</th>
           <th colspan="3">Values</th>
        </tr>
        <tr>
           <th>Val1</th>
           <th class="noColvis">Val2</th>
           <th>Val2</th>
        </tr>
        </thead>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>0.5</td>
            <td>Edinburgh</td>
            <td>61</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>0.5</td>
            <td>Edinburgh</td>
            <td>63</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>0.5</td>
            <td>San Francisco</td>
            <td>66</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>0.5</td>
            <td>Edinburgh</td>
            <td>22</td>
          </tr>
        </tbody>
      </table>

My colvis button is configured as such:

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'colvis',
                    columns: ':not(.noColvis)'
                }
            ]
        }
    }
});

When showing the list of columns to turn on/off, it is properly hiding the "Position" column (which is essentially in row 1), but "Val2" shows in the list. This used to work previous to the upgrade. Any help/pointers would be appreciated.

Thanks!
Lisa

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.1.8/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/dt/dt-2.1.8/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
    <style>
       .fw-bold {
           font-weight: bold;
       }
    </style>
  </head>
  <body>
    <div class="container">
<table id="example" class="display nowrap" width="100%">
  <thead>
  <tr>
     <th rowspan="2">Name</th>
     <th rowspan="2" class="noColvis">Position</th>
     <th colspan="3" class="noColvis">Values</th>
  </tr>
  <tr>
     <th>Val1</th>
     <th class="noColvis">Val2</th>
     <th>Val3</th>
  </tr>
  </thead>
 
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td class="dt-right fw-bold">0.5</td>
      <td>Edinburgh</td>
      <td class="dt-right fw-bold">61</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Director</td>
      <td>0.5</td>
      <td>Edinburgh</td>
      <td>63</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Technical Author</td>
      <td>0.5</td>
      <td>San Francisco</td>
      <td>66</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Javascript Developer</td>
      <td>0.5</td>
      <td>Edinburgh</td>
      <td>22</td>
    </tr>
  </tbody>
</table>
    </div>
  </body>
</html>

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: [
              {
                extend:'print',
                autoPrint:false
              }
            ]
        }
    }
});

Description of problem:
Styles added to individual cells are not copied to the Print view. See classes added to 1st row above.
This is not an important issue for me, but the styles did transfer over to the Print view before I upgraded (DataTables 1.13.6 --> 2.1.8, Buttons 2.4.2 --> 3.1.2).

Hopefully the images upload, but my testers reported an issue to me today that PDF export was now truncating data. I've attached what the print preview looked like before and after now. Before has the blue header and everything fit within the page bounds. Now it looks like it is just grabbing the print output and generating a PDF which drops the header color and everything is bigger and cropped off the page.

Is there a default I can change to make it render the old way? I don't care so much about the color change as they can just get over it, but the truncated data is a show stopper.

• In this test case, the default order is descending by "AR Total".
• When expanding child table, you can see the current order of the parent table is successfully applied to the child table.
• When exporting to Excel, however, the child table order is the same as its load order (in production, child data arrives with an ajax call).

I thought this might be handled in the childTable For loop...

              // The child data is an array of rows
              for (c = 0; c < childTable.rows().count(); c++) {
                // Get row data.
                rowData = childTable.row(c, { order: "applied"}).data();
                // order is specified as applied, yet initial order is used instead.

but it doesn't make a difference

Here's the thread discussing the child row export:
https://datatables.net/forums/discussion/comment/160693

Here's the test case:
https://live.datatables.net/toguvute/1/edit

Thanks!

I extend excelHtml5 to make a download from server. I generate a file on aws and return the signed url to the client inside action: function(e, dt, button, config)

I have two question here:
1- How can I signal button spinner to stop when the operation is complete?
2- Is there any chance to provide this url to the datatables to complete download on browser.

When i use DOM opttions all the features align left. When I try to use layouts, buttons is not available.
I am using it in a spfx solution with react and have imported all the necessary components.

import 'datatables.net-buttons-dt';
import 'datatables.net-dt/css/dataTables.dataTables.min.css';
import 'datatables.net-responsive-dt';
import DataTable from 'datatables.net-dt';

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

When printing the grouping headers are not shown. I have tried upgrading all but Editor (not upgraded yet) but get errors in the editor js related to _fnExtend. I will post more details if needed but what I really want to know is if the latest version of buttons supports printing the grouping headers. If it does then I can get an upgrade of Editor approved. If not then it is not worth the upgrade right now.

 table.button().add(
            null, {
            text: 'Create Entries',
            action: function (e, dt, node, config) {
                // Function to generate and submit a new entry
                var tomorrow = new Date();
                tomorrow.setDate(tomorrow.getDate() + 1);
                var tomorrowFormatted = tomorrow.toISOString().slice(0, 19).replace("T", " ");
                editor
                    .create({
                        title: 'Create Entry',
                        buttons: 'Add',
                        formOptions: {
                            main: {
                                onSubmit: function (e, action) {
                                    action.submit();
                                }
                            }
                        }
                    })
                    .set('editdeliveredBy', 0)
                    .set('R.leadLRV', '52070')
                    .set('R.trailLrv', '52070')
                    .set('R.createdOn', tomorrowFormatted)
                    .submit();
            },
        });

I built a custom button to get all the selected rows and change the value of a column based on another. it works great but I can't get it to submit multiple lines I have multiple selected.

is there a better way to do this or am I just missing something here.

{
        text: "Return",
        editor: editor,
        className: "mb-2 btn btn-small btn-primary",
        enabled: false,
        action: function (e, dt, node, config) {
          let rows = dt_fixedheader.rows(".selected");
          console.log("# of selected=" + rows.data().length); //it shows number of selected row
          if (rows.data().length > 0) {
            rows.every(function (rowIdx, tableLoop, rowLoop) {
              console.log(rowIdx, tableLoop, rowLoop)
              editor.edit(dt_fixedheader.row(rowIdx), false).set("checkedin", editor.get("checkedout")).submit();
          
            });
          }
        },
      }

    const BS4DOM = "<'row'<'col-sm-6 col-md-12'<'#buttonContainer'>>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>";

Is there an easy migration for the above? All of my pages use a helper function like so:

    function AppendButtons(table, buttonGroupSelector) {
      table
        .buttons(buttonGroupSelector, null)
        .container()
        .appendTo('#buttonContainer');

I'm looking for each button in the group to refer to its parent group under the buttons.buttons.action method and thought the config parameter might have it.

I did in fact find a parent property, but it seems it's always undefined.

Am I looking in the proper place, and should it be undefined?

Layout:

console.log(config):

Pseudocode:

layout: {
    top2Start: {
        buttons: {

            name: 'filter-main',

            buttons: [
                { ... other buttons ... },
                {
                    name: 'location',
                    text: 'By location',

                    action: function ( e, dt, node, config, cb ) {

console.log(config)

                    }
                },
                { ... other buttons ... }
            ]
        }
    },
    top1Start: {
        buttons: {

            name: 'filter-locations',

            buttons: [
                { ... other buttons ... },
                {
                    name: 'State',
                    text: 'State',

                    action: function ( e, dt, node, config, cb ) {

console.log(config)

                    }
                },
                { ... other buttons ... }
            ]
        }
    }
},

! exportOptions: {
! modifier: {
! search: 'applied',
! page : 'all'
! },
! columns: ':not(:first-child)',
! columns: ':visible'
! },
! extension: '.csv',
! fieldSeparator: ';',

How do I prevent only the download?

exportOptions: { columns: [28, 1, 2, 7, 8, 14, 15, 16, 17],...

The data is from column 28 but header from column 0

Kind regards
Jack

I noticed that the colours on the buttons are gone. I have the same issue, using Bootstrap5 it seems colours on buttons are no longer allowed?
Does it matter in which order my files are loaded?

I have this now:

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css'/>
        <link href="../dt/datatables.min.css" rel="stylesheet">
 

        <!-- link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/jszip-3.10.1/dt-2.0.2/af-2.7.0/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.0/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.css" -->
        <link rel="stylesheet" type="text/css" href="../Editor-PHP-2.3.2/css/editor.bootstrap5.min.css">
        <!-- link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.min.css" -->
        <link rel="styleshee" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/css/selectize.css">
        <link rel="stylesheet" type="text/css" href="../css/editor.selectize.css">
        <link rel="stylesheet" type="text/css" href="../css/generator-base.css">
    
        <script src="../dt/datatables.min.js"></script>
        <!-- script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/jszip-3.10.1/dt-2.0.2/af-2.7.0/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.0/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.js"></script -->
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js'></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
        <script type="text/javascript" charset="utf-8" src="../dt/Editor-2.3.1/js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="../dt/Editor-2.3.1/js/editor.bootstrap5.min.js"></script>
        <!-- datetime -->
        <script src="../js/moment-with-locales.js"></script>
        <script src="../js/datetime-moment.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/js/standalone/selectize.js"></script>
        <script src="../js/editor.selectize.js"></script>

Thanks,
Jan

Was a little tricky, so thought I would share.

c

Here is simple demo showing how to add similar checkmarks to buttons in a collection.

c

Jan

The Excel and PDF exports the footer but Copy, CSV and Print don't. This can be seen with the Basic Example. My understanding is the default is the footer is not included.

Second issue:

Exporting the FooterCallback example doesn't pickup the updated footer cells. See this test case:
https://live.datatables.net/sulehuso/1/edit

Its using the buttons.html5.js nightly to pick up the Excel export footer fix in this thread.

Copy:

Zenaida Frank   Software Engineer   New York    $125,250
Zorita  Serrano Software Engineer   San Francisco   $115,000Total:              undefined

The footer is on the same line as the last row. The Total cell looks like is far left.

Excel:

The Total is not shown in the correct cell. Its possible this is due to using Numbers on the Mac instead of Excel.

CSV:

"Zenaida","Frank","Software Engineer","New York","$125,250"
"Zorita","Serrano","Software Engineer","San Francisco","$115,000""Total:","","","","undefined"

Same as Copy the footer is on the same line as the last row. The Total is in the first cell not the 5th.

PDF:

The Total looks like it is in the wrong column.

Print:

Kevin

I've working with the custom buttons and have been able to get my columns to be made visible with the following code. My problem is that when I make columns visible, I want the others invisible. I am trying to keep the number of columns visible at any one time limited to keep the users attention focused. For example, if a user clicks on the 'Payroll' button, I don't want them to also see the 'Debt' or the 'Contracts column'

This is my code, which works fine. I just need the code to hide some of the other columns.

Thanks,

Larry

buttons: [

    {
        extend: 'columnVisibility',
        text: 'Payroll',        
        visibility: true,
        columns: '8'
    },
    {
        extend: 'columnVisibility',
        text: 'Debt',
        visibility: true,
        columns: '9,14'
    },
    {
        extend: 'columnDefs',
        text: 'Contracts',
        visibility: true,           
        columns: '11'           
    }

]