npm - flikkui - Versions diffs - 0.2.0-beta.4 → 0.2.0-beta.5 - Mend

flikkui 0.2.0-beta.4 → 0.2.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/README.md CHANGED Viewed

@@ -26,6 +26,98 @@ function App() {
 }
 ```
+## Customizing the Theme
+Flikkui uses CSS variables for all theming. Override any variable in your own CSS to customize colors, spacing, border radius, and more.
+### Colors
+Override semantic color palettes by redefining the CSS variables after importing the library styles:
+```css
+:root {
+  /* Change the primary color to green */
+  --color-primary-50: oklch(0.982 0.018 155.826);
+  --color-primary-100: oklch(0.962 0.044 156.743);
+  --color-primary-200: oklch(0.925 0.084 155.995);
+  --color-primary-300: oklch(0.871 0.15 154.449);
+  --color-primary-400: oklch(0.792 0.209 151.711);
+  --color-primary-500: oklch(0.723 0.219 149.579);
+  --color-primary-600: oklch(0.627 0.194 149.214);
+  --color-primary-700: oklch(0.527 0.154 150.069);
+  --color-primary-800: oklch(0.448 0.119 151.328);
+  --color-primary-900: oklch(0.393 0.095 152.535);
+  --color-primary-950: oklch(0.266 0.065 152.934);
+  --color-primary: var(--color-primary-600);
+}
+```
+Available color palettes: `primary`, `danger`, `success`, `warning`. Each has shades from `50` to `950`.
+### Backgrounds & Borders
+```css
+:root {
+  --color-background: oklch(98.5% 0.002 247.839);
+  --color-background-secondary: oklch(95% 0.002 247.839);
+  --color-background-tertiary: oklch(90% 0.002 247.839);
+  --color-border: oklch(92.2% 0 0);
+}
+```
+### Form Elements
+Control sizing, padding, and border radius for all form components:
+```css
+:root {
+  /* Border radius */
+  --form-rounded: 0.5rem;
+  /* Heights */
+  --form-min-h-sm: 2rem;
+  --form-min-h-md: 2.5rem;
+  --form-min-h-lg: 3rem;
+  /* Horizontal padding */
+  --form-px-sm: 0.75rem;
+  --form-px-md: 0.875rem;
+  --form-px-lg: 1rem;
+  /* Font sizes */
+  --form-text-sm: 0.75rem;
+  --form-text-md: 0.875rem;
+  --form-text-lg: 1rem;
+}
+```
+Button, badge, segmented, and other component variables inherit from these form defaults but can be overridden individually (e.g. `--button-rounded`, `--badge-rounded`).
+### Dark Mode
+Add the `dark` class to your `<html>` or any parent container. All components adapt automatically:
+```html
+<html class="dark">
+  <!-- dark mode active -->
+</html>
+```
+The library ships with sensible dark mode defaults. To customize dark mode colors, override variables inside `.dark`:
+```css
+.dark {
+  --color-background: oklch(14.5% 0 0);
+  --color-border: oklch(30% 0 0);
+  --color-primary: var(--color-primary-400);
+}
+```
+### Full Variable Reference
+See [`src/styles/theme.css`](src/styles/theme.css) for the complete list of available CSS variables.
 ## Documentation
 This package is currently in beta. Full documentation coming soon.

package/dist/components/core/Table/Table.animations.d.ts CHANGED Viewed

@@ -1,21 +1,10 @@
 import { Variants } from "motion/react";
 /**
- * Get table row animation variants for row transitions (selection, expansion, etc.)
+ * Container animation for row expansion (height: 0 -> auto with opacity)
+ * Uses the same easing curve pattern as Accordion for consistency
  */
-export declare const getTableRowVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const tableExpandAnimations: Variants;
 /**
- * Get table expanded row animation variants for row expansion
+ * Content slide-in animation for expanded row content (staggered after container)
  */
-export declare const getTableExpandedRowVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
-/**
- * Get table column manager slide animation variants
- */
-export declare const getTableColumnManagerVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
-/**
- * Get table loading state animation variants
- */
-export declare const getTableLoadingVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
-/**
- * Get table sort indicator animation variants
- */
-export declare const getTableSortVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const tableExpandContentAnimations: Variants;

package/dist/components/core/Table/Table.animations.js ADDED Viewed

@@ -0,0 +1,46 @@
+/**
+ * Container animation for row expansion (height: 0 -> auto with opacity)
+ * Uses the same easing curve pattern as Accordion for consistency
+ */
+const tableExpandAnimations = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.25 },
+        },
+    },
+    expanded: {
+        height: 'auto',
+        opacity: 1,
+        transition: {
+            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.3, delay: 0.1 },
+        },
+    },
+};
+/**
+ * Content slide-in animation for expanded row content (staggered after container)
+ */
+const tableExpandContentAnimations = {
+    collapsed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            y: { duration: 0.2 },
+            opacity: { duration: 0.2 },
+        },
+    },
+    expanded: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: 0.15,
+            y: { duration: 0.3 },
+            opacity: { duration: 0.3 },
+        },
+    },
+};
+export { tableExpandAnimations, tableExpandContentAnimations };

package/dist/components/core/Table/Table.d.ts CHANGED Viewed

@@ -17,33 +17,6 @@ declare const TableContext: React.Context<TableContextType>;
  * - Pagination support
  * - Full accessibility compliance (WCAG 2.1 AA)
  * - Theme customization with className overrides
- *
- * @example
- * // Data-driven API with stable row keys
- * <Table data={data} columns={columns} rowKey="id" sortable selectable />
- *
- * // Using a function for complex row keys
- * <Table
- *   data={data}
- *   columns={columns}
- *   rowKey={(row, index) => `${row.category}-${row.id}`}
- *   sortable
- *   selectable
- * />
- *
- * // Declarative API
- * <Table>
- *   <Table.Header>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Header>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John Doe</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- * </Table>
  */
 declare function TableComponent<T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
 declare namespace TableComponent {

package/dist/components/core/Table/Table.js CHANGED Viewed

@@ -1,15 +1,14 @@
-import React__default, { createContext, useState, useEffect } from 'react';
+import React__default, { createContext, useMemo } from 'react';
 import { tableTheme } from './Table.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { TableHeader } from './components/core/TableHeader.js';
-import { TableBody } from './components/core/TableBody.js';
-import { TableSelectionHeader } from './components/TableSelectionHeader/TableSelectionHeader.js';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
-import { Cog6ToothIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Button/Button.js';
-import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
-import { Sortable, SortableItem } from '../Sortable/Sortable.js';
+import { TableHeader } from './TableHeader.js';
+import { TableBody } from './TableBody.js';
+import { TableSelectionHeader } from './TableSelectionHeader.js';
+import { TableColumnManager } from './TableColumnManager.js';
+import { TableFilter } from './TableFilter.js';
+import { useTableColumns } from './hooks/useTableColumns.js';
+import { useTableSelection } from './hooks/useTableSelection.js';
+import { useTablePagination } from './hooks/useTablePagination.js';
 /**
  * Context for sharing table state across all table components
@@ -34,131 +33,61 @@ const TableContext = createContext({
  * - Pagination support
  * - Full accessibility compliance (WCAG 2.1 AA)
  * - Theme customization with className overrides
- *
- * @example
- * // Data-driven API with stable row keys
- * <Table data={data} columns={columns} rowKey="id" sortable selectable />
- *
- * // Using a function for complex row keys
- * <Table
- *   data={data}
- *   columns={columns}
- *   rowKey={(row, index) => `${row.category}-${row.id}`}
- *   sortable
- *   selectable
- * />
- *
- * // Declarative API
- * <Table>
- *   <Table.Header>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Header>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John Doe</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- * </Table>
  */
 function TableComponent(props) {
     var _a;
-    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
-    // Store the initial state for reset functionality
-    const defaultVisibleColumns = initialVisibleColumns || (columns ? columns.map((col) => col.id) : []);
-    const defaultColumnOrder = columns ? columns.map((col) => col.id) : [];
-    const [visibleColumns, setVisibleColumns] = useState(defaultVisibleColumns);
-    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
-    // Sync column order when columns prop changes
-    useEffect(() => {
-        if (columns) {
-            setColumnOrder(columns.map((col) => col.id));
-        }
-    }, [columns]);
+    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    // Column management hook
+    const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
+        columns,
+        initialVisibleColumns,
+        onVisibleColumnsChange,
+        onColumnReorder,
+    });
+    // Pagination hook
+    const { paginatedData } = useTablePagination({
+        data,
+        pagination,
+    });
+    // Selection hook (for clear selection in header)
+    const { handleClearSelection } = useTableSelection({
+        data: paginatedData,
+        rowKey,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    });
     // Determine which API is being used (declarative vs data-driven)
     const isDeclarativeAPI = !!children;
     // Merge global theme with component-specific overrides
-    const theme = {
+    const theme = useMemo(() => ({
         ...tableTheme,
         ...(themeOverrides || {}),
-    };
+    }), [themeOverrides]);
     // Get base classes from theme
     const baseClasses = theme.baseStyle || "";
     const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
-    /**
-     * Handle column visibility changes from the column manager
-     * Updates both internal state and calls the external callback
-     */
-    const handleVisibleColumnsChange = (newVisibleColumns) => {
-        setVisibleColumns(newVisibleColumns);
-        onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
-    };
-    /**
-     * Handle column reordering from the column manager
-     * Updates column order and calls the external callback
-     */
-    const handleColumnReorder = (fromIndex, toIndex) => {
-        const newColumnOrder = [...columnOrder];
-        const [movedColumn] = newColumnOrder.splice(fromIndex, 1);
-        newColumnOrder.splice(toIndex, 0, movedColumn);
-        setColumnOrder(newColumnOrder);
-        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(fromIndex, toIndex);
-    };
-    /**
-     * Handle column order reset from the column manager
-     * Resets column order back to the original columns order
-     */
-    const handleColumnOrderReset = () => {
-        if (columns) {
-            const originalOrder = columns.map((col) => col.id);
-            setColumnOrder(originalOrder);
-        }
-    };
-    /**
-     * Handle clearing all row selections
-     */
-    const handleClearSelection = () => {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
-    };
-    /**
-     * Handle toggling column visibility
-     * Prevents toggling locked columns
-     */
-    const handleToggleColumn = (columnId) => {
-        const column = columns === null || columns === void 0 ? void 0 : columns.find(col => col.id === columnId);
-        if (column === null || column === void 0 ? void 0 : column.locked)
-            return; // Prevent toggling locked columns
-        const newVisibleColumns = visibleColumns.includes(columnId)
-            ? visibleColumns.filter((id) => id !== columnId)
-            : [...visibleColumns, columnId];
-        handleVisibleColumnsChange(newVisibleColumns);
-    };
-    /**
-     * Handle resetting columns to default visibility and order
-     */
-    const handleResetToDefault = () => {
-        // Get all locked column IDs to ensure they remain visible
-        const lockedColumnIds = (columns === null || columns === void 0 ? void 0 : columns.filter(col => col.locked).map(col => col.id)) || [];
-        // Combine initial visible columns with locked columns (remove duplicates)
-        const resetVisibleColumns = Array.from(new Set([...defaultVisibleColumns, ...lockedColumnIds]));
-        // Reset to initial visible columns with locked columns guaranteed to be visible
-        handleVisibleColumnsChange(resetVisibleColumns);
-        // Reset column order to default
-        handleColumnOrderReset();
-    };
-    // Filter and order columns based on column order and visibility settings
-    const visibleColumnsList = columns && columnOrder.length > 0
-        ? columnOrder
-            .map(colId => columns.find(col => col.id === colId))
-            .filter((col) => col !== undefined && visibleColumns.includes(col.id))
-        : (columns ? columns.filter((col) => visibleColumns.includes(col.id)) : []);
-    // Calculate paginated data slice based on current page and page size
-    const paginatedData = pagination && data
-        ? data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
-        : data || [];
-    // Create context value with all table configuration and callbacks
-    const contextValue = {
+    // Memoize context value to prevent unnecessary re-renders in consumers
+    const contextValue = useMemo(() => ({
+        theme,
+        variant,
+        freezeHeader,
+        freezeFirstColumn,
+        freezeLastColumn,
+        sortable,
+        sortConfig,
+        onSortChange,
+        filterable,
+        filterConfig,
+        onFilterChange,
+        expandable,
+        expandedRows,
+        onExpandedRowsChange,
+        selectable,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    }), [
         theme,
         variant,
         freezeHeader,
@@ -177,47 +106,20 @@ function TableComponent(props) {
         selectionType,
         selectedRows,
         onSelectionChange,
-    };
+    ]);
     return (React__default.createElement(TableContext.Provider, { value: contextValue },
         React__default.createElement("div", { className: "relative" },
-            !isDeclarativeAPI && columns && (React__default.createElement("div", { className: theme.columnManagerContainer },
-                React__default.createElement(Popover, { placement: "bottom-end", offset: 8 },
-                    React__default.createElement(Popover.Trigger, null,
-                        React__default.createElement(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility" },
-                            React__default.createElement(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }),
-                            "Manage Columns")),
-                    React__default.createElement(Popover.Content, { className: "p-0" },
-                        React__default.createElement("div", { className: "w-64 p-3 overflow-hidden bg-white", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true" },
-                            React__default.createElement("div", { id: "column-manager-title", className: "text-xs uppercase font-bold mb-3 text-[var(--color-text-placeholder)]" }, "Manage Columns"),
-                            React__default.createElement("div", { id: "column-manager-description", className: "sr-only" }, "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden."),
-                            React__default.createElement("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options" }, onColumnReorder ? (React__default.createElement(Sortable, { onReorder: handleColumnReorder, showDragHandle: true, className: "space-y-0.5" }, (columnOrder.length > 0
-                                ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
-                                : columns).map((column) => {
-                                const isVisible = visibleColumns.includes(column.id);
-                                const isLocked = column.locked === true;
-                                const displayName = typeof column.header === "string" ? column.header : column.id;
-                                return (React__default.createElement(SortableItem, { key: column.id, id: column.id, disabled: isLocked, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${isLocked ? "bg-gray-50" : ""}` },
-                                    React__default.createElement(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => handleToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? "disabled" : "default" })));
-                            }))) : ((columnOrder.length > 0
-                                ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
-                                : columns).map((column) => {
-                                const isVisible = visibleColumns.includes(column.id);
-                                const isLocked = column.locked === true;
-                                const displayName = typeof column.header === "string" ? column.header : column.id;
-                                return (React__default.createElement("div", { key: column.id, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${isLocked ? "bg-gray-50" : ""}` },
-                                    React__default.createElement(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => handleToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? "disabled" : "default" })));
-                            }))),
-                            React__default.createElement("div", { className: "mt-3 flex justify-end" },
-                                React__default.createElement(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: handleResetToDefault }, "Reset to Default"))))))),
+            !isDeclarativeAPI && columns && showColumnManager && (React__default.createElement("div", { className: theme.columnManagerContainer },
+                React__default.createElement(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))),
+            !isDeclarativeAPI && filterable && onFilterChange && columns && (React__default.createElement("div", { className: "mb-3" },
+                React__default.createElement(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange }))),
             !isDeclarativeAPI && selectable && selectedRows.length > 0 && (React__default.createElement(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })),
             React__default.createElement("div", { className: "overflow-x-auto" },
                 React__default.createElement("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length }, isDeclarativeAPI ? (children) : (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }),
                     React__default.createElement(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }))))))));
 }
-// Set display name for dev tools and Storybook
 TableComponent.displayName = "Table";
-// Export as default
 const Table = TableComponent;
 export { Table, TableContext };

package/dist/components/core/Table/Table.theme.js CHANGED Viewed

@@ -1,7 +1,9 @@
 const tableTheme = {
     // Base styles for the table
+    // Uses border-separate so sticky cells keep their borders (border-collapse
+    // paints borders on the table grid, which sticky cells float above)
     // Light: white background | Dark: neutral-900 background
-    baseStyle: "w-full border-collapse text-sm " +
+    baseStyle: "w-full border-separate border-spacing-0 text-sm " +
         "bg-white dark:bg-[var(--color-neutral-900)]",
     // Variant styles
     // Each variant gets dark mode border colors and alternate row colors
@@ -11,8 +13,8 @@ const tableTheme = {
         striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
             "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        bordered: "border border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
-            "[&_td]:border [&_th]:border " +
+        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
             "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
             "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
@@ -24,29 +26,36 @@ const tableTheme = {
     headerStyle: "text-left font-medium sticky top-0 border-b " +
         "text-[var(--color-text-primary)] border-[var(--color-border)] " +
         "dark:text-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)]",
-    // Cell styles
-    // Light: primary text, light border | Dark: neutral-300 text, neutral-700 border
-    cellStyle: "border-t " +
-        "text-[var(--color-text-primary)] border-[var(--color-border)] " +
-        "dark:text-[var(--color-neutral-300)] dark:border-[var(--color-neutral-700)]",
-    // Row styles
+    // Cell styles — borders on cells (not rows) so sticky columns keep them
+    // Light: primary text | Dark: neutral-300 text
+    cellStyle: "border-b border-b-[var(--color-border)] " +
+        "text-[var(--color-text-primary)] " +
+        "dark:border-b-[var(--color-neutral-700)] dark:text-[var(--color-neutral-300)]",
+    // Row styles — hover and layout only (borders moved to cells)
     // Light: neutral-50 hover | Dark: neutral-800 hover
-    rowStyle: "transition-all duration-300 relative " +
-        "hover:bg-[var(--color-neutral-50)] dark:hover:bg-[var(--color-neutral-800)]",
+    rowStyle: "group transition-all duration-300 relative " +
+        "hover:bg-[var(--color-neutral-50)] " +
+        "dark:hover:bg-[var(--color-neutral-800)]",
     // Selected row styles
     // Light: primary-50 background | Dark: primary-900/50 background with adjusted shadow
     selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)] " +
         "bg-[var(--color-primary-50)]/50 hover:bg-[var(--color-primary-50)] " +
         "dark:bg-[var(--color-primary-900)]/30 dark:hover:bg-[var(--color-primary-900)]/50",
     hoverRowStyle: "cursor-pointer",
-    // Frozen column styles
-    // Light: white/80 with light outline | Dark: neutral-900/80 with dark outline
-    frozenColumnStyle: "sticky left-0 z-10 backdrop-blur-sm shadow-l-xl outline outline-1 " +
-        "bg-white/80 outline-[var(--color-neutral-200)] " +
-        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
-    lastFrozenColumnStyle: "sticky right-0 z-10 backdrop-blur-sm shadow-r-xl outline outline-1 " +
-        "bg-white/80 outline-[var(--color-neutral-200)] " +
-        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
+    // Frozen column styles — borders are on the cell (via cellStyle) so they
+    // travel with the sticky element. Only need vertical separator borders here.
+    frozenColumnStyle: "sticky left-0 z-10 backdrop-blur-sm shadow-l-xl " +
+        "border-r border-r-[var(--color-neutral-200)] " +
+        "bg-white/80 " +
+        "group-hover:bg-[var(--color-neutral-50)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:border-r-[var(--color-neutral-700)] " +
+        "dark:group-hover:bg-[var(--color-neutral-800)]",
+    lastFrozenColumnStyle: "sticky right-0 z-10 backdrop-blur-sm shadow-r-xl " +
+        "border-l border-l-[var(--color-neutral-200)] " +
+        "bg-white/80 " +
+        "group-hover:bg-[var(--color-neutral-50)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:border-l-[var(--color-neutral-700)] " +
+        "dark:group-hover:bg-[var(--color-neutral-800)]",
     frozenHeaderStyle: "sticky top-0 z-20 " +
         "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
         "dark:shadow-[var(--color-neutral-900)]/50",