Documentation

Custom Theme

Style colors with CSS variables; set layout sizes with customTheme. Use both together when you need full control.

CSS theme

Define CSS variables

Target .theme-custom with --st-* variables for colors, fonts, and visual styling.

CSS

Copy

.theme-custom {
  --st-header-background-color: #7c3aed;
  --st-header-label-color: #fff;
  --st-odd-row-background-color: #fffbeb;
  --st-even-row-background-color: #fef3c7;
  --st-hover-row-background-color: #fde68a;
  --st-selected-cell-background-color: #f5f3ff;
}

Import the stylesheet

Load your theme CSS in the app (or component) that renders the table.

React TSX

Copy

import "./my-table-theme.css";

Apply the theme

Pass theme="custom". Built-in themes are covered on Themes.

React TSX

Copy

<SimpleTable
  theme="custom"
  columns={columns}
  rows={rows}
/>

Layout dimensions

Use customTheme for heights and widths the virtualizer needs (row height, header height, nested-grid padding, etc.). These cannot be set via CSS alone.

React TSX

Copy

<SimpleTable
  customTheme={{ rowHeight: 32, headerHeight: 40 }}
  columns={columns}
  rows={rows}
/>

Example

A table using theme="custom". Code or StackBlitz has the full CSS.

React TSXCustomThemeDemo.tsx

Copy

1import {SimpleTable} from "@simple-table/react";import type { Theme } from "@simple-table/react";
2import { customThemeConfig } from "./custom-theme.demo-data";
3import "@simple-table/react/styles.css";
4import "./custom-theme.css";
5
6const CustomThemeDemo = ({
7  height = "400px",
8  theme
9}: {
10  height?: string | number;
11  theme?: Theme;
12}) => {
13  return (
14    <SimpleTable
15      columns={customThemeConfig.headers}
16      rows={customThemeConfig.rows}
17      theme={theme ?? "custom"}
18      customTheme={customThemeConfig.tableProps.customTheme}
19      columnResizing
20      selectableCells
21      height={height}
22      getRowId={({ row }) => row.id}
23    />
24  );
25};
26
27export default CustomThemeDemo;
28
29
30// custom-theme.css
31.theme-custom {
32  --st-border-radius: 8px;
33  --st-cell-padding: 12px;
34
35  --st-spacing-small: 6px;
36  --st-spacing-medium: 10px;
37
38  --st-scrollbar-bg-color: #f5f5f4;
39  --st-scrollbar-thumb-color: #8b5cf6;
40
41  --st-border-color: #e7e5e4;
42  --st-odd-row-background-color: #fffbeb;
43  --st-even-row-background-color: #fef3c7;
44  --st-odd-column-background-color: #fffbeb;
45  --st-even-column-background-color: var(--st-white);
46  --st-hover-row-background-color: #fde68a;
47  --st-selected-row-background-color: #f5f3ff;
48  --st-header-background-color: #7c3aed;
49  --st-header-label-color: var(--st-white);
50  --st-header-icon-color: var(--st-white);
51  --st-dragging-background-color: #f5f3ff;
52  --st-selected-cell-background-color: #f5f3ff;
53  --st-selected-first-cell-background-color: #ede9fe;
54  --st-footer-background-color: #f5f5f4;
55  --st-cell-color: #44403c;
56  --st-cell-odd-row-color: #44403c;
57  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
58    0 2px 4px -1px rgba(124, 58, 237, 0.06);
59  --st-selected-cell-color: #5b21b6;
60  --st-selected-first-cell-color: #5b21b6;
61  --st-resize-handle-color: #a78bfa;
62  --st-resize-handle-selected-color: var(--st-white);
63  --st-separator-border-color: #e7e5e4;
64  --st-last-group-row-separator-border-color: #d6d3d1;
65
66  --st-selected-border-color: #8b5cf6;
67  --st-editable-cell-focus-border-color: #8b5cf6;
68
69  --st-checkbox-checked-background-color: #8b5cf6;
70  --st-checkbox-checked-border-color: #7c3aed;
71  --st-column-editor-background-color: var(--st-white);
72  --st-column-editor-popout-background-color: var(--st-white);
73  --st-button-hover-background-color: #f5f3ff;
74  --st-button-active-background-color: #7c3aed;
75  --st-cell-flash-color: #ddd6fe;
76  --st-copy-flash-color: #8b5cf6;
77  --st-warning-flash-color: var(--st-red-300);
78
79  --st-header-selected-background-color: #6d28d9;
80  --st-header-selected-label-color: var(--st-white);
81  --st-header-selected-icon-color: var(--st-white);
82
83  --st-header-highlight-indicator-color: #d6d3d1;
84  --st-selection-highlight-indicator-color: #d6d3d1;
85
86  --st-next-prev-btn-color: #57534e;
87  --st-next-prev-btn-disabled-color: #a8a29e;
88
89  --st-page-btn-color: #57534e;
90  --st-page-btn-hover-background-color: #fef3c7;
91
92  --st-column-editor-text-color: #78716c;
93
94  --st-checkbox-border-color: #d6d3d1;
95
96  --st-dropdown-group-label-color: #78716c;
97
98  --st-datepicker-weekday-color: #78716c;
99  --st-datepicker-other-month-color: #a8a29e;
100
101  --st-filter-button-disabled-background-color: #d6d3d1;
102  --st-filter-button-disabled-text-color: #78716c;
103
104  --st-sub-header-background-color: #8b5cf6;
105  --st-sub-cell-background-color: #fef8dc;
106  --st-sub-cell-hover-background-color: #fef3c7;
107  --st-dragging-sub-header-background-color: #c4b5fd;
108  --st-selected-sub-cell-background-color: #ede9fe;
109  --st-selected-sub-cell-color: #4c1d95;
110
111  --st-chart-color: #8b5cf6;
112  --st-chart-fill-color: #c4b5fd;
113
114  --st-drag-separator-color: #8b5cf6;
115}
116
117.theme-custom .st-header-label {
118  font-weight: 600 !important;
119  letter-spacing: 0.025em !important;
120}
121

