Give an id/class to a dynamic column header (when creating in js)

tacman1123

Is there a way to give an id to a th via the column definitions when creating a datatable dyanmically? How about a class?

https://datatables.net/reference/option/

<th data-dt-column="2" rowspan="1" colspan="1" class="dt-orderable-none" aria-label="thumbnail">
    <span class="dt-column-title">thumbnail</span><span class="dt-column-order"></span>
</th>

I'd like to add my own properties here, I know I can add my own className but I think that applies to the column header and the cell data. I want to add an id to the header and perhaps my own class to just the th. Is that possible?

Thx.

tacman1123

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

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

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

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

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

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