I built an open-source React data grid with zero dependencies

Mayank Mahadevwala — Fri, 08 May 2026 11:20:12 +0000

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 groupBy prop

## 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!

DEV Community: Mayank Mahadevwala

I built an open-source React data grid with zero dependencies