javascriptcsstypescriptvue.jscss-tables

Vuejs - vue3-easy-data-table

Im working on a project in vuejs that uses "vue3-easy-data-table" Im following the style recommendations on this page.

https://hc200ok.github.io/vue3-easy-data-table-doc/features/style-customization.html

when I try to use

--easy-table-body-even-row-font-color: #fff; --easy-table-body-even-row-background-color: #4c5d7a;

It does not take change the background color of the even rows. Even if I add !important it doesn't make a difference and if you click on the edit with code Sandbox it doesn't work there either.

Any idea how I could get this to show a different color for even rows as it does in the example.

Solution

  • You should check if you set the table-class-name and alternating attribute to your custom style.

    like in the example there is this code:

    <EasyDataTable
  theme-color="#1d90ff"
  table-class-name="customize-table" // important
  header-text-direction="center"
  body-text-direction="center"
  alternating // important
/>

    .customize-table {
  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;
}