Hello,

I'm having a small problem using the FixedColumns component with dates in ISO 8601 format.

In a test case, searching for a specific date doesn't work.

However, sorting is functional, and I can search for dates before or after. Only the exact date doesn't work.

Just to clarify, my regional settings are in French.

Ex. Sorting on date: OK

Ex. Filtering on a later date: OK

Ex. Filtering on a exact date: KO

However, the date 2025-11-09 does exist in the table.

Just to clarify, I don't use Moment.js or Luxon.

Thanks in advance for your help and have a nice day.

Lolo

Link to Bootstrap Page: https://getbootstrap.com/docs/5.3/content/tables/#table-group-dividers

Hi

This is really minor. Not sure if this is a supported Bootstrap Feature (class) so might not be an issue at all.

When including the Fixed Columns extension (its css) with Bootstrap the <tbody class="table-group-divider"> does not work. If removed it works - above test case. It does not enable the extension.

Seems to be:

table.dataTable {
border-collapse: separate;
}

I dont use Fixed Columns but load all extensions due to laziness and I could not work out why I could not use the class on tbody for something I am working on.

Let me know if you need more information or I missed something obvious.

Thanks for a great product

Pete

Is there a stable version that works with DT 1.x and if so, where can I download it?

Thank you

I have a table with fixedColumns true but since this feature adds a table on top of the original column, the link in that column do not work any more. Is there a way to fix this.

Thanks

George

However, if you don't also use scrolling (scrollX / scrollY), the cells in the table header and footer are not fixed horizontally.

After many hours I finally figured out how to solve it with this css:

th.dtfc-fixed-left {
  background-color: white;
  top: 0; /* for the header */
  bottom: 0; /* for the footer */
  z-index: 3 !important;
}

Tested in Chrome and Firefox with FixedColumns 4.1.0 and either FixedHeader 3.1.9 or 3.2.3.

Here's a demo: http://live.datatables.net/nujapafu/1/edit

Perhaps this is something that could be incorporated in the Datatables code?

Test Case: http://live.datatables.net/xivahiqa/4/edit?html,css,js,output

Is this related to any Jquery version?

Current JQuery version - 3.4.1 in my application

**"Severity Code Description Project File Line Suppression State
Error Build:Cannot find type definition file for 'datatables.net'. \Scripts\types.d.ts 8

Error Build:Cannot find type definition file for 'jquery'. \Scripts\types.d.ts 7 **

Any help is highly appreciated...

This is the code:

_ ~~

_

As part of XSS prevention I have implemented X-XSS-Protection header but js file still showing the flaw.

I have added a row with individual serach boxes. Together with fixed column, the serach row does not have any fixed column if I set orderCellsTop to true. If I set orderCellsTop to false, top row does not have any fixed column.

I have done a test case:
http://live.datatables.net/hepeqiro/1347/edit

And a picture that show the problem.

I'm doing something wrong?

//L

Here is my search.component.ts with the configuration:

createDataTable() {
        this.dtOptions = {
          pagingType: 'full_numbers',
          pageLength: 5,
          lengthMenu: [5, 15, 30],
          processing: true,
          fixedColumns: {
            left: 0,
            right: 1
          },
          fixedHeader: true,
          scrollX: true,
          /*columnDefs: [
            { "width": "10%", "targets": 0 },
            { "width": "10%", "targets": 1 },
            { "width": "5%", "targets": 2 },
            { "width": "13%", "targets": 3 }
          ],*/
          dom: 'Blfrtip',
          buttons: {
            buttons: [
              { extend: 'excel', className: 'btn btn-outline-success mb-3' },
              { extend: 'csv', className: 'btn btn-outline-success mb-3 me-3' }
            ],
            dom: {
              button: {
                className: 'btn'
              }
            }
          },
          responsive: true,
          language: {
            emptyTable: "Keine Daten in der Tabelle vorhanden",
            info: "_START_ bis _END_ von _TOTAL_ Einträgen",
            infoEmpty: "Keine Daten vorhanden",
            infoFiltered: "(gefiltert von _MAX_ Einträgen)",
            infoThousands: ".",
            loadingRecords: "Wird geladen ..",
            processing: "Bitte warten ..",
            paginate: {
              first: "Erste",
              previous: "Zurück",
              next: "Nächste",
              last: "Letzte"
            },
            aria: {
              sortAscending: ": aktivieren, um Spalte aufsteigend zu sortieren",
              sortDescending: ": aktivieren, um Spalte absteigend zu sortieren"
            },
            decimal: ",",
            search: "Suche:",
            thousands: ".",
            zeroRecords: "Keine passenden Einträge gefunden",
            lengthMenu: "Zeilen anzeigen:  _MENU_",
            datetime: {
              previous: "Vorher",
              next: "Nachher",
              hours: "Stunden",
              minutes: "Minuten",
              seconds: "Sekunden",
              unknown: "Unbekannt",
            },
          }
        };
      }

