`TablesView`

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

TablesView(props: TablesProps): ComponentReturnType

Type Description

	Type	Description
`props`	`TablesProps`	The props for this component.
returns	`ComponentReturnType`	A rendering of the `Store`, or nothing, if not present.

props

TablesProps

The props for this component.

returns

ComponentReturnType

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 hook under the covers, which means that any changes to the structure of the Store will cause a re-render.

Examples

This example creates a Store outside the application, which is used in the TablesView component by reference. A change to the data in the Store re-renders the component.

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

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const App = () => (
  <div>
    <TablesView store={store} separator="/" />
  </div>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<div>dog</div>'

store.setTable('species', {dog: {price: 5}});
console.log(app.innerHTML);
// -> '<div>dog/5</div>'

This example creates a Provider context into which a default Store is provided. The TablesView component within it then renders the Store (with Ids for readability).

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <TablesView debugIds={true} />
  </div>
);

const store = createStore().setTables({
  pets: {fido: {species: 'dog'}},
  species: {dog: {price: 5}},
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<div>pets:{fido:{species:{dog}}}species:{dog:{price:{5}}}</div>'

This example creates a Provider context into which a default Store is provided. The TablesView component within it then renders the Store with a custom Table component and a custom props callback.

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const getBoldProp = (tableId) => ({bold: tableId == 'pets'});
const Pane = () => (
  <div>
    <TablesView
      tableComponent={FormattedTableView}
      getTableComponentProps={getBoldProp}
    />
  </div>
);
const FormattedTableView = ({tableId, bold}) => (
  <span>
    {bold ? <b>{tableId}</b> : tableId}
    {': '}
    <TableView tableId={tableId} />
  </span>
);

const store = createStore().setTables({
  pets: {fido: {species: 'dog'}},
  species: {dog: {price: 5}},
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<div><span><b>pets</b>: dog</span><span>species: 5</span></div>'

Since

v1.0.0