@actabldesign/bellhop-react 0.0.11 → 0.0.12

package/dist/components/stencil-generated/index.js

@@ -0,0 +1,6 @@
+/**
+ * Auto-generated React wrapper components
+ *
+ * This file exports all React wrapper components generated by @stencil/react-output-target.
+ */
+export * from './components';

package/dist/components/table/DataTable.js

@@ -0,0 +1,514 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BhDataTable - Dynamic Table with TanStack Table
+ *
+ * A composable data table component that combines Bellhop table primitives
+ * with TanStack Table for sorting, filtering, pagination, selection,
+ * expansion, grouping, and editing.
+ * Uses existing Bellhop components where possible.
+ */
+import React, { useState, useMemo, useRef, useEffect, useCallback, } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel, flexRender, } from '@tanstack/react-table';
+import { Table, TableWrapper, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, TableEmpty, TableActionBar, TablePagination, } from './index';
+// Import existing Bellhop components
+import { BhButtonIcon, BhInputText } from '../stencil-generated';
+function TableCheckbox({ checked, indeterminate = false, disabled = false, onChange, 'aria-label': ariaLabel, }) {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs("label", { className: "bh-table-checkbox", children: [_jsx("input", { ref: inputRef, type: "checkbox", checked: checked, disabled: disabled, onChange: onChange, "aria-label": ariaLabel, className: "bh-table-checkbox__input" }), _jsxs("span", { className: `bh-table-checkbox__box ${checked || indeterminate ? 'bh-table-checkbox__box--checked' : ''} ${disabled ? 'bh-table-checkbox__box--disabled' : ''}`, children: [checked && !indeterminate && (_jsx("span", { className: "material-symbols-outlined bh-table-checkbox__icon", children: "check" })), indeterminate && (_jsx("span", { className: "material-symbols-outlined bh-table-checkbox__icon", children: "remove" }))] })] }));
+}
+// =============================================================================
+// Checkbox Column Helper
+// =============================================================================
+export function createSelectColumn() {
+    return {
+        id: 'select',
+        header: ({ table }) => (_jsx(TableCheckbox, { checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onChange: () => table.toggleAllPageRowsSelected(), "aria-label": "Select all rows" })),
+        cell: ({ row }) => (_jsx(TableCheckbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: () => row.toggleSelected(), "aria-label": "Select row" })),
+        size: 40,
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGrouping: false,
+    };
+}
+// =============================================================================
+// Expand Column Helper
+// =============================================================================
+export function createExpandColumn() {
+    return {
+        id: 'expand',
+        header: () => null,
+        cell: ({ row }) => row.getCanExpand() ? (_jsx(BhButtonIcon, { iconName: row.getIsExpanded() ? 'expand_more' : 'chevron_right', size: "sm", hierarchy: "quaternary", onBhClick: () => row.toggleExpanded(), "aria-label": row.getIsExpanded() ? 'Collapse row' : 'Expand row' })) : null,
+        size: 32,
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGrouping: false,
+    };
+}
+// =============================================================================
+// Edit Actions Column Helper
+// =============================================================================
+export function createEditActionsColumn(onEdit, onSave, onCancel, isEditing) {
+    return {
+        id: 'edit-actions',
+        header: () => null,
+        cell: ({ row }) => {
+            const rowId = row.id;
+            const editing = isEditing(rowId);
+            if (editing) {
+                return (_jsxs("div", { className: "bh-td--edit-actions", children: [_jsx(BhButtonIcon, { iconName: "check", size: "sm", hierarchy: "quaternary", onBhClick: () => onSave(), "aria-label": "Save changes" }), _jsx(BhButtonIcon, { iconName: "close", size: "sm", hierarchy: "quaternary", onBhClick: () => onCancel(), "aria-label": "Cancel editing" })] }));
+            }
+            return (_jsx(BhButtonIcon, { iconName: "edit", size: "sm", hierarchy: "quaternary", onBhClick: () => onEdit(rowId), "aria-label": "Edit row" }));
+        },
+        size: 80,
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGrouping: false,
+        meta: {
+            editable: false,
+        },
+    };
+}
+// =============================================================================
+// DataTable Component
+// =============================================================================
+export function DataTable({ data, columns, size = 'default', variant = 'default', enableRowSelection = false, enableMultiRowSelection = true, enableSorting = true, enableFiltering = false, enablePagination = true, enableExpanding = false, pageSize = 10, pageSizeOptions = [10, 25, 50, 100], stickyHeader = false, rounded = false, hoverable = true, loading = false, emptyTitle = 'No data', emptyDescription = 'There are no records to display.', getRowId, getSubRows, renderExpandedRow, onSelectionChange, onSortingChange, onRowClick, actionBarLeft, actionBarRight, bulkActions, maxHeight, className, 
+// Grouping props
+enableGrouping = false, groupBy = [], onGroupingChange, 
+// Editing props
+enableEditing = false, editMode = 'cell', showEditActions = true, onEditSave, onEditCancel, onCellChange, }) {
+    // ==========================================================================
+    // State
+    // ==========================================================================
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [rowSelection, setRowSelection] = useState({});
+    const [expanded, setExpanded] = useState({});
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize,
+    });
+    const [globalFilter, setGlobalFilter] = useState('');
+    // Grouping state
+    const [grouping, setGrouping] = useState(groupBy);
+    // Editing state
+    const [editState, setEditState] = useState({
+        rowId: null,
+        columnId: null,
+    });
+    const [editingValues, setEditingValues] = useState({});
+    // Sync groupBy prop with internal state
+    useEffect(() => {
+        setGrouping(groupBy);
+    }, [groupBy]);
+    // Track previous rowSelection to detect changes for onSelectionChange callback
+    const prevRowSelectionRef = useRef(rowSelection);
+    // Compute column visibility to hide grouping columns when grouping is enabled
+    const columnVisibility = useMemo(() => {
+        if (!enableGrouping || grouping.length === 0) {
+            return {};
+        }
+        // Hide all columns that are being used for grouping
+        const visibility = {};
+        grouping.forEach((columnId) => {
+            visibility[columnId] = false;
+        });
+        return visibility;
+    }, [enableGrouping, grouping]);
+    // ==========================================================================
+    // Editing Handlers
+    // ==========================================================================
+    const isEditing = useCallback((rowId, columnId) => {
+        if (editState.rowId !== rowId)
+            return false;
+        if (editMode === 'cell') {
+            return columnId ? editState.columnId === columnId : false;
+        }
+        return true; // Row mode - entire row is editing
+    }, [editState, editMode]);
+    const isRowEditing = useCallback((rowId) => {
+        return editState.rowId === rowId;
+    }, [editState.rowId]);
+    const startEditing = useCallback((rowId, columnId) => {
+        // Initialize editing values from current row
+        const initialValues = {};
+        columns.forEach((col) => {
+            const colId = 'accessorKey' in col
+                ? String(col.accessorKey)
+                : 'id' in col
+                    ? col.id
+                    : '';
+            if (colId && col.meta?.editable !== false) {
+                // Find row data
+                const rowIndex = data.findIndex((_, i) => (getRowId ? getRowId(data[i], i) : String(i)) === rowId);
+                if (rowIndex !== -1) {
+                    const row = data[rowIndex];
+                    initialValues[colId] = row[colId];
+                }
+            }
+        });
+        setEditingValues(initialValues);
+        setEditState({
+            rowId,
+            columnId: editMode === 'cell' ? columnId || null : null,
+        });
+    }, [columns, data, editMode, getRowId]);
+    const cancelEditing = useCallback(() => {
+        if (!editState.rowId)
+            return;
+        const rowIndex = data.findIndex((_, i) => (getRowId ? getRowId(data[i], i) : String(i)) === editState.rowId);
+        if (rowIndex !== -1) {
+            onEditCancel?.(editState.rowId, data[rowIndex]);
+        }
+        setEditState({ rowId: null, columnId: null });
+        setEditingValues({});
+    }, [editState.rowId, data, getRowId, onEditCancel]);
+    const saveEditing = useCallback(() => {
+        if (!editState.rowId)
+            return;
+        const rowIndex = data.findIndex((_, i) => (getRowId ? getRowId(data[i], i) : String(i)) === editState.rowId);
+        if (rowIndex === -1)
+            return;
+        const originalRow = data[rowIndex];
+        const changes = {};
+        // Determine what changed
+        Object.entries(editingValues).forEach(([columnId, newValue]) => {
+            const originalValue = originalRow[columnId];
+            if (originalValue !== newValue) {
+                changes[columnId] = newValue;
+            }
+        });
+        if (Object.keys(changes).length > 0) {
+            onEditSave?.({
+                rowId: editState.rowId,
+                rowIndex,
+                originalRow,
+                changes,
+            });
+        }
+        setEditState({ rowId: null, columnId: null });
+        setEditingValues({});
+    }, [editState.rowId, editingValues, data, getRowId, onEditSave]);
+    const handleEditValueChange = useCallback((columnId, newValue) => {
+        const oldValue = editingValues[columnId];
+        setEditingValues((prev) => ({
+            ...prev,
+            [columnId]: newValue,
+        }));
+        if (editState.rowId) {
+            onCellChange?.(editState.rowId, columnId, oldValue, newValue);
+        }
+    }, [editingValues, editState.rowId, onCellChange]);
+    const handleEditKeyDown = useCallback((e, columnId) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            saveEditing();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelEditing();
+        }
+        else if (e.key === 'Tab' && editMode === 'cell') {
+            e.preventDefault();
+            // Move to next editable cell
+            const editableColumns = columns.filter((col) => col.meta?.editable !== false);
+            const currentIndex = editableColumns.findIndex((c) => {
+                const colId = 'accessorKey' in c
+                    ? String(c.accessorKey)
+                    : 'id' in c
+                        ? c.id
+                        : '';
+                return colId === columnId;
+            });
+            if (currentIndex !== -1) {
+                const nextIndex = e.shiftKey ? currentIndex - 1 : currentIndex + 1;
+                if (nextIndex >= 0 && nextIndex < editableColumns.length) {
+                    const nextCol = editableColumns[nextIndex];
+                    const nextColId = 'accessorKey' in nextCol
+                        ? String(nextCol.accessorKey)
+                        : 'id' in nextCol
+                            ? nextCol.id
+                            : '';
+                    setEditState((prev) => ({
+                        ...prev,
+                        columnId: nextColId || null,
+                    }));
+                }
+                else {
+                    saveEditing();
+                }
+            }
+        }
+    }, [editMode, columns, saveEditing, cancelEditing]);
+    // ==========================================================================
+    // Build columns with selection/expansion/editing if enabled
+    // ==========================================================================
+    const tableColumns = useMemo(() => {
+        const cols = [];
+        if (enableExpanding && !enableGrouping) {
+            cols.push(createExpandColumn());
+        }
+        if (enableRowSelection) {
+            cols.push(createSelectColumn());
+        }
+        cols.push(...columns);
+        if (enableEditing && editMode === 'row' && showEditActions) {
+            cols.push(createEditActionsColumn(startEditing, saveEditing, cancelEditing, isRowEditing));
+        }
+        return cols;
+    }, [
+        columns,
+        enableRowSelection,
+        enableExpanding,
+        enableGrouping,
+        enableEditing,
+        editMode,
+        showEditActions,
+        startEditing,
+        saveEditing,
+        cancelEditing,
+        isRowEditing,
+    ]);
+    // ==========================================================================
+    // Create table instance
+    // ==========================================================================
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        state: {
+            sorting,
+            columnFilters,
+            rowSelection,
+            expanded,
+            pagination,
+            globalFilter,
+            grouping,
+            columnVisibility,
+        },
+        getRowId,
+        getSubRows,
+        getRowCanExpand: enableExpanding && renderExpandedRow ? () => true : undefined,
+        enableRowSelection: enableRowSelection
+            ? enableMultiRowSelection
+                ? true
+                : (row) => !Object.keys(rowSelection).length || rowSelection[row.id]
+            : false,
+        enableMultiRowSelection,
+        enableSorting,
+        enableFilters: enableFiltering,
+        enableExpanding: enableExpanding || enableGrouping,
+        enableGrouping,
+        // Prevent TanStack Table from auto-resetting expanded state when data/columns change
+        // This fixes the issue where grouped rows collapse when selecting items
+        autoResetExpanded: false,
+        onSortingChange: (updater) => {
+            const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+            setSorting(newSorting);
+            onSortingChange?.(newSorting);
+        },
+        onColumnFiltersChange: setColumnFilters,
+        onRowSelectionChange: (updater) => {
+            const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
+            setRowSelection(newSelection);
+        },
+        onExpandedChange: setExpanded,
+        onPaginationChange: setPagination,
+        onGlobalFilterChange: setGlobalFilter,
+        onGroupingChange: (updater) => {
+            const newGrouping = typeof updater === 'function' ? updater(grouping) : updater;
+            setGrouping(newGrouping);
+            onGroupingChange?.(newGrouping);
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+        getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
+        // Disable pagination when grouping is enabled
+        getPaginationRowModel: enablePagination && !enableGrouping ? getPaginationRowModel() : undefined,
+        getExpandedRowModel: enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+        getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+    });
+    // Handle selection change callback after table is stable (via useEffect)
+    // This prevents issues with grouped rows collapsing when selecting items
+    // IMPORTANT: We use a ref for the table to avoid the effect re-running when table changes
+    // because table is recreated on every render, which would cause cascading state updates
+    const tableRef = useRef(table);
+    tableRef.current = table;
+    useEffect(() => {
+        if (!onSelectionChange)
+            return;
+        if (prevRowSelectionRef.current === rowSelection)
+            return;
+        prevRowSelectionRef.current = rowSelection;
+        // Use tableRef.current to get the latest table without adding it as a dependency
+        const currentTable = tableRef.current;
+        const selectedRows = Object.keys(rowSelection)
+            .filter((key) => rowSelection[key])
+            .map((key) => {
+            const row = currentTable.getRow(key);
+            return row?.original;
+        })
+            .filter(Boolean);
+        onSelectionChange(selectedRows);
+    }, [rowSelection, onSelectionChange]);
+    // ==========================================================================
+    // Render Helpers
+    // ==========================================================================
+    const renderEditInput = (column, cell) => {
+        const columnId = 'accessorKey' in column.columnDef
+            ? String(column.columnDef.accessorKey)
+            : column.id;
+        const currentValue = editingValues[columnId] ?? cell.getValue();
+        const editType = column.columnDef.meta?.editType || 'text';
+        const editOptions = column.columnDef.meta?.editOptions;
+        // Select type
+        if (editType === 'select' && editOptions) {
+            return (_jsx("select", { className: "bh-edit-select", value: String(currentValue ?? ''), onChange: (e) => handleEditValueChange(columnId, e.target.value), onKeyDown: (e) => handleEditKeyDown(e, columnId), autoFocus: true, children: editOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }));
+        }
+        // Text/Number/Date input
+        return (_jsx("input", { type: editType === 'number' ? 'number' : editType === 'date' ? 'date' : 'text', className: "bh-edit-input", value: currentValue != null ? String(currentValue) : '', onChange: (e) => {
+                const newValue = editType === 'number' ? Number(e.target.value) : e.target.value;
+                handleEditValueChange(columnId, newValue);
+            }, onKeyDown: (e) => handleEditKeyDown(e, columnId), autoFocus: true }));
+    };
+    const renderGroupRow = (row) => {
+        const groupingColumnId = row.groupingColumnId;
+        const groupValue = row.groupingValue;
+        const isExpanded = row.getIsExpanded();
+        const leafRows = row.getLeafRows();
+        const depth = row.depth;
+        return (_jsx(TableRow, { className: "bh-tr--group", onClick: () => row.toggleExpanded(), children: _jsx(TableCell, { colSpan: tableColumns.length, className: "bh-td--group-label", children: _jsxs("div", { className: "bh-group-content", style: { paddingLeft: `${depth * 24}px` }, children: [_jsx(BhButtonIcon, { iconName: isExpanded ? 'expand_more' : 'chevron_right', size: "sm", hierarchy: "quaternary", "aria-label": isExpanded ? 'Collapse group' : 'Expand group' }), _jsxs("span", { className: "bh-group-label__text", children: [_jsxs("span", { className: "bh-group-label__column", children: [groupingColumnId, ": "] }), _jsx("span", { className: "bh-group-label__value", children: String(groupValue) })] }), _jsxs("span", { className: "bh-group-label__count", children: ["(", leafRows.length, " ", leafRows.length === 1 ? 'item' : 'items', ")"] })] }) }) }, row.id));
+    };
+    const renderDataRow = (row) => {
+        const rowId = row.id;
+        const rowIsEditing = isRowEditing(rowId);
+        return (_jsxs(React.Fragment, { children: [_jsx(TableRow, { selected: row.getIsSelected(), clickable: !!onRowClick && !rowIsEditing, expandable: row.getCanExpand(), expanded: row.getIsExpanded(), className: rowIsEditing ? 'bh-tr--editing' : undefined, onClick: onRowClick && !rowIsEditing
+                        ? () => onRowClick(row.original)
+                        : undefined, children: row.getVisibleCells().map((cell) => {
+                        const column = cell.column;
+                        const isCheckbox = column.id === 'select';
+                        const isExpand = column.id === 'expand';
+                        const isEditActions = column.id === 'edit-actions';
+                        const columnId = 'accessorKey' in column.columnDef
+                            ? String(column.columnDef.accessorKey)
+                            : column.id;
+                        const canEdit = enableEditing && column.columnDef.meta?.editable !== false;
+                        const isCellEditing = isEditing(rowId, columnId);
+                        // For grouped cells, skip rendering aggregated/placeholder cells
+                        if (cell.getIsGrouped()) {
+                            return null;
+                        }
+                        if (cell.getIsAggregated()) {
+                            return (_jsx(TableCell, { children: flexRender(column.columnDef.aggregatedCell ?? column.columnDef.cell, cell.getContext()) }, cell.id));
+                        }
+                        if (cell.getIsPlaceholder()) {
+                            return _jsx(TableCell, {}, cell.id);
+                        }
+                        return (_jsx(TableCell, { checkbox: isCheckbox, expandTrigger: isExpand, shrink: isCheckbox || isExpand || isEditActions, className: canEdit && !isCellEditing && !isCheckbox && !isExpand && !isEditActions
+                                ? 'bh-td--editable'
+                                : isCellEditing
+                                    ? 'bh-td--editing'
+                                    : undefined, onClick: isCheckbox || isExpand || isEditActions
+                                ? (e) => e.stopPropagation()
+                                : undefined, onDoubleClick: canEdit &&
+                                editMode === 'cell' &&
+                                !isCellEditing &&
+                                !isCheckbox &&
+                                !isExpand &&
+                                !isEditActions
+                                ? () => startEditing(rowId, columnId)
+                                : undefined, style: {
+                                width: cell.column.getSize() !== 150
+                                    ? cell.column.getSize()
+                                    : undefined,
+                            }, children: isCellEditing || (rowIsEditing && canEdit && editMode === 'row') ? (renderEditInput(column, cell)) : (flexRender(column.columnDef.cell, cell.getContext())) }, cell.id));
+                    }) }), row.getIsExpanded() && renderExpandedRow && !row.getIsGrouped() && (_jsx(TableRow, { expansion: true, children: _jsx(TableCell, { expansion: true, colSpan: tableColumns.length, children: renderExpandedRow(row) }) }))] }, row.id));
+    };
+    // ==========================================================================
+    // Render
+    // ==========================================================================
+    const selectedCount = Object.keys(rowSelection).filter((key) => rowSelection[key]).length;
+    const showActionBar = actionBarLeft || actionBarRight || (selectedCount > 0 && bulkActions);
+    return (_jsxs("div", { className: className, children: [showActionBar && (_jsx(TableActionBar, { selectionCount: selectedCount, left: selectedCount > 0 ? bulkActions : actionBarLeft, right: actionBarRight })), _jsx(TableWrapper, { maxHeight: maxHeight, scrollY: !!maxHeight, children: _jsxs(Table, { size: size, variant: variant, rounded: rounded, hoverable: hoverable, loading: loading, children: [_jsxs(TableHead, { sticky: stickyHeader, children: [table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                        const isSortable = header.column.getCanSort();
+                                        const sortDirection = header.column.getIsSorted();
+                                        const isCheckbox = header.id === 'select';
+                                        const isExpand = header.id === 'expand';
+                                        const isEditActions = header.id === 'edit-actions';
+                                        return (_jsx(TableHeaderCell, { sortable: isSortable, sortDirection: sortDirection || null, onClick: isSortable
+                                                ? header.column.getToggleSortingHandler()
+                                                : undefined, checkbox: isCheckbox, shrink: isCheckbox || isExpand || isEditActions, style: {
+                                                width: header.getSize() !== 150
+                                                    ? header.getSize()
+                                                    : undefined,
+                                            }, children: header.isPlaceholder
+                                                ? null
+                                                : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                    }) }, headerGroup.id))), enableFiltering && (_jsx(TableRow, { filter: true, children: table.getHeaderGroups()[0]?.headers.map((header) => {
+                                        const column = header.column;
+                                        const canFilter = column.getCanFilter();
+                                        const isCheckbox = header.id === 'select';
+                                        const isExpand = header.id === 'expand';
+                                        const isEditActions = header.id === 'edit-actions';
+                                        if (!canFilter || isCheckbox || isExpand || isEditActions) {
+                                            return _jsx(TableCell, { filter: true }, header.id);
+                                        }
+                                        return (_jsx(TableCell, { filter: true, children: _jsx(BhInputText, { placeholder: "", label: "", value: column.getFilterValue() ?? '', onBhInput: (e) => column.setFilterValue(e.detail) }) }, header.id));
+                                    }) }))] }), _jsx(TableBody, { children: table.getRowModel().rows.length === 0 ? (_jsx(TableEmpty, { title: emptyTitle, description: emptyDescription, colSpan: tableColumns.length, icon: _jsx("span", { className: "material-symbols-outlined", children: "inbox" }) })) : (table.getRowModel().rows.map((row) => {
+                                // Check if this is a group row
+                                if (row.getIsGrouped()) {
+                                    return renderGroupRow(row);
+                                }
+                                // Regular data row
+                                return renderDataRow(row);
+                            })) })] }) }), enablePagination && !enableGrouping && data.length > 0 && (_jsx(TablePagination, { page: table.getState().pagination.pageIndex + 1, totalPages: table.getPageCount(), totalItems: data.length, pageSize: table.getState().pagination.pageSize, pageSizeOptions: pageSizeOptions, onPageChange: (page) => table.setPageIndex(page - 1), onPageSizeChange: (newSize) => table.setPageSize(newSize) }))] }));
+}
+export function useDataTable({ data, columns, enableSorting = true, enableFiltering = false, enablePagination = true, enableRowSelection = false, enableExpanding = false, enableGrouping = false, groupBy = [], pageSize = 10, getRowId, getSubRows, }) {
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [rowSelection, setRowSelection] = useState({});
+    const [expanded, setExpanded] = useState({});
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize,
+    });
+    const [grouping, setGrouping] = useState(groupBy);
+    return useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            columnFilters,
+            rowSelection,
+            expanded,
+            pagination,
+            grouping,
+        },
+        getRowId,
+        getSubRows,
+        enableRowSelection,
+        enableSorting,
+        enableFilters: enableFiltering,
+        enableExpanding: enableExpanding || enableGrouping,
+        enableGrouping,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onRowSelectionChange: setRowSelection,
+        onExpandedChange: setExpanded,
+        onPaginationChange: setPagination,
+        onGroupingChange: setGrouping,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+        getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
+        getPaginationRowModel: enablePagination && !enableGrouping ? getPaginationRowModel() : undefined,
+        getExpandedRowModel: enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+        getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+    });
+}
+// =============================================================================
+// Exports
+// =============================================================================
+export { DataTable as BhDataTable };

