@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,139 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:48.955Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useSorting",
+    "category": "Utilities",
+    "section": "Table & data hooks",
+    "slug": "utilities/usesorting",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "ea7009a45e751b3f14290f1360cb5ec0da7536efff17f26f6fc0b40bd56e912b"
+  },
+  "title": "useSorting",
+  "lead": "The useSorting hook provides an easy way to sort any list by a specified key using natural sort order. It offers flexible control over sorting direction and key selection, making it ideal for dynamic sorting use cases.",
+  "content": [
+    {
+      "heading": "useSorting",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"table-responsive\"><table class=\"table table-head-filled\"><thead><tr><th class=\"user-select-none sort-column\"><span><span class=\"sort-arrows sort-asc\"></span><span>Name</span></span></th><th class=\"user-select-none sort-column\"><span><span class=\"sort-arrows \"></span><span>Quantity</span></span></th></tr></thead><tbody><tr><td>Box</td><td>20</td></tr><tr><td>Container</td><td>1</td></tr><tr><td>Crate</td><td>15</td></tr><tr><td>Drum</td><td>12</td></tr><tr><td>Pallet</td><td>10</td></tr><tr><td>Parcel</td><td>8</td></tr></tbody></table></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SortArrows from '@rio-cloud/rio-uikit/SortArrows';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\n\ntype Item = {\n    name: string;\n    quantity: number;\n};\n\nconst items: Item[] = [\n    { name: 'Pallet', quantity: 10 },\n    { name: 'Container', quantity: 1 },\n    { name: 'Crate', quantity: 15 },\n    { name: 'Parcel', quantity: 8 },\n    { name: 'Drum', quantity: 12 },\n    { name: 'Box', quantity: 20 },\n];\n\nexport default () => {\n    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(items, 'name');\n\n    const handleSortByColumn = (column: keyof Item) => {\n        setSortKey(column);\n        if (column === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    return (\n        <div className='table-responsive'>\n            <table className='table table-head-filled'>\n                <thead>\n                    <tr>\n                        <th className='user-select-none sort-column' onClick={() => handleSortByColumn('name')}>\n                            <span>\n                                {sortKey === 'name' ? <SortArrows direction={sortDirection} /> : <SortArrows />}\n                                <span>Name</span>\n                            </span>\n                        </th>\n                        <th className='user-select-none sort-column' onClick={() => handleSortByColumn('quantity')}>\n                            <span>\n                                {sortKey === 'quantity' ? <SortArrows direction={sortDirection} /> : <SortArrows />}\n                                <span>Quantity</span>\n                            </span>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody>\n                    {sortedItems.map(({ name, quantity }) => (\n                        <tr key={name}>\n                            <td key={name}>{name}</td>\n                            <td key={quantity}>{quantity}</td>\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"table-responsive\">\n    <table class=\"table table-head-filled\">\n        <thead>\n            <tr>\n                <th class=\"user-select-none sort-column\">\n                    <span>\n                        <span class=\"sort-arrows sort-asc\">\n                        </span>\n                        <span>Name</span>\n                    </span>\n                </th>\n                <th class=\"user-select-none sort-column\">\n                    <span>\n                        <span class=\"sort-arrows \">\n                        </span>\n                        <span>Quantity</span>\n                    </span>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>Box</td>\n                <td>20</td>\n            </tr>\n            <tr>\n                <td>Container</td>\n                <td>1</td>\n            </tr>\n            <tr>\n                <td>Crate</td>\n                <td>15</td>\n            </tr>\n            <tr>\n                <td>Drum</td>\n                <td>12</td>\n            </tr>\n            <tr>\n                <td>Pallet</td>\n                <td>10</td>\n            </tr>\n            <tr>\n                <td>Parcel</td>\n                <td>8</td>\n            </tr>\n        </tbody>\n    </table>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The array of items to be sorted."
+                    },
+                    {
+                      "name": "initialKey",
+                      "type": "SortKey<T> = keyof T | [keyof T, keyof T]",
+                      "default": "",
+                      "description": "The initial key or keys to sort by. Must be a property of the items in the array. It can be either a single string or a tuple like ['name', 'date']"
+                    },
+                    {
+                      "name": "initialDirection",
+                      "type": "SortDirectionType",
+                      "default": "SortDirection.ASCENDING",
+                      "description": "The initial sort direction. Can be SortDirection.ASCENDING or SortDirection.DESCENDING."
+                    },
+                    {
+                      "name": "enableNaturalSort",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Whether to use natural sort order. Defaults to false."
+                    },
+                    {
+                      "name": "{ sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection }",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Returns an object containing: \"sortedItems\" - the sorted array \"sortKey\" - the key(s) to sort the data for \"sortDirection\" - the current direction that the data is sorted \"setSortKey\" - function to change the sorting key(s) afterwards \"setSortDirection\" - function to change the sorting order afterwards \"toggleDirection\" - function to toggle sort direction"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><p>Sort by a primary column. Hold <kbd class=\"text-normal\">shift</kbd> key to sort by a secondary column</p><div class=\"table-responsive\"><table class=\"table table-head-filled\"><thead><tr><th class=\"user-select-none sort-column\"><span><span class=\"sort-arrows sort-asc\"></span><span>Category</span></span></th><th class=\"user-select-none sort-column\"><span><span class=\"sort-arrows \"></span><span>Name</span></span></th><th class=\"user-select-none sort-column\"><span><span class=\"sort-arrows \"></span><span>Quantity</span></span></th></tr></thead><tbody><tr><td>Shipping</td><td>Parcel</td><td>8</td></tr><tr><td>Shipping</td><td>Box</td><td>20</td></tr><tr><td>Shipping</td><td>Envelope</td><td>50</td></tr><tr><td>Shipping</td><td>Bag</td><td>30</td></tr><tr><td>Storage</td><td>Pallet</td><td>10</td></tr><tr><td>Storage</td><td>Container</td><td>1</td></tr><tr><td>Storage</td><td>Crate</td><td>15</td></tr><tr><td>Storage</td><td>Drum</td><td>12</td></tr></tbody></table></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SortArrows from '@rio-cloud/rio-uikit/SortArrows';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\n\ntype Item = {\n    name: string;\n    category: string;\n    quantity: number;\n};\n\nconst items: Item[] = [\n    { name: 'Pallet', category: 'Storage', quantity: 10 },\n    { name: 'Container', category: 'Storage', quantity: 1 },\n    { name: 'Crate', category: 'Storage', quantity: 15 },\n    { name: 'Parcel', category: 'Shipping', quantity: 8 },\n    { name: 'Drum', category: 'Storage', quantity: 12 },\n    { name: 'Box', category: 'Shipping', quantity: 20 },\n    { name: 'Envelope', category: 'Shipping', quantity: 50 },\n    { name: 'Bag', category: 'Shipping', quantity: 30 },\n];\n\nexport default () => {\n    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(items, 'category');\n\n    const handleSortByColumn = (column: keyof Item, event: React.MouseEvent) => {\n        if (event.shiftKey) {\n            // Secondary sort\n            if (Array.isArray(sortKey) && sortKey[1] === column) {\n                // If already secondary, toggle direction\n                toggleDirection();\n            } else if (Array.isArray(sortKey)) {\n                // If already using secondary sort, update secondary key\n                setSortKey([sortKey[0], column]);\n            } else {\n                // If not using secondary sort, add secondary key\n                setSortKey([sortKey, column]);\n            }\n        } else {\n            // Primary sort\n            if (sortKey === column || (Array.isArray(sortKey) && sortKey[0] === column)) {\n                // If already primary, toggle direction\n                toggleDirection();\n            } else {\n                // Set new primary key\n                setSortKey(column);\n            }\n        }\n    };\n\n    const renderSortArrows = (column: keyof Item) => {\n        if (sortKey === column || (Array.isArray(sortKey) && sortKey[0] === column)) {\n            return <SortArrows direction={sortDirection} />;\n        }\n        if (Array.isArray(sortKey) && sortKey[1] === column) {\n            return <SortArrows direction={sortDirection} />;\n        }\n        return <SortArrows />;\n    };\n\n    return (\n        <>\n            <p>\n                Sort by a primary column. Hold <kbd className='text-normal'>shift</kbd> key to sort by a secondary\n                column\n            </p>\n            <div className='table-responsive'>\n                <table className='table table-head-filled'>\n                    <thead>\n                        <tr>\n                            <th\n                                className='user-select-none sort-column'\n                                onClick={event => handleSortByColumn('category', event)}\n                            >\n                                <span>\n                                    {renderSortArrows('category')}\n                                    <span>Category</span>\n                                </span>\n                            </th>\n                            <th\n                                className='user-select-none sort-column'\n                                onClick={event => handleSortByColumn('name', event)}\n                            >\n                                <span>\n                                    {renderSortArrows('name')}\n                                    <span>Name</span>\n                                </span>\n                            </th>\n                            <th\n                                className='user-select-none sort-column'\n                                onClick={event => handleSortByColumn('quantity', event)}\n                            >\n                                <span>\n                                    {renderSortArrows('quantity')}\n                                    <span>Quantity</span>\n                                </span>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {sortedItems.map(item => (\n                            <tr key={item.name}>\n                                <td>{item.category}</td>\n                                <td>{item.name}</td>\n                                <td>{item.quantity}</td>\n                            </tr>\n                        ))}\n                    </tbody>\n                </table>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<p>Sort by a primary column. Hold <kbd class=\"text-normal\">shift</kbd> key to sort by a secondary column</p>\n<div class=\"table-responsive\">\n    <table class=\"table table-head-filled\">\n        <thead>\n            <tr>\n                <th class=\"user-select-none sort-column\">\n                    <span>\n                        <span class=\"sort-arrows sort-asc\">\n                        </span>\n                        <span>Category</span>\n                    </span>\n                </th>\n                <th class=\"user-select-none sort-column\">\n                    <span>\n                        <span class=\"sort-arrows \">\n                        </span>\n                        <span>Name</span>\n                    </span>\n                </th>\n                <th class=\"user-select-none sort-column\">\n                    <span>\n                        <span class=\"sort-arrows \">\n                        </span>\n                        <span>Quantity</span>\n                    </span>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>Shipping</td>\n                <td>Parcel</td>\n                <td>8</td>\n            </tr>\n            <tr>\n                <td>Shipping</td>\n                <td>Box</td>\n                <td>20</td>\n            </tr>\n            <tr>\n                <td>Shipping</td>\n                <td>Envelope</td>\n                <td>50</td>\n            </tr>\n            <tr>\n                <td>Shipping</td>\n                <td>Bag</td>\n                <td>30</td>\n            </tr>\n            <tr>\n                <td>Storage</td>\n                <td>Pallet</td>\n                <td>10</td>\n            </tr>\n            <tr>\n                <td>Storage</td>\n                <td>Container</td>\n                <td>1</td>\n            </tr>\n            <tr>\n                <td>Storage</td>\n                <td>Crate</td>\n                <td>15</td>\n            </tr>\n            <tr>\n                <td>Storage</td>\n                <td>Drum</td>\n                <td>12</td>\n            </tr>\n        </tbody>\n    </table>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The array of items to be sorted."
+                    },
+                    {
+                      "name": "initialKey",
+                      "type": "SortKey<T> = keyof T | [keyof T, keyof T]",
+                      "default": "",
+                      "description": "The initial key or keys to sort by. Must be a property of the items in the array. It can be either a single string or a tuple like ['name', 'date']"
+                    },
+                    {
+                      "name": "initialDirection",
+                      "type": "SortDirectionType",
+                      "default": "SortDirection.ASCENDING",
+                      "description": "The initial sort direction. Can be SortDirection.ASCENDING or SortDirection.DESCENDING."
+                    },
+                    {
+                      "name": "enableNaturalSort",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Whether to use natural sort order. Defaults to false."
+                    },
+                    {
+                      "name": "{ sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection }",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Returns an object containing: \"sortedItems\" - the sorted array \"sortKey\" - the key(s) to sort the data for \"sortDirection\" - the current direction that the data is sorted \"setSortKey\" - function to change the sorting key(s) afterwards \"setSortDirection\" - function to change the sorting order afterwards \"toggleDirection\" - function to toggle sort direction"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:46.703Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useStateWithValidation",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "slug": "utilities/usestatewithvalidation",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "77e612c9f88d56aa90c328f41234b4f5544ae865f7b4322aee5b67788acc7e9b"
+  },
+  "title": "useStateWithValidation",
+  "lead": "The useStateWithValidation hook allows to easily validate state. This comes in handy when validating form inputs.",
+  "content": [
+    {
+      "heading": "useStateWithValidation",
+      "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 max-width-400\"><div class=\"form-group \"><label for=\"inputUsername\">Username</label><div class=\"form-control-feedback-wrapper\"><input id=\"inputUsername\" type=\"text\" class=\"form-control\" placeholder=\"Please enter your username\" value=\"\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useStateWithValidation from '@rio-cloud/rio-uikit/useStateWithValidation';\n\nexport default () => {\n    const validationFn = (name: string) => name.length > 5;\n\n    const [username, setUsername, isValid] = useStateWithValidation<string>(validationFn, '');\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setUsername(event.target.value);\n    };\n\n    const showError = username.length > 0 && !isValid;\n\n    return (\n        <div className='display-flex flex-column max-width-400'>\n            <div className={`form-group ${showError ? 'has-error has-feedback' : ''}`}>\n                <label htmlFor='inputUsername'>Username</label>\n                <div className='form-control-feedback-wrapper'>\n                    <input\n                        id='inputUsername'\n                        type='text'\n                        className='form-control'\n                        placeholder='Please enter your username'\n                        value={username}\n                        onChange={handleInputChange}\n                    />\n                    {showError && (\n                        <>\n                            <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n                            <span className='help-block'>\n                                <span>Username is to short. Please enter at least 5 characters.</span>\n                            </span>\n                        </>\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column max-width-400\">\n    <div class=\"form-group \">\n        <label for=\"inputUsername\">Username</label>\n        <div class=\"form-control-feedback-wrapper\">\n            <input id=\"inputUsername\" type=\"text\" class=\"form-control\" placeholder=\"Please enter your username\" value=\"\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "validationFn",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The validation function that gets invoked when the passed state changes."
+                    },
+                    {
+                      "name": "initialValue",
+                      "type": "Any",
+                      "default": "",
+                      "description": "The initial state value."
+                    },
+                    {
+                      "name": "[state, onChange, isValid]",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Returns the actual \"state\", the \"onChange\" function that will be invoked when the state changes, and the \"isValid\" flag."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,86 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:47.989Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useSum",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "slug": "utilities/usesum",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "3e33967495c84f3cb1348ac254d23b0aba0e2edfe8d2f40e1b08e54392fa2c84"
+  },
+  "title": "useSum",
+  "lead": "The useSum hook is a versatile utility for calculating the total of numeric, localized values within a list of objects—particularly useful for rendering totals in table footers, dashboards, or KPIs.",
+  "content": [
+    {
+      "heading": "useSum",
+      "body": "It supports locale-aware number parsing (e.g. 1.234,50 € or 2 500,75 kg)",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><ul><li>3.930,75 km</li><li>5.197&nbsp;€</li><li>1860min</li><li>31h</li><li>185 km</li></ul></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber, IntlProvider } from 'react-intl';\n\nimport useSum from '@rio-cloud/rio-uikit/useSum';\n\nexport default () => {\n    const weightSum = useSum(deliveries, 'shipment.weight', { locale: 'de-DE' });\n    const valueSum = useSum(deliveries, 'shipment.value', { locale: 'de-DE' });\n\n    const durationSum = useSum(deliveries, 'shipment.duration');\n\n    const mileage = useSum(deliveries, 'vehicle.mileage');\n\n    return (\n        <IntlProvider locale='de-DE'>\n            <ul>\n                <li>\n                    <FormattedNumber\n                        value={weightSum}\n                        minimumFractionDigits={0}\n                        maximumFractionDigits={2}\n                        style='unit'\n                        unit='kilometer'\n                    />\n                </li>\n                <li>\n                    <FormattedNumber\n                        value={valueSum}\n                        style='currency'\n                        currency='EUR'\n                        minimumFractionDigits={0}\n                        maximumFractionDigits={0}\n                    />\n                </li>\n                <li>{durationSum}min</li>\n                <li>\n                    <FormattedNumber value={durationSum / 60} maximumFractionDigits={1} />h\n                </li>\n                <li>\n                    <FormattedNumber value={mileage} maximumFractionDigits={0} style='unit' unit='kilometer' />\n                </li>\n            </ul>\n        </IntlProvider>\n    );\n};\n\nconst deliveries = [\n    {\n        id: 'D-1001',\n        vehicle: {\n            mileage: 97.5,\n        },\n        shipment: {\n            weight: '1.200,5 kg',\n            value: '2.345,50 €',\n            duration: 90, // raw minutes\n        },\n    },\n    {\n        id: 'D-1002',\n        vehicle: {\n            mileage: 10,\n        },\n        shipment: {\n            weight: '980,25 kg',\n            value: '1,000.75€',\n            duration: 150, // raw minutes\n        },\n    },\n    {\n        id: 'D-1003',\n        vehicle: {\n            mileage: 56,\n        },\n        shipment: {\n            weight: '750kg',\n            value: 850,\n            duration: 1440, // raw minutes\n        },\n    },\n    {\n        id: 'D-1004',\n        vehicle: {\n            mileage: 21,\n        },\n        shipment: {\n            weight: '1.000 kg',\n            value: '2.000,00 €',\n            duration: 180, // raw minutes\n        },\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<ul>\n    <li>3.930,75 km</li>\n    <li>5.197&nbsp;€</li>\n    <li>1860min</li>\n    <li>31h</li>\n    <li>185 km</li>\n</ul>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useSum` hook",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "unknown[]",
+                      "default": "",
+                      "description": "The array of objects to aggregate values from."
+                    },
+                    {
+                      "name": "path",
+                      "type": "string",
+                      "default": "",
+                      "description": "Dot-separated path to the numeric value in each object."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Optional configuration for parsing behavior."
+                    },
+                    {
+                      "name": "└locale",
+                      "type": "string",
+                      "default": "\"en-GB\"",
+                      "description": "Locale string used to parse localized number formats. Affects how grouping and decimal separators are interpreted."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useSum` hook",
+                  "rows": [
+                    {
+                      "name": "sum",
+                      "type": "number",
+                      "default": "",
+                      "description": "The total sum of all parsed values from the provided path in the given item list."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,87 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:48.453Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useTableExport",
+    "category": "Utilities",
+    "section": "Table & data hooks",
+    "slug": "utilities/usetableexport",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "06bc73eccf7c068c3d801e0cd591181440cea0187f99cf7e009173016573a69c"
+  },
+  "title": "useTableExport",
+  "lead": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
+  "content": [
+    {
+      "heading": "useTableExport",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"table-toolbar\"><div class=\"table-toolbar-container\"><div class=\"table-toolbar-group-right\"><div class=\"table-toolbar-column\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-download\"></span>Export data</button></div></div></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>Christa</span></td><td data-field=\"Last name\"><span>O'Connell</span></td><td data-field=\"E-mail\"><span>Elizabeth_McCullough@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>Sandrine</span></td><td data-field=\"Last name\"><span>Cartwright</span></td><td data-field=\"E-mail\"><span>Clint55@gmail.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>Jennie</span></td><td data-field=\"Last name\"><span>Lubowitz</span></td><td data-field=\"E-mail\"><span>Arnold.Gusikowski68@gmail.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>Roman</span></td><td data-field=\"Last name\"><span>Davis</span></td><td data-field=\"E-mail\"><span>Rosetta_Johns@hotmail.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>Oren</span></td><td data-field=\"Last name\"><span>Jacobi</span></td><td data-field=\"E-mail\"><span>Sabryna.Lebsack69@gmail.com</span></td></tr><tr data-id=\"6\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>6</span></td><td data-field=\"First name\"><span>Jedediah</span></td><td data-field=\"Last name\"><span>Russel</span></td><td data-field=\"E-mail\"><span>Kennedi_Kerluke@hotmail.com</span></td></tr><tr data-id=\"7\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>7</span></td><td data-field=\"First name\"><span>Brianne</span></td><td data-field=\"Last name\"><span>Heller</span></td><td data-field=\"E-mail\"><span>Jarvis76@yahoo.com</span></td></tr><tr data-id=\"8\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>8</span></td><td data-field=\"First name\"><span>Rosario</span></td><td data-field=\"Last name\"><span>Gleichner</span></td><td data-field=\"E-mail\"><span>Larry.Durgan50@hotmail.com</span></td></tr><tr data-id=\"9\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>9</span></td><td data-field=\"First name\"><span>Crystal</span></td><td data-field=\"Last name\"><span>Carter</span></td><td data-field=\"E-mail\"><span>Elsie63@yahoo.com</span></td></tr><tr data-id=\"10\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>10</span></td><td data-field=\"First name\"><span>Beatrice</span></td><td data-field=\"Last name\"><span>Bashirian</span></td><td data-field=\"E-mail\"><span>Johnpaul71@yahoo.com</span></td></tr></tbody></table></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import 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 TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport useTableExport from '@rio-cloud/rio-uikit/useTableExport';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\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: 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    // Hook to export the Table data\n    const { exportToCSV } = useTableExport<Driver>();\n\n    const handleTableExport = () => {\n        exportToCSV({\n            data: sortedItems,\n            fileName: 'drivers.csv',\n            headers: columnLabels,\n        });\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            <TableToolbar>\n                <div className='table-toolbar-container'>\n                    <div className='table-toolbar-group-right'>\n                        <div className='table-toolbar-column'>\n                            <Button iconName='rioglyph-download' onClick={handleTableExport}>\n                                Export data\n                            </Button>\n                        </div>\n                    </div>\n                </div>\n            </TableToolbar>\n\n            <div className='table-responsive'>\n                <table 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                            <tr key={row.driverId} data-id={row.driverId} className='cursor-pointer'>\n                                {defaultColumnOrder.map(col => (\n                                    <td key={col} data-field={columnLabels[col as keyof Driver]}>\n                                        <span>{row[col as keyof Driver]}</span>\n                                    </td>\n                                ))}\n                            </tr>\n                        ))}\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"table-toolbar\">\n        <div class=\"table-toolbar-container\">\n            <div class=\"table-toolbar-group-right\">\n                <div class=\"table-toolbar-column\">\n                    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-download\">\n                        </span>Export data</button>\n                </div>\n            </div>\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>Christa</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>O'Connell</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Elizabeth_McCullough@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>Sandrine</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Cartwright</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Clint55@gmail.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>Jennie</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Lubowitz</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Arnold.Gusikowski68@gmail.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>Roman</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Davis</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Rosetta_Johns@hotmail.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>Oren</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Jacobi</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Sabryna.Lebsack69@gmail.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"6\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>6</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Jedediah</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Russel</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Kennedi_Kerluke@hotmail.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"7\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>7</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Brianne</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Heller</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Jarvis76@yahoo.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"8\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>8</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Rosario</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Gleichner</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Larry.Durgan50@hotmail.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"9\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>9</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Crystal</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Carter</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Elsie63@yahoo.com</span>\n                    </td>\n                </tr>\n                <tr data-id=\"10\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>10</span>\n                    </td>\n                    <td data-field=\"First name\">\n                        <span>Beatrice</span>\n                    </td>\n                    <td data-field=\"Last name\">\n                        <span>Bashirian</span>\n                    </td>\n                    <td data-field=\"E-mail\">\n                        <span>Johnpaul71@yahoo.com</span>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options of the returned `exportToCSV` function",
+                  "rows": [
+                    {
+                      "name": "data",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "Array of data objects to export. Each object represents one row in the table."
+                    },
+                    {
+                      "name": "fileName",
+                      "type": "string",
+                      "default": "export.csv",
+                      "description": "Optional name for the exported file."
+                    },
+                    {
+                      "name": "columns",
+                      "type": "(keyof T)[]",
+                      "default": "",
+                      "description": "Optional list of object keys to export as columns. If omitted, all keys from the first row will be used."
+                    },
+                    {
+                      "name": "headers",
+                      "type": "Partial<Record<keyof T, string>>",
+                      "default": "",
+                      "description": "Optional map of column keys to custom header labels. Example: { firstName: 'First Name' }"
+                    },
+                    {
+                      "name": "delimiter",
+                      "type": "string",
+                      "default": ",",
+                      "description": "Optional delimiter to use between values in the CSV. You can use `\";\"` or `\"\\t\"` for other formats."
+                    },
+                    {
+                      "name": "withBom",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Whether to include UTF-8 BOM (useful for Excel)."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}