Documentation

Custom Theme

Beyond the built-in themes, Simple Table allows you to create completely custom themes using CSS variables. By defining your own theme with custom colors, spacing, and typography, you can perfectly match your application's design system.

CodeSandbox

Creating a Custom Theme

To create a custom theme for Simple Table, follow these steps:

  1. Create a CSS file with your theme variables using the .theme-custom class
  2. Import the CSS file into your application
  3. Apply the theme by passing theme="custom" to the SimpleTable component

Custom Theme Configuration

PropertyRequiredDescriptionExample
theme
enum
Optional
Set to "custom" to apply your custom CSS theme. Requires a corresponding CSS file with .theme-custom class and CSS variables.

Theme Variable Tips

  • Use the .theme-custom class to define your custom theme
  • Define CSS variables with the --st- prefix
  • Customize colors, spacing, fonts, and transitions
  • Use direct hex values or color variables for consistent styling
  • Test your theme with different features like column resizing and cell selection

CSS Variables Example

Here are the CSS variables used to create the custom theme in the demo above:

React TSX
1

New in v1.8.6: Sub-Column Styling

Version 1.8.6 introduces dedicated CSS variables for styling sub-columns (child columns within collapsible column groups). These variables give you fine-grained control over the appearance of nested column structures.

New Sub-Column CSS Variables

  • --st-sub-cell-hover-background-color - Background color when hovering over sub-cells
  • --st-dragging-sub-header-background-color - Background color when dragging sub-headers
  • --st-selected-sub-cell-background-color - Background color for selected sub-cells
  • --st-selected-sub-cell-color - Text color for selected sub-cells

These variables complement the existing sub-column variables:

  • --st-sub-header-background-color - Background color for sub-column headers
  • --st-sub-cell-background-color - Background color for sub-column cells

See the Collapsible Columns documentation for more details on using these variables.