And the angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
              "node_modules/datatables.net-fixedcolumns-bs/css/fixedColumns.bootstrap.min.css",
              "node_modules/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js",
              "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
              "node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]

My Table looks like this:

As you can see on the right side, the column "aktionen" overlays the other columns instead of being sticky.
I want it to be sticky and behaves like in the examples of fixedColumns

Would be great if someone can help, greetings from Germany.

My issue is as below:

The columns row-selection checkbox, ID, Version, Status are the pinned to left columns here. I have added a background linear-gradient to td.dtfc-fixed-left::after and scaled using z-index so that all the pinned columns appear in an elevated view than the rest. In particular smaller widths, when i dynamically add more columns to the pinned list (i am basically re-rendering the table), the left values are not properly calculated for the pinnedColumns.

Buggy version-

Expected-

I am making use of autoWidth:true, as otherwise the table headers dont align up with the body cells. Any idea how to resolve this. Also, I could see that column.width doesn't get applied on to fixedColumns. Any clue?

Taken from the examples and removed table-striped: https://datatables.net/extensions/fixedcolumns/examples/styling/bootstrap4.html

Description of problem:
Fixed columns for bootstrap 4 includes CSS that changes row style to appear as though the table is striped even when the style has not been set on the table. If the table is set to be striped, the fixed columns row colouring is still different shade than a regular striped bootstrap 4 table.

Unsure if it's related to this one https://datatables.net/forums/discussion/comment/195457/#Comment_195457

Thanks for taking a look!

My mission - Freeze the first 2 rows of a datatable. I found absoluteOrder as a tool that might be a good solution for it but i'm open to any suggestions!

My problem - I want to freeze the entire first 2 rows only by using nameType1 and nameType2. e.g. Let's say I have a table with n columns, I need to check if nameType1 or nameType2 are exists in the first column and if so, no meter if I will try to sort the table from column 1, 2 or n, the first 2 rows will still be on top all the time, no mater what.

var nameType1 = $.fn.dataTable.absoluteOrder( 'X' );
var nameType2 = $.fn.dataTable.absoluteOrder( 'Y' );

table = $('#example').DataTable({
"columnDefs": [
{ "targets": 0, "type": nameType1 }
{ "targets": 0, "type": nameType2 }
]
});

I know that that this piece of code not working as I need it to be work, but this is where I'm now ^.^
I will be glad to get your support!

https://jsfiddle.net/polshgiant/dtm4793g/

Thanks for any help.

https://jsfiddle.net/polshgiant/dtm4793g/

Same code base will have to work when size reduced to minimal width.

I think there's a bug introduced by the latest version of FixedColumns Extension. Let's say if I use bootstrap4 theme "superhero" for the HTML page and put a datatable inside. If I enable the FixedColumn extension, the table's style will change.

Please check the two jsfiddle examples that I created, with or without fixedcolumns extension.

Without FixedColumns

https://jsfiddle.net/shrektan/cL9artsm/2/

With FixedColumns

https://jsfiddle.net/shrektan/0tsoezd2/4/

fiddle: https://jsfiddle.net/simaben/km1fdoew/34/

Is there a better approach?

I have Multiple tables on tabs, which I would like to freeze the left two Columns. The Table also widens all of the columns out and these make the table too wide..

