`ResultTableInHtmlTable`

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

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

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

The component's props identify which ResultTable to render based on query Id, and Queries object (which is either the default context Queries object, a named context Queries object, or by explicit reference).

This component renders a ResultTable by iterating over its Row objects. By default the Cells are in turn rendered with the CellView component, but you can override this behavior by providing a component for each Cell in the customCells prop. You can pass additional props to that custom component with the getComponentProps callback. See the ResultCustomCell type for more details.

This component uses the useRowIds hook under the covers, which means that any changes to the structure of the Table will cause a re-render.

You can use the headerRow and idColumn props to control whether the 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 Queries object is provided. The ResultTableInHtmlTable component within it then renders the ResultTable in a <table> element with a CSS class.

App.svelte

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

  export let queries;
</script>

<Provider {queries}>
  <ResultTableInHtmlTable queryId="petColors" className="table" />
</Provider>

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

const queries = createQueries(
  createStore().setTable('pets', {
    fido: {species: 'dog', color: 'brown'},
    felix: {species: 'cat', color: 'black'},
  }),
).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
console.log(app.innerHTML);
// ->
`
<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th title="fido">fido</th>
      <td>brown</td>
    </tr>
    <tr>
      <th title="felix">felix</th>
      <td>black</td>
    </tr>
  </tbody>
</table>
`;

This example creates a Provider context into which a default Queries object is provided. The ResultTableInHtmlTable component within it then renders the ResultTable with a custom component and a custom props callback for the color Cell. The header row at the top of the table and the Id column at the start of each row is removed.

FormattedResultCellView.svelte

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

  export let queryId;
  export let rowId;
  export let cellId;
  export let bold = false;
</script>

{#if bold}<b>{rowId}</b>{:else}{rowId}{/if}:<ResultCellView
  {queryId}
  {rowId}
  {cellId}
/>

App.svelte

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

  export let queries;

  const customCells = {
    color: {
      component: FormattedResultCellView,
      getComponentProps: (rowId) => ({bold: rowId == 'fido'}),
    },
  };
</script>

<Provider {queries}>
  <ResultTableInHtmlTable
    queryId="petColors"
    {customCells}
    headerRow={false}
    idColumn={false}
  />
</Provider>

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

const queries = createQueries(
  createStore().setTable('pets', {
    fido: {species: 'dog', color: 'brown'},
    felix: {species: 'cat', color: 'black'},
  }),
).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
console.log(app.innerHTML);
// ->
`
<table>
  <tbody>
    <tr>
      <td><b>fido</b>:brown</td>
    </tr>
    <tr>
      <td>felix:black</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.