Feature: Add Table Component

package.json

@@ -80,5 +80,9 @@
     ],
     "*.(xml|xml.dist)": "prettier --write",
     "*.yml": "prettier --write"
+  },
+  "dependencies": {
+    "@rtcamp/frappe-ui-react": "^1.0.0-beta.0",
+    "classnames": "^2.5.1"
   }
 }

packages/frappe-ui-react/package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-table": "^8.21.3",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.6",
     "echarts": "^5.6.0",

packages/frappe-ui-react/src/components/table/components/index.ts

@@ -0,0 +1,7 @@
+export { default as TableHeader } from "./tableHeader";
+export { default as TableBody } from "./tableBody";
+export { default as TableFooter } from "./tableFooter";
+export { default as TableHead } from "./tableHead";
+export { default as TableRow } from "./tableRow";
+export { default as TableCell } from "./tableCell";
+export { default as TableCaption } from "./tableCaption";

packages/frappe-ui-react/src/components/table/components/tableBody.tsx

@@ -0,0 +1,17 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableBody = ({
+  className,
+  children,
+  ...props
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => (
+  <tbody
+    className={classNames("[&_tr:last-child]:border-0", className)}
+    {...props}
+  >
+    {children}
+  </tbody>
+);
+
+export default TableBody;

packages/frappe-ui-react/src/components/table/components/tableCaption.tsx

@@ -0,0 +1,13 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableCaption = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableCaptionElement>>) => (
+  <caption className={classNames("mt-4 text-sm text-slate-400", className)}>
+    {children}
+  </caption>
+);
+
+export default TableCaption;

packages/frappe-ui-react/src/components/table/components/tableCell.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableCell = ({
+  className,
+  children,
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableDataCellElement>>) => (
+  <td
+    className={classNames(
+      "px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+  >
+    {children}
+  </td>
+);
+
+export default TableCell;

packages/frappe-ui-react/src/components/table/components/tableFooter.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableFooter = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => (
+  <tfoot
+    className={classNames(
+      "border-t bg-slate-500/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+  >
+    {children}
+  </tfoot>
+);
+
+export default TableFooter;

packages/frappe-ui-react/src/components/table/components/tableHead.tsx

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableHead = ({
+  className,
+  children,
+  ...props
+}: PropsWithChildren<React.ThHTMLAttributes<HTMLTableCellElement>>) => (
+  <th
+    className={classNames(
+      "h-12 px-4 text-left align-middle font-medium text-gray-900 [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </th>
+);
+
+export default TableHead;

packages/frappe-ui-react/src/components/table/components/tableHeader.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableHeader = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => (
+  <thead
+    className={classNames(
+      "[&_tr]:border-b bg-slate-50 dark:bg-slate-500 border-t",
+      className
+    )}
+  >
+    {children}
+  </thead>
+);
+
+export default TableHeader;

packages/frappe-ui-react/src/components/table/components/tableRow.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react";
+import classNames from "classnames";
+
+const TableRow = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>) => (
+  <tr
+    className={classNames(
+      "border-b transition-colors hover:bg-slate-500/50 data-[state=selected]:bg-slate-500",
+      className
+    )}
+  >
+    {children}
+  </tr>
+);
+
+export default TableRow;

packages/frappe-ui-react/src/components/table/index.tsx

@@ -0,0 +1,128 @@
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  OnChangeFn,
+  useReactTable,
+} from "@tanstack/react-table";
+import classNames from "classnames";
+
+import {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./components";
+
+interface TableProps<TData> {
+  className?: string;
+  columns: ColumnDef<TData>[];
+  data: TData[];
+  enablePagination?: boolean;
+  paginationState?: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  onPaginationChange?: OnChangeFn<{
+    pageIndex: number;
+    pageSize: number;
+  }>;
+  componentClassNames?: {
+    caption?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    head?: string;
+    row?: string;
+    cell?: string;
+  };
+}
+
+function Table<TData>({
+  className,
+  columns,
+  data,
+  enablePagination = false,
+  paginationState = { pageIndex: 0, pageSize: 10 },
+  onPaginationChange,
+  componentClassNames,
+}: TableProps<TData>) {
+  const table = useReactTable<TData>({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: enablePagination,
+    getPaginationRowModel: enablePagination
+      ? getPaginationRowModel()
+      : undefined,
+    onPaginationChange: enablePagination ? onPaginationChange : undefined,
+    state: {
+      pagination:
+        enablePagination ? paginationState : undefined,
+    },
+  });
+
+  return (
+    <div className="relative w-full overflow-auto">
+      <table className={classNames("w-full caption-bottom text-sm", className)}>
+        <TableCaption className={componentClassNames?.caption} />
+
+        <TableHeader className={componentClassNames?.header}>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className={componentClassNames?.row}>
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  className={componentClassNames?.head}
+                  colSpan={header.colSpan}
+                  rowSpan={header.rowSpan}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+
+        <TableBody className={componentClassNames?.body}>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id} className={componentClassNames?.row}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id} className={componentClassNames?.cell}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+
+        <TableFooter className={componentClassNames?.footer}>
+          {table.getFooterGroups().map((footerGroup) => (
+            <TableRow key={footerGroup.id} className={componentClassNames?.row}>
+              {footerGroup.headers.map((header) => (
+                <TableCell
+                  key={header.id}
+                  className={componentClassNames?.cell}
+                >
+                  {flexRender(
+                    header.column.columnDef.footer,
+                    header.getContext()
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableFooter>
+      </table>
+    </div>
+  );
+}
+
+export default Table;