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.

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

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
Previous: Custom Icons