TinyBase logoTinyBase β

RemoteRowView

The RemoteRowView component renders the remote Row Id for a given local Row in a Relationship, and registers a listener so that any changes to that result will cause an update.

RemoteRowView(props: RemoteRowProps): ComponentReturnType
TypeDescription
propsRemoteRowProps

The props for this component.

returnsComponentReturnType

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

The component's props identify which remote Row to render based on Relationship Id, local 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 remote Row is 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 useRemoteRowId primitive under the covers, which means that any changes to the remote Row Id in the Relationship will cause a update.

Example

This example creates the TinyBase objects needed by the Solid primitive or component and calls it from within a reactive root.

import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {RemoteRowView} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  RemoteRowView({
    relationshipId: 'petSpecies',
    localRowId: 'fido',
    relationships,
  });
  dispose();
});

Since

v8.3.0