`LinkedRowsView`

The LinkedRowsView component renders the local Row objects for a given remote Row in a Relationship, and registers a listener so that any changes to that result will cause a re-render.

LinkedRowsView(props: LinkedRowsProps): ComponentReturnType

Type Description

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

props

LinkedRowsProps

The props for this component.

returns

ComponentReturnType

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

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

By default the local Rows are rendered with the RowView component, but you can override this behavior by providing a rowComponent prop, a custom component of your own that will render the Row based on RowProps. You can also pass additional props to your custom component with the getRowComponentProps callback prop.

This component uses the useLocalRowIds hook under the covers, which means that any changes to the local Row Ids in the Relationship will cause a re-render.

Examples

This example creates a Relationships object outside the application, which is used in the LinkedRowsView component by reference. A change to the Row Ids re-renders the component.

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

const store = createStore().setTable('pets', {
  fido: {next: 'felix'},
  felix: {next: 'cujo'},
  cujo: {species: 'dog'},
});
const relationships = createRelationships(store).setRelationshipDefinition(
  'petSequence',
  'pets',
  'pets',
  'next',
);
const App = () => (
  <div>
    <LinkedRowsView
      relationshipId="petSequence"
      firstRowId="fido"
      relationships={relationships}
      separator="/"
    />
  </div>
);

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

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

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

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

const App = ({relationships}) => (
  <Provider relationships={relationships}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <LinkedRowsView
      relationshipId="petSequence"
      firstRowId="fido"
      debugIds={true}
    />
  </div>
);

const relationships = createRelationships(
  createStore().setTable('pets', {
    fido: {next: 'felix'},
    felix: {species: 'cat'},
  }),
).setRelationshipDefinition('petSequence', 'pets', 'pets', 'next');

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App relationships={relationships} />);
console.log(app.innerHTML);
// -> '<div>fido:{fido:{next:{felix}}felix:{species:{cat}}}</div>'

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

const App = ({relationships}) => (
  <Provider relationships={relationships}>
    <Pane />
  </Provider>
);
const getBoldProp = (rowId) => ({bold: rowId == 'fido'});
const Pane = () => (
  <div>
    <LinkedRowsView
      relationshipId="petSequence"
      firstRowId="fido"
      rowComponent={FormattedRowView}
      getRowComponentProps={getBoldProp}
    />
  </div>
);
const FormattedRowView = ({store, tableId, rowId, bold}) => (
  <span>
    {bold ? <b>{rowId}</b> : rowId}
    {': '}
    <RowView store={store} tableId={tableId} rowId={rowId} />
  </span>
);

const relationships = createRelationships(
  createStore().setTable('pets', {
    fido: {next: 'felix'},
    felix: {species: 'cat'},
  }),
).setRelationshipDefinition('petSequence', 'pets', 'pets', 'next');

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App relationships={relationships} />);
console.log(app.innerHTML);
// -> '<div><span><b>fido</b>: felix</span><span>felix: cat</span></div>'

Since

v1.0.0