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​

const { data, columns } = getData();

export default function App() {
    const api = useRef(null);

    return (
        <Grid
            data={data}
            columns={columns}
            cellStyle={(row, col) => (row.id === 14 && col.id === 'lastName' ? 'cellStyle' : '')}
            footer={true}
        />
    );
}
:global(.row:not(.selected) .cellStyle) {
    color: white;
    background: #1b85dc;
}

Related articles: columns