Theming

<InfiniteTable /> ships with a CSS file that you need to import in your codebase to make the component look as intended.
import '@infinite-table/infinite-react/index.css';
This root CSS file includes the "default" theme.
The other available themes are
  • shadcn
  • minimalist
  • ocean
  • balsam
and if you want to use any of them, you have to import their respective CSS file explicitly:
import '@infinite-table/infinite-react/theme/shadcn.css'
import '@infinite-table/infinite-react/theme/balsam.css'
import '@infinite-table/infinite-react/theme/minimalist.css'
import '@infinite-table/infinite-react/theme/ocean.css'
Each theme CSS file includes both the light and the dark modes.
Version 6.2.0 is the first version where the root CSS file (@infinite-table/infinite-react/index.css) doesn't include all the themes. Previous to this version, simply importing the root CSS file gave you access to all available themes.
Splitting each theme into a dedicated CSS file helps reduce the bundle size for our users, as most people will only use one theme for <InfiniteTable /> in their apps.

Applying a theme#

The following themes are currently available:
  • default - applied by default, no special configuration needed. It's included in the root CSS you need to import from @infinite-table/infinite-react/index.css
  • balsam
  • minimalist
  • ocean
  • shadcn - for this theme to correctly show up, make sure the shadcn CSS vars are available on page - see shadcn theming for details
To apply a theme (except the default one), you have to set the className "infinite-theme-name--THEME_NAME" to any parent element of the <InfiniteTable /> component (or even on the component itself).
You will want to apply the theme name and theme mode classNames to the same element, so you'll end up with a className like "infinite-theme-name--minimalist infinite-theme-mode--dark".
Applying the minimalist theme with dark mode explicitly
<body className="infinite-theme-mode--dark infinite-theme-name--minimalist">
  <DataSource {...dataSouceProps}>
    <InfiniteTable {...props} />
  </DataSource>
</body>
Theme switching demo - defaults to minimalist theme in dark mode
Example configured with minimalist theme and dark mode by default.
View Mode
Fork

Theme mode - light or dark#

At runtime, the light or dark mode is applied based on the user OS settings for the preferred color scheme.
To explicitly apply the light mode, apply the className "infinite-theme-mode--light" to any parent element of the <InfiniteTable /> component.
To explicitly apply the dark mode, apply the className "infinite-theme-mode--dark" to any parent element of the <InfiniteTable /> component.
Explicitly applying light mode via container className
<div className="infinite-theme-mode--light">
  <DataSource {...dataSouceProps}>
    <InfiniteTable {...props} />
  </DataSource>
</div>
If instead you specify a infinite-theme-mode--dark CSS className, the dark mode will be applied
Explicitly applying dark theme via container className
<body className="infinite-theme-mode--dark">
  <div>
    <DataSource {...dataSouceProps}>
      <InfiniteTable {...props} />
    </DataSource>
  </div>
</body>
Example configured with default theme and light mode by default.
Theme switching demo - defaults to light theme
View Mode
Fork
If you don't explicitly have a infinite-theme-mode--light or infinite-theme-mode--dark ancestor, InfiniteTable will use the browser/OS preference (via @media (prefers-color-scheme: ...)) to apply the dark or light theme.

Available themes#

Default theme#

The default theme is applied when you don't specify any explicit theme by default.

Minimalist theme#

The minimalist theme is inspired from minimalistic designs and is a good choice if you want to keep the UI simple and clean.