`ValuesInHtmlTable`

The ValuesInHtmlTable component renders the keyed value contents of a Store as an HTML <table> element, and registers a listener so that any changes to that result will cause a re-render.

ValuesInHtmlTable(props: ValuesInHtmlTableProps & HtmlTableProps): ComponentReturnType

Type Description

	Type	Description
`props`	`ValuesInHtmlTableProps & HtmlTableProps`	The props for this component.
returns	`ComponentReturnType`	A rendering of the `Values` in a <table> element.

props

ValuesInHtmlTableProps & HtmlTableProps

The props for this component.

returns

ComponentReturnType

A rendering of the Values in a <table> element.

See the <ValuesInHtmlTable /> 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.

import {Provider} from 'tinybase/ui-react';
import React from 'react';
import {ValuesInHtmlTable} from 'tinybase/ui-react-dom';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => <ValuesInHtmlTable className="values" />;

const store = createStore().setValues({open: true, employees: 3});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// ->
`
<table class="values">
  <thead>
    <tr>
      <th>Id</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>open</th>
      <td>true</td>
    </tr>
    <tr>
      <th>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 Row with a custom Cell 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.

import {Provider, ValueView} from 'tinybase/ui-react';
import React from 'react';
import {ValuesInHtmlTable} from 'tinybase/ui-react-dom';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const getBoldProp = (valueId) => ({bold: valueId == 'open'});
const Pane = () => (
  <ValuesInHtmlTable
    valueComponent={FormattedValueView}
    getValueComponentProps={getBoldProp}
    headerRow={false}
    idColumn={false}
  />
);
const FormattedValueView = ({valueId, bold}) => (
  <>
    {bold ? <b>{valueId}</b> : valueId}
    {': '}
    <ValueView valueId={valueId} />
  </>
);

const store = createStore().setValues({open: true, employees: 3});
const app = document.createElement('div');
createRoot(app).render(<App store={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