package/dist/components/table/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Bellhop Table Primitives
+ *
+ * Composable table components for building static and dynamic tables.
+ * These primitives can be used standalone or combined with TanStack Table
+ * for advanced features like sorting, filtering, and pagination.
+ * Uses existing Bellhop components for consistency.
+ */
+import { forwardRef, createContext, useContext } from 'react';
+import { BhButtonIcon } from '../stencil-generated';
+// =============================================================================
+// Context
+// =============================================================================
+const TableContext = createContext({
+    size: 'default',
+    variant: 'default',
+    hoverable: true,
+});
+const useTableContext = () => useContext(TableContext);
+// =============================================================================
+// Utility Functions
+// =============================================================================
+function clsx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+export const TableWrapper = forwardRef(({ className, children, maxHeight, maxWidth, scrollX, scrollY, style, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx('bh-table-wrapper', scrollX && 'bh-table-wrapper--scroll-x', scrollY && 'bh-table-wrapper--scroll-y', className), style: {
+            maxHeight: maxHeight,
+            maxWidth: maxWidth,
+            ...style,
+        }, tabIndex: 0, ...props, children: children }));
+});
+TableWrapper.displayName = 'TableWrapper';
+export const Table = forwardRef(({ className, children, size = 'default', variant = 'default', rounded = false, hoverable = true, responsive = false, loading = false, ...props }, ref) => {
+    return (_jsx(TableContext.Provider, { value: { size, variant, hoverable }, children: _jsx("table", { ref: ref, className: clsx('bh-table', `bh-table--${size}`, variant === 'bordered' && 'bh-table--bordered', variant === 'striped' && 'bh-table--striped', rounded && 'bh-table--rounded', responsive && 'bh-table--responsive', loading && 'bh-table--loading', className), ...props, children: children }) }));
+});
+Table.displayName = 'Table';
+export const TableCaption = forwardRef(({ className, children, position = 'top', srOnly = false, ...props }, ref) => {
+    return (_jsx("caption", { ref: ref, className: clsx('bh-caption', position === 'bottom' && 'bh-caption--bottom', srOnly && 'bh-caption--sr-only', className), ...props, children: children }));
+});
+TableCaption.displayName = 'TableCaption';
+export const TableHead = forwardRef(({ className, children, sticky = false, subtle = false, ...props }, ref) => {
+    return (_jsx("thead", { ref: ref, className: clsx('bh-thead', sticky && 'bh-thead--sticky', subtle && 'bh-thead--subtle', className), ...props, children: children }));
+});
+TableHead.displayName = 'TableHead';
+export const TableBody = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("tbody", { ref: ref, className: clsx('bh-tbody', className), ...props, children: children }));
+});
+TableBody.displayName = 'TableBody';
+export const TableFooter = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("tfoot", { ref: ref, className: clsx('bh-tfoot', className), ...props, children: children }));
+});
+TableFooter.displayName = 'TableFooter';
+export const TableRow = forwardRef(({ className, children, selected = false, clickable = false, expandable = false, expanded = false, filter = false, expansion = false, ...props }, ref) => {
+    const { hoverable } = useTableContext();
+    return (_jsx("tr", { ref: ref, className: clsx('bh-tr', hoverable && 'bh-tr--hoverable', selected && 'bh-tr--selected', clickable && 'bh-tr--clickable', expandable && 'bh-tr--expandable', expanded && 'bh-tr--expanded', filter && 'bh-tr--filter', expansion && 'bh-tr--expansion', className), ...props, children: children }));
+});
+TableRow.displayName = 'TableRow';
+export const TableHeaderCell = forwardRef(({ className, children, align = 'left', sortable = false, sortDirection = null, shrink = false, expand = false, checkbox = false, actions = false, pinnedLeft = false, pinnedRight = false, onClick, ...props }, ref) => {
+    const isSorted = sortDirection !== null;
+    return (_jsx("th", { ref: ref, className: clsx('bh-th', `bh-th--${align}`, sortable && 'bh-th--sortable', isSorted && 'bh-th--sorted', shrink && 'bh-th--shrink', expand && 'bh-th--expand', checkbox && 'bh-th--checkbox', actions && 'bh-th--actions', pinnedLeft && 'bh-th--pinned-left', pinnedRight && 'bh-th--pinned-right', className), onClick: sortable ? onClick : undefined, "aria-sort": sortDirection === 'asc'
+            ? 'ascending'
+            : sortDirection === 'desc'
+                ? 'descending'
+                : undefined, ...props, children: _jsxs("span", { className: "bh-th__content", children: [children, sortable && isSorted && (_jsx("span", { className: "bh-th__sort-icon material-symbols-outlined", children: sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }))] }) }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+export const TableCell = forwardRef(({ className, children, align = 'left', numeric = false, truncate = false, wrap = false, shrink = false, expand = false, checkbox = false, actions = false, expandTrigger = false, filter = false, expansion = false, pinnedLeft = false, pinnedRight = false, dataLabel, ...props }, ref) => {
+    return (_jsx("td", { ref: ref, className: clsx('bh-td', `bh-td--${align}`, numeric && 'bh-td--numeric', truncate && 'bh-td--truncate', wrap && 'bh-td--wrap', shrink && 'bh-td--shrink', expand && 'bh-td--expand', checkbox && 'bh-td--checkbox', actions && 'bh-td--actions', expandTrigger && 'bh-td--expand-trigger', filter && 'bh-td--filter', expansion && 'bh-td--expansion', pinnedLeft && 'bh-td--pinned-left', pinnedRight && 'bh-td--pinned-right', className), "data-label": dataLabel, ...props, children: children }));
+});
+TableCell.displayName = 'TableCell';
+export const TableEmpty = forwardRef(({ className, children, icon, title, description, colSpan = 1, ...props }, ref) => {
+    return (_jsx("tr", { ref: ref, children: _jsx("td", { colSpan: colSpan, children: _jsxs("div", { className: clsx('bh-table-empty', className), ...props, children: [icon && _jsx("div", { className: "bh-table-empty__icon", children: icon }), title && _jsx("div", { className: "bh-table-empty__title", children: title }), description && (_jsx("div", { className: "bh-table-empty__description", children: description })), children] }) }) }));
+});
+TableEmpty.displayName = 'TableEmpty';
+export const TableActionBar = forwardRef(({ className, children, selectionCount, left, right, ...props }, ref) => {
+    const hasSelection = selectionCount !== undefined && selectionCount > 0;
+    return (_jsxs("div", { ref: ref, className: clsx('bh-table-action-bar', hasSelection && 'bh-table-action-bar--selected', className), ...props, children: [_jsxs("div", { className: "bh-table-action-bar__left", children: [hasSelection && (_jsxs("span", { className: "bh-table-action-bar__selection-count", children: [selectionCount, " selected"] })), left] }), _jsx("div", { className: "bh-table-action-bar__right", children: right }), children] }));
+});
+TableActionBar.displayName = 'TableActionBar';
+export const TablePagination = forwardRef(({ className, page, totalPages, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, ...props }, ref) => {
+    const startItem = (page - 1) * pageSize + 1;
+    const endItem = Math.min(page * pageSize, totalItems || page * pageSize);
+    return (_jsxs("div", { ref: ref, className: clsx('bh-table-pagination', className), ...props, children: [_jsx("div", { className: "bh-table-pagination__info", children: totalItems !== undefined ? (_jsxs(_Fragment, { children: ["Showing ", startItem, " to ", endItem, " of ", totalItems, " results"] })) : (_jsxs(_Fragment, { children: ["Page ", page, " of ", totalPages] })) }), _jsxs("div", { className: "bh-table-pagination__controls", children: [onPageSizeChange && (_jsxs("div", { className: "bh-table-pagination__page-size", children: [_jsx("span", { children: "Rows per page:" }), _jsx("select", { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "bh-table-pagination__select", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) })] })), _jsx(BhButtonIcon, { iconName: "first_page", size: "sm", hierarchy: "quaternary", disabled: page <= 1, onBhClick: () => onPageChange(1), "aria-label": "First page" }), _jsx(BhButtonIcon, { iconName: "chevron_left", size: "sm", hierarchy: "quaternary", disabled: page <= 1, onBhClick: () => onPageChange(page - 1), "aria-label": "Previous page" }), _jsx(BhButtonIcon, { iconName: "chevron_right", size: "sm", hierarchy: "quaternary", disabled: page >= totalPages, onBhClick: () => onPageChange(page + 1), "aria-label": "Next page" }), _jsx(BhButtonIcon, { iconName: "last_page", size: "sm", hierarchy: "quaternary", disabled: page >= totalPages, onBhClick: () => onPageChange(totalPages), "aria-label": "Last page" })] })] }));
+});
+TablePagination.displayName = 'TablePagination';
+export const ExpandIcon = forwardRef(({ className, expanded = false, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, className: clsx('bh-expand-icon', className), ...props, children: _jsx("span", { className: "material-symbols-outlined", children: "chevron_right" }) }));
+});
+ExpandIcon.displayName = 'ExpandIcon';
+// =============================================================================
+// Exports
+// =============================================================================
+export { Table as BhTable, TableWrapper as BhTableWrapper, TableCaption as BhTableCaption, TableHead as BhThead, TableBody as BhTbody, TableFooter as BhTfoot, TableRow as BhTr, TableHeaderCell as BhTh, TableCell as BhTd, TableEmpty as BhTableEmpty, TableActionBar as BhTableActionBar, TablePagination as BhTablePagination, ExpandIcon as BhExpandIcon, };