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.

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
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.