Angularcustom-theme-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { customThemeConfig } from "./custom-theme.demo-data";
4import "@simple-table/angular/styles.css";
5import "./custom-theme.css";
6import type { ThemeContact } from "./custom-theme.demo-data";
7
8@Component({
9  selector: "custom-theme-demo",
10  standalone: true,
11  imports: [SimpleTableComponent],
12  template: `
13    <simple-table
14      [getRowId]="getRowId"
15      [rows]="rows"
16      [columns]="headers"
17      [height]="height"
18      [theme]="resolvedTheme"
19      [customTheme]="customThemeOverrides"
20      [columnResizing]="true"
21      [selectableCells]="true"
22    ></simple-table>
23  `,
24})
25export class CustomThemeDemoComponent {
26  @Input() height: string | number = "400px";
27  @Input() theme?: Theme;
28
29  readonly rows: ThemeContact[] = customThemeConfig.rows;
30  readonly headers: AngularColumnDef<ThemeContact>[] = customThemeConfig.headers;
31  readonly customThemeOverrides = customThemeConfig.tableProps.customTheme;
32
33  get resolvedTheme(): Theme {
34    return this.theme ?? "custom";
35  }
36
37  getRowId = ({ row }: GetRowIdParams<ThemeContact>) => row.id;
38}
39
40
41// custom-theme.css
42.theme-custom {
43  --st-border-radius: 8px;
44  --st-cell-padding: 12px;
45
46  --st-spacing-small: 6px;
47  --st-spacing-medium: 10px;
48
49  --st-scrollbar-bg-color: #f5f5f4;
50  --st-scrollbar-thumb-color: #8b5cf6;
51
52  --st-border-color: #e7e5e4;
53  --st-odd-row-background-color: #fffbeb;
54  --st-even-row-background-color: #fef3c7;
55  --st-odd-column-background-color: #fffbeb;
56  --st-even-column-background-color: var(--st-white);
57  --st-hover-row-background-color: #fde68a;
58  --st-selected-row-background-color: #f5f3ff;
59  --st-header-background-color: #7c3aed;
60  --st-header-label-color: var(--st-white);
61  --st-header-icon-color: var(--st-white);
62  --st-dragging-background-color: #f5f3ff;
63  --st-selected-cell-background-color: #f5f3ff;
64  --st-selected-first-cell-background-color: #ede9fe;
65  --st-footer-background-color: #f5f5f4;
66  --st-cell-color: #44403c;
67  --st-cell-odd-row-color: #44403c;
68  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
69    0 2px 4px -1px rgba(124, 58, 237, 0.06);
70  --st-selected-cell-color: #5b21b6;
71  --st-selected-first-cell-color: #5b21b6;
72  --st-resize-handle-color: #a78bfa;
73  --st-resize-handle-selected-color: var(--st-white);
74  --st-separator-border-color: #e7e5e4;
75  --st-last-group-row-separator-border-color: #d6d3d1;
76
77  --st-selected-border-color: #8b5cf6;
78  --st-editable-cell-focus-border-color: #8b5cf6;
79
80  --st-checkbox-checked-background-color: #8b5cf6;
81  --st-checkbox-checked-border-color: #7c3aed;
82  --st-column-editor-background-color: var(--st-white);
83  --st-column-editor-popout-background-color: var(--st-white);
84  --st-button-hover-background-color: #f5f3ff;
85  --st-button-active-background-color: #7c3aed;
86  --st-cell-flash-color: #ddd6fe;
87  --st-copy-flash-color: #8b5cf6;
88  --st-warning-flash-color: var(--st-red-300);
89
90  --st-header-selected-background-color: #6d28d9;
91  --st-header-selected-label-color: var(--st-white);
92  --st-header-selected-icon-color: var(--st-white);
93
94  --st-header-highlight-indicator-color: #d6d3d1;
95  --st-selection-highlight-indicator-color: #d6d3d1;
96
97  --st-next-prev-btn-color: #57534e;
98  --st-next-prev-btn-disabled-color: #a8a29e;
99
100  --st-page-btn-color: #57534e;
101  --st-page-btn-hover-background-color: #fef3c7;
102
103  --st-column-editor-text-color: #78716c;
104
105  --st-checkbox-border-color: #d6d3d1;
106
107  --st-dropdown-group-label-color: #78716c;
108
109  --st-datepicker-weekday-color: #78716c;
110  --st-datepicker-other-month-color: #a8a29e;
111
112  --st-filter-button-disabled-background-color: #d6d3d1;
113  --st-filter-button-disabled-text-color: #78716c;
114
115  --st-sub-header-background-color: #8b5cf6;
116  --st-sub-cell-background-color: #fef8dc;
117  --st-sub-cell-hover-background-color: #fef3c7;
118  --st-dragging-sub-header-background-color: #c4b5fd;
119  --st-selected-sub-cell-background-color: #ede9fe;
120  --st-selected-sub-cell-color: #4c1d95;
121
122  --st-chart-color: #8b5cf6;
123  --st-chart-fill-color: #c4b5fd;
124
125  --st-drag-separator-color: #8b5cf6;
126}
127
128.theme-custom .st-header-label {
129  font-weight: 600 !important;
130  letter-spacing: 0.025em !important;
131}
132
133
134// custom-theme.demo-data.ts
135// Self-contained demo table setup for this example.
136import type { AngularColumnDef, ValueFormatterProps } from "@simple-table/angular";
137
138export interface ThemeContact {
139  id: number;
140  name: string;
141  phone: string;
142  email: string;
143  city: string;
144  status: string;
145}
146
147export const customThemeData: ThemeContact[] = [
148  { id: 1, name: "Alice Johnson", phone: "2125551234", email: "alice@corp.com", city: "New York", status: "active" },
149  { id: 2, name: "Bob Martinez", phone: "3105559876", email: "bob@corp.com", city: "Los Angeles", status: "active" },
150  { id: 3, name: "Clara Chen", phone: "4155553210", email: "clara@corp.com", city: "San Francisco", status: "inactive" },
151  { id: 4, name: "David Kim", phone: "3125557654", email: "david@corp.com", city: "Chicago", status: "active" },
152  { id: 5, name: "Elena Rossi", phone: "6175554321", email: "elena@corp.com", city: "Boston", status: "active" },
153  { id: 6, name: "Frank Müller", phone: "2065558765", email: "frank@corp.com", city: "Seattle", status: "inactive" },
154  { id: 7, name: "Grace Park", phone: "5125552468", email: "grace@corp.com", city: "Austin", status: "active" },
155  { id: 8, name: "Henry Patel", phone: "3035551357", email: "henry@corp.com", city: "Denver", status: "active" },
156];
157
158function formatPhone(raw: string): string {
159  if (raw.length === 10) {
160    return `(${raw.slice(0, 3)}) ${raw.slice(3, 6)}-${raw.slice(6)}`;
161  }
162  return raw;
163}
164
165export const customThemeHeaders: AngularColumnDef<ThemeContact, any>[] = [
166  { accessor: "id", label: "ID", width: 60, type: "number" },
167  { accessor: "name", label: "Name", width: 170, type: "string", sortable: true },
168  {
169    accessor: "phone",
170    label: "Phone",
171    width: 150,
172    type: "string",
173    valueFormatter: ({ value }: ValueFormatterProps<ThemeContact, string>) => formatPhone(value),
174  },
175  { accessor: "email", label: "Email", width: 180, type: "string" },
176  { accessor: "city", label: "City", width: 140, type: "string", sortable: true },
177  { accessor: "status", label: "Status", width: 100, type: "string" },
178];
179
180export const customThemeConfig = {
181  headers: customThemeHeaders,
182  rows: customThemeData,
183  tableProps: {
184    customTheme: {
185      rowHeight: 40,
186      headerHeight: 44,
187    },
188  },
189};
190

