@stackshift-ui/data-table 1.0.0-beta.1

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@stackshift-ui/data-table",
+  "description": "Powerful table and datagrids built using TanStack Table.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@tanstack/react-table": "^8.21.3",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/button": "6.1.0-beta.0",
+    "@stackshift-ui/select": "7.0.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/table": "1.0.0-beta.1",
+    "@stackshift-ui/dropdown-menu": "1.0.0-beta.1"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/data-table-column-header.tsx

@@ -0,0 +1,70 @@
+import { Button } from "@stackshift-ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@stackshift-ui/dropdown-menu";
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
+
+const displayName = "DataTableColumnHeader";
+
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+  ...props
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  if (!column.getCanSort()) {
+    return (
+      <Component className={cn(className)} {...props}>
+        {title}
+      </Component>
+    );
+  }
+
+  return (
+    <Component className={cn("flex items-center gap-2", className)} {...props}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp />
+            ) : (
+              <ChevronsUpDown />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Component>
+  );
+}
+DataTableColumnHeader.displayName = displayName;

package/src/data-table-pagination.tsx

@@ -0,0 +1,94 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+import { Button } from "@stackshift-ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@stackshift-ui/select";
+
+const displayName = "DataTablePagination";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table, ...props }: DataTablePaginationProps<TData>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component className="flex items-center justify-between px-2" {...props}>
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={value => {
+              table.setPageSize(Number(value));
+            }}>
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 25, 30, 40, 50].map(pageSize => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}>
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}>
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}>
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}>
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </Component>
+  );
+}
+DataTablePagination.displayName = displayName;

package/src/data-table-view-options.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Table } from "@tanstack/react-table";
+import { Settings2 } from "lucide-react";
+
+import { Button } from "@stackshift-ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@stackshift-ui/dropdown-menu";
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "DataTableViewOptions";
+
+export function DataTableViewOptions<TData>({ table, ...props }: { table: Table<TData> }) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component {...props}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+            <Settings2 />
+            View
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[150px]">
+          <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {table
+            .getAllColumns()
+            .filter(column => typeof column.accessorFn !== "undefined" && column.getCanHide())
+            .map(column => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className="capitalize"
+                  checked={column.getIsVisible()}
+                  onCheckedChange={value => column.toggleVisibility(!!value)}>
+                  {column.id}
+                </DropdownMenuCheckboxItem>
+              );
+            })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Component>
+  );
+}
+DataTableViewOptions.displayName = displayName;

package/src/data-table.test.tsx

@@ -0,0 +1,79 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, test } from "vitest";
+import { ColumnDef, DataTable } from "./data-table";
+
+// TODO: add more tests
+describe.concurrent("data-table", () => {
+  afterEach(cleanup);
+
+  test("Dummy test - test if renders without errors", ({ expect }) => {
+    const columns: ColumnDef<{ name: string }>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+      },
+    ];
+
+    const data = [
+      {
+        name: "John Doe",
+      },
+    ];
+
+    render(<DataTable data-testid="data-table" columns={columns} data={data} />);
+    expect(screen.getByText("John Doe")).not.toBeNull();
+  });
+
+  test("Common: Data Table - test if renders with correct number of rows", ({ expect }) => {
+    const columns: ColumnDef<{ name: string }>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+      },
+    ];
+
+    const data = [
+      {
+        name: "John Doe",
+      },
+      {
+        name: "Jane Doe",
+      },
+    ];
+
+    render(<DataTable data-testid="data-table-2" columns={columns} data={data} />);
+
+    const table = screen.getByTestId("data-table-2");
+    const rows = table.querySelectorAll("tr");
+
+    expect(rows).toHaveLength(3);
+  });
+
+  test("Common: Data Table - test if renders with correct number of columns", ({ expect }) => {
+    const columns: ColumnDef<{ name: string; email: string }>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+      },
+      {
+        accessorKey: "email",
+        header: "Email",
+      },
+    ];
+
+    const data = [
+      {
+        name: "John Doe",
+        email: "john@example.com",
+      },
+    ];
+
+    render(<DataTable data-testid="data-table-3" columns={columns} data={data} />);
+
+    const table = screen.getByTestId("data-table-3");
+    const headers = table.querySelectorAll("th");
+
+    expect(headers).toHaveLength(2);
+  });
+});

package/src/data-table.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@stackshift-ui/table";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { DataTablePagination } from "./data-table-pagination";
+
+const displayName = "DataTable";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  ...props
+}: DataTableProps<TData, TValue>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onRowSelectionChange: setRowSelection,
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      rowSelection,
+      columnFilters,
+    },
+  });
+
+  return (
+    <Component className="relative w-full h-full flex flex-col gap-2" {...props}>
+      <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>
+      </div>
+      <div className="w-full h-fit py-10">
+        <DataTablePagination table={table} />
+      </div>
+    </Component>
+  );
+}
+DataTable.displayName = displayName;
+
+export { type ColumnDef } from "@tanstack/react-table";
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableViewOptions } from "./data-table-view-options";

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./data-table";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+