When I try 2 Columns, it pushes them over each other and interrupts the search function at teh bottom

  $(document).ready(function(){
                $('.stripe').DataTable({
                    pageLength: 25,
                    responsive: true,
                    fixedColumns: {
                        leftColumns:2,
                    },
                    order: [ 0, 'asc' ],
                    dom: '<"html5buttons"B>lTfgitp',
                    buttons: [
                        { extend: 'copy'},
                        { extend: 'csv'},
                        { extend: 'excel'},
                        { extend: 'pdf'},
                        {extend: 'print', orientation: 'landscape', pageSize: 'A2',
                            customize: function (win){
                                $(win.document.body).addClass('white-bg');
                                $(win.document.body).css('font-size', '10px');
                            }
                        }
                    ],
                    
                })
})

// Using a loop for a number of tables

 <?php
                    foreach($discs as $key=>$disc){
                        $ind = $key +1;
                ?>
                $('#example<?php echo $ind; ?> tfoot th').each( function () {
                        var title = $(this).text();
                        $(this).html( '<input type="text" placeholder="Search" />' );
                });
                
                var table<?php echo $ind; ?> = $('#example<?php echo $ind; ?>').DataTable(
                   
                );
                    
                table<?php echo $ind; ?>.columns().every( function () {
                    var that = this;

                        $( 'input', this.footer() ).on( 'keyup change', function () {
                            if ( that.search() !== this.value ) {
                                that
                                    .search( this.value )
                                    .draw();
                            }
                        });
                });

              

                <?php } ?>

we are using AJAX source with disabled serverSide processing (so the search filtering and sorting remains fully on client). With this setting the fixedColumns is not working. As soon as we set serverSide to true it works. Is it possible to make it working without serverSide processing?

$('#stats_table').DataTable( {
    dom: 'frtip',
    ajax: {
      url: serverurl,
      type: "POST",
      data: function(d) {
        prepareStatsTablePostData(d);
      },
      dataSrc: function (d) {
        return d
      }
    },
    responsive:     false,
    paging:         false,
    autoWidth:      true,
    searching:      true,
    processing:     true,
    fixedColumns:   true,
    deferRender:    true,
    scrollY:        400,
    scrollX:        true,
    scrollCollapse: true,
    serverSide:     false,
    info: false,
    columnDefs: [...],
  });

Thank you,

Jan

My edit column is not aligned properly. It is not aligned to the rightmost part of the table. It ruins the layout.
How can I make it aligned.

        $(document).ready(function () {
            $("#users-table").DataTable({

                "ajax": {
                    "url": '@Url.Action("GetList", "Users")',
                    "type": "GET",
                    "datatype": "json"
                },

                "columns": [
                    { "data": "ID" },
                    { "data": "PERFIL" },
                    { "data": "USERCD" },
                    { "data": "USERNM" },
                    { "data": "USERNIF" },
                    { "data": "ABREVIATURA" },
                    { "data": "COREACTIVO" },
                    { "data": "USERML" },
                    { "data": "PERFILWEB" },
                    {
                        "render": function (data, type, row) {
                            let toggleIcon = row.COREACTIVO === "S" ? "" : "";
                            return " | '" + toggleIcon + "";
                        }
                    }
                ],

                "aoSearchCols": [ // Filters table in first load to show only active
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    { "sSearch": "S" } // Index 6
                ],

                language: {
                    search: "Procurar: ",
                    processing: "A carregar",
                    lengthMenu: "Mostrar _MENU_ registos",
                    info: "A mostrar de _START_ a _END_ registos de _TOTAL_ registos",
                    infoFiltered: "(filtrados _MAX_ registos de total)",
                    infoEmpty: "A mostrar 0 a 0 registos de 0 registos",
                    loadingRecords: "A carregar registos...",
                    zeroRecords: "Nenhum registo para mostrar",
                    emptyTable: "Tabela vazia",
                    paginate: {
                        first: "Primeiro",
                        previous: "Anterior",
                        next: "Próximo",
                        last: "Último"
                    },
                    aria: {
                        sortAscending: ": Ordenar por ordem crescente",
                        sortDescending: ": Ordenar por ordem decrescente"
                    }
                },
                pageLength: 25,
                "pagingType": "simple_numbers",
                "scrollX": true,
                "scrollCollapse": true,
                "fixedHeader": true,
                fixedColumns: {
                    leftColumns: 0,
                    rightColumns: 1
                },
                dom: "<'row'<'col-sm-6'B><'col-sm-6'f>>"+'rtip',
                buttons: [
                    {
                        "extend": 'colvis',
                        "text": '',
                        "columns": ':not(.permanent)',
                        className: "colvis"
                    },
                    {
                        text: '',
                        extend: "pageLength",
                        className: "show-entries"
                    },
                    {
                        text: '',
                        extend: 'collection',
                        className: "filter-active-inactibe-btn",
                        buttons: [
                            {
                                text: "Ativo",
                                name: "filter-active-btn",
                                action: function (e, dt, node, config) {
                                    $("#users-table").DataTable().columns(6).search('S').draw();
                                    this.active(true);
                                    $("#users-table").DataTable().button('2-1').active(false);
                                    $("#users-table").DataTable().button('2-2').active(false);
                                }
                            },
                            {
                                text: "Todos",
                                name: "filter-all-btn",
                                action: function (e, dt, node, config) {
                                    $("#users-table").DataTable().columns(6).search("").draw();
                                    this.active(true);
                                    $("#users-table").DataTable().button('2-0').active(false);
                                    $("#users-table").DataTable().button('2-2').active(false);
                                }
                            },
                            {
                                text: "Inativo",
                                name: "filter-inactive-btn",
                                action: function (e, dt, node, config) {
                                    $("#users-table").DataTable().columns(6).search('N').draw();
                                    this.active(true);
                                    $("#users-table").DataTable().button('2-0').active(false);
                                    $("#users-table").DataTable().button('2-1').active(false);
                                }
                            }
                        ]

                    }



                ],

                // Changes the color of the letter to red if the letter is N for COREACTIVO
                "createdRow": function (row, data, index) {
                    if (data.COREACTIVO === "N") {
                        row.style.backgroundColor = "#ff000055";
                    }
                },

                // Defines the visibility of the column ID
                "columnDefs": [
                    {
                        "targets": [0,6],
                        "visible": false,
                        "searchable": true
                    },
                    {
                        "targets": [9],
                        "className": "text-center",
                        "width": "50px"
                    },
                    {
                        "targets": [0,1,2,3,4,5,6,7,8],
                        "width": "20%"
                    }
                ]

            });

            $("#users-table").DataTable().buttons('2-0').active(true);
        });
    

