@versini/ui-table 6.6.4 → 6.7.0

package/README.md

@@ -43,3 +43,49 @@ function App() {
   );
 }
 ```
+
+### Active Row
+
+Use the `active` prop on `TableRow` to highlight a row with a left border indicator:
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow
+} from "@versini/ui-table";
+import { useState } from "react";
+
+function App() {
+  const [activeRowId, setActiveRowId] = useState<number | null>(1);
+  const data = [
+    { id: 1, name: "John Doe", email: "john@example.com" },
+    { id: 2, name: "Jane Smith", email: "jane@example.com" }
+  ];
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Name</TableCell>
+          <TableCell>Email</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((row) => (
+          <TableRow
+            key={row.id}
+            active={activeRowId === row.id}
+            onClick={() => setActiveRowId(row.id)}
+          >
+            <TableCell>{row.name}</TableCell>
+            <TableCell>{row.email}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```

package/dist/Table/Table.d.ts

@@ -3,6 +3,6 @@ export declare const Table: ({ children, mode, caption, compact, disabled, summa
 export declare const TableHead: ({ children, className, ...otherProps }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableFooter: ({ children, className, ...otherProps }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableBody: ({ children, ...otherProps }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableRow: ({ children, className, ...otherProps }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableCell: ({ children, component, className, align, ...otherProps }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ children, className, active, ...otherProps }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCell: ({ children, component, className, align, _active, ...otherProps }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableCellSort: ({ align, children, buttonClassName, className, component, focusMode, mode, onClick, sortDirection, sortedCell, cellId, ...otherProps }: TableCellSortProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-table v6.6.4
-  © 2025 gizmette.com
+  @versini/ui-table v6.7.0
+  © 2026 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ButtonSort_private } from "@versini/ui-button/private";
 import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
-import { useContext } from "react";
+import react, { useContext } from "react";
 import { TableContext } from "./TableContext.js";
 import { CELL_WRAPPER_BODY, CELL_WRAPPER_FOOTER, CELL_WRAPPER_HEAD, TableCellSortDirections, getTableCellClasses, getTableCellSortButtonClasses, getTableClasses, getTableFooterClasses, getTableHeadClasses, getTableRowClasses } from "./utilities.js";
 
@@ -140,20 +140,29 @@ const TableBody = ({ children, ...otherProps })=>{
         children: children
     });
 };
-const TableRow = ({ children, className, ...otherProps })=>{
+const TableRow = ({ children, className, active = false, ...otherProps })=>{
     const context = useContext(TableContext);
     const rowClass = getTableRowClasses({
         mode: context.mode,
         cellWrapper: context.cellWrapper,
         className
     });
+    // Pass _active to the first child cell when row is active and in body
+    const enhancedChildren = active && context.cellWrapper === CELL_WRAPPER_BODY ? react.Children.map(children, (child, index)=>{
+        if (index === 0 && /*#__PURE__*/ react.isValidElement(child)) {
+            return /*#__PURE__*/ react.cloneElement(child, {
+                _active: true
+            });
+        }
+        return child;
+    }) : children;
     return /*#__PURE__*/ jsx("tr", {
         className: rowClass,
         ...otherProps,
-        children: children
+        children: enhancedChildren
     });
 };
-const TableCell = ({ children, component, className, align, ...otherProps })=>{
+const TableCell = ({ children, component, className, align, _active, ...otherProps })=>{
     const context = useContext(TableContext);
     const Component = component || (context.cellWrapper === CELL_WRAPPER_HEAD ? "th" : "td");
     const { mainClasses, alignClasses } = getTableCellClasses({
@@ -161,7 +170,8 @@ const TableCell = ({ children, component, className, align, ...otherProps })=>{
         className,
         mode: context.mode,
         compact: context.compact,
-        align
+        align,
+        active: _active
     });
     return align ? /*#__PURE__*/ jsx(Component, {
         className: mainClasses,

package/dist/Table/TableContext.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-table v6.6.4
-  © 2025 gizmette.com
+  @versini/ui-table v6.7.0
+  © 2026 gizmette.com
 */
 
 import react from "react";

package/dist/Table/utilities.d.ts

@@ -45,8 +45,9 @@ export declare const getTableRowClasses: ({ mode, className, cellWrapper, }: {
     cellWrapper?: string;
     className?: string;
 }) => string;
-export declare const getTableCellClasses: ({ cellWrapper, className, compact, mode, align, }: {
+export declare const getTableCellClasses: ({ cellWrapper, className, compact, mode, align, active, }: {
     mode: string;
+    active?: boolean;
     cellWrapper?: string;
     className?: string;
     compact?: boolean;

package/dist/Table/utilities.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-table v6.6.4
-  © 2025 gizmette.com
+  @versini/ui-table v6.7.0
+  © 2026 gizmette.com
 */
 
 import clsx from "clsx";
@@ -16,7 +16,7 @@ import { TableCellSortDirections } from "../TableConstants/TableConstants.js";
 const CELL_WRAPPER_HEAD = "thead";
 const CELL_WRAPPER_FOOTER = "tfoot";
 const CELL_WRAPPER_BODY = "tbody";
-// Re-export moved constant for backward compatibility (tree-shakable now)
+// Re-export moved constant for backward compatibility (tree-shakable now).
 
 const getTableSpinnerClasses = ({ mode })=>{
     return clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
@@ -114,7 +114,7 @@ const getTableRowClasses = ({ mode, className, cellWrapper })=>{
         "hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
     }, className);
 };
-const getTableCellClasses = ({ cellWrapper, className, compact, mode, align })=>{
+const getTableCellClasses = ({ cellWrapper, className, compact, mode, align, active = false })=>{
     return {
         alignClasses: clsx({
             "flex justify-start text-left": align === "left",
@@ -128,7 +128,15 @@ const getTableCellClasses = ({ cellWrapper, className, compact, mode, align })=>
             "dark:text-copy-light": mode === "alt-system",
             "px-4 py-3": !compact && (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER),
             "p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
-            "px-2 py-1.5": compact
+            "px-2 py-1.5": compact,
+            /**
+				 * Active state - left border indicator on first cell using pseudo-element
+				 * Inset slightly from top/bottom to avoid overlapping row borders.
+				 */ "relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1": active,
+            "before:bg-table-active-dark": active && mode === "dark",
+            "before:bg-table-active-light": active && mode === "light",
+            "before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
+            "before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
         }, className)
     };
 };

package/dist/TableConstants/TableConstants.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-table v6.6.4
-  © 2025 gizmette.com
+  @versini/ui-table v6.7.0
+  © 2026 gizmette.com
 */
 
 

package/dist/index.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-table v6.6.4
-  © 2025 gizmette.com
+  @versini/ui-table v6.7.0
+  © 2026 gizmette.com
 */
 
 import { TableCellSortDirections } from "./TableConstants/TableConstants.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-table",
-	"version": "6.6.4",
+	"version": "6.7.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -58,5 +58,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "fae53f4bd56440f7a72ed63b1a2a02b0c3b5a7e6"
+	"gitHead": "bd6eff3f29dfa61a45b389362fff5d0e65080828"
 }