Theming

CSS variables

There is no theme provider. The table, and the shadcn-svelte components inside it, read the standard shadcn theme variables. shadcn-svelte-tanstack-table/styles.css defines light and dark defaults:

Variable	Used for
--primary	Buttons, focus rings, selected rows, switches
--primary-foreground	Text on primary-colored surfaces
--secondary	Secondary accents
--card	The table background
--foreground	Text and dividers
--accent	Hovered and highlighted menu items
--border, --input	Borders of inputs and buttons

Define them on :root, or on any element to theme just the tables inside it:

:root {
  --primary: oklch(0.55 0.2 260);
  --card: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

.dark,
[data-theme='dark'] {
  --primary: oklch(0.75 0.12 250);
  --card: oklch(0.205 0 0);
  --foreground: oklch(0.985 0 0);
}

This site maps them to its own colors, so every table follows the light/dark switch. See src/styles/custom.css.

mrtTheme

For the colors the table adds on top of the theme, pass mrtTheme. Any key you leave out is derived from the CSS variables:

options={{
  columns,
  data,
  mrtTheme: {
    baseBackgroundColor: '#fffbe6',
    selectedRowBackgroundColor: '#ffe58f',
    pinnedRowBackgroundColor: '#e6f4ff',
    matchHighlightColor: 'rgba(255, 213, 79, 0.5)',
    menuBackgroundColor: '#fafafa',
    draggingBorderColor: '#1976d2',
  },
}}

Styling parts of the table

Every part accepts attributes through a …Props option, as an object or a function of its context. Use style and class:

options={{
  columns,
  data,
  tablePaperProps: { style: 'box-shadow: none; border: 1px solid #ccc' },
  tableHeadCellProps: { style: 'text-transform: uppercase' },
  tableBodyRowProps: ({ row }) => ({
    style: row.original.age > 50 ? 'outline: 2px solid tomato; outline-offset: -2px' : '',
  }),
}}

The available options are tablePaperProps, tableContainerProps, tableProps, tableHeadProps, tableHeadRowProps, tableHeadCellProps, tableBodyProps, tableBodyRowProps, tableBodyCellProps, tableFooterProps, tableFooterRowProps, tableFooterCellProps, topToolbarProps and bottomToolbarProps. The cell ones also exist on a column, where they apply to that column only.

Icons

Replace any icon with the icons option. An icon is a Svelte component that accepts class and style:

import MySearchIcon from './MySearchIcon.svelte';

options={{ columns, data, icons: { SearchIcon: MySearchIcon } }}

Localization

Pass any of the bundled locales, or your own strings, with localization. Anything you leave out falls back to English.

import { MRT_Localization_ES } from 'shadcn-svelte-tanstack-table/locales/es';

options={{ columns, data, localization: MRT_Localization_ES }}