@siyahi/ui 0.0.0-stage → 0.1.0-next.3

package/dist/components/registry/niko-table/core/data-table-structure.js

@@ -0,0 +1,370 @@
+import { Skeleton } from "../../../ui/skeleton.js";
+import { cn } from "../../../../lib/utils.js";
+import { DataTableColumnHeaderRoot } from "../components/data-table-column-header.js";
+import { flashCellKey, useDataTable } from "./data-table-context.js";
+import { DataTableEmptyState } from "../components/data-table-empty-state.js";
+import { resolveGroupedRowsSlot } from "../components/data-table-grouped-rows.js";
+import { useResolvedRowContextMenuRenderer } from "../components/data-table-row-context-menu-slot.js";
+import { DataTableRowContextMenu } from "../components/data-table-row-context-menu.js";
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { resolveRowFromClick } from "../lib/row-click.js";
+import { getCommonPinningStyles } from "../lib/styles.js";
+import { GroupedBodyRow } from "./data-table-grouped-row.js";
+import { isGlobalFilterActive } from "../lib/filter-functions.js";
+import { DataTableColumnResizeHandle } from "../lib/column-resize-handle.js";
+import { createScrollHandler } from "../lib/create-scroll-handler.js";
+import { renderCellContent } from "../lib/render-cell-content.js";
+import { resolveColumnWidth, resolveFlexColumnIds } from "../lib/flex-columns.js";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-structure.tsx
+const DataTableHeader = React.memo(function DataTableHeader({ className, sticky = true }) {
+	const { table, headerMinWidths, setColumnResizePreview } = useDataTable();
+	const resizing = table?.options.enableColumnResizing ?? false;
+	const headerGroups = table?.getHeaderGroups() ?? [];
+	if (headerGroups.length === 0) return null;
+	const flexColumnIds = resolveFlexColumnIds(table);
+	const columnSizing = table.state.columnSizing;
+	return /* @__PURE__ */ jsx(TableHeader, {
+		className: cn(sticky && "sticky top-0 z-30 bg-background", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
+		children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+			const isFlex = flexColumnIds.has(header.column.id);
+			const headerStyle = {
+				width: resolveColumnWidth(header.column, {
+					resizing,
+					isFlex,
+					columnSizing,
+					headerMinWidths
+				}),
+				...getCommonPinningStyles(header.column, true)
+			};
+			return /* @__PURE__ */ jsxs(TableHead, {
+				"data-col-id": header.column.id,
+				style: headerStyle,
+				className: cn(header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),
+				children: [header.isPlaceholder ? null : /* @__PURE__ */ jsx(DataTableColumnHeaderRoot, {
+					column: header.column,
+					children: resizing && typeof header.column.columnDef.header === "string" ? /* @__PURE__ */ jsx("span", {
+						className: "inline-block max-w-full truncate",
+						children: header.column.columnDef.header
+					}) : flexRender(header.column.columnDef.header, header.getContext())
+				}), resizing && header.column.getCanResize() && /* @__PURE__ */ jsx(DataTableColumnResizeHandle, {
+					header,
+					isFlex,
+					setResizePreview: setColumnResizePreview
+				})]
+			}, header.id);
+		}) }, headerGroup.id))
+	});
+});
+DataTableHeader.displayName = "DataTableHeader";
+/** Fade-pulse animation applied to a flashing cell (keyframe in the provider). */
+const FLASH_ANIMATION = "niko-row-flash 1.2s ease-out";
+const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu }) {
+	const expandCell = isExpanded && expandColumnId ? row.getAllCells().find((c) => c.column.id === expandColumnId) : void 0;
+	const visibleCells = row.getVisibleCells();
+	const rowElement = /* @__PURE__ */ jsx(TableRow, {
+		"data-row-index": displayIndex,
+		"data-row-id": row.id,
+		"data-row-type": row.original?.rowType,
+		"data-parity": displayIndex % 2 === 0 ? "even" : "odd",
+		"data-expanded": isExpanded ? "true" : void 0,
+		"data-state": isSelected ? "selected" : void 0,
+		className: cn(isClickable && "cursor-pointer", "group data-[context-menu-open]:bg-muted/50"),
+		children: visibleCells.map((cell) => {
+			const flashing = isRowFlashing || flashingCellKeys.has(flashCellKey(row.id, cell.column.id));
+			const cellStyle = {
+				width: columnWidths.get(cell.column.id),
+				...getCommonPinningStyles(cell.column, false),
+				...flashing ? { animation: FLASH_ANIMATION } : {}
+			};
+			return /* @__PURE__ */ jsx(TableCell, {
+				"data-flash": flashing ? "true" : void 0,
+				"data-col-id": cell.column.id,
+				style: cellStyle,
+				className: cn(!cell.getIsGrouped() && "truncate", cell.column.getIsPinned() && "bg-background group-hover:bg-muted/50 group-data-[context-menu-open]:bg-muted/50 group-data-[state=selected]:bg-muted"),
+				children: renderCellContent(cell)
+			}, cell.id);
+		})
+	});
+	const menuItems = renderRowContextMenu?.(row.original);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [menuItems ? /* @__PURE__ */ jsx(DataTableRowContextMenu, {
+		row: row.original,
+		trigger: rowElement,
+		children: menuItems
+	}) : rowElement, expandCell && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: visibleCells.length,
+		className: "p-0",
+		children: expandCell.column.columnDef.meta?.expandedContent?.(row.original)
+	}) })] });
+});
+BodyRow.displayName = "BodyRow";
+function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold = 50, onRowClick, getRowMemoKey, renderRowContextMenu }) {
+	const { table, columns, isLoading, flashingRowIds, flashingCellKeys, registerRowScroller, headerMinWidths } = useDataTable();
+	const { rows } = table.getRowModel();
+	const containerRef = React.useRef(null);
+	React.useEffect(() => {
+		registerRowScroller((index, opts) => {
+			const row = (containerRef.current?.closest("[data-slot=\"table-container\"]"))?.querySelector(`[data-row-index="${index}"]`);
+			const block = opts?.align === void 0 || opts.align === "auto" ? "nearest" : opts.align;
+			row?.scrollIntoView({ block });
+		});
+		return () => registerRowScroller(null);
+	}, [registerRowScroller]);
+	React.useEffect(() => {
+		const container = containerRef.current?.closest("[data-slot=\"table-container\"]");
+		if (!container) return;
+		if (!onScroll && !onScrolledTop && !onScrolledBottom) return;
+		const handleScroll = createScrollHandler({
+			onScroll,
+			onScrolledTop,
+			onScrolledBottom,
+			scrollThreshold
+		});
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		return () => container.removeEventListener("scroll", handleScroll);
+	}, [
+		onScroll,
+		onScrolledTop,
+		onScrolledBottom,
+		scrollThreshold
+	]);
+	const handleBodyClick = React.useCallback((event) => {
+		if (!onRowClick) return;
+		const row = resolveRowFromClick(event.target, table);
+		if (!row) return;
+		onRowClick(row.original, event);
+	}, [onRowClick, table]);
+	const expandColumnId = React.useMemo(() => table.getAllColumns().find((col) => col.columnDef.meta?.expandedContent)?.id, [table, columns]);
+	const { columnVisibility, columnOrder, columnPinning, columnSizing } = table.state;
+	const resizing = table.options.enableColumnResizing ?? false;
+	const flexColumnIds = React.useMemo(() => resolveFlexColumnIds(table), [
+		table,
+		columnVisibility,
+		columnOrder,
+		columnPinning,
+		columnSizing,
+		resizing
+	]);
+	const columnWidths = React.useMemo(() => {
+		const widths = /* @__PURE__ */ new Map();
+		for (const col of table.getVisibleLeafColumns()) widths.set(col.id, resolveColumnWidth(col, {
+			resizing,
+			isFlex: flexColumnIds.has(col.id),
+			columnSizing,
+			headerMinWidths
+		}));
+		return widths;
+	}, [
+		table,
+		flexColumnIds,
+		columnSizing,
+		columnVisibility,
+		columnOrder,
+		headerMinWidths,
+		resizing
+	]);
+	const columnLayoutSignature = React.useMemo(() => table.getVisibleLeafColumns().map((c) => {
+		const pinned = c.getIsPinned();
+		const base = pinned ? `${c.id}:${pinned}` : c.id;
+		return resizing ? `${base}:${columnWidths.get(c.id) ?? "flex"}` : base;
+	}).join(","), [
+		table,
+		columns,
+		columnWidths,
+		resizing
+	]);
+	const isClickable = !!onRowClick;
+	const resolvedRenderRowContextMenu = useResolvedRowContextMenuRenderer(renderRowContextMenu, children);
+	const groupedRowsSlot = React.useMemo(() => resolveGroupedRowsSlot(children), [children]);
+	const tableStyleSnapshotRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const tableEl = containerRef.current?.closest("[data-slot=\"table\"]");
+		if (!tableEl) return;
+		const restore = () => {
+			const snap = tableStyleSnapshotRef.current;
+			if (!snap) return;
+			tableEl.style.tableLayout = snap.tableLayout;
+			tableEl.style.width = snap.width;
+			tableEl.style.minWidth = snap.minWidth;
+			tableStyleSnapshotRef.current = null;
+		};
+		if (!resizing) {
+			restore();
+			return;
+		}
+		if (!tableStyleSnapshotRef.current) tableStyleSnapshotRef.current = {
+			tableLayout: tableEl.style.tableLayout,
+			width: tableEl.style.width,
+			minWidth: tableEl.style.minWidth
+		};
+		const totalDesiredWidth = table.getVisibleLeafColumns().reduce((sum, col) => {
+			const width = columnWidths.get(col.id);
+			return sum + (typeof width === "number" ? width : col.getSize());
+		}, 0);
+		const hasFlex = flexColumnIds.size > 0;
+		tableEl.style.tableLayout = "fixed";
+		tableEl.style.width = hasFlex ? "100%" : `${totalDesiredWidth}px`;
+		tableEl.style.minWidth = `${totalDesiredWidth}px`;
+		return restore;
+	}, [
+		resizing,
+		table,
+		columnWidths,
+		flexColumnIds,
+		columnVisibility,
+		columnOrder,
+		columnPinning
+	]);
+	return /* @__PURE__ */ jsxs(TableBody, {
+		ref: containerRef,
+		className,
+		onClick: onRowClick ? handleBodyClick : void 0,
+		children: [!isLoading && rows?.length ? rows.map((row, displayIndex) => groupedRowsSlot && row.getIsGrouped() ? /* @__PURE__ */ jsx(GroupedBodyRow, {
+			row,
+			displayIndex,
+			isExpanded: row.getIsExpanded(),
+			columnWidths,
+			columnLayoutSignature,
+			slot: groupedRowsSlot
+		}, row.id) : /* @__PURE__ */ jsx(BodyRow, {
+			row,
+			displayIndex,
+			expandColumnId,
+			isClickable,
+			isExpanded: row.getIsExpanded(),
+			isSelected: row.getIsSelected(),
+			columnWidths,
+			columnLayoutSignature,
+			rowMemoKey: getRowMemoKey ? getRowMemoKey(row.original) : "",
+			isRowFlashing: flashingRowIds.has(row.id),
+			flashingCellKeys,
+			renderRowContextMenu: resolvedRenderRowContextMenu
+		}, row.id)) : null, children]
+	});
+}
+DataTableBody.displayName = "DataTableBody";
+/**
+* Empty state component for data tables.
+* Use composition pattern with DataTableEmpty* components for full customization.
+*
+* @example
+* <DataTableEmptyBody>
+*   <DataTableEmptyIcon>
+*     <PackageOpen className="size-12" />
+*   </DataTableEmptyIcon>
+*   <DataTableEmptyMessage>
+*     <DataTableEmptyTitle>No products found</DataTableEmptyTitle>
+*     <DataTableEmptyDescription>
+*       Get started by adding your first product
+*     </DataTableEmptyDescription>
+*   </DataTableEmptyMessage>
+*   <DataTableEmptyFilteredMessage>
+*     No matches found
+*   </DataTableEmptyFilteredMessage>
+*   <DataTableEmptyActions>
+*     <Button onClick={handleAdd}>Add Product</Button>
+*   </DataTableEmptyActions>
+* </DataTableEmptyBody>
+*/
+function DataTableEmptyBody({ children, colSpan, className }) {
+	const { table, columns, isLoading } = useDataTable();
+	const tableState = table.state;
+	const isFiltered = React.useMemo(() => isGlobalFilterActive(tableState.globalFilter) || tableState.columnFilters && tableState.columnFilters.length > 0, [tableState.globalFilter, tableState.columnFilters]);
+	const rowCount = table.getRowModel().rows.length;
+	if (isLoading || rowCount > 0) return null;
+	const visibleCount = table.getVisibleLeafColumns().length;
+	return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: colSpan ?? (visibleCount || columns.length),
+		className,
+		children: /* @__PURE__ */ jsx(DataTableEmptyState, {
+			isFiltered,
+			children
+		})
+	}) });
+}
+DataTableEmptyBody.displayName = "DataTableEmptyBody";
+function DataTableSkeleton({ children, colSpan, rows = 5, className, cellClassName, skeletonClassName }) {
+	const { table, columns, isLoading } = useDataTable();
+	if (!isLoading) return null;
+	const visibleColumns = table.getVisibleLeafColumns();
+	const numColumns = colSpan ?? (visibleColumns.length || columns.length);
+	if (children) return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: numColumns,
+		className: cn("h-24 text-center", className),
+		children
+	}) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: visibleColumns.map((column, colIndex) => {
+		const size = column.columnDef.size;
+		const cellStyle = size ? { width: `${size}px` } : void 0;
+		return /* @__PURE__ */ jsx(TableCell, {
+			className: cellClassName,
+			style: cellStyle,
+			children: /* @__PURE__ */ jsx(Skeleton, { className: cn("h-4 w-full", skeletonClassName) })
+		}, colIndex);
+	}) }, rowIndex)) });
+}
+DataTableSkeleton.displayName = "DataTableSkeleton";
+function DataTableLoading({ children, colSpan, className }) {
+	const { table, columns, isLoading } = useDataTable();
+	if (!isLoading) return null;
+	const visibleCount = table.getVisibleLeafColumns().length;
+	return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: colSpan ?? (visibleCount || columns.length),
+		className: className ?? "h-24 text-center",
+		children: children ?? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading..."
+			})]
+		})
+	}) });
+}
+DataTableLoading.displayName = "DataTableLoading";
+/**
+* Composable "loading more" row for infinite-scroll tables. Renders
+* a spinner + label row at the end of the body when `isFetching` is
+* true, and nothing when false — designed to be dropped as a child
+* of `DataTableBody` alongside `DataTableSkeleton` and
+* `DataTableEmptyBody`.
+*
+* Mirror of `DataTableVirtualizedLoadingMore` for non-virtualized
+* tables — same API, same styling, same self-gating behavior.
+*
+* @example
+* const query = api.thing.list.useInfiniteQuery(...);
+* <DataTableBody
+*   onScrolledBottom={() => {
+*     if (query.hasNextPage && !query.isFetchingNextPage) {
+*       void query.fetchNextPage();
+*     }
+*   }}
+* >
+*   <DataTableSkeleton rows={5} />
+*   <DataTableEmptyBody>No results</DataTableEmptyBody>
+*   <DataTableLoadingMore isFetching={query.isFetchingNextPage}>
+*     Loading more things…
+*   </DataTableLoadingMore>
+* </DataTableBody>
+*/
+function DataTableLoadingMore({ isFetching, children, colSpan, className }) {
+	const { table, columns } = useDataTable();
+	if (!isFetching) return null;
+	const visibleCount = table.getVisibleLeafColumns().length;
+	return /* @__PURE__ */ jsx(TableRow, {
+		"data-slot": "datatable-loading-more-row",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: colSpan ?? (visibleCount || columns.length),
+			className: cn("text-center text-xs text-muted-foreground", className),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center justify-center gap-2 py-3",
+				children: [/* @__PURE__ */ jsx("span", { className: "inline-block size-3.5 animate-spin rounded-full border-2 border-muted-foreground/60 border-t-transparent" }), children ?? "Loading more…"]
+			})
+		})
+	});
+}
+DataTableLoadingMore.displayName = "DataTableLoadingMore";
+//#endregion
+export { DataTableBody, DataTableEmptyBody, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableSkeleton };

package/dist/components/registry/niko-table/core/data-table.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+//#region src/components/registry/niko-table/core/data-table.d.ts
+export interface DataTableContainerProps {
+  children: React.ReactNode;
+  /**
+   * Additional CSS classes for the container.
+   * Arbitrary height values (e.g., h-[600px], max-h-[400px]) are automatically extracted
+   * and applied as inline styles to ensure scroll event callbacks work reliably.
+   * For other height utilities, use the height/maxHeight props directly.
+   */
+  className?: string;
+  /**
+   * Sets the height of the table container.
+   * When provided, enables vertical scrolling and allows DataTableBody/DataTableVirtualizedBody
+   * to use onScroll, onScrolledTop, and onScrolledBottom callbacks.
+   * Takes precedence over height utilities in className.
+   */
+  height?: number | string;
+  /**
+   * Sets the maximum height of the table container.
+   * Defaults to the height value if not specified.
+   * Takes precedence over max-height utilities in className.
+   */
+  maxHeight?: number | string;
+}
+export declare function DataTable({ children, className, height, maxHeight }: DataTableContainerProps): React.JSX.Element;
+export declare namespace DataTable {
+  var displayName: string;
+}
+//#endregion

package/dist/components/registry/niko-table/core/data-table.js

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "../../../../lib/utils.js";
+import { useColumnResizeInfo, useDataTable } from "./data-table-context.js";
+import { TableComponent } from "../ui/table.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/core/data-table.tsx
+/**
+* niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
+*
+* Before reporting anything: please check the changelog first.
+*  - In-repo: ./CHANGELOG.md
+*  - Docs site: https://niko-table.com/changelog
+*
+* Found a bug or have a fix? Open an issue or PR on GitHub so other
+* users (and future LLMs reading this code) benefit:
+* https://github.com/Semkoo/niko-table-registry
+*/
+/**
+* Extracts height from Tailwind arbitrary values (e.g., h-[600px], max-h-[400px]).
+* Converts them to inline styles to ensure scroll events work reliably.
+* For other height utilities, use the height/maxHeight props directly.
+*/
+function parseHeightFromClassName(className) {
+	if (!className) return {
+		height: void 0,
+		maxHeight: void 0,
+		safeClassName: className
+	};
+	const classes = className.split(/\s+/);
+	let height;
+	let maxHeight;
+	const remainingClasses = [];
+	for (const cls of classes) {
+		const heightMatch = cls.match(/^h-\[([^\]]+)\]$/);
+		const maxHeightMatch = cls.match(/^max-h-\[([^\]]+)\]$/);
+		if (heightMatch) height = heightMatch[1];
+		else if (maxHeightMatch) maxHeight = maxHeightMatch[1];
+		else remainingClasses.push(cls);
+	}
+	return {
+		height,
+		maxHeight,
+		safeClassName: remainingClasses.join(" ")
+	};
+}
+/**
+* DataTable container component that wraps the table and provides scrolling behavior.
+*
+* @example
+* Without height - table grows with content, no scroll
+* <DataTable>
+*   <DataTableHeader />
+*   <DataTableBody />
+* </DataTable>
+*
+* @example
+* With height prop - enables scrolling and scroll event callbacks
+* <DataTable height={600}>
+*   <DataTableHeader />
+*   <DataTableBody
+*     onScroll={(e) => console.log(`Scrolled ${e.percentage}%`)}
+*     onScrolledBottom={() => console.log('Load more data')}
+*   />
+* </DataTable>
+*
+* @example
+* With arbitrary height in className - automatically extracted and applied as inline style
+* <DataTable className="h-[600px]">
+*   <DataTableBody onScroll={...} />
+* </DataTable>
+*
+* @example
+* Prefer using height prop for better type safety and clarity
+* <DataTable height="600px" className="rounded-lg">
+*   <DataTableBody onScroll={...} />
+* </DataTable>
+*/
+/**
+* A single vertical guide line that follows the cursor while a column is being
+* resized. Resizing runs in `onEnd` mode, so the columns themselves don't move
+* until the drag ends (that's what keeps heavy tables smooth); this line gives
+* the live "where the edge will land" feedback in the meantime.
+*
+* It subscribes to the dedicated resize-info context, so it — and nothing else
+* in the table — re-renders per pointer move. Positioned in the scroll
+* container's content space so it tracks correctly through horizontal scroll.
+*/
+function ColumnResizePreviewLine() {
+	const { resizingColumnId, deltaOffset } = useColumnResizeInfo();
+	const { scrollContainer } = useDataTable();
+	if (!resizingColumnId || !scrollContainer) return null;
+	const escapedId = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(resizingColumnId) : resizingColumnId;
+	const cell = scrollContainer.querySelector(`thead [data-col-id="${escapedId}"]`);
+	if (!cell) return null;
+	const containerRect = scrollContainer.getBoundingClientRect();
+	const left = cell.getBoundingClientRect().right - containerRect.left + scrollContainer.scrollLeft + deltaOffset;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-slot": "column-resize-preview",
+		className: "bg-primary pointer-events-none absolute top-0 z-40 w-px",
+		style: {
+			left,
+			height: scrollContainer.scrollHeight
+		}
+	});
+}
+function DataTable({ children, className, height, maxHeight }) {
+	const parsed = React.useMemo(() => parseHeightFromClassName(className), [className]);
+	const finalHeight = height ?? parsed.height;
+	const finalMaxHeight = maxHeight ?? parsed.maxHeight ?? finalHeight;
+	const { registerScrollContainer } = useDataTable();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: registerScrollContainer,
+		"data-slot": "table-container",
+		className: cn("relative w-full overflow-auto rounded-lg border", "[&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40", "hover:[&::-webkit-scrollbar-thumb]:bg-border", "[&::-webkit-scrollbar-thumb:hover]:bg-border/80!", "scrollbar-thin scrollbar-thumb-border/40 scrollbar-track-transparent", "hover:scrollbar-thumb-border", parsed.safeClassName),
+		style: {
+			height: finalHeight,
+			maxHeight: finalMaxHeight
+		},
+		children: [/* @__PURE__ */ jsx(TableComponent, { children }), /* @__PURE__ */ jsx(ColumnResizePreviewLine, {})]
+	});
+}
+DataTable.displayName = "DataTable";
+//#endregion
+export { DataTable };

