Style Presets¶
Style presets let you customize the visual appearance of grid elements including colors, fonts, and formatting.
Overview¶
The style system allows you to:
- Create reusable style configurations
- Apply styles to specific grid elements
- Format numbers and dates consistently
- Highlight important data visually
Style Categories¶
Styles can be applied to different parts of the grid:
| Category | Description |
|---|---|
| Group Rows | Header rows for grouped data |
| Headers | Column header cells |
| Cells | Regular data cells |
| Alternate Rows | Odd/even row styling |
| Selected Cells | Currently selected cells |
| Hovered Cells | Mouse-over styling |
Built-in Presets¶
The system includes several ready-to-use presets:
Default Group¶
A subtle green background for group row headers. - Semi-transparent green background - Semibold text
Accent Group¶
A more prominent teal style for group headers. - Teal background with higher opacity - Bold text in teal color
Bold Header¶
Uppercase, bold column headers. - Light gray background - Uppercase text transform
Highlight Cell¶
Yellow highlighting for important cells. - Yellow background
Error Cell¶
Red styling for error values. - Red text color - Light red background
Success Cell¶
Green styling for success values. - Green text color - Light green background
Creating Custom Presets¶
Using the Style Editor¶
- Open Grid Settings > Styles
- Click New Style Preset
- Configure the style options:
- Text properties (font, size, color)
- Background (color, opacity)
- Borders (width, style, color)
- Spacing (padding)
- Name your preset
- Click Save
Text Properties¶
| Property | Options |
|---|---|
| Font Size | 8-48 pixels |
| Font Weight | Normal, Medium, Semibold, Bold |
| Font Style | Normal, Italic |
| Text Align | Left, Center, Right |
| Text Color | Any color |
| Text Decoration | None, Underline, Strikethrough |
| Text Transform | None, Uppercase, Lowercase, Capitalize |
| Letter Spacing | 0-10 pixels |
Background Properties¶
| Property | Options |
|---|---|
| Background Color | Any color |
| Background Opacity | 0% - 100% |
Border Properties¶
| Property | Options |
|---|---|
| Border Width | 0-10 pixels |
| Border Style | None, Solid, Dashed, Dotted |
| Border Color | Any color |
| Border Radius | 0-20 pixels |
Spacing Properties¶
| Property | Options |
|---|---|
| Padding Top | 0-50 pixels |
| Padding Right | 0-50 pixels |
| Padding Bottom | 0-50 pixels |
| Padding Left | 0-50 pixels |
Number Formatting¶
Configure how numeric values are displayed:
| Option | Description | Example |
|---|---|---|
| Decimals | Decimal places (0-10) | 1234.56 |
| Thousands Separator | Use comma grouping | 1,234.56 |
| Prefix | Text before number | $1,234.56 |
| Suffix | Text after number | 1,234.56 m² |
| Show Sign | Always show +/- | +1,234.56 |
| Negative Color | Color for negatives | -1,234.56 |
Date Formatting¶
Configure date display formats:
| Format | Example |
|---|---|
| Short | 12/15/24 |
| Medium | Dec 15, 2024 |
| Long | December 15, 2024 |
| ISO | 2024-12-15 |
| Custom | DD.MM.YYYY |
Applying Styles¶
To Group Rows¶
- Open style settings
- Select Group Rows category
- Choose a level (1, 2, 3, etc.)
- Select a preset to apply
- Enable the applied style
To Columns¶
- Open style settings
- Select Cells category
- Choose a specific column (or all)
- Select a preset
- Enable the style
To Headers¶
- Open style settings
- Select Headers category
- Choose column(s)
- Apply preset
Managing Applied Styles¶
Enable/Disable¶
Toggle individual applied styles on and off without removing them.
Remove¶
Delete an applied style to remove the customization.
Priority¶
When multiple styles apply to the same element, later styles take precedence.
Duplicating Presets¶
- Open the preset list
- Click the duplicate icon on any preset
- Enter a new name
- Modify as needed
- Save
Built-in Presets
You can duplicate built-in presets to create customized versions.
Best Practices¶
Consistency¶
- Use a limited color palette
- Apply similar styles to similar data types
- Create a naming convention for presets
Readability¶
- Ensure sufficient contrast
- Don't overuse bold or colors
- Test with different data values
Performance¶
- Limit the number of applied styles
- Use category-level styles instead of cell-level when possible
Troubleshooting¶
Styles Not Applying¶
- Verify the style is enabled
- Check the target category matches
- Ensure no conflicting styles have higher priority
Colors Look Different¶
- Background opacity affects perceived color
- Check for overlapping styles
- Consider dark mode settings
Number Format Not Working¶
- Number formatting only applies to numeric columns
- Check the column data type
- Verify the style is applied to the correct column