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();

</script>

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

<style>
    :global(.row:not(.selected) .cellStyle) {
        color: white;
        background: #1b85dc;
    }
</style>

---

Related articles: columns