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 file includes both the light and the dark themes.

At runtime, the light or dark theme are applied based on the user OS settings for the preferred color scheme.

To explicitly apply the light theme, apply the className "light" (or "infinite-light") to any parent element of the <InfiniteTable /> component.

To explicitly apply the dark theme, apply the className "dark" (or "infinite-dark") to any parent element of the <InfiniteTable /> component.

explicitly apply light theme via container className

<div className="light">
  <DataSource {...dataSouceProps}>
    <InfiniteTable {...props} />
  </DataSource>
</div>

If instead you specify a dark CSS className, the dark theme will be applied

explicitly apply dark theme via container className

<body className="dark">
  <div>
    <DataSource {...dataSouceProps}>
      <InfiniteTable {...props} />
    </DataSource>
  </div>
</body>

Theme switching demo - default to light theme

View Mode

Fork Fork

import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
import * as React from 'react';

import { columns, Employee } from './columns';

export default function App() {
  const [currentTheme, setTheme] = React.useState('light');
  return (
    <div
      className={currentTheme}
      style={{
        display: 'flex',
        flexFlow: 'column',
        flex: 1,
      }}
    >
      <DataSource<Employee> data={dataSource} primaryKey="id">
        <InfiniteTable<Employee> columns={columns} />
      </DataSource>

      <button
        style={{ marginTop: 'var(--infinite-space-4)' }}
        onClick={() => setTheme(currentTheme === 'dark' ? 'light' : 'dark')}
      >
        Switch Theme
      </button>
    </div>
  );
}

const dataSource = () => {
  return fetch('https://infinite-table.com/.netlify/functions/json-server' + '/employees100')
    .then((r) => r.json())
    .then((data: Employee[]) => {
      console.log(data)

Note

If you don’t explicitly have a light or dark ancestor, InfiniteTable will use the browser/OS preference (via @media (prefers-color-scheme: ...)) to apply the dark or light theme.

PreviousUsing Context Menus NextCSS Variables