This is page 104 of 144. Use http://codebase.md/xmlui-org/xmlui/cantFindIt.jpg?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── itchy-cases-deny.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/public/pages/build-editor-component.md:
--------------------------------------------------------------------------------
```markdown
# Build a TableEditor Component
This guide walks you through building a `TableEditor` component for XMLUI, using the [Tiptap](https://tiptap.dev) editor as a foundation. It will provide a visual and Markdown-friendly way to create and edit tables for use in XMLUI-powered documentation.
> [!INFO]
> If you operate in the [XMLUI](https://github.com/xmlui-org/xmlui) repo you can test your work live. Follow the instructions in `dev-docs/next/generating-component-reference.md` to build the XMLUI docs site, then load localhost:5173. When you edit `.tsx` files they will automatically recompile, so you can iterate rapidly as you develop your component. And you can add a test page to the site in order to use your evolving component
## Step 1: Create the folder.
```bash
mkdir -p xmlui/src/components/TableEditor
```
## Step 2: Create a minimal renderer
Add `TableEditor.tsx` in that folder.
```xmlui
export function TableEditor() {
return (
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
Register it in `ComponentProvider.tsx`.
```xmlui
import { editorComponentRenderer as TableEditorRenderer }
from "./components/TableEditor/TableEditor";
if (process.env.VITE_USED_COMPONENTS_TableEditor !== "false") {
this.registerCoreComponent(TableEditorRenderer);
}
```
You can now use this XMLUI markup.
```xmlui
<App>
<TableEditor />
</App>
```
We are just rendering an HTML table at this point, with no XMLUI theme support and no editing capability.
## Step 3: Make the table editable with Tiptap
Install Tiptap dependencies.
```
npm install @tiptap/react @tiptap/starter-kit \
@tiptap/extension-table @tiptap/extension-table-row \
@tiptap/extension-table-cell @tiptap/extension-table-header
```
Update `TableEditor.tsx`.
```js filename="TableEditor.tsx" copy
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
export function TableEditor() {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
return <EditorContent editor={editor} />;
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
Use the same XMLUI markup.
```xmlui
<App>
<TableEditor />
</App>
```
You can now edit the cells in the table.
## Step 4: Add an Insert Row button
```js {41-46} copy filename="TableEditor.tsx"
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
export function TableEditor() {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
return (
<div>
<button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
>
Insert Row
</button>
<EditorContent editor={editor} />
</div>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
Use the same XMLUI markup.
```xmlui
<App>
<TableEditor />
</App>
```
You can now insert rows.
## Step 5: Use XMLUI's Button
Import and use `Button`.
```js /Button/ copy filename="TableEditor.tsx"
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
export function TableEditor() {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
return (
<div>
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
>
Insert Row
</Button>
<EditorContent editor={editor} />
</div>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
You now have a proper themed XMLUI button.
## Step 6: Show the HTML
Tiptap works natively with HTML, not Markdown. We'll eventually show Markdown but first let's add a method to show the HTML.
To keep our code modular, we'll separate the editor's rendering logic into a minimal presentational component. This makes it easy to reuse the editor UI in different contexts.
Create `TableEditorNative.tsx` alongside `TableEditor.tsx`.
```js filename="TableEditorNative.tsx" copy
import { EditorContent } from "@tiptap/react";
export function TableEditorNative({ editor }: { editor: any }) {
return <EditorContent editor={editor} />;
}
```
This component simply renders the Tiptap editor UI for a given editor instance.
Now, let's expose a method to get the current HTML from the editor. Add this to `TableEditor.tsx`.
```js filename="TableEditorNative.tsx" copy
React.useEffect(() => {
if (registerComponentApi && editor) {
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
});
}
}, [registerComponentApi, editor]);
```
Now we can show the HTML using this markup.
```xmlui
<App>
<TableEditor id="tableEditor" />
<Text> { tableEditor.getHtmlSource() } </Text>
</App>
```
## Step 7: Show the Markdown
Tiptap does not provide an HTML-to-Markdown converter. We'll start with a basic one called `turndown`. First install it.
```
npm install turndown
```
Then update `TableEditor.tsx` to use it.
```js /turndown/ {42-60} filename="TableEditor.tsx"
import React from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import TurndownService from "turndown";
export function TableEditor({ registerComponentApi }: { registerComponentApi?: (api: any) => void }) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => cell.textContent.trim());
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<div>
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
>
Insert Row
</Button>
<EditorContent editor={editor} />
</div>
);
}
export const editorComponentRenderer2 = {
type: "TableEditor",
renderer: ({ registerComponentApi, ...props }: any) => (
<TableEditor {...props} registerComponentApi={registerComponentApi} />
),
};
```
Now we can show the Markdown.
```xmlui
<App>
<TableEditor id="tableEditor" />
<Text variant="codefence" preserveLinebreaks="{true}">
{ tableEditor.getMarkdownSource() }
</Text>
</App>
```
Rendered in XMLUI Markdown:
<Image src="/resources/devdocs/xmlui-rendering-of-tiptap-markdown.png" width="200px"/>
## Step 8: Add controls
We can improve the TableEditor by adding more table editing controls like Insert Column, Delete Row, and Delete Column. But where should these controls live?
1. **TableEditorNative.tsx** (lowest level)
- Pros: Closest to the editor instance
- Cons: Not idiomatic for XMLUI; the "native" component should be minimal
2. **TableEditor.tsx** (middle level)
- Pros: Provides a good default "batteries included" experience; keeps the native component minimal; still allows advanced users to build custom controls if needed
- Cons: Slightly less flexible than fully user-defined controls
3. **User-defined component** (highest level)
- Pros: Maximum flexibility for users
- Cons: Every user has to reimplement the same basic controls; not user-friendly
We chose to implement the controls in `TableEditor.tsx` because it provides the best balance of usability and flexibility. Users get a working table editor with sensible controls out of the box, while advanced users can still build custom UIs using the exposed API if needed.
```js {71-87} filename="TableEditorNative.tsx"
import React from "react";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import { Stack } from "../Stack/StackNative";
import TurndownService from "turndown";
import { TableEditorNative } from "./TableEditorNative";
export function TableEditor({ registerComponentApi }: { registerComponentApi?: (api: any) => void }) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => (cell as HTMLElement).textContent?.trim() ?? "");
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<>
<Stack orientation="horizontal">
<Button onClick={() => editor && editor.commands.addRowAfter()} disabled={!editor}>
Insert Row
</Button>
<Button onClick={() => editor && editor.commands.deleteRow()} disabled={!editor}>
Delete Row
</Button>
<Button onClick={() => editor && editor.commands.addColumnAfter()} disabled={!editor}>
Insert Column
</Button>
<Button onClick={() => editor && editor.commands.deleteColumn()} disabled={!editor}>
Delete Column
</Button>
</Stack>
<TableEditorNative editor={editor} />
</>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: ({ registerComponentApi, ...props }: any) => (
<TableEditor {...props} registerComponentApi={registerComponentApi} />
),
};
```
We import and use `Stack` from `../Stack/StackNative`. Note that `HStack` is not available as a native component, so we can't use that shortcut.
A component must return a single element. We use a React Fragment (`<>...</>`) to group the buttons into an anonymous container.
Now we have this result.
```xmlui
<App>
<TableEditor id="tableEditor" />
<Text variant="codefence" preserveLinebreaks="{true}">
{ tableEditor.getMarkdownSource() }
</Text>
</App>
```
## Step 9: Add custom icons
The table editor buttons currently use only text labels. Let's add custom SVG icons.
```js copy
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
themeColor={themeColor}
variant={variant}
size={size}
orientation="horizontal"
>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Insert Row
</Button>
```
We'll repeat this pattern for the other buttons.
<Image src="/resources/devdocs/table-editor-07.png" width="600px"/>
## Step 10: Theme the buttons
Our TableEditor component currently uses hardcoded button styling. To make TableEditor behave like a proper XMLUI component, we need to add theme support.
Try adding different theme props to your TableEditor:
```xmlui
<TableEditor themeColor="secondary" variant="outlined" size="lg" />
```
The buttons remain blue and solid. This happens because XMLUI doesn't know which props are valid for custom components. Without proper metadata, theme attributes are filtered out.
XMLUI components need metadata to define their allowed props.
```js {12-15} /TableEditorMd/ filename="TableEditorNative.tsx"
import React from "react";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import { Stack } from "../Stack/StackNative";
import TurndownService from "turndown";
import { TableEditorNative } from "./TableEditorNative";
import { createMetadata } from "../metadata-helpers";
import { createComponentRenderer } from "../../components-core/renderers";
import { buttonThemeMd, buttonVariantMd, sizeMd } from "../abstractions";
export function TableEditor({
registerComponentApi,
themeColor = "primary",
variant = "solid",
size = "sm",
}: {
registerComponentApi?: (api: any) => void;
themeColor?: "primary" | "secondary" | "attention";
variant?: "solid" | "outlined" | "ghost";
size?: "xs" | "sm" | "md" | "lg";
}) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => (cell as HTMLElement).textContent?.trim() ?? "");
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<>
<Stack orientation="horizontal">
<Button onClick={() => editor && editor.commands.addRowAfter()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="20"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Insert Row
</Button>
<Button onClick={() => editor && editor.commands.deleteRow()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="20"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Delete Row
</Button>
<Button onClick={() => editor && editor.commands.addColumnAfter()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="24"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="5.5" y1="3.5" x2="5.5" y2="11.5" />
<line x1="9" y1="3.5" x2="9" y2="11.5" />
<line x1="19" y1="6.5" x2="19" y2="9.5" />
<line x1="17.5" y1="8" x2="20.5" y2="8" />
</svg>
Insert Column
</Button>
<Button onClick={() => editor && editor.commands.deleteColumn()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="24"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="5.5" y1="3.5" x2="5.5" y2="11.5" />
<line x1="9" y1="3.5" x2="9" y2="11.5" />
{/* Minus sign for delete */}
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Delete Column
</Button>
</Stack>
<TableEditorNative editor={editor} />
</>
);
}
export const TableEditorMd = createMetadata({
description:
"`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
status: "experimental",
props: {
themeColor: {
description: "Sets the color scheme for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonThemeMd,
defaultValue: "primary",
},
variant: {
description: "Sets the visual style for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonVariantMd,
defaultValue: "solid",
},
size: {
description: "Sets the size for all editor buttons.",
isRequired: false,
type: "string",
availableValues: sizeMd,
defaultValue: "sm",
},
},
events: {},
});
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi }) => (
<TableEditor
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
/>
),
);
```
We add the necessary imports to `TableEditor.tsx`.
```js filename="TableEditor.tsx" copy
import { createMetadata } from "../metadata-helpers";
import { createComponentRenderer } from "../../components-core/renderers";
import { buttonThemeMd, buttonVariantMd, sizeMd } from "../abstractions";
```
We modify the TableEditor function to accept theme props.
```js filename="TableEditor.tsx" copy
export function TableEditor({
registerComponentApi,
themeColor = "primary",
variant = "solid",
size = "sm",
}: {
registerComponentApi?: (api: any) => void;
themeColor?: "primary" | "secondary" | "attention";
variant?: "solid" | "outlined" | "ghost";
size?: "xs" | "sm" | "md" | "lg";
}) {
// ... existing logic
}
```
We forward these props to all Button components.
```js copy
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
themeColor={themeColor}
variant={variant}
size={size}
>
Insert Row
</Button>
```
We add metadata that defines the allowed props:
```js copy filename="TableEditor.tsx"
export const TableEditorMd = createMetadata({
description:
"`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
status: "stable",
props: {
themeColor: {
description: "Sets the color scheme for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonThemeMd,
defaultValue: "primary",
},
variant: {
description: "Sets the visual style for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonVariantMd,
defaultValue: "solid",
},
size: {
description: "Sets the size for all editor buttons.",
isRequired: false,
type: "string",
availableValues: sizeMd,
defaultValue: "sm",
},
},
events: {},
});
```
We replace the simple renderer with a proper one that uses metadata:
```js filename="TableEditor.tsx" copy
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi }) => {
return (
<TableEditor
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
/>
);
},
);
```
Now TableEditor supports full theme customization.
```xmlui copy
<TableEditor
id="tableEditor"
/>
<TableEditor
id="tableEditor2"
themeColor="primary"
size="lg"
variant="outlined"
/>
<TableEditor
id="tableEditor3"
themeColor="attention"
variant="ghost"
size="sm"
/>
```
<Image src="/resources/devdocs/table_editor_08.png" />
## Step 11: Register the icons
> [!INFO]
> Registering icons is optional if you only use them inline within your component, but it is strongly recommended for reusability, maintainability, and accessibility.
**Global usage.** Registered icons can be referenced anywhere in your app or docs by name (e.g., `<Icon name="table-insert-row" />` or as a Button's `icon` prop).
**Accessibility.** Using the `<Icon />` component or Button's `icon` prop helps ensure ARIA attributes and accessible labeling are handled consistently.
To make your custom icon usable in XMLUI, wrap your SVG markup in a React component. This allows the icon to inherit color, size, and accessibility props from its parent.
```js copy
// File: xmlui/src/components/Icon/TableInsertRowIcon.tsx
import React from "react";
export default function TableInsertRowIcon(props) {
return (
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
{...props} // Enables theming, sizing, and accessibility
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
);
}
```
> [!INFO]
> The `{...props}` spread is essential—it lets XMLUI pass color, size, and ARIA attributes to your icon automatically.
Register the icon in `IconProvider.tsx`.
```js filename="IconProvider.tsx"
import TableInsertRowIcon from "./Icon/TableInsertRowIcon";
registerIconRenderer("table-insert-row", (props) => <TableInsertRowIcon {...props} />);
```
Update `TableEditor.tsx`.
```js /<Icon/ filename="TableEditor.tsx"
import React from "react";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import { Stack } from "../Stack/StackNative";
import TurndownService from "turndown";
import { TableEditorNative2 } from "./TableEditorNative2";
import { createMetadata } from "../metadata-helpers";
import { createComponentRenderer } from "../../components-core/renderers";
import { buttonThemeMd, buttonVariantMd, sizeMd } from "../abstractions";
import Icon from "../Icon/IconNative";
export function TableEditor({
registerComponentApi,
themeColor = "primary",
variant = "solid",
size = "sm",
}: {
registerComponentApi?: (api: any) => void;
themeColor?: "primary" | "secondary" | "attention";
variant?: "solid" | "outlined" | "ghost";
size?: "xs" | "sm" | "md" | "lg";
}) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => (cell as HTMLElement).textContent?.trim() ?? "");
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<>
<Stack orientation="horizontal">
<Button onClick={() => editor && editor.commands.addRowAfter()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-insert-row" aria-hidden />} contextualLabel="Insert Row"
>
Insert Row
</Button>
<Button onClick={() => editor && editor.commands.deleteRow()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-delete-row" aria-hidden />} contextualLabel="Delete Row">
Delete Row
</Button>
<Button onClick={() => editor && editor.commands.addColumnAfter()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-insert-column" aria-hidden />} contextualLabel="Insert Column">
Insert Column
</Button>
<Button onClick={() => editor && editor.commands.deleteColumn()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-delete-column" aria-hidden />} contextualLabel="Delete Column">
Delete Column
</Button>
</Stack>
<TableEditorNative2 editor={editor} />
</>
);
}
export const TableEditorMd = createMetadata({
description:
"`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
status: "experimental",
props: {
themeColor: {
description: "Sets the color scheme for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonThemeMd,
defaultValue: "primary",
},
variant: {
description: "Sets the visual style for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonVariantMd,
defaultValue: "solid",
},
size: {
description: "Sets the size for all editor buttons.",
isRequired: false,
type: "string",
availableValues: sizeMd,
defaultValue: "sm",
},
},
events: {},
});
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi }) => (
<TableEditor2
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
/>
),
);
```
For icon-only buttons, use the `contextualLabel` prop to provide an accessible name.
```xmlui
<Button icon="table-insert-row" contextualLabel="Insert a new row" />
```
This ensures screen readers announce the button's purpose, even if only the icon is visible.
For decorative icons, use `aria-hidden="true"` to hide the icon from assistive technology.
```xmlui
<Icon name="table-insert-row" aria-hidden="true" />
```
## Step 12: Make the Markdown reactive
We want the Markdown display to update when changes happen in the editor. Make this change in `TableEditor.tsx`.
```js {6} {8-13} filename="TableEditor.tsx"
React.useEffect(() => {
if (!editor) return;
const handler = () => {
const html = editor.getHTML();
const markdown = turndownService.turndown(html);
onDidChange({ html, markdown });
};
editor.on("update", handler);
// Emit once on mount
handler();
return () => {
editor.off("update", handler);
};
}, [editor, onDidChange]);
```
Replace `events: {}` with this snippet.
```js
events: {
didChange: {
description: "Fired whenever the table content changes. Payload: { html, markdown }.",
isRequired: false,
type: "function",
},
},
```
And do this.
```js {4-5} {12} copy
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi, lookupEventHandler }) => {
const handler = lookupEventHandler?.("didChange");
return (
<TableEditor
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
onDidChange={handler}
/>
);
},
)
```
Now the Markdown updates as you change the table.
<Image src="/resources/devdocs/table_editor_09.png" />
## Step 13: Style the editor
We'll want to control the editor's style with XMLUI theme variables, but first let's add basic styling in `TableEditor.module.scss`.
```css filename="TableEditor.module.css" copy
.table-editor-root {
padding: 8px;
overflow-x: auto;
}
.ProseMirror {
outline: none;
white-space: pre-wrap;
word-break: break-word;
min-height: 100px;
}
.ProseMirror table {
border-collapse: collapse;
}
.ProseMirror th,
.ProseMirror td {
border: 1px solid #ccc;
padding: 4px;
}
.button-stack {
margin-bottom: 16px;
}
```
Use the styles in `TableEditor.tsx`.
```js filename="TableEditor.tsx"
return (
<div className="table-editor-root">
<div className="button-stack">
<Stack orientation="horizontal">
...
</Stack>
</div>
<TableEditorNative editor={editor} />
</div>
);
```
Use this XMLUI markup.
```xmlui
<App var.markdown="">
<Card>
<TableEditor
id="tableEditor"
size="xs"
onDidChange="{(e) => { markdown = e.markdown }}"
/>
</Card>
<Card>
<Text variant="codefence" preserverLinebreaks="{true}">
{ markdown }
</Text>
</Card>
</App>
```
Here is the result.
<Image src="/resources/devdocs/table_editor_10.png" />
## Step 14: Theme the editor
Now let's make `TableEditor` visually consistent with [Table](/components/Table) by reusing XMLUI theme variables for header, cell, and spacing styles. Here is the new `TableEditor.module.css`.
```scss filename="TableEditor.module.css" copy
@use "../../components-core/theming/themes" as t;
$componentName: "TableEditor";
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
// Reuse Table theme variables
$backgroundColorHeadingTable: createThemeVar("backgroundColor-heading-Table");
$borderCellTable: createThemeVar("border-cell-Table");
$fontSizeHeadingTable: createThemeVar("fontSize-heading-Table");
$fontWeightHeadingTable: createThemeVar("fontWeight-heading-Table");
$fontSizeRowTable: createThemeVar("fontSize-row-Table");
$fontWeightRowTable: createThemeVar("fontWeight-row-Table");
$paddingCellTable: createThemeVar("padding-cell-Table");
$paddingHeadingTable: createThemeVar("padding-heading-Table");
$textColorHeadingTable: createThemeVar("textColor-heading-Table");
$textColorPaginationTable: createThemeVar("textColor-pagination-Table");
$buttonStackSpacing: createThemeVar("spacing-buttonStack-Table");
$textTransformHeadingTable: createThemeVar("textTransform-heading-Table");
$tableMarginTop: t.$space-4;
$paddingHtmlTd: createThemeVar("padding-HtmlTd");
$paddingHtmlTh: createThemeVar("padding-HtmlTh");
.editor {
:global(.ProseMirror) {
outline: none;
white-space: pre-wrap;
word-break: break-word;
min-height: 100px;
table {
border-collapse: collapse;
margin-top: $tableMarginTop;
}
th {
background-color: $backgroundColorHeadingTable;
font-size: $fontSizeHeadingTable;
font-weight: $fontWeightHeadingTable;
padding: $paddingHtmlTh;
color: $textColorHeadingTable;
text-transform: $textTransformHeadingTable;
}
td {
font-size: $fontSizeRowTable;
font-weight: $fontWeightRowTable;
padding: $paddingHtmlTd;
border: $borderCellTable;
}
}
}
.button-stack {
margin-bottom: $buttonStackSpacing;
}
.table-editor-root {
padding: 8px;
overflow-x: auto;
}
.pagination {
color: $textColorPaginationTable;
}
:export {
themeVars: t.json-stringify($themeVars);
}
```
Now the editor matches the look of XMLUI tables rendered directly using `Table` or indirectly when tables appear in a XMLUI `Markdown` context. Try it!
```xmlui-pg display noHeader
<App var.markdown="">
<Card>
<TableEditor
id="tableEditor"
size="xs"
onDidChange="{(e) => { markdown = e.markdown }}"
/>
</Card>
<Card>
<HStack>
<Text variant="codefence" preserveLinebreaks="{true}">
{ markdown }
</Text>
<SpaceFiller />
<Button
icon="copy"
variant="ghost"
size="xs"
onClick="navigator.clipboard.writeText(markdown)"
/>
</HStack>
</Card>
</App>
```
<!--
<Image src="/resources/devdocs/table_editor_11.png" />
-->
```
--------------------------------------------------------------------------------
/xmlui/src/components/Table/Table.spec.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Table Component End-to-End Tests
*
* This test suite provides comprehensive coverage for the Table component following
* XMLUI testing conventions. The tests validate all documented properties, events,
* accessibility features, and edge cases.
*
* Test Results Summary:
* - ✅ 25 tests passing
* - ⏭️ 6 tests skipped (require additional implementation investigation)
*
* Key Testing Insights:
* - Use HTML element selectors (th, td, table) rather than role-based selectors
* - Add .first() to avoid strict mode violations when multiple elements match
* - Some features like selection checkboxes exist but are hidden via CSS
* - Loading states, sorting, and pagination may use different implementations than expected
*
* Skipped Tests (for future investigation):
* 1. Loading property visual indicators
* 2. Row selection interaction (checkboxes are hidden)
* 3. Sorting functionality behavior
* 4. Pagination control identification
* 5. Theme variable CSS property testing
*/
import { expect, test } from "../../testing/fixtures";
import { SKIP_REASON } from "../../testing/component-test-helpers";
// Sample data for testing
const sampleData = [
{ id: 1, name: "Apple", quantity: 5, category: "Fruit" },
{ id: 2, name: "Banana", quantity: 3, category: "Fruit" },
{ id: 3, name: "Carrot", quantity: 10, category: "Vegetable" },
{ id: 4, name: "Spinach", quantity: 2, category: "Vegetable" },
];
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.describe("Basic Functionality", () => {
test("renders with basic data and columns", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
<Column bindTo="category" header="Category"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
// Check for actual HTML table elements
const htmlTable = page.locator("table");
await expect(htmlTable).toBeVisible();
// Check headers are present
const headers = page.locator("th");
await expect(headers).toHaveCount(3); // Should have 3 headers
// Check header text content
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
await expect(headers.nth(2)).toContainText("Category");
// Check data content - use first() to avoid strict mode violations
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Fruit" }).first()).toBeVisible();
});
test("renders with empty data array", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
// Headers should still be visible
const headers = page.locator("th");
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
});
test.describe("data property", () => {
test("displays data with different value types", async ({ initTestBed, page }) => {
const mixedData = [
{ id: 1, name: "Test", number: 42, boolean: true, nullValue: null },
{ id: 2, name: "Another", number: 0, boolean: false, nullValue: undefined },
];
await initTestBed(`
<Table data='{${JSON.stringify(mixedData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="number"/>
<Column bindTo="boolean"/>
<Column bindTo="nullValue"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Test" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "42" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "true" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "0" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "false" }).first()).toBeVisible();
});
test("handles null data gracefully", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{null}' testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
});
test("handles undefined data gracefully", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{undefined}' testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
});
});
test.describe("items property", () => {
test("items property works as alias for data", async ({ initTestBed, page }) => {
await initTestBed(`
<Table items='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
});
test("items takes priority over data when both are provided", async ({ initTestBed, page }) => {
const itemsData = [{ id: 1, name: "Items Data" }];
const dataProperty = [{ id: 1, name: "Data Property" }];
await initTestBed(`
<Table
items='{${JSON.stringify(itemsData)}}'
data='{${JSON.stringify(dataProperty)}}'
testId="table"
>
<Column bindTo="name"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Items Data" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Data Property" })).toHaveCount(0);
});
});
test.describe("hideHeader property", () => {
test("hides header when hideHeader is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' hideHeader="true" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Header should not be visible
await expect(page.locator("th")).toHaveCount(0);
// Data should still be visible
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
});
test("shows header when hideHeader is false", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' hideHeader="false" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
const headers = page.locator("th");
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
});
});
test.describe("noBottomBorder property", () => {
test("removes bottom border when noBottomBorder is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' noBottomBorder="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
// Note: Visual border testing would require specific CSS assertions
});
});
test.describe("rowsSelectable property", () => {
test("enables row selection when rowsSelectable is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
// Selection checkboxes should be present - they exist but might be hidden via CSS
const checkboxes = page.locator("input[type='checkbox']");
await expect(checkboxes).toHaveCount(5); // 4 data rows + 1 header checkbox
});
test("disables row selection when rowsSelectable is false", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="false" testId="table">
<Column bindTo="name"/>
</Table>
`);
// No selection checkboxes should be present
const checkboxes = page.locator("input[type='checkbox']");
await expect(checkboxes).toHaveCount(0);
});
});
test.describe("autoFocus property", () => {
test("focuses table when autoFocus is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' autoFocus="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeFocused();
});
});
test.describe("checkboxTolerance property", () => {
test("allows checkbox interaction within compact tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="compact"
onSelectionDidChange="testState = 'selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// Click near the left edge of the row (where checkbox would be with tolerance)
// This simulates clicking within the 8px compact tolerance of the checkbox
const clickX = rowBounds.x + 15; // Slightly to the right of where checkbox would be
const clickY = rowBounds.y + rowBounds.height / 2;
// Click within tolerance boundary should trigger selection due to checkboxTolerance="compact"
await page.mouse.click(clickX, clickY);
// Verify checkbox is now checked (using force since it's hidden)
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('selection changed');
});
test("allows header checkbox interaction within compact tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="compact"
onSelectionDidChange="testState = 'header selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// Click near the left edge of the header row (where checkbox would be with tolerance)
// This simulates clicking within the 8px compact tolerance of the header checkbox
const clickX = headerBounds.x + 15; // Slightly to the right of where checkbox would be
const clickY = headerBounds.y + headerBounds.height / 2;
// Click within tolerance boundary should trigger "select all" due to checkboxTolerance="compact"
await page.mouse.click(clickX, clickY);
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header selection changed');
});
test("allows checkbox interaction within none tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="none"
onSelectionDidChange="testState = 'none selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// For "none" tolerance, we need to click precisely on the checkbox
// Since checkboxes are hidden, click on their expected position
await firstRowCheckbox.click({ force: true });
// Verify checkbox is now checked
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('none selection changed');
});
test("allows header checkbox interaction within none tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="none"
onSelectionDidChange="testState = 'header none selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// For "none" tolerance, we need to click precisely on the checkbox
// Since checkboxes are hidden, click on their expected position
await headerCheckbox.click({ force: true });
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header none selection changed');
});
test("allows checkbox interaction within comfortable tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="comfortable"
onSelectionDidChange="testState = 'comfortable selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// Click near the left edge of the row (where checkbox would be with tolerance)
// This simulates clicking within the 12px comfortable tolerance of the checkbox
const clickX = rowBounds.x + 20; // Further right to test 12px tolerance
const clickY = rowBounds.y + rowBounds.height / 2;
// Click within tolerance boundary should trigger selection due to checkboxTolerance="comfortable"
await page.mouse.click(clickX, clickY);
// Verify checkbox is now checked
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('comfortable selection changed');
});
test("allows header checkbox interaction within comfortable tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="comfortable"
onSelectionDidChange="testState = 'header comfortable selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// Click near the left edge of the header row (where checkbox would be with tolerance)
// This simulates clicking within the 12px comfortable tolerance of the header checkbox
const clickX = headerBounds.x + 20; // Further right to test 12px tolerance
const clickY = headerBounds.y + headerBounds.height / 2;
// Click within tolerance boundary should trigger "select all" due to checkboxTolerance="comfortable"
await page.mouse.click(clickX, clickY);
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header comfortable selection changed');
});
test("allows checkbox interaction within spacious tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="spacious"
onSelectionDidChange="testState = 'spacious selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// Click near the left edge of the row (where checkbox would be with tolerance)
// This simulates clicking within the 16px spacious tolerance of the checkbox
const clickX = rowBounds.x + 24; // Even further right to test 16px tolerance
const clickY = rowBounds.y + rowBounds.height / 2;
// Click within tolerance boundary should trigger selection due to checkboxTolerance="spacious"
await page.mouse.click(clickX, clickY);
// Verify checkbox is now checked
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('spacious selection changed');
});
test("allows header checkbox interaction within spacious tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="spacious"
onSelectionDidChange="testState = 'header spacious selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// Click near the left edge of the header row (where checkbox would be with tolerance)
// This simulates clicking within the 16px spacious tolerance of the header checkbox
const clickX = headerBounds.x + 24; // Even further right to test 16px tolerance
const clickY = headerBounds.y + headerBounds.height / 2;
// Click within tolerance boundary should trigger "select all" due to checkboxTolerance="spacious"
await page.mouse.click(clickX, clickY);
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header spacious selection changed');
});
});
test.describe("noDataTemplate property", () => {
test("shows custom no data template when data is empty", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' testId="table">
<Column bindTo="name"/>
<property name="noDataTemplate">
<Text>No items found</Text>
</property>
</Table>
`);
await expect(page.getByText("No items found")).toBeVisible();
});
test("hides no data view when noDataTemplate is empty string", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' noDataTemplate="" testId="table">
<Column bindTo="name"/>
</Table>
`);
// Should not show default no data message
await expect(page.getByText(/no data/i)).not.toBeVisible();
});
test("hides no data view when noDataTemplate is null", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' noDataTemplate="{null}" testId="table">
<Column bindTo="name"/>
</Table>
`);
// Should not show default no data message
await expect(page.getByText(/no data/i)).not.toBeVisible();
});
});
});
// =============================================================================
// TESTS FOR FEATURES THAT NEED INVESTIGATION
// =============================================================================
test.describe("Features Needing Investigation", () => {
test("loading property shows loading state",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table loading="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
await expect(page.getByRole("status").and(page.getByLabel("Loading"))).toBeVisible();
}
);
test("row selection works with checkboxes",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
testId="table"
>
<Column bindTo="name"/>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
await checkboxes.nth(1).check({ force: true }); // First data row
await checkboxes.nth(2).check({ force: true }); // Second data row
await expect(checkboxes.nth(1)).toBeChecked();
await expect(checkboxes.nth(2)).toBeChecked();
}
);
test("sorting works correctly with descending order",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
sortBy="name"
sortDirection="descending"
testId="table"
>
<Column bindTo="name" canSort="true"/>
</Table>
`);
const cells = page.locator("td");
// Should be sorted reverse alphabetically: Spinach, Carrot, Banana, Apple
await expect(cells.nth(0)).toHaveText("Spinach");
await expect(cells.nth(1)).toHaveText("Carrot");
}
);
test("sorting works correctly with ascending order",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
sortBy="quantity"
sortDirection="ascending"
testId="table"
>
<Column bindTo="quantity" canSort="true"/>
</Table>
`);
const cells = page.locator("td");
// Should be sorted in ascending order: 2, 3, 5, 10
await expect(cells.nth(0)).toHaveText("2");
await expect(cells.nth(1)).toHaveText("3");
await expect(cells.nth(2)).toHaveText("5");
await expect(cells.nth(3)).toHaveText("10");
}
);
test("pagination works correctly",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
isPaginated="true"
testId="table"
>
<Column bindTo="name"/>
</Table>
`);
await expect(page.locator("button[aria-label*='Previous page']")).toBeVisible();
await expect(page.locator("button[aria-label*='Next page']")).toBeVisible();
}
);
});
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
test.describe("Accessibility", () => {
test("has correct table structure", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check proper table semantics
await expect(page.locator("table")).toBeVisible();
await expect(page.locator("th")).toHaveCount(2); // 2 headers
await expect(page.locator("tr")).toHaveCount(5); // 1 header + 4 data rows
});
test("column headers are focusable and have proper structure", async ({
initTestBed,
page
}) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name" canSort="true"/>
<Column bindTo="quantity" header="Quantity" canSort="true"/>
</Table>
`);
const headers = page.locator("th");
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
});
test("selection checkboxes have proper accessibility when enabled", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
// All checkboxes should have proper type
await expect(checkboxes.first()).toHaveAttribute("type", "checkbox");
// Should have expected count
await expect(checkboxes).toHaveCount(5); // 4 data rows + 1 header
});
test("has proper headers for screen readers", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Product Name"/>
<Column bindTo="quantity" header="Stock Quantity"/>
</Table>
`);
// Column headers should have descriptive names
await expect(page.locator("th").filter({ hasText: "Product Name" })).toBeVisible();
await expect(page.locator("th").filter({ hasText: "Stock Quantity" })).toBeVisible();
});
});
// =============================================================================
// EDGE CASE TESTS
// =============================================================================
test.describe("Edge Cases", () => {
test("handles no props gracefully", async ({ initTestBed, page }) => {
await initTestBed(`<Table testId="table"/>`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
});
test("handles data with missing properties", async ({ initTestBed, page }) => {
const incompleteData = [
{ name: "Apple" }, // missing quantity
{ quantity: 5 }, // missing name
{}, // missing both
];
await initTestBed(`
<Table data='{${JSON.stringify(incompleteData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
await expect(page.getByTestId("table")).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
});
test("handles deeply nested object properties", async ({ initTestBed, page }) => {
const nestedData = [
{
user: {
profile: {
name: "John Doe"
}
}
},
];
await initTestBed(`
<Table data='{${JSON.stringify(nestedData)}}' testId="table">
<Column bindTo="user.profile.name" header="Name"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "John Doe" }).first()).toBeVisible();
});
test("handles special characters in data", async ({ initTestBed, page }) => {
const specialData = [
{ name: "Special: 🎉", symbol: "★" },
{ name: "Unicode: 你好", symbol: "⚡" },
{ name: "Emoji: 👨👩👧👦", symbol: "🔥" },
];
await initTestBed(`
<Table data='{${JSON.stringify(specialData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="symbol"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Special: 🎉" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Unicode: 你好" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Emoji: 👨👩👧👦" }).first()).toBeVisible();
});
test("handles custom sorting icons", async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
iconNoSort="sort"
iconSortAsc="sort-up"
iconSortDesc="sort-down"
testId="table"
>
<Column bindTo="name" canSort="true" header="Name"/>
</Table>
`);
const headers = page.locator("th");
await expect(headers.first()).toContainText("Name");
});
test("row checkboxes work when data array contains items with 'id' property",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table testId="table" rowsSelectable="true" data="{[
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]}">
<Column bindTo="id" width="80px">
<Text>{$item.id}</Text>
</Column>
<Column bindTo="name">
<Text>{$item.name}</Text>
</Column>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
await checkboxes.nth(1).check({ force: true }); // First data row
await expect(checkboxes.nth(1)).toBeChecked();
await expect(checkboxes.nth(2)).not.toBeChecked(); // Second data row
}
);
test("row checkboxes work when 'dataIdProperty' property is specified",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table testId="table" rowsSelectable="true"
dataIdProperty="account_id"
data="{[
{ account_id: 1, name: 'Item 1' },
{ account_id: 2, name: 'Item 2' }
]}">
<Column bindTo="account_id" width="80px">
<Text>{$item.account_id}</Text>
</Column>
<Column bindTo="name">
<Text>{$item.name}</Text>
</Column>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
await checkboxes.nth(1).check({ force: true }); // First data row
await expect(checkboxes.nth(1)).toBeChecked();
await expect(checkboxes.nth(2)).not.toBeChecked(); // Second data row
}
);
test("row checkboxes work when no 'dataIdProperty' prop and no 'id' in data items",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table testId="table" rowsSelectable="true"
data="{[
{ account_id: 1, name: 'Item 1' },
{ account_id: 2, name: 'Item 2' }
]}">
<Column bindTo="account_id" width="80px">
<Text>{$item.account_id}</Text>
</Column>
<Column bindTo="name">
<Text>{$item.name}</Text>
</Column>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
await checkboxes.nth(1).check({ force: true }); // First data row
await expect(checkboxes.nth(1)).toBeChecked();
await expect(checkboxes.nth(2)).not.toBeChecked(); // Second data row
}
);
});
// =============================================================================
// THEME AND STYLING TESTS
// =============================================================================
// TODO: Need more theme variable tests!
test.describe("Theme Variables and Styling", () => {
test("applies heading background color theme variable",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
</Table>
`, {
testThemeVars: { "backgroundColor-heading-Table": "rgb(255, 0, 0)" },
});
const header = page.locator("th").first();
await expect(header).toHaveCSS("background-color", "rgb(255, 0, 0)");
}
);
});
// =============================================================================
// CELL VERTICAL ALIGNMENT TESTS
// =============================================================================
test.describe("Cell Vertical Alignment", () => {
test("applies center alignment by default", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have center alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignCenter/);
// Check data cells have center alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignCenter/);
});
test("applies top alignment when cellVerticalAlign='top'", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have top alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignTop/);
// Check data cells have top alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignTop/);
});
test("applies bottom alignment when cellVerticalAlign='bottom'", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="bottom" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have bottom alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignBottom/);
// Check data cells have bottom alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignBottom/);
});
test("applies center alignment when cellVerticalAlign='center'", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="center" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have center alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignCenter/);
// Check data cells have center alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignCenter/);
});
test("applies alignment to all cells consistently", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
<Column bindTo="category" header="Category"/>
</Table>
`);
// Check all header cells have the same alignment
const headerCells = page.locator("th");
const headerCount = await headerCells.count();
for (let i = 0; i < headerCount; i++) {
await expect(headerCells.nth(i)).toHaveClass(/alignTop/);
}
// Check all data cells have the same alignment
const dataCells = page.locator("td");
const dataCount = await dataCells.count();
for (let i = 0; i < dataCount; i++) {
await expect(dataCells.nth(i)).toHaveClass(/alignTop/);
}
});
});
```
