@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/utilities/useTableExport.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Table & data hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useTableExport
-*Captured:* 2026-03-06T10:41:58.527Z
+*Captured:* 2026-04-27T14:59:47.834Z
 
 The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.
 
@@ -13,31 +13,111 @@ The useTableExport hook provides a simple and reusable way to export tabular dat
 
 Export data
 
-Id First name Last name E-mail
+Id
 
-1 Lina Hamill Carol_Waters81@hotmail.com
-2 Eulalia Conn Celia40@gmail.com
-3 Nels Cassin Lindsey_Carroll@hotmail.com
-4 Clarence Waters Gerard.Hansen@gmail.com
-5 Marilie Bergstrom Terrence_Hegmann3@yahoo.com
-6 Darby Russel Myrna_Schiller@hotmail.com
-7 Keshawn Okuneva Dawson_Beer56@gmail.com
-8 Johanna Haag Guadalupe_Hagenes14@hotmail.com
-9 Tara Haley Emma_Kohler@gmail.com
-10 Jane Witting Neal_Runte@gmail.com
+First name
+
+Last name
+
+E-mail
+
+To pick up a draggable item, press the space bar.
+While dragging, use the arrow keys to move the item.
+Press space again to drop the item in its new position, or press escape to cancel.
+
+1
+
+Jeanne
+
+Christiansen
+
+Darla30@yahoo.com
+
+2
+
+Maureen
+
+Yost
+
+Jacquelyn2@gmail.com
+
+3
+
+Jeannie
+
+Kuhlman
+
+Rosamond39@yahoo.com
+
+4
+
+Caleb
+
+Haag
+
+Elvera.Considine@gmail.com
+
+5
+
+Todd
+
+Stroman
+
+Eduardo51@yahoo.com
+
+6
+
+Luis
+
+Toy
+
+Shaylee86@hotmail.com
+
+7
+
+Oda
+
+Quigley
+
+Cordia.Jast@yahoo.com
+
+8
+
+Cesar
+
+Collier
+
+Aditya60@gmail.com
+
+9
+
+Joann
+
+Rau
+
+Addie0@gmail.com
+
+10
+
+Mike
+
+Swift
+
+Otis_Kreiger@hotmail.com
+
+Reorder columns and export the current order.
 
 #### React (tsx)
 
 ```tsx
+import { useState } from 'react';
 import { faker } from '@faker-js/faker';
 
-import classNames from '@rio-cloud/rio-uikit/classNames';
-import TableHead from '@rio-cloud/rio-uikit/TableHead';
-import TableCol, { type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';
-import TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';
-import useTableExport from '@rio-cloud/rio-uikit/useTableExport';
-import useSorting from '@rio-cloud/rio-uikit/useSorting';
 import Button from '@rio-cloud/rio-uikit/Button';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
+import useSorting from '@rio-cloud/rio-uikit/useSorting';
+import useTableExport from '@rio-cloud/rio-uikit/useTableExport';
 
 type Driver = {
     driverId: string;
@@ -46,7 +126,8 @@ type Driver = {
     email: string;
 };
 
-type ColumnLabel = { [key in keyof Driver]: string };
+type DriverColumnKey = keyof Driver;
+type ColumnLabel = { [key in DriverColumnKey]: string };
 
 const columnLabels: ColumnLabel = {
     driverId: 'Id',
@@ -55,28 +136,6 @@ const columnLabels: ColumnLabel = {
     email: 'E-mail',
 };
 
-const defaultColumnOrder = ['driverId', 'firstName', 'lastName', 'email'];
-
-const demoColumnsDetails: ColumnDetailsMap = {
-    driverId: {
-        width: 100,
-        defaultWidth: 200,
-        maxWidth: 300,
-    },
-    firstName: {
-        width: 200,
-        defaultWidth: 200,
-        maxWidth: 200,
-    },
-    lastName: {
-        width: 0, // Note: 0 means auto width
-        defaultWidth: 0,
-        maxWidth: 350,
-    },
-};
-
-// Function to generate random entries to work with.
-// Increase length to generate more items.
 const driverList: Driver[] = Array.from({ length: 10 }, (_, index) => ({
     driverId: `${index + 1}`,
     firstName: faker.person.firstName(),
@@ -84,91 +143,84 @@ const driverList: Driver[] = Array.from({ length: 10 }, (_, index) => ({
     email: faker.internet.email(),
 }));
 
-export default () => {
-    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(driverList, 'driverId');
+const initialColumnOrder: DriverColumnKey[] = ['driverId', 'firstName', 'lastName', 'email'];
+
+const columnWidths: Partial<Record<DriverColumnKey, number>> = {
+    driverId: 100,
+    firstName: 200,
+};
+
+const UseTableExportExample = () => {
+    const [columnOrder, setColumnOrder] = useState<DriverColumnKey[]>(initialColumnOrder);
+    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(driverList, 'driverId');
 
-    // Hook to export the Table data
     const { exportToCSV } = useTableExport<Driver>();
 
     const handleTableExport = () => {
         exportToCSV({
             data: sortedItems,
             fileName: 'drivers.csv',
+            columns: columnOrder,
             headers: columnLabels,
         });
     };
 
-    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {
-        const newSortBy = event.currentTarget.getAttribute('data-sortby');
-        if (newSortBy) {
-            setSortKey(newSortBy as keyof Driver);
-        }
-        if (newSortBy === sortKey) {
-            toggleDirection();
-        }
+    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
+        setSortKey(columnKey as DriverColumnKey);
+        setSortDirection(direction);
     };
 
-    const tableClassNames = classNames(
-        'table',
-        'table-layout-fixed',
-        'table-column-overflow-hidden',
-        'table-bordered',
-        'table-sticky',
-        'table-hover',
-        'table-head-filled'
-    );
-
     return (
         <div>
             <TableToolbar>
-                <div className='table-toolbar-container'>
-                    <div className='table-toolbar-group-right'>
-                        <div className='table-toolbar-column'>
-                            <Button iconName='rioglyph-download' onClick={handleTableExport}>
-                                Export data
-                            </Button>
-                        </div>
-                    </div>
-                </div>
+                <TableToolbarColumn horizontalAlign='right'>
+                    <Button iconName='rioglyph-download' onClick={handleTableExport}>
+                        Export data
+                    </Button>
+                </TableToolbarColumn>
             </TableToolbar>
 
-            <div className='table-responsive'>
-                <table className={tableClassNames}>
-                    <colgroup>
-                        {defaultColumnOrder.map(column => (
-                            <TableCol key={column} columnDetails={demoColumnsDetails[column]} />
-                        ))}
-                    </colgroup>
-                    <thead>
-                        <tr>
-                            {defaultColumnOrder.map(column => (
-                                <TableHead
-                                    key={column}
-                                    column={column}
-                                    label={columnLabels[column as keyof ColumnLabel]}
-                                    sortBy={sortKey as string}
-                                    sortDir={sortDirection}
-                                    onClick={handleSortChange}
-                                />
+            <Table
+                rowKey='driverId'
+                hover
+                shadow
+                sortBy={String(sortKey)}
+                sortDirection={sortDirection}
+                onSortChange={handleSortChange}
+                columnOrder={columnOrder}
+                onColumnOrderChange={nextColumnOrder => setColumnOrder(nextColumnOrder as DriverColumnKey[])}
+            >
+                <TableHeader>
+                    {initialColumnOrder.map(column => (
+                        <TableHeaderColumn
+                            key={column}
+                            columnKey={column}
+                            sortable
+                            draggable
+                            width={columnWidths[column]}
+                        >
+                            {columnLabels[column]}
+                        </TableHeaderColumn>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {sortedItems.map(row => (
+                        <TableRow key={row.driverId} id={row.driverId}>
+                            {columnOrder.map(column => (
+                                <TableColumn key={column} columnKey={column}>
+                                    {row[column]}
+                                </TableColumn>
                             ))}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {sortedItems.map(row => (
-                            <tr key={row.driverId} data-id={row.driverId} className='cursor-pointer'>
-                                {defaultColumnOrder.map(col => (
-                                    <td key={col} data-field={columnLabels[col as keyof Driver]}>
-                                        <span>{row[col as keyof Driver]}</span>
-                                    </td>
-                                ))}
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            <div className='margin-top-25'>Reorder columns and export the current order.</div>
         </div>
     );
 };
+
+export default UseTableExportExample;
 ```
 
 #### HTML (html)
