Why We Built grid-table: A React Data Grid That Stays Out of Your Way

A powerful, themeable data table for React—with no Tailwind dependency, full TypeScript support, and built for the ForgeStack ecosystem.

The Problem with Data Tables in React

Building a solid data table in React usually means either wiring together a heavy library, fighting with a headless abstraction that leaves styling to you, or maintaining a custom implementation that grows into a mess. You want sorting, filtering, pagination, row selection, responsive behavior, and dark mode—without pulling in the whole world or locking yourself into one CSS framework.

@forgedevstack/grid-table is a React data grid that gives you all of that out of the box: SCSS-only styling (no Tailwind required), full TypeScript types, and a single component that fits into the ForgeStack ecosystem alongside Bear UI.

Why Use Grid-Table?

1. Zero Tailwind Dependency

Grid-table is styled entirely with SCSS. You get one CSS bundle and predictable, overridable variables. No need to add Tailwind to your stack or fight utility classes. Import the grid-table stylesheet and optional theming—done.

2. Built for ForgeStack and Bear UI

Grid-table is part of ForgeStack. It uses @forgedevstack/bear for checkboxes, tooltips, typography, and pagination. That means consistent look and feel with the rest of your ForgeStack app: one design system, one theme (including light/dark and primary color overrides via themeMode and themeOverride).

3. Context API—No Prop Drilling

Table state (sorting, filters, selection, pagination) lives in React Context. Child components use hooks like useTableContext() to read state and trigger actions. No passing callbacks through multiple layers.

4. Feature-Complete Without the Bloat

• Sorting – Single and multi-column, custom sort functions
• Filtering – Per-column and global search, with optional column scope (globalFilterColumns)
• Pagination – Bear Pagination, page-size selector, “X–Y of Z” summary
• Row selection – Single or multi-select, Bear Checkbox
• Row expansion – Expandable rows with custom content (forms, sub-tables, etc.), controlled by renderRowExpansion and rowId
• Column reorder – Drag-and-drop column reordering
• Column resize – Resizable columns; double-click to auto-size a column to content
• Overflow & tooltips – Truncated cells show ellipsis; full content in a Bear Tooltip on hover
• Sub-cells – Extra content per cell via renderSubCell, triggered by double-click or arrow
• Responsive – Mobile-friendly layout with drawer for filters/sort and optional card-style rows
• Theming – Light/dark/system, CSS variables, optional Bear themeOverride for primary color
• Studio – Optional side panel (like React Query DevTools) with data preview, props snapshot, and generated sample data

5. TypeScript and Accessibility

Full TypeScript definitions for props, columns, and row data. ARIA attributes and keyboard-friendly behavior so the grid works for everyone.

What’s in It for You?

• Less code – One component, clear column definitions, no wiring of five different libraries.
• Consistent UX – Same patterns and components (Bear) across your app.
• Easier theming – One place to set light/dark and primary color; grid and Bear stay in sync.
• Maintainable – SCSS and context-based state are easy to reason about and extend.
• Flexible – Custom cell renderers, custom row expansion content, optional Studio for prototyping and debugging.

Part of the ForgeStack Ecosystem

ForgeStack is a set of React libraries that work together:

• @forgedevstack/bear – UI primitives (Button, Input, Checkbox, Typography, Tooltip, Pagination, etc.) and theming (BearProvider, light/dark).
• @forgedevstack/grid-table – Data grid that uses Bear for controls and styling, and fits the same design tokens and theme.
• Other ForgeStack packages – Query, form, or app-specific modules can sit alongside grid-table and Bear for a consistent stack.

Using grid-table means your tables automatically align with Bear’s look and feel and with the rest of your ForgeStack setup—one ecosystem instead of scattered dependencies.

Quick Start

Install the package and Bear (peer dependency):

npm install @forgedevstack/grid-table @forgedevstack/bear

Import the styles once (Bear styles are pulled in by grid-table):

import '@forgedevstack/grid-table/grid-table.css';

Define columns and data, then render the table:

import { GridTable, type ColumnDefinition } from '@forgedevstack/grid-table';

const columns: ColumnDefinition<User>[] = [
  { id: 'name', accessor: 'name', header: 'Name', sortable: true, filterable: true },
  { id: 'email', accessor: 'email', header: 'Email', sortable: true },
  { id: 'role', accessor: 'role', header: 'Role', filterType: 'select', filterOptions: [...] },
];

<GridTable
  data={users}
  columns={columns}
  themeMode="light"
  enableRowSelection
  showPagination
  showFilter
  showGlobalFilter
/>

You get sorting, filtering, pagination, row selection, and responsive behavior without extra setup.

When to Choose Grid-Table

• You want a React data grid with sorting, filtering, pagination, and selection.
• You prefer SCSS (or no Tailwind) and a single, themeable CSS bundle.
• You’re using or considering ForgeStack / Bear and want tables that match.
• You care about TypeScript, accessibility, and no prop drilling for table state.

Links

• npm: @forgedevstack/grid-table
• Docs / homepage: forgedevstack.com
• Bear UI: @forgedevstack/bear

Grid-table is open source (MIT) and part of the ForgeStack ecosystem. If you’re building React apps with data-heavy UIs and want one less thing to wire up, give it a try.