This is page 189 of 234. Use http://codebase.md/xmlui-org/xmlui?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── file-input-automatic-csv-json-parsing.md
│ ├── markdown-link-new-tab.md
│ ├── markdown-link-truncation.md
│ └── markdown-table-rowspan-colspan.md
├── .editorconfig
├── .eslintrc.cjs
├── .gitattributes
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-preview.yml
│ ├── deploy-docs.yml
│ ├── deploy-standalone-playground.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests-fast.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .npmrc
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── cli-blog-header.svg
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-the-xmlui-cli.md
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── staticwebapp.config.json
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ └── Separator.xmlui
│ │ ├── config.ts
│ │ └── Main.xmlui
│ └── 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
│ │ │ ├── ResponsiveBar.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
│ │ └── 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
│ │ │ ├── buffer-a-reactive-edit.md
│ │ │ ├── chain-a-refetch.md
│ │ │ ├── control-cache-invalidation.md
│ │ │ ├── copy-billing-to-shipping.md
│ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ ├── debounce-with-changelistener.md
│ │ │ ├── debug-a-component.md
│ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ ├── delegate-a-method.md
│ │ │ ├── do-custom-form-validation.md
│ │ │ ├── expose-a-method-from-a-component.md
│ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ ├── handle-background-operations.md
│ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ ├── implement-an-authentication-gate.md
│ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ ├── make-a-table-responsive.md
│ │ │ ├── make-navpanel-width-responsive.md
│ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ ├── paginate-a-list.md
│ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ ├── set-width-for-input-fields-in-a-horizontal-layout.md
│ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ ├── update-ui-optimistically.md
│ │ │ ├── use-accessors-to-simplify-complex-expressions.md
│ │ │ ├── use-built-in-form-validation.md
│ │ │ ├── use-modal-dialog-onclose.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
│ │ ├── playground-and-codefence.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
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── 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
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── sample-broken.csv
│ │ │ │ ├── sample-broken.json
│ │ │ │ ├── sample-config.json
│ │ │ │ ├── sample-inventory.csv
│ │ │ │ ├── sample-products-semicolon.csv
│ │ │ │ ├── sample-products-tsv.tsv
│ │ │ │ ├── sample-products.csv
│ │ │ │ ├── sample-products.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ └── staticwebapp.config.json
│ ├── 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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── Separator.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── feature.md
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playground
│ ├── .gitignore
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── resources
│ │ │ ├── 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
│ │ │ ├── logo-dark.svg
│ │ │ └── logo.svg
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── src
│ │ ├── 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
├── playwright.config.ts
├── README.md
├── test-alignment.xmlui
├── test-app-script-issue.xmlui
├── tools
│ ├── 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
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── 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
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-categorization.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── conv-create-components.md
│ ├── conv-e2e-testing.md
│ ├── conv-unit-testing.md
│ ├── data-operations.md
│ ├── font-size.md
│ ├── form-design.md
│ ├── form-infrastructure-issues.md
│ ├── form-infrastructure.md
│ ├── glossary.md
│ ├── images
│ │ ├── condensed-layout-content-scroll-no-gutters-bottom.svg
│ │ ├── condensed-layout-content-scroll-no-gutters-no-overflow.svg
│ │ ├── condensed-layout-content-scroll-no-gutters-top.svg
│ │ ├── condensed-layout-content-scroll-with-gutters-bottom.svg
│ │ ├── condensed-layout-content-scroll-with-gutters-no-overflow.svg
│ │ ├── condensed-layout-content-scroll-with-gutters-top.svg
│ │ ├── condensed-layout-no-gutters-bottom.svg
│ │ ├── condensed-layout-no-gutters-mid.svg
│ │ ├── condensed-layout-no-gutters-top.svg
│ │ ├── condensed-layout-no-overflow.svg
│ │ ├── condensed-layout-with-gutters-bottom.svg
│ │ ├── condensed-layout-with-gutters-no-overflow.svg
│ │ ├── condensed-layout-with-gutters-top.svg
│ │ ├── condensed-sticky-content-scroll-no-gutters-bottom.svg
│ │ ├── condensed-sticky-content-scroll-no-gutters-no-overflow.svg
│ │ ├── condensed-sticky-content-scroll-no-gutters-top.svg
│ │ ├── condensed-sticky-content-scroll-with-gutters-bottom.svg
│ │ ├── condensed-sticky-content-scroll-with-gutters-no-overflow.svg
│ │ ├── condensed-sticky-content-scroll-with-gutters-top.svg
│ │ ├── condensed-sticky-layout-no-gutters-bottom.svg
│ │ ├── condensed-sticky-layout-no-gutters-top.svg
│ │ ├── condensed-sticky-layout-no-overflow.svg
│ │ ├── condensed-sticky-layout-with-gutters-bottom.svg
│ │ ├── condensed-sticky-layout-with-gutters-no-overflow.svg
│ │ ├── condensed-sticky-layout-with-gutters-top.svg
│ │ ├── desktop-layout-no-overflow.svg
│ │ ├── desktop-layout-overflow-bottom.svg
│ │ ├── desktop-layout-overflow-top.svg
│ │ ├── horizontal-layout-content-scroll-no-gutters-bottom.svg
│ │ ├── horizontal-layout-content-scroll-no-gutters-top.svg
│ │ ├── horizontal-layout-content-scroll-no-gutters.svg
│ │ ├── horizontal-layout-content-scroll-with-gutters-bottom.svg
│ │ ├── horizontal-layout-content-scroll-with-gutters-diagram.svg
│ │ ├── horizontal-layout-content-scroll-with-gutters-top.svg
│ │ ├── horizontal-layout-diagram.svg
│ │ ├── horizontal-layout-no-gutters-overflow-scrollbar-bottom.svg
│ │ ├── horizontal-layout-no-gutters-overflow-scrollbar-top.svg
│ │ ├── horizontal-layout-overflow-scrollbar-bottom.svg
│ │ ├── horizontal-layout-overflow-scrollbar-nogutter-bottom.svg
│ │ ├── horizontal-layout-overflow-scrollbar-nogutter-mid.svg
│ │ ├── horizontal-layout-overflow-scrollbar-top.svg
│ │ ├── horizontal-layout-with-gutters-diagram.svg
│ │ ├── horizontal-sticky-content-scroll-no-gutters-bottom.svg
│ │ ├── horizontal-sticky-content-scroll-no-gutters-top.svg
│ │ ├── horizontal-sticky-content-scroll-no-gutters.svg
│ │ ├── horizontal-sticky-content-scroll-with-gutters-bottom.svg
│ │ ├── horizontal-sticky-content-scroll-with-gutters-top.svg
│ │ ├── horizontal-sticky-content-scroll-with-gutters.svg
│ │ ├── horizontal-sticky-layout-overflow-bottom.svg
│ │ ├── horizontal-sticky-layout-overflow-top.svg
│ │ ├── horizontal-sticky-layout-with-gutters-bottom-scroll.svg
│ │ ├── horizontal-sticky-layout-with-gutters-mid-scroll.svg
│ │ ├── horizontal-sticky-layout-with-gutters-no-overflow.svg
│ │ ├── horizontal-sticky-layout-with-gutters-overflow-bottom.svg
│ │ ├── horizontal-sticky-layout-with-gutters-overflow-mid.svg
│ │ ├── horizontal-sticky-layout-with-gutters-overflow-top.svg
│ │ ├── horizontal-sticky-layout-with-gutters.svg
│ │ ├── horizontal-sticky-layout.svg
│ │ ├── vertical-full-header-content-scroll-no-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-content-scroll-no-gutters-overflow-top.svg
│ │ ├── vertical-full-header-content-scroll-no-gutters.svg
│ │ ├── vertical-full-header-content-scroll-with-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-content-scroll-with-gutters-overflow-top.svg
│ │ ├── vertical-full-header-content-scroll-with-gutters.svg
│ │ ├── vertical-full-header-layout-no-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-layout-no-gutters-overflow-top.svg
│ │ ├── vertical-full-header-layout-no-gutters.svg
│ │ ├── vertical-full-header-layout-with-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-layout-with-gutters-overflow-top.svg
│ │ ├── vertical-full-header-layout-with-gutters.svg
│ │ ├── vertical-layout-content-scroll-no-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-content-scroll-no-gutters-overflow-top.svg
│ │ ├── vertical-layout-content-scroll-no-gutters.svg
│ │ ├── vertical-layout-content-scroll-with-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-content-scroll-with-gutters-overflow-top.svg
│ │ ├── vertical-layout-content-scroll-with-gutters.svg
│ │ ├── vertical-layout-no-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-no-gutters-overflow-top.svg
│ │ ├── vertical-layout-no-gutters.svg
│ │ ├── vertical-layout-with-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-with-gutters-overflow-top.svg
│ │ ├── vertical-layout-with-gutters.svg
│ │ ├── vertical-sticky-content-scroll-no-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-content-scroll-no-gutters-overflow-top.svg
│ │ ├── vertical-sticky-content-scroll-no-gutters.svg
│ │ ├── vertical-sticky-content-scroll-with-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-content-scroll-with-gutters-overflow-top.svg
│ │ ├── vertical-sticky-content-scroll-with-gutters.svg
│ │ ├── vertical-sticky-layout-no-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-layout-no-gutters-overflow-top.svg
│ │ ├── vertical-sticky-layout-no-gutters.svg
│ │ ├── vertical-sticky-layout-with-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-layout-with-gutters-overflow-top.svg
│ │ └── vertical-sticky-layout-with-gutters.svg
│ ├── index.md
│ ├── mcp-schizophrenia.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ └── working-with-code.md
│ ├── react-fundamentals.md
│ ├── refactoring-plan-eliminate-uses.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── theming-styling.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── ApiDefs.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-layout-mobile.spec.ts
│ │ │ ├── App-layout.spec.ts
│ │ │ ├── app-refactor.md
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppNavigation.ts
│ │ │ ├── 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
│ │ │ ├── SearchIndexCollector.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
│ │ ├── Br
│ │ │ ├── Br.spec.ts
│ │ │ └── Br.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ ├── ContentSeparatorNative.tsx
│ │ │ └── test-padding.xmlui
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ ├── DataSource.spec.ts
│ │ │ └── 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
│ │ │ ├── FormBindingWrapper.tsx
│ │ │ ├── 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-styles.md
│ │ │ ├── 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.spec.ts
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── Part
│ │ │ └── Part.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
│ │ │ ├── ResponsiveBarItem.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
│ │ ├── Toast
│ │ │ ├── Toast.spec.ts
│ │ │ ├── Toast.tsx
│ │ │ └── ToastNative.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
│ │ │ ├── Tree.tsx
│ │ │ ├── TreeComponent.module.scss
│ │ │ └── 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
│ │ │ └── FormBindingBehavior.spec.ts
│ │ ├── 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
│ │ │ ├── appState.ts
│ │ │ ├── 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
│ │ │ ├── state-plan.md
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ └── infrastructure
│ │ ├── index.html
│ │ ├── main.tsx
│ │ ├── public
│ │ │ ├── mockServiceWorker.js
│ │ │ ├── resources
│ │ │ │ ├── bell.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── flower-640x480.jpg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ └── txt.svg
│ │ │ └── serve.json
│ │ └── TestBed.tsx
│ └── 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
│ │ ├── rendering
│ │ │ └── ComponentAdapter.test.tsx
│ │ ├── 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-disabled.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
│ │ └── xmluiMarkupToComponent.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
│ ├── appstate.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
│ ├── init-cleanup-events.spec.ts
│ ├── inline-styles-disabled.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── script-var-override.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
├── vitest.config.ts
└── vitest.setup.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 | ### `alwaysShowPagination` [#alwaysshowpagination]
42 |
43 | This property explicitly toggles pagination controls visibility. If set to `true`, controls are always shown even if there is only one page. If set to `false`, controls are hidden. If omitted, controls are hidden when there is only one page and shown otherwise. This property only has effect when pagination is enabled. It acts as an alias for showPaginationControls.
44 |
45 | ### `alwaysShowSelectionHeader` (default: false) [#alwaysshowselectionheader-default-false]
46 |
47 | 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.
48 |
49 | ### `alwaysShowSortingIndicator` (default: false) [#alwaysshowsortingindicator-default-false]
50 |
51 | This property indicates whether the sorting indicator is always visible in the column headers. When set to `true`, the sorting indicator is always visible. Otherwise, it is visible only when the user hovers over/focuses the column header or the column is sorted.
52 |
53 | ### `autoFocus` (default: false) [#autofocus-default-false]
54 |
55 | If this property is set to `true`, the component gets the focus automatically when displayed.
56 |
57 | ### `buttonRowPosition` (default: "center") [#buttonrowposition-default-center]
58 |
59 | Determines where to place the pagination button row in the layout. It works the same as the [Pagination component property](./Pagination#buttonrowposition).
60 |
61 | Available values: `start`, `center` **(default)**, `end`
62 |
63 | ### `cellVerticalAlign` (default: "center") [#cellverticalalign-default-center]
64 |
65 | This property controls the vertical alignment of cell content. It can be set to `top`, `center`, or `bottom`.
66 |
67 | Available values: `top`, `center` **(default)**, `bottom`
68 |
69 | ### `checkboxTolerance` (default: "compact") [#checkboxtolerance-default-compact]
70 |
71 | 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.
72 |
73 | Available values: `none`, `compact` **(default)**, `comfortable`, `spacious`
74 |
75 | The default value is `false`.
76 |
77 | ```xmlui copy /checkboxTolerance="comfortable"/
78 | <App>
79 | <Table data='{[...]}'
80 | rowsSelectable="true"
81 | checkboxTolerance="comfortable"
82 | >
83 | <Column bindTo="name"/>
84 | <Column bindTo="quantity"/>
85 | <Column bindTo="unit"/>
86 | </Table>
87 | </App>
88 | ```
89 |
90 | ```xmlui-pg name="Example: checkboxTolerance"
91 | <App>
92 | <Table data='{[
93 | {
94 | id: 0,
95 | name: "Apples",
96 | quantity: 5,
97 | unit: "pieces",
98 | category: "fruits",
99 | key: 5,
100 | },
101 | {
102 | id: 1,
103 | name: "Bananas",
104 | quantity: 6,
105 | unit: "pieces",
106 | category: "fruits",
107 | key: 4,
108 | },
109 | {
110 | id: 2,
111 | name: "Carrots",
112 | quantity: 100,
113 | unit: "grams",
114 | category: "vegetables",
115 | key: 3,
116 | },
117 | {
118 | id: 3,
119 | name: "Spinach",
120 | quantity: 1,
121 | unit: "bunch",
122 | category: "vegetables",
123 | key: 2,
124 | },
125 | {
126 | id: 4,
127 | name: "Milk",
128 | quantity: 10,
129 | unit: "liter",
130 | category: "dairy",
131 | key: 1,
132 | },
133 | {
134 | id: 5,
135 | name: "Cheese",
136 | quantity: 200,
137 | unit: "grams",
138 | category: "dairy",
139 | key: 0,
140 | },
141 | ]}'
142 | rowsSelectable="true"
143 | checkboxTolerance="comfortable">
144 | <Column bindTo="name"/>
145 | <Column bindTo="quantity"/>
146 | <Column bindTo="unit"/>
147 | </Table>
148 | </App>
149 | ```
150 |
151 | ### `data` [#data]
152 |
153 | The component receives data via this property. The `data` property is a list of items that the `Table` can display.
154 |
155 | ```xmlui copy /data='{[...]}'/
156 | <App>
157 | <Table data='{[...]}'>
158 | <Column bindTo="name"/>
159 | <Column bindTo="quantity"/>
160 | <Column bindTo="unit"/>
161 | </Table>
162 | </App>
163 | ```
164 |
165 | ```xmlui-pg name="Example: data"
166 | <App>
167 | <Table data='{[
168 | {
169 | id: 0,
170 | name: "Apples",
171 | quantity: 5,
172 | unit: "pieces",
173 | category: "fruits",
174 | key: 5,
175 | },
176 | {
177 | id: 1,
178 | name: "Bananas",
179 | quantity: 6,
180 | unit: "pieces",
181 | category: "fruits",
182 | key: 4,
183 | },
184 | {
185 | id: 2,
186 | name: "Carrots",
187 | quantity: 100,
188 | unit: "grams",
189 | category: "vegetables",
190 | key: 3,
191 | },
192 | {
193 | id: 3,
194 | name: "Spinach",
195 | quantity: 1,
196 | unit: "bunch",
197 | category: "vegetables",
198 | key: 2,
199 | },
200 | {
201 | id: 4,
202 | name: "Milk",
203 | quantity: 10,
204 | unit: "liter",
205 | category: "dairy",
206 | key: 1,
207 | },
208 | {
209 | id: 5,
210 | name: "Cheese",
211 | quantity: 200,
212 | unit: "grams",
213 | category: "dairy",
214 | key: 0,
215 | },
216 | ]}'>
217 | <Column bindTo="name"/>
218 | <Column bindTo="quantity"/>
219 | <Column bindTo="unit"/>
220 | </Table>
221 | </App>
222 | ```
223 |
224 | You can also provide the `Table` with data directly from an API via this property.
225 | Here, the component displays rocket information coming from the official SpaceX API.
226 |
227 | ```xmlui-pg copy display name="Example: data API Call"
228 | <App>
229 | <Table data='https://api.spacexdata.com/v3/rockets'>
230 | <Column header="Image" size="140px">
231 | <Image height="100px" fit="cover" src="{$item.flickr_images[0]}"/>
232 | </Column>
233 | <Column canSort="true" bindTo="country"/>
234 | <Column canSort="true" bindTo="company"/>
235 | </Table>
236 | </App>
237 | ```
238 |
239 | ### `enableMultiRowSelection` (default: true) [#enablemultirowselection-default-true]
240 |
241 | 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.
242 |
243 | This boolean property indicates whether you can select multiple rows in the table.
244 | This property only has an effect when the `rowsSelectable` property is set.
245 | Setting it to `false` limits selection to a single row.
246 |
247 | By default, the value of this property is `true`.
248 |
249 | ```xmlui copy /enableMultiRowSelection="false"/
250 | <App>
251 | <Table data='{[...]}'
252 | rowsSelectable="true"
253 | enableMultiRowSelection="false">
254 | <Column bindTo="name"/>
255 | <Column bindTo="quantity"/>
256 | <Column bindTo="unit"/>
257 | </Table>
258 | </App>
259 | ```
260 |
261 | ```xmlui-pg name="Example: enableMultiRowSelection"
262 | <App>
263 | <Table data='{[
264 | {
265 | id: 0,
266 | name: "Apples",
267 | quantity: 5,
268 | unit: "pieces",
269 | category: "fruits",
270 | key: 5,
271 | },
272 | {
273 | id: 1,
274 | name: "Bananas",
275 | quantity: 6,
276 | unit: "pieces",
277 | category: "fruits",
278 | key: 4,
279 | },
280 | {
281 | id: 2,
282 | name: "Carrots",
283 | quantity: 100,
284 | unit: "grams",
285 | category: "vegetables",
286 | key: 3,
287 | },
288 | {
289 | id: 3,
290 | name: "Spinach",
291 | quantity: 1,
292 | unit: "bunch",
293 | category: "vegetables",
294 | key: 2,
295 | },
296 | {
297 | id: 4,
298 | name: "Milk",
299 | quantity: 10,
300 | unit: "liter",
301 | category: "dairy",
302 | key: 1,
303 | },
304 | {
305 | id: 5,
306 | name: "Cheese",
307 | quantity: 200,
308 | unit: "grams",
309 | category: "dairy",
310 | key: 0,
311 | },
312 | ]}'
313 | rowsSelectable="true"
314 | enableMultiRowSelection="false">
315 | <Column bindTo="name"/>
316 | <Column bindTo="quantity"/>
317 | <Column bindTo="unit"/>
318 | </Table>
319 | </App>
320 | ```
321 |
322 | ### `headerHeight` [#headerheight]
323 |
324 | This optional property is used to specify the height of the table header.
325 |
326 | It accepts common [size values](/styles-and-themes/common-units#size-values).
327 |
328 | ```xmlui copy /headerHeight="60px"/
329 | <App>
330 | <Table data='{[...]}' headerHeight="60px">
331 | <Column bindTo="name"/>
332 | <Column bindTo="quantity"/>
333 | <Column bindTo="unit"/>
334 | </Table>
335 | </App>
336 | ```
337 |
338 | ```xmlui-pg name="Example: headerHeight"
339 | <App>
340 | <Table data='{[
341 | {
342 | id: 0,
343 | name: "Apples",
344 | quantity: 5,
345 | unit: "pieces",
346 | category: "fruits",
347 | key: 5,
348 | },
349 | {
350 | id: 1,
351 | name: "Bananas",
352 | quantity: 6,
353 | unit: "pieces",
354 | category: "fruits",
355 | key: 4,
356 | },
357 | {
358 | id: 2,
359 | name: "Carrots",
360 | quantity: 100,
361 | unit: "grams",
362 | category: "vegetables",
363 | key: 3,
364 | },
365 | {
366 | id: 3,
367 | name: "Spinach",
368 | quantity: 1,
369 | unit: "bunch",
370 | category: "vegetables",
371 | key: 2,
372 | },
373 | {
374 | id: 4,
375 | name: "Milk",
376 | quantity: 10,
377 | unit: "liter",
378 | category: "dairy",
379 | key: 1,
380 | },
381 | {
382 | id: 5,
383 | name: "Cheese",
384 | quantity: 200,
385 | unit: "grams",
386 | category: "dairy",
387 | key: 0,
388 | },
389 | ]}'
390 | headerHeight="60px">
391 | <Column bindTo="name"/>
392 | <Column bindTo="quantity"/>
393 | <Column bindTo="unit"/>
394 | </Table>
395 | </App>
396 | ```
397 |
398 | ### `hideHeader` (default: false) [#hideheader-default-false]
399 |
400 | Set the header visibility using this property. Set it to `true` to hide the header.
401 |
402 | Set the header visibility using this property. Set it to `true` to hide the header.
403 | The default value is `false`.
404 |
405 | ```xmlui copy /hideHeader="true"/
406 | <App>
407 | <Table data='{[...]}' hideHeader="true">
408 | <Column bindTo="name"/>
409 | <Column bindTo="quantity"/>
410 | <Column bindTo="unit"/>
411 | </Table>
412 | </App>
413 | ```
414 |
415 | ```xmlui-pg name="Example: hideHeader" height="300px"
416 | <App>
417 | <Table data='{[
418 | {
419 | id: 0,
420 | name: "Apples",
421 | quantity: 5,
422 | unit: "pieces",
423 | category: "fruits",
424 | key: 5,
425 | },
426 | {
427 | id: 1,
428 | name: "Bananas",
429 | quantity: 6,
430 | unit: "pieces",
431 | category: "fruits",
432 | key: 4,
433 | },
434 | {
435 | id: 2,
436 | name: "Carrots",
437 | quantity: 100,
438 | unit: "grams",
439 | category: "vegetables",
440 | key: 3,
441 | },
442 | {
443 | id: 3,
444 | name: "Spinach",
445 | quantity: 1,
446 | unit: "bunch",
447 | category: "vegetables",
448 | key: 2,
449 | },
450 | {
451 | id: 4,
452 | name: "Milk",
453 | quantity: 10,
454 | unit: "liter",
455 | category: "dairy",
456 | key: 1,
457 | },
458 | {
459 | id: 5,
460 | name: "Cheese",
461 | quantity: 200,
462 | unit: "grams",
463 | category: "dairy",
464 | key: 0,
465 | },
466 | ]}'
467 | hideHeader="true">
468 | <Column bindTo="name"/>
469 | <Column bindTo="quantity"/>
470 | <Column bindTo="unit"/>
471 | </Table>
472 | </App>
473 | ```
474 |
475 | ### `iconNoSort` [#iconnosort]
476 |
477 | 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.
478 |
479 | Allows the customization of the icon displayed in a Table column header when when sorting is enabled
480 | 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.
481 |
482 | ```xmlui copy /iconNoSort="close"/
483 | <App>
484 | <Table data='{[...]}' sortBy="quantity" iconNoSort="close">
485 | <Column bindTo="name" canSort="true" />
486 | <Column bindTo="quantity" canSort="true" />
487 | <Column bindTo="unit" canSort="true" />
488 | </Table>
489 | </App>
490 | ```
491 |
492 | ```xmlui-pg name="Example: iconNoSort"
493 | <App>
494 | <Table data='{[
495 | {
496 | id: 0,
497 | name: "Apples",
498 | quantity: 5,
499 | unit: "pieces",
500 | category: "fruits",
501 | key: 5,
502 | },
503 | {
504 | id: 1,
505 | name: "Bananas",
506 | quantity: 6,
507 | unit: "pieces",
508 | category: "fruits",
509 | key: 4,
510 | },
511 | {
512 | id: 2,
513 | name: "Carrots",
514 | quantity: 100,
515 | unit: "grams",
516 | category: "vegetables",
517 | key: 3,
518 | },
519 | {
520 | id: 3,
521 | name: "Spinach",
522 | quantity: 1,
523 | unit: "bunch",
524 | category: "vegetables",
525 | key: 2,
526 | },
527 | {
528 | id: 4,
529 | name: "Milk",
530 | quantity: 10,
531 | unit: "liter",
532 | category: "dairy",
533 | key: 1,
534 | },
535 | {
536 | id: 5,
537 | name: "Cheese",
538 | quantity: 200,
539 | unit: "grams",
540 | category: "dairy",
541 | key: 0,
542 | },
543 | ]}'
544 | sortBy="quantity" iconNoSort="close">
545 | <Column bindTo="name" canSort="true" />
546 | <Column bindTo="quantity" canSort="true" />
547 | <Column bindTo="unit" canSort="true" />
548 | </Table>
549 | </App>
550 | ```
551 |
552 | ### `iconSortAsc` [#iconsortasc]
553 |
554 | 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.
555 |
556 | Allows the customization of the icon displayed in a Table column header when sorting is enabled,
557 | sorting is done according to the column, and the column is sorted in ascending order.
558 |
559 | ```xmlui copy /iconSortAsc="chevronup"/
560 | <App>
561 | <Table data='{[...]}' sortBy="quantity" iconSortAsc="chevronup">
562 | <Column bindTo="name" canSort="true" />
563 | <Column bindTo="quantity" canSort="true" />
564 | <Column bindTo="unit" canSort="true" />
565 | </Table>
566 | </App>
567 | ```
568 |
569 | ```xmlui-pg copy name="Example: iconSortAsc"
570 | <App>
571 | <Table data='{[
572 | {
573 | id: 0,
574 | name: "Apples",
575 | quantity: 5,
576 | unit: "pieces",
577 | category: "fruits",
578 | key: 5,
579 | },
580 | {
581 | id: 1,
582 | name: "Bananas",
583 | quantity: 6,
584 | unit: "pieces",
585 | category: "fruits",
586 | key: 4,
587 | },
588 | {
589 | id: 2,
590 | name: "Carrots",
591 | quantity: 100,
592 | unit: "grams",
593 | category: "vegetables",
594 | key: 3,
595 | },
596 | {
597 | id: 3,
598 | name: "Spinach",
599 | quantity: 1,
600 | unit: "bunch",
601 | category: "vegetables",
602 | key: 2,
603 | },
604 | {
605 | id: 4,
606 | name: "Milk",
607 | quantity: 10,
608 | unit: "liter",
609 | category: "dairy",
610 | key: 1,
611 | },
612 | {
613 | id: 5,
614 | name: "Cheese",
615 | quantity: 200,
616 | unit: "grams",
617 | category: "dairy",
618 | key: 0,
619 | },
620 | ]}'
621 | sortBy="quantity" iconSortAsc="chevronup">
622 | <Column bindTo="name" canSort="true" />
623 | <Column bindTo="quantity" canSort="true" />
624 | <Column bindTo="unit" canSort="true" />
625 | </Table>
626 | </App>
627 | ```
628 |
629 | ### `iconSortDesc` [#iconsortdesc]
630 |
631 | 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.
632 |
633 | Allows the customization of the icon displayed in a Table column header when sorting is enabled,
634 | sorting is done according to the column, and the column is sorted in descending order.
635 |
636 | ```xmlui copy /iconSortDesc="chevrondown"/
637 | <App>
638 | <Table data='{[...]}' sortBy="quantity" iconSortDesc="chevrondown">
639 | <Column bindTo="name" canSort="true" />
640 | <Column bindTo="quantity" canSort="true" />
641 | <Column bindTo="unit" canSort="true" />
642 | </Table>
643 | </App>
644 | ```
645 |
646 | Select a column header and set it to descending ordering.
647 |
648 | ```xmlui-pg name="Example: iconSortDesc"
649 | <App>
650 | <Table data='{[
651 | {
652 | id: 0,
653 | name: "Apples",
654 | quantity: 5,
655 | unit: "pieces",
656 | category: "fruits",
657 | key: 5,
658 | },
659 | {
660 | id: 1,
661 | name: "Bananas",
662 | quantity: 6,
663 | unit: "pieces",
664 | category: "fruits",
665 | key: 4,
666 | },
667 | {
668 | id: 2,
669 | name: "Carrots",
670 | quantity: 100,
671 | unit: "grams",
672 | category: "vegetables",
673 | key: 3,
674 | },
675 | {
676 | id: 3,
677 | name: "Spinach",
678 | quantity: 1,
679 | unit: "bunch",
680 | category: "vegetables",
681 | key: 2,
682 | },
683 | {
684 | id: 4,
685 | name: "Milk",
686 | quantity: 10,
687 | unit: "liter",
688 | category: "dairy",
689 | key: 1,
690 | },
691 | {
692 | id: 5,
693 | name: "Cheese",
694 | quantity: 200,
695 | unit: "grams",
696 | category: "dairy",
697 | key: 0,
698 | },
699 | ]}'
700 | sortBy="quantity" iconSortDesc="chevrondown">
701 | <Column bindTo="name" canSort="true" />
702 | <Column bindTo="quantity" canSort="true" />
703 | <Column bindTo="unit" canSort="true" />
704 | </Table>
705 | </App>
706 | ```
707 |
708 | ### `idKey` (default: "id") [#idkey-default-id]
709 |
710 | This property is used to specify the unique ID property in the data array. If the idKey points to a property that does not exist in the data items, that will result in incorrect behavior when using selectable rows.
711 |
712 | ```xmlui copy /idKey="key"/
713 | <App>
714 | <Table
715 | idKey="key"
716 | rowsSelectable="true"
717 | data="{[
718 | { 'key': 0, 'name': 'John' },
719 | { 'key': 1, 'name': 'Jane' },
720 | { 'key': 2, 'name': 'Bill' },
721 | ]}"
722 | >
723 | <Column bindTo="name"/>
724 | </Table>
725 | </App>
726 | ```
727 |
728 | ### `initiallySelected` [#initiallyselected]
729 |
730 | 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`.
731 |
732 | ### `isPaginated` (default: false) [#ispaginated-default-false]
733 |
734 | This property adds pagination controls to the `Table`.
735 |
736 | ```xmlui copy /isPaginated="true"/
737 | <App>
738 | <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
739 | <Column bindTo="name"/>
740 | <Column bindTo="quantity"/>
741 | <Column bindTo="unit"/>
742 | </Table>
743 | </App>
744 | ```
745 |
746 | ```xmlui-pg name="Example: isPaginated"
747 | <App>
748 | <Table data='{[
749 | {
750 | id: 0,
751 | name: "Apples",
752 | quantity: 5,
753 | unit: "pieces",
754 | category: "fruits",
755 | key: 5,
756 | },
757 | {
758 | id: 1,
759 | name: "Bananas",
760 | quantity: 6,
761 | unit: "pieces",
762 | category: "fruits",
763 | key: 4,
764 | },
765 | {
766 | id: 2,
767 | name: "Carrots",
768 | quantity: 100,
769 | unit: "grams",
770 | category: "vegetables",
771 | key: 3,
772 | },
773 | {
774 | id: 3,
775 | name: "Spinach",
776 | quantity: 1,
777 | unit: "bunch",
778 | category: "vegetables",
779 | key: 2,
780 | },
781 | {
782 | id: 4,
783 | name: "Milk",
784 | quantity: 10,
785 | unit: "liter",
786 | category: "dairy",
787 | key: 1,
788 | },
789 | {
790 | id: 5,
791 | name: "Cheese",
792 | quantity: 200,
793 | unit: "grams",
794 | category: "dairy",
795 | key: 0,
796 | },
797 | ]}'
798 | isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
799 | <Column bindTo="name"/>
800 | <Column bindTo="quantity"/>
801 | <Column bindTo="unit"/>
802 | </Table>
803 | </App>
804 | ```
805 |
806 | ### `loading` [#loading]
807 |
808 | 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.
809 |
810 | This boolean property indicates if the component is fetching (or processing) data.
811 | This property is useful when data is loaded conditionally or receiving it takes some time.
812 |
813 | ```xmlui-pg copy display name="Example: loading"
814 | <App>
815 | <Table loading="true">
816 | <Column bindTo="name"/>
817 | <Column bindTo="quantity"/>
818 | </Table>
819 | </App>
820 | ```
821 |
822 | ### `noBottomBorder` (default: false) [#nobottomborder-default-false]
823 |
824 | 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.
825 |
826 | ### `noDataTemplate` [#nodatatemplate]
827 |
828 | A property to customize what to display if the table does not contain any data.
829 |
830 | ```xmlui-pg copy {3-5} display name="Example: noDataTemplate"
831 | <App>
832 | <Table>
833 | <property name="noDataTemplate">
834 | <Text value="No data loaded" variant="strong" />
835 | </property>
836 | <Column bindTo="name"/>
837 | <Column bindTo="quantity"/>
838 | </Table>
839 | </App>
840 | ```
841 |
842 | ### `pageInfoPosition` [#pageinfoposition]
843 |
844 | Determines where to place the page information in the layout. It works the same as the [Pagination component property](./Pagination#pageinfoposition).
845 |
846 | ### `pageSize` [#pagesize]
847 |
848 | This property defines the number of rows to display per page when pagination is enabled.
849 |
850 | Options
851 |
852 | Page sizes are only accepted in an array, even if the array contains one item.
853 |
854 | Note that this property only works if the [`isPaginated`](#ispaginated) property is set to `true`.
855 |
856 | ```xmlui copy /pageSizeOptions="{[3, 6, 12]}"/
857 | <App>
858 | <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
859 | <Column bindTo="name"/>
860 | <Column bindTo="quantity"/>
861 | <Column bindTo="unit"/>
862 | </Table>
863 | </App>
864 | ```
865 |
866 | ```xmlui-pg name="Example: pageSizeOptions"
867 | <App>
868 | <Table data='{[
869 | {
870 | id: 0,
871 | name: "Apples",
872 | quantity: 5,
873 | unit: "pieces",
874 | category: "fruits",
875 | key: 5,
876 | },
877 | {
878 | id: 1,
879 | name: "Bananas",
880 | quantity: 6,
881 | unit: "pieces",
882 | category: "fruits",
883 | key: 4,
884 | },
885 | {
886 | id: 2,
887 | name: "Carrots",
888 | quantity: 100,
889 | unit: "grams",
890 | category: "vegetables",
891 | key: 3,
892 | },
893 | {
894 | id: 3,
895 | name: "Spinach",
896 | quantity: 1,
897 | unit: "bunch",
898 | category: "vegetables",
899 | key: 2,
900 | },
901 | {
902 | id: 4,
903 | name: "Milk",
904 | quantity: 10,
905 | unit: "liter",
906 | category: "dairy",
907 | key: 1,
908 | },
909 | {
910 | id: 5,
911 | name: "Cheese",
912 | quantity: 200,
913 | unit: "grams",
914 | category: "dairy",
915 | key: 0,
916 | },
917 | ]}'
918 | isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
919 | <Column bindTo="name"/>
920 | <Column bindTo="quantity"/>
921 | <Column bindTo="unit"/>
922 | </Table>
923 | </App>
924 | ```
925 |
926 | ### `pageSizeOptions` [#pagesizeoptions]
927 |
928 | 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.
929 |
930 | Page sizes are only accepted in an array, even if the array contains one item.
931 |
932 | Note that this property only works if the [`isPaginated`](#ispaginated) property is set to `true`.
933 |
934 | ```xmlui copy /pageSizeOptions="{[3, 6, 12]}"/
935 | <App>
936 | <Table data='{[...]}' isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
937 | <Column bindTo="name"/>
938 | <Column bindTo="quantity"/>
939 | <Column bindTo="unit"/>
940 | </Table>
941 | </App>
942 | ```
943 |
944 | ```xmlui-pg name="Example: pageSizeOptions"
945 | <App>
946 | <Table data='{[
947 | {
948 | id: 0,
949 | name: "Apples",
950 | quantity: 5,
951 | unit: "pieces",
952 | category: "fruits",
953 | key: 5,
954 | },
955 | {
956 | id: 1,
957 | name: "Bananas",
958 | quantity: 6,
959 | unit: "pieces",
960 | category: "fruits",
961 | key: 4,
962 | },
963 | {
964 | id: 2,
965 | name: "Carrots",
966 | quantity: 100,
967 | unit: "grams",
968 | category: "vegetables",
969 | key: 3,
970 | },
971 | {
972 | id: 3,
973 | name: "Spinach",
974 | quantity: 1,
975 | unit: "bunch",
976 | category: "vegetables",
977 | key: 2,
978 | },
979 | {
980 | id: 4,
981 | name: "Milk",
982 | quantity: 10,
983 | unit: "liter",
984 | category: "dairy",
985 | key: 1,
986 | },
987 | {
988 | id: 5,
989 | name: "Cheese",
990 | quantity: 200,
991 | unit: "grams",
992 | category: "dairy",
993 | key: 0,
994 | },
995 | ]}'
996 | isPaginated="true" pageSizeOptions="{[3, 6, 12]}">
997 | <Column bindTo="name"/>
998 | <Column bindTo="quantity"/>
999 | <Column bindTo="unit"/>
1000 | </Table>
1001 | </App>
1002 | ```
1003 |
1004 | ### `pageSizeSelectorPosition` [#pagesizeselectorposition]
1005 |
1006 | Determines where to place the page size selector in the layout. It works the same as the [Pagination component property](./Pagination#pagesizeselectorposition).
1007 |
1008 | ### `paginationControlsLocation` (default: "bottom") [#paginationcontrolslocation-default-bottom]
1009 |
1010 | This property determines the location of the pagination controls. It can be set to `top`, `bottom`, or `both`.
1011 |
1012 | Available values: `top`, `bottom` **(default)**, `both`
1013 |
1014 | ### `rowDisabledPredicate` [#rowdisabledpredicate]
1015 |
1016 | 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.
1017 |
1018 | The following example disables all table rows where the item's quantity exceeds 6:
1019 |
1020 | ```xmlui copy {3}
1021 | <App>
1022 | <Table data='{[...]}'
1023 | rowDisabledPredicate="{(item) => item.quantity > 6}">
1024 | <Column bindTo="name"/>
1025 | <Column bindTo="quantity"/>
1026 | <Column bindTo="unit"/>
1027 | </Table>
1028 | </App>
1029 | ```
1030 |
1031 | >[!INFO]
1032 | > Disabled items are rendered with a different color.
1033 |
1034 | ```xmlui-pg name="Example: rowDisabledPredicate"
1035 | <App>
1036 | <Table data='{[
1037 | {
1038 | id: 0,
1039 | name: "Apples",
1040 | quantity: 5,
1041 | unit: "pieces",
1042 | category: "fruits",
1043 | key: 5,
1044 | },
1045 | {
1046 | id: 1,
1047 | name: "Bananas",
1048 | quantity: 6,
1049 | unit: "pieces",
1050 | category: "fruits",
1051 | key: 4,
1052 | },
1053 | {
1054 | id: 2,
1055 | name: "Carrots",
1056 | quantity: 100,
1057 | unit: "grams",
1058 | category: "vegetables",
1059 | key: 3,
1060 | },
1061 | {
1062 | id: 3,
1063 | name: "Spinach",
1064 | quantity: 1,
1065 | unit: "bunch",
1066 | category: "vegetables",
1067 | key: 2,
1068 | },
1069 | {
1070 | id: 4,
1071 | name: "Milk",
1072 | quantity: 10,
1073 | unit: "liter",
1074 | category: "dairy",
1075 | key: 1,
1076 | },
1077 | {
1078 | id: 5,
1079 | name: "Cheese",
1080 | quantity: 200,
1081 | unit: "grams",
1082 | category: "dairy",
1083 | key: 0,
1084 | },
1085 | ]}'
1086 | rowDisabledPredicate="{(item) => item.quantity > 6}">
1087 | <Column bindTo="name"/>
1088 | <Column bindTo="quantity"/>
1089 | <Column bindTo="unit"/>
1090 | </Table>
1091 | </App>
1092 | ```
1093 |
1094 | ### `rowsSelectable` [#rowsselectable]
1095 |
1096 | Indicates whether the rows are selectable (`true`) or not (`false`).
1097 |
1098 | The default value is `false`.
1099 |
1100 | ```xmlui copy /rowsSelectable="true"/
1101 | <App>
1102 | <Table data='{[...]}' rowsSelectable="true">
1103 | <Column bindTo="name"/>
1104 | <Column bindTo="quantity"/>
1105 | <Column bindTo="unit"/>
1106 | </Table>
1107 | </App>
1108 | ```
1109 |
1110 | ```xmlui-pg name="Example: rowsSelectable"
1111 | <App>
1112 | <Table data='{[
1113 | {
1114 | id: 0,
1115 | name: "Apples",
1116 | quantity: 5,
1117 | unit: "pieces",
1118 | category: "fruits",
1119 | key: 5,
1120 | },
1121 | {
1122 | id: 1,
1123 | name: "Bananas",
1124 | quantity: 6,
1125 | unit: "pieces",
1126 | category: "fruits",
1127 | key: 4,
1128 | },
1129 | {
1130 | id: 2,
1131 | name: "Carrots",
1132 | quantity: 100,
1133 | unit: "grams",
1134 | category: "vegetables",
1135 | key: 3,
1136 | },
1137 | {
1138 | id: 3,
1139 | name: "Spinach",
1140 | quantity: 1,
1141 | unit: "bunch",
1142 | category: "vegetables",
1143 | key: 2,
1144 | },
1145 | {
1146 | id: 4,
1147 | name: "Milk",
1148 | quantity: 10,
1149 | unit: "liter",
1150 | category: "dairy",
1151 | key: 1,
1152 | },
1153 | {
1154 | id: 5,
1155 | name: "Cheese",
1156 | quantity: 200,
1157 | unit: "grams",
1158 | category: "dairy",
1159 | key: 0,
1160 | },
1161 | ]}'
1162 | rowsSelectable="true">
1163 | <Column bindTo="name"/>
1164 | <Column bindTo="quantity"/>
1165 | <Column bindTo="unit"/>
1166 | </Table>
1167 | </App>
1168 | ```
1169 |
1170 | ### `rowUnselectablePredicate` [#rowunselectablepredicate]
1171 |
1172 | This property defines a predicate function with a return value that determines if the row should be unselectable. The function retrieves the item to display and should return a Boolean-like value. This property only has an effect when the `rowsSelectable` property is set to `true`.
1173 |
1174 | ### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
1175 |
1176 | Whether to show the current page indicator. It works the same as the [Pagination component property](./Pagination#showcurrentpage).
1177 |
1178 | ### `showPageInfo` (default: true) [#showpageinfo-default-true]
1179 |
1180 | Whether to show page information. It works the same as the [Pagination component property](./Pagination#showpageinfo).
1181 |
1182 | ### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
1183 |
1184 | Whether to show the page size selector. It works the same as the [Pagination component property](./Pagination#showpagesizeselector).
1185 |
1186 | ### `sortBy` [#sortby]
1187 |
1188 | This property is used to determine which data property to sort by. If not defined, the data is not sorted
1189 |
1190 | ```xmlui copy /sortBy="quantity"/
1191 | <App>
1192 | <Table data='{[...]}' sortBy="quantity">
1193 | <Column bindTo="name"/>
1194 | <Column bindTo="quantity"/>
1195 | <Column bindTo="unit"/>
1196 | </Table>
1197 | </App>
1198 | ```
1199 |
1200 | ```xmlui-pg name="Example: sortBy"
1201 | <App>
1202 | <Table data='{[
1203 | {
1204 | id: 0,
1205 | name: "Apples",
1206 | quantity: 5,
1207 | unit: "pieces",
1208 | category: "fruits",
1209 | key: 5,
1210 | },
1211 | {
1212 | id: 1,
1213 | name: "Bananas",
1214 | quantity: 6,
1215 | unit: "pieces",
1216 | category: "fruits",
1217 | key: 4,
1218 | },
1219 | {
1220 | id: 2,
1221 | name: "Carrots",
1222 | quantity: 100,
1223 | unit: "grams",
1224 | category: "vegetables",
1225 | key: 3,
1226 | },
1227 | {
1228 | id: 3,
1229 | name: "Spinach",
1230 | quantity: 1,
1231 | unit: "bunch",
1232 | category: "vegetables",
1233 | key: 2,
1234 | },
1235 | {
1236 | id: 4,
1237 | name: "Milk",
1238 | quantity: 10,
1239 | unit: "liter",
1240 | category: "dairy",
1241 | key: 1,
1242 | },
1243 | {
1244 | id: 5,
1245 | name: "Cheese",
1246 | quantity: 200,
1247 | unit: "grams",
1248 | category: "dairy",
1249 | key: 0,
1250 | },
1251 | ]}'
1252 | sortBy="quantity">
1253 | <Column bindTo="name"/>
1254 | <Column bindTo="quantity"/>
1255 | <Column bindTo="unit"/>
1256 | </Table>
1257 | </App>
1258 | ```
1259 |
1260 | ### `sortDirection` [#sortdirection]
1261 |
1262 | 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.
1263 |
1264 | ```xmlui copy /sortDirection="descending"/
1265 | <App>
1266 | <Table data='{[...]}' sortBy="quantity" sortDirection="descending">
1267 | <Column bindTo="name"/>
1268 | <Column bindTo="quantity"/>
1269 | <Column bindTo="unit"/>
1270 | </Table>
1271 | </App>
1272 | ```
1273 |
1274 | ```xmlui-pg name="Example: sortDirection"
1275 | <App>
1276 | <Table data='{[
1277 | {
1278 | id: 0,
1279 | name: "Apples",
1280 | quantity: 5,
1281 | unit: "pieces",
1282 | category: "fruits",
1283 | key: 5,
1284 | },
1285 | {
1286 | id: 1,
1287 | name: "Bananas",
1288 | quantity: 6,
1289 | unit: "pieces",
1290 | category: "fruits",
1291 | key: 4,
1292 | },
1293 | {
1294 | id: 2,
1295 | name: "Carrots",
1296 | quantity: 100,
1297 | unit: "grams",
1298 | category: "vegetables",
1299 | key: 3,
1300 | },
1301 | {
1302 | id: 3,
1303 | name: "Spinach",
1304 | quantity: 1,
1305 | unit: "bunch",
1306 | category: "vegetables",
1307 | key: 2,
1308 | },
1309 | {
1310 | id: 4,
1311 | name: "Milk",
1312 | quantity: 10,
1313 | unit: "liter",
1314 | category: "dairy",
1315 | key: 1,
1316 | },
1317 | {
1318 | id: 5,
1319 | name: "Cheese",
1320 | quantity: 200,
1321 | unit: "grams",
1322 | category: "dairy",
1323 | key: 0,
1324 | },
1325 | ]}'
1326 | sortBy="quantity" sortDirection="descending">
1327 | <Column bindTo="name"/>
1328 | <Column bindTo="quantity"/>
1329 | <Column bindTo="unit"/>
1330 | </Table>
1331 | </App>
1332 | ```
1333 |
1334 | ### `syncWithAppState` [#syncwithappstate]
1335 |
1336 | 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.
1337 |
1338 | ## Events [#events]
1339 |
1340 | ### `selectionDidChange` [#selectiondidchange]
1341 |
1342 | 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.
1343 |
1344 | **Signature**: `selectionDidChange(selectedItems: any[]): void`
1345 |
1346 | - `selectedItems`: An array of the selected table row items.
1347 |
1348 | Of course, if multiple-row selection is not allowed (`enableMultipleRowSelection` is false), this array will contain zero or one item.
1349 |
1350 | ```xmlui copy {4}
1351 | <App var.selection="">
1352 | <Text>Current selection (row IDs): [{selection}]</Text>
1353 | <Table data='{[...]}'
1354 | rowsSelectable="true"
1355 | enableMultiRowSelection="true"
1356 | onSelectionDidChange="(newSel) => selection = newSel.map(item => item.id).join()" >
1357 | <Column bindTo="name" canSort="true"/>
1358 | <Column bindTo="quantity" canSort="true"/>
1359 | <Column bindTo="unit" canSort="true"/>
1360 | </Table>
1361 | </App>
1362 | ```
1363 |
1364 | Click on any of the column headers to trigger a new sorting:
1365 |
1366 | ```xmlui-pg name="Example: selectionDidChange"
1367 | <App var.selection="">
1368 | <Text>Current selection (row IDs): [{selection}]</Text>
1369 | <Table data='{[
1370 | {
1371 | id: 0,
1372 | name: "Apples",
1373 | quantity: 5,
1374 | unit: "pieces",
1375 | category: "fruits",
1376 | key: 5,
1377 | },
1378 | {
1379 | id: 1,
1380 | name: "Bananas",
1381 | quantity: 6,
1382 | unit: "pieces",
1383 | category: "fruits",
1384 | key: 4,
1385 | },
1386 | {
1387 | id: 2,
1388 | name: "Carrots",
1389 | quantity: 100,
1390 | unit: "grams",
1391 | category: "vegetables",
1392 | key: 3,
1393 | },
1394 | {
1395 | id: 3,
1396 | name: "Spinach",
1397 | quantity: 1,
1398 | unit: "bunch",
1399 | category: "vegetables",
1400 | key: 2,
1401 | },
1402 | {
1403 | id: 4,
1404 | name: "Milk",
1405 | quantity: 10,
1406 | unit: "liter",
1407 | category: "dairy",
1408 | key: 1,
1409 | },
1410 | {
1411 | id: 5,
1412 | name: "Cheese",
1413 | quantity: 200,
1414 | unit: "grams",
1415 | category: "dairy",
1416 | key: 0,
1417 | },
1418 | ]}'
1419 | rowsSelectable="true"
1420 | enableMultiRowSelection="true"
1421 | onSelectionDidChange="(newSel) => selection = newSel.map(item => item.id).join()" >
1422 | <Column bindTo="name" canSort="true"/>
1423 | <Column bindTo="quantity" canSort="true"/>
1424 | <Column bindTo="unit" canSort="true"/>
1425 | </Table>
1426 | </App>
1427 | ```
1428 |
1429 | ### `sortingDidChange` [#sortingdidchange]
1430 |
1431 | 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.
1432 |
1433 | **Signature**: `sortingDidChange(columnName: string, sortDirection: 'asc' | 'desc' | null): void`
1434 |
1435 | - `columnName`: The name of the column being sorted.
1436 | - `sortDirection`: The sort direction: 'asc' for ascending, 'desc' for descending, or null for unsorted.
1437 |
1438 | Note the [`canSort`](/components/Column#cansort-default-true) properties on the `Column` components which enable custom ordering.
1439 |
1440 | ```xmlui copy {4}
1441 | <App var.sortedBy="">
1442 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1443 | <Table data='{[...]}'
1444 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1445 | <Column bindTo="name" canSort="true"/>
1446 | <Column bindTo="quantity" canSort="true"/>
1447 | <Column bindTo="unit" canSort="true"/>
1448 | </Table>
1449 | </App>
1450 | ```
1451 |
1452 | Click on any of the column headers to trigger a new sorting:
1453 |
1454 | ```xmlui-pg name="Example: sortingDidChange"
1455 | <App var.sortedBy="">
1456 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1457 | <Table data='{[
1458 | {
1459 | id: 0,
1460 | name: "Apples",
1461 | quantity: 5,
1462 | unit: "pieces",
1463 | category: "fruits",
1464 | key: 5,
1465 | },
1466 | {
1467 | id: 1,
1468 | name: "Bananas",
1469 | quantity: 6,
1470 | unit: "pieces",
1471 | category: "fruits",
1472 | key: 4,
1473 | },
1474 | {
1475 | id: 2,
1476 | name: "Carrots",
1477 | quantity: 100,
1478 | unit: "grams",
1479 | category: "vegetables",
1480 | key: 3,
1481 | },
1482 | {
1483 | id: 3,
1484 | name: "Spinach",
1485 | quantity: 1,
1486 | unit: "bunch",
1487 | category: "vegetables",
1488 | key: 2,
1489 | },
1490 | {
1491 | id: 4,
1492 | name: "Milk",
1493 | quantity: 10,
1494 | unit: "liter",
1495 | category: "dairy",
1496 | key: 1,
1497 | },
1498 | {
1499 | id: 5,
1500 | name: "Cheese",
1501 | quantity: 200,
1502 | unit: "grams",
1503 | category: "dairy",
1504 | key: 0,
1505 | },
1506 | ]}'
1507 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1508 | <Column bindTo="name" canSort="true"/>
1509 | <Column bindTo="quantity" canSort="true"/>
1510 | <Column bindTo="unit" canSort="true"/>
1511 | </Table>
1512 | </App>
1513 | ```
1514 |
1515 | ### `willSort` [#willsort]
1516 |
1517 | 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.
1518 |
1519 | **Signature**: `willSort(columnName: string, sortDirection: 'asc' | 'desc'): boolean | void`
1520 |
1521 | - `columnName`: The name of the column about to be sorted.
1522 | - `sortDirection`: The intended sort direction: 'asc' for ascending or 'desc' for descending.
1523 |
1524 | The following example uses the `willSort` event to refuse sorting by name:
1525 |
1526 | ```xmlui copy {4}
1527 | <App var.sortedBy="">
1528 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1529 | <Table data='{[...]}'
1530 | onWillSort="(by, dir) => by !== 'name'"
1531 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1532 | <Column bindTo="name" canSort="true"/>
1533 | <Column bindTo="quantity" canSort="true"/>
1534 | <Column bindTo="unit" canSort="true"/>
1535 | </Table>
1536 | </App>
1537 | ```
1538 |
1539 | Click on any of the column headers to trigger the event.
1540 | Though sorting is enabled in the `TableColumnnDef` component of the "name" column via `canSort`,
1541 | clicking that column header still does not sort because `willSort` prevents it:
1542 |
1543 | ```xmlui-pg name="Example: willSort"
1544 | <App var.sortedBy="">
1545 | <Heading level="h4" value="Table is sorted by: {sortedBy || ''}" paddingLeft="1rem"/>
1546 | <Table data='{[
1547 | {
1548 | id: 0,
1549 | name: "Apples",
1550 | quantity: 5,
1551 | unit: "pieces",
1552 | category: "fruits",
1553 | key: 5,
1554 | },
1555 | {
1556 | id: 1,
1557 | name: "Bananas",
1558 | quantity: 6,
1559 | unit: "pieces",
1560 | category: "fruits",
1561 | key: 4,
1562 | },
1563 | {
1564 | id: 2,
1565 | name: "Carrots",
1566 | quantity: 100,
1567 | unit: "grams",
1568 | category: "vegetables",
1569 | key: 3,
1570 | },
1571 | {
1572 | id: 3,
1573 | name: "Spinach",
1574 | quantity: 1,
1575 | unit: "bunch",
1576 | category: "vegetables",
1577 | key: 2,
1578 | },
1579 | {
1580 | id: 4,
1581 | name: "Milk",
1582 | quantity: 10,
1583 | unit: "liter",
1584 | category: "dairy",
1585 | key: 1,
1586 | },
1587 | {
1588 | id: 5,
1589 | name: "Cheese",
1590 | quantity: 200,
1591 | unit: "grams",
1592 | category: "dairy",
1593 | key: 0,
1594 | },
1595 | ]}'
1596 | onWillSort="(by, dir) => by !== 'name'"
1597 | onSortingDidChange="(by, dir) => sortedBy = (by && dir) ? by + ' | ' + dir : '' " >
1598 | <Column bindTo="name" canSort="true"/>
1599 | <Column bindTo="quantity" canSort="true"/>
1600 | <Column bindTo="unit" canSort="true"/>
1601 | </Table>
1602 | </App>
1603 | ```
1604 |
1605 | ## Exposed Methods [#exposed-methods]
1606 |
1607 | ### `clearSelection` [#clearselection]
1608 |
1609 | This method clears the list of currently selected table rows.
1610 |
1611 | **Signature**: `clearSelection(): void`
1612 |
1613 | ```xmlui copy /clearSelection()/ /selectId(1)/ /selectId([2, 4])/ /selectAll()/
1614 | <App>
1615 | <HStack>
1616 | <Button label="Select all" onClick="table.selectAll()" />
1617 | <Button label="Clear all" onClick="table.clearSelection()" />
1618 | <Button label="Select 1" onClick="table.selectId(1)" />
1619 | <Button label="Select 2, 4" onClick="table.selectId([2, 4])" />
1620 | </HStack>
1621 | <Table id="table" data='{[...]}'
1622 | rowsSelectable="true"
1623 | enableMultiRowSelection="true">
1624 | <Column bindTo="name" canSort="true"/>
1625 | <Column bindTo="quantity" canSort="true"/>
1626 | <Column bindTo="unit" canSort="true"/>
1627 | </Table>
1628 | </App>
1629 | ```
1630 |
1631 | ```xmlui-pg name="Example: clearSelection"
1632 | <App>
1633 | <HStack>
1634 | <Button label="Select all" onClick="table.selectAll()" />
1635 | <Button label="Clear all" onClick="table.clearSelection()" />
1636 | <Button label="Select 1" onClick="table.selectId(1)" />
1637 | <Button label="Select 2, 4" onClick="table.selectId([2, 4])" />
1638 | </HStack>
1639 | <Table id="table" data='{[
1640 | {
1641 | id: 0,
1642 | name: "Apples",
1643 | quantity: 5,
1644 | unit: "pieces",
1645 | category: "fruits",
1646 | key: 5,
1647 | },
1648 | {
1649 | id: 1,
1650 | name: "Bananas",
1651 | quantity: 6,
1652 | unit: "pieces",
1653 | category: "fruits",
1654 | key: 4,
1655 | },
1656 | {
1657 | id: 2,
1658 | name: "Carrots",
1659 | quantity: 100,
1660 | unit: "grams",
1661 | category: "vegetables",
1662 | key: 3,
1663 | },
1664 | {
1665 | id: 3,
1666 | name: "Spinach",
1667 | quantity: 1,
1668 | unit: "bunch",
1669 | category: "vegetables",
1670 | key: 2,
1671 | },
1672 | {
1673 | id: 4,
1674 | name: "Milk",
1675 | quantity: 10,
1676 | unit: "liter",
1677 | category: "dairy",
1678 | key: 1,
1679 | },
1680 | {
1681 | id: 5,
1682 | name: "Cheese",
1683 | quantity: 200,
1684 | unit: "grams",
1685 | category: "dairy",
1686 | key: 0,
1687 | },
1688 | ]}'
1689 | rowsSelectable="true"
1690 | enableMultiRowSelection="true">
1691 | <Column bindTo="name" canSort="true"/>
1692 | <Column bindTo="quantity" canSort="true"/>
1693 | <Column bindTo="unit" canSort="true"/>
1694 | </Table>
1695 | </App>
1696 | ```
1697 |
1698 | ### `getSelectedIds` [#getselectedids]
1699 |
1700 | This method returns the list of currently selected table rows IDs.
1701 |
1702 | **Signature**: `getSelectedIds(): Array<string>`
1703 |
1704 | (See the [example](#clearselection) at the `clearSelection` method)
1705 |
1706 | ### `getSelectedItems` [#getselecteditems]
1707 |
1708 | This method returns the list of currently selected table rows items.
1709 |
1710 | **Signature**: `getSelectedItems(): Array<TableRowItem>`
1711 |
1712 | (See the [example](#clearselection) at the `clearSelection` method)
1713 |
1714 | ### `selectAll` [#selectall]
1715 |
1716 | This method selects all the rows in the table. This method has no effect if the rowsSelectable property is set to `false`.
1717 |
1718 | **Signature**: `selectAll(): void`
1719 |
1720 | (See the [example](#clearselection) at the `clearSelection` method)
1721 |
1722 | ### `selectId` [#selectid]
1723 |
1724 | 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.
1725 |
1726 | **Signature**: `selectId(id: string | Array<string>): void`
1727 |
1728 | - `id`: The ID of the row to select, or an array of IDs to select multiple rows.
1729 |
1730 | (See the [example](#clearselection) at the `clearSelection` method)
1731 |
1732 | ## Parts [#parts]
1733 |
1734 | The component has some parts that can be styled through layout properties and theme variables separately:
1735 |
1736 | - **`pagination`**: The pagination controls container.
1737 | - **`table`**: The main table container.
1738 |
1739 | ## Styling [#styling]
1740 |
1741 | ### Theme Variables [#theme-variables]
1742 |
1743 | | Variable | Default Value (Light) | Default Value (Dark) |
1744 | | --- | --- | --- |
1745 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table | $color-surface-100 | $color-surface-100 |
1746 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table--active | $color-surface-300 | $color-surface-300 |
1747 | | [backgroundColor](../styles-and-themes/common-units/#color)-heading-Table--hover | $color-surface-200 | $color-surface-200 |
1748 | | [backgroundColor](../styles-and-themes/common-units/#color)-pagination-Table | $backgroundColor-Table | $backgroundColor-Table |
1749 | | [backgroundColor](../styles-and-themes/common-units/#color)-row-Table | *none* | *none* |
1750 | | [backgroundColor](../styles-and-themes/common-units/#color)-row-Table--hover | $color-primary-50 | $color-primary-50 |
1751 | | [backgroundColor](../styles-and-themes/common-units/#color)-selected-Table | $color-primary-100 | $color-primary-100 |
1752 | | [backgroundColor](../styles-and-themes/common-units/#color)-selected-Table--hover | $backgroundColor-row-Table--hover | $backgroundColor-row-Table--hover |
1753 | | [backgroundColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1754 | | [border](../styles-and-themes/common-units/#border)-cell-Table | 1px solid $borderColor | 1px solid $borderColor |
1755 | | [border](../styles-and-themes/common-units/#border)-Table | 0px solid transparent | 0px solid transparent |
1756 | | [borderBottom](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1757 | | [borderBottom](../styles-and-themes/common-units/#border)-last-row-Table | $borderBottom-cell-Table | $borderBottom-cell-Table |
1758 | | [borderBottom](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1759 | | [borderBottomColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1760 | | [borderBottomColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1761 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1762 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1763 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1764 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1765 | | [borderColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1766 | | [borderColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1767 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1768 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1769 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1770 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1771 | | [borderHorizontal](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1772 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1773 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1774 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1775 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1776 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1777 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1778 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1779 | | [borderLeft](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1780 | | [borderLeft](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1781 | | [color](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1782 | | [color](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1783 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1784 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1785 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1786 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1787 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Table | $borderRadius | $borderRadius |
1788 | | [borderRight](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1789 | | [borderRight](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1790 | | [color](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1791 | | [color](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1792 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1793 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1794 | | [borderRightWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1795 | | [borderRightWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1796 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1797 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1798 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-cell-Table | *none* | *none* |
1799 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Table | *none* | *none* |
1800 | | [borderStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1801 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1802 | | [borderTop](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1803 | | [borderTop](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1804 | | [borderTopColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1805 | | [borderTopColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1806 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1807 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1808 | | [borderTopWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1809 | | [borderTopWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1810 | | [borderHorizontal](../styles-and-themes/common-units/#border)-cell-Table | *none* | *none* |
1811 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Table | *none* | *none* |
1812 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-cell-Table | *none* | *none* |
1813 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1814 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-cell-Table | *none* | *none* |
1815 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Table | *none* | *none* |
1816 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1817 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1818 | | [borderWidth](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1819 | | [borderWidth](../styles-and-themes/common-units/#size)-Table | *none* | *none* |
1820 | | [fontSize](../styles-and-themes/common-units/#size)-heading-Table | $fontSize-tiny | $fontSize-tiny |
1821 | | [fontSize](../styles-and-themes/common-units/#size)-row-Table | $fontSize-sm | $fontSize-sm |
1822 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-heading-Table | $fontWeight-bold | $fontWeight-bold |
1823 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-row-Table | *none* | *none* |
1824 | | [outlineColor](../styles-and-themes/common-units/#color)-heading-Table--focus | $outlineColor--focus | $outlineColor--focus |
1825 | | [outlineOffset](../styles-and-themes/common-units/#size)-heading-Table--focus | $outlineOffset--focus | $outlineOffset--focus |
1826 | | [outlineStyle](../styles-and-themes/common-units/#border)-heading-Table--focus | $outlineStyle--focus | $outlineStyle--focus |
1827 | | [outlineWidth](../styles-and-themes/common-units/#size)-heading-Table--focus | $outlineWidth--focus | $outlineWidth--focus |
1828 | | [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 |
1829 | | [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 |
1830 | | [paddingBottom](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1831 | | [paddingBottom](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1832 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-first-Table | $space-5 | $space-5 |
1833 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-last-Table | $space-1 | $space-1 |
1834 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1835 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1836 | | [paddingLeft](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1837 | | [paddingLeft](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1838 | | [paddingRight](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1839 | | [paddingRight](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1840 | | [paddingTop](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1841 | | [paddingTop](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1842 | | [paddingVertical](../styles-and-themes/common-units/#size)-cell-Table | *none* | *none* |
1843 | | [paddingVertical](../styles-and-themes/common-units/#size)-heading-Table | *none* | *none* |
1844 | | [textColor](../styles-and-themes/common-units/#color)-heading-Table | $color-surface-500 | $color-surface-500 |
1845 | | [textColor](../styles-and-themes/common-units/#color)-pagination-Table | $color-secondary | $color-secondary |
1846 | | [textColor](../styles-and-themes/common-units/#color)-Table | *none* | *none* |
1847 | | [textTransform](../styles-and-themes/common-units/#textTransform)-heading-Table | uppercase | uppercase |
1848 |
```