@manhphi1309/table

A robust and accessible table component library for the shadcn-custom monorepo. It provides primitive HTML table components as well as a powerful DataTable wrapper integrated with @tanstack/react-table for data-driven grids.

Subcomponents

• Table
• TableHeader
• TableBody
• TableFooter
• TableHead
• TableRow
• TableCell
• TableCaption
• DataTable
• DataTableHeader
• DataTableBody
• DataTableFooter

Dependencies

• @manhphi1309/utils
• @tanstack/react-table

Installation

npm install @manhphi1309/table

Usage Example

Primitive Table

For simple, static tables:

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@manhphi1309/table"

export default function SimpleTable() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>INV001</TableCell>
          <TableCell>$250.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

DataTable

For data-driven tables using @tanstack/react-table:

"use client"

import { DataTable } from "@manhphi1309/table"
import {
  getCoreRowModel,
  useReactTable,
  ColumnDef,
} from "@tanstack/react-table"

type Payment = { id: string; amount: number; status: string }

const columns: ColumnDef<Payment>[] = [
  { accessorKey: "id", header: "ID" },
  { accessorKey: "amount", header: "Amount" },
  { accessorKey: "status", header: "Status" },
]

export default function DataDrivenTable({ data }: { data: Payment[] }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  // Automatically applies column borders, sticky headers, and maps your data!
  return <DataTable table={table} withVerticalBorders={true} />
}