@piyushpathar/datatable

A DataTable component for Next.js (App Router friendly): TanStack Table, Radix for switches/checkboxes/dropdowns, and a shared set of table cell types (text, link, image, actions, etc.). It expects the same Tailwind design tokens the components were built with (font_semi_12, text-C_*, borders, and similar).

Full usage guide → docs/USAGE.md (install, Next.js, Tailwind, API, all cell types, selection, TypeScript, troubleshooting)

Quick install

npm install @piyushpathar/datatable

The unscoped package datatable on npm is a different (older) library. This one is scoped: @piyushpathar/datatable.

Quick setup

1. next.config

   transpilePackages: ["@piyushpathar/datatable"],

2. Tailwind content (published package = dist only)

   "./node_modules/@piyushpathar/datatable/dist/**/*.js",

3. Align your app’s Tailwind config with the table’s class names (colors, font_* utilities) so classes are not purged and look correct.

Quick usage

"use client";

import {
  DataTable,
  DataTableCellType,
  type DataTableColumn,
} from "@piyushpathar/datatable";

type Row = { id: string; name: string };

const columns: DataTableColumn<Row>[] = [
  {
    id: "name",
    header: "Name",
    cell: { cellType: DataTableCellType.TEXT, value: ({ row }) => row.name },
  },
];

export function Example({ rows }: { rows: Row[] }) {
  return (
    <DataTable<Row>
      data={rows}
      columns={columns}
      getRowId={({ row }) => row.id}
    />
  );
}

For props and every cell type, see docs/USAGE.md.

Documentation

| Doc | Content | | --- | --- | | docs/USAGE.md | End-to-end guide: install, Next.js, Tailwind, API tables, all DataTableCellType fields, selection, TS, peers, troubleshooting |

Publish (maintainers)

Use an npm account that matches the scope, or set "name" in package.json to @YourNpmUser/datatable, then npm publish.