Custom Theme

The customTheme prop allows you to configure layout dimensions that are critical for the table's virtualization engine. These values determine how the table calculates scroll positions, visible rows, and layout measurements.

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      customTheme={{
10        // Row and header dimensions
11        rowHeight: 48,
12        headerHeight: 56,
13        footerHeight: 60,
14        
15        // Border widths
16        rowSeparatorWidth: 1,
17        borderWidth: 2,
18        pinnedBorderWidth: 3,
19        
20        // Nested grid configuration
21        nestedGridBorderWidth: 2,
22        nestedGridPaddingTop: 12,
23        nestedGridPaddingBottom: 12,
24        nestedGridPaddingLeft: 20,
25        nestedGridPaddingRight: 20,
26        nestedGridMaxHeight: 400,
27        
28        // Column dimensions
29        selectionColumnWidth: 50,
30      }}
31    />
32  );
33}

For a complete reference of all customTheme properties, see the API Reference.

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.

To create a custom CSS 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

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

1

You can use both CSS theming and the customTheme prop together for complete control over your table's appearance:

1import { SimpleTable } from 'simple-table-core';
2import 'simple-table-core/styles.css';
3import './my-custom-theme.css'; // Your CSS variables
4
5export default function MyTable() {
6  return (
7    <SimpleTable
8      defaultHeaders={headers}
9      rows={data}
10      // CSS theming for colors and visual styling
11      theme="custom"
12      // Layout dimensions for virtualization
13      customTheme={{
14        rowHeight: 48,
15        headerHeight: 56,
16        nestedGridMaxHeight: 400,
17      }}
18    />
19  );
20}