CRUD Table Generator

"use client";

import * as React from "react";
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";

export type PersonRecordRow = {
  id: number;
  createdAt: string;
  updatedAt: string;
  name: string;
  age: number;
  email: string;
  isActive: boolean;
  joinedAt: string;
};

export type PersonRecordTableProps = {
  data: PersonRecordRow[];
};

const columns: ColumnDef<PersonRecordRow>[] = [
  {
    id: "id",
    header: "ID",
    accessorKey: "id",
    enableSorting: true,
  },
  {
    id: "createdAt",
    header: "Created",
    accessorKey: "createdAt",
    enableSorting: true,
  },
  {
    id: "updatedAt",
    header: "Updated",
    accessorKey: "updatedAt",
    enableSorting: true,
  },
  {
    id: "name",
    header: "Name",
    accessorKey: "name",
    enableSorting: true,
    enableGrouping: false,
    enableColumnFilter: true,
  },
  {
    id: "age",
    header: "Age",
    accessorKey: "age",
    enableSorting: true,
    enableGrouping: false,
    enableColumnFilter: true,
  },
  {
    id: "email",
    header: "Email",
    accessorKey: "email",
    enableSorting: true,
    enableGrouping: false,
    enableColumnFilter: false,
  },
  {
    id: "isActive",
    header: "Active",
    accessorKey: "isActive",
    enableSorting: false,
    enableGrouping: true,
    enableColumnFilter: true,
  },
  {
    id: "joinedAt",
    header: "Joined",
    accessorKey: "joinedAt",
    enableSorting: true,
    enableGrouping: false,
    enableColumnFilter: false,
  },
];

export const PersonRecordTable: React.FC<PersonRecordTableProps> = ({ data }) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
  });

  return (
    <div className="flex flex-col gap-4">
      <div className="overflow-x-auto rounded border">
        <table className="w-full min-w-[720px] border-collapse text-sm">
          <thead className="bg-gray-50">
            {table.getHeaderGroups().map((headerGroup) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <th key={header.id} className="border-b px-4 py-2 text-left font-medium">
                    {header.isPlaceholder
                      ? null
                      : (
                          <button type="button" onClick={header.column.getToggleSortingHandler()}>
                            {flexRender(header.column.columnDef.header, header.getContext())}
                          </button>
                        )}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody>
            {table.getRowModel().rows.map((row) => (
              <tr key={row.id} className="border-b last:border-0">
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id} className="px-4 py-2">
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};