package/dist/components/registry/niko-table/filters/table-column-actions.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+//#region src/components/registry/niko-table/filters/table-column-actions.d.ts
+export interface TableColumnActionsProps {
+  children: React.ReactNode;
+  className?: string;
+  /**
+   * Optional label shown at the top of the dropdown.
+   * @default "Column Actions"
+   */
+  label?: string;
+  /**
+   * Whether to show a visual indicator when actions are active.
+   */
+  isActive?: boolean;
+  /**
+   * Custom trigger element. If not provided, uses a MoreVertical icon button.
+   */
+  trigger?: React.ReactElement;
+  /**
+   * Alignment of the dropdown content.
+   * @default "end"
+   */
+  align?: "start" | "center" | "end";
+}
+/**
+ * A simple dropdown container for composing column actions.
+ *
+ * Use with `*Options` components to compose actions in a single dropdown:
+ *
+ * @example
+ * ```tsx
+ * <TableColumnActions>
+ *   <TableColumnSortOptions />
+ *   <TableColumnPinOptions />
+ *   <TableColumnHideOptions />
+ * </TableColumnActions>
+ * ```
+ *
+ * For standalone dropdowns, use the `*Menu` variants instead:
+ * ```tsx
+ * <TableColumnSortMenu />
+ * <TableColumnPin />
+ * ```
+ */
+export declare function TableColumnActions({ children, className, label, isActive, trigger, align }: TableColumnActionsProps): React.JSX.Element;
+export declare namespace TableColumnActions {
+  var displayName: string;
+}
+//#endregion

