Bolid Data Table

A fast, feature-rich data grid for React.

Sorting, filtering, editing, grouping, row selection, virtualized rendering and more — themeable and accessible out of the box. Ships ESM and CJS with full types. Requires React 19.

Installation

# using npm
npm install @bolid-ui/data-table

# using yarn
yarn add @bolid-ui/data-table

# using pnpm
pnpm add @bolid-ui/data-table

Usage

Register the modules you need once at startup, then render DataTableReact:

import { DataTableReact } from '@bolid-ui/data-table'
import { AllCommunityModule, ModuleRegistry } from '@bolid-ui/data-table/community'
import { dataTableTheme } from '@bolid-ui/data-table/theme'

ModuleRegistry.registerModules([AllCommunityModule])

const rowData = [
	{ make: 'Tesla', model: 'Model Y', price: 64950 },
	{ make: 'Ford', model: 'F-Series', price: 33850 },
	{ make: 'Toyota', model: 'Corolla', price: 29600 },
]

const columnDefs = [{ field: 'make' }, { field: 'model' }, { field: 'price' }]

export function App() {
	return (
		<div style={{ height: 400 }}>
			<DataTableReact
				theme={dataTableTheme}
				rowData={rowData}
				columnDefs={columnDefs}
			/>
		</div>
	)
}

Entry points

The package is split into subpath exports so you only pull in what you use:

| Import | Contents | | --- | --- | | @bolid-ui/data-table | DataTableReact and the React component types | | @bolid-ui/data-table/community | Core modules, ModuleRegistry, AllCommunityModule, grid APIs and types | | @bolid-ui/data-table/enterprise | Enterprise features (Excel export, set filter, side bar, …) | | @bolid-ui/data-table/theme | dataTableTheme — the default Bolid theme |

import { DataTableReact } from '@bolid-ui/data-table'
import { ModuleRegistry, AllCommunityModule } from '@bolid-ui/data-table/community'
import { exportMultipleSheetsAsExcel } from '@bolid-ui/data-table/enterprise'
import { dataTableTheme } from '@bolid-ui/data-table/theme'

Theming

dataTableTheme is a theme object, not a stylesheet — there is no CSS file to import. Pass it via the theme grid option and the grid injects its CSS variables at runtime. Customize it with .withParams(...):

import { dataTableTheme } from '@bolid-ui/data-table/theme'

const myTheme = dataTableTheme.withParams({
	accentColor: 'var(--accent-9)',
	borderRadius: 'var(--radius-3)',
})

License

Licensed under the MIT License.

See LICENSE for more information.