Using Svelte DOM Components
The reactive components in the ui-svelte-dom module let you declaratively display parts of a Store in a web browser, where Svelte's DOM runtime is available.
These are generally implementations of the components we discussed in the previous guide, but are specifically designed to render HTML table content in a browser.
Styling and class names are intentionally basic, since you are expected to style them with CSS to fit your app's overall visual language.
The easiest way to understand these components is to see them in action in the UI Components (Svelte) demos:
| Component | Purpose | |
|---|---|---|
| ValuesInHtmlTable | Renders Values. | demo |
| TableInHtmlTable | Renders a Table. | demo |
| SortedTableInHtmlTable | Renders a sorted Table, with optional interactivity. | demo |
| SliceInHtmlTable | Renders a Slice from an Index. | demo |
| RelationshipInHtmlTable | Renders the local and remote Tables of a relationship. | demo |
| ResultTableInHtmlTable | Renders a ResultTable. | demo |
| ResultSortedTableInHtmlTable | Renders a sorted ResultTable, with optional interactivity. | demo |
| EditableValueView | Renders a Value and lets you change its type/value. | demo |
| EditableCellView | Renders a Cell and lets you change its type/value. | demo |
Like ui-svelte itself, the module uses Svelte components rather than React components, so customization is done by passing component constructors, not functions that return JSX.
The demos intentionally mirror the React DOM set so it is easy to compare the framework-specific code side by side.
If you also want a development overlay for inspecting and editing Stores, Indexes, Relationships, Queries, and other TinyBase objects, use the ui-svelte-inspector module and the <Inspector /> (Svelte) demo.
This concludes the UI-focused guides. Next we move on to schemas and persistence in the Schemas guide.