Custom styling for KT-datatables in Vuejs
HI.
It is possible to add to the kt-datatables component (Vuejs) the option to customize the styles of the background color and borders of the cells. I need this option since I need to change the background color depending on a specific value in the cell.
Replies (3)
Hi Alejandro García,
Thank you for reaching out to us.
Unfortunately, such property is not supported by our component at the moment. But you can achieve the same behavior using styles.
Customize your cell template and on the top wrapper add class conditionally.
<template v-slot:product="{ row: customer }">
<div :class="customer.product === "Basic" && "highlighted-cell"">
{{ customer.product }}
</div>
</template>Then you can use this class to customize row styles.
<style lang="scss">
.table td:has(.highlighted-cell) {
background-color: red;
border-style: solid;
border-width: initial;
border-color: greenyellow;
}
</style>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hello. Thanks for your help. I have another question, it is possible that the color of "border-color" changes to a color depending on the theme that is applied to the page. For example my code is the following:
<style lang="scss">
.table td:has(.r-cell) {
background-color: #ed5c53;
border-style: solid;
border-width: medium;
border-color: rgb(0, 0, 0);
color: white;
}
</style>I need to change the color of "border-color" from black to white depending on whether the theme is light or dark.
Hi Alejandro García,
To have a different color depending on theme mode instead of using a static border-color value you can use a bootstrap variables.
For example:
border-color: var(--bs-border-color);Or if you want to use custom values you can have two css rules depending on theme attribute value.
//color for dark mode
[data-bs-theme="dark"] .table td:has(.r-cell){
border-color: black;
}
//color for light mode
[data-bs-theme="light"] .table td:has(.r-cell) {
border-color: white;
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
