esseal-data-table

A fast, fully-featured React data table with zero runtime dependencies. Handles both client-side and server-side data with a single component — switch modes by changing one prop.

Built by Esseal.

Install

npm install esseal-data-table
# or
yarn add esseal-data-table
# or
pnpm add esseal-data-table

React 18 or later is required as a peer dependency.

Quick start

import { EssealDataTable } from 'esseal-data-table';
import 'esseal-data-table/style.css';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

const rows: User[] = [
  { id: 1, name: 'Alice Johnson', email: '[email protected]', role: 'Engineer' },
  { id: 2, name: 'Bob Smith',     email: '[email protected]',   role: 'Designer' },
];

const columns = [
  { field: 'id',    headerName: 'ID',    width: 70  },
  { field: 'name',  headerName: 'Name',  width: 180 },
  { field: 'email', headerName: 'Email', width: 220 },
  { field: 'role',  headerName: 'Role',  width: 130 },
];

export default function App() {
  return (
    <div style={{ height: 400 }}>
      <EssealDataTable rows={rows} columns={columns} />
    </div>
  );
}

⚠️ The table fills its parent's height by default. Always wrap it in a container with a defined height, or pass a height prop directly.

Features

| Feature | Notes | |---|---| | Virtualized rendering | Only visible rows render — handles large datasets without lag. Disabled while any row is expanded. | | Sorting | Click any header to sort ascending / descending | | Per-column filtering | Search inputs built into each column header | | Client pagination | Built-in page navigation; supports a page-size selector | | Server-side pagination | Delegate filtering, sorting, and paging to your API | | Server-side grouping | Lazy-load group rows on expand; load-more within groups | | Client-side grouping | Multi-level expand/collapse grouping on in-memory data | | Column pinning | Pin columns to left or right; runtime-configurable via the pin icon | | Column resizing | Drag-resize any column header | | Column visibility | Toggle columns via the built-in Columns menu | | Checkbox selection | Multi-row selection that persists across page changes | | Row actions | Inline buttons + overflow (⋮) menu with portal positioning | | Custom toolbar | Inject your own controls into the toolbar | | Loading overlay | Block the table while data is in flight | | Row expansion | Expand any row to show custom content below it via expandable.render | | State persistence | Save and restore full table state via onStateChange / initialState | | valueGetter | Extract display values from nested or computed fields | | Custom cell rendering | Render any React node inside any cell | | Conditional styling | Apply CSS classes to rows or individual cells based on row data | | Full TypeScript support | Generic component with end-to-end type safety | | Zero dependencies | No lodash, no date libraries, nothing — React only |

Pagination modes at a glance

| | Client (default) | Server | |---|---|---| | Prop | (omit paginationMode) | paginationMode="server" | | Filtering | In-memory | Your API | | Sorting | In-memory | Your API | | Total count | Computed from rows | rowCount prop | | Grouping | groupBy — client-side | serverGroups — lazy expand |

Documentation

| File | Description | |---|---| | docs/getting-started.md | Installation walkthrough and first steps | | docs/api-reference.md | Every prop, type, and interface | | docs/configuration.md | CSS variables and theming | | docs/examples/ | Runnable examples for common patterns | | docs/error-reference.md | All errors this package can produce | | docs/changelog.md | Version history | | docs/contributing.md | How to run and contribute to the project |

License

MIT © Esseal