@@ -178,7 +230,7 @@ export default () => {
     <div class="table-toolbar">
         <div class="table-toolbar-container">
             <div class="table-toolbar-group-right">
-                <div class="table-toolbar-column">
+                <div class="table-toolbar-column align-self-end">
                     <button type="button" class="btn btn-default btn-component" tabindex="0">
                         <span class="rioglyph rioglyph-download">
                         </span>Export data</button>
@@ -186,190 +238,214 @@ export default () => {
             </div>
         </div>
     </div>
-    <div class="table-responsive">
-        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-hover table-head-filled">
-            <colgroup>
-                <col class="" style="min-width: 100px; width: 100px;">
-                <col class="" style="min-width: 200px; width: 200px;">
-                <col class="">
-                <col class="">
-            </colgroup>
-            <thead>
-                <tr>
-                    <th class="user-select-none sort-column" data-field="driverId" data-sortby="driverId" title="Id">
-                        <span>
-                            <span class="sort-arrows sort-asc">
-                            </span>
-                            <span>Id</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="firstName" data-sortby="firstName" title="First name">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>First name</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="lastName" data-sortby="lastName" title="Last name">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Last name</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="email" data-sortby="email" title="E-mail">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>E-mail</span>
-                        </span>
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr data-id="1" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>1</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Lina</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Hamill</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Carol_Waters81@hotmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="2" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>2</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Eulalia</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Conn</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Celia40@gmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="3" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>3</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Nels</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Cassin</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Lindsey_Carroll@hotmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="4" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>4</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Clarence</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Waters</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Gerard.Hansen@gmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="5" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>5</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Marilie</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Bergstrom</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Terrence_Hegmann3@yahoo.com</span>
-                    </td>
-                </tr>
-                <tr data-id="6" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>6</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Darby</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Russel</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Myrna_Schiller@hotmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="7" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>7</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Keshawn</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Okuneva</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Dawson_Beer56@gmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="8" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>8</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Johanna</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Haag</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Guadalupe_Hagenes14@hotmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="9" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>9</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Tara</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Haley</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Emma_Kohler@gmail.com</span>
-                    </td>
-                </tr>
-                <tr data-id="10" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>10</span>
-                    </td>
-                    <td data-field="First name">
-                        <span>Jane</span>
-                    </td>
-                    <td data-field="Last name">
-                        <span>Witting</span>
-                    </td>
-                    <td data-field="E-mail">
-                        <span>Neal_Runte@gmail.com</span>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+    <div class="table table-view-table table-hover shadow-default border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 100px) minmax(0, 200px) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
+        <div class="table-head" role="rowgroup">
+            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
+                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="driverId" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
+                    <div class="table-head-cell-content">
+                        <div class="table-head-cell-content-row">
+                            <button type="button" class="table-head-button">
+                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
+                                    <span class="sort-arrows sort-asc">
+                                    </span>
+                                    <span class="table-head-label">Id</span>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="firstName" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
+                    <div class="table-head-cell-content">
+                        <div class="table-head-cell-content-row">
+                            <button type="button" class="table-head-button">
+                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
+                                    <span class="sort-arrows ">
+                                    </span>
+                                    <span class="table-head-label">First name</span>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="lastName" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
+                    <div class="table-head-cell-content">
+                        <div class="table-head-cell-content-row">
+                            <button type="button" class="table-head-button">
+                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
+                                    <span class="sort-arrows ">
+                                    </span>
+                                    <span class="table-head-label">Last name</span>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="email" role="columnheader" aria-colindex="4" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
+                    <div class="table-head-cell-content">
+                        <div class="table-head-cell-content-row">
+                            <button type="button" class="table-head-button">
+                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
+                                    <span class="sort-arrows ">
+                                    </span>
+                                    <span class="table-head-label">E-mail</span>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div id="DndDescribedBy-0" style="display: none;">
+                    To pick up a draggable item, press the space bar.
+                    While dragging, use the arrow keys to move the item.
+                    Press space again to drop the item in its new position, or press escape to cancel.
+                </div>
+                <div id="DndLiveRegion-0" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
+                </div>
+            </div>
+        </div>
+        <div class="table-body" role="rowgroup">
+            <div id="1" class="table-row" data-index="0" data-row-id="0" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">1</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Jeanne</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Christiansen</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Darla30@yahoo.com</div>
+                </div>
+            </div>
+            <div id="2" class="table-row" data-index="1" data-row-id="1" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">2</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Maureen</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Yost</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Jacquelyn2@gmail.com</div>
+                </div>
+            </div>
+            <div id="3" class="table-row" data-index="2" data-row-id="2" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">3</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Jeannie</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Kuhlman</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Rosamond39@yahoo.com</div>
+                </div>
+            </div>
+            <div id="4" class="table-row" data-index="3" data-row-id="3" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">4</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Caleb</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Haag</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Elvera.Considine@gmail.com</div>
+                </div>
+            </div>
+            <div id="5" class="table-row" data-index="4" data-row-id="4" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">5</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Todd</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Stroman</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Eduardo51@yahoo.com</div>
+                </div>
+            </div>
+            <div id="6" class="table-row" data-index="5" data-row-id="5" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">6</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Luis</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Toy</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Shaylee86@hotmail.com</div>
+                </div>
+            </div>
+            <div id="7" class="table-row" data-index="6" data-row-id="6" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">7</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Oda</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Quigley</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Cordia.Jast@yahoo.com</div>
+                </div>
+            </div>
+            <div id="8" class="table-row" data-index="7" data-row-id="7" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">8</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Cesar</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Collier</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Aditya60@gmail.com</div>
+                </div>
+            </div>
+            <div id="9" class="table-row" data-index="8" data-row-id="8" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">9</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Joann</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Rau</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Addie0@gmail.com</div>
+                </div>
+            </div>
+            <div id="10" class="table-row" data-index="9" data-row-id="9" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">10</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Mike</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Swift</div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">Otis_Kreiger@hotmail.com</div>
+                </div>
+            </div>
+        </div>
     </div>
+    <div class="margin-top-25">Reorder columns and export the current order.</div>
 </div>
 ```