@stackloop/ui 4.0.7 → 4.0.8

package/README.md

@@ -393,6 +393,10 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   - **`loading`**: `boolean` — optional. Shows animated skeleton loading state when true.
   - **`onRowClick`**: `(item: T) => void` — optional. Callback fired when a row is clicked. Adds hover effect and pointer cursor to rows.
   - **`keyExtractor`**: `(item: T) => string` — required. Function to extract unique key from each data item for React reconciliation.
+  - **`selectable`**: `boolean` — optional (default: `false`). Adds a checkbox column with header-level select all and per-row selection.
+  - **`selectedKeys`**: `string[]` — optional. Controlled selected row keys.
+  - **`defaultSelectedKeys`**: `string[]` — optional. Initial selected row keys for uncontrolled mode.
+  - **`onSelectionChange`**: `(selectedKeys: string[], selectedItems: T[]) => void` — optional. Fires whenever selection changes.
   - **`className`**: `string` — optional. Additional CSS classes for the table wrapper.
 
 - **Column Interface:**
@@ -600,6 +604,25 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   />
   ```
 
+- **Selection Example:**
+
+  ```jsx
+  const [selectedRows, setSelectedRows] = useState([])
+
+  <Table
+    data={users}
+    columns={columns}
+    keyExtractor={(user) => String(user.id)}
+    selectable
+    selectedKeys={selectedRows}
+    onSelectionChange={(keys, items) => {
+      setSelectedRows(keys)
+      console.log('Selected row IDs:', keys)
+      console.log('Selected row objects:', items)
+    }}
+  />
+  ```
+
 **Dropdown**:
 - **Description:** General-purpose select component with optional search, clear, and icons. Use this for general UI selections outside of forms. For form-specific needs with validation, use the **Select** component instead.
 - **Props:**

package/dist/Table.d.ts

@@ -13,7 +13,11 @@ export interface TableProps<T> {
     loading?: boolean;
     onRowClick?: (item: T) => void;
     keyExtractor: (item: T) => string;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelectionChange?: (selectedKeys: string[], selectedItems: T[]) => void;
     className?: string;
     animate?: boolean;
 }
-export declare function Table<T>({ data, columns, loading, onRowClick, keyExtractor, className, animate }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<T>({ data, columns, loading, onRowClick, keyExtractor, selectable, selectedKeys, defaultSelectedKeys, onSelectionChange, className, animate }: TableProps<T>): import("react/jsx-runtime").JSX.Element;