Vue SFCCustomThemeDemo.vue

Copy

1<script setup lang="ts">
2import { SimpleTable } from "@simple-table/vue";
3import type { Theme, GetRowIdParams } from "@simple-table/vue";
4import { customThemeConfig } from "./custom-theme.demo-data";
5import type { ThemeContact } from "./custom-theme.demo-data";
6import "@simple-table/vue/styles.css";
7import "./custom-theme.css";
8
9const getRowId = ({ row }: GetRowIdParams<ThemeContact>) => row.id;
10
11const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
12  height: "400px",
13});
14</script>
15
16<template>
17  <SimpleTable
18    :columns="customThemeConfig.headers"
19    :rows="customThemeConfig.rows"
20    :get-row-id="getRowId"
21    :theme="props.theme ?? 'custom'"
22    :custom-theme="customThemeConfig.tableProps.customTheme"
23    :column-resizing="true"
24    :selectable-cells="true"
25    :height="props.height"
26  />
27</template>
28
29
30// custom-theme.css
31.theme-custom {
32  --st-border-radius: 8px;
33  --st-cell-padding: 12px;
34
35  --st-spacing-small: 6px;
36  --st-spacing-medium: 10px;
37
38  --st-scrollbar-bg-color: #f5f5f4;
39  --st-scrollbar-thumb-color: #8b5cf6;
40
41  --st-border-color: #e7e5e4;
42  --st-odd-row-background-color: #fffbeb;
43  --st-even-row-background-color: #fef3c7;
44  --st-odd-column-background-color: #fffbeb;
45  --st-even-column-background-color: var(--st-white);
46  --st-hover-row-background-color: #fde68a;
47  --st-selected-row-background-color: #f5f3ff;
48  --st-header-background-color: #7c3aed;
49  --st-header-label-color: var(--st-white);
50  --st-header-icon-color: var(--st-white);
51  --st-dragging-background-color: #f5f3ff;
52  --st-selected-cell-background-color: #f5f3ff;
53  --st-selected-first-cell-background-color: #ede9fe;
54  --st-footer-background-color: #f5f5f4;
55  --st-cell-color: #44403c;
56  --st-cell-odd-row-color: #44403c;
57  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
58    0 2px 4px -1px rgba(124, 58, 237, 0.06);
59  --st-selected-cell-color: #5b21b6;
60  --st-selected-first-cell-color: #5b21b6;
61  --st-resize-handle-color: #a78bfa;
62  --st-resize-handle-selected-color: var(--st-white);
63  --st-separator-border-color: #e7e5e4;
64  --st-last-group-row-separator-border-color: #d6d3d1;
65
66  --st-selected-border-color: #8b5cf6;
67  --st-editable-cell-focus-border-color: #8b5cf6;
68
69  --st-checkbox-checked-background-color: #8b5cf6;
70  --st-checkbox-checked-border-color: #7c3aed;
71  --st-column-editor-background-color: var(--st-white);
72  --st-column-editor-popout-background-color: var(--st-white);
73  --st-button-hover-background-color: #f5f3ff;
74  --st-button-active-background-color: #7c3aed;
75  --st-cell-flash-color: #ddd6fe;
76  --st-copy-flash-color: #8b5cf6;
77  --st-warning-flash-color: var(--st-red-300);
78
79  --st-header-selected-background-color: #6d28d9;
80  --st-header-selected-label-color: var(--st-white);
81  --st-header-selected-icon-color: var(--st-white);
82
83  --st-header-highlight-indicator-color: #d6d3d1;
84  --st-selection-highlight-indicator-color: #d6d3d1;
85
86  --st-next-prev-btn-color: #57534e;
87  --st-next-prev-btn-disabled-color: #a8a29e;
88
89  --st-page-btn-color: #57534e;
90  --st-page-btn-hover-background-color: #fef3c7;
91
92  --st-column-editor-text-color: #78716c;
93
94  --st-checkbox-border-color: #d6d3d1;
95
96  --st-dropdown-group-label-color: #78716c;
97
98  --st-datepicker-weekday-color: #78716c;
99  --st-datepicker-other-month-color: #a8a29e;
100
101  --st-filter-button-disabled-background-color: #d6d3d1;
102  --st-filter-button-disabled-text-color: #78716c;
103
104  --st-sub-header-background-color: #8b5cf6;
105  --st-sub-cell-background-color: #fef8dc;
106  --st-sub-cell-hover-background-color: #fef3c7;
107  --st-dragging-sub-header-background-color: #c4b5fd;
108  --st-selected-sub-cell-background-color: #ede9fe;
109  --st-selected-sub-cell-color: #4c1d95;
110
111  --st-chart-color: #8b5cf6;
112  --st-chart-fill-color: #c4b5fd;
113
114  --st-drag-separator-color: #8b5cf6;
115}
116
117.theme-custom .st-header-label {
118  font-weight: 600 !important;
119  letter-spacing: 0.025em !important;
120}
121

