TinyBase logoTinyBase

ResultTableView

The ResultTableView component renders the contents of a single query's result Table in a Queries object, and registers a listener so that any changes to that result will cause a re-render.

ResultTableView(props: ResultTableProps): ComponentReturnType
TypeDescription
propsResultTableProps

The props for this component.

returnsComponentReturnType

A rendering of the result Table, or nothing, if not present.

The component's props identify which Table 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 result Table by iterating over its Row objects. By default these are in turn rendered with the ResultRowView component, but you can override this behavior by providing a resultRowComponent prop, a custom component of your own that will render a Row based on ResultRowProps. You can also pass additional props to your custom component with the getResultRowComponentProps callback prop.

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

Examples

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

const store = createStore().setTable('pets', {
  fido: {species: 'dog', color: 'brown'},
  felix: {species: 'cat', color: 'black'},
});
const queries = createQueries(store).setQueryDefinition(
  'petColors',
  'pets',
  ({select}) => select('color'),
);
const App = () => (
  <div>
    <ResultTableView queryId="petColors" queries={queries} separator="/" />
  </div>
);

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

store.setRow('pets', 'cujo', {species: 'dog', color: 'black'});
console.log(app.innerHTML);
// -> '<div>brown/black/black</div>'

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

const App = ({queries}) => (
  <Provider queries={queries}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <ResultTableView queryId="petColors" debugIds={true} />
  </div>
);

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.createElement('div');
ReactDOMClient.createRoot(app).render(<App queries={queries} />);
console.log(app.innerHTML);
// -> '<div>petColors:{fido:{color:{brown}}felix:{color:{black}}}</div>'

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

const App = ({queries}) => (
  <Provider queries={queries}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <ResultTableView
      queryId="petColors"
      resultRowComponent={FormattedRowView}
      getResultRowComponentProps={(rowId) => ({bold: rowId == 'fido'})}
    />
  </div>
);
const FormattedRowView = ({queryId, rowId, bold}) => (
  <span>
    {bold ? <b>{rowId}</b> : rowId}
    {': '}
    <ResultRowView queryId={queryId} rowId={rowId} />
  </span>
);

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.createElement('div');
ReactDOMClient.createRoot(app).render(<App queries={queries} />);
console.log(app.innerHTML);
// -> '<div><span><b>fido</b>: brown</span><span>felix: black</span></div>'

Since

v2.0.0