I've been working on react-tree-grid — an open-source, zero-dependency
component library for React 18+ that provides three components: Grid, Tree,
and TreeGrid.
## Why I built it
Most React data grid libraries either come with a heavy dependency footprint,
are locked behind a commercial license, or don't support hierarchical data
out of the box. I wanted something that was fully open-source, lightweight,
and covered all three use cases — flat grids, tree lists, and tree grids —
in a single package.
## What it does
Grid — a flat tabular data grid with:
- Virtual scrolling (100,000+ rows)
- Inline editing (input, select, checkbox, combo, date picker)
- Sorting and header filters (input, select, combo)
- Drag-and-drop row and column reorder
- Frozen columns (left and right)
- Rowspan and colspan
- Footer aggregates (sum, avg, count, min, max)
- Light/dark theming via CSS custom properties
Tree — a file-explorer style hierarchy with:
- Expand/collapse
- Checkboxes
- Drag-and-drop reorder
- Inline label editing
TreeGrid — hierarchical rows inside a data grid:
- Parent/child rows with expand toggle
- All Grid features apply
- Grouping via
groupByprop
## Installation
bash
npm install @itsmemyk/react-tree-grid
Quick example
import { TreeGrid } from '@itsmemyk/react-tree-grid/treegrid'
import { ThemeProvider } from '@itsmemyk/react-tree-grid'
import type { GridColumn } from '@itsmemyk/react-tree-grid/grid'
import type { TreeGridRow } from '@itsmemyk/react-tree-grid/treegrid'
interface OrgRow extends TreeGridRow {
name: string
role: string
}
const columns: GridColumn<OrgRow>[] = [
{ id: 'name', header: [{ text: 'Name' }], width: 200 },
{ id: 'role', header: [{ text: 'Role' }], width: 160 },
]
const data: OrgRow[] = [
{ id: 'ceo', name: 'Alice', role: 'CEO', $opened: true },
{ id: 'cto', name: 'Bob', role: 'CTO', parent: 'ceo' },
{ id: 'fe', name: 'Carol', role: 'Frontend Lead', parent: 'cto' },
]
export function App() {
return (
<ThemeProvider theme="light">
<TreeGrid
columns={columns}
data={data}
treeColumnId="name"
style={{ width: 400, height: 240 }}
/>
</ThemeProvider>
)
}
Theming
Wrap your app with ThemeProvider and override any design token:
<ThemeProvider
theme="light"
overrides={{ colorPrimary: '#e91e63', fontFamily: 'Inter, sans-serif' }}
>
{/* components */}
</ThemeProvider>
All tokens are exposed as CSS custom properties (--react-tree-grid-*) so
you can use them in your own styles too.
TypeScript
Types are fully bundled — no @types/ package needed. Sub-path imports
allow tree-shaking individual components:
import { Grid } from '@itsmemyk/react-tree-grid/grid'
import { Tree } from '@itsmemyk/react-tree-grid/tree'
import { TreeGrid } from '@itsmemyk/react-tree-grid/treegrid'
Links
- 📦 npm: npmjs.com/package/@itsmemyk/react-tree-grid
- 📖 Docs: itsmemyk.github.io/react-tree-grid/docs
- 💻 GitHub: github.com/itsmemyk/react-tree-grid
- 🎮 Live demo: itsmemyk.github.io/react-tree-grid
Would love feedback — happy to answer questions in the comments!