The latest articles on DEV Community by Mayank Mahadevwala (@itsmemyk). https://dev.to/itsmemyk https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3919930%2Fdc79251d-09cd-4308-93f3-4313699cb8ab.jpeg https://dev.to/itsmemyk en Mayank Mahadevwala Mon, 18 May 2026 06:43:04 +0000 https://dev.to/itsmemyk/the-missing-piece-in-open-source-react-grids-real-data-grouping-4kg5 https://dev.to/itsmemyk/the-missing-piece-in-open-source-react-grids-real-data-grouping-4kg5 <p><strong>react-tree-grid</strong> v0.5.0 ships a drag-panel grouping UI that most paid libraries still don't get right.</p> <p>If you've spent time evaluating React data grid libraries, you've probably hit the same wall.</p> <p>You need grouping. You search the docs. You find one of two things: either it's not supported at all, or there's a bare groupBy prop that dumps your data into flat,<br> non-interactive buckets — no drag UI, no reordering, no per-group sort control. Just rows with a label slapped on top.</p> <p>That's not grouping. That's a workaround.</p> <p>We built react-tree-grid to be a serious open-source alternative to DHTMLX TreeGrid — and grouping was the feature that had to be done properly.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7dshfrwa9zanx1scouxw.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7dshfrwa9zanx1scouxw.gif" alt="Grid grouping feature" width="760" height="370"></a></p> <p>Drag columns into the group panel, reorder chips, toggle sort direction per group level — all live.</p> <h2> What's in the v0.5.0 grouping feature </h2> <ul> <li>Drag any column header into the "Group by" panel above the grid to add a grouping level</li> <li>Multi-level nesting — each chip adds one indented level, so you can group by species, then status, then region</li> <li>Per-chip sort toggle — each group level has its own independent sort direction (↕ idle / ↑ asc / ↓ desc), separate from column-header sorting</li> <li>Expand and collapse individual groups via a chevron; groups show a live row count (e.g. Dog (43))</li> <li>One prop to enable all of it: groupable </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> &lt;Grid columns={columns} data={data} groupable group={{ order: ['animal_type', 'status'] }} /&gt; </code></pre> </div> <p>You can also control grouping programmatically via groupBy() and clearGroups() on the grid API, and hook into onBeforeGroupChange / onGroupChange events.</p> <h2> Why it matters </h2> <p>Most grouping implementations treat it as a display concern — a post-render transformation that reorganizes rows. The result is brittle: sorting breaks grouping,<br> reordering isn't supported, and the UI gives users no affordance to understand what's happening.</p> <p>We designed grouping as a first-class data operation. Sort state is preserved when you drag a column into the panel. Group order is fully draggable. Each level is<br> independently collapsible. The panel is an honest representation of the data structure, not a cosmetic layer over it.</p> <h2> Try it </h2> <p>npm install <a class="mentioned-user" href="https://dev.to/itsmemyk">@itsmemyk</a>/react-tree-grid</p> <ul> <li>Zero runtime dependencies — React is the only peer</li> <li>Full TypeScript support</li> <li>MIT license</li> </ul> <p>Live demo → <a href="https://itsmemyk.github.io/react-tree-grid/?path=/story/grid--grouping" rel="noopener noreferrer">https://itsmemyk.github.io/react-tree-grid/?path=/story/grid--grouping</a><br> Documentation → <a href="https://itsmemyk.github.io/react-tree-grid/docs/" rel="noopener noreferrer">https://itsmemyk.github.io/react-tree-grid/docs/</a><br> GitHub → <a href="https://github.com/itsmemyk/react-tree-grid" rel="noopener noreferrer">https://github.com/itsmemyk/react-tree-grid</a></p> react opensource javascript typescript Mayank Mahadevwala Fri, 08 May 2026 11:20:12 +0000 https://dev.to/itsmemyk/i-built-an-open-source-react-data-grid-with-zero-dependencies-2lk https://dev.to/itsmemyk/i-built-an-open-source-react-data-grid-with-zero-dependencies-2lk <p>I've been working on <strong>react-tree-grid</strong> — an open-source, zero-dependency component library for React 18+ that provides three components: Grid, Tree and TreeGrid. </p> <h2> Why I built it </h2> <p>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. </p> <h2> What it does </h2> <p><strong>Grid</strong> — a flat tabular data grid with: </p> <ul> <li>Virtual scrolling (100,000+ rows) </li> <li>Inline editing (input, select, checkbox, combo, date picker)</li> <li>Sorting and header filters (input, select, combo) </li> <li>Drag-and-drop row and column reorder </li> <li>Frozen columns (left and right) </li> <li>Rowspan and colspan </li> <li>Footer aggregates (sum, avg, count, min, max) </li> <li>Light/dark theming via CSS custom properties </li> </ul> <p><strong>Tree</strong> — a file-explorer style hierarchy with: </p> <ul> <li>Expand/collapse </li> <li>Checkboxes</li> <li>Drag-and-drop reorder </li> <li>Inline label editing </li> </ul> <p><strong>TreeGrid</strong> — hierarchical rows inside a data grid: </p> <ul> <li>Parent/child rows with expand toggle </li> <li>All Grid features apply</li> <li>Grouping via <code>groupBy</code> prop </li> </ul> <p>## Installation </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> 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&lt;OrgRow&gt;[] = [ { 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 ( &lt;ThemeProvider theme="light"&gt; &lt;TreeGrid columns={columns} data={data} treeColumnId="name" style={{ width: 400, height: 240 }} /&gt; &lt;/ThemeProvider&gt; ) } Theming Wrap your app with ThemeProvider and override any design token: &lt;ThemeProvider theme="light" overrides={{ colorPrimary: '#e91e63', fontFamily: 'Inter, sans-serif' }} &gt; {/* components */} &lt;/ThemeProvider&gt; 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! </code></pre> </div> react typescript opensource javascript