`CellView`

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

CellView(props: CellProps): ComponentReturnType

Type Description

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

props

CellProps

The props for this component.

returns

ComponentReturnType

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

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

A Cell contains a string, number, or boolean, so the value is rendered directly without further decoration. You can create your own CellView-like component to customize the way that a Cell is rendered: see the RowView component for more details.

This component uses the useCell hook under the covers, which means that any changes to the specified Cell will cause a re-render.

Examples

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

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

const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const App = () => (
  <span>
    <CellView tableId="pets" rowId="fido" cellId="color" store={store} />
  </span>
);

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

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

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

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>
    <CellView tableId="pets" rowId="fido" cellId="color" debugIds={true} />
  </span>
);

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

This example creates a Provider context into which a default Store is provided. The CellView component within it then attempts to render a non-existent Cell.

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>
    <CellView tableId="pets" rowId="fido" cellId="height" />
  </span>
);

const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<span></span>'

Since

v1.0.0