Answers

• tacman1123 Posts: 199Questions: 46Answers: 1

  August 24

  Related: Instead of data-dt-column="2" which is a numeric index, I'd much rather be able to define my own unique code and make it accessible somehow, e.g. data-dt-column-code="thumbnail".
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  August 25 edited August 25

  want to add an id to the header and perhaps my own class to just the th. Is that possible?

  There isn't anything within Datatables to configure the header with an id. However there is nothing in Datatables to stop you from doing so by defining in the HTMl or using Javascript. or jQuery methods like jQuery attr(). Same with the classname. You can use columns.className but that will apply to both the th and td in the tbody.

  'd much rather be able to define my own unique code and make it accessible somehow, e.g. data-dt-column-code="thumbnail".

  Same as above you can create your own HTML5 data attributes. I would make sure to use something different from the Datatable attributes.

  Kevin
• tacman1123 Posts: 199Questions: 46Answers: 1

  August 25

  Sorry, I'm not following where to do that. My table is created completely with javascript and populated with ajax.

  new DataTable('#example', {
     columns: this.cols(),
      ajax: this.ajax(),
      serverSide: true,
      scroller: true,
      responsive: true,
      searchPanes: this.searchPanes()
  });
  

  the columns and the ajax data match in key name (id, url, thumbnail, etc.) but vary depending on the datasource (e.g. if an admin is logged in, there are more fields).

  After its done initializing (I forget the event name) I guess I can navigate through the table / tr / th and add a class and id and data- attributes and map backwards from the column number back to my column data (as when using columnDefs).

  But it'd be a nice feature if when defining the column I could simply add those.

  Ultimately, I'm trying to figure out why the column headers aren't aligned with the data, I'll open a separate issue for that. But in the process we wanted to manipulate the header DOM, thus this issue. Is there a specific place to make feature requests?

  
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  August 25 Answer ✓

  Use initComplete to apply the id, class names, etc to only the header cells.

  If you want to apply a class name to both the header and all the cells in the column use columns.className.

  To apply attributes to cells in each row use createdRow. See this example.

  Ultimately, I'm trying to figure out why the column headers aren't aligned with the data,

  Its hard to say without seeing the problem but there are a couple common issues:

  1. The table is initialized when hidden which causes issues with width calculations. Use columns.adjust() when the table is made visible. See this example.
  2. The proper Datatables style integration files are not used for the style framework being used, Bootstrap 5 for example. Use the Download Builder to get the correct files.

  If this doesn't help then please provide a test case replicating the issue so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• tacman1123 Posts: 199Questions: 46Answers: 1

  August 25

  It's probably one of those things. I'll do a deeper dive, but here's what should be a showcase of all the awesomeness datatables offers (scroller, responsive, etc.);

  https://museado.org/en/pixie/pixie/meili/larco/object?table=object

  The problem only happens when responsive, not when the screen is full width. I'm guessing it's related to the columns.adjust() not being called.

  Thanks!
• tacman1123 Posts: 199Questions: 46Answers: 1

  August 31

  Eventually this was solved by adding a class to the header, so columns are all aligned now!