`ValuesInHtmlTable`

ValuesInHtmlTable(
  this: void,
  internals: Brand<"ComponentInternals">,
  props: (
    ValuesInHtmlTableProps &
    HtmlTableProps
  ),
): {
  $on?: (type: string, callback: (e: any) => void): () => void;
  $set?: (props: Partial<(
    ValuesInHtmlTableProps &
    HtmlTableProps
  )>): void;
}

	Type	Description
`this`	`void`
`internals`	`Brand<"ComponentInternals">`
`props`	`( ValuesInHtmlTableProps & HtmlTableProps )`	The props passed to the component.
returns	`{ $on?: (type: string, callback: (e: any) => void): () => void; $set?: (props: Partial<( ValuesInHtmlTableProps & HtmlTableProps )>): void; }`

See the <ValuesInHtmlTable /> (Svelte) demo for this component in action.

The component's props identify which Row to render based on Table Id, Row Id, and Store (which is either the default context Store, a named context Store, or an explicit reference).

This component renders a Store by iterating over its Value objects. By default the Values are in turn rendered with the ValueView component, but you can override this behavior by providing a valueComponent prop, a custom component of your own that will render a Value based on ValueProps. You can also pass additional props to your custom component with the getValueComponentProps callback prop.

This component uses the useValueIds hook under the covers, which means that any changes to the structure of the Values in the Store will cause a re-render.

You can use the headerRow and idColumn props to control whether labels and Ids appear in a <th> element at the top of the table, and the start of each row.

Examples

This example creates a Provider context into which a default Store is provided. The ValuesInHtmlTable component within it then renders the Values in a <table> element with a CSS class.

App.svelte

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

  export let store;
</script>

<Provider {store}>
  <ValuesInHtmlTable className="values" />
</Provider>

import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setValues({open: true, employees: 3});
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
console.log(app.innerHTML);
// ->
`
<table class="values">
  <thead>
    <tr>
      <th>Id</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th title="open">open</th>
      <td>true</td>
    </tr>
    <tr>
      <th title="employees">employees</th>
      <td>3</td>
    </tr>
  </tbody>
</table>
`;

This example creates a Provider context into which a default Store is provided. The ValuesInHtmlTable component within it then renders the Values with a custom component and a custom props callback. The header row at the top of the table and the Id column at the start of each row is removed.

FormattedValueView.svelte

<script>
  import {ValueView} from 'tinybase/ui-svelte';

  export let valueId;
  export let bold = false;
</script>

{#if bold}<b>{valueId}</b>{:else}{valueId}{/if}: <ValueView {valueId} />

App.svelte

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

  export let store;

  const getBoldProp = (valueId) => ({bold: valueId == 'open'});
</script>

<Provider {store}>
  <ValuesInHtmlTable
    valueComponent={FormattedValueView}
    getValueComponentProps={getBoldProp}
    headerRow={false}
    idColumn={false}
  />
</Provider>

import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setValues({open: true, employees: 3});
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
console.log(app.innerHTML);
// ->
`
<table>
  <tbody>
    <tr><td><b>open</b>: true</td></tr>
    <tr><td>employees: 3</td></tr>
  </tbody>
</table>
`;

Since

v4.1.0

`element`

The custom element version of the component. Only present if compiled with the customElement compiler option Read more.

`z_$$bindings`

Does not exist at runtime, for typing capabilities only. DO NOT USE Read more.