-
Notifications
You must be signed in to change notification settings - Fork 270
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(ui5-table): test page for the virtualization (#10380)
* feat(ui5-table): Table row actions * docs(ui5-table): test page for the virtualization
- Loading branch information
Showing
7 changed files
with
216 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
packages/website/docs/_components_pages/main/Table/TableVirtualizer.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| slug: ../../TableVirtualizer | ||
| sidebar_class_name: newComponentBadge expComponentBadge | ||
| --- | ||
|
|
||
| import Virtualizer from "../../../_samples/main/Table/Virtualizer/Virtualizer.md"; | ||
|
|
||
| <%COMPONENT_OVERVIEW%> | ||
|
|
||
| <%COMPONENT_METADATA%> | ||
|
|
||
| ## Basic Sample | ||
|
|
||
| <Virtualizer/> |
16 changes: 16 additions & 0 deletions
16
packages/website/docs/_samples/main/Table/Virtualizer/Virtualizer.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import html from '!!raw-loader!./sample.html'; | ||
| import js from '!!raw-loader!./main.js'; | ||
|
|
||
| Enhance your table with virtualization capabilities by incorporating the **Virtualizer** feature. | ||
|
|
||
| For effective table virtualization, the `range-change` event with its `first` and `last` parameters determines which rows are currently visible and need to be rendered. To ensure proper virtualization, you must set the following attributes: | ||
|
|
||
| - `row-count` for the `Table`: This attribute specifies the total number of rows in the table. It helps the virtualizer determine the number of rows to manage. | ||
|
|
||
| - `row-height` for the `Table`: This attribute defines the height of each row in the table. Consistent row height allows the virtualizer to calculate which rows are currently visible and need to be rendered. | ||
|
|
||
| - `position` for the `TableRow`: This attribute determines the position of each row within the table. Proper positioning ensures that rows are rendered in the correct location when the user scrolls. | ||
|
|
||
| By setting these attributes and handling the `range-change` event properly, the `TableVirtualizer` can efficiently manage and render only the rows that are visible when the user scrolls. | ||
|
|
||
| <Editor html={html} js={js} /> |
61 changes: 61 additions & 0 deletions
61
packages/website/docs/_samples/main/Table/Virtualizer/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import "@ui5/webcomponents/dist/Table.js"; | ||
| import "@ui5/webcomponents/dist/TableRow.js"; | ||
| import "@ui5/webcomponents/dist/TableCell.js"; | ||
| import "@ui5/webcomponents/dist/TableHeaderRow.js"; | ||
| import "@ui5/webcomponents/dist/TableHeaderCell.js"; | ||
| import "@ui5/webcomponents/dist/TableVirtualizer.js"; | ||
| import "@ui5/webcomponents/dist/TableSelection.js"; | ||
|
|
||
| class ProductStore { | ||
| constructor() { | ||
| this.products = []; | ||
| } | ||
|
|
||
| async fetchProducts(first, last) { | ||
| const products = []; | ||
| for (let i = first; i < last; i++) { | ||
| this.products[i] ??= await this.fetchProduct(i); | ||
| products.push(this.products[i]); | ||
| } | ||
| return products; | ||
| } | ||
|
|
||
| async fetchProduct(index) { | ||
| return new Promise(resolve => { | ||
| setTimeout(() => { | ||
| resolve({ | ||
| key: `P${index}`, | ||
| name: `Product ${index}`, | ||
| height: `${(Math.random() * 100).toFixed(0)} cm`, | ||
| weight: `${(Math.random() * 100).toFixed(1)} KG`, | ||
| price: `${(Math.random() * 1000).toFixed(2)} EUR` | ||
| }); | ||
| }, Math.random() * 10); // Simulate network delay | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| const productStore = new ProductStore(); | ||
| const table = document.getElementById("table"); | ||
| const rowTemplate = document.getElementById("rowTemplate"); | ||
| const virtualizer = document.getElementById("virtualizer"); | ||
|
|
||
| virtualizer.addEventListener("range-change", async (e) => { | ||
| const { first, last } = e.detail; | ||
| const products = await productStore.fetchProducts(first, last); | ||
| for (let i = first; i < last; i++) { | ||
| const rowIndex = i - first; | ||
| const product = products[rowIndex]; | ||
| const row = table.rows[rowIndex] || table.appendChild(rowTemplate.content.firstElementChild.cloneNode(true)); | ||
| row.setAttribute("position", i); | ||
| row.setAttribute("row-key", product.key); | ||
| row.querySelectorAll("[data]").forEach(el => { | ||
| el.textContent = product[el.getAttribute("data")]; | ||
| }); | ||
| } | ||
| for (let i = last; i < table.rows.length; i++) { | ||
| table.rows[i].remove(); | ||
| } | ||
| }); | ||
|
|
||
| requestAnimationFrame(() => virtualizer.reset()); |
40 changes: 40 additions & 0 deletions
40
packages/website/docs/_samples/main/Table/Virtualizer/sample.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!-- playground-fold --> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Sample</title> | ||
| </head> | ||
|
|
||
| <body style="background-color: var(--sapBackgroundColor)"> | ||
| <div class="section"> | ||
| <template id="rowTemplate"> | ||
| <ui5-table-row position="-1" row-key="-1"> | ||
| <ui5-table-cell data="name"></ui5-table-cell> | ||
| <ui5-table-cell data="height"></ui5-table-cell> | ||
| <ui5-table-cell data="weight"></ui5-table-cell> | ||
| <ui5-table-cell data="price"></ui5-table-cell> | ||
| </ui5-table-row> | ||
| </template> | ||
| <!-- playground-fold-end --> | ||
| <ui5-table id="table" loading-delay="100" style="height: 150px;" class="ui5-content-density-compact"> | ||
| <ui5-table-virtualizer id="virtualizer" slot="features" row-count="1000" row-height="32"></ui5-table-virtualizer> | ||
| <!-- playground-fold --> | ||
| <ui5-table-selection slot="features"></ui5-table-selection> | ||
| <ui5-table-header-row slot="headerRow" sticky> | ||
| <ui5-table-header-cell min-width="150px">Product Name</ui5-table-header-cell> | ||
| <ui5-table-header-cell>Dimensions</ui5-table-header-cell> | ||
| <ui5-table-header-cell>Weight</ui5-table-header-cell> | ||
| <ui5-table-header-cell horizontal-align="Right">Price</ui5-table-header-cell> | ||
| </ui5-table-header-row> | ||
| <!-- playground-fold-end --> | ||
| </ui5-table> | ||
| <!-- playground-fold --> | ||
| </div> | ||
| <script type="module" src="main.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
| <!-- playground-fold-end --> |