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