Theming

Infinite Table 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"

The above CSS file includes both the light and the dark theme. By default, the light theme is applied - or, if you include the component in a container with the light CSS className.

Explicitly apply light theme via container class name

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

Gotcha

The light or dark CSS classes don’t need to be specified on the direct parent - they can (and usually are) be applied on the document element (<html />) or the <body /> element.

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

Explicitly apply dark theme via container class name

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

Fork Fork

import * as React from 'react';
import {
  InfiniteTable,
  DataSource,
} from '@infinite-table/infinite-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);
      return 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: dark)) to apply the dark or light theme.

PreviousCustomizing Pivot Columns NextCSS Variables