This is page 151 of 181. Use http://codebase.md/xmlui-org/xmlui?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cool-queens-look.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.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
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── netlify.toml
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── 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
│ │ │ ├── Debug.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ ├── Main.xmlui.xs
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.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
│ │ │ │ ├── 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
│ │ │ │ ├── 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
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ ├── tsconfig.json
│ │ └── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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.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.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── 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.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── 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.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
│ ├── containers.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
│ ├── state-management.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.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
│ ├── get-langserver-metadata.mjs
│ ├── 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.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── 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
│ │ ├── 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
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.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
│ │ │ ├── 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.mjs
│ ├── 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
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.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.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── 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 | ### `initiallySelected` [#initiallyselected]
701 |
702 | 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`.
703 |
704 | ### `isPaginated` (default: false) [#ispaginated-default-false]
705 |
706 | This property adds pagination controls to the `Table`.
707 |
708 | ```xmlui copy /isPaginated="true"/
709 | <App>
710 | <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
711 | <Column bindTo="name"/>
712 | <Column bindTo="quantity"/>
713 | <Column bindTo="unit"/>
714 | </Table>
715 | </App>
716 | ```
717 |
718 | ```xmlui-pg name="Example: isPaginated"
719 | <App>
720 | <Table data='{[
721 | {
722 | id: 0,
723 | name: "Apples",
724 | quantity: 5,
725 | unit: "pieces",
726 | category: "fruits",
727 | key: 5,
728 | },
729 | {
730 | id: 1,
731 | name: "Bananas",
732 | quantity: 6,
733 | unit: "pieces",
734 | category: "fruits",
735 | key: 4,
736 | },
737 | {
738 | id: 2,
739 | name: "Carrots",
740 | quantity: 100,
741 | unit: "grams",
742 | category: "vegetables",
743 | key: 3,
744 | },
745 | {
746 | id: 3,
747 | name: "Spinach",
748 | quantity: 1,
749 | unit: "bunch",
750 | category: "vegetables",
751 | key: 2,
752 | },
753 | {
754 | id: 4,
755 | name: "Milk",
756 | quantity: 10,
757 | unit: "liter",
758 | category: "dairy",
759 | key: 1,
760 | },
761 | {
762 | id: 5,
763 | name: "Cheese",
764 | quantity: 200,
765 | unit: "grams",
766 | category: "dairy",
767 | key: 0,
768 | },
769 | ]}'
770 | isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
771 | <Column bindTo="name"/>
772 | <Column bindTo="quantity"/>
773 | <Column bindTo="unit"/>
774 | </Table>
775 | </App>
776 | ```
777 |
778 | ### `loading` [#loading]
779 |
780 | 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.
781 |
782 | This boolean property indicates if the component is fetching (or processing) data.
783 | This property is useful when data is loaded conditionally or receiving it takes some time.
784 |
785 | ```xmlui-pg copy display name="Example: loading"
786 | <App>
787 | <Table loading="true">
788 | <Column bindTo="name"/>
789 | <Column bindTo="quantity"/>
790 | </Table>
791 | </App>
792 | ```
793 |
794 | ### `noBottomBorder` (default: false) [#nobottomborder-default-false]
795 |
796 | 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.
797 |
798 | ### `noDataTemplate` [#nodatatemplate]
799 |
800 | A property to customize what to display if the table does not contain any data.
801 |
802 | ```xmlui-pg copy {3-5} display name="Example: noDataTemplate"
803 | <App>
804 | <Table>
805 | <property name="noDataTemplate">
806 | <Text value="No data loaded" variant="strong" />
807 | </property>
808 | <Column bindTo="name"/>
809 | <Column bindTo="quantity"/>
810 | </Table>
811 | </App>
812 | ```
813 |
814 | ### `pageInfoPosition` [#pageinfoposition]
815 |
816 | Determines where to place the page information in the layout. It works the same as the [Pagination component property](./Pagination#pageinfoposition).
817 |
818 | ### `pageSize` [#pagesize]
819 |
820 | This property defines the number of rows to display per page when pagination is enabled.
821 |
822 | Options
823 |
824 | Page sizes are only accepted in an array, even if the array contains one item.
825 |
826 | Note that this property only works if the [`isPaginated`](#ispaginated) property is set to `true`.
827 |
828 | ```xmlui copy /pageSizeOptions="{[3, 6, 12]}"/
829 | <App>
830 | <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
831 | <Column bindTo="name"/>
832 | <Column bindTo="quantity"/>
833 | <Column bindTo="unit"/>
834 | </Table>
835 | </App>
836 | ```
837 |
838 | ```xmlui-pg name="Example: pageSizeOptions"
839 | <App>
840 | <Table data='{[
841 | {
842 | id: 0,
843 | name: "Apples",
844 | quantity: 5,
845 | unit: "pieces",
846 | category: "fruits",
847 | key: 5,
848 | },
849 | {
850 | id: 1,
851 | name: "Bananas",
852 | quantity: 6,
853 | unit: "pieces",
854 | category: "fruits",
855 | key: 4,
856 | },
857 | {
858 | id: 2,
859 | name: "Carrots",
860 | quantity: 100,
861 | unit: "grams",
862 | category: "vegetables",
863 | key: 3,
864 | },
865 | {
866 | id: 3,
867 | name: "Spinach",
868 | quantity: 1,
869 | unit: "bunch",
870 | category: "vegetables",
871 | key: 2,
872 | },
873 | {
874 | id: 4,
875 | name: "Milk",
876 | quantity: 10,
877 | unit: "liter",
878 | category: "dairy",
879 | key: 1,
880 | },
881 | {
882 | id: 5,
883 | name: "Cheese",
884 | quantity: 200,
885 | unit: "grams",
886 | category: "dairy",
887 | key: 0,
888 | },
889 | ]}'
890 | isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
891 | <Column bindTo="name"/>
892 | <Column bindTo="quantity"/>
893 | <Column bindTo="unit"/>
894 | </Table>
895 | </App>
896 | ```
897 |
898 | ### `pageSizeOptions` [#pagesizeoptions]
899 |
900 | 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.
901 |
902 | Page sizes are only accepted in an array, even if the array contains one item.
903 |
904 | Note that this property only works if the [`isPaginated`](#ispaginated) property is set to `true`.
905 |
906 | ```xmlui copy /pageSizeOptions="{[3, 6, 12]}"/
907 | <App>
908 | <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
909 | <Column bindTo="name"/>
910 | <Column bindTo="quantity"/>
911 | <Column bindTo="unit"/>
912 | </Table>
913 | </App>
914 | ```
915 |
916 | ```xmlui-pg name="Example: pageSizeOptions"
917 | <App>
918 | <Table data='{[
919 | {
920 | id: 0,
921 | name: "Apples",
922 | quantity: 5,
923 | unit: "pieces",
924 | category: "fruits",
925 | key: 5,
926 | },
927 | {
928 | id: 1,
929 | name: "Bananas",
930 | quantity: 6,
931 | unit: "pieces",
932 | category: "fruits",
933 | key: 4,
934 | },
935 | {
936 | id: 2,
937 | name: "Carrots",
938 | quantity: 100,
939 | unit: "grams",
940 | category: "vegetables",
941 | key: 3,
942 | },
943 | {
944 | id: 3,
945 | name: "Spinach",
946 | quantity: 1,
947 | unit: "bunch",
948 | category: "vegetables",
949 | key: 2,
950 | },
951 | {
952 | id: 4,
953 | name: "Milk",
954 | quantity: 10,
955 | unit: "liter",
956 | category: "dairy",
957 | key: 1,
958 | },
959 | {
960 | id: 5,
961 | name: "Cheese",
962 | quantity: 200,
963 | unit: "grams",
964 | category: "dairy",
965 | key: 0,
966 | },
967 | ]}'
968 | isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
969 | <Column bindTo="name"/>
970 | <Column bindTo="quantity"/>
971 | <Column bindTo="unit"/>
972 | </Table>
973 | </App>
974 | ```
975 |
976 | ### `pageSizeSelectorPosition` [#pagesizeselectorposition]
977 |
978 | Determines where to place the page size selector in the layout. It works the same as the [Pagination component property](./Pagination#pagesizeselectorposition).
979 |
980 | ### `paginationControlsLocation` (default: "bottom") [#paginationcontrolslocation-default-bottom]
981 |
982 | This property determines the location of the pagination controls. It can be set to `top`, `bottom`, or `both`.
983 |
984 | Available values: `top`, `bottom` **(default)**, `both`
985 |
986 | ### `rowDisabledPredicate` [#rowdisabledpredicate]
987 |
988 | 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.
989 |
990 | The following example disables all table rows where the item's quantity exceeds 6:
991 |
992 | ```xmlui copy {3}
993 | <App>
994 | <Table data='{[...]}'
995 | rowDisabledPredicate="{(item) => item.quantity > 6}">
996 | <Column bindTo="name"/>
997 | <Column bindTo="quantity"/>
998 | <Column bindTo="unit"/>
999 | </Table>
1000 | </App>
1001 | ```
1002 |
1003 | >[!INFO]
1004 | > Disabled items are rendered with a different color.
1005 |
1006 | ```xmlui-pg name="Example: rowDisabledPredicate"
1007 | <App>
1008 | <Table data='{[
1009 | {
1010 | id: 0,
1011 | name: "Apples",
1012 | quantity: 5,
1013 | unit: "pieces",
1014 | category: "fruits",
1015 | key: 5,
1016 | },
1017 | {
1018 | id: 1,
1019 | name: "Bananas",
1020 | quantity: 6,
1021 | unit: "pieces",
1022 | category: "fruits",
1023 | key: 4,
1024 | },
1025 | {
1026 | id: 2,
1027 | name: "Carrots",
1028 | quantity: 100,
1029 | unit: "grams",
1030 | category: "vegetables",
1031 | key: 3,
1032 | },
1033 | {
1034 | id: 3,
1035 | name: "Spinach",
1036 | quantity: 1,
1037 | unit: "bunch",
1038 | category: "vegetables",
1039 | key: 2,
1040 | },
1041 | {
1042 | id: 4,
1043 | name: "Milk",
1044 | quantity: 10,
1045 | unit: "liter",
1046 | category: "dairy",
1047 | key: 1,
1048 | },
1049 | {
1050 | id: 5,
1051 | name: "Cheese",
1052 | quantity: 200,
1053 | unit: "grams",
1054 | category: "dairy",
1055 | key: 0,
1056 | },
1057 | ]}'
1058 | rowDisabledPredicate="{(item) => item.quantity > 6}">
1059 | <Column bindTo="name"/>
1060 | <Column bindTo="quantity"/>
1061 | <Column bindTo="unit"/>
1062 | </Table>
1063 | </App>
1064 | ```
1065 |
1066 | ### `rowsSelectable` [#rowsselectable]
1067 |
1068 | Indicates whether the rows are selectable (`true`) or not (`false`).
1069 |
1070 | The default value is `false`.
1071 |
1072 | ```xmlui copy /rowsSelectable="true"/
1073 | <App>
1074 | <Table data='{[...]}' rowsSelectable="true">
1075 | <Column bindTo="name"/>
1076 | <Column bindTo="quantity"/>
1077 | <Column bindTo="unit"/>
1078 | </Table>
1079 | </App>
1080 | ```
1081 |
1082 | ```xmlui-pg name="Example: rowsSelectable"
1083 | <App>
1084 | <Table data='{[
1085 | {
1086 | id: 0,
1087 | name: "Apples",
1088 | quantity: 5,
1089 | unit: "pieces",
1090 | category: "fruits",
1091 | key: 5,
1092 | },
1093 | {
1094 | id: 1,
1095 | name: "Bananas",
1096 | quantity: 6,
1097 | unit: "pieces",
1098 | category: "fruits",
1099 | key: 4,
1100 | },
1101 | {
1102 | id: 2,
1103 | name: "Carrots",
1104 | quantity: 100,
1105 | unit: "grams",
1106 | category: "vegetables",
1107 | key: 3,
1108 | },
1109 | {
1110 | id: 3,
1111 | name: "Spinach",
1112 | quantity: 1,
1113 | unit: "bunch",
1114 | category: "vegetables",
1115 | key: 2,
1116 | },
1117 | {
1118 | id: 4,
1119 | name: "Milk",
1120 | quantity: 10,
1121 | unit: "liter",
1122 | category: "dairy",
1123 | key: 1,
1124 | },
1125 | {
1126 | id: 5,
1127 | name: "Cheese",
1128 | quantity: 200,
1129 | unit: "grams",
1130 | category: "dairy",
1131 | key: 0,
1132 | },
1133 | ]}'
1134 | rowsSelectable="true">
1135 | <Column bindTo="name"/>
1136 | <Column bindTo="quantity"/>
1137 | <Column bindTo="unit"/>
1138 | </Table>
1139 | </App>
1140 | ```
1141 |
1142 | ### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
1143 |
1144 | Whether to show the current page indicator. It works the same as the [Pagination component property](./Pagination#showcurrentpage).
1145 |
1146 | ### `showPageInfo` (default: true) [#showpageinfo-default-true]
1147 |
1148 | Whether to show page information. It works the same as the [Pagination component property](./Pagination#showpageinfo).
1149 |
1150 | ### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
1151 |
1152 | Whether to show the page size selector. It works the same as the [Pagination component property](./Pagination#showpagesizeselector).
1153 |
1154 | ### `sortBy` [#sortby]
1155 |
1156 | This property is used to determine which data property to sort by. If not defined, the data is not sorted
1157 |
1158 | ```xmlui copy /sortBy="quantity"/
1159 | <App>
1160 | <Table data='{[...]}' sortBy="quantity">
1161 | <Column bindTo="name"/>
1162 | <Column bindTo="quantity"/>
1163 | <Column bindTo="unit"/>
1164 | </Table>
1165 | </App>
1166 | ```
1167 |
1168 | ```xmlui-pg name="Example: sortBy"
1169 | <App>
1170 | <Table data='{[
1171 | {
1172 | id: 0,
1173 | name: "Apples",
1174 | quantity: 5,
1175 | unit: "pieces",
1176 | category: "fruits",
1177 | key: 5,
1178 | },
1179 | {
1180 | id: 1,
1181 | name: "Bananas",
1182 | quantity: 6,
1183 | unit: "pieces",
1184 | category: "fruits",
1185 | key: 4,
1186 | },
1187 | {
1188 | id: 2,
1189 | name: "Carrots",
1190 | quantity: 100,
1191 | unit: "grams",
1192 | category: "vegetables",
1193 | key: 3,
1194 | },
1195 | {
1196 | id: 3,
1197 | name: "Spinach",
1198 | quantity: 1,
1199 | unit: "bunch",
1200 | category: "vegetables",
1201 | key: 2,
1202 | },
1203 | {
1204 | id: 4,
1205 | name: "Milk",
1206 | quantity: 10,
1207 | unit: "liter",
1208 | category: "dairy",
1209 | key: 1,
1210 | },
1211 | {
1212 | id: 5,
1213 | name: "Cheese",
1214 | quantity: 200,
1215 | unit: "grams",
1216 | category: "dairy",
1217 | key: 0,
1218 | },
1219 | ]}'
1220 | sortBy="quantity">
1221 | <Column bindTo="name"/>
1222 | <Column bindTo="quantity"/>
1223 | <Column bindTo="unit"/>
1224 | </Table>
1225 | </App>
1226 | ```
1227 |
1228 | ### `sortDirection` [#sortdirection]
1229 |
1230 | 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.
1231 |
1232 | ```xmlui copy /sortDirection="descending"/
1233 | <App>
1234 | <Table data='{[...]}' sortBy="quantity" sortDirection="descending">
1235 | <Column bindTo="name"/>
1236 | <Column bindTo="quantity"/>
1237 | <Column bindTo="unit"/>
1238 | </Table>
1239 | </App>
1240 | ```
1241 |
1242 | ```xmlui-pg name="Example: sortDirection"
1243 | <App>
1244 | <Table data='{[
1245 | {
1246 | id: 0,
1247 | name: "Apples",
1248 | quantity: 5,
1249 | unit: "pieces",
1250 | category: "fruits",
1251 | key: 5,
1252 | },
1253 | {
1254 | id: 1,
1255 | name: "Bananas",
1256 | quantity: 6,
1257 | unit: "pieces",
1258 | category: "fruits",
1259 | key: 4,
1260 | },
1261 | {
1262 | id: 2,
1263 | name: "Carrots",
1264 | quantity: 100,
1265 | unit: "grams",
1266 | category: "vegetables",
1267 | key: 3,
1268 | },
1269 | {
1270 | id: 3,
1271 | name: "Spinach",
1272 | quantity: 1,
1273 | unit: "bunch",
1274 | category: "vegetables",
1275 | key: 2,
1276 | },
1277 | {
1278 | id: 4,
1279 | name: "Milk",
1280 | quantity: 10,
1281 | unit: "liter",
1282 | category: "dairy",
1283 | key: 1,
1284 | },
1285 | {
1286 | id: 5,
1287 | name: "Cheese",
1288 | quantity: 200,
1289 | unit: "grams",
1290 | category: "dairy",
1291 | key: 0,
1292 | },
1293 | ]}'
1294 | sortBy="quantity" sortDirection="descending">
1295 | <Column bindTo="name"/>
1296 | <Column bindTo="quantity"/>
1297 | <Column bindTo="unit"/>
1298 | </Table>
1299 | </App>
1300 | ```
1301 |
1302 | ### `syncWithAppState` [#syncwithappstate]
1303 |
1304 | 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.
1305 |
1306 | ## Events [#events]
1307 |
1308 | ### `selectionDidChange` [#selectiondidchange]
1309 |
1310 | 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.
1311 |
1312 | Of course, if multiple-row selection is not allowed (`enableMultipleRowSelection` is false), this array will contain zero or one item.
1313 |
1314 | ```xmlui copy {4}
1315 | <App var.selection="">
1316 | <Text>Current selection (row IDs): [{selection}]</Text>
1317 | <Table data='{[...]}'
1318 | rowsSelectable="true"
1319 | enableMultiRowSelection="true"
1320 | onSelectionDidChange="(newSel) => selection = newSel.map(item => item.id).join()" >
1321 | <Column bindTo="name" canSort="true"/>
1322 | <Column bindTo="quantity" canSort="true"/>
1323 | <Column bindTo="unit" canSort="true"/>
1324 | </Table>
1325 | </App>
1326 | ```
1327 |
1328 | Click on any of the column headers to trigger a new sorting:
1329 |
1330 | ```xmlui-pg name="Example: selectionDidChange"
1331 | <App var.selection="">
1332 | <Text>Current selection (row IDs): [{selection}]</Text>
1333 | <Table data='{[
1334 | {
1335 | id: 0,
1336 | name: "Apples",
1337 | quantity: 5,
1338 | unit: "pieces",
1339 | category: "fruits",
1340 | key: 5,
1341 | },
1342 | {
1343 | id: 1,
1344 | name: "Bananas",
1345 | quantity: 6,
1346 | unit: "pieces",
1347 | category: "fruits",
1348 | key: 4,
1349 | },
1350 | {
1351 | id: 2,
1352 | name: "Carrots",
1353 | quantity: 100,
1354 | unit: "grams",
1355 | category: "vegetables",
1356 | key: 3,
1357 | },
1358 | {
1359 | id: 3,
1360 | name: "Spinach",
1361 | quantity: 1,
1362 | unit: "bunch",
1363 | category: "vegetables",
1364 | key: 2,
1365 | },
1366 | {
1367 | id: 4,
1368 | name: "Milk",
1369 | quantity: 10,
1370 | unit: "liter",
1371 | category: "dairy",
1372 | key: 1,
1373 | },
1374 | {
1375 | id: 5,
1376 | name: "Cheese",
1377 | quantity: 200,
1378 | unit: "grams",
1379 | category: "dairy",
1380 | key: 0,
1381 | },
1382 | ]}'
1383 | rowsSelectable="true"
1384 | enableMultiRowSelection="true"
1385 | onSelectionDidChange="(newSel) => selection = newSel.map(item => item.id).join()" >
1386 | <Column bindTo="name" canSort="true"/>
1387 | <Column bindTo="quantity" canSort="true"/>
1388 | <Column bindTo="unit" canSort="true"/>
1389 | </Table>
1390 | </App>
1391 | ```
1392 |
1393 | ### `sortingDidChange` [#sortingdidchange]
1394 |
1395 | 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.
1396 |
1397 | Note the [`canSort`](/components/Column#cansort-default-true) properties on the `Column` components which enable custom ordering.
1398 |
1399 | ```xmlui copy {4}
1400 | <App var.sortedBy="">
1401 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1402 | <Table data='{[...]}'
1403 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1404 | <Column bindTo="name" canSort="true"/>
1405 | <Column bindTo="quantity" canSort="true"/>
1406 | <Column bindTo="unit" canSort="true"/>
1407 | </Table>
1408 | </App>
1409 | ```
1410 |
1411 | Click on any of the column headers to trigger a new sorting:
1412 |
1413 | ```xmlui-pg name="Example: sortingDidChange"
1414 | <App var.sortedBy="">
1415 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1416 | <Table data='{[
1417 | {
1418 | id: 0,
1419 | name: "Apples",
1420 | quantity: 5,
1421 | unit: "pieces",
1422 | category: "fruits",
1423 | key: 5,
1424 | },
1425 | {
1426 | id: 1,
1427 | name: "Bananas",
1428 | quantity: 6,
1429 | unit: "pieces",
1430 | category: "fruits",
1431 | key: 4,
1432 | },
1433 | {
1434 | id: 2,
1435 | name: "Carrots",
1436 | quantity: 100,
1437 | unit: "grams",
1438 | category: "vegetables",
1439 | key: 3,
1440 | },
1441 | {
1442 | id: 3,
1443 | name: "Spinach",
1444 | quantity: 1,
1445 | unit: "bunch",
1446 | category: "vegetables",
1447 | key: 2,
1448 | },
1449 | {
1450 | id: 4,
1451 | name: "Milk",
1452 | quantity: 10,
1453 | unit: "liter",
1454 | category: "dairy",
1455 | key: 1,
1456 | },
1457 | {
1458 | id: 5,
1459 | name: "Cheese",
1460 | quantity: 200,
1461 | unit: "grams",
1462 | category: "dairy",
1463 | key: 0,
1464 | },
1465 | ]}'
1466 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1467 | <Column bindTo="name" canSort="true"/>
1468 | <Column bindTo="quantity" canSort="true"/>
1469 | <Column bindTo="unit" canSort="true"/>
1470 | </Table>
1471 | </App>
1472 | ```
1473 |
1474 | ### `willSort` [#willsort]
1475 |
1476 | 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.
1477 |
1478 | The following example uses the `willSort` event to refuse sorting by name:
1479 |
1480 | ```xmlui copy {4}
1481 | <App var.sortedBy="">
1482 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1483 | <Table data='{[...]}'
1484 | onWillSort="(by, dir) => by !== 'name'"
1485 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1486 | <Column bindTo="name" canSort="true"/>
1487 | <Column bindTo="quantity" canSort="true"/>
1488 | <Column bindTo="unit" canSort="true"/>
1489 | </Table>
1490 | </App>
1491 | ```
1492 |
1493 | Click on any of the column headers to trigger the event.
1494 | Though sorting is enabled in the `TableColumnnDef` component of the "name" column via `canSort`,
1495 | clicking that column header still does not sort because `willSort` prevents it:
1496 |
1497 | ```xmlui-pg name="Example: willSort"
1498 | <App var.sortedBy="">
1499 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1500 | <Table data='{[
1501 | {
1502 | id: 0,
1503 | name: "Apples",
1504 | quantity: 5,
1505 | unit: "pieces",
1506 | category: "fruits",
1507 | key: 5,
1508 | },
1509 | {
1510 | id: 1,
1511 | name: "Bananas",
1512 | quantity: 6,
1513 | unit: "pieces",
1514 | category: "fruits",
1515 | key: 4,
1516 | },
1517 | {
1518 | id: 2,
1519 | name: "Carrots",
1520 | quantity: 100,
1521 | unit: "grams",
1522 | category: "vegetables",
1523 | key: 3,
1524 | },
1525 | {
1526 | id: 3,
1527 | name: "Spinach",
1528 | quantity: 1,
1529 | unit: "bunch",
1530 | category: "vegetables",
1531 | key: 2,
1532 | },
1533 | {
1534 | id: 4,
1535 | name: "Milk",
1536 | quantity: 10,
1537 | unit: "liter",
1538 | category: "dairy",
1539 | key: 1,
1540 | },
1541 | {
1542 | id: 5,
1543 | name: "Cheese",
1544 | quantity: 200,
1545 | unit: "grams",
1546 | category: "dairy",
1547 | key: 0,
1548 | },
1549 | ]}'
1550 | onWillSort="(by, dir) => by !== 'name'"
1551 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1552 | <Column bindTo="name" canSort="true"/>
1553 | <Column bindTo="quantity" canSort="true"/>
1554 | <Column bindTo="unit" canSort="true"/>
1555 | </Table>
1556 | </App>
1557 | ```
1558 |
1559 | ## Exposed Methods [#exposed-methods]
1560 |
1561 | ### `clearSelection` [#clearselection]
1562 |
1563 | This method clears the list of currently selected table rows.
1564 |
1565 | **Signature**: `clearSelection(): void`
1566 |
1567 | ```xmlui copy /clearSelection()/ /selectId(1)/ /selectId([2, 4])/ /selectAll()/
1568 | <App>
1569 | <HStack>
1570 | <Button label="Select all" onClick="table.selectAll()" />
1571 | <Button label="Clear all" onClick="table.clearSelection()" />
1572 | <Button label="Select 1" onClick="table.selectId(1)" />
1573 | <Button label="Select 2, 4" onClick="table.selectId([2, 4])" />
1574 | </HStack>
1575 | <Table id="table" data='{[...]}'
1576 | rowsSelectable="true"
1577 | enableMultiRowSelection="true">
1578 | <Column bindTo="name" canSort="true"/>
1579 | <Column bindTo="quantity" canSort="true"/>
1580 | <Column bindTo="unit" canSort="true"/>
1581 | </Table>
1582 | </App>
1583 | ```
1584 |
1585 | ```xmlui-pg name="Example: clearSelection"
1586 | <App>
1587 | <HStack>
1588 | <Button label="Select all" onClick="table.selectAll()" />
1589 | <Button label="Clear all" onClick="table.clearSelection()" />
1590 | <Button label="Select 1" onClick="table.selectId(1)" />
1591 | <Button label="Select 2, 4" onClick="table.selectId([2, 4])" />
1592 | </HStack>
1593 | <Table id="table" data='{[
1594 | {
1595 | id: 0,
1596 | name: "Apples",
1597 | quantity: 5,
1598 | unit: "pieces",
1599 | category: "fruits",
1600 | key: 5,
1601 | },
1602 | {
1603 | id: 1,
1604 | name: "Bananas",
1605 | quantity: 6,
1606 | unit: "pieces",
1607 | category: "fruits",
1608 | key: 4,
1609 | },
1610 | {
1611 | id: 2,
1612 | name: "Carrots",
1613 | quantity: 100,
1614 | unit: "grams",
1615 | category: "vegetables",
1616 | key: 3,
1617 | },
1618 | {
1619 | id: 3,
1620 | name: "Spinach",
1621 | quantity: 1,
1622 | unit: "bunch",
1623 | category: "vegetables",
1624 | key: 2,
1625 | },
1626 | {
1627 | id: 4,
1628 | name: "Milk",
1629 | quantity: 10,
1630 | unit: "liter",
1631 | category: "dairy",
1632 | key: 1,
1633 | },
1634 | {
1635 | id: 5,
1636 | name: "Cheese",
1637 | quantity: 200,
1638 | unit: "grams",
1639 | category: "dairy",
1640 | key: 0,
1641 | },
1642 | ]}'
1643 | rowsSelectable="true"
1644 | enableMultiRowSelection="true">
1645 | <Column bindTo="name" canSort="true"/>
1646 | <Column bindTo="quantity" canSort="true"/>
1647 | <Column bindTo="unit" canSort="true"/>
1648 | </Table>
1649 | </App>
1650 | ```
1651 |
1652 | ### `getSelectedIds` [#getselectedids]
1653 |
1654 | This method returns the list of currently selected table rows IDs.
1655 |
1656 | **Signature**: `getSelectedIds(): Array<string>`
1657 |
1658 | (See the [example](#clearselection) at the `clearSelection` method)
1659 |
1660 | ### `getSelectedItems` [#getselecteditems]
1661 |
1662 | This method returns the list of currently selected table rows items.
1663 |
1664 | **Signature**: `getSelectedItems(): Array<TableRowItem>`
1665 |
1666 | (See the [example](#clearselection) at the `clearSelection` method)
1667 |
1668 | ### `selectAll` [#selectall]
1669 |
1670 | This method selects all the rows in the table. This method has no effect if the rowsSelectable property is set to `false`.
1671 |
1672 | **Signature**: `selectAll(): void`
1673 |
1674 | (See the [example](#clearselection) at the `clearSelection` method)
1675 |
1676 | ### `selectId` [#selectid]
1677 |
1678 | 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.
1679 |
1680 | **Signature**: `selectId(id: string | Array<string>): void`
1681 |
1682 | - `id`: The ID of the row to select, or an array of IDs to select multiple rows.
1683 |
1684 | (See the [example](#clearselection) at the `clearSelection` method)
1685 |
1686 | ## Styling [#styling]
1687 |
1688 | ### Theme Variables [#theme-variables]
1689 |
1690 | | Variable | Default Value (Light) | Default Value (Dark) |
1691 | | --- | --- | --- |
1692 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table | $color-surface-100 | $color-surface-100 |
1693 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table--active | $color-surface-300 | $color-surface-300 |
1694 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table--hover | $color-surface-200 | $color-surface-200 |
1695 | | [backgroundColor](../styles-and-themes/common-units/#color)-pagination-Table | $backgroundColor-Table | $backgroundColor-Table |
1696 | | [backgroundColor](../styles-and-themes/common-units/#color)-row-Table | *none* | *none* |
1697 | | [backgroundColor](../styles-and-themes/common-units/#color)-row-Table--hover | $color-primary-50 | $color-primary-50 |
1698 | | [backgroundColor](../styles-and-themes/common-units/#color)-selected-Table | $color-primary-100 | $color-primary-100 |
1699 | | [backgroundColor](../styles-and-themes/common-units/#color)-selected-Table--hover | $backgroundColor-row-Table--hover | $backgroundColor-row-Table--hover |
1700 | | [backgroundColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1701 | | [border](../styles-and-themes/common-units/#border)-cell-Table | 1px solid $borderColor | 1px solid $borderColor |
1702 | | [border](../styles-and-themes/common-units/#border)-Table | 0px solid transparent | 0px solid transparent |
1703 | | [borderBottom](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1704 | | [borderBottom](../styles-and-themes/common-units/#border)-last-row-Table | $borderBottom-cell-Table | $borderBottom-cell-Table |
1705 | | [borderBottom](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1706 | | [borderBottomColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1707 | | [borderBottomColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1708 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1709 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1710 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1711 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1712 | | [borderColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1713 | | [borderColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1714 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1715 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1716 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1717 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1718 | | [borderHorizontal](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1719 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1720 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1721 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1722 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1723 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1724 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1725 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1726 | | [borderLeft](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1727 | | [borderLeft](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1728 | | [color](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1729 | | [color](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1730 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1731 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1732 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1733 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1734 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Table | $borderRadius | $borderRadius |
1735 | | [borderRight](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1736 | | [borderRight](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1737 | | [color](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1738 | | [color](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1739 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1740 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1741 | | [borderRightWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1742 | | [borderRightWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1743 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1744 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1745 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1746 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1747 | | [borderStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1748 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1749 | | [borderTop](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1750 | | [borderTop](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1751 | | [borderTopColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1752 | | [borderTopColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1753 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1754 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1755 | | [borderTopWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1756 | | [borderTopWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1757 | | [borderHorizontal](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1758 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1759 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1760 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1761 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1762 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1763 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1764 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1765 | | [borderWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1766 | | [borderWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1767 | | [fontSize](../styles-and-themes/common-units/#size)-heading-Table | $fontSize-tiny | $fontSize-tiny |
1768 | | [fontSize](../styles-and-themes/common-units/#size)-row-Table | $fontSize-sm | $fontSize-sm |
1769 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-heading-Table | $fontWeight-bold | $fontWeight-bold |
1770 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-row-Table | *none* | *none* |
1771 | | [outlineColor](../styles-and-themes/common-units/#color)-heading-Table--focus | $outlineColor--focus | $outlineColor--focus |
1772 | | [outlineOffset](../styles-and-themes/common-units/#size)-heading-Table--focus | $outlineOffset--focus | $outlineOffset--focus |
1773 | | [outlineStyle](../styles-and-themes/common-units/#border)-heading-Table--focus | $outlineStyle--focus | $outlineStyle--focus |
1774 | | [outlineWidth](../styles-and-themes/common-units/#size)-heading-Table--focus | $outlineWidth--focus | $outlineWidth--focus |
1775 | | [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 |
1776 | | [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 |
1777 | | [paddingBottom](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1778 | | [paddingBottom](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1779 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-first-Table | $space-5 | $space-5 |
1780 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-last-Table | $space-1 | $space-1 |
1781 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1782 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1783 | | [paddingLeft](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1784 | | [paddingLeft](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1785 | | [paddingRight](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1786 | | [paddingRight](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1787 | | [paddingTop](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1788 | | [paddingTop](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1789 | | [paddingVertical](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1790 | | [paddingVertical](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1791 | | [textColor](../styles-and-themes/common-units/#color)-heading-Table | $color-surface-500 | $color-surface-500 |
1792 | | [textColor](../styles-and-themes/common-units/#color)-pagination-Table | $color-secondary | $color-secondary |
1793 | | [textColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1794 | | [textTransform](../styles-and-themes/common-units/#textTransform)-heading-Table | uppercase | uppercase |
1795 |
```