`ResultRowView`

The ResultRowView component renders the contents of a single Row in a given query's ResultTable, and registers a listener so that any changes to that result will cause a re-render.

ResultRowView(props: ResultRowProps): ComponentReturnType

Type Description

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

props

ResultRowProps

The props for this component.

returns

ComponentReturnType

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

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

This component renders a Row by iterating over its Cell values. By default these are in turn rendered with the ResultCellView component, but you can override this behavior by providing a resultCellComponent prop, a custom component of your own that will render a Cell based on ResultCellProps. You can also pass additional props to your custom component with the getResultCellComponentProps callback prop.

You can create your own ResultRowView-like component to customize the way that a result Row is rendered: see the ResultTableView component for more details.

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

Examples

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

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

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

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

store.setCell('pets', 'fido', 'color', 'walnut');
console.log(app.innerHTML);
// -> '<div>dog/walnut</div>'

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

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

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

const queries = createQueries(
  createStore().setTable('pets', {
    fido: {species: 'dog', color: 'brown'},
    felix: {species: 'cat', color: 'black'},
    cujo: {species: 'dog', color: 'black'},
  }),
).setQueryDefinition('petColors', 'pets', ({select}) => {
  select('species');
  select('color');
});
const app = document.createElement('div');
createRoot(app).render(<App queries={queries} />);
console.log(app.innerHTML);
// -> '<div>fido:{species:{dog}color:{brown}}</div>'

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

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

const App = ({queries}) => (
  <Provider queries={queries}>
    <Pane />
  </Provider>
);
const getBoldProp = (cellId) => ({bold: cellId == 'species'});
const Pane = () => (
  <div>
    <ResultRowView
      queryId="petColors"
      rowId="fido"
      resultCellComponent={FormattedResultCellView}
      getResultCellComponentProps={getBoldProp}
    />
  </div>
);
const FormattedResultCellView = ({queryId, rowId, cellId, bold}) => (
  <span>
    {bold ? <b>{cellId}</b> : cellId}
    {': '}
    <ResultCellView queryId={queryId} rowId={rowId} cellId={cellId} />
  </span>
);

const queries = createQueries(
  createStore().setTable('pets', {
    fido: {species: 'dog', color: 'brown'},
    felix: {species: 'cat', color: 'black'},
    cujo: {species: 'dog', color: 'black'},
  }),
).setQueryDefinition('petColors', 'pets', ({select}) => {
  select('species');
  select('color');
});
const app = document.createElement('div');
createRoot(app).render(<App queries={queries} />);
console.log(app.innerHTML);
// -> '<div><span><b>species</b>: dog</span><span>color: brown</span></div>'

Since

v2.0.0