I would like to use a vector for one of the titles of my table column

SaaiZ

Description of problem:

As the title states this problem is fairly simple. I want to set the title for one of my table columns to a vector image. I have tried just setting the created img element as the title but this just gives me the string representation of the element.

I have also tried just using the image's path (the import variable) but that just sets the title to a plain text path.

There are other possible solutions i can think of, like making a function that loops over the thead tr until it finds the element that contains a certain innterText value but that seems excessive.

Currently I'm setting the column title using the columns: option when creating the table.

Is there an easier way I'm overlooking here?

SaaiZ

I found a solution to this that is fairly simple.

When defining your table in the html you can just define the table headers awell. That would look something like this:

    <table id="myTable" class="display">
      <thead>
        <tr>
          <th>some title</th>
          <th id="icon-header">another title</th>
        </tr>
      </thead>
      <tbody id="scores-table">
      </tbody>
    </table>

Now that the header you want an icon on has an id you can target it with a query selector.

There is a matter of that element containing two spans at the moment of writing this. You want to change the innerHTML of the span.dt-column-title.

I'm not using much jQuery myself, so my code looks like this:

#with my other imports
import vector from "/path/to/your/vector";

#some other code

const table = new DataTable("#myTable", {
  paging: false,
  scrollY: 400,
});

const title = document.querySelector("#icon-header span.dt-column-title");
title.innerHTML = `<img src=${vector}/>`;

allan

I'd suggest using column().title():

table.column(x).title(`<img src=${vector}/>`);

Alternatively, set it during initialisation:

const table = new DataTable("#myTable", {
  paging: false,
  scrollY: 400,
  columnDefs: [{
    target: x,
    title: `<img src=${vector}/>`
  }]
});

Or finally, just have it in the HTML for your -tag table` before you initialise it:

<table id="myTable" class="display">
  <thead>
    <tr>
      <th>some title</th>
      <th id="icon-header"><img src=${vector}/></th>
    </tr>
  </thead>
  <tbody id="scores-table">
  </tbody>
</table>

Allan