Skip to content

v4.5.5

Choose a tag to compare

@jamesgpearce jamesgpearce released this 05 Dec 17:49
· 1798 commits to main since this release

This release enhances the data-setting hooks so that the Ids of data being changed can be evaluated from a function, rather than pre-configured.

For example, if you wanted a callback to set the content of a Row, previously you would have to explicitly provide the Id ('felix') when creating the callback:

const setPet = useSetRowCallback('pets', 'felix', () => ({species: 'cat'}));

But now you can get the Row Id when the callback is invoked, perhaps getting its value from the event:

const setPet = useSetRowCallback(
  'pets',
  (event) => String(event.currentTarget.dataset.petName),
  () => ({species: 'cat'}),
);

This would allow you to have just one callback, but which can be invoked by events from multiple HTML elements, each with a data-petName attribute.

This functionality is also useful if you want to create unique Row Ids programmatically:

const addShape = useSetRowCallback(
  'shapes',
  () => nanoid(10),
  () => ({x: 100, y: 100, w: 80, h: 50}),
);

The following hooks are enhanced with the GetId type to support this behavior: useSetTableCallback, useSetRowCallback, useAddRowCallback, useSetPartialRowCallback, useSetCellCallback, and useSetValueCallback.