package/dist/components/registry/niko-table/filters/table-column-actions.js

@@ -0,0 +1,48 @@
+import { Button } from "../../../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
+import { cn } from "../../../../lib/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreVertical } from "lucide-react";
+//#region src/components/registry/niko-table/filters/table-column-actions.tsx
+/**
+* A simple dropdown container for composing column actions.
+*
+* Use with `*Options` components to compose actions in a single dropdown:
+*
+* @example
+* ```tsx
+* <TableColumnActions>
+*   <TableColumnSortOptions />
+*   <TableColumnPinOptions />
+*   <TableColumnHideOptions />
+* </TableColumnActions>
+* ```
+*
+* For standalone dropdowns, use the `*Menu` variants instead:
+* ```tsx
+* <TableColumnSortMenu />
+* <TableColumnPin />
+* ```
+*/
+function TableColumnActions({ children, className, label = "Column Actions", isActive = false, trigger, align = "end" }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger ?? /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "icon",
+		className: cn("size-7 transition-opacity group-hover:opacity-100 dark:text-muted-foreground", isActive ? "text-primary opacity-100" : "opacity-0", className),
+		children: [/* @__PURE__ */ jsx(MoreVertical, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	}) }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align,
+		className: "w-48",
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+			className: "text-xs font-normal text-muted-foreground",
+			children: label
+		}), children]
+	})] });
+}
+TableColumnActions.displayName = "TableColumnActions";
+//#endregion
+export { TableColumnActions };

