<SliceInHtmlTable /> (Svelte)

In this demo, we showcase the SliceInHtmlTable component, a way to display the Slice portions of an Index.

Rather than rebuilding the whole demo from scratch, we're going back and making changes to the <TableInHtmlTable /> (Svelte) demo. Where that demo rendered a Table from a Store, this one creates an Index and displays one of its Slice objects.

Set Up

We switch the main module imports so we can create and provide an [Indexes](/api/indexes/interfaces/indexes/indexes/) object:

-import {createStore} from 'tinybase';
+import {createIndexes, createStore} from 'tinybase';

 const init = async () => {
   const store = createStore();
   await loadTable(store, 'genres');
-  mount(App, {target: document.body, props: {store}});
+  const indexes = createIndexes(store).setIndexDefinition(
+    'genresByNameLength',
+    'genres',
+    (getCell) => 'length ' + getCell('name').length,
+  );
+  mount(App, {target: document.body, props: {store, indexes}});
 };

Using the SliceInHtmlTable Component

The app body can then replace the table rendering with a single Slice from that Index:

<script>
  import {Provider} from 'tinybase/ui-svelte';
  import {SliceInHtmlTable} from 'tinybase/ui-svelte-dom';

  let {store, indexes} = $props();
</script>

<Provider {store} {indexes}>
  <SliceInHtmlTable indexId="genresByNameLength" sliceId="length 6" />
</Provider>

Next up, we can render linked local and remote Rows with the <RelationshipInHtmlTable /> (Svelte) demo.