SvelteCustomThemeDemo.svelte

Copy

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, GetRowIdParams } from "@simple-table/svelte";
4  import { customThemeConfig } from "./custom-theme.demo-data";
5  import type { ThemeContact } from "./custom-theme.demo-data";
6  import "@simple-table/svelte/styles.css";
7  import "./custom-theme.css";
8
9  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
10
11  const getRowId = ({ row }: GetRowIdParams<ThemeContact>) => row.id;
12</script>
13
14<SimpleTable
15  columns={customThemeConfig.headers}
16  rows={customThemeConfig.rows}
17  getRowId={getRowId}
18  theme={theme ?? "custom"}
19  customTheme={customThemeConfig.tableProps.customTheme}
20  columnResizing={true}
21  selectableCells={true}
22  {height}
23/>
24
25
26// custom-theme.css
27.theme-custom {
28  --st-border-radius: 8px;
29  --st-cell-padding: 12px;
30
31  --st-spacing-small: 6px;
32  --st-spacing-medium: 10px;
33
34  --st-scrollbar-bg-color: #f5f5f4;
35  --st-scrollbar-thumb-color: #8b5cf6;
36
37  --st-border-color: #e7e5e4;
38  --st-odd-row-background-color: #fffbeb;
39  --st-even-row-background-color: #fef3c7;
40  --st-odd-column-background-color: #fffbeb;
41  --st-even-column-background-color: var(--st-white);
42  --st-hover-row-background-color: #fde68a;
43  --st-selected-row-background-color: #f5f3ff;
44  --st-header-background-color: #7c3aed;
45  --st-header-label-color: var(--st-white);
46  --st-header-icon-color: var(--st-white);
47  --st-dragging-background-color: #f5f3ff;
48  --st-selected-cell-background-color: #f5f3ff;
49  --st-selected-first-cell-background-color: #ede9fe;
50  --st-footer-background-color: #f5f5f4;
51  --st-cell-color: #44403c;
52  --st-cell-odd-row-color: #44403c;
53  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
54    0 2px 4px -1px rgba(124, 58, 237, 0.06);
55  --st-selected-cell-color: #5b21b6;
56  --st-selected-first-cell-color: #5b21b6;
57  --st-resize-handle-color: #a78bfa;
58  --st-resize-handle-selected-color: var(--st-white);
59  --st-separator-border-color: #e7e5e4;
60  --st-last-group-row-separator-border-color: #d6d3d1;
61
62  --st-selected-border-color: #8b5cf6;
63  --st-editable-cell-focus-border-color: #8b5cf6;
64
65  --st-checkbox-checked-background-color: #8b5cf6;
66  --st-checkbox-checked-border-color: #7c3aed;
67  --st-column-editor-background-color: var(--st-white);
68  --st-column-editor-popout-background-color: var(--st-white);
69  --st-button-hover-background-color: #f5f3ff;
70  --st-button-active-background-color: #7c3aed;
71  --st-cell-flash-color: #ddd6fe;
72  --st-copy-flash-color: #8b5cf6;
73  --st-warning-flash-color: var(--st-red-300);
74
75  --st-header-selected-background-color: #6d28d9;
76  --st-header-selected-label-color: var(--st-white);
77  --st-header-selected-icon-color: var(--st-white);
78
79  --st-header-highlight-indicator-color: #d6d3d1;
80  --st-selection-highlight-indicator-color: #d6d3d1;
81
82  --st-next-prev-btn-color: #57534e;
83  --st-next-prev-btn-disabled-color: #a8a29e;
84
85  --st-page-btn-color: #57534e;
86  --st-page-btn-hover-background-color: #fef3c7;
87
88  --st-column-editor-text-color: #78716c;
89
90  --st-checkbox-border-color: #d6d3d1;
91
92  --st-dropdown-group-label-color: #78716c;
93
94  --st-datepicker-weekday-color: #78716c;
95  --st-datepicker-other-month-color: #a8a29e;
96
97  --st-filter-button-disabled-background-color: #d6d3d1;
98  --st-filter-button-disabled-text-color: #78716c;
99
100  --st-sub-header-background-color: #8b5cf6;
101  --st-sub-cell-background-color: #fef8dc;
102  --st-sub-cell-hover-background-color: #fef3c7;
103  --st-dragging-sub-header-background-color: #c4b5fd;
104  --st-selected-sub-cell-background-color: #ede9fe;
105  --st-selected-sub-cell-color: #4c1d95;
106
107  --st-chart-color: #8b5cf6;
108  --st-chart-fill-color: #c4b5fd;
109
110  --st-drag-separator-color: #8b5cf6;
111}
112
113.theme-custom .st-header-label {
114  font-weight: 600 !important;
115  letter-spacing: 0.025em !important;
116}
117

