`useAddRowCallback`

The useAddRowCallback primitive returns a parameterized callback that can be used to create a new Row in a Store.

useAddRowCallback<Parameter>(
  tableId: MaybeAccessor<string> | GetId<Parameter>,
  getRow: (parameter: Parameter, store: Store) => Row,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
  then?: (rowId: undefined | string, store: Store, row: Row) => void,
  reuseRowIds?: boolean,
): ParameterizedCallback<Parameter>

	Type	Description
`tableId`	`MaybeAccessor<string> \| GetId<Parameter>`	The `Id` of the `Table` in the `Store`, or a `GetId` function that will return it.
`getRow`	`(parameter: Parameter, store: Store) => Row`	A function which returns the `Row` object that will be used to update the `Store`, based on the parameter the callback will receive (and which is most likely a DOM event).
`storeOrStoreId?`	`MaybeAccessor<undefined \| StoreOrStoreId>`	The `Store` to be updated: omit for the default context `Store`, provide an `Id` for a named context `Store`, or provide an explicit reference.
`then?`	`(rowId: undefined \| string, store: Store, row: Row) => void`	A function which is called after the mutation, with the new `Row` `Id`, a reference to the `Store`, and the `Row` used in the update.
`reuseRowIds?`	`boolean`	Whether `Ids` should be recycled from previously deleted `Row` objects, defaulting to `true`.
returns	`ParameterizedCallback<Parameter>`	A parameterized callback for subsequent use.

This primitive is useful, for example, when creating an event handler that will mutate the data in the Store. In this case, the parameter will likely be the event, so that you can use data from it as part of the mutation.

The second parameter is a function which will produce the Row object that will then be used to update the Store in the callback.

For convenience, you can optionally provide a then function which will be called just after the Store has been updated. This is a useful place to call the addCheckpoint method, for example, if you wish to add the mutation to your application's undo stack.

The reuseRowIds parameter defaults to true, which means that if you delete a Row and then add another, the Id will be re-used - unless you delete the entire Table, in which case all Row Ids will reset. Otherwise, if you specify reuseRowIds to be false, then the Id will be a monotonically increasing string representation of an increasing integer, regardless of any you may have previously deleted.

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 {useAddRowCallback} 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');
  useAddRowCallback('pets', () => ({species: 'hamster'}), store)();
  dispose();
});

Since

v8.3.0