@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/tables.json

@@ -0,0 +1,144 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:45.052Z",
+    "source": "https://uikit.developers.rio.cloud/#components/tables",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/tables",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "305cd47c4c06039e5ecb2daf3acaeb59eeb6329e1e9470bad68eade956e9caee"
+  },
+  "title": "Table Toolbar",
+  "lead": "The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.",
+  "content": [
+    {
+      "heading": "Table Toolbar",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"table-toolbar\"><div class=\"table-toolbar-container\"><div class=\"table-toolbar-group-left\"><div class=\"table-toolbar-column\"><label class=\"table-toolbar-label\">TableToolbar label</label><div class=\"min-width-200\"><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Select Date\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th><th class=\"rdtNext\"><span>›</span></th></tr><tr><th class=\"dow\">Su</th><th class=\"dow\">Mo</th><th class=\"dow\">Tu</th><th class=\"dow\">We</th><th class=\"dow\">Th</th><th class=\"dow\">Fr</th><th class=\"dow\">Sa</th></tr></thead><tbody><tr><td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td><td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td><td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td><td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td><td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td><td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td><td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td></tr><tr><td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td><td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td><td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td><td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td><td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td><td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td><td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td></tr><tr><td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td><td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td><td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td><td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td><td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td><td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td><td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td></tr><tr><td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td><td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td><td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td><td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td><td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td><td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td><td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td></tr><tr><td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td><td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td><td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td><td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td><td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td><td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td><td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td></tr><tr><td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td><td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td><td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td><td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td><td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td><td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td><td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td></tr></tbody><tfoot><tr><td colspan=\"7\" class=\"rdtTimeToggle\">12:00 AM</td></tr></tfoot></table></div></div></div></div></div><div class=\"table-toolbar-column\"><label class=\"table-toolbar-label\">TableToolbar label</label><div class=\"btn-toolbar table-btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">TableToolbar button</button></div></div></div><div class=\"table-toolbar-group-right\"><div class=\"table-toolbar-column\"><label class=\"table-toolbar-label\">TableToolbar label</label><div class=\"table-toolbar-search input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" placeholder=\"Search in table\" class=\"form-control\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"table-toolbar-column table-toolbar-column-spacer\"><label class=\"table-toolbar-label\">TableToolbar label</label><div class=\"btn-toolbar\"><div class=\"TableViewToggles btn-group display-flex flex-row\"><button class=\"btn btn-default btn-icon-only active\" type=\"button\"><span class=\"rioglyph rioglyph-table-view\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-th-list\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-split-view\"></span></button></div></div></div><div class=\"table-toolbar-column\"><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-settings\"></span></button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport DatePicker from '@rio-cloud/rio-uikit/DatePicker';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';\n\nconst TableToolbarDemo = () => (\n    <TableToolbar>\n        {/* table-toolbar-container */}\n        <div className='table-toolbar-container'>\n            {/* table-toolbar-group-left */}\n            <div className='table-toolbar-group-left'>\n                {/* table-toolbar-column */}\n                <div className='table-toolbar-column'>\n                    <label className='table-toolbar-label'>TableToolbar label</label>\n                    <div className='min-width-200'>\n                        <DatePicker inputProps={{ placeholder: 'Select Date' }} />\n                    </div>\n                </div>\n                <div className='table-toolbar-column'>\n                    <label className='table-toolbar-label'>TableToolbar label</label>\n                    <div className='btn-toolbar table-btn-toolbar'>\n                        <Button bsStyle={Button.PRIMARY}>TableToolbar button</Button>\n                    </div>\n                </div>\n            </div>\n\n            {/* table-toolbar-group-right */}\n            <div className='table-toolbar-group-right'>\n                {/* table-toolbar-column */}\n                <div className='table-toolbar-column'>\n                    <label className='table-toolbar-label'>TableToolbar label</label>\n                    <div className='table-toolbar-search input-group'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' />\n                        </span>\n                        <div className='ClearableInput input-group'>\n                            <input type='text' placeholder='Search in table' className='form-control' />\n                            <span className='clearButton hide'>\n                                <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div className='table-toolbar-column table-toolbar-column-spacer'>\n                    <label className='table-toolbar-label'>TableToolbar label</label>\n                    <div className='btn-toolbar'>\n                        <TableViewToggles\n                            initialViewType={TableViewToggles.VIEW_TYPE_TABLE}\n                            tableViewTooltipContent='Table view'\n                            singleCardViewTooltipContent='List view'\n                            multiCardsViewTooltipContent='Cards view'\n                            onViewTypeChange={(viewType: TableViewTogglesViewType) => console.log(viewType)}\n                        />\n                    </div>\n                </div>\n                <div className='table-toolbar-column'>\n                    <Button iconOnly iconName='rioglyph-settings' />\n                </div>\n            </div>\n        </div>\n    </TableToolbar>\n);\n\nexport default TableToolbarDemo;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"table-toolbar\">\n    <div class=\"table-toolbar-container\">\n        <div class=\"table-toolbar-group-left\">\n            <div class=\"table-toolbar-column\">\n                <label class=\"table-toolbar-label\">TableToolbar label</label>\n                <div class=\"min-width-200\">\n                    <div class=\"rdt DatePicker form-group\">\n                        <div class=\"input-group\">\n                            <span class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                                </span>\n                            </span>\n                            <div class=\"ClearableInput input-group\">\n                                <input type=\"text\" class=\"form-control\" placeholder=\"Select Date\" value=\"\">\n                            </div>\n                        </div>\n                        <div class=\"rdtPicker\">\n                            <div class=\"rdtDays\">\n                                <table>\n                                    <thead>\n                                        <tr>\n                                            <th class=\"rdtPrev\">\n                                                <span>‹</span>\n                                            </th>\n                                            <th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th>\n                                            <th class=\"rdtNext\">\n                                                <span>›</span>\n                                            </th>\n                                        </tr>\n                                        <tr>\n                                            <th class=\"dow\">Su</th>\n                                            <th class=\"dow\">Mo</th>\n                                            <th class=\"dow\">Tu</th>\n                                            <th class=\"dow\">We</th>\n                                            <th class=\"dow\">Th</th>\n                                            <th class=\"dow\">Fr</th>\n                                            <th class=\"dow\">Sa</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr>\n                                            <td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td>\n                                            <td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td>\n                                            <td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td>\n                                            <td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td>\n                                            <td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td>\n                                            <td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td>\n                                            <td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td>\n                                            <td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td>\n                                            <td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td>\n                                            <td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td>\n                                            <td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td>\n                                            <td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td>\n                                            <td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td>\n                                            <td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td>\n                                            <td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td>\n                                            <td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td>\n                                            <td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td>\n                                            <td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td>\n                                            <td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td>\n                                            <td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td>\n                                            <td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td>\n                                            <td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td>\n                                            <td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td>\n                                            <td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td>\n                                            <td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td>\n                                            <td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td>\n                                            <td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td>\n                                            <td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td>\n                                            <td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td>\n                                            <td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td>\n                                            <td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td>\n                                            <td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td>\n                                            <td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td>\n                                            <td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td>\n                                            <td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td>\n                                            <td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td>\n                                            <td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td>\n                                        </tr>\n                                    </tbody>\n                                    <tfoot>\n                                        <tr>\n                                            <td colspan=\"7\" class=\"rdtTimeToggle\">12:00 AM</td>\n                                        </tr>\n                                    </tfoot>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"table-toolbar-column\">\n                <label class=\"table-toolbar-label\">TableToolbar label</label>\n                <div class=\"btn-toolbar table-btn-toolbar\">\n                    <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">TableToolbar button</button>\n                </div>\n            </div>\n        </div>\n        <div class=\"table-toolbar-group-right\">\n            <div class=\"table-toolbar-column\">\n                <label class=\"table-toolbar-label\">TableToolbar label</label>\n                <div class=\"table-toolbar-search input-group\">\n                    <span class=\"input-group-addon\">\n                        <span class=\"rioglyph rioglyph-search\">\n                        </span>\n                    </span>\n                    <div class=\"ClearableInput input-group\">\n                        <input type=\"text\" placeholder=\"Search in table\" class=\"form-control\">\n                        <span class=\"clearButton hide\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"table-toolbar-column table-toolbar-column-spacer\">\n                <label class=\"table-toolbar-label\">TableToolbar label</label>\n                <div class=\"btn-toolbar\">\n                    <div class=\"TableViewToggles btn-group display-flex flex-row\">\n                        <button class=\"btn btn-default btn-icon-only active\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-table-view\">\n                            </span>\n                        </button>\n                        <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-th-list\">\n                            </span>\n                        </button>\n                        <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-split-view\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"table-toolbar-column\">\n                <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                    <span class=\"rioglyph rioglyph-settings\">\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class names for the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to be added to the toolbar."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "TableToolbar, TableSearch, TableViewToggles, TableCardsSorting, TableSettingsDialog, TableHead, and TableCol",
+      "body": "InfoIn order to have proper alignment of table cell content for list and cards view, it is required to wrap the content in a <span> tag.",
+      "examples": [
+        {
+          "caption": "Label",
+          "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-left\"><div class=\"table-toolbar-column\"><div class=\"display-grid grid-cols-3 display-flex-ls btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-plus\"></span>New</button><div class=\"dropdown btn-group\"><button type=\"button\" id=\"myActionButton\" class=\"btn btn-default btn-md btn-component dropdown-toggle\" tabindex=\"0\">Button<span class=\"caret\"></span></button></div></div></div></div><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-filter\"></span>Filter</button></div><div class=\"table-toolbar-column table-toolbar-column-spacer\"><div class=\"table-toolbar-search input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Search in table\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"table-toolbar-column display-flex flex-row align-items-end gap-15\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 table-toolbar-label\">Label</div><div class=\"TableViewToggles btn-group display-flex flex-row\"><button class=\"btn btn-default btn-icon-only active\" type=\"button\"><span class=\"rioglyph rioglyph-table-view\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-th-list\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-split-view\"></span></button></div></div><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-settings\"></span></button></div></div></div></div><div class=\"table-responsive\"><table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled\"><colgroup><col class=\"\" style=\"min-width: 60px; width: 60px;\"><col class=\"\" style=\"min-width: 200px; width: 200px;\"><col class=\"\"><col class=\"\"><col class=\"\"><col class=\"table-action\"></colgroup><thead><tr><th class=\"user-select-none sort-column\" data-field=\"vehicleId\" data-sortby=\"vehicleId\" title=\"Id\"><span><span class=\"sort-arrows sort-asc\"></span><span>Id</span></span></th><th class=\"user-select-none sort-column\" data-field=\"name\" data-sortby=\"name\" title=\"Name\"><span><span class=\"sort-arrows \"></span><span>Name</span></span></th><th class=\"user-select-none sort-column\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\"><span><span class=\"sort-arrows \"></span><span>VIN</span></span></th><th class=\"user-select-none sort-column\" data-field=\"status\" data-sortby=\"status\" title=\"Status\"><span><span class=\"sort-arrows \"></span><span>Status</span></span></th><th class=\"user-select-none sort-column\" data-field=\"duration\" data-sortby=\"duration\" title=\"Duration\"><span><span class=\"sort-arrows \"></span><span>Duration</span></span></th><th class=\"user-select-none sort-column table-action\" title=\"\"></th></tr></thead><tbody><tr data-id=\"233\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>233</span></td><td data-field=\"Name\"><span>Ipsum</span></td><td data-field=\"VIN\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"Status\"><span>Inactive</span></td><td data-field=\"Duration\"><span>5h 15m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"wtf950ll54\" 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=\"456\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>456</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>456</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>4h 55m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"07rxckp6ijs3\" 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=\"878\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>878</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>878</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>9h 10m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"pqvpbm1zjl\" 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=\"895\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>895</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>895</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>8h 45m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"cy7k97feit7\" 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=\"978\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>978</span></td><td data-field=\"Name\"><span>Ipsum</span></td><td data-field=\"VIN\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"Status\"><span>Inactive</span></td><td data-field=\"Duration\"><span>6h 35m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"q1kkm1zsk3k\" 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=\"2345\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>2345</span></td><td data-field=\"Name\"><span>Lorem</span></td><td data-field=\"VIN\"><span>2345</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>11h 50m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"26y37r3ynux\" 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=\"2445\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>2445</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>2445</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>7h 25m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"hd96429lbgv\" 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=\"3456\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>3456</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>3456</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>12h 00m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"0hw4uighsiiu\" 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=\"4567\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>4567</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>4567</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>10h 20m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"6421btbpohw\" 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=\"7354\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>7354</span></td><td data-field=\"Name\"><span>Lorem</span></td><td data-field=\"VIN\"><span>7354</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>10h 30m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"4na9bzjk4v\" 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 class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr></tbody></table></div><div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\"><div class=\"min-width-150\"><div class=\"text-center margin-bottom-3\"><span class=\"text-medium\">70</span><span class=\"margin-left-5 margin-right-5\">/</span><span class=\"text-medium\">100</span></div><div class=\"progress height-2 margin-bottom-10 bg-white\"><div class=\"progress-bar\" style=\"width: 70%;\"></div></div><div class=\"display-flex justify-content-center\"><button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\"><span class=\"rioglyph rioglyph-arrow-down\"></span>Load more</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useMemo, useState } from 'react';\nimport omit from 'lodash/fp/omit';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport classNames from 'classnames';\n\nimport TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';\nimport TableSearch from '@rio-cloud/rio-uikit/TableSearch';\nimport TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';\nimport TableSettingsDialog from '@rio-cloud/rio-uikit/TableSettingsDialog';\nimport type { SortDirectionType } from '@rio-cloud/rio-uikit/SortDirection';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';\nimport NoData from '@rio-cloud/rio-uikit/NoData';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\nimport useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';\nimport TableCol from '@rio-cloud/rio-uikit/TableCol';\nimport TableHead from '@rio-cloud/rio-uikit/TableHead';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\n\nconst defaultColumnOrder = ['vehicleId', 'name', 'vin', 'status', 'duration'];\nconst disabledColumns = ['vin'];\n\ntype ColumnLabel = { [key: string]: string };\n\nconst columnLabels: ColumnLabel = {\n    vehicleId: 'Id',\n    name: 'Name',\n    vin: 'VIN',\n    status: 'Status',\n    duration: 'Duration',\n};\n\ntype ColumnDetails = {\n    [key: string]: number;\n};\n\ntype ColumnDetailsMap = {\n    [key: string]: ColumnDetails;\n};\n\nconst demoColumnsDetails: ColumnDetailsMap = {\n    vehicleId: {\n        width: 60,\n        defaultWidth: 60,\n        maxWidth: 300,\n    },\n    name: {\n        width: 200,\n        defaultWidth: 200,\n        maxWidth: 350,\n    },\n    // Note: 0 means auto width\n    vin: {\n        width: 0,\n        defaultWidth: 0,\n        maxWidth: 350,\n    },\n    status: {\n        // Not defined as it will be defined when its used\n        // width: 350,\n        // defaultWidth: 0,\n    },\n};\n\ntype Vehicle = {\n    vehicleId: number;\n    name: string | null;\n    vin: string | null;\n    status: string;\n    duration: string;\n};\n\nconst vehicleList: Vehicle[] = [\n    {\n        vehicleId: 7354,\n        name: 'Lorem',\n        vin: '7354',\n        status: 'Active',\n        duration: '10h 30m',\n    },\n    {\n        vehicleId: 233,\n        name: 'Ipsum',\n        vin: null,\n        status: 'Inactive',\n        duration: '5h 15m',\n    },\n    {\n        vehicleId: 895,\n        name: null,\n        vin: '895',\n        status: 'Active',\n        duration: '8h 45m',\n    },\n    {\n        vehicleId: 3456,\n        name: null,\n        vin: '3456',\n        status: 'Active',\n        duration: '12h 00m',\n    },\n    {\n        vehicleId: 2445,\n        name: null,\n        vin: '2445',\n        status: 'Active',\n        duration: '7h 25m',\n    },\n    {\n        vehicleId: 878,\n        name: null,\n        vin: '878',\n        status: 'Active',\n        duration: '9h 10m',\n    },\n    {\n        vehicleId: 2345,\n        name: 'Lorem',\n        vin: '2345',\n        status: 'Active',\n        duration: '11h 50m',\n    },\n    {\n        vehicleId: 978,\n        name: 'Ipsum',\n        vin: null,\n        status: 'Inactive',\n        duration: '6h 35m',\n    },\n    {\n        vehicleId: 456,\n        name: null,\n        vin: '456',\n        status: 'Active',\n        duration: '4h 55m',\n    },\n    {\n        vehicleId: 4567,\n        name: null,\n        vin: '4567',\n        status: 'Active',\n        duration: '10h 20m',\n    },\n];\n\nconst dummyActionOptions = [\n    { value: 'Option 1', onSelect: () => {} },\n    { value: 'Option 2', onSelect: () => {} },\n    { value: 'Option 3', onSelect: () => {} },\n    { divider: true },\n    { value: 'Option 4', onSelect: () => {}, disabled: true },\n];\n\nexport type TableCommonDemoProps = {\n    viewType: TableViewTogglesViewType;\n};\n\nconst TableCommonDemo = (props: TableCommonDemoProps) => {\n    const { viewType: externalViewType } = props;\n\n    const [searchValue, setSearchValue] = useState('');\n    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState(false);\n\n    const [showFilterDialog, setShowFilterDialog] = useState(false);\n    const [filter, setFilter] = useState<TableFilterKey[]>([]);\n\n    const [columnOrder, setColumnOrder] = useState<string[]>(defaultColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);\n    const [columnsDetails, setColumnsDetails] = useState(demoColumnsDetails);\n\n    const [viewType, setViewType] = useState(externalViewType || TableViewToggles.VIEW_TYPE_TABLE);\n\n    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(\n        vehicleList,\n        'vehicleId'\n    );\n\n    const { tableRef, updateRowSelection, activeRowId, onActiveRowChange } = useTableSelection<Vehicle>({\n        tableData: vehicleList,\n        idKey: 'vehicleId' as keyof Vehicle, // Specify the unique identifier key\n    });\n\n    // console.log({ activeRowId });\n\n    // When the search value changes and hence the rendered rows, update the highlighting and selection\n    useEffect(() => updateRowSelection(), [searchValue]);\n\n    const handleToggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);\n    const handleViewTypeChange = (newViewType: TableViewTogglesViewType) => setViewType(newViewType);\n    const handleSearchValueChange = (newSearchValue: string) => setSearchValue(newSearchValue);\n\n    const handleColumnChange = (\n        newColumnOrder: string[],\n        newHiddenColumns: string[],\n        newColumnsDetails = columnsDetails\n    ) => {\n        setColumnOrder(newColumnOrder);\n        setHiddenColumns(newHiddenColumns);\n        setColumnsDetails(newColumnsDetails);\n    };\n\n    // For immediate effect\n    const handleColumnDetailsChange = (column: string, newColumnDetails: ColumnDetails) => {\n        const updatedColumnsDetails = { ...columnsDetails };\n        updatedColumnsDetails[column] = newColumnDetails;\n        setColumnsDetails(updatedColumnsDetails);\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 Vehicle);\n        }\n        if (newSortBy === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    const handleCardSortChange = (newSortBy: string, newSortDir: SortDirectionType) => {\n        setSortKey(newSortBy as keyof Vehicle);\n        setSortDirection(newSortDir);\n    };\n\n    // Filter for hidden columns\n    const columns = columnOrder.filter(name => !hiddenColumns.includes(name));\n\n    // Filter data to omit hidden columns\n    const withoutHidden = omit(hiddenColumns);\n    const filteredRows = sortedItems.map(vehicle => ({ ...withoutHidden(vehicle) })) as Vehicle[];\n\n    // In case a search value is given, filter the data accordingly\n    const searchResult = useMemo(() => {\n        if (!searchValue) {\n            return filteredRows;\n        }\n        return filteredRows.filter((row: Partial<Vehicle>) =>\n            columns.some(col => {\n                const value = row[col as keyof Vehicle];\n                if (value == null) {\n                    return false;\n                }\n                return String(value).toLowerCase().includes(searchValue.toLowerCase());\n            })\n        );\n    }, [searchValue, filteredRows, columns]);\n\n    // Filter according to filter dialog settings\n    const rows = useMemo(() => applyFilter(searchResult, filter), [searchResult, filter]);\n\n    const tableClassNames = classNames(\n        'table',\n        'table-layout-fixed',\n        'table-column-overflow-hidden',\n        'table-bordered',\n        'table-sticky',\n        'table-head-filled',\n        viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'table-cards table-single-card',\n        viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'table-cards table-multi-cards'\n    );\n\n    const isViewTypeTable = viewType === TableViewToggles.VIEW_TYPE_TABLE;\n\n    const cardSortingSelectOptions = columns.map(column => {\n        return {\n            id: column,\n            label: columnLabels[column],\n            selected: column === sortKey,\n            disabled: false,\n        };\n    });\n\n    return (\n        <div>\n            <TableToolbar>\n                <div className='table-toolbar-container'>\n                    <div className='table-toolbar-group-left'>\n                        <div className='table-toolbar-column'>\n                            <ButtonToolbar className='display-grid grid-cols-3 display-flex-ls'>\n                                <Button bsStyle={Button.PRIMARY} iconName='rioglyph-plus'>\n                                    New\n                                </Button>\n                                <ButtonDropdown id='myActionButton' title='Button' items={dummyActionOptions} />\n                            </ButtonToolbar>\n                        </div>\n                    </div>\n                    <div className='table-toolbar-group-right'>\n                        <div className='table-toolbar-column'>\n                            <Button\n                                iconName={isEmpty(filter) ? 'rioglyph-filter' : 'rioglyph-filter-active'}\n                                onClick={() => setShowFilterDialog(true)}\n                            >\n                                Filter\n                            </Button>\n                            <TableFilterDialog\n                                show={showFilterDialog}\n                                onClose={() => setShowFilterDialog(false)}\n                                filter={filter}\n                                onSetFilter={setFilter}\n                            />\n                        </div>\n                        <div className='table-toolbar-column table-toolbar-column-spacer'>\n                            <TableSearch\n                                value={searchValue}\n                                onChange={handleSearchValueChange}\n                                placeholder='Search in table'\n                            />\n                        </div>\n                        <div className='table-toolbar-column display-flex flex-row align-items-end gap-15'>\n                            <div>\n                                <FormLabel className='table-toolbar-label'>Label</FormLabel>\n                                <TableViewToggles\n                                    initialViewType={viewType}\n                                    onViewTypeChange={handleViewTypeChange}\n                                    tableViewTooltipContent='Table view'\n                                    singleCardViewTooltipContent='List view'\n                                    multiCardsViewTooltipContent='Cards view'\n                                />\n                            </div>\n                            <Button iconOnly iconName='rioglyph-settings' onClick={handleToggleTableSettingsDialog} />\n                        </div>\n                    </div>\n                    {showTableSettingsDialog && (\n                        <TableSettingsDialog\n                            show={showTableSettingsDialog}\n                            title='Table settings'\n                            onHide={handleToggleTableSettingsDialog}\n                            onColumnChange={handleColumnChange}\n                            defaultColumnOrder={defaultColumnOrder}\n                            defaultHiddenColumns={[]}\n                            columnOrder={columnOrder}\n                            hiddenColumns={hiddenColumns}\n                            columnLabels={columnLabels}\n                            disabledColumns={disabledColumns}\n                            closeButtonText='Close'\n                            resetButtonText='Reset to default'\n                            searchPlaceholder='Search by column name'\n                            notFoundMessage='No column found for this search value'\n                            columnsDetails={columnsDetails}\n                            autoLabel='Auto'\n                            onColumnDetailsChange={handleColumnDetailsChange}\n                            onSearchChange={(val: string) => console.log(val)}\n                            immediateChange\n                        />\n                    )}\n                </div>\n            </TableToolbar>\n            {sortKey && !isViewTypeTable && (\n                <TableCardsSorting\n                    selectOptions={cardSortingSelectOptions}\n                    sortName={sortKey as string}\n                    sortOrder={sortDirection}\n                    onSortChange={handleCardSortChange}\n                />\n            )}\n            <div className='table-responsive'>\n                {isEmpty(rows) && !isViewTypeTable && (\n                    <NotFoundState headline='Nothing found' message='Please refine your search' />\n                )}\n                <table ref={tableRef} className={tableClassNames}>\n                    <colgroup>\n                        {columns.map(column => (\n                            <TableCol key={column} columnDetails={columnsDetails[column]} />\n                        ))}\n                        <TableCol className='table-action' />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            {columns.map(column => (\n                                <TableHead\n                                    key={column}\n                                    label={columnLabels[column]}\n                                    column={column}\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                        {isEmpty(rows) && isViewTypeTable && (\n                            <tr>\n                                <td colSpan={columns.length + 1}>\n                                    <NotFoundState\n                                        outerClassName='border-none'\n                                        headline='Nothing found'\n                                        message='Please refine your search'\n                                    />\n                                </td>\n                            </tr>\n                        )}\n                        {rows.map(row => (\n                            <tr\n                                key={row.vehicleId}\n                                data-id={row.vehicleId}\n                                onClick={onActiveRowChange}\n                                className='cursor-pointer'\n                            >\n                                {columns.map(col => {\n                                    const item = row[col as keyof Vehicle] ?? <NoData text='No data' />;\n                                    return (\n                                        <td key={col} data-field={columnLabels[col]}>\n                                            <span>{item}</span>\n                                        </td>\n                                    );\n                                })}\n                                <td className='table-action'>\n                                    <DummyRowDropdown />\n                                </td>\n                            </tr>\n                        ))}\n                        {/* Placeholder workaround for equal with cards of the last row */}\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                    </tbody>\n                </table>\n            </div>\n            <LoadMoreButton\n                loaded={70}\n                total={100}\n                onLoadMore={() => {}}\n                loadMoreMessage='Load more'\n                noMoreMessage='Everything loaded'\n            />\n        </div>\n    );\n};\n\nconst DummyRowDropdown = () => (\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</span>\n                        </div>\n                    ),\n                },\n                {\n                    value: (\n                        <div className='display-flex align-items-center gap-10'>\n                            <span className='rioglyph rioglyph-duplicate' />\n                            <span>Duplicate</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</span>\n                        </div>\n                    ),\n                },\n            ]}\n        />\n    </span>\n);\n\nconst FILTER_KAY_MISSING_VIN = 'missingVin';\ntype TableFilterKey = typeof FILTER_KAY_MISSING_VIN;\n\nconst TABLE_FILTERS: Record<TableFilterKey, { label: string }> = {\n    missingVin: { label: 'Hide items without VIN' },\n};\n\nconst applyFilter = (items: Vehicle[], filter: string[]) => {\n    const filterSet = new Set(filter);\n\n    return items.filter(item => {\n        // If 'missingVin' is in the filter set, keep only items with a VIN (!!item.vin is true).\n        // If 'missingVin' is NOT in the filter set, this specific condition doesn't remove the item.\n        if (filterSet.has(FILTER_KAY_MISSING_VIN) && !item.vin) {\n            return false; // Hide items without VIN if filter is active\n        }\n        // Add more filter conditions here as needed.\n        // If no active filter criteria cause the item to be excluded, keep it.\n        return true;\n    });\n};\n\nconst TableFilterDialog = (props: {\n    show: boolean;\n    onClose: VoidFunction;\n    filter: TableFilterKey[];\n    onSetFilter: (filter: TableFilterKey[]) => void;\n}) => {\n    const { show, onClose, filter, onSetFilter } = props;\n\n    const filterSet = new Set(filter);\n\n    const toggleFilter = (key: TableFilterKey) => {\n        const newFilter = new Set(filter);\n        if (newFilter.has(key)) {\n            newFilter.delete(key);\n        } else {\n            newFilter.add(key);\n        }\n        onSetFilter(Array.from(newFilter));\n    };\n\n    return (\n        <Dialog\n            show={show}\n            bsSize='sm'\n            onClose={onClose}\n            title='Table filter'\n            body={\n                <div>\n                    <fieldset className='margin-bottom-25'>\n                        <legend>Vehicle properties</legend>\n                        <div className='display-flex flex-column gap-10'>\n                            {Object.entries(TABLE_FILTERS).map(([key, { label }]) => (\n                                <Checkbox\n                                    key={key}\n                                    checked={filterSet.has(key as TableFilterKey)}\n                                    onChange={() => toggleFilter(key as TableFilterKey)}\n                                    className='user-select-none'\n                                >\n                                    {label}\n                                </Checkbox>\n                            ))}\n                            <Checkbox disabled>Lorem ipsum dolor</Checkbox>\n                            <Checkbox disabled>Dolor sit amet</Checkbox>\n                        </div>\n                    </fieldset>\n                    <fieldset>\n                        <legend>More filter options</legend>\n                        <div className='display-flex flex-column gap-10'>\n                            <Checkbox disabled>Lorem ipsum dolor</Checkbox>\n                            <Checkbox disabled>Dolor sit amet</Checkbox>\n                        </div>\n                    </fieldset>\n                </div>\n            }\n            footer={\n                <div className='btn-toolbar'>\n                    <Button onClick={onClose}>\n                        <span>Close</span>\n                    </Button>\n                </div>\n            }\n        />\n    );\n};\n\nexport default TableCommonDemo;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"table-toolbar\">\n        <div class=\"table-toolbar-container\">\n            <div class=\"table-toolbar-group-left\">\n                <div class=\"table-toolbar-column\">\n                    <div class=\"display-grid grid-cols-3 display-flex-ls btn-toolbar\">\n                        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-plus\">\n                            </span>New</button>\n                        <div class=\"dropdown btn-group\">\n                            <button type=\"button\" id=\"myActionButton\" class=\"btn btn-default btn-md btn-component dropdown-toggle\" tabindex=\"0\">Button<span class=\"caret\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\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-filter\">\n                        </span>Filter</button>\n                </div>\n                <div class=\"table-toolbar-column table-toolbar-column-spacer\">\n                    <div class=\"table-toolbar-search input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-search\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input placeholder=\"Search in table\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                            <span class=\"clearButton hide\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"table-toolbar-column display-flex flex-row align-items-end gap-15\">\n                    <div>\n                        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 table-toolbar-label\">Label</div>\n                        <div class=\"TableViewToggles btn-group display-flex flex-row\">\n                            <button class=\"btn btn-default btn-icon-only active\" type=\"button\">\n                                <span class=\"rioglyph rioglyph-table-view\">\n                                </span>\n                            </button>\n                            <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                                <span class=\"rioglyph rioglyph-th-list\">\n                                </span>\n                            </button>\n                            <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                                <span class=\"rioglyph rioglyph-split-view\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                    <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-settings\">\n                        </span>\n                    </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-head-filled\">\n            <colgroup>\n                <col class=\"\" style=\"min-width: 60px; width: 60px;\">\n                <col class=\"\" style=\"min-width: 200px; width: 200px;\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"table-action\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th class=\"user-select-none sort-column\" data-field=\"vehicleId\" data-sortby=\"vehicleId\" 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=\"name\" data-sortby=\"name\" title=\"Name\">\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\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>VIN</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"status\" data-sortby=\"status\" title=\"Status\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Status</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"duration\" data-sortby=\"duration\" title=\"Duration\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Duration</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=\"233\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>233</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Ipsum</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Inactive</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>5h 15m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"wtf950ll54\" 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=\"456\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>456</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>456</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>4h 55m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"07rxckp6ijs3\" 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=\"878\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>878</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>878</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>9h 10m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"pqvpbm1zjl\" 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=\"895\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>895</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>895</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>8h 45m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"cy7k97feit7\" 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=\"978\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>978</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Ipsum</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Inactive</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>6h 35m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"q1kkm1zsk3k\" 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=\"2345\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>2345</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Lorem</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>2345</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>11h 50m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"26y37r3ynux\" 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=\"2445\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>2445</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>2445</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>7h 25m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"hd96429lbgv\" 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=\"3456\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>3456</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>3456</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>12h 00m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"0hw4uighsiiu\" 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=\"4567\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>4567</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>4567</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>10h 20m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"6421btbpohw\" 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=\"7354\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>7354</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Lorem</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>7354</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>10h 30m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"4na9bzjk4v\" 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 class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    <div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\">\n        <div class=\"min-width-150\">\n            <div class=\"text-center margin-bottom-3\">\n                <span class=\"text-medium\">70</span>\n                <span class=\"margin-left-5 margin-right-5\">/</span>\n                <span class=\"text-medium\">100</span>\n            </div>\n            <div class=\"progress height-2 margin-bottom-10 bg-white\">\n                <div class=\"progress-bar\" style=\"width: 70%;\">\n                </div>\n            </div>\n            <div class=\"display-flex justify-content-center\">\n                <button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\">\n                    <span class=\"rioglyph rioglyph-arrow-down\">\n                    </span>Load more</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "<div class=\"table-responsive\">\n    <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered\">\n        <colgroup>\n            <col style=\"min-width: 150px; width: 150px;\">\n            <col style=\"min-width: 350px; width: 350px;\">\n            <col>\n            <col>\n        </colgroup>\n        <thead>\n            ...\n        </thead>\n        <tbody>\n            ...\n        </tbody>\n    </table>\n</div>"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "TableSettingsDialog - column sort only",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div id=\"TableCommonDemo\"><div class=\"table-toolbar\"><div class=\"table-toolbar-container\"><div class=\"table-toolbar-group-right\"><div class=\"table-toolbar-column table-toolbar-column-spacer\"><label class=\"table-toolbar-label\">Label</label><div class=\"TableViewToggles btn-group display-flex flex-row\"><button class=\"btn btn-default btn-icon-only active\" type=\"button\"><span class=\"rioglyph rioglyph-table-view\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-th-list\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-split-view\"></span></button></div></div><div class=\"table-toolbar-column\"><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-settings\"></span></button></div></div></div></div><div><table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled\"><colgroup><col class=\"\"><col class=\"\"><col class=\"\"><col class=\"\"><col class=\"table-action\"></colgroup><thead><tr><th class=\"user-select-none sort-column\" data-field=\"vehicleId\" data-sortby=\"vehicleId\" title=\"Id\"><span><span class=\"sort-arrows sort-asc\"></span><span>Id</span></span></th><th class=\"user-select-none sort-column\" data-field=\"name\" data-sortby=\"name\" title=\"Name\"><span><span class=\"sort-arrows \"></span><span>Name</span></span></th><th class=\"user-select-none sort-column\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\"><span><span class=\"sort-arrows \"></span><span>VIN</span></span></th><th class=\"user-select-none sort-column\" data-field=\"status\" data-sortby=\"status\" title=\"Status\"><span><span class=\"sort-arrows \"></span><span>Status</span></span></th><th class=\"user-select-none sort-column table-action\" title=\"\"></th></tr></thead><tbody><tr><td data-field=\"Id\"><span>233</span></td><td data-field=\"Name\"><span>Ipsum</span></td><td data-field=\"VIN\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"Status\"><span>Inactive</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"yks2mfgpd2l\" 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><td data-field=\"Id\"><span>895</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>895</span></td><td data-field=\"Status\"><span>Active</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"uadq53nvx3\" 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><td data-field=\"Id\"><span>7354</span></td><td data-field=\"Name\"><span>Lorem</span></td><td data-field=\"VIN\"><span>7354</span></td><td data-field=\"Status\"><span>Active</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"4jlmxxgo2ww\" 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 class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr></tbody></table></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport omit from 'lodash/fp/omit';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport classNames from 'classnames';\n\nimport TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';\nimport TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';\nimport TableSettingsDialog from '@rio-cloud/rio-uikit/TableSettingsDialog';\nimport type { SortDirectionType } from '@rio-cloud/rio-uikit/SortDirection';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';\nimport NoData from '@rio-cloud/rio-uikit/NoData';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\nimport TableCol from '@rio-cloud/rio-uikit/TableCol';\nimport TableHead from '@rio-cloud/rio-uikit/TableHead';\n\nconst defaultColumnOrder = ['vehicleId', 'name', 'vin', 'status'];\nconst disabledColumns = ['vin'];\n\ntype ColumnLabel = { [key: string]: string };\n\nconst columnLabels: ColumnLabel = {\n    vehicleId: 'Id',\n    name: 'Name',\n    vin: 'VIN',\n    status: 'Status',\n};\n\ntype Vehicle = {\n    vehicleId: number;\n    name: React.ReactNode;\n    vin: React.ReactNode;\n    status: string;\n};\n\nconst vehicleList: Vehicle[] = [\n    {\n        vehicleId: 7354,\n        name: 'Lorem',\n        vin: '7354',\n        status: 'Active',\n    },\n    {\n        vehicleId: 233,\n        name: 'Ipsum',\n        vin: <NoData text='No data' />,\n        status: 'Inactive',\n    },\n    {\n        vehicleId: 895,\n        name: <NoData text='No data' />,\n        vin: '895',\n        status: 'Active',\n    },\n];\n\nexport type TableCommonDemoProps = {\n    viewType: TableViewTogglesViewType;\n};\n\nconst TableCommonDemo = (props: TableCommonDemoProps) => {\n    const { viewType: externalViewType } = props;\n\n    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState(false);\n\n    const [columnOrder, setColumnOrder] = useState<string[]>(defaultColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);\n    const [viewType, setViewType] = useState(externalViewType || TableViewToggles.VIEW_TYPE_TABLE);\n\n    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(\n        vehicleList,\n        'vehicleId'\n    );\n\n    const handleToggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);\n    const handleViewTypeChange = (newViewType: TableViewTogglesViewType) => setViewType(newViewType);\n\n    const handleColumnOrderChange = (newColumnOrder: string[], newHiddenColumns: string[]) => {\n        setColumnOrder(newColumnOrder);\n        setHiddenColumns(newHiddenColumns);\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 Vehicle);\n        }\n        if (newSortBy === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    const handleCardSortChange = (newSortBy: string, newSortDir: SortDirectionType) => {\n        setSortKey(newSortBy as keyof Vehicle);\n        setSortDirection(newSortDir);\n    };\n\n    // filter for hidden columns\n    const columns = columnOrder.filter(name => !hiddenColumns.includes(name));\n\n    // filter data to omit hidden columns\n    const withoutHidden = omit(hiddenColumns);\n    const filteredRows = sortedItems.map(vehicle => ({ ...withoutHidden(vehicle) })) as Vehicle[];\n\n    const tableClassNames = classNames(\n        'table',\n        'table-layout-fixed',\n        'table-column-overflow-hidden',\n        'table-bordered',\n        'table-sticky',\n        'table-head-filled',\n        viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'table-cards table-single-card',\n        viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'table-cards table-multi-cards'\n    );\n\n    const isViewTypeTable = viewType === TableViewToggles.VIEW_TYPE_TABLE;\n\n    const cardSortingSelectOptions = columns.map(column => {\n        return {\n            id: column,\n            label: columnLabels[column],\n            selected: column === sortKey,\n            disabled: false,\n        };\n    });\n\n    return (\n        <div id='TableCommonDemo'>\n            <TableToolbar>\n                <div className='table-toolbar-container'>\n                    <div className='table-toolbar-group-right'>\n                        <div className='table-toolbar-column table-toolbar-column-spacer'>\n                            <label className='table-toolbar-label'>Label</label>\n                            <TableViewToggles\n                                initialViewType={viewType}\n                                onViewTypeChange={handleViewTypeChange}\n                                tableViewTooltipContent='Table view'\n                                singleCardViewTooltipContent='List view'\n                                multiCardsViewTooltipContent='Cards view'\n                            />\n                        </div>\n                        <div className='table-toolbar-column'>\n                            <Button iconOnly iconName='rioglyph-settings' onClick={handleToggleTableSettingsDialog} />\n                        </div>\n                    </div>\n                    {showTableSettingsDialog && (\n                        <TableSettingsDialog\n                            show={showTableSettingsDialog}\n                            title='Table Settings'\n                            onHide={handleToggleTableSettingsDialog}\n                            onColumnChange={handleColumnOrderChange}\n                            defaultColumnOrder={defaultColumnOrder}\n                            defaultHiddenColumns={[]}\n                            columnOrder={columnOrder}\n                            hiddenColumns={hiddenColumns}\n                            columnLabels={columnLabels}\n                            disabledColumns={disabledColumns}\n                            closeButtonText='Close'\n                            cancelButtonText='Cancel'\n                            applyButtonText='Apply changes'\n                            resetButtonText='Reset to default'\n                            searchPlaceholder='Search by column name'\n                            notFoundMessage='No column found for this search value'\n                            autoLabel='Auto'\n                        />\n                    )}\n                </div>\n            </TableToolbar>\n            {sortKey && !isViewTypeTable && (\n                <TableCardsSorting\n                    selectOptions={cardSortingSelectOptions}\n                    sortName={sortKey as string}\n                    sortOrder={sortDirection}\n                    onSortChange={handleCardSortChange}\n                />\n            )}\n            <div>\n                {isEmpty(filteredRows) && !isViewTypeTable && (\n                    <NotFoundState headline='Nothing found' message='Please refine your search' />\n                )}\n                <table className={tableClassNames}>\n                    <colgroup>\n                        {columns.map(column => (\n                            <TableCol key={column} />\n                        ))}\n                        <TableCol className='table-action' />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            {columns.map(column => (\n                                <TableHead\n                                    key={column}\n                                    label={columnLabels[column]}\n                                    column={column}\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                        {isEmpty(filteredRows) && isViewTypeTable && (\n                            <tr>\n                                <td colSpan={columns.length + 1}>\n                                    <NotFoundState\n                                        outerClassName='border-none'\n                                        headline='Nothing found'\n                                        message='Please refine your search'\n                                    />\n                                </td>\n                            </tr>\n                        )}\n                        {filteredRows.map((row: Vehicle, index: number) => (\n                            <tr key={row.vehicleId}>\n                                {columns.map(col => (\n                                    <td key={col} data-field={columnLabels[col]}>\n                                        <span>{row[col as keyof Vehicle]}</span>\n                                    </td>\n                                ))}\n                                <td className='table-action'>\n                                    <DummyRowDropdown />\n                                </td>\n                            </tr>\n                        ))}\n                        {/* Placeholder workaround for equal with cards of the last row */}\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    );\n};\n\nconst DummyRowDropdown = () => (\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</span>\n                        </div>\n                    ),\n                },\n                {\n                    value: (\n                        <div className='display-flex align-items-center gap-10'>\n                            <span className='rioglyph rioglyph-duplicate' />\n                            <span>Duplicate</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</span>\n                        </div>\n                    ),\n                },\n            ]}\n        />\n    </span>\n);\n\nexport default TableCommonDemo;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div id=\"TableCommonDemo\">\n    <div class=\"table-toolbar\">\n        <div class=\"table-toolbar-container\">\n            <div class=\"table-toolbar-group-right\">\n                <div class=\"table-toolbar-column table-toolbar-column-spacer\">\n                    <label class=\"table-toolbar-label\">Label</label>\n                    <div class=\"TableViewToggles btn-group display-flex flex-row\">\n                        <button class=\"btn btn-default btn-icon-only active\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-table-view\">\n                            </span>\n                        </button>\n                        <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-th-list\">\n                            </span>\n                        </button>\n                        <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-split-view\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"table-toolbar-column\">\n                    <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-settings\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div>\n        <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled\">\n            <colgroup>\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"table-action\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th class=\"user-select-none sort-column\" data-field=\"vehicleId\" data-sortby=\"vehicleId\" 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=\"name\" data-sortby=\"name\" title=\"Name\">\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\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>VIN</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"status\" data-sortby=\"status\" title=\"Status\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Status</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>\n                    <td data-field=\"Id\">\n                        <span>233</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Ipsum</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Inactive</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"yks2mfgpd2l\" 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>\n                    <td data-field=\"Id\">\n                        <span>895</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>895</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"uadq53nvx3\" 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>\n                    <td data-field=\"Id\">\n                        <span>7354</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Lorem</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>7354</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"4jlmxxgo2ww\" 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 class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "<div class=\"table-responsive\">\n    <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered\">\n        <colgroup>\n            <col style=\"min-width: 150px; width: 150px;\">\n            <col style=\"min-width: 350px; width: 350px;\">\n            <col>\n            <col>\n        </colgroup>\n        <thead>\n            ...\n        </thead>\n        <tbody>\n            ...\n        </tbody>\n    </table>\n</div>"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "TableRowSelection (Multiselect)",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 4",
+          "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\"><div class=\"table-toolbar-search input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Search in table\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"table-toolbar-column table-toolbar-column-spacer\"><div class=\"TableViewToggles btn-group display-flex flex-row\"><button class=\"btn btn-default btn-icon-only active\" type=\"button\"><span class=\"rioglyph rioglyph-table-view\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-th-list\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-split-view\"></span></button></div></div><div class=\"table-toolbar-column\"><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-settings\"></span></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=\"table-checkbox\"><col class=\"\" style=\"min-width: 150px; width: 150px;\"><col class=\"\" style=\"min-width: 250px; width: 250px;\"><col class=\"\"><col class=\"\"><col class=\"table-action\"></colgroup><thead><tr><th class=\"user-select-none sort-column table-checkbox\" title=\"\"><div class=\"dropdown btn-group\"><button type=\"button\" id=\"kl48tcc8h5n\" 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=\"vehicleId\" data-sortby=\"vehicleId\" title=\"Id\"><span><span class=\"sort-arrows sort-asc\"></span><span>Id</span></span></th><th class=\"user-select-none sort-column\" data-field=\"name\" data-sortby=\"name\" title=\"Name\"><span><span class=\"sort-arrows \"></span><span>Name</span></span></th><th class=\"user-select-none sort-column\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\"><span><span class=\"sort-arrows \"></span><span>VIN</span></span></th><th class=\"user-select-none sort-column\" data-field=\"manufacturer\" data-sortby=\"manufacturer\" title=\"Manufacturer\"><span><span class=\"sort-arrows \"></span><span>Manufacturer</span></span></th><th class=\"user-select-none sort-column table-action\" title=\"\"></th></tr></thead><tbody><tr data-key=\"7354\" 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>7354</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">\nLorem dui elit.</span></td><td data-field=\"VIN\"><span>0123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"m9apegry7hi\" 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-key=\"7355\" 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>7355</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Ipsum ipsum ipsum eget</span></td><td data-field=\"VIN\"><span>1123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"r34ditk6tp\" 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-key=\"7356\" 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>7356</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Elit. amet, ipsum ipsum amet,</span></td><td data-field=\"VIN\"><span>2123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"3jqhyz84p3m\" 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-key=\"7357\" 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>7357</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Amet, dolor ipsum amet, eget</span></td><td data-field=\"VIN\"><span>3123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"otsk5y6ly9m\" 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-key=\"7358\" 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>7358</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">\nLorem sit eget dolor elit.</span></td><td data-field=\"VIN\"><span>4123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"ksw3is59ula\" 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-key=\"7359\" 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>7359</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Amet, dui dolor amet, dolor</span></td><td data-field=\"VIN\"><span>5123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"2lx8j1y92lm\" 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-key=\"7360\" 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>7360</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Elit. eget eget amet, dui</span></td><td data-field=\"VIN\"><span>6123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"f01l6jxjvq9\" 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-key=\"7361\" 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>7361</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Ipsum eget elit.</span></td><td data-field=\"VIN\"><span>7123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"4iebnf1v022\" 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-key=\"7362\" 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>7362</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Dolor dolor eget amet, elit.</span></td><td data-field=\"VIN\"><span>8123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"yndggw6twz8\" 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-key=\"7363\" 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>7363</span></td><td data-field=\"Name\"><span data-test-ignore=\"text\">Elit. sit ipsum dui</span></td><td data-field=\"VIN\"><span>9123abc</span></td><td data-field=\"Manufacturer\"><span>MAN</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"8aivcgi3mp2\" 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 class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr></tbody></table></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "/* eslint-disable no-use-before-define */\nimport React, { useEffect, useState } from 'react';\nimport omit from 'lodash/fp/omit';\nimport classNames from 'classnames';\n\nimport TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport TableViewToggles from '@rio-cloud/rio-uikit/TableViewToggles';\nimport TableSearch from '@rio-cloud/rio-uikit/TableSearch';\nimport TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';\nimport TableSettingsDialog from '@rio-cloud/rio-uikit/TableSettingsDialog';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useTableMultiSelection from '@rio-cloud/rio-uikit/useTableSelection';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\nimport TableCol, { type ColumnDetails, type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';\nimport TableHead from '@rio-cloud/rio-uikit/TableHead';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport type { SortDirectionType } from '@rio-cloud/rio-uikit/SortDirection';\nimport { dummyTextUltraShort, generateDummyText } from '../../../../utils/data';\n\nexport const ACTIVE_CLASS = 'active';\nexport const DATA_ATTRIBUTE = 'data-key';\n\ntype Vehicle = {\n    vehicleId: number;\n    name: string;\n    vin: string;\n    manufacturer: string;\n};\n\ntype ColumnLabel = { [key: string]: string };\n\nconst defaultColumnOrder = ['vehicleId', 'name', 'vin', 'manufacturer'];\nconst disabledColumns = ['vin'];\n\nconst columnLabels: ColumnLabel = {\n    vehicleId: 'Id',\n    name: 'Name',\n    vin: 'VIN',\n    manufacturer: 'Manufacturer',\n};\n\nconst demoColumnsDetails: ColumnDetailsMap = {\n    vehicleId: {\n        width: 150,\n        defaultWidth: 300,\n        maxWidth: 300,\n    },\n    name: {\n        width: 250,\n        defaultWidth: 250,\n        maxWidth: 250,\n    },\n    // Note: 0 means auto width\n    vin: {\n        width: 0,\n        defaultWidth: 0,\n        maxWidth: 350,\n    },\n    manufacturer: {\n        // Not defined as it will be defined when its used\n        // width: 350,\n        // defaultWidth: 0,\n    },\n};\n\n// Function to generate random entries to work with.\n// Increase length to generate more items.\nconst vehicleList: Vehicle[] = Array.from({ length: 10 }, (_, index) => ({\n    vehicleId: 7354 + index,\n    name: generateDummyText(dummyTextUltraShort, 2, 5),\n    vin: `${index}123abc`,\n    manufacturer: 'MAN',\n}));\n\ntype TableRowProps = {\n    row: Vehicle;\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        console.log('render row');\n        return (\n            <tr key={row.vehicleId} data-key={row.vehicleId} onClick={onRowClick} className='cursor-pointer'>\n                <td className='table-checkbox' onClick={onSelectCheckbox}>\n                    <Checkbox />\n                </td>\n                {columns.map((col: string) => (\n                    <td key={col} data-field={colLabels[col]}>\n                        <span {...(col === 'name' ? { 'data-test-ignore': 'text' } : {})}>\n                            {row[col as keyof Vehicle]}\n                        </span>\n                    </td>\n                ))}\n                <td className='table-action' onClick={event => event.stopPropagation()}>\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-duplicate' />\n                                            <span>Duplicate 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);\n\nconst TableMultiSelectionDemo = () => {\n    const [searchValue, setSearchValue] = useState('');\n    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState<boolean>(false);\n    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);\n    const [columnsDetails, setColumnsDetails] = useState<ColumnDetailsMap>(demoColumnsDetails);\n    const [viewType, setViewType] = useState<string>(TableViewToggles.VIEW_TYPE_TABLE); // Default view type\n\n    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(\n        vehicleList,\n        'vehicleId'\n    );\n\n    // Use the headless hook\n    const { tableRef, onSelection, onActiveRowChange, onToggleAll, updateRowSelection } =\n        useTableMultiSelection<Vehicle>({\n            tableData: vehicleList,\n            idKey: 'vehicleId' as keyof Vehicle, // Specify the unique identifier key\n            initialSelectedRowIds: [`${vehicleList[3]?.vehicleId}`].filter(Boolean),\n            initialActiveRowId: '',\n            dataAttributeName: 'data-key',\n        });\n\n    // When the search value changes and hence the rendered rows, update the highlighting and selection\n    useEffect(() => updateRowSelection(), [searchValue]);\n\n    const toggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);\n    const handleViewTypeChange = (newViewType: string) => setViewType(newViewType);\n    const handleSearchValueChange = (newSearchValue: string) => setSearchValue(newSearchValue);\n\n    const handleColumnChange = (\n        newColumnOrder: string[],\n        newHiddenColumns: string[],\n        newColumnsDetails = columnsDetails\n    ) => {\n        setColumnOrder(newColumnOrder);\n        setHiddenColumns(newHiddenColumns);\n        setColumnsDetails(newColumnsDetails);\n    };\n\n    // For immediate effect\n    const handleColumnDetailsChange = (column: string, newColumnDetails: ColumnDetails) => {\n        const updatedColumnsDetails = { ...columnsDetails };\n        updatedColumnsDetails[column] = newColumnDetails;\n        setColumnsDetails(updatedColumnsDetails);\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 Vehicle);\n        }\n        if (newSortBy === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    const handleCardSortChange = (newSortBy: string, newSortDir: SortDirectionType) => {\n        setSortKey(newSortBy as keyof Vehicle);\n        setSortDirection(newSortDir);\n    };\n\n    // filter for hidden columns\n    const columns = columnOrder.filter(name => !hiddenColumns.includes(name));\n\n    // filter data to omit hidden columns\n    const withoutHidden = omit(hiddenColumns);\n    const filteredRows = sortedItems.map(vehicle => ({ ...withoutHidden(vehicle) }) as Vehicle);\n\n    // in case a search value is given, filter the data accordingly\n    const searchResult = !searchValue\n        ? filteredRows\n        : filteredRows.filter(row =>\n              columns.some(col =>\n                  row[col as keyof Vehicle].toString().toLowerCase().includes(searchValue.toLowerCase())\n              )\n          );\n\n    const rows = searchResult;\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        viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'table-cards table-single-card',\n        viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'table-cards table-multi-cards'\n    );\n\n    const isViewTypeTable = viewType === TableViewToggles.VIEW_TYPE_TABLE;\n\n    const cardSortingSelectOptions = columns.map(column => {\n        return {\n            id: column,\n            label: columnLabels[column],\n            selected: column === sortKey,\n            disabled: false,\n        };\n    });\n\n    const batchButton = (\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize={viewType === TableViewToggles.VIEW_TYPE_TABLE ? 'sm' : 'md'}\n            iconOnly\n            items={[\n                {\n                    value: (\n                        <div>\n                            <span className='rioglyph rioglyph-cloud-download margin-right-10 text-size-18' />\n                            <span>Download selected Items</span>\n                        </div>\n                    ),\n                    onSelect: () => Notification.info('Download started'),\n                },\n                {\n                    divider: true,\n                },\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            <TableToolbar>\n                <div className='table-toolbar-container'>\n                    <div className='table-toolbar-group-right'>\n                        <div className='table-toolbar-column'>\n                            <TableSearch\n                                value={searchValue}\n                                onChange={handleSearchValueChange}\n                                placeholder='Search in table'\n                            />\n                        </div>\n                        <div className='table-toolbar-column table-toolbar-column-spacer'>\n                            <TableViewToggles onViewTypeChange={handleViewTypeChange} />\n                        </div>\n                        <div className='table-toolbar-column'>\n                            <Button onClick={toggleTableSettingsDialog} iconName='rioglyph-settings' iconOnly />\n                        </div>\n                    </div>\n                    {showTableSettingsDialog && (\n                        <TableSettingsDialog\n                            show={showTableSettingsDialog}\n                            title='Table Settings'\n                            onHide={toggleTableSettingsDialog}\n                            onColumnChange={handleColumnChange}\n                            defaultColumnOrder={defaultColumnOrder}\n                            defaultHiddenColumns={[]}\n                            columnOrder={columnOrder}\n                            hiddenColumns={hiddenColumns}\n                            columnLabels={columnLabels}\n                            disabledColumns={disabledColumns}\n                            closeButtonText='Close'\n                            resetButtonText='Reset to default'\n                            searchPlaceholder='Search by column name'\n                            notFoundMessage='No column found for this search value'\n                            columnsDetails={columnsDetails}\n                            autoLabel='Auto'\n                            onColumnDetailsChange={handleColumnDetailsChange}\n                            immediateChange\n                        />\n                    )}\n                </div>\n            </TableToolbar>\n            {viewType && viewType !== TableViewToggles.VIEW_TYPE_TABLE && (\n                <TableCardsSorting\n                    selectOptions={cardSortingSelectOptions}\n                    sortName={sortKey as string}\n                    sortOrder={sortDirection}\n                    onSortChange={handleCardSortChange}\n                    className='multiselect-table'\n                />\n            )}\n            <div className='table-responsive'>\n                {isEmpty(rows) && !isViewTypeTable && (\n                    <NotFoundState headline='Nothing found' message='Please adapt your search' />\n                )}\n                <table ref={tableRef} className={tableClassNames}>\n                    <colgroup>\n                        <TableCol className='table-checkbox' />\n                        {columns.map(column => (\n                            <TableCol key={column} columnDetails={columnsDetails[column]} />\n                        ))}\n                        <TableCol className='table-action' />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            <TableHead className='table-checkbox'>{batchButton}</TableHead>\n                            {columns.map(column => (\n                                <TableHead\n                                    key={column}\n                                    label={columnLabels[column]}\n                                    column={column}\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                        {isEmpty(rows) && isViewTypeTable && (\n                            <tr>\n                                <td colSpan={columns.length + 2}>\n                                    <NotFoundState\n                                        outerClassName='border-none'\n                                        headline='Nothing found'\n                                        message='Please refine your search'\n                                    />\n                                </td>\n                            </tr>\n                        )}\n                        {rows.map(row => (\n                            <TableRow\n                                key={row.vehicleId}\n                                row={row}\n                                columns={columns}\n                                colLabels={columnLabels}\n                                onRowClick={onActiveRowChange}\n                                onSelectCheckbox={onSelection}\n                            />\n                        ))}\n                        {/* Placeholder workaround for equal with cards of the last row */}\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    );\n};\n\nexport default TableMultiSelectionDemo;"
+            },
+            {
+              "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                    <div class=\"table-toolbar-search input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-search\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input placeholder=\"Search in table\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                            <span class=\"clearButton hide\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"table-toolbar-column table-toolbar-column-spacer\">\n                    <div class=\"TableViewToggles btn-group display-flex flex-row\">\n                        <button class=\"btn btn-default btn-icon-only active\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-table-view\">\n                            </span>\n                        </button>\n                        <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-th-list\">\n                            </span>\n                        </button>\n                        <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                            <span class=\"rioglyph rioglyph-split-view\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"table-toolbar-column\">\n                    <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-settings\">\n                        </span>\n                    </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=\"table-checkbox\">\n                <col class=\"\" style=\"min-width: 150px; width: 150px;\">\n                <col class=\"\" style=\"min-width: 250px; width: 250px;\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"table-action\">\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=\"kl48tcc8h5n\" 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=\"vehicleId\" data-sortby=\"vehicleId\" 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=\"name\" data-sortby=\"name\" title=\"Name\">\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\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>VIN</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"manufacturer\" data-sortby=\"manufacturer\" title=\"Manufacturer\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Manufacturer</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-key=\"7354\" 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>7354</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">\n                            Lorem dui elit.</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>0123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"m9apegry7hi\" 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-key=\"7355\" 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>7355</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Ipsum ipsum ipsum eget</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>1123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"r34ditk6tp\" 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-key=\"7356\" 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>7356</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Elit. amet, ipsum ipsum amet,</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>2123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"3jqhyz84p3m\" 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-key=\"7357\" 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>7357</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Amet, dolor ipsum amet, eget</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>3123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"otsk5y6ly9m\" 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-key=\"7358\" 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>7358</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">\n                            Lorem sit eget dolor elit.</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>4123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"ksw3is59ula\" 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-key=\"7359\" 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>7359</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Amet, dui dolor amet, dolor</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>5123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"2lx8j1y92lm\" 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-key=\"7360\" 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>7360</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Elit. eget eget amet, dui</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>6123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"f01l6jxjvq9\" 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-key=\"7361\" 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>7361</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Ipsum eget elit.</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>7123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"4iebnf1v022\" 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-key=\"7362\" 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>7362</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Dolor dolor eget amet, elit.</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>8123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"yndggw6twz8\" 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-key=\"7363\" 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>7363</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span data-test-ignore=\"text\">Elit. sit ipsum dui</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>9123abc</span>\n                    </td>\n                    <td data-field=\"Manufacturer\">\n                        <span>MAN</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"8aivcgi3mp2\" 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 class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "<div class=\"table-responsive\">\n    <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered\">\n        <colgroup>\n            <col style=\"min-width: 150px; width: 150px;\">\n            <col style=\"min-width: 350px; width: 350px;\">\n            <col>\n            <col>\n        </colgroup>\n        <thead>\n            ...\n        </thead>\n        <tbody>\n            ...\n        </tbody>\n    </table>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}