Solid TSXCustomThemeDemo.tsx

Copy

1import {SimpleTable} from "@simple-table/solid";import type { Theme } from "@simple-table/solid";
2import { customThemeConfig } from "./custom-theme.demo-data";
3import "@simple-table/solid/styles.css";
4import "./custom-theme.css";
5
6export default function CustomThemeDemo(props: { height?: string | number; theme?: Theme }) {
7  return (
8    <SimpleTable
9      columns={customThemeConfig.headers}
10      getRowId={({ row }) => row.id}
11      rows={customThemeConfig.rows}
12      height={props.height ?? "400px"}
13      theme={props.theme ?? "custom"}
14      customTheme={customThemeConfig.tableProps.customTheme}
15      columnResizing
16      selectableCells
17    />
18  );
19}
20
21
22// custom-theme.css
23.theme-custom {
24  --st-border-radius: 8px;
25  --st-cell-padding: 12px;
26
27  --st-spacing-small: 6px;
28  --st-spacing-medium: 10px;
29
30  --st-scrollbar-bg-color: #f5f5f4;
31  --st-scrollbar-thumb-color: #8b5cf6;
32
33  --st-border-color: #e7e5e4;
34  --st-odd-row-background-color: #fffbeb;
35  --st-even-row-background-color: #fef3c7;
36  --st-odd-column-background-color: #fffbeb;
37  --st-even-column-background-color: var(--st-white);
38  --st-hover-row-background-color: #fde68a;
39  --st-selected-row-background-color: #f5f3ff;
40  --st-header-background-color: #7c3aed;
41  --st-header-label-color: var(--st-white);
42  --st-header-icon-color: var(--st-white);
43  --st-dragging-background-color: #f5f3ff;
44  --st-selected-cell-background-color: #f5f3ff;
45  --st-selected-first-cell-background-color: #ede9fe;
46  --st-footer-background-color: #f5f5f4;
47  --st-cell-color: #44403c;
48  --st-cell-odd-row-color: #44403c;
49  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
50    0 2px 4px -1px rgba(124, 58, 237, 0.06);
51  --st-selected-cell-color: #5b21b6;
52  --st-selected-first-cell-color: #5b21b6;
53  --st-resize-handle-color: #a78bfa;
54  --st-resize-handle-selected-color: var(--st-white);
55  --st-separator-border-color: #e7e5e4;
56  --st-last-group-row-separator-border-color: #d6d3d1;
57
58  --st-selected-border-color: #8b5cf6;
59  --st-editable-cell-focus-border-color: #8b5cf6;
60
61  --st-checkbox-checked-background-color: #8b5cf6;
62  --st-checkbox-checked-border-color: #7c3aed;
63  --st-column-editor-background-color: var(--st-white);
64  --st-column-editor-popout-background-color: var(--st-white);
65  --st-button-hover-background-color: #f5f3ff;
66  --st-button-active-background-color: #7c3aed;
67  --st-cell-flash-color: #ddd6fe;
68  --st-copy-flash-color: #8b5cf6;
69  --st-warning-flash-color: var(--st-red-300);
70
71  --st-header-selected-background-color: #6d28d9;
72  --st-header-selected-label-color: var(--st-white);
73  --st-header-selected-icon-color: var(--st-white);
74
75  --st-header-highlight-indicator-color: #d6d3d1;
76  --st-selection-highlight-indicator-color: #d6d3d1;
77
78  --st-next-prev-btn-color: #57534e;
79  --st-next-prev-btn-disabled-color: #a8a29e;
80
81  --st-page-btn-color: #57534e;
82  --st-page-btn-hover-background-color: #fef3c7;
83
84  --st-column-editor-text-color: #78716c;
85
86  --st-checkbox-border-color: #d6d3d1;
87
88  --st-dropdown-group-label-color: #78716c;
89
90  --st-datepicker-weekday-color: #78716c;
91  --st-datepicker-other-month-color: #a8a29e;
92
93  --st-filter-button-disabled-background-color: #d6d3d1;
94  --st-filter-button-disabled-text-color: #78716c;
95
96  --st-sub-header-background-color: #8b5cf6;
97  --st-sub-cell-background-color: #fef8dc;
98  --st-sub-cell-hover-background-color: #fef3c7;
99  --st-dragging-sub-header-background-color: #c4b5fd;
100  --st-selected-sub-cell-background-color: #ede9fe;
101  --st-selected-sub-cell-color: #4c1d95;
102
103  --st-chart-color: #8b5cf6;
104  --st-chart-fill-color: #c4b5fd;
105
106  --st-drag-separator-color: #8b5cf6;
107}
108
109.theme-custom .st-header-label {
110  font-weight: 600 !important;
111  letter-spacing: 0.025em !important;
112}
113

TypeScriptCustomThemeDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { ThemeContact } from "./custom-theme.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { customThemeConfig } from "./custom-theme.demo-data";
5import "simple-table-core/styles.css";
6import "./custom-theme.css";
7
8
9const getRowId = ({ row }: GetRowIdParams<ThemeContact>) => row.id;
10export function renderCustomThemeDemo(
11  container: HTMLElement,
12  options?: { height?: string | number; theme?: Theme }
13): SimpleTableVanilla<ThemeContact> {
14  const table = new SimpleTableVanilla(container, {
15    getRowId,
16    columns: [...customThemeConfig.headers],
17    rows: customThemeConfig.rows,
18    height: options?.height ?? "400px",
19    theme: options?.theme ?? "custom",
20    customTheme: customThemeConfig.tableProps.customTheme,
21    columnResizing: true,
22    selectableCells: true,
23  });
24  return table;
25}
26
27
28// custom-theme.css
29.theme-custom {
30  --st-border-radius: 8px;
31  --st-cell-padding: 12px;
32
33  --st-spacing-small: 6px;
34  --st-spacing-medium: 10px;
35
36  --st-scrollbar-bg-color: #f5f5f4;
37  --st-scrollbar-thumb-color: #8b5cf6;
38
39  --st-border-color: #e7e5e4;
40  --st-odd-row-background-color: #fffbeb;
41  --st-even-row-background-color: #fef3c7;
42  --st-odd-column-background-color: #fffbeb;
43  --st-even-column-background-color: var(--st-white);
44  --st-hover-row-background-color: #fde68a;
45  --st-selected-row-background-color: #f5f3ff;
46  --st-header-background-color: #7c3aed;
47  --st-header-label-color: var(--st-white);
48  --st-header-icon-color: var(--st-white);
49  --st-dragging-background-color: #f5f3ff;
50  --st-selected-cell-background-color: #f5f3ff;
51  --st-selected-first-cell-background-color: #ede9fe;
52  --st-footer-background-color: #f5f5f4;
53  --st-cell-color: #44403c;
54  --st-cell-odd-row-color: #44403c;
55  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
56    0 2px 4px -1px rgba(124, 58, 237, 0.06);
57  --st-selected-cell-color: #5b21b6;
58  --st-selected-first-cell-color: #5b21b6;
59  --st-resize-handle-color: #a78bfa;
60  --st-resize-handle-selected-color: var(--st-white);
61  --st-separator-border-color: #e7e5e4;
62  --st-last-group-row-separator-border-color: #d6d3d1;
63
64  --st-selected-border-color: #8b5cf6;
65  --st-editable-cell-focus-border-color: #8b5cf6;
66
67  --st-checkbox-checked-background-color: #8b5cf6;
68  --st-checkbox-checked-border-color: #7c3aed;
69  --st-column-editor-background-color: var(--st-white);
70  --st-column-editor-popout-background-color: var(--st-white);
71  --st-button-hover-background-color: #f5f3ff;
72  --st-button-active-background-color: #7c3aed;
73  --st-cell-flash-color: #ddd6fe;
74  --st-copy-flash-color: #8b5cf6;
75  --st-warning-flash-color: var(--st-red-300);
76
77  --st-header-selected-background-color: #6d28d9;
78  --st-header-selected-label-color: var(--st-white);
79  --st-header-selected-icon-color: var(--st-white);
80
81  --st-header-highlight-indicator-color: #d6d3d1;
82  --st-selection-highlight-indicator-color: #d6d3d1;
83
84  --st-next-prev-btn-color: #57534e;
85  --st-next-prev-btn-disabled-color: #a8a29e;
86
87  --st-page-btn-color: #57534e;
88  --st-page-btn-hover-background-color: #fef3c7;
89
90  --st-column-editor-text-color: #78716c;
91
92  --st-checkbox-border-color: #d6d3d1;
93
94  --st-dropdown-group-label-color: #78716c;
95
96  --st-datepicker-weekday-color: #78716c;
97  --st-datepicker-other-month-color: #a8a29e;
98
99  --st-filter-button-disabled-background-color: #d6d3d1;
100  --st-filter-button-disabled-text-color: #78716c;
101
102  --st-sub-header-background-color: #8b5cf6;
103  --st-sub-cell-background-color: #fef8dc;
104  --st-sub-cell-hover-background-color: #fef3c7;
105  --st-dragging-sub-header-background-color: #c4b5fd;
106  --st-selected-sub-cell-background-color: #ede9fe;
107  --st-selected-sub-cell-color: #4c1d95;
108
109  --st-chart-color: #8b5cf6;
110  --st-chart-fill-color: #c4b5fd;
111
112  --st-drag-separator-color: #8b5cf6;
113}
114
115.theme-custom .st-header-label {
116  font-weight: 600 !important;
117  letter-spacing: 0.025em !important;
118}
119
120
121// custom-theme.demo-data.ts
122// Self-contained demo table setup for this example.
123import type { ColumnDef } from "simple-table-core";
124
125export interface ThemeContact {
126  id: number;
127  name: string;
128  phone: string;
129  email: string;
130  city: string;
131  status: string;
132}
133
134export const customThemeData: ThemeContact[] = [
135  { id: 1, name: "Alice Johnson", phone: "2125551234", email: "alice@corp.com", city: "New York", status: "active" },
136  { id: 2, name: "Bob Martinez", phone: "3105559876", email: "bob@corp.com", city: "Los Angeles", status: "active" },
137  { id: 3, name: "Clara Chen", phone: "4155553210", email: "clara@corp.com", city: "San Francisco", status: "inactive" },
138  { id: 4, name: "David Kim", phone: "3125557654", email: "david@corp.com", city: "Chicago", status: "active" },
139  { id: 5, name: "Elena Rossi", phone: "6175554321", email: "elena@corp.com", city: "Boston", status: "active" },
140  { id: 6, name: "Frank Müller", phone: "2065558765", email: "frank@corp.com", city: "Seattle", status: "inactive" },
141  { id: 7, name: "Grace Park", phone: "5125552468", email: "grace@corp.com", city: "Austin", status: "active" },
142  { id: 8, name: "Henry Patel", phone: "3035551357", email: "henry@corp.com", city: "Denver", status: "active" },
143];
144
145function formatPhone(raw: string): string {
146  if (raw.length === 10) {
147    return `(${raw.slice(0, 3)}) ${raw.slice(3, 6)}-${raw.slice(6)}`;
148  }
149  return raw;
150}
151
152export const customThemeHeaders: ColumnDef<ThemeContact>[] = [
153  { accessor: "id", label: "ID", width: 60, type: "number" },
154  { accessor: "name", label: "Name", width: 170, type: "string", sortable: true },
155  {
156    accessor: "phone",
157    label: "Phone",
158    width: 150,
159    type: "string",
160    valueFormatter: ({ value }) => formatPhone(String(value)),
161  },
162  { accessor: "email", label: "Email", width: 180, type: "string" },
163  { accessor: "city", label: "City", width: 140, type: "string", sortable: true },
164  { accessor: "status", label: "Status", width: 100, type: "string" },
165];
166
167export const customThemeConfig = {
168  headers: customThemeHeaders,
169  rows: customThemeData,
170  tableProps: {
171    customTheme: {
172      rowHeight: 40,
173      headerHeight: 44,
174    },
175  },
176};
177

