@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/utilities/useSorting.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Table & data hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useSorting
-*Captured:* 2026-03-06T10:41:58.331Z
+*Captured:* 2026-04-20T12:56:07.338Z
 
 The useSorting hook provides an easy way to sort any list by a specified key using natural sort order. It offers flexible control over sorting direction and key selection, making it ideal for dynamic sorting use cases.
 
@@ -11,19 +11,38 @@ The useSorting hook provides an easy way to sort any list by a specified key usi
 
 ### Example: Example 1
 
-Name Quantity
+Name
 
-Box 20
-Container 1
-Crate 15
-Drum 12
-Pallet 10
-Parcel 8
+Quantity
+
+Box
+
+20
+
+Container
+
+1
+
+Crate
+
+15
+
+Drum
+
+12
+
+Pallet
+
+10
+
+Parcel
+
+8
 
 #### React (tsx)
 
 ```tsx
-import SortArrows from '@rio-cloud/rio-uikit/SortArrows';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
 import useSorting from '@rio-cloud/rio-uikit/useSorting';
 
 type Item = {
@@ -40,99 +59,123 @@ const items: Item[] = [
     { name: 'Box', quantity: 20 },
 ];
 
-export default () => {
-    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(items, 'name');
+const UseSortingExample = () => {
+    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(items, 'name');
 
-    const handleSortByColumn = (column: keyof Item) => {
-        setSortKey(column);
-        if (column === sortKey) {
-            toggleDirection();
-        }
+    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
+        setSortKey(columnKey as keyof Item);
+        setSortDirection(direction);
     };
 
     return (
-        <div className='table-responsive'>
-            <table className='table table-head-filled'>
-                <thead>
-                    <tr>
-                        <th className='user-select-none sort-column' onClick={() => handleSortByColumn('name')}>
-                            <span>
-                                {sortKey === 'name' ? <SortArrows direction={sortDirection} /> : <SortArrows />}
-                                <span>Name</span>
-                            </span>
-                        </th>
-                        <th className='user-select-none sort-column' onClick={() => handleSortByColumn('quantity')}>
-                            <span>
-                                {sortKey === 'quantity' ? <SortArrows direction={sortDirection} /> : <SortArrows />}
-                                <span>Quantity</span>
-                            </span>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {sortedItems.map(({ name, quantity }) => (
-                        <tr key={name}>
-                            <td key={name}>{name}</td>
-                            <td key={quantity}>{quantity}</td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
+        <Table rowKey='name' sortBy={String(sortKey)} sortDirection={sortDirection} onSortChange={handleSortChange}>
+            <TableHeader>
+                <TableHeaderColumn columnKey='name' sortable>
+                    Name
+                </TableHeaderColumn>
+                <TableHeaderColumn columnKey='quantity' sortable>
+                    Quantity
+                </TableHeaderColumn>
+            </TableHeader>
+            <TableBody>
+                {sortedItems.map(({ name, quantity }) => (
+                    <TableRow key={name} id={name}>
+                        <TableColumn columnKey='name'>{name}</TableColumn>
+                        <TableColumn columnKey='quantity'>{quantity}</TableColumn>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
     );
 };
+
+export default UseSortingExample;
 ```
 
 #### HTML (html)
 
 ```html
-<div class="table-responsive">
-    <table class="table table-head-filled">
-        <thead>
-            <tr>
-                <th class="user-select-none sort-column">
-                    <span>
-                        <span class="sort-arrows sort-asc">
-                        </span>
-                        <span>Name</span>
-                    </span>
-                </th>
-                <th class="user-select-none sort-column">
-                    <span>
-                        <span class="sort-arrows ">
-                        </span>
-                        <span>Quantity</span>
-                    </span>
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Box</td>
-                <td>20</td>
-            </tr>
-            <tr>
-                <td>Container</td>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>Crate</td>
-                <td>15</td>
-            </tr>
-            <tr>
-                <td>Drum</td>
-                <td>12</td>
-            </tr>
-            <tr>
-                <td>Pallet</td>
-                <td>10</td>
-            </tr>
-            <tr>
-                <td>Parcel</td>
-                <td>8</td>
-            </tr>
-        </tbody>
-    </table>
+<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2&quot;; --table-column-count: 2; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="2">
+    <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-has-column-divider table-align-left table-vertical-align-middle" data-column="name" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <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">
+                                <span class="sort-arrows sort-asc">
+                                </span>
+                                <span class="table-head-label">Name</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-sortable table-align-left table-vertical-align-middle" data-column="quantity" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <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">
+                                <span class="sort-arrows ">
+                                </span>
+                                <span class="table-head-label">Quantity</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table-body" role="rowgroup">
+        <div id="Box" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Box</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">20</div>
+            </div>
+        </div>
+        <div id="Container" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Container</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">1</div>
+            </div>
+        </div>
+        <div id="Crate" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Crate</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">15</div>
+            </div>
+        </div>
+        <div id="Drum" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Drum</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">12</div>
+            </div>
+        </div>
+        <div id="Pallet" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Pallet</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">10</div>
+            </div>
+        </div>
+        <div id="Parcel" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Parcel</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">8</div>
+            </div>
+        </div>
+    </div>
 </div>
 ```
 
