Cell styling and Theming

For cells, you can customize appearance in two ways:

Styling: CSS classes and per-cell style options.
Theming: CSS variables for reusable, global design.

CSS classes

Use classes when you want style rules in CSS instead of inline configuration.

Relevant option:

columns[].cells.className for body cell classes.

Grid.grid('container', {
    columns: [{
        id: 'score',
        cells: {
            className: 'score-cell'
        }
    }]
});

Inline styles

Use columns[].cells.style for inline style configuration on body cells.

Grid.grid('container', {
    columns: [{
        id: 'score',
        cells: {
            style: {
                textAlign: 'right',
                fontWeight: '600'
            }
        }
    }]
});

cells.style also supports callbacks. In callback form, this is the cell instance.

Heat-map style color range example:

Grid.grid('container', {
    columns: [{
        id: 'score',
        cells: {
            style: function (cell) {
                const value = Number(cell.value);
                const min = 0;
                const max = 100;
                const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
                const hue = 120 - (120 * t); // green -> red
                return {
                    backgroundColor: 'hsl(' + hue + ' 80% 88%)',
                    color: '#1f2937',
                    fontWeight: '700'
                };
            }
        }
    }]
});

Theming

Use Theming when you want consistent styling for all cells and states through shared variables. You can also use Theming to conditionally theme certain rows, columns etc, but is limited to string comparison.