cellStyle

Description

Optional. Defines the style of a cell in the table

Usage

cellStyle?: (row:{},col:{}) => 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;
}

• col - an object with the column configuration parameters:

{
    id: string,
    width: number,
    flexgrow?: number,
    sort?: boolean,
    left?: number,
    editor?: string | any,
    setter?: (obj: {}, value: Value) => void,
    getter?: (obj: {}) => Value,
    hidden?: boolean,
    options?: [],
    header?: string | [],
    footer?: string | [],
    resize?: boolean,
    treetoggle?: boolean,
    cell?: any,
    css?: string,
    tooltip?: boolean | (obj: any) => any,
    template?: any
}

All parameters description you can find here: columns

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

Example

<script>
    import { getData } from "./common/data";
    import { Grid } from "wx-svelte-grid";

    const { data, columns } = getData();

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

</script>

 <Grid 
  {data}
  {columns}
  cellStyle={(row, col) => (row.id == 14 && col.id == 'lastName' ? 'cellStyle' : '')}
  footer={true} />

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

---

Related articles: columns