StackBlitz

Props

CSS theme

Property	Required	Description	Example
Property	Required	Description	Example
`theme` "custom"	Optional	Set to "custom" to use your .theme-custom CSS variables.

customTheme

Property	Required	Description	Example
Property	Required	Description	Example
`rowHeight` number	Optional	Height of table rows in pixels. This value is used for virtualization calculations and cannot be styled through CSS. If not specified, uses the default value of 40px.
`headerHeight` number	Optional	Height of the table header in pixels. This value is used for virtualization calculations and cannot be styled through CSS. If not specified, uses the default value of 40px.
`footerHeight` number	Optional	Height of the table footer in pixels. This value is used for virtualization calculations and cannot be styled through CSS. If not specified, uses the default value of 50px.
`rowSeparatorWidth` number	Optional	Width of separators between rows in pixels. This value affects virtualization calculations and cannot be styled through CSS. If not specified, uses the default value of 1px.
`borderWidth` number	Optional	General border width in pixels (e.g., table borders, header borders). This value affects layout calculations and cannot be styled through CSS. If not specified, uses the default value of 1px.
`pinnedBorderWidth` number	Optional	Width of borders for pinned columns in pixels. This value affects layout calculations for pinned columns and cannot be styled through CSS. If not specified, uses the default value of 2px.
`nestedGridBorderWidth` number	Optional	Border width for nested grid tables (top + bottom) in pixels. This value affects nested table layout calculations and cannot be styled through CSS. If not specified, uses the default value of 2px.
`nestedGridPaddingTop` number	Optional	Top padding for nested grids in pixels. This value affects nested table layout calculations and cannot be styled through CSS. If not specified, uses the default value of 8px.
`nestedGridPaddingBottom` number	Optional	Bottom padding for nested grids in pixels. This value affects nested table layout calculations and cannot be styled through CSS. If not specified, uses the default value of 8px.
`nestedGridPaddingLeft` number	Optional	Left padding for nested grids in pixels. This value affects nested table layout calculations and cannot be styled through CSS. If not specified, uses the default value of 16px.
`nestedGridPaddingRight` number	Optional	Right padding for nested grids in pixels. This value affects nested table layout calculations and cannot be styled through CSS. If not specified, uses the default value of 16px.
`nestedGridMaxHeight` number	Optional	Maximum height for nested grids in pixels. This value controls how tall nested tables can grow before scrolling. If not specified, nested grids will grow to fit their content.
`selectionColumnWidth` number	Optional	Width of the row selection checkbox column in pixels. This value affects layout calculations and cannot be styled through CSS. If not specified, uses the default value of 40px.