Answers

• allan Posts: 63,145Questions: 1Answers: 10,403 Site admin

  May 9 Answer ✓

  Use columns.visible to hide columns and rowCallback or createdRow if you need to modify classes on the tr.

  I attempted a workaround by setting column width of said cells to 0px in columnDefs instead of hiding them, but the width isn't affecting the colgroup properly and there's no change.

  Yes, you'll get overruled by the browser for that, since the content of the column can't fit into 0px width - it will expand it to the minimum that can fit the content.

  but I wish there was an option to have the className of the defined column to also apply to col nodes in the colgroup (maybe an setting in init?).

  I looked into that, but there were a massive number of complications that it threw up. I can't recall them off the top of my head, but I do remember looking into it and backing away from it!

  The best I can think of is an event listener on init to do it programmatically as you say:

  $(document).on('init.dt', function (e) {
    var api = new DataTable.Api(e.target);
    var table = api.table().node();
  
    api.columns('.hide').indexes().each(function (col) {
      $(table).find('col[data-dt-column=' + col +']').css('display', 'none');
    })
  });
  

  https://live.datatables.net/xecaxaxa/5/edit

  That said, I'd recommend moving to ``-init columns.visible` if you can. I've no idea what impact that will have on something like Responsive.

  Allan
• redfellow Posts: 13Questions: 6Answers: 0

  August 1 edited August 1

  In case someone ends up having the same question than I, and since column visibility API is not the right solution for my problem -- having the need to have style-hidden columns, for column render function to still trigger.

  Basically I have columns that set classes on the TR node based on cell data, and that data can change any time post TR creation, and is handy to have apply to the TR on the fly via updating row data.

  I ended up with using a className to hide these so called "internal" columns. Simply setting hidden-column as className for a col, and having this CSS: works:

  th.hidden-column,
  td.hidden-column {
      font-size: 0 !important;
      padding: 0 !important;
  }
  

  The CSS above seems to play nicely with the colgroup allowing the column to virtually take 0 width.