@@ -149,21 +192,64 @@ export default () => {
 ### Example: Example 2
 
 Sort by a primary column. Hold shift key to sort by a secondary column
-Category Name Quantity
+Category
+
+Name
+
+Quantity
+
+Shipping
+
+Parcel
+
+8
+
+Shipping
+
+Box
+
+20
+
+Shipping
+
+Envelope
+
+50
+
+Shipping
+
+Bag
+
+30
+
+Storage
+
+Pallet
+
+10
+
+Storage
+
+Container
+
+1
 
-Shipping Parcel 8
-Shipping Box 20
-Shipping Envelope 50
-Shipping Bag 30
-Storage Pallet 10
-Storage Container 1
-Storage Crate 15
-Storage Drum 12
+Storage
+
+Crate
+
+15
+
+Storage
+
+Drum
+
+12
 
 #### React (tsx)
 
 ```tsx
-import SortArrows from '@rio-cloud/rio-uikit/SortArrows';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
 import useSorting from '@rio-cloud/rio-uikit/useSorting';
 
 type Item = {
@@ -183,42 +269,38 @@ const items: Item[] = [
     { name: 'Bag', category: 'Shipping', quantity: 30 },
 ];
 
-export default () => {
-    const { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection } = useSorting(items, 'category');
+const UseSortingSecondaryExample = () => {
+    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(
+        items,
+        'category'
+    );
+
+    const handleSortChange = (
+        columnKey: string,
+        direction: 'asc' | 'desc',
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        const column = columnKey as keyof Item;
 
-    const handleSortByColumn = (column: keyof Item, event: React.MouseEvent) => {
         if (event.shiftKey) {
-            // Secondary sort
             if (Array.isArray(sortKey) && sortKey[1] === column) {
-                // If already secondary, toggle direction
                 toggleDirection();
             } else if (Array.isArray(sortKey)) {
-                // If already using secondary sort, update secondary key
                 setSortKey([sortKey[0], column]);
+                setSortDirection(direction);
             } else {
-                // If not using secondary sort, add secondary key
                 setSortKey([sortKey, column]);
+                setSortDirection(direction);
             }
-        } else {
-            // Primary sort
-            if (sortKey === column || (Array.isArray(sortKey) && sortKey[0] === column)) {
-                // If already primary, toggle direction
-                toggleDirection();
-            } else {
-                // Set new primary key
-                setSortKey(column);
-            }
-        }
-    };
 
-    const renderSortArrows = (column: keyof Item) => {
-        if (sortKey === column || (Array.isArray(sortKey) && sortKey[0] === column)) {
-            return <SortArrows direction={sortDirection} />;
+            return;
         }
-        if (Array.isArray(sortKey) && sortKey[1] === column) {
-            return <SortArrows direction={sortDirection} />;
+
+        if (Array.isArray(sortKey) ? sortKey[0] !== column : sortKey !== column) {
+            setSortKey(column);
         }
-        return <SortArrows />;
+
+        setSortDirection(direction);
     };
 
     return (
@@ -227,129 +309,178 @@ export default () => {
                 Sort by a primary column. Hold <kbd className='text-normal'>shift</kbd> key to sort by a secondary
                 column
             </p>
-            <div className='table-responsive'>
-                <table className='table table-head-filled'>
-                    <thead>
-                        <tr>
-                            <th
-                                className='user-select-none sort-column'
-                                onClick={event => handleSortByColumn('category', event)}
-                            >
-                                <span>
-                                    {renderSortArrows('category')}
-                                    <span>Category</span>
-                                </span>
-                            </th>
-                            <th
-                                className='user-select-none sort-column'
-                                onClick={event => handleSortByColumn('name', event)}
-                            >
-                                <span>
-                                    {renderSortArrows('name')}
-                                    <span>Name</span>
-                                </span>
-                            </th>
-                            <th
-                                className='user-select-none sort-column'
-                                onClick={event => handleSortByColumn('quantity', event)}
-                            >
-                                <span>
-                                    {renderSortArrows('quantity')}
-                                    <span>Quantity</span>
-                                </span>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {sortedItems.map(item => (
-                            <tr key={item.name}>
-                                <td>{item.category}</td>
-                                <td>{item.name}</td>
-                                <td>{item.quantity}</td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
+            <Table
+                rowKey='name'
+                sortBy={Array.isArray(sortKey) ? sortKey.map(String) : String(sortKey)}
+                sortDirection={sortDirection}
+                onSortChange={handleSortChange}
+            >
+                <TableHeader>
+                    <TableHeaderColumn columnKey='category' sortable>
+                        Category
+                    </TableHeaderColumn>
+                    <TableHeaderColumn columnKey='name' sortable>
+                        Name
+                    </TableHeaderColumn>
+                    <TableHeaderColumn columnKey='quantity' sortable>
+                        Quantity
+                    </TableHeaderColumn>
+                </TableHeader>
+                <TableBody>
+                    {sortedItems.map(item => (
+                        <TableRow key={item.name} id={item.name}>
+                            <TableColumn columnKey='category'>{item.category}</TableColumn>
+                            <TableColumn columnKey='name'>{item.name}</TableColumn>
+                            <TableColumn columnKey='quantity'>{item.quantity}</TableColumn>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
         </>
     );
 };
+
+export default UseSortingSecondaryExample;
 ```
 
 #### HTML (html)
 
 ```html
 <p>Sort by a primary column. Hold <kbd class="text-normal">shift</kbd> key to sort by a secondary column</p>
-<div class="table-responsive">
-    <table class="table table-head-filled">
-        <thead>
-            <tr>
-                <th class="user-select-none sort-column">
-                    <span>
-                        <span class="sort-arrows sort-asc">
-                        </span>
-                        <span>Category</span>
-                    </span>
-                </th>
-                <th class="user-select-none sort-column">
-                    <span>
-                        <span class="sort-arrows ">
-                        </span>
-                        <span>Name</span>
-                    </span>
-                </th>
-                <th class="user-select-none sort-column">
-                    <span>
-                        <span class="sort-arrows ">
-                        </span>
-                        <span>Quantity</span>
-                    </span>
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Shipping</td>
-                <td>Parcel</td>
-                <td>8</td>
-            </tr>
-            <tr>
-                <td>Shipping</td>
-                <td>Box</td>
-                <td>20</td>
-            </tr>
-            <tr>
-                <td>Shipping</td>
-                <td>Envelope</td>
-                <td>50</td>
-            </tr>
-            <tr>
-                <td>Shipping</td>
-                <td>Bag</td>
-                <td>30</td>
-            </tr>
-            <tr>
-                <td>Storage</td>
-                <td>Pallet</td>
-                <td>10</td>
-            </tr>
-            <tr>
-                <td>Storage</td>
-                <td>Container</td>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>Storage</td>
-                <td>Crate</td>
-                <td>15</td>
-            </tr>
-            <tr>
-                <td>Storage</td>
-                <td>Drum</td>
-                <td>12</td>
-            </tr>
-        </tbody>
-    </table>
+<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 3; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="3">
+    <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-has-column-divider table-align-left table-vertical-align-middle" data-column="category" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <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">
+                                <span class="sort-arrows sort-asc">
+                                </span>
+                                <span class="table-head-label">Category</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="name" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <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">
+                                <span class="sort-arrows ">
+                                </span>
+                                <span class="table-head-label">Name</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-sortable table-align-left table-vertical-align-middle" data-column="quantity" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <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">
+                                <span class="sort-arrows ">
+                                </span>
+                                <span class="table-head-label">Quantity</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table-body" role="rowgroup">
+        <div id="Parcel" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Shipping</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Parcel</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">8</div>
+            </div>
+        </div>
+        <div id="Box" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Shipping</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Box</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">20</div>
+            </div>
+        </div>
+        <div id="Envelope" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Shipping</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Envelope</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">50</div>
+            </div>
+        </div>
+        <div id="Bag" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Shipping</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Bag</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">30</div>
+            </div>
+        </div>
+        <div id="Pallet" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Storage</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Pallet</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">10</div>
+            </div>
+        </div>
+        <div id="Container" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Storage</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Container</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">1</div>
+            </div>
+        </div>
+        <div id="Crate" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Storage</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Crate</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">15</div>
+            </div>
+        </div>
+        <div id="Drum" 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="category" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Storage</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Drum</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="quantity" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">12</div>
+            </div>
+        </div>
+    </div>
 </div>
 ```