Directly passing functions to custom cells

[salmanbabri]

In the editable cell sandbox, the updateMyData function gets passed to the editable cell via useTable hook.

The code looks something like this:-

//some code not shown here for brevity.
const EditableCell = ({
  value: initialValue, row: { index }, column: { id },
  updateMyData, // This is a custom function that we supplied to our table instance
}) => {
  const onBlur = () => {
    updateMyData(index, id, value)
  }

// Set our editable cell renderer as the default Cell renderer
const defaultColumn = {
  Cell: EditableCell,
}

Then in the useTable hook, updateMyData function is passed to it :-

const { getTableProps } = useTable( { columns, data, defaultColumn, updateMyData } )

While this works perfectly, it does feel a bit like magic & my IDE complains about it too.

Is there a more direct way of doing it? Perhaps turning defaultColumn into a function that takes the updater function as input & returns EditibleCell with the updater function hooked with it.

I am a bit confused about how to achieve that exactly, some code suggestions would be appreciated.