@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/utilities/useTableSelection.md

@@ -0,0 +1,1120 @@
+# useTableSelection
+
+*Category:* Utilities
+*Section:* Table & data hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useTableSelection
+*Captured:* 2025-12-12T12:39:51.762Z
+
+The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.
+
+## useTableSelection
+
+> Note: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes "table-checkbox" and "table-action" to the respective row "td" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.
+
+### Example: Active row
+
+Active row
+-
+
+IdFirst nameLast nameE-mail
+
+1MaiaWildermanDemarcus.Rogahn@yahoo.com
+2MaeveWiegandBrandy_Abernathy77@yahoo.com
+3StephaniaShieldsDoris11@hotmail.com
+4TyrellParkerAmara.Pollich@gmail.com
+5JuniorDoyleAgnes.Lakin56@yahoo.com
+
+#### Summary
+
+Active row
+-
+
+IdFirst nameLast nameE-mail
+
+1MaiaWildermanDemarcus.Rogahn@yahoo.com
+2MaeveWiegandBrandy_Abernathy77@yahoo.com
+3StephaniaShieldsDoris11@hotmail.com
+4TyrellParkerAmara.Pollich@gmail.com
+5JuniorDoyleAgnes.Lakin56@yahoo.com
+
+#### React (tsx)
+
+```tsx
+import React from 'react';
+import classNames from 'classnames';
+import faker from 'faker';
+
+import TableHead from '@rio-cloud/rio-uikit/TableHead';
+import TableCol, { type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';
+import useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';
+import useSorting from '@rio-cloud/rio-uikit/useSorting';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import Card from '@rio-cloud/rio-uikit/Card';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+type Driver = {
+    driverId: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+};
+
+type ColumnLabel = { [key in keyof Driver]: string };
+
+const columnLabels: ColumnLabel = {
+    driverId: 'Id',
+    firstName: 'First name',
+    lastName: 'Last name',
+    email: 'E-mail',
+};
+
+const defaultColumnOrder = ['driverId', 'firstName', 'lastName', 'email'];
+
+const demoColumnsDetails: ColumnDetailsMap = {
+    driverId: {
+        width: 100,
+        defaultWidth: 200,
+        maxWidth: 300,
+    },
+    firstName: {
+        width: 200,
+        defaultWidth: 200,
+        maxWidth: 200,
+    },
+    lastName: {
+        width: 0, // Note: 0 means auto width
+        defaultWidth: 0,
+        maxWidth: 350,
+    },
+};
+
+// Function to generate random entries to work with.
+// Increase length to generate more items.
+const driverList: Driver[] = Array.from({ length: 5 }, (_, index) => ({
+    driverId: `${index + 1}`,
+    firstName: faker.name.firstName(),
+    lastName: faker.name.lastName(),
+    email: faker.internet.email(),
+}));
+
+export default () => {
+    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(driverList, 'driverId');
+
+    // Use the headless table selection hook
+    const { tableRef, onActiveRowChange, activeRowId, setActiveRowId } = useTableSelection<Driver>({
+        tableData: driverList,
+        idKey: 'driverId' as keyof Driver, // Specify the unique identifier key
+        // dataAttributeName: 'data-id', // Specify the "data-id" key where the idKey is stored on a table row
+    });
+
+    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {
+        const newSortBy = event.currentTarget.getAttribute('data-sortby');
+        if (newSortBy) {
+            setSortKey(newSortBy as keyof Driver);
+        }
+        if (newSortBy === sortKey) {
+            toggleDirection();
+        }
+    };
+
+    const tableClassNames = classNames(
+        'table',
+        'table-layout-fixed',
+        'table-column-overflow-hidden',
+        'table-bordered',
+        'table-sticky',
+        'table-hover',
+        'table-head-filled'
+    );
+
+    return (
+        <div>
+            <Card className='margin-bottom-15 display-flex justify-content-between' shadow='none'>
+                <div>
+                    <FormLabel>Active row</FormLabel>
+                    <div>{activeRowId || '-'}</div>
+                </div>
+                <div className='align-self-center'>
+                    {activeRowId && <Button onClick={() => setActiveRowId(undefined)}>Clear active row</Button>}
+                </div>
+            </Card>
+
+            <div className='table-responsive'>
+                <table ref={tableRef} className={tableClassNames}>
+                    <colgroup>
+                        {defaultColumnOrder.map(column => (
+                            <TableCol key={column} columnDetails={demoColumnsDetails[column]} />
+                        ))}
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            {defaultColumnOrder.map(column => (
+                                <TableHead
+                                    key={column}
+                                    column={column}
+                                    label={columnLabels[column as keyof ColumnLabel]}
+                                    sortBy={sortKey as string}
+                                    sortDir={sortDirection}
+                                    onClick={handleSortChange}
+                                />
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {sortedItems.map(row => (
+                            <TableRow
+                                key={row.driverId}
+                                row={row}
+                                columns={defaultColumnOrder}
+                                colLabels={columnLabels}
+                                onRowClick={onActiveRowChange}
+                            />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+type TableRowProps = {
+    row: Driver;
+    columns: string[];
+    colLabels: ColumnLabel;
+    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+};
+
+// A custom table row component used to prevent re-rendering the individual row.
+// Usually, this would be placed into it's own file but for demo purposes it's listed here.
+const TableRow = React.memo(
+    (props: TableRowProps) => {
+        const { row, columns, colLabels, onRowClick } = props;
+
+        // Make sure to store the unique "idKey" as data attribute as specified for the useTableMultiSelection hook
+        // In this example the driverId is used as identifier stored as "data-id".
+        return (
+            <tr key={row.driverId} data-id={row.driverId} onClick={onRowClick} className='cursor-pointer'>
+                {columns.map(col => (
+                    <td key={col} data-field={colLabels[col as keyof Driver]}>
+                        <span>{row[col as keyof Driver]}</span>
+                    </td>
+                ))}
+            </tr>
+        );
+    },
+    (prevProps, nextProps) => {
+        return JSON.stringify(prevProps) === JSON.stringify(nextProps);
+    }
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-white rounded border shadow-none padding-15 margin-bottom-15 display-flex justify-content-between">
+        <div>
+            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Active row</div>
+            <div>-</div>
+        </div>
+        <div class="align-self-center">
+        </div>
+    </div>
+    <div class="table-responsive">
+        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-hover table-head-filled">
+            <colgroup>
+                <col class="" style="min-width: 100px; width: 100px;">
+                <col class="" style="min-width: 200px; width: 200px;">
+                <col class="">
+                <col class="">
+            </colgroup>
+            <thead>
+                <tr>
+                    <th class="user-select-none sort-column" data-field="driverId" data-sortby="driverId" title="Id">
+                        <span>
+                            <span class="sort-arrows sort-asc">
+                            </span>
+                            <span>Id</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="firstName" data-sortby="firstName" title="First name">
+                        <span>
+                            <span class="sort-arrows ">
+                            </span>
+                            <span>First name</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="lastName" data-sortby="lastName" title="Last name">
+                        <span>
+                            <span class="sort-arrows ">
+                            </span>
+                            <span>Last name</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="email" data-sortby="email" title="E-mail">
+                        <span>
+                            <span class="sort-arrows ">
+                            </span>
+                            <span>E-mail</span>
+                        </span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr data-id="1" class="cursor-pointer">
+                    <td data-field="Id">
+                        <span>1</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Maia</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Wilderman</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Demarcus.Rogahn@yahoo.com</span>
+                    </td>
+                </tr>
+                <tr data-id="2" class="cursor-pointer">
+                    <td data-field="Id">
+                        <span>2</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Maeve</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Wiegand</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Brandy_Abernathy77@yahoo.com</span>
+                    </td>
+                </tr>
+                <tr data-id="3" class="cursor-pointer">
+                    <td data-field="Id">
+                        <span>3</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Stephania</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Shields</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Doris11@hotmail.com</span>
+                    </td>
+                </tr>
+                <tr data-id="4" class="cursor-pointer">
+                    <td data-field="Id">
+                        <span>4</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Tyrell</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Parker</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Amara.Pollich@gmail.com</span>
+                    </td>
+                </tr>
+                <tr data-id="5" class="cursor-pointer">
+                    <td data-field="Id">
+                        <span>5</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Junior</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Doyle</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Agnes.Lakin56@yahoo.com</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+```
+
+#### Props: Options for the `useTableSelection` hook
+
+### Options for the `useTableSelection` hook
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for "select all" functionality. |
+| idKey | keyof TData | — | The key in `TData` objects that serves as the unique identifier for each row. |
+| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |
+| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |
+| checkboxQuerySelector | string | '.table-checkbox input[type="checkbox"]' | Optional CSS query selector to find the checkbox input element within each table row. |
+| dataAttributeName | string | data-id | Optional name of the HTML data attribute on `<tr>` elements that holds the unique row ID. |
+| ref | RefObject<HTMLTableElement> | — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |
+
+#### Props: Return value of the `useTableSelection` hook
+
+### Return value of the `useTableSelection` hook
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tableRef | RefObject<HTMLTableElement> | — | React ref attached to the `<table>` HTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |
+| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |
+| setSelectedRowIds | (rowIds: string[]) => void | — | Setter function to change selected rows from the outside in a controlled manner. |
+| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |
+| setActiveRowId | (activeRowId: string \| undefined) => void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |
+| onSelection | (event: React.MouseEvent<HTMLElement>) => void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a `<tr>` that has the specified `dataAttributeName`. Manages the selection state of a single row. |
+| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement>) => void | — | Callback handler to be attached to the click event of table row (`<tr>`) elements.Manages the active row state. |
+| onToggleAll | (shouldSelect: boolean) => void | — | Callback handler to select or deselect all rows. If "shouldSelect" is set to true, all rows in `tableData` will be selected; otherwise, all selections will be cleared. |
+| updateRowSelection | () => void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |
+| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |
+| isAllSelected | boolean | — | A boolean indicating whether all rows in the current `tableData` are selected. |
+
+## Multi-selection
+
+### Example: Active row
+
+Active row
+-
+
+Selected rows
+4
+
+Deselect all ItemsSelect some rows
+
+IdFirst nameLast nameE-mail
+
+1MalikaWittingEttie.Rempel61@gmail.com
+
+2MariahConsidineDayna_Schowalter33@hotmail.com
+
+3DorthaConnellyCarey5@hotmail.com
+
+4JamarJohnsonKaya42@gmail.com
+
+5RutheReynoldsLila.Jakubowski@hotmail.com
+
+6MadisonLegrosAileen.Hills75@hotmail.com
+
+7EricaKesslerSilas70@yahoo.com
+
+8MontanaOkunevaNikki_Hagenes@gmail.com
+
+9RubyeSteuberAlessandra.Feest70@yahoo.com
+
+10WinifredO'KonSebastian.Wuckert25@hotmail.com
+
+#### Summary
+
+Active row
+-
+
+Selected rows
+4
+
+Deselect all ItemsSelect some rows
+
+IdFirst nameLast nameE-mail
+
+1MalikaWittingEttie.Rempel61@gmail.com
+
+2MariahConsidineDayna_Schowalter33@hotmail.com
+
+3DorthaConnellyCarey5@hotmail.com
+
+4JamarJohnsonKaya42@gmail.com
+
+5RutheReynoldsLila.Jakubowski@hotmail.com
+
+6MadisonLegrosAileen.Hills75@hotmail.com
+
+7EricaKesslerSilas70@yahoo.com
+
+8MontanaOkunevaNikki_Hagenes@gmail.com
+
+9RubyeSteuberAlessandra.Feest70@yahoo.com
+
+10WinifredO'KonSebastian.Wuckert25@hotmail.com
+
+#### React (tsx)
+
+```tsx
+import React from 'react';
+import classNames from 'classnames';
+import faker from 'faker';
+import { isEmpty } from 'es-toolkit/compat';
+
+import TableHead from '@rio-cloud/rio-uikit/TableHead';
+import TableCol, { type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';
+import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';
+import useSorting from '@rio-cloud/rio-uikit/useSorting';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import Card from '@rio-cloud/rio-uikit/Card';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+type Driver = {
+    driverId: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+};
+
+type ColumnLabel = { [key in keyof Driver]: string };
+
+const defaultColumnOrder = ['driverId', 'firstName', 'lastName', 'email'];
+
+const columnLabels: ColumnLabel = {
+    driverId: 'Id',
+    firstName: 'First name',
+    lastName: 'Last name',
+    email: 'E-mail',
+};
+
+const demoColumnsDetails: ColumnDetailsMap = {
+    driverId: {
+        width: 100,
+        defaultWidth: 200,
+        maxWidth: 300,
+    },
+    firstName: {
+        width: 200,
+        defaultWidth: 200,
+        maxWidth: 200,
+    },
+    lastName: {
+        width: 0, // Note: 0 means auto width
+        defaultWidth: 0,
+        maxWidth: 350,
+    },
+};
+
+// Function to generate random entries to work with.
+// Increase length to generate more items.
+const driverList: Driver[] = Array.from({ length: 10 }, (_, index) => ({
+    driverId: `${index + 1}`,
+    firstName: faker.name.firstName(),
+    lastName: faker.name.lastName(),
+    email: faker.internet.email(),
+}));
+
+export default () => {
+    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(driverList, 'driverId');
+
+    // Use the headless table selection hook
+    const {
+        tableRef,
+        onSelection,
+        onActiveRowChange,
+        onToggleAll,
+        activeRowId,
+        setActiveRowId,
+        selectedRowIds,
+        setSelectedRowIds,
+        hasSelection,
+        isAllSelected,
+    } = useTableSelection<Driver>({
+        tableData: driverList,
+        idKey: 'driverId' as keyof Driver, // Specify the unique identifier key
+        initialSelectedRowIds: [`${driverList[3]?.driverId}`].filter(Boolean),
+        initialActiveRowId: '',
+        // dataAttributeName: 'data-id', // Specify the "data-id" key where the idKey is stored on a table row
+    });
+
+    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {
+        const newSortBy = event.currentTarget.getAttribute('data-sortby');
+        if (newSortBy) {
+            setSortKey(newSortBy as keyof Driver);
+        }
+        if (newSortBy === sortKey) {
+            toggleDirection();
+        }
+    };
+
+    const tableClassNames = classNames(
+        'table',
+        'table-layout-fixed',
+        'table-column-overflow-hidden',
+        'table-bordered',
+        'table-sticky',
+        'table-hover',
+        'table-head-filled'
+    );
+
+    const batchButton = (
+        <ButtonDropdown
+            title={<span className='rioglyph rioglyph-checkboxes' />}
+            variant='outline'
+            bsSize='sm'
+            iconOnly
+            items={[
+                {
+                    value: (
+                        <div>
+                            <span>Select all Items</span>
+                        </div>
+                    ),
+                    onSelect: () => onToggleAll(true),
+                },
+                {
+                    value: (
+                        <div>
+                            <span>Deselect all Items</span>
+                        </div>
+                    ),
+                    onSelect: () => onToggleAll(false),
+                },
+            ]}
+        />
+    );
+
+    return (
+        <div>
+            <Card className='margin-bottom-15 display-flex justify-content-between' shadow='none'>
+                <div className='display-flex gap-25'>
+                    <div>
+                        <FormLabel>Active row</FormLabel>
+                        <div>{activeRowId || '-'}</div>
+                    </div>
+                    <div>
+                        <FormLabel>Selected rows</FormLabel>
+                        <div>{selectedRowIds.join(', ')}</div>
+                    </div>
+                </div>
+                <ButtonToolbar className='align-self-center'>
+                    {activeRowId && <Button onClick={() => setActiveRowId(undefined)}>Clear active row</Button>}
+                    {!isEmpty(selectedRowIds) && <Button onClick={() => onToggleAll(false)}>Deselect all Items</Button>}
+                    <Button
+                        onClick={() => setSelectedRowIds([`${driverList[2]?.driverId}`, `${driverList[5]?.driverId}`])}
+                    >
+                        Select some rows
+                    </Button>
+                </ButtonToolbar>
+            </Card>
+            <div className='table-responsive'>
+                <table ref={tableRef} className={tableClassNames}>
+                    {/* Colgroups are required to work with column widths */}
+                    <colgroup>
+                        <TableCol />
+                        {defaultColumnOrder.map(column => (
+                            <TableCol key={column} columnDetails={demoColumnsDetails[column]} />
+                        ))}
+                        <TableCol />
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            <TableHead className='table-checkbox'>{batchButton}</TableHead>
+                            {defaultColumnOrder.map(column => (
+                                <TableHead
+                                    key={column}
+                                    column={column}
+                                    label={columnLabels[column as keyof ColumnLabel]}
+                                    sortBy={sortKey as string}
+                                    sortDir={sortDirection}
+                                    onClick={handleSortChange}
+                                />
+                            ))}
+                            <TableHead className='table-action' />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {sortedItems.map(row => (
+                            <TableRow
+                                key={row.driverId}
+                                row={row}
+                                columns={defaultColumnOrder}
+                                colLabels={columnLabels}
+                                onRowClick={onActiveRowChange}
+                                onSelectCheckbox={onSelection}
+                            />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+type TableRowProps = {
+    row: Driver;
+    columns: string[];
+    colLabels: ColumnLabel;
+    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    onSelectCheckbox: (event: React.MouseEvent<HTMLElement>) => void;
+};
+
+// A custom table row component used to prevent re-rendering the individual row.
+// Usually, this would be placed into it's own file but for demo purposes it's listed here.
+const TableRow = React.memo(
+    (props: TableRowProps) => {
+        const { row, columns, colLabels, onRowClick, onSelectCheckbox } = props;
+
+        // Make sure to store the unique "idKey" as data attribute as specified for the useTableMultiSelection hook
+        // In this example the driverId is used as identifier stored as "data-id".
+        return (
+            <tr key={row.driverId} data-id={row.driverId} onClick={onRowClick} className='cursor-pointer'>
+                <td className='table-checkbox' onClick={onSelectCheckbox}>
+                    <Checkbox />
+                </td>
+                {columns.map(col => (
+                    <td key={col} data-field={colLabels[col as keyof Driver]}>
+                        <span>{row[col as keyof Driver]}</span>
+                    </td>
+                ))}
+                <td className='table-action'>
+                    <span>
+                        <ButtonDropdown
+                            title={<span className='rioglyph rioglyph-option-vertical' />}
+                            variant='link'
+                            iconOnly
+                            items={[
+                                {
+                                    value: (
+                                        <div className='display-flex align-items-center gap-10'>
+                                            <span className='rioglyph rioglyph-pencil' />
+                                            <span>Edit Me</span>
+                                        </div>
+                                    ),
+                                },
+                                {
+                                    value: (
+                                        <div className='display-flex align-items-center gap-10'>
+                                            <span className='rioglyph rioglyph-trash' />
+                                            <span>Delete me</span>
+                                        </div>
+                                    ),
+                                },
+                            ]}
+                        />
+                    </span>
+                </td>
+            </tr>
+        );
+    },
+    (prevProps, nextProps) => {
+        return JSON.stringify(prevProps) === JSON.stringify(nextProps);
+    }
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-white rounded border shadow-none padding-15 margin-bottom-15 display-flex justify-content-between">
+        <div class="display-flex gap-25">
+            <div>
+                <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Active row</div>
+                <div>-</div>
+            </div>
+            <div>
+                <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Selected rows</div>
+                <div>4</div>
+            </div>
+        </div>
+        <div class="align-self-center btn-toolbar">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Deselect all Items</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Select some rows</button>
+        </div>
+    </div>
+    <div class="table-responsive">
+        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-hover table-head-filled">
+            <colgroup>
+                <col class="">
+                <col class="" style="min-width: 100px; width: 100px;">
+                <col class="" style="min-width: 200px; width: 200px;">
+                <col class="">
+                <col class="">
+                <col class="">
+            </colgroup>
+            <thead>
+                <tr>
+                    <th class="user-select-none sort-column table-checkbox" title="">
+                        <div class="dropdown btn-group">
+                            <button type="button" id="zekw2l2iy4c" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                <span class="rioglyph rioglyph-checkboxes">
+                                </span>
+                            </button>
+                        </div>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="driverId" data-sortby="driverId" title="Id">
+                        <span>
+                            <span class="sort-arrows sort-asc">
+                            </span>
+                            <span>Id</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="firstName" data-sortby="firstName" title="First name">
+                        <span>
+                            <span class="sort-arrows ">
+                            </span>
+                            <span>First name</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="lastName" data-sortby="lastName" title="Last name">
+                        <span>
+                            <span class="sort-arrows ">
+                            </span>
+                            <span>Last name</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column" data-field="email" data-sortby="email" title="E-mail">
+                        <span>
+                            <span class="sort-arrows ">
+                            </span>
+                            <span>E-mail</span>
+                        </span>
+                    </th>
+                    <th class="user-select-none sort-column table-action" title="">
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr data-id="1" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>1</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Malika</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Witting</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Ettie.Rempel61@gmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="0hgjg90v8jpv" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="2" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>2</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Mariah</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Considine</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Dayna_Schowalter33@hotmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="28r9fs5sa8n" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="3" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>3</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Dortha</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Connelly</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Carey5@hotmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="csuvx15jcbm" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="4" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>4</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Jamar</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Johnson</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Kaya42@gmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="rgtlia8p40g" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="5" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>5</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Ruthe</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Reynolds</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Lila.Jakubowski@hotmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="btv0uqk3ek" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="6" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>6</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Madison</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Legros</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Aileen.Hills75@hotmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="gte9wfn7bzg" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="7" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>7</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Erica</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Kessler</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Silas70@yahoo.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="owixzq4ow" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="8" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>8</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Montana</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Okuneva</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Nikki_Hagenes@gmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="72ktik8sm85" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="9" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>9</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Rubye</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>Steuber</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Alessandra.Feest70@yahoo.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="f2jsn496wnp" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+                <tr data-id="10" class="cursor-pointer">
+                    <td class="table-checkbox">
+                        <label class="checkbox" tabindex="0">
+                            <input type="checkbox" class="">
+                            <span class="checkbox-text">
+                            </span>
+                        </label>
+                    </td>
+                    <td data-field="Id">
+                        <span>10</span>
+                    </td>
+                    <td data-field="First name">
+                        <span>Winifred</span>
+                    </td>
+                    <td data-field="Last name">
+                        <span>O'Kon</span>
+                    </td>
+                    <td data-field="E-mail">
+                        <span>Sebastian.Wuckert25@hotmail.com</span>
+                    </td>
+                    <td class="table-action">
+                        <span>
+                            <div class="dropdown btn-group">
+                                <button type="button" id="lgba9i71qv" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                                    <span class="rioglyph rioglyph-option-vertical">
+                                    </span>
+                                </button>
+                            </div>
+                        </span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+```
+
+#### Props: Options for the `useTableSelection` hook
+
+### Options for the `useTableSelection` hook
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for "select all" functionality. |
+| idKey | keyof TData | — | The key in `TData` objects that serves as the unique identifier for each row. |
+| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |
+| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |
+| checkboxQuerySelector | string | '.table-checkbox input[type="checkbox"]' | Optional CSS query selector to find the checkbox input element within each table row. |
+| dataAttributeName | string | data-id | Optional name of the HTML data attribute on `<tr>` elements that holds the unique row ID. |
+| ref | RefObject<HTMLTableElement> | — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |
+
+#### Props: Return value of the `useTableSelection` hook
+
+### Return value of the `useTableSelection` hook
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tableRef | RefObject<HTMLTableElement> | — | React ref attached to the `<table>` HTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |
+| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |
+| setSelectedRowIds | (rowIds: string[]) => void | — | Setter function to change selected rows from the outside in a controlled manner. |
+| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |
+| setActiveRowId | (activeRowId: string \| undefined) => void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |
+| onSelection | (event: React.MouseEvent<HTMLElement>) => void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a `<tr>` that has the specified `dataAttributeName`. Manages the selection state of a single row. |
+| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement>) => void | — | Callback handler to be attached to the click event of table row (`<tr>`) elements.Manages the active row state. |
+| onToggleAll | (shouldSelect: boolean) => void | — | Callback handler to select or deselect all rows. If "shouldSelect" is set to true, all rows in `tableData` will be selected; otherwise, all selections will be cleared. |
+| updateRowSelection | () => void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |
+| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |
+| isAllSelected | boolean | — | A boolean indicating whether all rows in the current `tableData` are selected. |