Documentation

Themes

Simple Table includes several beautiful built-in themes to match your application's visual design. Choose from Modern Light, Modern Dark, Light, Dark, Sky, Violet, or Neutral themes. Learn more about customizing your React table or explore creating custom themes.

Light

CodeSandbox

Basic Theme Configuration

To apply a theme to Simple Table, simply pass the theme prop with one of the available theme options. The new modern-light and modern-dark themes feature a clean, minimal design that works great for modern applications:

Styling Flags

In addition to themes, Simple Table provides several boolean flags that control specific aspects of table appearance:

Theme Configuration Options

Property	Required	Description

`theme` Theme	Optional	Built-in theme option for styling the table. Choose from predefined themes to quickly customize your table's appearance. Options: light dark sky violet neutral modern-light modern-dark
`useHoverRowBackground` boolean	Optional	Enables a background color change when hovering over a row. This provides better visual feedback for users when interacting with the table.
`useOddEvenRowBackground` boolean	Optional	Applies alternating background colors to odd and even rows. This makes it easier to distinguish between adjacent rows, especially in tables with many columns.
`useOddColumnBackground` boolean	Optional	Applies alternating background colors to odd and even columns. This can help differentiate between adjacent columns in tables with many columns or narrow columns.
`columnBorders` boolean	Optional	Displays vertical borders between columns. This provides clear visual separation between columns, which is especially useful for spreadsheet-style tables or tables with many columns.

You can use these flags together with any theme to control the visual presentation of your table:

React TSX

Copy

1import { SimpleTable } from 'simple-table-core';
2import 'simple-table-core/styles.css';
3
4export default function MyTable() {
5  return (
6    <SimpleTable
7      defaultHeaders={headers}
8      rows={data}
9      theme="modern-dark"
10      useHoverRowBackground={true}
11      useOddEvenRowBackground={true}
12      useOddColumnBackground={false}
13      columnBorders={true}
14    />
15  );
16}

Tip

When creating custom themes, you can customize the colors used for these styling features using CSS variables like --st-hover-row-background-color and --st-odd-row-background-color. See the Custom Theme documentation for details.