How to define an input which does not lose focus on typing (= is not re-mounted)

[Jarzka]

I have defined a column which contains an input, like this:

switch (column.type) {
  case "input":
  columnHelper.accessor(column.dataKey, {
            id: column.id,
            header: () => heading(column),
            cell: (info) => {
              return (
                <Input name={column.dataKey}/>
              );
            },
          })
}

The problem is that when ever I type something to this input, the input loses focus. It seems that this is caused by the fact that the input cell's arrow function is re-created on every render, which causes the input to remount and lose focus. I think this is not directly related to Tanstack Table, but is a React feature.

However, this leaves me confused as I'm not sure what is the correct way to define an input in Tanstack Table so that it is not re-mounted on every render? I did not see any official example about this.

I think a possible solution could be defining the cell component as a top-level component like this:

cell: Input

However, this does not work in my case, because my Input needs additional parameters (the column.dataKey parameter), not just the info property which is normally passed to the cell function.

So my second question is: Is there a way to pass additional props to cell function? I think something like this could solve my problem:

cell: ({info, column}) => {
  return (
    <Input name={column.dataKey}/>
  );
},
cellAdditionalProps: column,

[Jarzka]

To answer my own question: there is a way to pass additional props to cell function via metadata. This solved my problem.

[happylolonly]

Seems I have similar problem, what is correct way to fix it?

#5572