This is page 159 of 188. Use http://codebase.md/xmlui-org/xmlui/assets/img/%7Burl%7D?format=md&lines=true&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   ├── config.json
│   ├── cyan-tools-design.md
│   ├── every-moments-teach.md
│   ├── full-symbols-accept.md
│   └── tricky-zoos-crash.md
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs-swa.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   ├── staticwebapp.config.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── HelloMd.md
│   │           ├── HeroSection.md
│   │           └── ScrollToTop.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── feed.rss
│   │   ├── mockServiceWorker.js
│   │   ├── pages
│   │   │   ├── _meta.json
│   │   │   ├── app-structure.md
│   │   │   ├── build-editor-component.md
│   │   │   ├── build-hello-world-component.md
│   │   │   ├── components-intro.md
│   │   │   ├── context-variables.md
│   │   │   ├── forms.md
│   │   │   ├── globals.md
│   │   │   ├── glossary.md
│   │   │   ├── helper-tags.md
│   │   │   ├── hosted-deployment.md
│   │   │   ├── howto
│   │   │   │   ├── assign-a-complex-json-literal-to-a-component-variable.md
│   │   │   │   ├── chain-a-refetch.md
│   │   │   │   ├── control-cache-invalidation.md
│   │   │   │   ├── debounce-user-input-for-api-calls.md
│   │   │   │   ├── debounce-with-changelistener.md
│   │   │   │   ├── debug-a-component.md
│   │   │   │   ├── delay-a-datasource-until-another-datasource-is-ready.md
│   │   │   │   ├── delegate-a-method.md
│   │   │   │   ├── do-custom-form-validation.md
│   │   │   │   ├── expose-a-method-from-a-component.md
│   │   │   │   ├── filter-and-transform-data-from-an-api.md
│   │   │   │   ├── group-items-in-list-by-a-property.md
│   │   │   │   ├── handle-background-operations.md
│   │   │   │   ├── hide-an-element-until-its-datasource-is-ready.md
│   │   │   │   ├── make-a-set-of-equal-width-cards.md
│   │   │   │   ├── make-a-table-responsive.md
│   │   │   │   ├── make-navpanel-width-responsive.md
│   │   │   │   ├── modify-a-value-reported-in-a-column.md
│   │   │   │   ├── paginate-a-list.md
│   │   │   │   ├── pass-data-to-a-modal-dialog.md
│   │   │   │   ├── react-to-button-click-not-keystrokes.md
│   │   │   │   ├── set-the-initial-value-of-a-select-from-fetched-data.md
│   │   │   │   ├── share-a-modaldialog-across-components.md
│   │   │   │   ├── sync-selections-between-table-and-list-views.md
│   │   │   │   ├── update-ui-optimistically.md
│   │   │   │   ├── use-built-in-form-validation.md
│   │   │   │   └── use-the-same-modaldialog-to-add-or-edit.md
│   │   │   ├── howto.md
│   │   │   ├── intro.md
│   │   │   ├── layout.md
│   │   │   ├── markup.md
│   │   │   ├── mcp.md
│   │   │   ├── modal-dialogs.md
│   │   │   ├── news-and-reviews.md
│   │   │   ├── reactive-intro.md
│   │   │   ├── refactoring.md
│   │   │   ├── routing-and-links.md
│   │   │   ├── samples
│   │   │   │   ├── color-palette.xmlui
│   │   │   │   ├── color-values.xmlui
│   │   │   │   ├── shadow-sizes.xmlui
│   │   │   │   ├── spacing-sizes.xmlui
│   │   │   │   ├── swatch.xmlui
│   │   │   │   ├── theme-gallery-brief.xmlui
│   │   │   │   └── theme-gallery.xmlui
│   │   │   ├── scoping.md
│   │   │   ├── scripting.md
│   │   │   ├── styles-and-themes
│   │   │   │   ├── common-units.md
│   │   │   │   ├── layout-props.md
│   │   │   │   ├── theme-variable-defaults.md
│   │   │   │   ├── theme-variables.md
│   │   │   │   └── themes.md
│   │   │   ├── template-properties.md
│   │   │   ├── test.md
│   │   │   ├── tutorial-01.md
│   │   │   ├── tutorial-02.md
│   │   │   ├── tutorial-03.md
│   │   │   ├── tutorial-04.md
│   │   │   ├── tutorial-05.md
│   │   │   ├── tutorial-06.md
│   │   │   ├── tutorial-07.md
│   │   │   ├── tutorial-08.md
│   │   │   ├── tutorial-09.md
│   │   │   ├── tutorial-10.md
│   │   │   ├── tutorial-11.md
│   │   │   ├── tutorial-12.md
│   │   │   ├── universal-properties.md
│   │   │   ├── user-defined-components.md
│   │   │   ├── vscode.md
│   │   │   ├── working-with-markdown.md
│   │   │   ├── working-with-text.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-charts
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── BarChart.md
│   │   │   │   ├── DonutChart.md
│   │   │   │   ├── LabelList.md
│   │   │   │   ├── Legend.md
│   │   │   │   ├── LineChart.md
│   │   │   │   └── PieChart.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   └── xmlui-spreadsheet
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       └── Spreadsheet.md
│   │   ├── resources
│   │   │   ├── devdocs
│   │   │   │   ├── debug-proxy-object-2.png
│   │   │   │   ├── debug-proxy-object.png
│   │   │   │   ├── table_editor_01.png
│   │   │   │   ├── table_editor_02.png
│   │   │   │   ├── table_editor_03.png
│   │   │   │   ├── table_editor_04.png
│   │   │   │   ├── table_editor_05.png
│   │   │   │   ├── table_editor_06.png
│   │   │   │   ├── table_editor_07.png
│   │   │   │   ├── table_editor_08.png
│   │   │   │   ├── table_editor_09.png
│   │   │   │   ├── table_editor_10.png
│   │   │   │   ├── table_editor_11.png
│   │   │   │   ├── table-editor-01.png
│   │   │   │   ├── table-editor-02.png
│   │   │   │   ├── table-editor-03.png
│   │   │   │   ├── table-editor-04.png
│   │   │   │   ├── table-editor-06.png
│   │   │   │   ├── table-editor-07.png
│   │   │   │   ├── table-editor-08.png
│   │   │   │   ├── table-editor-09.png
│   │   │   │   └── xmlui-rendering-of-tiptap-markdown.png
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   ├── clients.json
│   │   │   │   ├── daily-revenue.json
│   │   │   │   ├── dashboard-stats.json
│   │   │   │   ├── demo.xmlui
│   │   │   │   ├── demo.xmlui.xs
│   │   │   │   ├── downloads
│   │   │   │   │   └── downloads.json
│   │   │   │   ├── for-download
│   │   │   │   │   ├── index-with-api.html
│   │   │   │   │   ├── index.html
│   │   │   │   │   ├── mockApi.js
│   │   │   │   │   ├── start-darwin.sh
│   │   │   │   │   ├── start-linux.sh
│   │   │   │   │   ├── start.bat
│   │   │   │   │   └── xmlui
│   │   │   │   │       └── xmlui-standalone.umd.js
│   │   │   │   ├── getting-started
│   │   │   │   │   ├── cl-tutorial-final.zip
│   │   │   │   │   ├── cl-tutorial.zip
│   │   │   │   │   ├── cl-tutorial2.zip
│   │   │   │   │   ├── cl-tutorial3.zip
│   │   │   │   │   ├── cl-tutorial4.zip
│   │   │   │   │   ├── cl-tutorial5.zip
│   │   │   │   │   ├── cl-tutorial6.zip
│   │   │   │   │   ├── getting-started.zip
│   │   │   │   │   ├── hello-xmlui.zip
│   │   │   │   │   ├── xmlui-empty.zip
│   │   │   │   │   └── xmlui-starter.zip
│   │   │   │   ├── howto
│   │   │   │   │   └── component-icons
│   │   │   │   │       └── up-arrow.svg
│   │   │   │   ├── invoices.json
│   │   │   │   ├── monthly-status.json
│   │   │   │   ├── news-and-reviews.json
│   │   │   │   ├── products.json
│   │   │   │   ├── releases.json
│   │   │   │   ├── tutorials
│   │   │   │   │   ├── datasource
│   │   │   │   │   │   └── api.ts
│   │   │   │   │   └── p2do
│   │   │   │   │       ├── api.ts
│   │   │   │   │       └── todo-logo.svg
│   │   │   │   └── xmlui.json
│   │   │   ├── github.svg
│   │   │   ├── images
│   │   │   │   ├── apiaction-tutorial
│   │   │   │   │   ├── add-success.png
│   │   │   │   │   ├── apiaction-param.png
│   │   │   │   │   ├── change-completed.png
│   │   │   │   │   ├── change-in-progress.png
│   │   │   │   │   ├── confirm-delete.png
│   │   │   │   │   ├── data-error.png
│   │   │   │   │   ├── data-progress.png
│   │   │   │   │   ├── data-success.png
│   │   │   │   │   ├── display-1.png
│   │   │   │   │   ├── item-deleted.png
│   │   │   │   │   ├── item-updated.png
│   │   │   │   │   ├── missing-api-key.png
│   │   │   │   │   ├── new-item-added.png
│   │   │   │   │   └── test-message.png
│   │   │   │   ├── chat-api
│   │   │   │   │   └── domain-model.svg
│   │   │   │   ├── components
│   │   │   │   │   ├── image
│   │   │   │   │   │   └── breakfast.jpg
│   │   │   │   │   ├── markdown
│   │   │   │   │   │   └── colors.png
│   │   │   │   │   └── modal
│   │   │   │   │       ├── deep_link_dialog_1.jpg
│   │   │   │   │       └── deep_link_dialog_2.jpg
│   │   │   │   ├── create-apps
│   │   │   │   │   ├── collapsed-vertical.png
│   │   │   │   │   ├── using-forms-warning-dialog.png
│   │   │   │   │   └── using-forms.png
│   │   │   │   ├── datasource-tutorial
│   │   │   │   │   ├── data-with-header.png
│   │   │   │   │   ├── filtered-data.png
│   │   │   │   │   ├── filtered-items.png
│   │   │   │   │   ├── initial-page-items.png
│   │   │   │   │   ├── list-items.png
│   │   │   │   │   ├── next-page-items.png
│   │   │   │   │   ├── no-data.png
│   │   │   │   │   ├── pagination-1.jpg
│   │   │   │   │   ├── pagination-1.png
│   │   │   │   │   ├── polling-1.png
│   │   │   │   │   ├── refetch-data.png
│   │   │   │   │   ├── slow-loading.png
│   │   │   │   │   ├── test-message.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── unconventional-data.png
│   │   │   │   │   └── unfiltered-items.png
│   │   │   │   ├── flower.jpg
│   │   │   │   ├── get-started
│   │   │   │   │   ├── add-new-contact.png
│   │   │   │   │   ├── app-modified.png
│   │   │   │   │   ├── app-start.png
│   │   │   │   │   ├── app-with-boxes.png
│   │   │   │   │   ├── app-with-toast.png
│   │   │   │   │   ├── boilerplate-structure.png
│   │   │   │   │   ├── cl-initial.png
│   │   │   │   │   ├── cl-start.png
│   │   │   │   │   ├── contact-counts.png
│   │   │   │   │   ├── contact-dialog-title.png
│   │   │   │   │   ├── contact-dialog.png
│   │   │   │   │   ├── contact-menus.png
│   │   │   │   │   ├── contact-predicates.png
│   │   │   │   │   ├── context-menu.png
│   │   │   │   │   ├── dashboard-numbers.png
│   │   │   │   │   ├── default-contact-list.png
│   │   │   │   │   ├── delete-contact.png
│   │   │   │   │   ├── delete-task.png
│   │   │   │   │   ├── detailed-template.png
│   │   │   │   │   ├── edit-contact-details.png
│   │   │   │   │   ├── edited-contact-saved.png
│   │   │   │   │   ├── empty-sections.png
│   │   │   │   │   ├── filter-completed.png
│   │   │   │   │   ├── fullwidth-desktop.png
│   │   │   │   │   ├── fullwidth-mobile.png
│   │   │   │   │   ├── initial-table.png
│   │   │   │   │   ├── items-and-badges.png
│   │   │   │   │   ├── loading-message.png
│   │   │   │   │   ├── new-contact-button.png
│   │   │   │   │   ├── new-contact-saved.png
│   │   │   │   │   ├── no-empty-sections.png
│   │   │   │   │   ├── personal-todo-initial.png
│   │   │   │   │   ├── piechart.png
│   │   │   │   │   ├── review-today.png
│   │   │   │   │   ├── rudimentary-dashboard.png
│   │   │   │   │   ├── section-collapsed.png
│   │   │   │   │   ├── sectioned-items.png
│   │   │   │   │   ├── sections-ordered.png
│   │   │   │   │   ├── spacex-list-with-links.png
│   │   │   │   │   ├── spacex-list.png
│   │   │   │   │   ├── start-personal-todo-1.png
│   │   │   │   │   ├── submit-new-contact.png
│   │   │   │   │   ├── submit-new-task.png
│   │   │   │   │   ├── syntax-highlighting.png
│   │   │   │   │   ├── table-with-badge.png
│   │   │   │   │   ├── template-with-card.png
│   │   │   │   │   ├── test-emulated-api.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── todo-logo.png
│   │   │   │   │   └── xmlui-tools.png
│   │   │   │   ├── HelloApp.png
│   │   │   │   ├── HelloApp2.png
│   │   │   │   ├── logos
│   │   │   │   │   ├── xmlui1.svg
│   │   │   │   │   ├── xmlui2.svg
│   │   │   │   │   ├── xmlui3.svg
│   │   │   │   │   ├── xmlui4.svg
│   │   │   │   │   ├── xmlui5.svg
│   │   │   │   │   ├── xmlui6.svg
│   │   │   │   │   └── xmlui7.svg
│   │   │   │   ├── pdf
│   │   │   │   │   └── dummy-pdf.jpg
│   │   │   │   ├── rendering-engine
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   ├── Component.svg
│   │   │   │   │   ├── CompoundComponent.svg
│   │   │   │   │   ├── RootComponent.svg
│   │   │   │   │   └── tree-with-containers.svg
│   │   │   │   ├── reviewers-guide
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   └── incbutton-in-action.png
│   │   │   │   ├── tools
│   │   │   │   │   └── boilerplate-structure.png
│   │   │   │   ├── try.svg
│   │   │   │   ├── tutorial
│   │   │   │   │   ├── app-chat-history.png
│   │   │   │   │   ├── app-content-placeholder.png
│   │   │   │   │   ├── app-header-and-content.png
│   │   │   │   │   ├── app-links-channel-selected.png
│   │   │   │   │   ├── app-links-click.png
│   │   │   │   │   ├── app-navigation.png
│   │   │   │   │   ├── finished-ex01.png
│   │   │   │   │   ├── finished-ex02.png
│   │   │   │   │   ├── hello.png
│   │   │   │   │   ├── splash-screen-advanced.png
│   │   │   │   │   ├── splash-screen-after-click.png
│   │   │   │   │   ├── splash-screen-centered.png
│   │   │   │   │   ├── splash-screen-events.png
│   │   │   │   │   ├── splash-screen-expression.png
│   │   │   │   │   ├── splash-screen-reuse-after.png
│   │   │   │   │   ├── splash-screen-reuse-before.png
│   │   │   │   │   └── splash-screen.png
│   │   │   │   └── tutorial-01.png
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   ├── Boxes.xmlui
│   │   │   ├── Breadcrumb.xmlui
│   │   │   ├── ChangeLog.xmlui
│   │   │   ├── ColorPalette.xmlui
│   │   │   ├── DocumentLinks.xmlui
│   │   │   ├── DocumentPage.xmlui
│   │   │   ├── DocumentPageNoTOC.xmlui
│   │   │   ├── Icons.xmlui
│   │   │   ├── IncButton.xmlui
│   │   │   ├── IncButton2.xmlui
│   │   │   ├── NameValue.xmlui
│   │   │   ├── PageNotFound.xmlui
│   │   │   ├── PaletteItem.xmlui
│   │   │   ├── Palettes.xmlui
│   │   │   ├── SectionHeader.xmlui
│   │   │   ├── TBD.xmlui
│   │   │   ├── Test.xmlui
│   │   │   ├── ThemesIntro.xmlui
│   │   │   ├── ThousandThemes.xmlui
│   │   │   ├── TubeStops.xmlui
│   │   │   ├── TubeStops.xmlui.xs
│   │   │   └── TwoColumnCode.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       ├── docs-theme.ts
│   │       ├── earthtone.ts
│   │       ├── xmlui-gray-on-default.ts
│   │       ├── xmlui-green-on-default.ts
│   │       └── xmlui-orange-on-default.ts
│   └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│   ├── tsconfig.json
│   ├── xmlui-animations
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── Animation.tsx
│   │       ├── AnimationNative.tsx
│   │       ├── FadeAnimation.tsx
│   │       ├── FadeInAnimation.tsx
│   │       ├── FadeOutAnimation.tsx
│   │       ├── index.tsx
│   │       ├── ScaleAnimation.tsx
│   │       └── SlideInAnimation.tsx
│   ├── xmlui-devtools
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── devtools
│   │   │   │   ├── DevTools.tsx
│   │   │   │   ├── DevToolsNative.module.scss
│   │   │   │   ├── DevToolsNative.tsx
│   │   │   │   ├── ModalDialog.module.scss
│   │   │   │   ├── ModalDialog.tsx
│   │   │   │   ├── ModalVisibilityContext.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── editor
│   │   │   │   └── Editor.tsx
│   │   │   └── index.tsx
│   │   └── vite.config-overrides.ts
│   ├── xmlui-hello-world
│   │   ├── .gitignore
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── HelloWorld.module.scss
│   │       ├── HelloWorld.tsx
│   │       ├── HelloWorldNative.tsx
│   │       └── index.tsx
│   ├── xmlui-os-frames
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── IPhoneFrame.module.scss
│   │       ├── IPhoneFrame.tsx
│   │       ├── MacOSAppFrame.module.scss
│   │       ├── MacOSAppFrame.tsx
│   │       ├── WindowsAppFrame.module.scss
│   │       └── WindowsAppFrame.tsx
│   ├── xmlui-pdf
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   ├── components
│   │   │   │   └── Pdf.xmlui
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── LazyPdfNative.tsx
│   │       ├── Pdf.module.scss
│   │       └── Pdf.tsx
│   ├── xmlui-playground
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── hooks
│   │       │   ├── usePlayground.ts
│   │       │   └── useToast.ts
│   │       ├── index.tsx
│   │       ├── playground
│   │       │   ├── Box.module.scss
│   │       │   ├── Box.tsx
│   │       │   ├── CodeSelector.module.scss
│   │       │   ├── CodeSelector.tsx
│   │       │   ├── ConfirmationDialog.module.scss
│   │       │   ├── ConfirmationDialog.tsx
│   │       │   ├── Editor.tsx
│   │       │   ├── Header.module.scss
│   │       │   ├── Header.tsx
│   │       │   ├── Playground.tsx
│   │       │   ├── PlaygroundContent.module.scss
│   │       │   ├── PlaygroundContent.tsx
│   │       │   ├── PlaygroundNative.module.scss
│   │       │   ├── PlaygroundNative.tsx
│   │       │   ├── Preview.tsx
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Search.module.scss
│   │       └── Search.tsx
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       └── src
│           ├── Carousel
│           │   ├── Carousel.module.scss
│           │   ├── Carousel.tsx
│           │   ├── CarouselContext.tsx
│           │   └── CarouselNative.tsx
│           ├── FancyButton
│           │   ├── FancyButton.module.scss
│           │   ├── FancyButton.tsx
│           │   └── FancyButton.xmlui
│           ├── Hello
│           │   ├── Hello.tsx
│           │   ├── Hello.xmlui
│           │   └── Hello.xmlui.xs
│           ├── HeroSection
│           │   ├── HeroSection.module.scss
│           │   ├── HeroSection.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.cjs
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── component-metadata.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   ├── ContentSeparatorNative.tsx
    │   │   │   └── test-padding.xmlui
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.js
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.json
    ├── tsdown.config.ts
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/docs/content/components/Table.md:
--------------------------------------------------------------------------------

