Skip to main content

cellStyle

Description​

Optional. Defines the style of a cell in the table

Usage​

cellStyle?: (row:any,column: IColumn) => string;

Parameters​

The property is a function that takes the following parameters:

  • row - an object with the row configuration, where key is the row ID:
{
  [key: string]: any;
}
  • column - an object with the column configuration parameters. All parameters description you can find here: columns

The function returns the name of a CSS class or an empty string.

Example​

<script setup>
    import { getData } from "./common/data";
    import { Grid } from "@svar-ui/vue-grid";

    const { data, columns } = getData();

    const cellStyle = ref();
    let i = 0;
    function setCellStyle() {
        let id = data[i].id;
        cellStyle.value = (row, col) =>
            row.id == id && col.id == "lastName" ? "cellStyle" : "";
        i = i == data.length - 1 ? 0 : i + 1;
    }

</script>

<template>
    <Grid 
        :data="data"
        :columns="columns"
        :cellStyle="(row, col) => (row.id == 14 && col.id == 'lastName' ? 'cellStyle' : '')"
    />
</template>

    <style scoped>
        :global(.rowStyle:not(.wx-selected) .wx-cell:not(.cellStyle)) {
            color: white;
            background: #457b9d;
        }
        :global(.columnStyle) {
            text-decoration: underline;
        }
    </style>

Related articles: columns