@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Utilities/utilities/usetableselection.json

@@ -0,0 +1,311 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:49.715Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useTableSelection",
+    "category": "Utilities",
+    "section": "Table & data hooks",
+    "slug": "utilities/usetableselection",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "1299fe5b6b0726e98180eafc5b7a8598bf80cbc07902dacb37a433cea912e289"
+  },
+  "title": "useTableSelection",
+  "lead": "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.",
+  "content": [
+    {
+      "heading": "useTableSelection",
+      "body": "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.",
+      "examples": [
+        {
+          "caption": "Active row",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><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>Yadira</span></td><td data-field=\"Last name\"><span>Heathcote</span></td><td data-field=\"E-mail\"><span>Brady4@hotmail.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>Judd</span></td><td data-field=\"Last name\"><span>Mann</span></td><td data-field=\"E-mail\"><span>Lavina_Effertz@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>Alessandro</span></td><td data-field=\"Last name\"><span>Schoen</span></td><td data-field=\"E-mail\"><span>Tyreek.Altenwerth69@yahoo.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>Matteo</span></td><td data-field=\"Last name\"><span>Paucek</span></td><td data-field=\"E-mail\"><span>Elian.Koch49@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>Abel</span></td><td data-field=\"Last name\"><span>Harris</span></td><td data-field=\"E-mail\"><span>Berniece35@gmail.com</span></td></tr></tbody></table></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\nimport classNames from 'classnames';\nimport faker from 'faker';\n\nimport TableHead from '@rio-cloud/rio-uikit/TableHead';\nimport TableCol, { type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';\nimport useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\ntype Driver = {\n    driverId: string;\n    firstName: string;\n    lastName: string;\n    email: string;\n};\n\ntype ColumnLabel = { [key in keyof Driver]: string };\n\nconst columnLabels: ColumnLabel = {\n    driverId: 'Id',\n    firstName: 'First name',\n    lastName: 'Last name',\n    email: 'E-mail',\n};\n\nconst defaultColumnOrder = ['driverId', 'firstName', 'lastName', 'email'];\n\nconst demoColumnsDetails: ColumnDetailsMap = {\n    driverId: {\n        width: 100,\n        defaultWidth: 200,\n        maxWidth: 300,\n    },\n    firstName: {\n        width: 200,\n        defaultWidth: 200,\n        maxWidth: 200,\n    },\n    lastName: {\n        width: 0, // Note: 0 means auto width\n        defaultWidth: 0,\n        maxWidth: 350,\n    },\n};\n\n// Function to generate random entries to work with.\n// Increase length to generate more items.\nconst driverList: Driver[] = Array.from({ length: 5 }, (_, index) => ({\n    driverId: `${index + 1}`,\n    firstName: faker.name.firstName(),\n    lastName: faker.name.lastName(),\n    email: faker.internet.email(),\n}));\n\nexport default () => {\n    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(driverList, 'driverId');\n\n    // Use the headless table selection hook\n    const { tableRef, onActiveRowChange, activeRowId, setActiveRowId } = useTableSelection<Driver>({\n        tableData: driverList,\n        idKey: 'driverId' as keyof Driver, // Specify the unique identifier key\n        // dataAttributeName: 'data-id', // Specify the \"data-id\" key where the idKey is stored on a table row\n    });\n\n    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {\n        const newSortBy = event.currentTarget.getAttribute('data-sortby');\n        if (newSortBy) {\n            setSortKey(newSortBy as keyof Driver);\n        }\n        if (newSortBy === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    const tableClassNames = classNames(\n        'table',\n        'table-layout-fixed',\n        'table-column-overflow-hidden',\n        'table-bordered',\n        'table-sticky',\n        'table-hover',\n        'table-head-filled'\n    );\n\n    return (\n        <div>\n            <Card className='margin-bottom-15 display-flex justify-content-between' shadow='none'>\n                <div>\n                    <FormLabel>Active row</FormLabel>\n                    <div>{activeRowId || '-'}</div>\n                </div>\n                <div className='align-self-center'>\n                    {activeRowId && <Button onClick={() => setActiveRowId(undefined)}>Clear active row</Button>}\n                </div>\n            </Card>\n\n            <div className='table-responsive'>\n                <table ref={tableRef} className={tableClassNames}>\n                    <colgroup>\n                        {defaultColumnOrder.map(column => (\n                            <TableCol key={column} columnDetails={demoColumnsDetails[column]} />\n                        ))}\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            {defaultColumnOrder.map(column => (\n                                <TableHead\n                                    key={column}\n                                    column={column}\n                                    label={columnLabels[column as keyof ColumnLabel]}\n                                    sortBy={sortKey as string}\n                                    sortDir={sortDirection}\n                                    onClick={handleSortChange}\n                                />\n                            ))}\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {sortedItems.map(row => (\n                            <TableRow\n                                key={row.driverId}\n                                row={row}\n                                columns={defaultColumnOrder}\n                                colLabels={columnLabels}\n                                onRowClick={onActiveRowChange}\n                            />\n                        ))}\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    );\n};\n\ntype TableRowProps = {\n    row: Driver;\n    columns: string[];\n    colLabels: ColumnLabel;\n    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>) => void;\n};\n\n// A custom table row component used to prevent re-rendering the individual row.\n// Usually, this would be placed into it's own file but for demo purposes it's listed here.\nconst TableRow = React.memo(\n    (props: TableRowProps) => {\n        const { row, columns, colLabels, onRowClick } = props;\n\n        // Make sure to store the unique \"idKey\" as data attribute as specified for the useTableMultiSelection hook\n        // In this example the driverId is used as identifier stored as \"data-id\".\n        return (\n            <tr key={row.driverId} data-id={row.driverId} onClick={onRowClick} className='cursor-pointer'>\n                {columns.map(col => (\n                    <td key={col} data-field={colLabels[col as keyof Driver]}>\n                        <span>{row[col as keyof Driver]}</span>\n                    </td>\n                ))}\n            </tr>\n        );\n    },\n    (prevProps, nextProps) => {\n        return JSON.stringify(prevProps) === JSON.stringify(nextProps);\n    }\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-white rounded border shadow-none padding-15 margin-bottom-15 display-flex justify-content-between\">\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Active row</div>\n            <div>-</div>\n        </div>\n        <div class=\"align-self-center\">\n        </div>\n    </div>\n    <div class=\"table-responsive\">\n        <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-hover table-head-filled\">\n            <colgroup>\n                <col class=\"\" style=\"min-width: 100px; width: 100px;\">\n                <col class=\"\" style=\"min-width: 200px; width: 200px;\">\n                <col class=\"\">\n                <col class=\"\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th class=\"user-select-none sort-column\" data-field=\"driverId\" data-sortby=\"driverId\" title=\"Id\">\n                        <span>\n                            <span class=\"sort-arrows sort-asc\">\n                            </span>\n                            <span>Id</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"firstName\" data-sortby=\"firstName\" title=\"First name\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>First name</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"lastName\" data-sortby=\"lastName\" title=\"Last name\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Last name</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"email\" data-sortby=\"email\" title=\"E-mail\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>E-mail</span>\n                        </span>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr data-id=\"1\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>1</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Yadira</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Heathcote</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Brady4@hotmail.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"2\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>2</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Judd</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Mann</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Lavina_Effertz@yahoo.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"3\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>3</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Alessandro</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Schoen</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Tyreek.Altenwerth69@yahoo.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"4\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>4</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Matteo</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Paucek</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Elian.Koch49@gmail.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"5\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>5</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Abel</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Harris</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Berniece35@gmail.com</span>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useTableSelection` hook",
+                  "rows": [
+                    {
+                      "name": "tableData",
+                      "type": "TData[]",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "idKey",
+                      "type": "keyof TData",
+                      "default": "",
+                      "description": "The key in `TData` objects that serves as the unique identifier for each row."
+                    },
+                    {
+                      "name": "initialSelectedRowIds",
+                      "type": "string[]",
+                      "default": "",
+                      "description": "Optional array of row IDs that should be initially selected."
+                    },
+                    {
+                      "name": "initialActiveRowId",
+                      "type": "string",
+                      "default": "",
+                      "description": "Optional ID of the row that should be initially marked as active."
+                    },
+                    {
+                      "name": "checkboxQuerySelector",
+                      "type": "string",
+                      "default": "'.table-checkbox input[type=\"checkbox\"]'",
+                      "description": "Optional CSS query selector to find the checkbox input element within each table row."
+                    },
+                    {
+                      "name": "dataAttributeName",
+                      "type": "string",
+                      "default": "data-id",
+                      "description": "Optional name of the HTML data attribute on `<tr>` elements that holds the unique row ID."
+                    },
+                    {
+                      "name": "ref",
+                      "type": "RefObject<HTMLTableElement>",
+                      "default": "",
+                      "description": "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."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useTableSelection` hook",
+                  "rows": [
+                    {
+                      "name": "tableRef",
+                      "type": "RefObject<HTMLTableElement>",
+                      "default": "",
+                      "description": "React ref attached to the `<table>` HTML element. Ensure this ref is assigned to your table element to enable DOM manipulations."
+                    },
+                    {
+                      "name": "selectedRowIds",
+                      "type": "string[]",
+                      "default": "",
+                      "description": "An array of strings, where each string is the ID of a currently selected row."
+                    },
+                    {
+                      "name": "setSelectedRowIds",
+                      "type": "(rowIds: string[]) => void",
+                      "default": "",
+                      "description": "Setter function to change selected rows from the outside in a controlled manner."
+                    },
+                    {
+                      "name": "activeRowId",
+                      "type": "string",
+                      "default": "",
+                      "description": "The ID of the currently active row. An empty string signifies no row is active."
+                    },
+                    {
+                      "name": "setActiveRowId",
+                      "type": "(activeRowId: string | undefined) => void",
+                      "default": "",
+                      "description": "Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row."
+                    },
+                    {
+                      "name": "onSelection",
+                      "type": "(event: React.MouseEvent<HTMLElement>) => void",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onActiveRowChange",
+                      "type": "(event: React.MouseEvent<HTMLTableRowElement>) => void",
+                      "default": "",
+                      "description": "Callback handler to be attached to the click event of table row (`<tr>`) elements.Manages the active row state."
+                    },
+                    {
+                      "name": "onToggleAll",
+                      "type": "(shouldSelect: boolean) => void",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "updateRowSelection",
+                      "type": "() => void",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hasSelection",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "A boolean indicating whether at least one row is currently selected."
+                    },
+                    {
+                      "name": "isAllSelected",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "A boolean indicating whether all rows in the current `tableData` are selected."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Multi-selection",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Active row",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><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=\"qya2fvaxt4\" 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>Hellen</span></td><td data-field=\"Last name\"><span>Dooley</span></td><td data-field=\"E-mail\"><span>Kathryn.Larson30@hotmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"4328goteuzw\" 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>Alisa</span></td><td data-field=\"Last name\"><span>Ernser</span></td><td data-field=\"E-mail\"><span>Raven.Wehner87@hotmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"ehz0jbkuq2m\" 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>Rupert</span></td><td data-field=\"Last name\"><span>Gorczany</span></td><td data-field=\"E-mail\"><span>Wilson_Rice@hotmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"znapjdgiqj\" 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>Bernadette</span></td><td data-field=\"Last name\"><span>Strosin</span></td><td data-field=\"E-mail\"><span>Jerald.Mitchell@yahoo.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"m5tm7fednd\" 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>Ernie</span></td><td data-field=\"Last name\"><span>Mraz</span></td><td data-field=\"E-mail\"><span>Erling.Stamm18@hotmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"on4xbctze5\" 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>Asia</span></td><td data-field=\"Last name\"><span>Murray</span></td><td data-field=\"E-mail\"><span>Effie.Sporer55@gmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"i6ikgqhqor\" 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>Nicholas</span></td><td data-field=\"Last name\"><span>Marquardt</span></td><td data-field=\"E-mail\"><span>Waylon.Pacocha99@gmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"xtcn7kkxgr9\" 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>Estelle</span></td><td data-field=\"Last name\"><span>Abernathy</span></td><td data-field=\"E-mail\"><span>Marlene_Swaniawski@gmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"zin2qik5z8p\" 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>Fermin</span></td><td data-field=\"Last name\"><span>Heller</span></td><td data-field=\"E-mail\"><span>Irving.Connelly65@gmail.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"pdsd1xlmmp9\" 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>Wellington</span></td><td data-field=\"Last name\"><span>Koepp</span></td><td data-field=\"E-mail\"><span>Gino97@yahoo.com</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"pn7xhusznoe\" 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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\nimport classNames from 'classnames';\nimport faker from 'faker';\nimport isEmpty from 'lodash/fp/isEmpty';\n\nimport TableHead from '@rio-cloud/rio-uikit/TableHead';\nimport TableCol, { type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\ntype Driver = {\n    driverId: string;\n    firstName: string;\n    lastName: string;\n    email: string;\n};\n\ntype ColumnLabel = { [key in keyof Driver]: string };\n\nconst defaultColumnOrder = ['driverId', 'firstName', 'lastName', 'email'];\n\nconst columnLabels: ColumnLabel = {\n    driverId: 'Id',\n    firstName: 'First name',\n    lastName: 'Last name',\n    email: 'E-mail',\n};\n\nconst demoColumnsDetails: ColumnDetailsMap = {\n    driverId: {\n        width: 100,\n        defaultWidth: 200,\n        maxWidth: 300,\n    },\n    firstName: {\n        width: 200,\n        defaultWidth: 200,\n        maxWidth: 200,\n    },\n    lastName: {\n        width: 0, // Note: 0 means auto width\n        defaultWidth: 0,\n        maxWidth: 350,\n    },\n};\n\n// Function to generate random entries to work with.\n// Increase length to generate more items.\nconst driverList: Driver[] = Array.from({ length: 10 }, (_, index) => ({\n    driverId: `${index + 1}`,\n    firstName: faker.name.firstName(),\n    lastName: faker.name.lastName(),\n    email: faker.internet.email(),\n}));\n\nexport default () => {\n    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(driverList, 'driverId');\n\n    // Use the headless table selection hook\n    const {\n        tableRef,\n        onSelection,\n        onActiveRowChange,\n        onToggleAll,\n        activeRowId,\n        setActiveRowId,\n        selectedRowIds,\n        setSelectedRowIds,\n        hasSelection,\n        isAllSelected,\n    } = useTableSelection<Driver>({\n        tableData: driverList,\n        idKey: 'driverId' as keyof Driver, // Specify the unique identifier key\n        initialSelectedRowIds: [`${driverList[3]?.driverId}`].filter(Boolean),\n        initialActiveRowId: '',\n        // dataAttributeName: 'data-id', // Specify the \"data-id\" key where the idKey is stored on a table row\n    });\n\n    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {\n        const newSortBy = event.currentTarget.getAttribute('data-sortby');\n        if (newSortBy) {\n            setSortKey(newSortBy as keyof Driver);\n        }\n        if (newSortBy === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    const tableClassNames = classNames(\n        'table',\n        'table-layout-fixed',\n        'table-column-overflow-hidden',\n        'table-bordered',\n        'table-sticky',\n        'table-hover',\n        'table-head-filled'\n    );\n\n    const batchButton = (\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            iconOnly\n            items={[\n                {\n                    value: (\n                        <div>\n                            <span>Select all Items</span>\n                        </div>\n                    ),\n                    onSelect: () => onToggleAll(true),\n                },\n                {\n                    value: (\n                        <div>\n                            <span>Deselect all Items</span>\n                        </div>\n                    ),\n                    onSelect: () => onToggleAll(false),\n                },\n            ]}\n        />\n    );\n\n    return (\n        <div>\n            <Card className='margin-bottom-15 display-flex justify-content-between' shadow='none'>\n                <div className='display-flex gap-25'>\n                    <div>\n                        <FormLabel>Active row</FormLabel>\n                        <div>{activeRowId || '-'}</div>\n                    </div>\n                    <div>\n                        <FormLabel>Selected rows</FormLabel>\n                        <div>{selectedRowIds.join(', ')}</div>\n                    </div>\n                </div>\n                <ButtonToolbar className='align-self-center'>\n                    {activeRowId && <Button onClick={() => setActiveRowId(undefined)}>Clear active row</Button>}\n                    {!isEmpty(selectedRowIds) && <Button onClick={() => onToggleAll(false)}>Deselect all Items</Button>}\n                    <Button\n                        onClick={() => setSelectedRowIds([`${driverList[2]?.driverId}`, `${driverList[5]?.driverId}`])}\n                    >\n                        Select some rows\n                    </Button>\n                </ButtonToolbar>\n            </Card>\n            <div className='table-responsive'>\n                <table ref={tableRef} className={tableClassNames}>\n                    {/* Colgroups are required to work with column widths */}\n                    <colgroup>\n                        <TableCol />\n                        {defaultColumnOrder.map(column => (\n                            <TableCol key={column} columnDetails={demoColumnsDetails[column]} />\n                        ))}\n                        <TableCol />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            <TableHead className='table-checkbox'>{batchButton}</TableHead>\n                            {defaultColumnOrder.map(column => (\n                                <TableHead\n                                    key={column}\n                                    column={column}\n                                    label={columnLabels[column as keyof ColumnLabel]}\n                                    sortBy={sortKey as string}\n                                    sortDir={sortDirection}\n                                    onClick={handleSortChange}\n                                />\n                            ))}\n                            <TableHead className='table-action' />\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {sortedItems.map(row => (\n                            <TableRow\n                                key={row.driverId}\n                                row={row}\n                                columns={defaultColumnOrder}\n                                colLabels={columnLabels}\n                                onRowClick={onActiveRowChange}\n                                onSelectCheckbox={onSelection}\n                            />\n                        ))}\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    );\n};\n\ntype TableRowProps = {\n    row: Driver;\n    columns: string[];\n    colLabels: ColumnLabel;\n    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>) => void;\n    onSelectCheckbox: (event: React.MouseEvent<HTMLElement>) => void;\n};\n\n// A custom table row component used to prevent re-rendering the individual row.\n// Usually, this would be placed into it's own file but for demo purposes it's listed here.\nconst TableRow = React.memo(\n    (props: TableRowProps) => {\n        const { row, columns, colLabels, onRowClick, onSelectCheckbox } = props;\n\n        // Make sure to store the unique \"idKey\" as data attribute as specified for the useTableMultiSelection hook\n        // In this example the driverId is used as identifier stored as \"data-id\".\n        return (\n            <tr key={row.driverId} data-id={row.driverId} onClick={onRowClick} className='cursor-pointer'>\n                <td className='table-checkbox' onClick={onSelectCheckbox}>\n                    <Checkbox />\n                </td>\n                {columns.map(col => (\n                    <td key={col} data-field={colLabels[col as keyof Driver]}>\n                        <span>{row[col as keyof Driver]}</span>\n                    </td>\n                ))}\n                <td className='table-action'>\n                    <span>\n                        <ButtonDropdown\n                            title={<span className='rioglyph rioglyph-option-vertical' />}\n                            variant='link'\n                            iconOnly\n                            items={[\n                                {\n                                    value: (\n                                        <div className='display-flex align-items-center gap-10'>\n                                            <span className='rioglyph rioglyph-pencil' />\n                                            <span>Edit Me</span>\n                                        </div>\n                                    ),\n                                },\n                                {\n                                    value: (\n                                        <div className='display-flex align-items-center gap-10'>\n                                            <span className='rioglyph rioglyph-trash' />\n                                            <span>Delete me</span>\n                                        </div>\n                                    ),\n                                },\n                            ]}\n                        />\n                    </span>\n                </td>\n            </tr>\n        );\n    },\n    (prevProps, nextProps) => {\n        return JSON.stringify(prevProps) === JSON.stringify(nextProps);\n    }\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-white rounded border shadow-none padding-15 margin-bottom-15 display-flex justify-content-between\">\n        <div class=\"display-flex gap-25\">\n            <div>\n                <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Active row</div>\n                <div>-</div>\n            </div>\n            <div>\n                <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Selected rows</div>\n                <div>4</div>\n            </div>\n        </div>\n        <div class=\"align-self-center btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Deselect all Items</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Select some rows</button>\n        </div>\n    </div>\n    <div class=\"table-responsive\">\n        <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-hover table-head-filled\">\n            <colgroup>\n                <col class=\"\">\n                <col class=\"\" style=\"min-width: 100px; width: 100px;\">\n                <col class=\"\" style=\"min-width: 200px; width: 200px;\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th class=\"user-select-none sort-column table-checkbox\" title=\"\">\n                        <div class=\"dropdown btn-group\">\n                            <button type=\"button\" id=\"qya2fvaxt4\" class=\"btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-checkboxes\">\n                                </span>\n                            </button>\n                        </div>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"driverId\" data-sortby=\"driverId\" title=\"Id\">\n                        <span>\n                            <span class=\"sort-arrows sort-asc\">\n                            </span>\n                            <span>Id</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"firstName\" data-sortby=\"firstName\" title=\"First name\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>First name</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"lastName\" data-sortby=\"lastName\" title=\"Last name\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Last name</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"email\" data-sortby=\"email\" title=\"E-mail\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>E-mail</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column table-action\" title=\"\">\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr data-id=\"1\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>1</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Hellen</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Dooley</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Kathryn.Larson30@hotmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"4328goteuzw\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"2\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>2</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Alisa</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Ernser</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Raven.Wehner87@hotmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"ehz0jbkuq2m\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"3\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>3</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Rupert</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Gorczany</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Wilson_Rice@hotmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"znapjdgiqj\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"4\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>4</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Bernadette</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Strosin</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Jerald.Mitchell@yahoo.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"m5tm7fednd\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"5\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>5</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Ernie</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Mraz</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Erling.Stamm18@hotmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"on4xbctze5\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"6\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>6</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Asia</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Murray</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Effie.Sporer55@gmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"i6ikgqhqor\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"7\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>7</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Nicholas</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Marquardt</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Waylon.Pacocha99@gmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"xtcn7kkxgr9\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"8\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>8</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Estelle</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Abernathy</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Marlene_Swaniawski@gmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"zin2qik5z8p\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"9\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>9</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Fermin</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Heller</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Irving.Connelly65@gmail.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"pdsd1xlmmp9\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"10\" class=\"cursor-pointer\">\n                    <td class=\"table-checkbox\">\n                        <label class=\"checkbox\" tabindex=\"0\">\n                            <input type=\"checkbox\" class=\"\">\n                            <span class=\"checkbox-text\">\n                            </span>\n                        </label>\n                    </td>\n                    <td data-field=\"Id\">\n                        <span>10</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Wellington</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Koepp</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Gino97@yahoo.com</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"pn7xhusznoe\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useTableSelection` hook",
+                  "rows": [
+                    {
+                      "name": "tableData",
+                      "type": "TData[]",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "idKey",
+                      "type": "keyof TData",
+                      "default": "",
+                      "description": "The key in `TData` objects that serves as the unique identifier for each row."
+                    },
+                    {
+                      "name": "initialSelectedRowIds",
+                      "type": "string[]",
+                      "default": "",
+                      "description": "Optional array of row IDs that should be initially selected."
+                    },
+                    {
+                      "name": "initialActiveRowId",
+                      "type": "string",
+                      "default": "",
+                      "description": "Optional ID of the row that should be initially marked as active."
+                    },
+                    {
+                      "name": "checkboxQuerySelector",
+                      "type": "string",
+                      "default": "'.table-checkbox input[type=\"checkbox\"]'",
+                      "description": "Optional CSS query selector to find the checkbox input element within each table row."
+                    },
+                    {
+                      "name": "dataAttributeName",
+                      "type": "string",
+                      "default": "data-id",
+                      "description": "Optional name of the HTML data attribute on `<tr>` elements that holds the unique row ID."
+                    },
+                    {
+                      "name": "ref",
+                      "type": "RefObject<HTMLTableElement>",
+                      "default": "",
+                      "description": "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."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useTableSelection` hook",
+                  "rows": [
+                    {
+                      "name": "tableRef",
+                      "type": "RefObject<HTMLTableElement>",
+                      "default": "",
+                      "description": "React ref attached to the `<table>` HTML element. Ensure this ref is assigned to your table element to enable DOM manipulations."
+                    },
+                    {
+                      "name": "selectedRowIds",
+                      "type": "string[]",
+                      "default": "",
+                      "description": "An array of strings, where each string is the ID of a currently selected row."
+                    },
+                    {
+                      "name": "setSelectedRowIds",
+                      "type": "(rowIds: string[]) => void",
+                      "default": "",
+                      "description": "Setter function to change selected rows from the outside in a controlled manner."
+                    },
+                    {
+                      "name": "activeRowId",
+                      "type": "string",
+                      "default": "",
+                      "description": "The ID of the currently active row. An empty string signifies no row is active."
+                    },
+                    {
+                      "name": "setActiveRowId",
+                      "type": "(activeRowId: string | undefined) => void",
+                      "default": "",
+                      "description": "Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row."
+                    },
+                    {
+                      "name": "onSelection",
+                      "type": "(event: React.MouseEvent<HTMLElement>) => void",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onActiveRowChange",
+                      "type": "(event: React.MouseEvent<HTMLTableRowElement>) => void",
+                      "default": "",
+                      "description": "Callback handler to be attached to the click event of table row (`<tr>`) elements.Manages the active row state."
+                    },
+                    {
+                      "name": "onToggleAll",
+                      "type": "(shouldSelect: boolean) => void",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "updateRowSelection",
+                      "type": "() => void",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hasSelection",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "A boolean indicating whether at least one row is currently selected."
+                    },
+                    {
+                      "name": "isAllSelected",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "A boolean indicating whether all rows in the current `tableData` are selected."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usetimeout.json

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:37.487Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useTimeout",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/usetimeout",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "378a234187aa4c26ec75c1127937c1fb6f10d707bdbdc89ecdf2c663580f8607"
+  },
+  "title": "useTimeout",
+  "lead": "The useTimeout hook allows for executing some code after a specified amount of time.",
+  "content": [
+    {
+      "heading": "useTimeout",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column justify-content-center align-items-center height-50\"><label>Message:</label><div>...</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport useTimeout from '@rio-cloud/rio-uikit/useTimeout';\n\nexport default () => {\n    const [message, setMessage] = useState('...');\n\n    useTimeout(() => setMessage('Callback invoked'), 2000);\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center height-50'>\n            <label>Message:</label>\n            <div>{message}</div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column justify-content-center align-items-center height-50\">\n    <label>Message:</label>\n    <div>...</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "callback",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback function to be triggered."
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The time to wait until the callback function gets invoked."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usetoggle.json

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:37.469Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useToggle",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/usetoggle",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b8605fbaf4f8186908f40e1040a8fc15a9874aa3348e2f13e9859c024e62262a"
+  },
+  "title": "useToggle",
+  "lead": "The useToggle hook is a custom React hook for managing a boolean state. It provides an intuitive API to toggle, enable, or disable the value. You can optionally initialize it with a default state. Use it to handle toggle-based logic like switches, modals, or content visibility in your React components.",
+  "content": [
+    {
+      "heading": "useToggle",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Usage on buttons</label><p>Toggle is OFF</p><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Enable</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Disable</button></div><hr><label>Usage on a Switch component</label><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\" checked=\"\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div><hr><label>Usage for hiding content</label><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Hide content</button><div style=\"opacity: 1; transform: none;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport useToggle from '@rio-cloud/rio-uikit/useToggle';\nimport Switch from '@rio-cloud/rio-uikit/Switch';\nimport Fade from '@rio-cloud/rio-uikit/Fade';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const { isToggled, toggle, enable, disable } = useToggle();\n\n    const { isToggled: isSwitchToggled, toggle: toggleSwitch } = useToggle(true);\n\n    const { isToggled: isContentShown, toggle: toggleContent } = useToggle(true);\n\n    const handleToggleButton = () => {\n        toggle(newValue => {\n            console.log(`Toggle changed to: ${newValue}`);\n            // Add some tracking here\n        });\n    };\n\n    return (\n        <div>\n            <label>Usage on buttons</label>\n            <p>Toggle is {isToggled ? 'ON' : 'OFF'}</p>\n            <div className='btn-toolbar'>\n                <Button onClick={handleToggleButton}>Toggle</Button>\n                <Button onClick={enable}>Enable</Button>\n                <Button onClick={disable}>Disable</Button>\n            </div>\n            <hr />\n            <label>Usage on a Switch component</label>\n            <Switch checked={isSwitchToggled} onChange={() => toggleSwitch()} />\n            <hr />\n            <label>Usage for hiding content</label>\n            <div>\n                <Button onClick={toggleContent}>{isContentShown ? 'Hide content' : 'Show content'}</Button>\n                <Fade show={isContentShown}>{dummyText}</Fade>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Usage on buttons</label>\n    <p>Toggle is OFF</p>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Enable</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Disable</button>\n    </div>\n    <hr>\n    <label>Usage on a Switch component</label>\n    <div class=\"uikit-switch\">\n        <label class=\"switch-label\">\n            <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n            <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                <div class=\"switch-handle\">\n                </div>\n            </div>\n        </label>\n    </div>\n    <hr>\n    <label>Usage for hiding content</label>\n    <div>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Hide content</button>\n        <div style=\"opacity: 1; transform: none;\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "initialValue",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "The initial state of the toggle. Defaults to false."
+                    },
+                    {
+                      "name": "toggle",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Toggles the current state between true and false. Accepts an optional callback function that executes after the state changes, receiving the new state as an argument."
+                    },
+                    {
+                      "name": "enable",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Sets the toggle state to true."
+                    },
+                    {
+                      "name": "disable",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Sets the toggle state to false."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}