package/dist/components/registry/niko-table/filters/table-column-sort.d.ts

@@ -0,0 +1,51 @@
+import { DataTableColumn, DataTableInstance } from "../types/index.js";
+import { SortIconVariant } from "../config/data-table.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/filters/table-column-sort.d.ts
+/**
+ * Sort options menu items for composition inside TableColumnActions.
+ *
+ * @example
+ * ```tsx
+ * <TableColumnActions>
+ *   <TableColumnSortOptions column={column} />
+ * </TableColumnActions>
+ * ```
+ */
+export declare function TableColumnSortOptions<TData extends RowData, TValue>({ column, table: propTable, variant: propVariant, withSeparator }: {
+  column: DataTableColumn<TData, TValue>;
+  table?: DataTableInstance<TData>;
+  variant?: SortIconVariant;
+  /** Whether to render a separator before the options. @default true */
+  withSeparator?: boolean;
+}): React.JSX.Element;
+export declare namespace TableColumnSortOptions {
+  var displayName: string;
+}
+/**
+ * Standalone dropdown menu for sorting.
+ *
+ * For composition inside TableColumnActions, use TableColumnSortOptions instead.
+ *
+ * @example
+ * ```tsx
+ * // Standalone
+ * <TableColumnSortMenu column={column} table={table} />
+ *
+ * // Composed
+ * <TableColumnActions>
+ *   <TableColumnSortOptions column={column} />
+ * </TableColumnActions>
+ * ```
+ */
+export declare function TableColumnSortMenu<TData extends RowData, TValue>({ column, table: propTable, variant: propVariant, className }: {
+  column: DataTableColumn<TData, TValue>;
+  table?: DataTableInstance<TData>;
+  variant?: SortIconVariant;
+  className?: string;
+}): React.JSX.Element | null;
+export declare namespace TableColumnSortMenu {
+  var displayName: string;
+}
+//#endregion