Table Components

.changeset/fluffy-hairs-trade.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add table components

package.json

@@ -87,6 +87,7 @@
 		"@radix-ui/react-avatar": "^1.0.4",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-slot": "^1.0.2",
+		"@tanstack/react-table": "^8.15.3",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"tailwind-merge": "^2.2.2"

src/components/Table/DataTable.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { DataTable } from "./index";
+import { ColumnDef } from "@tanstack/react-table";
+
+type DummyData = {
+	id: number;
+	name: string;
+	age: number;
+};
+
+const cols: ColumnDef<DummyData, unknown>[] = [
+	{
+		id: "id",
+		header: "ID",
+		accessorKey: "id"
+	},
+	{
+		id: "name",
+		header: "Name",
+		accessorKey: "name"
+	},
+	{
+		id: "age",
+		header: "Age",
+		accessorKey: "age"
+	}
+];
+
+const data: DummyData[] = [
+	{
+		id: 1,
+		name: "John Doe",
+		age: 25
+	},
+	{
+		id: 2,
+		name: "Jane Doe",
+		age: 24
+	},
+	{
+		id: 3,
+		name: "John Smith",
+		age: 26
+	},
+	{
+		id: 4,
+		name: "Jane Smith",
+		age: 27
+	}
+];
+
+const meta = {
+	title: "Elements/Table/DataTable",
+	component: DataTable,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[550px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		// @ts-expect-error Something with the type seems off here, it renders correctly though
+		columns: cols,
+		data: data
+	}
+};

src/components/Table/DataTable.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import React, { useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+}
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+	const [rowSelection, setRowSelection] = useState({});
+	const table = useReactTable({
+		data,
+		columns,
+		onRowSelectionChange: setRowSelection,
+		getCoreRowModel: getCoreRowModel(),
+		state: {
+			rowSelection
+		}
+	});
+
+	return (
+		<div className="overflow-hidden overflow-x-auto rounded-md border">
+			<Table className="min-w-[500px]">
+				<TableHeader className="bg-theme-surface-tertiary">
+					{table.getHeaderGroups().map((headerGroup) => (
+						<TableRow key={headerGroup.id}>
+							{headerGroup.headers.map((header) => {
+								return (
+									<TableHead
+										className="text-theme-text-secondary"
+										key={header.id}
+										// @ts-expect-error width doesnt exist on the type, and would need a global fragmentation
+										style={{ width: header.column.columnDef.meta?.width || undefined }}
+									>
+										{header.isPlaceholder
+											? null
+											: flexRender(header.column.columnDef.header, header.getContext())}
+									</TableHead>
+								);
+							})}
+						</TableRow>
+					))}
+				</TableHeader>
+				<TableBody>
+					{table.getRowModel().rows?.length ? (
+						table.getRowModel().rows.map((row) => (
+							<TableRow
+								className="bg-theme-surface-primary"
+								key={row.id}
+								data-state={row.getIsSelected() && "selected"}
+							>
+								{row.getVisibleCells().map((cell) => (
+									<TableCell className="font-medium text-theme-text-primary" key={cell.id}>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</TableCell>
+								))}
+							</TableRow>
+						))
+					) : (
+						<TableRow>
+							<TableCell
+								colSpan={columns.length}
+								className="h-24 bg-theme-surface-primary p-9 text-center"
+							>
+								No results.
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		</div>
+	);
+}

src/components/Table/Table.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "./index";
+
+const rows = ["ID", "Name", "Age"];
+const values = [
+	["1", "John Doe", "25"],
+	["2", "Jane Doe", "24"],
+	["3", "John Smith", "26"],
+	["4", "Jane Smith", "27"]
+];
+
+const meta = {
+	title: "Elements/Table/Table",
+	component: Table,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[500px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	render() {
+		return (
+			<div className="overflow-hidden overflow-x-auto rounded-md border">
+				<Table>
+					<TableHeader className="bg-theme-surface-tertiary">
+						<TableRow>
+							{rows.map((rows, index) => {
+								return (
+									<TableHead className="text-theme-text-secondary" key={index}>
+										{rows}
+									</TableHead>
+								);
+							})}
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{values.map((value, index) => {
+							return (
+								<TableRow key={index}>
+									{value.map((val, i) => {
+										return (
+											<TableCell className="bg-theme-surface-primary" key={i}>
+												{val}
+											</TableCell>
+										);
+									})}
+								</TableRow>
+							);
+						})}
+					</TableBody>
+				</Table>
+			</div>
+		);
+	}
+};

src/components/Table/Table.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { cn } from "../../utilities";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
+		<div className="w-full overflow-auto">
+			<table ref={ref} className={cn("w-full text-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("bg-primary text-primary-foreground font-medium", className)}
+		{...props}
+	/>
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				className
+			)}
+			{...props}
+		/>
+	)
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn(
+			"h-8 px-4 py-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<td
+		ref={ref}
+		className={cn(
+			"h-9 px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className
+		)}
+		{...props}
+	/>
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+	<caption
+		ref={ref}
+		className={cn("text-muted-foreground mt-4 text-text-sm", className)}
+		{...props}
+	/>
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

src/components/Table/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./DataTable";

src/components/index.ts

@@ -5,3 +5,4 @@ export * from "./Box";
 export * from "./Avatar";
 export * from "./Skeleton";
 export * from "./Dropdown";
+export * from "./Table";