columnStyle
Description
Optional. Defines the style of a column in the tableUsage
columnStyle?: (col:{}) => string;
Parameters
The function takes the following parameters:
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>
<div style="padding: 20px;">
<div>
<Grid
{data}
{columns}
columnStyle={col => (col.id == 'city' ? 'columnStyle' : '')}
footer={true} />
</div>
</div>
<style>
:global(.columnStyle) {
text-decoration: underline;
color: rgb(231, 7, 231);
}
</style>
Related articles: columns