Skip to main content

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