How can CSS be injected into a DataTable for finer styling control?

dnakazawa

Hello,

I've been playing around with DataTables for the last week or so and I'm thoroughly confused with how styling works within DataTables. I understand that through the 'dom' I can set the classes of the components I am using based on the CSS framework, but what if I want to write my own CSS?

For example, I am using Vue.js to create a component with a DataTable and would like to change how the pagination and export buttons behave based on whether they are being hovered over, active, etc. However, when I write the CSS in the <style> tags of the Vue component like normal, the CSS doesn't take at all and there are no changes to my page. The default Bulma styling doesn't fit the theme of my application, but DataTables is advertised as having the capability of fitting into any theme (I am using Bulma for the entire application, but writing CSS for these is much more straightforward and intuitive).

I'd appreciate any help/explanation for how to write CSS for DataTables components.

Thank you in advance!

allan

Are you able to give me a link to your page showing the CSS not taking effect? I'm unsure why that would be unless you have the CSS scoped perhaps?

With the Bulma theme you are using, is it just a colouring issue that is a problem?

how the pagination and export buttons behave based on whether they are being hovered over, active, etc

I presume you mean how they are styled, rather than how they behave (interaction)?

Allan

dnakazawa

Hi Allan,

Thank you for your quick response.

I feel very silly, the scoping was indeed the problem. I figured that since the code was within the component file the CSS should've been taking effect, scoped or not. If you have the time, would you mind explaining to me why the data table's scope isn't the same as the component's? Is it because DataTables is generating a separate markup?

Thank you again in advance!

allan

Vue's scoped CSS is very specific. It applies a data-v-... attribute to the elements it generators so the CSS is only applied to those specific elements that the component controls.

However, DataTables generates its own elements, so they don't have that same attribute, thus causing the issue you are seeing.

Good to hear you've got it working now.

Allan

dnakazawa

Thank you again!