zynx-react-data-grid

A lightweight, editable React and TypeScript data grid for SaaS dashboards, admin panels, CRMs, and internal tools.

This package provides a flexible grid experience with sorting, filtering, pagination, row selection, inline editing, CSV export, and custom renderers while keeping the API simple.

Features

• TypeScript-first column definitions
• Client-side sorting and filtering
• Pagination and row selection
• Inline cell editing with custom editors
• Custom cell and header renderers
• Column resizing and visibility controls
• Keyboard navigation and row/cell styling
• CSV export support
• Light, dark, and compact themes
• Controlled and uncontrolled state APIs

Installation

npm install zynx-react-data-grid

Quick Start

import { DataGrid, type ColumnDef } from "zynx-react-data-grid";
import "zynx-react-data-grid/styles.css";

type User = {
  id: number;
  name: string;
  email: string;
  status: "Active" | "Inactive";
};

const columns: ColumnDef<User>[] = [
  { field: "name", headerName: "Name", sortable: true, filterable: true, editable: true },
  { field: "email", headerName: "Email", sortable: true, filterable: true },
  {
    field: "status",
    headerName: "Status",
    editable: true,
    type: "select",
    selectOptions: ["Active", "Inactive"],
  },
];

const rows: User[] = [
  { id: 1, name: "Zunaira", email: "[email protected]", status: "Active" },
  { id: 2, name: "Umair", email: "[email protected]", status: "Inactive" },
];

export default function App() {
  return (
    <DataGrid
      rows={rows}
      columns={columns}
      getRowId={(row) => row.id}
      rowSelection="multiple"
      pagination={{ pageSize: 10 }}
      editable
      toolbar
    />
  );
}

Local Development

npm install
npm run dev

Then open the Vite playground in your browser.

Build and Test

npm run build
npm test

Publish to npm

npm run release

This will build the library, run tests, and publish the package to npm.

Project Structure

src/
  components/
    DataGrid.tsx
    GridToolbar.tsx
  hooks/
    useControllableState.ts
  utils/
    csv.ts
    filter.ts
    ids.ts
    sort.ts
  types.ts
  styles.css
playground/
  src/
    App.tsx
    main.tsx

Roadmap

Upcoming

• Auto-size columns on double click
• Column state persistence helpers
• Reset column widths
• Improved column visibility panel
• Virtual scrolling and column pinning
• Advanced filter builder and server-side row model