Styling Cells

Applying cssFormat method

Generally, to apply some style to specific cells in a column, you should use the cssFormat attribute inside the columns parameter. The attribute sets a function that will define how cells of the column must be colored. The function takes the following parameters:

• cell value (compulsory) - current cell value;
• row item object - all values for the current row;
• row ID - ID of the row in question;
• column ID - ID of the column in question.

General styling of cells

function mark_votes(value, config){
  if (value > 400000)
    return { "text-align":"right" };
};

webix.grid({
  columns:[
    { id:"title", header:"Film title"},
    { id:"votes", header:"Votes", cssFormat:mark_votes }
  ],
});

Cell styling within configuration

If you specify data directly inside the DataGrid constructor, you have one more way to set the desired style for a cell - the $cellCss property.

We don't recommend to dynamically change attributes with the **'$'** prefix (e.g. $css, $cellCss). Please, use the [addCellCss](/docs/api/datagrid-addcellcss), [addRowCss](/docs/api/datagrid-addrowcss) methods instead.

Setting cells style directly in the dataset

<style>
  .my_style{
    background-color:#FFAAAA;
  }
</style>

<script>
webix.grid({
  columns:[
    { id:"title",  header:"Film title"},
    { id:"votes",  header:"Votes"}
  ],
  data:[
    {
      id:1,
      title:"The Shawshank Redemption",
      votes:678790,
      $cellCss:{
        votes:"highlight"
      }
    },
    {
      id:2,
      title:"The Godfather",
      votes:511495,
      $cellCss:{
        votes:{ "text-align":"right" }
      }
        }
  ]
});
</script>

Related sample:  Cells Styling