TinyBase logoTinyBase

useDelCellCallback

The useDelCellCallback hook returns a callback that can be used to remove a single Cell from a Row.

useDelCellCallback(
  tableId: Id,
  rowId: Id,
  cellId: Id,
  forceDel?: boolean,
  storeOrStoreId?: any,
  then?: (store: Store) => void,
  thenDeps?: DependencyList,
): Callback
TypeDescription
tableIdId

The Id of the Table in the Store.

rowIdId

The Id of the Row in the Table.

cellIdId

The Id of the Cell in the Row.

forceDel?boolean

An optional flag to indicate that the whole Row should be deleted, even if a TablesSchema provides a default value for this Cell. Defaults to false.

storeOrStoreId?any

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?(store: Store) => void

A function which is called after the deletion, with a reference to the Store.

thenDeps?DependencyList

An optional array of dependencies for the then function, which, if any change, result in the regeneration of the callback. This parameter defaults to an empty array.

returnsCallback

A callback for subsequent use.

This hook is useful, for example, when creating an event handler that will delete data in a Store.

For convenience, you can optionally provide a then function (with its own set of dependencies) 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 deletion to your application's undo stack.

The Store to which the callback will make the deletion (indicated by the hook's storeOrStoreId parameter) is always automatically used as a hook dependency for the callback.

Example

This example uses the useDelCellCallback hook to create an event handler which deletes from the Store when the span element is clicked.

const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
const App = () => {
  const handleClick = useDelCellCallback(
    'pets',
    'nemo',
    'species',
    false,
    store,
    () => console.log('Deleted'),
  );
  return (
    <span id="span" onClick={handleClick}>
      {JSON.stringify(useTables(store))}
    </span>
  );
};

const app = document.createElement('div');
ReactDOMClient.createRoot(app).render(<App />);
const span = app.querySelector('span');
console.log(span.innerHTML);
// -> '{"pets":{"nemo":{"species":"fish"}}}'

// User clicks the <span> element:
// -> span MouseEvent('click', {bubbles: true})
// -> 'Deleted'

console.log(span.innerHTML);
// -> '{}'