Does fixedcolumns work on IOS? I can not get it to work. The same code works fine on windows and android.

Ludde

https://codepen.io/atelier-agile/pen/ZEJVjjE

codeline: table.fixedColumns().update();
Errormessage: Uncaught TypeError: table.fixedColumns(...).update is not a function

Is something changed in using update() in 4.0.1?

https://jsfiddle.net/polshgiant/dtm4793g/

<script>
$(document).ready(function(){
  $("#datatable").DataTable({
    language: {
      "url": "./materialize/app-assets/vendors/data-tables/lang/Spanish.json"
    },
    ajax: {
      "url": "./ajax/empresaAjax.php",
      "method": 'POST',
      "data": {'accion': 'empresas_datatable'},
      "dataSrc": ''
    },
    columns: [
      {"data": "id"},
      {"data": "numeracion"},
      {"data": "documento_numero"},
      {"data": "razon_social"},
      {"data": "direccion"},
      {"data": "ubigeo_completo"},
      {"data": "sunat_usuario_secundario"},
      {"defaultContent": "<a class='yellow accent-3 btn btn-floating btn-small z-depth-2'><i class='black-text material-icons'>edit</i></a><a class='red darken-1 btn btn-floating btn-small z-depth-2'><i class='material-icons'>delete</i></a>"}
    ],
    pageLength : 5,
    lengthMenu: [[5, 10, -1], [5, 10, 'Todos']],
    columnDefs: [{
      orderable: false,
      targets: [7]
    },
    {
      targets: [ 0 ],
      visible: false,
      searchable: true
    }],
    scrollX: true,
    scrollCollapse: true,
    fixedColumns: {
      left: 0,
      right: 1
    },
    
  });

el style que uso es el siguiente para evitar que sean mas de 1 fila en la tabla

<style>
  #datatable {
    white-space: nowrap;
  }
</style>

como se observa, la columna acciones se queda anclada la cabecera mas no el cuerpo, el ajax si devuelve los datos solicitados y el problema está en que el formato de la tabla se descuadra entre la cabecera y sus datos eso tambien se debe al uso del scrollX y por otro lado el fixedcolumn en right 1 que no se muestra

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