```markdown
   1 | # Table [#table]
   2 | 
   3 | `Table` presents structured data for viewing, sorting, selection, and interaction.
   4 | 
   5 | **Key features:**
   6 | - **Data integration**: Load data from APIs via [DataSource](/components/DataSource) or use static arrays
   7 | - **Virtualization**: Only renders visible rows for smooth performance with large datasets
   8 | - **Row selection**: Support single or multi-row selection for bulk operations
   9 | - **Pagination**: Built-in pagination controls for managing large datasets
  10 | 
  11 | Use `Column` to define headers, data binding, sorting behavior, and custom cell content.
  12 | 
  13 | In the following sections the examples use data with the structure outlined below:
  14 | 
  15 | | Id   | Name    | Quantity | Unit   | Category   |
  16 | | :--- | :------ | :------- | :----- | :--------- |
  17 | | 0    | Apples  | 5        | pieces | fruits     |
  18 | | 1    | Bananas | 6        | pieces | fruits     |
  19 | | 2    | Carrots | 100      | grams  | vegetables |
  20 | | 3    | Spinach | 1        | bunch  | vegetables |
  21 | | 4    | Milk    | 10       | liter  | diary      |
  22 | | 5    | Cheese  | 200      | grams  | diary      |
  23 | 
  24 | The data is provided as JSON. In the source code samples, the `data={[...]}` declaration represents the data above.
  25 | 
  26 | All samples use table columns with the following definition unless noted otherwise
  27 | (The `...` declaration nested into `<Table>` represents this column definition):
  28 | 
  29 | ```xmlui copy 
  30 | <Table data='{[...]}'>
  31 |   <Column bindTo="name"/>
  32 |   <Column bindTo="quantity"/>
  33 |   <Column bindTo="unit"/>
  34 | </Table>
  35 | ```
  36 | 
  37 | > **Note**: See [`Column`](../components/Column) to learn more about table columns.
  38 | 
  39 | ## Properties [#properties]
  40 | 
  41 | ### `alwaysShowSelectionHeader` (default: false) [#alwaysshowselectionheader-default-false]
  42 | 
  43 | This property indicates when the row selection header is displayed. When the value is `true,` the selection header is always visible. Otherwise, it is displayed only when hovered.
  44 | 
  45 | ### `autoFocus` (default: false) [#autofocus-default-false]
  46 | 
  47 | If this property is set to `true`, the component gets the focus automatically when displayed.
  48 | 
  49 | ### `buttonRowPosition` (default: "center") [#buttonrowposition-default-center]
  50 | 
  51 | Determines where to place the pagination button row in the layout. It works the same as the [Pagination component property](./Pagination#buttonrowposition).
  52 | 
  53 | Available values: `start`, `center` **(default)**, `end`
  54 | 
  55 | ### `cellVerticalAlign` (default: "center") [#cellverticalalign-default-center]
  56 | 
  57 | This property controls the vertical alignment of cell content. It can be set to `top`, `center`, or `bottom`.
  58 | 
  59 | Available values: `top`, `center` **(default)**, `bottom`
  60 | 
  61 | ### `checkboxTolerance` (default: "compact") [#checkboxtolerance-default-compact]
  62 | 
  63 | This property controls the tolerance area around checkboxes for easier interaction. This property only has an effect when the rowsSelectable property is set to `true`. `none` provides no tolerance (0px), `compact` provides minimal tolerance (8px), `comfortable` provides medium tolerance (12px), and `spacious` provides generous tolerance (16px) for improved accessibility.
  64 | 
  65 | Available values: `none`, `compact` **(default)**, `comfortable`, `spacious`
  66 | 
  67 | The default value is `false`.
  68 | 
  69 | ```xmlui copy /checkboxTolerance="comfortable"/
  70 | <App>
  71 |   <Table data='{[...]}' 
  72 |     rowsSelectable="true"
  73 |     checkboxTolerance="comfortable"
  74 |   >
  75 |     <Column bindTo="name"/>
  76 |     <Column bindTo="quantity"/>
  77 |     <Column bindTo="unit"/>
  78 |   </Table>
  79 | </App>
  80 | ```
  81 | 
  82 | ```xmlui-pg name="Example: checkboxTolerance"
  83 | <App>
  84 |   <Table data='{[
  85 |   {
  86 |     id: 0,
  87 |     name: "Apples",
  88 |     quantity: 5,
  89 |     unit: "pieces",
  90 |     category: "fruits",
  91 |     key: 5,
  92 |   },
  93 |   {
  94 |     id: 1,
  95 |     name: "Bananas",
  96 |     quantity: 6,
  97 |     unit: "pieces",
  98 |     category: "fruits",
  99 |     key: 4,
 100 |   },
 101 |   {
 102 |     id: 2,
 103 |     name: "Carrots",
 104 |     quantity: 100,
 105 |     unit: "grams",
 106 |     category: "vegetables",
 107 |     key: 3,
 108 |   },
 109 |   {
 110 |     id: 3,
 111 |     name: "Spinach",
 112 |     quantity: 1,
 113 |     unit: "bunch",
 114 |     category: "vegetables",
 115 |     key: 2,
 116 |   },
 117 |   {
 118 |     id: 4,
 119 |     name: "Milk",
 120 |     quantity: 10,
 121 |     unit: "liter",
 122 |     category: "dairy",
 123 |     key: 1,
 124 |   },
 125 |   {
 126 |     id: 5,
 127 |     name: "Cheese",
 128 |     quantity: 200,
 129 |     unit: "grams",
 130 |     category: "dairy",
 131 |     key: 0,
 132 |   },
 133 | ]}' 
 134 |     rowsSelectable="true"
 135 |     checkboxTolerance="comfortable">
 136 |     <Column bindTo="name"/>
 137 |     <Column bindTo="quantity"/>
 138 |     <Column bindTo="unit"/>
 139 |   </Table>
 140 | </App>
 141 | ```
 142 | 
 143 | ### `data` [#data]
 144 | 
 145 | The component receives data via this property. The `data` property is a list of items that the `Table` can display.
 146 | 
 147 | ```xmlui copy /data='{[...]}'/
 148 | <App>
 149 |   <Table data='{[...]}'>
 150 |     <Column bindTo="name"/>
 151 |     <Column bindTo="quantity"/>
 152 |     <Column bindTo="unit"/>
 153 |   </Table>
 154 | </App>
 155 | ```
 156 | 
 157 | ```xmlui-pg name="Example: data"
 158 | <App>
 159 |   <Table data='{[
 160 |   {
 161 |     id: 0,
 162 |     name: "Apples",
 163 |     quantity: 5,
 164 |     unit: "pieces",
 165 |     category: "fruits",
 166 |     key: 5,
 167 |   },
 168 |   {
 169 |     id: 1,
 170 |     name: "Bananas",
 171 |     quantity: 6,
 172 |     unit: "pieces",
 173 |     category: "fruits",
 174 |     key: 4,
 175 |   },
 176 |   {
 177 |     id: 2,
 178 |     name: "Carrots",
 179 |     quantity: 100,
 180 |     unit: "grams",
 181 |     category: "vegetables",
 182 |     key: 3,
 183 |   },
 184 |   {
 185 |     id: 3,
 186 |     name: "Spinach",
 187 |     quantity: 1,
 188 |     unit: "bunch",
 189 |     category: "vegetables",
 190 |     key: 2,
 191 |   },
 192 |   {
 193 |     id: 4,
 194 |     name: "Milk",
 195 |     quantity: 10,
 196 |     unit: "liter",
 197 |     category: "dairy",
 198 |     key: 1,
 199 |   },
 200 |   {
 201 |     id: 5,
 202 |     name: "Cheese",
 203 |     quantity: 200,
 204 |     unit: "grams",
 205 |     category: "dairy",
 206 |     key: 0,
 207 |   },
 208 | ]}'>
 209 |     <Column bindTo="name"/>
 210 |     <Column bindTo="quantity"/>
 211 |     <Column bindTo="unit"/>
 212 |   </Table>
 213 | </App>
 214 | ```
 215 | 
 216 | You can also provide the `Table` with data directly from an API via this property.
 217 | Here, the component displays rocket information coming from the official SpaceX API.
 218 | 
 219 | ```xmlui-pg copy display name="Example: data API Call"
 220 | <App>
 221 |   <Table data='https://api.spacexdata.com/v3/rockets'>
 222 |     <Column header="Image" size="140px">
 223 |       <Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
 224 |     </Column>
 225 |     <Column canSort="true" bindTo="country"/>
 226 |     <Column canSort="true" bindTo="company"/>
 227 |   </Table>
 228 | </App>
 229 | ```
 230 | 
 231 | ### `enableMultiRowSelection` (default: true) [#enablemultirowselection-default-true]
 232 | 
 233 | This boolean property indicates whether you can select multiple rows in the table. This property only has an effect when the rowsSelectable property is set. Setting it to `false` limits selection to a single row.
 234 | 
 235 | This boolean property indicates whether you can select multiple rows in the table.
 236 | This property only has an effect when the `rowsSelectable` property is set.
 237 | Setting it to `false` limits selection to a single row.
 238 | 
 239 | By default, the value of this property is `true`.
 240 | 
 241 | ```xmlui copy /enableMultiRowSelection="false"/
 242 | <App>
 243 |   <Table data='{[...]}' 
 244 |     rowsSelectable="true" 
 245 |     enableMultiRowSelection="false">
 246 |     <Column bindTo="name"/>
 247 |     <Column bindTo="quantity"/>
 248 |     <Column bindTo="unit"/>
 249 |   </Table>
 250 | </App>
 251 | ```
 252 | 
 253 | ```xmlui-pg name="Example: enableMultiRowSelection"
 254 | <App>
 255 |   <Table data='{[
 256 |   {
 257 |     id: 0,
 258 |     name: "Apples",
 259 |     quantity: 5,
 260 |     unit: "pieces",
 261 |     category: "fruits",
 262 |     key: 5,
 263 |   },
 264 |   {
 265 |     id: 1,
 266 |     name: "Bananas",
 267 |     quantity: 6,
 268 |     unit: "pieces",
 269 |     category: "fruits",
 270 |     key: 4,
 271 |   },
 272 |   {
 273 |     id: 2,
 274 |     name: "Carrots",
 275 |     quantity: 100,
 276 |     unit: "grams",
 277 |     category: "vegetables",
 278 |     key: 3,
 279 |   },
 280 |   {
 281 |     id: 3,
 282 |     name: "Spinach",
 283 |     quantity: 1,
 284 |     unit: "bunch",
 285 |     category: "vegetables",
 286 |     key: 2,
 287 |   },
 288 |   {
 289 |     id: 4,
 290 |     name: "Milk",
 291 |     quantity: 10,
 292 |     unit: "liter",
 293 |     category: "dairy",
 294 |     key: 1,
 295 |   },
 296 |   {
 297 |     id: 5,
 298 |     name: "Cheese",
 299 |     quantity: 200,
 300 |     unit: "grams",
 301 |     category: "dairy",
 302 |     key: 0,
 303 |   },
 304 | ]}' 
 305 |     rowsSelectable="true" 
 306 |     enableMultiRowSelection="false">
 307 |     <Column bindTo="name"/>
 308 |     <Column bindTo="quantity"/>
 309 |     <Column bindTo="unit"/>
 310 |   </Table>
 311 | </App>
 312 | ```
 313 | 
 314 | ### `headerHeight` [#headerheight]
 315 | 
 316 | This optional property is used to specify the height of the table header.
 317 | 
 318 | It accepts common [size values](/styles-and-themes/common-units#size-values).
 319 | 
 320 | ```xmlui copy /headerHeight="60px"/
 321 | <App>
 322 |   <Table data='{[...]}' headerHeight="60px">
 323 |     <Column bindTo="name"/>
 324 |     <Column bindTo="quantity"/>
 325 |     <Column bindTo="unit"/>
 326 |   </Table>
 327 | </App>
 328 | ```
 329 | 
 330 | ```xmlui-pg name="Example: headerHeight"
 331 | <App>
 332 |   <Table data='{[
 333 |   {
 334 |     id: 0,
 335 |     name: "Apples",
 336 |     quantity: 5,
 337 |     unit: "pieces",
 338 |     category: "fruits",
 339 |     key: 5,
 340 |   },
 341 |   {
 342 |     id: 1,
 343 |     name: "Bananas",
 344 |     quantity: 6,
 345 |     unit: "pieces",
 346 |     category: "fruits",
 347 |     key: 4,
 348 |   },
 349 |   {
 350 |     id: 2,
 351 |     name: "Carrots",
 352 |     quantity: 100,
 353 |     unit: "grams",
 354 |     category: "vegetables",
 355 |     key: 3,
 356 |   },
 357 |   {
 358 |     id: 3,
 359 |     name: "Spinach",
 360 |     quantity: 1,
 361 |     unit: "bunch",
 362 |     category: "vegetables",
 363 |     key: 2,
 364 |   },
 365 |   {
 366 |     id: 4,
 367 |     name: "Milk",
 368 |     quantity: 10,
 369 |     unit: "liter",
 370 |     category: "dairy",
 371 |     key: 1,
 372 |   },
 373 |   {
 374 |     id: 5,
 375 |     name: "Cheese",
 376 |     quantity: 200,
 377 |     unit: "grams",
 378 |     category: "dairy",
 379 |     key: 0,
 380 |   },
 381 | ]}' 
 382 |     headerHeight="60px">
 383 |     <Column bindTo="name"/>
 384 |     <Column bindTo="quantity"/>
 385 |     <Column bindTo="unit"/>
 386 |   </Table>
 387 | </App>
 388 | ```
 389 | 
 390 | ### `hideHeader` (default: false) [#hideheader-default-false]
 391 | 
 392 | Set the header visibility using this property. Set it to `true` to hide the header.
 393 | 
 394 | Set the header visibility using this property. Set it to `true` to hide the header.
 395 | The default value is `false`.
 396 | 
 397 | ```xmlui copy /hideHeader="true"/
 398 | <App>
 399 |   <Table data='{[...]}' hideHeader="true">
 400 |     <Column bindTo="name"/>
 401 |     <Column bindTo="quantity"/>
 402 |     <Column bindTo="unit"/>
 403 |   </Table>
 404 | </App>
 405 | ```
 406 | 
 407 | ```xmlui-pg name="Example: hideHeader" height="300px"
 408 | <App>
 409 |   <Table data='{[
 410 |   {
 411 |     id: 0,
 412 |     name: "Apples",
 413 |     quantity: 5,
 414 |     unit: "pieces",
 415 |     category: "fruits",
 416 |     key: 5,
 417 |   },
 418 |   {
 419 |     id: 1,
 420 |     name: "Bananas",
 421 |     quantity: 6,
 422 |     unit: "pieces",
 423 |     category: "fruits",
 424 |     key: 4,
 425 |   },
 426 |   {
 427 |     id: 2,
 428 |     name: "Carrots",
 429 |     quantity: 100,
 430 |     unit: "grams",
 431 |     category: "vegetables",
 432 |     key: 3,
 433 |   },
 434 |   {
 435 |     id: 3,
 436 |     name: "Spinach",
 437 |     quantity: 1,
 438 |     unit: "bunch",
 439 |     category: "vegetables",
 440 |     key: 2,
 441 |   },
 442 |   {
 443 |     id: 4,
 444 |     name: "Milk",
 445 |     quantity: 10,
 446 |     unit: "liter",
 447 |     category: "dairy",
 448 |     key: 1,
 449 |   },
 450 |   {
 451 |     id: 5,
 452 |     name: "Cheese",
 453 |     quantity: 200,
 454 |     unit: "grams",
 455 |     category: "dairy",
 456 |     key: 0,
 457 |   },
 458 | ]}' 
 459 |     hideHeader="true">
 460 |     <Column bindTo="name"/>
 461 |     <Column bindTo="quantity"/>
 462 |     <Column bindTo="unit"/>
 463 |   </Table>
 464 | </App>
 465 | ```
 466 | 
 467 | ### `iconNoSort` [#iconnosort]
 468 | 
 469 | Allows setting an alternate icon displayed in the Table column header when sorting is enabled, but the column remains unsorted. You can change the default icon for all Table instances with the "icon.nosort:Table" declaration in the app configuration file.
 470 | 
 471 | Allows the customization of the icon displayed in a Table column header when when sorting is enabled
 472 | and sorting is not done according to the column. Use the "-" (dash) value to sign that you do not want to display an icon when a table column is not sorted.
 473 | 
 474 | ```xmlui copy /iconNoSort="close"/
 475 | <App>
 476 |   <Table data='{[...]}' sortBy="quantity" iconNoSort="close">
 477 |     <Column bindTo="name" canSort="true" />
 478 |     <Column bindTo="quantity" canSort="true" />
 479 |     <Column bindTo="unit" canSort="true" />
 480 |   </Table>
 481 | </App>
 482 | ```
 483 | 
 484 | ```xmlui-pg name="Example: iconNoSort"
 485 | <App>
 486 |   <Table data='{[
 487 |   {
 488 |     id: 0,
 489 |     name: "Apples",
 490 |     quantity: 5,
 491 |     unit: "pieces",
 492 |     category: "fruits",
 493 |     key: 5,
 494 |   },
 495 |   {
 496 |     id: 1,
 497 |     name: "Bananas",
 498 |     quantity: 6,
 499 |     unit: "pieces",
 500 |     category: "fruits",
 501 |     key: 4,
 502 |   },
 503 |   {
 504 |     id: 2,
 505 |     name: "Carrots",
 506 |     quantity: 100,
 507 |     unit: "grams",
 508 |     category: "vegetables",
 509 |     key: 3,
 510 |   },
 511 |   {
 512 |     id: 3,
 513 |     name: "Spinach",
 514 |     quantity: 1,
 515 |     unit: "bunch",
 516 |     category: "vegetables",
 517 |     key: 2,
 518 |   },
 519 |   {
 520 |     id: 4,
 521 |     name: "Milk",
 522 |     quantity: 10,
 523 |     unit: "liter",
 524 |     category: "dairy",
 525 |     key: 1,
 526 |   },
 527 |   {
 528 |     id: 5,
 529 |     name: "Cheese",
 530 |     quantity: 200,
 531 |     unit: "grams",
 532 |     category: "dairy",
 533 |     key: 0,
 534 |   },
 535 | ]}' 
 536 |     sortBy="quantity" iconNoSort="close">
 537 |     <Column bindTo="name" canSort="true" />
 538 |     <Column bindTo="quantity" canSort="true" />
 539 |     <Column bindTo="unit" canSort="true" />
 540 |   </Table>
 541 | </App>
 542 | ```
 543 | 
 544 | ### `iconSortAsc` [#iconsortasc]
 545 | 
 546 | Allows setting an alernate icon displayed in the Table column header when sorting is enabled, and the column is sorted in ascending order. You can change the default icon for all Table instances with the "icon.sortasc:Table" declaration in the app configuration file.
 547 | 
 548 | Allows the customization of the icon displayed in a Table column header when sorting is enabled,
 549 | sorting is done according to the column, and the column is sorted in ascending order.
 550 | 
 551 | ```xmlui copy /iconSortAsc="chevronup"/
 552 | <App>
 553 |   <Table data='{[...]}' sortBy="quantity" iconSortAsc="chevronup">
 554 |     <Column bindTo="name" canSort="true" />
 555 |     <Column bindTo="quantity" canSort="true" />
 556 |     <Column bindTo="unit" canSort="true" />
 557 |   </Table>
 558 | </App>
 559 | ```
 560 | 
 561 | ```xmlui-pg copy name="Example: iconSortAsc"
 562 | <App>
 563 |   <Table data='{[
 564 |   {
 565 |     id: 0,
 566 |     name: "Apples",
 567 |     quantity: 5,
 568 |     unit: "pieces",
 569 |     category: "fruits",
 570 |     key: 5,
 571 |   },
 572 |   {
 573 |     id: 1,
 574 |     name: "Bananas",
 575 |     quantity: 6,
 576 |     unit: "pieces",
 577 |     category: "fruits",
 578 |     key: 4,
 579 |   },
 580 |   {
 581 |     id: 2,
 582 |     name: "Carrots",
 583 |     quantity: 100,
 584 |     unit: "grams",
 585 |     category: "vegetables",
 586 |     key: 3,
 587 |   },
 588 |   {
 589 |     id: 3,
 590 |     name: "Spinach",
 591 |     quantity: 1,
 592 |     unit: "bunch",
 593 |     category: "vegetables",
 594 |     key: 2,
 595 |   },
 596 |   {
 597 |     id: 4,
 598 |     name: "Milk",
 599 |     quantity: 10,
 600 |     unit: "liter",
 601 |     category: "dairy",
 602 |     key: 1,
 603 |   },
 604 |   {
 605 |     id: 5,
 606 |     name: "Cheese",
 607 |     quantity: 200,
 608 |     unit: "grams",
 609 |     category: "dairy",
 610 |     key: 0,
 611 |   },
 612 | ]}' 
 613 |     sortBy="quantity" iconSortAsc="chevronup">
 614 |     <Column bindTo="name" canSort="true" />
 615 |     <Column bindTo="quantity" canSort="true" />
 616 |     <Column bindTo="unit" canSort="true" />
 617 |   </Table>
 618 | </App>
 619 | ```
 620 | 
 621 | ### `iconSortDesc` [#iconsortdesc]
 622 | 
 623 | Allows setting an alternate icon displayed in the Table column header when sorting is enabled, and the column is sorted in descending order. You can change the default icon for all Table instances with the "icon.sortdesc:Table" declaration in the app configuration file.
 624 | 
 625 | Allows the customization of the icon displayed in a Table column header when sorting is enabled,
 626 | sorting is done according to the column, and the column is sorted in descending order.
 627 | 
 628 | ```xmlui copy /iconSortDesc="chevrondown"/
 629 | <App>
 630 |   <Table data='{[...]}' sortBy="quantity" iconSortDesc="chevrondown">
 631 |     <Column bindTo="name" canSort="true" />
 632 |     <Column bindTo="quantity" canSort="true" />
 633 |     <Column bindTo="unit" canSort="true" />
 634 |   </Table>
 635 | </App>
 636 | ```
 637 | 
 638 | Select a column header and set it to descending ordering.
 639 | 
 640 | ```xmlui-pg name="Example: iconSortDesc"
 641 | <App>
 642 |   <Table data='{[
 643 |   {
 644 |     id: 0,
 645 |     name: "Apples",
 646 |     quantity: 5,
 647 |     unit: "pieces",
 648 |     category: "fruits",
 649 |     key: 5,
 650 |   },
 651 |   {
 652 |     id: 1,
 653 |     name: "Bananas",
 654 |     quantity: 6,
 655 |     unit: "pieces",
 656 |     category: "fruits",
 657 |     key: 4,
 658 |   },
 659 |   {
 660 |     id: 2,
 661 |     name: "Carrots",
 662 |     quantity: 100,
 663 |     unit: "grams",
 664 |     category: "vegetables",
 665 |     key: 3,
 666 |   },
 667 |   {
 668 |     id: 3,
 669 |     name: "Spinach",
 670 |     quantity: 1,
 671 |     unit: "bunch",
 672 |     category: "vegetables",
 673 |     key: 2,
 674 |   },
 675 |   {
 676 |     id: 4,
 677 |     name: "Milk",
 678 |     quantity: 10,
 679 |     unit: "liter",
 680 |     category: "dairy",
 681 |     key: 1,
 682 |   },
 683 |   {
 684 |     id: 5,
 685 |     name: "Cheese",
 686 |     quantity: 200,
 687 |     unit: "grams",
 688 |     category: "dairy",
 689 |     key: 0,
 690 |   },
 691 | ]}' 
 692 |     sortBy="quantity" iconSortDesc="chevrondown">
 693 |     <Column bindTo="name" canSort="true" />
 694 |     <Column bindTo="quantity" canSort="true" />
 695 |     <Column bindTo="unit" canSort="true" />
 696 |   </Table>
 697 | </App>
 698 | ```
 699 | 
 700 | ### `idKey` (default: "id") [#idkey-default-id]
 701 | 
 702 | This property is used to specify the unique ID property in the data array. If the idKey points to a property that does not exist in the data items, that will result in incorrect behavior when using selectable rows.
 703 | 
 704 | ```xmlui copy /idKey="key"/
 705 | <App>
 706 |   <Table
 707 |     idKey="key"
 708 |     rowsSelectable="true"
 709 |     data="{[
 710 |       { 'key': 0, 'name': 'John' },
 711 |       { 'key': 1, 'name': 'Jane' },
 712 |       { 'key': 2, 'name': 'Bill' },
 713 |     ]}"
 714 |   > 
 715 |     <Column bindTo="name"/>
 716 |   </Table>
 717 | </App>
 718 | ```
 719 | 
 720 | ### `initiallySelected` [#initiallyselected]
 721 | 
 722 | An array of IDs that should be initially selected when the table is rendered. This property only has an effect when the rowsSelectable property is set to `true`.
 723 | 
 724 | ### `isPaginated` (default: false) [#ispaginated-default-false]
 725 | 
 726 | This property adds pagination controls to the `Table`.
 727 | 
 728 | ```xmlui copy /isPaginated="true"/
 729 | <App>
 730 |   <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
 731 |     <Column bindTo="name"/>
 732 |     <Column bindTo="quantity"/>
 733 |     <Column bindTo="unit"/>
 734 |   </Table>
 735 | </App>
 736 | ```
 737 | 
 738 | ```xmlui-pg name="Example: isPaginated"
 739 | <App>
 740 |   <Table data='{[
 741 |   {
 742 |     id: 0,
 743 |     name: "Apples",
 744 |     quantity: 5,
 745 |     unit: "pieces",
 746 |     category: "fruits",
 747 |     key: 5,
 748 |   },
 749 |   {
 750 |     id: 1,
 751 |     name: "Bananas",
 752 |     quantity: 6,
 753 |     unit: "pieces",
 754 |     category: "fruits",
 755 |     key: 4,
 756 |   },
 757 |   {
 758 |     id: 2,
 759 |     name: "Carrots",
 760 |     quantity: 100,
 761 |     unit: "grams",
 762 |     category: "vegetables",
 763 |     key: 3,
 764 |   },
 765 |   {
 766 |     id: 3,
 767 |     name: "Spinach",
 768 |     quantity: 1,
 769 |     unit: "bunch",
 770 |     category: "vegetables",
 771 |     key: 2,
 772 |   },
 773 |   {
 774 |     id: 4,
 775 |     name: "Milk",
 776 |     quantity: 10,
 777 |     unit: "liter",
 778 |     category: "dairy",
 779 |     key: 1,
 780 |   },
 781 |   {
 782 |     id: 5,
 783 |     name: "Cheese",
 784 |     quantity: 200,
 785 |     unit: "grams",
 786 |     category: "dairy",
 787 |     key: 0,
 788 |   },
 789 | ]}' 
 790 |     isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
 791 |     <Column bindTo="name"/>
 792 |     <Column bindTo="quantity"/>
 793 |     <Column bindTo="unit"/>
 794 |   </Table>
 795 | </App>
 796 | ```
 797 | 
 798 | ### `loading` [#loading]
 799 | 
 800 | This boolean property indicates if the component is fetching (or processing) data. This property is useful when data is loaded conditionally or receiving it takes some time.
 801 | 
 802 | This boolean property indicates if the component is fetching (or processing) data.
 803 | This property is useful when data is loaded conditionally or receiving it takes some time.
 804 | 
 805 | ```xmlui-pg copy display name="Example: loading"
 806 | <App>
 807 |   <Table loading="true">
 808 |     <Column bindTo="name"/>
 809 |     <Column bindTo="quantity"/>
 810 |   </Table>
 811 | </App>
 812 | ```
 813 | 
 814 | ### `noBottomBorder` (default: false) [#nobottomborder-default-false]
 815 | 
 816 | This property indicates whether the table should have a bottom border. When set to `true`, the table does not have a bottom border. Otherwise, it has a bottom border.
 817 | 
 818 | ### `noDataTemplate` [#nodatatemplate]
 819 | 
 820 | A property to customize what to display if the table does not contain any data.
 821 | 
 822 | ```xmlui-pg copy {3-5} display name="Example: noDataTemplate"
 823 | <App>
 824 |   <Table>
 825 |     <property name="noDataTemplate">
 826 |       <Text value="No data loaded" variant="strong" />
 827 |     </property>
 828 |     <Column bindTo="name"/>
 829 |     <Column bindTo="quantity"/>
 830 |   </Table>
 831 | </App>
 832 | ```
 833 | 
 834 | ### `pageInfoPosition` [#pageinfoposition]
 835 | 
 836 | Determines where to place the page information in the layout. It works the same as the [Pagination component property](./Pagination#pageinfoposition).
 837 | 
 838 | ### `pageSize` [#pagesize]
 839 | 
 840 | This property defines the number of rows to display per page when pagination is enabled.
 841 | 
 842 | Options
 843 | 
 844 | Page sizes are only accepted in an array, even if the array contains one item.
 845 | 
 846 | Note that this property only works if the [`isPaginated`](#ispaginated) property is set to `true`.
 847 | 
 848 | ```xmlui copy /pageSizeOptions="{[3, 6, 12]}"/
 849 | <App>
 850 |   <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
 851 |     <Column bindTo="name"/>
 852 |     <Column bindTo="quantity"/>
 853 |     <Column bindTo="unit"/>
 854 |   </Table>
 855 | </App>
 856 | ```
 857 | 
 858 | ```xmlui-pg name="Example: pageSizeOptions"
 859 | <App>
 860 |   <Table data='{[
 861 |   {
 862 |     id: 0,
 863 |     name: "Apples",
 864 |     quantity: 5,
 865 |     unit: "pieces",
 866 |     category: "fruits",
 867 |     key: 5,
 868 |   },
 869 |   {
 870 |     id: 1,
 871 |     name: "Bananas",
 872 |     quantity: 6,
 873 |     unit: "pieces",
 874 |     category: "fruits",
 875 |     key: 4,
 876 |   },
 877 |   {
 878 |     id: 2,
 879 |     name: "Carrots",
 880 |     quantity: 100,
 881 |     unit: "grams",
 882 |     category: "vegetables",
 883 |     key: 3,
 884 |   },
 885 |   {
 886 |     id: 3,
 887 |     name: "Spinach",
 888 |     quantity: 1,
 889 |     unit: "bunch",
 890 |     category: "vegetables",
 891 |     key: 2,
 892 |   },
 893 |   {
 894 |     id: 4,
 895 |     name: "Milk",
 896 |     quantity: 10,
 897 |     unit: "liter",
 898 |     category: "dairy",
 899 |     key: 1,
 900 |   },
 901 |   {
 902 |     id: 5,
 903 |     name: "Cheese",
 904 |     quantity: 200,
 905 |     unit: "grams",
 906 |     category: "dairy",
 907 |     key: 0,
 908 |   },
 909 | ]}' 
 910 |     isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
 911 |     <Column bindTo="name"/>
 912 |     <Column bindTo="quantity"/>
 913 |     <Column bindTo="unit"/>
 914 |   </Table>
 915 | </App>
 916 | ```
 917 | 
 918 | ### `pageSizeOptions` [#pagesizeoptions]
 919 | 
 920 | This property holds an array of page sizes (numbers) the user can select for pagination. If this property is not defined, the component allows only a page size of 10 items.
 921 | 
 922 | Page sizes are only accepted in an array, even if the array contains one item.
 923 | 
 924 | Note that this property only works if the [`isPaginated`](#ispaginated) property is set to `true`.
 925 | 
 926 | ```xmlui copy /pageSizeOptions="{[3, 6, 12]}"/
 927 | <App>
 928 |   <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
 929 |     <Column bindTo="name"/>
 930 |     <Column bindTo="quantity"/>
 931 |     <Column bindTo="unit"/>
 932 |   </Table>
 933 | </App>
 934 | ```
 935 | 
 936 | ```xmlui-pg name="Example: pageSizeOptions"
 937 | <App>
 938 |   <Table data='{[
 939 |   {
 940 |     id: 0,
 941 |     name: "Apples",
 942 |     quantity: 5,
 943 |     unit: "pieces",
 944 |     category: "fruits",
 945 |     key: 5,
 946 |   },
 947 |   {
 948 |     id: 1,
 949 |     name: "Bananas",
 950 |     quantity: 6,
 951 |     unit: "pieces",
 952 |     category: "fruits",
 953 |     key: 4,
 954 |   },
 955 |   {
 956 |     id: 2,
 957 |     name: "Carrots",
 958 |     quantity: 100,
 959 |     unit: "grams",
 960 |     category: "vegetables",
 961 |     key: 3,
 962 |   },
 963 |   {
 964 |     id: 3,
 965 |     name: "Spinach",
 966 |     quantity: 1,
 967 |     unit: "bunch",
 968 |     category: "vegetables",
 969 |     key: 2,
 970 |   },
 971 |   {
 972 |     id: 4,
 973 |     name: "Milk",
 974 |     quantity: 10,
 975 |     unit: "liter",
 976 |     category: "dairy",
 977 |     key: 1,
 978 |   },
 979 |   {
 980 |     id: 5,
 981 |     name: "Cheese",
 982 |     quantity: 200,
 983 |     unit: "grams",
 984 |     category: "dairy",
 985 |     key: 0,
 986 |   },
 987 | ]}' 
 988 |     isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
 989 |     <Column bindTo="name"/>
 990 |     <Column bindTo="quantity"/>
 991 |     <Column bindTo="unit"/>
 992 |   </Table>
 993 | </App>
 994 | ```
 995 | 
 996 | ### `pageSizeSelectorPosition` [#pagesizeselectorposition]
 997 | 
 998 | Determines where to place the page size selector in the layout. It works the same as the [Pagination component property](./Pagination#pagesizeselectorposition).
 999 | 
1000 | ### `paginationControlsLocation` (default: "bottom") [#paginationcontrolslocation-default-bottom]
1001 | 
1002 | This property determines the location of the pagination controls. It can be set to `top`, `bottom`, or `both`.
1003 | 
1004 | Available values: `top`, `bottom` **(default)**, `both`
1005 | 
1006 | ### `rowDisabledPredicate` [#rowdisabledpredicate]
1007 | 
1008 | This property defines a predicate function with a return value that determines if the row should be disabled. The function retrieves the item to display and should return a Boolean-like value.
1009 | 
1010 | The following example disables all table rows where the item's quantity exceeds 6:
1011 | 
1012 | ```xmlui copy {3}
1013 | <App>
1014 |   <Table data='{[...]}'
1015 |     rowDisabledPredicate="{(item) => item.quantity > 6}">
1016 |     <Column bindTo="name"/>
1017 |     <Column bindTo="quantity"/>
1018 |     <Column bindTo="unit"/>
1019 |   </Table>
1020 | </App>
1021 | ```
1022 | 
1023 | >[!INFO]
1024 | > Disabled items are rendered with a different color.
1025 | 
1026 | ```xmlui-pg name="Example: rowDisabledPredicate"
1027 | <App>
1028 |   <Table data='{[
1029 |   {
1030 |     id: 0,
1031 |     name: "Apples",
1032 |     quantity: 5,
1033 |     unit: "pieces",
1034 |     category: "fruits",
1035 |     key: 5,
1036 |   },
1037 |   {
1038 |     id: 1,
1039 |     name: "Bananas",
1040 |     quantity: 6,
1041 |     unit: "pieces",
1042 |     category: "fruits",
1043 |     key: 4,
1044 |   },
1045 |   {
1046 |     id: 2,
1047 |     name: "Carrots",
1048 |     quantity: 100,
1049 |     unit: "grams",
1050 |     category: "vegetables",
1051 |     key: 3,
1052 |   },
1053 |   {
1054 |     id: 3,
1055 |     name: "Spinach",
1056 |     quantity: 1,
1057 |     unit: "bunch",
1058 |     category: "vegetables",
1059 |     key: 2,
1060 |   },
1061 |   {
1062 |     id: 4,
1063 |     name: "Milk",
1064 |     quantity: 10,
1065 |     unit: "liter",
1066 |     category: "dairy",
1067 |     key: 1,
1068 |   },
1069 |   {
1070 |     id: 5,
1071 |     name: "Cheese",
1072 |     quantity: 200,
1073 |     unit: "grams",
1074 |     category: "dairy",
1075 |     key: 0,
1076 |   },
1077 | ]}'
1078 |     rowDisabledPredicate="{(item) => item.quantity > 6}">
1079 |     <Column bindTo="name"/>
1080 |     <Column bindTo="quantity"/>
1081 |     <Column bindTo="unit"/>
1082 |   </Table>
1083 | </App>
1084 | ```
1085 | 
1086 | ### `rowsSelectable` [#rowsselectable]
1087 | 
1088 | Indicates whether the rows are selectable (`true`) or not (`false`).
1089 | 
1090 | The default value is `false`.
1091 | 
1092 | ```xmlui copy /rowsSelectable="true"/
1093 | <App>
1094 |   <Table data='{[...]}' rowsSelectable="true">
1095 |     <Column bindTo="name"/>
1096 |     <Column bindTo="quantity"/>
1097 |     <Column bindTo="unit"/>
1098 |   </Table>
1099 | </App>
1100 | ```
1101 | 
1102 | ```xmlui-pg name="Example: rowsSelectable"
1103 | <App>
1104 |   <Table data='{[
1105 |   {
1106 |     id: 0,
1107 |     name: "Apples",
1108 |     quantity: 5,
1109 |     unit: "pieces",
1110 |     category: "fruits",
1111 |     key: 5,
1112 |   },
1113 |   {
1114 |     id: 1,
1115 |     name: "Bananas",
1116 |     quantity: 6,
1117 |     unit: "pieces",
1118 |     category: "fruits",
1119 |     key: 4,
1120 |   },
1121 |   {
1122 |     id: 2,
1123 |     name: "Carrots",
1124 |     quantity: 100,
1125 |     unit: "grams",
1126 |     category: "vegetables",
1127 |     key: 3,
1128 |   },
1129 |   {
1130 |     id: 3,
1131 |     name: "Spinach",
1132 |     quantity: 1,
1133 |     unit: "bunch",
1134 |     category: "vegetables",
1135 |     key: 2,
1136 |   },
1137 |   {
1138 |     id: 4,
1139 |     name: "Milk",
1140 |     quantity: 10,
1141 |     unit: "liter",
1142 |     category: "dairy",
1143 |     key: 1,
1144 |   },
1145 |   {
1146 |     id: 5,
1147 |     name: "Cheese",
1148 |     quantity: 200,
1149 |     unit: "grams",
1150 |     category: "dairy",
1151 |     key: 0,
1152 |   },
1153 | ]}' 
1154 |     rowsSelectable="true">
1155 |     <Column bindTo="name"/>
1156 |     <Column bindTo="quantity"/>
1157 |     <Column bindTo="unit"/>
1158 |   </Table>
1159 | </App>
1160 | ```
1161 | 
1162 | ### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
1163 | 
1164 | Whether to show the current page indicator. It works the same as the [Pagination component property](./Pagination#showcurrentpage).
1165 | 
1166 | ### `showPageInfo` (default: true) [#showpageinfo-default-true]
1167 | 
1168 | Whether to show page information. It works the same as the [Pagination component property](./Pagination#showpageinfo).
1169 | 
1170 | ### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
1171 | 
1172 | Whether to show the page size selector. It works the same as the [Pagination component property](./Pagination#showpagesizeselector).
1173 | 
1174 | ### `sortBy` [#sortby]
1175 | 
1176 | This property is used to determine which data property to sort by. If not defined, the data is not sorted
1177 | 
1178 | ```xmlui copy /sortBy="quantity"/
1179 | <App>
1180 |   <Table data='{[...]}' sortBy="quantity">
1181 |     <Column bindTo="name"/>
1182 |     <Column bindTo="quantity"/>
1183 |     <Column bindTo="unit"/>
1184 |   </Table>
1185 | </App>
1186 | ```
1187 | 
1188 | ```xmlui-pg name="Example: sortBy"
1189 | <App>
1190 |   <Table data='{[
1191 |   {
1192 |     id: 0,
1193 |     name: "Apples",
1194 |     quantity: 5,
1195 |     unit: "pieces",
1196 |     category: "fruits",
1197 |     key: 5,
1198 |   },
1199 |   {
1200 |     id: 1,
1201 |     name: "Bananas",
1202 |     quantity: 6,
1203 |     unit: "pieces",
1204 |     category: "fruits",
1205 |     key: 4,
1206 |   },
1207 |   {
1208 |     id: 2,
1209 |     name: "Carrots",
1210 |     quantity: 100,
1211 |     unit: "grams",
1212 |     category: "vegetables",
1213 |     key: 3,
1214 |   },
1215 |   {
1216 |     id: 3,
1217 |     name: "Spinach",
1218 |     quantity: 1,
1219 |     unit: "bunch",
1220 |     category: "vegetables",
1221 |     key: 2,
1222 |   },
1223 |   {
1224 |     id: 4,
1225 |     name: "Milk",
1226 |     quantity: 10,
1227 |     unit: "liter",
1228 |     category: "dairy",
1229 |     key: 1,
1230 |   },
1231 |   {
1232 |     id: 5,
1233 |     name: "Cheese",
1234 |     quantity: 200,
1235 |     unit: "grams",
1236 |     category: "dairy",
1237 |     key: 0,
1238 |   },
1239 | ]}' 
1240 |     sortBy="quantity">
1241 |     <Column bindTo="name"/>
1242 |     <Column bindTo="quantity"/>
1243 |     <Column bindTo="unit"/>
1244 |   </Table>
1245 | </App>
1246 | ```
1247 | 
1248 | ### `sortDirection` [#sortdirection]
1249 | 
1250 | This property determines the sort order to be `ascending` or `descending`. This property only works if the [`sortBy`](#sortby) property is also set. By default ascending order is used.
1251 | 
1252 | ```xmlui copy /sortDirection="descending"/
1253 | <App>
1254 |   <Table data='{[...]}' sortBy="quantity" sortDirection="descending">
1255 |     <Column bindTo="name"/>
1256 |     <Column bindTo="quantity"/>
1257 |     <Column bindTo="unit"/>
1258 |   </Table>
1259 | </App>
1260 | ```
1261 | 
1262 | ```xmlui-pg name="Example: sortDirection"
1263 | <App>
1264 |   <Table data='{[
1265 |   {
1266 |     id: 0,
1267 |     name: "Apples",
1268 |     quantity: 5,
1269 |     unit: "pieces",
1270 |     category: "fruits",
1271 |     key: 5,
1272 |   },
1273 |   {
1274 |     id: 1,
1275 |     name: "Bananas",
1276 |     quantity: 6,
1277 |     unit: "pieces",
1278 |     category: "fruits",
1279 |     key: 4,
1280 |   },
1281 |   {
1282 |     id: 2,
1283 |     name: "Carrots",
1284 |     quantity: 100,
1285 |     unit: "grams",
1286 |     category: "vegetables",
1287 |     key: 3,
1288 |   },
1289 |   {
1290 |     id: 3,
1291 |     name: "Spinach",
1292 |     quantity: 1,
1293 |     unit: "bunch",
1294 |     category: "vegetables",
1295 |     key: 2,
1296 |   },
1297 |   {
1298 |     id: 4,
1299 |     name: "Milk",
1300 |     quantity: 10,
1301 |     unit: "liter",
1302 |     category: "dairy",
1303 |     key: 1,
1304 |   },
1305 |   {
1306 |     id: 5,
1307 |     name: "Cheese",
1308 |     quantity: 200,
1309 |     unit: "grams",
1310 |     category: "dairy",
1311 |     key: 0,
1312 |   },
1313 | ]}' 
1314 |     sortBy="quantity" sortDirection="descending">
1315 |     <Column bindTo="name"/>
1316 |     <Column bindTo="quantity"/>
1317 |     <Column bindTo="unit"/>
1318 |   </Table>
1319 | </App>
1320 | ```
1321 | 
1322 | ### `syncWithAppState` [#syncwithappstate]
1323 | 
1324 | An AppState instance to synchronize the table's selection state with. The table will read from and write to the 'selectedIds' property of the AppState object. When provided, this takes precedence over the initiallySelected property for initial selection. You can use the AppState's didUpdate event to receive notifications when the selection changes.
1325 | 
1326 | ## Events [#events]
1327 | 
1328 | ### `selectionDidChange` [#selectiondidchange]
1329 | 
1330 | This event is triggered when the table's current selection (the rows selected) changes. Its parameter is an array of the selected table row items. 
1331 | 
1332 | Of course, if multiple-row selection is not allowed (`enableMultipleRowSelection` is false), this array will contain zero or one item.
1333 | 
1334 | ```xmlui copy {4}
1335 | <App var.selection="">
1336 |   <Text>Current selection (row IDs): [{selection}]</Text>
1337 |   <Table data='{[...]}'
1338 |     rowsSelectable="true"
1339 |     enableMultiRowSelection="true"
1340 |     onSelectionDidChange="(newSel) => selection = newSel.map(item => item.id).join()" >
1341 |     <Column bindTo="name" canSort="true"/>
1342 |     <Column bindTo="quantity" canSort="true"/>
1343 |     <Column bindTo="unit" canSort="true"/>
1344 |   </Table>
1345 | </App>
1346 | ```
1347 | 
1348 | Click on any of the column headers to trigger a new sorting:
1349 | 
1350 | ```xmlui-pg name="Example: selectionDidChange"
1351 | <App var.selection="">
1352 |   <Text>Current selection (row IDs): [{selection}]</Text>
1353 |   <Table data='{[
1354 |   {
1355 |     id: 0,
1356 |     name: "Apples",
1357 |     quantity: 5,
1358 |     unit: "pieces",
1359 |     category: "fruits",
1360 |     key: 5,
1361 |   },
1362 |   {
1363 |     id: 1,
1364 |     name: "Bananas",
1365 |     quantity: 6,
1366 |     unit: "pieces",
1367 |     category: "fruits",
1368 |     key: 4,
1369 |   },
1370 |   {
1371 |     id: 2,
1372 |     name: "Carrots",
1373 |     quantity: 100,
1374 |     unit: "grams",
1375 |     category: "vegetables",
1376 |     key: 3,
1377 |   },
1378 |   {
1379 |     id: 3,
1380 |     name: "Spinach",
1381 |     quantity: 1,
1382 |     unit: "bunch",
1383 |     category: "vegetables",
1384 |     key: 2,
1385 |   },
1386 |   {
1387 |     id: 4,
1388 |     name: "Milk",
1389 |     quantity: 10,
1390 |     unit: "liter",
1391 |     category: "dairy",
1392 |     key: 1,
1393 |   },
1394 |   {
1395 |     id: 5,
1396 |     name: "Cheese",
1397 |     quantity: 200,
1398 |     unit: "grams",
1399 |     category: "dairy",
1400 |     key: 0,
1401 |   },
1402 | ]}'
1403 |     rowsSelectable="true"
1404 |     enableMultiRowSelection="true"
1405 |     onSelectionDidChange="(newSel) => selection = newSel.map(item => item.id).join()" >
1406 |     <Column bindTo="name" canSort="true"/>
1407 |     <Column bindTo="quantity" canSort="true"/>
1408 |     <Column bindTo="unit" canSort="true"/>
1409 |   </Table>
1410 | </App>
1411 | ```
1412 | 
1413 | ### `sortingDidChange` [#sortingdidchange]
1414 | 
1415 | This event is fired when the table data sorting has changed. It has two arguments: the column's name and the sort direction. When the column name is empty, the table displays the data list as it received it.
1416 | 
1417 | Note the [`canSort`](/components/Column#cansort-default-true) properties on the `Column` components which enable custom ordering.
1418 | 
1419 | ```xmlui copy {4}
1420 | <App var.sortedBy="">
1421 |   <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1422 |   <Table data='{[...]}'
1423 |     onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1424 |     <Column bindTo="name" canSort="true"/>
1425 |     <Column bindTo="quantity" canSort="true"/>
1426 |     <Column bindTo="unit" canSort="true"/>
1427 |   </Table>
1428 | </App>
1429 | ```
1430 | 
1431 | Click on any of the column headers to trigger a new sorting:
1432 | 
1433 | ```xmlui-pg name="Example: sortingDidChange"
1434 | <App var.sortedBy="">
1435 |   <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1436 |   <Table data='{[
1437 |   {
1438 |     id: 0,
1439 |     name: "Apples",
1440 |     quantity: 5,
1441 |     unit: "pieces",
1442 |     category: "fruits",
1443 |     key: 5,
1444 |   },
1445 |   {
1446 |     id: 1,
1447 |     name: "Bananas",
1448 |     quantity: 6,
1449 |     unit: "pieces",
1450 |     category: "fruits",
1451 |     key: 4,
1452 |   },
1453 |   {
1454 |     id: 2,
1455 |     name: "Carrots",
1456 |     quantity: 100,
1457 |     unit: "grams",
1458 |     category: "vegetables",
1459 |     key: 3,
1460 |   },
1461 |   {
1462 |     id: 3,
1463 |     name: "Spinach",
1464 |     quantity: 1,
1465 |     unit: "bunch",
1466 |     category: "vegetables",
1467 |     key: 2,
1468 |   },
1469 |   {
1470 |     id: 4,
1471 |     name: "Milk",
1472 |     quantity: 10,
1473 |     unit: "liter",
1474 |     category: "dairy",
1475 |     key: 1,
1476 |   },
1477 |   {
1478 |     id: 5,
1479 |     name: "Cheese",
1480 |     quantity: 200,
1481 |     unit: "grams",
1482 |     category: "dairy",
1483 |     key: 0,
1484 |   },
1485 | ]}'
1486 |     onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1487 |     <Column bindTo="name" canSort="true"/>
1488 |     <Column bindTo="quantity" canSort="true"/>
1489 |     <Column bindTo="unit" canSort="true"/>
1490 |   </Table>
1491 | </App>
1492 | ```
1493 | 
1494 | ### `willSort` [#willsort]
1495 | 
1496 | This event is fired before the table data is sorted. It has two arguments: the column's name and the sort direction. When the method returns a literal `false` value (and not any other falsy one), the method indicates that the sorting should be aborted.
1497 | 
1498 | The following example uses the `willSort` event to refuse sorting by name:
1499 | 
1500 | ```xmlui copy {4}
1501 | <App var.sortedBy="">
1502 |   <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1503 |   <Table data='{[...]}'
1504 |     onWillSort="(by, dir) => by !== 'name'"
1505 |     onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1506 |     <Column bindTo="name" canSort="true"/>
1507 |     <Column bindTo="quantity" canSort="true"/>
1508 |     <Column bindTo="unit" canSort="true"/>
1509 |   </Table>
1510 | </App>
1511 | ```
1512 | 
1513 | Click on any of the column headers to trigger the event.
1514 | Though sorting is enabled in the `TableColumnnDef` component of the "name" column via `canSort`,
1515 | clicking that column header still does not sort because `willSort` prevents it:
1516 | 
1517 | ```xmlui-pg name="Example: willSort"
1518 | <App var.sortedBy="">
1519 |   <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1520 |   <Table data='{[
1521 |   {
1522 |     id: 0,
1523 |     name: "Apples",
1524 |     quantity: 5,
1525 |     unit: "pieces",
1526 |     category: "fruits",
1527 |     key: 5,
1528 |   },
1529 |   {
1530 |     id: 1,
1531 |     name: "Bananas",
1532 |     quantity: 6,
1533 |     unit: "pieces",
1534 |     category: "fruits",
1535 |     key: 4,
1536 |   },
1537 |   {
1538 |     id: 2,
1539 |     name: "Carrots",
1540 |     quantity: 100,
1541 |     unit: "grams",
1542 |     category: "vegetables",
1543 |     key: 3,
1544 |   },
1545 |   {
1546 |     id: 3,
1547 |     name: "Spinach",
1548 |     quantity: 1,
1549 |     unit: "bunch",
1550 |     category: "vegetables",
1551 |     key: 2,
1552 |   },
1553 |   {
1554 |     id: 4,
1555 |     name: "Milk",
1556 |     quantity: 10,
1557 |     unit: "liter",
1558 |     category: "dairy",
1559 |     key: 1,
1560 |   },
1561 |   {
1562 |     id: 5,
1563 |     name: "Cheese",
1564 |     quantity: 200,
1565 |     unit: "grams",
1566 |     category: "dairy",
1567 |     key: 0,
1568 |   },
1569 | ]}'
1570 |     onWillSort="(by, dir) => by !== 'name'"
1571 |     onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1572 |     <Column bindTo="name" canSort="true"/>
1573 |     <Column bindTo="quantity" canSort="true"/>
1574 |     <Column bindTo="unit" canSort="true"/>
1575 |   </Table>
1576 | </App>
1577 | ```
1578 | 
1579 | ## Exposed Methods [#exposed-methods]
1580 | 
1581 | ### `clearSelection` [#clearselection]
1582 | 
1583 | This method clears the list of currently selected table rows.
1584 | 
1585 | **Signature**: `clearSelection(): void`
1586 | 
1587 | ```xmlui copy /clearSelection()/ /selectId(1)/ /selectId([2, 4])/ /selectAll()/
1588 | <App>
1589 |   <HStack>
1590 |     <Button label="Select all" onClick="table.selectAll()" />
1591 |     <Button label="Clear all" onClick="table.clearSelection()" />
1592 |     <Button label="Select 1" onClick="table.selectId(1)" />
1593 |     <Button label="Select 2, 4" onClick="table.selectId([2, 4])" />
1594 |   </HStack>
1595 |   <Table id="table" data='{[...]}'
1596 |     rowsSelectable="true"
1597 |     enableMultiRowSelection="true">
1598 |     <Column bindTo="name" canSort="true"/>
1599 |     <Column bindTo="quantity" canSort="true"/>
1600 |     <Column bindTo="unit" canSort="true"/>
1601 |   </Table>
1602 | </App>
1603 | ```
1604 | 
1605 | ```xmlui-pg name="Example: clearSelection"
1606 | <App>
1607 |   <HStack>
1608 |     <Button label="Select all" onClick="table.selectAll()" />
1609 |     <Button label="Clear all" onClick="table.clearSelection()" />
1610 |     <Button label="Select 1" onClick="table.selectId(1)" />
1611 |     <Button label="Select 2, 4" onClick="table.selectId([2, 4])" />
1612 |   </HStack>
1613 |   <Table id="table" data='{[
1614 |   {
1615 |     id: 0,
1616 |     name: "Apples",
1617 |     quantity: 5,
1618 |     unit: "pieces",
1619 |     category: "fruits",
1620 |     key: 5,
1621 |   },
1622 |   {
1623 |     id: 1,
1624 |     name: "Bananas",
1625 |     quantity: 6,
1626 |     unit: "pieces",
1627 |     category: "fruits",
1628 |     key: 4,
1629 |   },
1630 |   {
1631 |     id: 2,
1632 |     name: "Carrots",
1633 |     quantity: 100,
1634 |     unit: "grams",
1635 |     category: "vegetables",
1636 |     key: 3,
1637 |   },
1638 |   {
1639 |     id: 3,
1640 |     name: "Spinach",
1641 |     quantity: 1,
1642 |     unit: "bunch",
1643 |     category: "vegetables",
1644 |     key: 2,
1645 |   },
1646 |   {
1647 |     id: 4,
1648 |     name: "Milk",
1649 |     quantity: 10,
1650 |     unit: "liter",
1651 |     category: "dairy",
1652 |     key: 1,
1653 |   },
1654 |   {
1655 |     id: 5,
1656 |     name: "Cheese",
1657 |     quantity: 200,
1658 |     unit: "grams",
1659 |     category: "dairy",
1660 |     key: 0,
1661 |   },
1662 | ]}'
1663 |     rowsSelectable="true"
1664 |     enableMultiRowSelection="true">
1665 |     <Column bindTo="name" canSort="true"/>
1666 |     <Column bindTo="quantity" canSort="true"/>
1667 |     <Column bindTo="unit" canSort="true"/>
1668 |   </Table>
1669 | </App>
1670 | ```
1671 | 
1672 | ### `getSelectedIds` [#getselectedids]
1673 | 
1674 | This method returns the list of currently selected table rows IDs.
1675 | 
1676 | **Signature**: `getSelectedIds(): Array<string>`
1677 | 
1678 | (See the [example](#clearselection) at the `clearSelection` method)
1679 | 
1680 | ### `getSelectedItems` [#getselecteditems]
1681 | 
1682 | This method returns the list of currently selected table rows items.
1683 | 
1684 | **Signature**: `getSelectedItems(): Array<TableRowItem>`
1685 | 
1686 | (See the [example](#clearselection) at the `clearSelection` method)
1687 | 
1688 | ### `selectAll` [#selectall]
1689 | 
1690 | This method selects all the rows in the table. This method has no effect if the rowsSelectable property is set to `false`.
1691 | 
1692 | **Signature**: `selectAll(): void`
1693 | 
1694 | (See the [example](#clearselection) at the `clearSelection` method)
1695 | 
1696 | ### `selectId` [#selectid]
1697 | 
1698 | This method selects the row with the specified ID. This method has no effect if the `rowsSelectable` property is set to `false`. The method argument can be a single id or an array of them.
1699 | 
1700 | **Signature**: `selectId(id: string | Array<string>): void`
1701 | 
1702 | - `id`: The ID of the row to select, or an array of IDs to select multiple rows.
1703 | 
1704 | (See the [example](#clearselection) at the `clearSelection` method)
1705 | 
1706 | ## Styling [#styling]
1707 | 
1708 | ### Theme Variables [#theme-variables]
1709 | 
1710 | | Variable | Default Value (Light) | Default Value (Dark) |
1711 | | --- | --- | --- |
1712 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table | $color-surface-100 | $color-surface-100 |
1713 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table--active | $color-surface-300 | $color-surface-300 |
1714 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table--hover | $color-surface-200 | $color-surface-200 |
1715 | | [backgroundColor](../styles-and-themes/common-units/#color)-pagination-Table | $backgroundColor-Table | $backgroundColor-Table |
1716 | | [backgroundColor](../styles-and-themes/common-units/#color)-row-Table | *none* | *none* |
1717 | | [backgroundColor](../styles-and-themes/common-units/#color)-row-Table--hover | $color-primary-50 | $color-primary-50 |
1718 | | [backgroundColor](../styles-and-themes/common-units/#color)-selected-Table | $color-primary-100 | $color-primary-100 |
1719 | | [backgroundColor](../styles-and-themes/common-units/#color)-selected-Table--hover | $backgroundColor-row-Table--hover | $backgroundColor-row-Table--hover |
1720 | | [backgroundColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1721 | | [border](../styles-and-themes/common-units/#border)-cell-Table | 1px solid $borderColor | 1px solid $borderColor |
1722 | | [border](../styles-and-themes/common-units/#border)-Table | 0px solid transparent | 0px solid transparent |
1723 | | [borderBottom](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1724 | | [borderBottom](../styles-and-themes/common-units/#border)-last-row-Table | $borderBottom-cell-Table | $borderBottom-cell-Table |
1725 | | [borderBottom](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1726 | | [borderBottomColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1727 | | [borderBottomColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1728 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1729 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1730 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1731 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1732 | | [borderColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1733 | | [borderColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1734 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1735 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1736 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1737 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1738 | | [borderHorizontal](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1739 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1740 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1741 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1742 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1743 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1744 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1745 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1746 | | [borderLeft](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1747 | | [borderLeft](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1748 | | [color](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1749 | | [color](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1750 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1751 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1752 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1753 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1754 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Table | $borderRadius | $borderRadius |
1755 | | [borderRight](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1756 | | [borderRight](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1757 | | [color](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1758 | | [color](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1759 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1760 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1761 | | [borderRightWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1762 | | [borderRightWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1763 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1764 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1765 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1766 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1767 | | [borderStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1768 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1769 | | [borderTop](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1770 | | [borderTop](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1771 | | [borderTopColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1772 | | [borderTopColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1773 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1774 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1775 | | [borderTopWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1776 | | [borderTopWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1777 | | [borderHorizontal](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1778 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1779 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1780 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1781 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1782 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1783 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1784 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1785 | | [borderWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1786 | | [borderWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1787 | | [fontSize](../styles-and-themes/common-units/#size)-heading-Table | $fontSize-tiny | $fontSize-tiny |
1788 | | [fontSize](../styles-and-themes/common-units/#size)-row-Table | $fontSize-sm | $fontSize-sm |
1789 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-heading-Table | $fontWeight-bold | $fontWeight-bold |
1790 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-row-Table | *none* | *none* |
1791 | | [outlineColor](../styles-and-themes/common-units/#color)-heading-Table--focus | $outlineColor--focus | $outlineColor--focus |
1792 | | [outlineOffset](../styles-and-themes/common-units/#size)-heading-Table--focus | $outlineOffset--focus | $outlineOffset--focus |
1793 | | [outlineStyle](../styles-and-themes/common-units/#border)-heading-Table--focus | $outlineStyle--focus | $outlineStyle--focus |
1794 | | [outlineWidth](../styles-and-themes/common-units/#size)-heading-Table--focus | $outlineWidth--focus | $outlineWidth--focus |
1795 | | [padding](../styles-and-themes/common-units/#size)-cell-Table | $space-2 $space-1 $space-2 $space-2 | $space-2 $space-1 $space-2 $space-2 |
1796 | | [padding](../styles-and-themes/common-units/#size)-heading-Table | $space-2 $space-1 $space-2 $space-2 | $space-2 $space-1 $space-2 $space-2 |
1797 | | [paddingBottom](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1798 | | [paddingBottom](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1799 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-first-Table | $space-5 | $space-5 |
1800 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-last-Table | $space-1 | $space-1 |
1801 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1802 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1803 | | [paddingLeft](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1804 | | [paddingLeft](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1805 | | [paddingRight](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1806 | | [paddingRight](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1807 | | [paddingTop](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1808 | | [paddingTop](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1809 | | [paddingVertical](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1810 | | [paddingVertical](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1811 | | [textColor](../styles-and-themes/common-units/#color)-heading-Table | $color-surface-500 | $color-surface-500 |
1812 | | [textColor](../styles-and-themes/common-units/#color)-pagination-Table | $color-secondary | $color-secondary |
1813 | | [textColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1814 | | [textTransform](../styles-and-themes/common-units/#textTransform)-heading-Table | uppercase | uppercase |
1815 | 
```

