IN PROGRESS | Data Table Component

package.json

@@ -12,12 +12,13 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@tanstack/react-table": "^8.16.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.323.0",

src/components/atoms/Button/index.tsx

@@ -2,7 +2,7 @@ import { VariantProps, tv } from "tailwind-variants";
 import React from "react"; // Import React
 import { cn } from "@/lib/utils";
 
-const button = tv({
+export const button = tv({
   base: 'relative inline-flex items-center justify-center rounded-md text-[#F8FAFC] border-0 disabled:opacity-[40%]',
   variants: {
     variant: {
@@ -30,6 +30,7 @@ const button = tv({
 type ButtonVariants = VariantProps<typeof button>;
 
 
+
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
   name: string;
   variant?: "primary" | "secondary" | "destructive" | "ghost" | 'outline' | 'link' | 'icon';

src/components/atoms/Table/index.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/atoms/index.ts

@@ -11,3 +11,4 @@ export * from "./TextArea";
 export * from "./Label";
 export * from "./Switch";
 export * from "./Loader";
+export * from "./Table";

src/components/molecules/DataTable/DataTable.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DataTable } from ".";
+
+const meta: Meta<typeof DataTable> = {
+  title: "Design System/Molecules/DataTable",
+  component: DataTable,
+
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type DataTableStory = StoryObj<typeof DataTable>;
+
+export const SimpleDataTable: DataTableStory = {
+  args: {
+    data: [
+      {
+        name: "John",
+        age: 30,
+      },
+      {
+        name: "Jane",
+        age: 25,
+      },
+    ],
+    columns: [
+      {
+        header: "Name",
+        accessorKey: "name",
+      },
+      {
+        header: "Age",
+        accessorKey: "age",
+      },
+    ],
+  },
+};
+
+export const DataTableWithPagination: DataTableStory = {
+  args: {
+    pagination: {
+      state: {
+        pageSize: 10,
+        pageIndex: 0,
+      },
+      count: 2,
+      hasNext: false,
+      handlePaginationChange: () => { },
+    },
+    data: [
+      {
+        name: "John",
+        age: 30,
+      },
+      {
+        name: "Jane",
+        age: 25,
+      },
+    ],
+    columns: [
+      {
+        header: "Name",
+        accessorKey: "name",
+      },
+      {
+        header: "Age",
+        accessorKey: "age",
+      },
+    ],
+  },
+};

src/components/molecules/DataTable/index.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../atoms";
+import { DataTablePagination, PaginationData } from "../DataTablePagination";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  pagination?: PaginationData;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  pagination,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    manualPagination: true,
+    getPaginationRowModel: getPaginationRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      pagination: pagination?.state,
+    },
+  });
+
+  return (
+    <div className='rounded-md border'>
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map(headerGroup => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map(header => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map(row => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map(cell => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className='h-24 text-center'>
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      {pagination && (
+        <DataTablePagination table={table} paginationData={pagination} />
+      )}
+    </div>
+  );
+}