TinyBase logoTinyBase β

TablesView

The TablesView component renders the tabular contents of a Store, and registers a listener so that any changes to that result will cause an update.

TablesView(props: TablesProps): ComponentReturnType
TypeDescription
propsTablesProps

The props for this component.

returnsComponentReturnType

A rendering of the Store, or nothing, if not present.

The component's props can identify which Store to render - either the default context Store, a named context Store, or an explicit reference.

This component renders a Store by iterating over its Table objects. By default these are in turn rendered with the TableView component, but you can override this behavior by providing a tableComponent prop, a custom component of your own that will render a Table based on TableProps. You can also pass additional props to your custom component with the getTableComponentProps callback prop.

This component uses the useTableIds primitive under the covers, which means that any changes to the structure of the Store will cause an update.

Example

import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {TablesView} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setCell('pets', 'fido', 'species', 'dog');
  const view = TablesView({store, debugIds: true});
  console.log(typeof view);
  // -> 'function'
  dispose();
});

Since

v8.3.0