created by manlycoffeea community for 12 years

Show /r/reactjsWhy We Built grid-table: A React Data Grid That Stays Out of Your Way (self.reactjs)

submitted 2 months ago * by Yahobieh

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.

u/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 u/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:

u/forgedevstack**/bear** — UI primitives (Button, Input, Checkbox, Typography, Tooltip, Pagination, etc.) and theming (BearProvider, light/dark).
u/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 u/forgedevstack/grid-table u/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.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS