tanstack-react-table

react-table-component

A production-ready, highly customizable React table component built with TanStack Table, Radix UI, DnD Kit, and TypeScript. Feature-rich, accessible, performant, and designed for real business needs.

🚀 Features

• High Performance: Virtualized rendering for massive datasets (10k+ rows)
• Editable Cells: Radix UI-based editors (text, number, select, date, boolean, rating, textarea)
• Drag & Drop: Column and row reordering with DnD Kit
• Nested Rows: Expand/collapse hierarchical data
• Theming: Easy theming with Tailwind CSS and Radix states
• Accessibility: Full keyboard navigation and screen reader support
• TypeScript: Complete type safety with rich interfaces
• Backward Compatible: Drop-in replacement for existing column/data structures

📦 Installation

npm install react-table-component
# or
yarn add react-table-component
# or
bun add react-table-component

Peer dependencies:

• react ^19
• react-dom ^19
• @tanstack/react-table ^8

⚡ Quick Start

import React from "react";
import { TableComponent } from "react-table-component";
import type { ColumnProps } from "react-table-component";

const columns: ColumnProps[] = [
  {
    id: "name",
    header: "Name",
    type: "text",
    width: 200,
  },
  {
    id: "email",
    header: "Email",
    type: "email",
    width: 250,
  },
  {
    id: "age",
    header: "Age",
    type: "number",
    width: 100,
  },
];

const data = [
  { id: "1", name: "John Doe", email: "[e-mail]", age: 30 },
  { id: "2", name: "Jane Smith", email: "[e-mail]", age: 25 },
];

function MyTable() {
  return (
     {
        console.log("Event:", type, value);
      }}
      onEndReached={() => {}}
    />
  );
}

🔢 Supported Cell Types

Built-in Radix UI-based cell editors:

• text: Basic input with validation
• number: Arrow stepper
• email: Email input and mailto links
• textarea: Multi-line editing
• select: Dropdown menu with search
• date: Calendar picker
• boolean: Toggle switch
• rating: Star rating
• readonly: Display only

🛠️ Column Definition

interface ColumnProps {
  id: string; // Unique key
  header: string | JSX.Element; // Header cell
  type?: string; // text | number | select | etc.
  width?: number;
  minWidth?: number;
  maxWidth?: number;
  enableSorting?: boolean;
  enableResizing?: boolean;
  enableHiding?: boolean;
  enablePinning?: boolean;
  enableOrdering?: boolean;
  render?: (props) => JSX.Element; // Custom cell renderer
  headerRender?: () => JSX.Element; // Custom header
  footerRender?: () => JSX.Element; // Custom footer
  fixed?: "left" | "right";
  meta?: Record;
}

🏗️ Advanced Usage

Virtualization

Efficient rendering for huge datasets:

<TableComponent dataSource={largeData} columns={columns} isVirtual={true} rowHeight={50} />

Nested Rows/Tree Table

const nestedData = [
  {
    id: "1",
    name: "Parent Row",
    subRows: [
      { id: "1-1", name: "Child Row 1" },
      { id: "1-2", name: "Child Row 2" },
    ],
  },
];

Custom Cell Components

import { MyCustomCell } from "./MyCustomCell";

Theming

Use your own or built-in Tailwind themes, Radix states, or external theme libraries.

📑 API Reference

Prop	Type	Description
dataSource	Array	Table data
columns	ColumnProps[]	Column definitions
rowKey	string	Unique ID key for rows
showSerialNumber	boolean	Show row numbers
showRowSelection	boolean	Show checkboxes for selection
isVirtual	boolean	Enable virtualized rendering
rowHeight	number	Row height (px)
expandable	object	Tree/row expansion config
options	object	Feature toggles (sorting, etc)
onEventUpdate	function	Event callback
onEndReached	function	Infinite scroll callback

Exposed Table Ref Methods

const tableRef = useRef(null);
// Usage:
tableRef.current?.addRow(newRow);
tableRef.current?.removeRow("row-id");
tableRef.current?.updateRow("row-id", { name: "Changed" });
tableRef.current?.expandRow("row-id");
tableRef.current?.selectRow("row-id", true);
tableRef.current?.getSelectedRows();

📣 Events

const handleEventUpdate = ({ type, value }) => {
  switch (type) {
    case "cell-edit": /* ... */ break;
    case "row-select": /* ... */ break;
    case "column-resize": /* ... */ break;
    // ...
  }
};

💡 Performance Tips

• Use virtualization for datasets >1,000 rows
• Memoize event handlers
• Batch row updates
• Optimize custom renderers with React.memo
• Use stable rowKey

🧑‍💻 Development

# Install deps
bun install
# Start dev server
bun run dev
# Build the library
bun run build
# Run tests
bun test
# Lint/fix
bun run lint
bun run format
# Typecheck
bun run typecheck

🤝 Contributing

• Fork the repo
• Create a feature branch (git checkout -b feat/new-feature)
• Commit changes (git commit -m "Add new feature")
• Push to GitHub
• Open a Pull Request

📝 License

MIT License – see the LICENSE file for details.

📚 Links

• GitHub
• TanStack Table Docs
• Radix UI Docs
• Tailwind CSS Docs

© 2025 Aravinthan