How to further customize the bs5 styling?

Tablefak

Disclaimer: I'm still a noob regarding CSS and web development in general, so I apologize in advance if this question isn't directly related to the datatables project.

I'm using the bs5 styling for my datatable and I'm looking for a way to further customize some CSS. For example, I'd like to change the row selection color.

My first thought was that I could simply override some SCSS variables (like you can do with the bootstrap itself, for example). However, by looking at my node_modules folder, I can see that the datatables.net-select-bs5 package only includes the compiled CSS files, making my approach impossible:

Customizing plain CSS can be tedious, so I assume I'm missing something.

Tablefak

According to the information here, I can avoid using the download builder, and download the Select project directly from a GitHub repo instead.

That way I should have access to the SCSS files like this one.

Would this be the right approach? And should I download all the datatables related packages this way too if I might wanna customize other styles? E.g. should I clone the main datatables source repo too?

allan

In the case of the row selected colour, you don't need to mess around with the SCSS files at all. In DataTables 1.13.2 I introduced a CSS variable to set the row selected colour, since that is such a common style change to want to make.

Here is an example showing it turning the selected row red. You can use any rgb colour code you want.

Our npm packages (e.g. datatables.net-select-bs5 - although actually the row selected colour is part of the datatables.net-bs5 package) contain only the compiled code - our source repos contain the original SCSS, and now often TypeScript (but not the compiled code).

Just like Bootstrap, I'm going to be moving away from SCSS variables, towards CSS variables (although I'm very keen to keep compatibility with older browsers), so there will be fallbacks.

If you want complete customisation, then yes, you can build DataTables etc from source, but it isn't as straightforward as it should be (I use custom bash scripts from about a decade ago for example - it was long before the days of ESBuild and friends).

I would generally suggest just overriding the styles that you want to customise - I think you'll find that much easier (I do for integrating with a new site!).

Aside from the row selected colour, what other styles do you want to customise?

Allan

Tablefak

Hi, Allan. Thank you for a detailed response, and thank you for creating such an amazing library - I love it!

After updating from 1.13.1 to 1.13.2 I get some typescript errors like this:

So, it seems, typescript stopped seeing the types from the 'select' extension.

Updating datatables.net-bs5 was the only thing I did, and I also verified that the errors go away if I downgrade back to 1.13.1.

Is this a problem on my side?

allan

It shouldn't have done - have you got datatables.net-select and datatables.net-select-bs5 installed as well?

Failing that, are you able to create a repo showing the issue so I can dig into it please?

Thanks,
Allan

Tablefak

Yes, those packages were installed.

I also tried updating datatables.net-bs5 to 1.13.4, but it didn't help either. Then, I updated datatables.net to 1.13.4 too, and it solved the problem.

Now back on topic. I tried using --dt-row-selected and --dt-row-selected-text - they work flawlessly. One thing that I found strange, though, is that you have to write it like so:
--dt-row-selected: 234, 240, 252
instead of
--dt-row-selected: rgb(234, 240, 252)
Perhaps, that's related to the CSS variables (as opposed to SCSS ones) that you were talking about.

Unfortunately, I didn't find a similar variable for the background color of the hovered row (when using the table-hover class). What's the recommended way to customize that?

allan

Yes - you have to write it that way as it allows me to do backwards compatibility with the SCSS variables and also for older browsers. Its a pain!

Unfortunately, I didn't find a similar variable for the background color of the hovered row (when using the table-hover class).

There isn't one. Those are the only two CSS variables at the moment, which is why I asked what other styles you were interested in so I could look at adding them. Is the colour tint for the hover not enough in your use case?

Allan

Tablefak

For now, the hover color is the only thing that I want to customize.

allan

Looks like Bootstrap 5 (since you are using that integration) already has you covered for that:

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

Set those two variables and that should do it.

Allan

Tablefak

That didn't work for me.

The code you copied is indeed present in the bootstrap 5. However, as far as I can see, this gets overridden in the CSS of datatables.net-bs5:

If I modify the value in this file directly, then the hover bg color indeed changes.

allan

Gah - I forgot about that. Sorry! That's because I use box-shadow to providing tinting, while a background colour would then get mixed in. Also it allows for blending with the sorting selected column.

I've just added a couple of CSS variable and theme (inc. Bootstrap) support to address this.

You can now use:

:root {
    --dt-row-hover: 255, 255, 255;
    --dt-row-stripe: 255, 255, 255;
    --dt-column-ordering: 255, 255, 255;
}

for example to control those parameters. The blending is still done using predetermined alpha values, so it isn't 100% flexible, but it strikes a balance between that and the need for a million variables!

I'm currently working on full dark support for DataTables, and I'm using CSS variables as part of that. So there might be more added as part of that work.

Allan

Tablefak

Thank you, and keep up the great work!

I'm not sure if a predetermined alpha would be enough for my case, so for now I'll just use a less pretty approach of overriding specific CSS like so:

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px #E8BC24FF;
}