Skip to main content

columnStyle

Description​

Optional. Defines the style of a column in the table

Usage​

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​

import { getData } from "./common/data";
import { Grid } from "@wx/react-grid";

const { data, columns } = getData();

export default function App() {
    return (
        <div style={{ padding: '20px' }}>
            <div>
                <Grid
                    data={data}
                    columns={columns}
                    columnStyle={col => (col.id === 'city' ? 'columnStyle' : '')}
                    footer={true}
                />
            </div>
        </div>
    );
}
.columnStyle {
    text-decoration: underline;
    color: rgb(231, 7, 231);
}

Related articles: columns