TinyBase logoTinyBase

RowView

The RowView component renders the contents of a single Row in a given Table, and registers a listener so that any changes to that result will cause a re-render.

RowView(props: RowProps): ComponentReturnType
TypeDescription
propsRowProps

The props for this component.

returnsComponentReturnType

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

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 Row by iterating over its Cell values. By default these are in turn rendered with the CellView component, but you can override this behavior by providing a cellComponent prop, a custom component of your own that will render a Cell based on CellProps. You can also pass additional props to your custom component with the getCellComponentProps callback prop.

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

Since v4.1.0, you can use the customCellIds prop if you want to render a prescribed set of the Row's Cells in a given order. Otherwise, this component uses the useCellIds hook under the covers, which means that any changes to the structure of the Row will cause a re-render.

Examples

This example creates a Store outside the application, which is used in the RowView 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 {RowView} from 'tinybase/ui-react';

const store = createStore().setRow('pets', 'fido', {species: 'dog'});
const App = () => (
  <div>
    <RowView tableId="pets" rowId="fido" store={store} separator="/" />
  </div>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<div>dog</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 Store is provided. The RowView component within it then renders the Row for a custom set of Cell Ids (and rendered with Ids for readability).

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const customCellIds = ['color', 'species'];
const Pane = () => (
  <div>
    <RowView
      tableId="pets"
      rowId="fido"
      customCellIds={customCellIds}
      debugIds={true}
    />
  </div>
);

const store = createStore().setRow('pets', 'fido', {
  species: 'dog',
  color: 'walnut',
  legs: 4,
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<div>fido:{color:{walnut}species:{dog}}</div>'

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

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const getBoldProp = (cellId) => ({bold: cellId == 'species'});
const Pane = () => (
  <div>
    <RowView
      tableId="pets"
      rowId="fido"
      cellComponent={FormattedCellView}
      getCellComponentProps={getBoldProp}
    />
  </div>
);
const FormattedCellView = ({tableId, rowId, cellId, bold}) => (
  <span>
    {bold ? <b>{cellId}</b> : cellId}
    {': '}
    <CellView tableId={tableId} rowId={rowId} cellId={cellId} />
  </span>
);

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

Since

v1.0.0