SYIDAX GRID

Themes for your app

Grid themes coordinate backgrounds, lines, text, and selection states inside the table. They define the table's reading environment without replacing the page background.

Markdown source Features

How it works and when to use it

Use alpine, balham, or their dark presets. Choose a base preset first, then override only the tokens you need to preserve contrast for hover, selection, errors, and other states.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Installation and integration · Shared sample data

Example 1. Light and dark views

Explicitly update the Grid theme when the app theme changes.

javascript

grid.theme = 'alpine';
// When the app switches to a dark theme:
grid.theme = 'alpine-dark';

Verify the result: Table text, lines, and backgrounds change together. Manage colors outside the table through app styles.

Example 2. Adjust density

Balance the amount of visible data against readable spacing.

javascript

grid.theme = 'balham';
grid.rowHeight = 36;
grid.height = 480;

Verify the result: Changing Grid height and row height changes the visible row count. Also test touch interaction and long text.

Example 3. Extend with brand tokens

Pass {extends: baseTheme, tokens: tokenObject} to theme. Check GridTokenOverrides for available keys and adjust app accent colors, selection colors, and contrast.

Verify the result: Do not guess CSS variable names. After changes, verify that selected rows, editing errors, menus, and tooltips remain readable.

Combining features and troubleshooting

Renderer content taller than the fixed row height may be clipped. Design row layout and theme density together.

Mutating only the theme object's contents may not trigger an update. Pass new theme and tokens objects.