CssLayout table and datagrid

Support
#1

How can we colour header of a table or datagrid?

#2

You can use the css selector


.v-table-header-cell {}


.v-table-header {}
#3

Firstly you have to extend Halo theme in Cuba Studio in the Project properties tab. Studio will create new folders structure in your project inside of the web module. Then you have to edit halo-ext.scss file and add new SCSS rules.

For example, you have table like this:


<table stylename="custom-coloring">
    ...
</table>

And to color whole table header you should add the following SCSS rule to your halo-ext.scss:

css
.custom-coloring .v-table-header {
  background-color: turquoise;
}

To color specific column header (for example, the first) you should add the following SCSS rule:

css
.custom-coloring .v-table-header-cell:nth-of-type(1) {
  background-color: tomato;
}

If you’ve added the DataGrid component like this:


<dataGrid stylename="specific-coloring">
    ...
</dataGrid>

To color whole header of your DataGrid component you should add the following SCSS rule:

css
.specific-coloring .v-grid-header {
  background-color: turquoise;
}

To color specific column header (for example, even columns) you should add the following SCSS rule:

css
specific-coloring .v-grid-cell:nth-of-type(2n) {
  background-color: tomato;
}

extended_theme

#4

Thank you so much Danil.

Another follow up question, We’re do I define global level styles e.g. If I want all my selected TextField will have blue background, I want to define once and can this be inherited automatically without setting the styles individually?

Mortoza

#5

To define background color for selected TextField components you should add this snippet into your halo-ext.scss:

css
.v-textfield:focus {
    background-color: rgb(0,0,255);
}

Also you can override default Valo global variables in your halo-ext-defaults.scss file and it will affect all components which use them. For example you are able to override:

  1. $v-textfield-background-color
  2. $v-textfield-background-color–readonly
  3. $v-textfield-shadow

You can find more options inside of _textfield.scss file.

#6

I am having problems to override a background for header grouptable. I added follow to halo-ext.css:

.v-table-header-drag {
    background:#0072C6;
}

but I am not able to change, what I am wrong ?
image

#7

Soved adding

  .v-table-header {
    background-color: #d3d4ff;
  }
1 Like