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';
COPY
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'
COPY
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>
COPY
Theme switching demo - defaults to minimalist theme in dark mode
Example configured with
minimalist
theme and dark
mode by default.View Mode
Fork ForkTheme 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>
COPY
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>
COPY
Example configured with
default
theme and light
mode by default.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.