foolish-indigo

(V8) Triggering a, per row, function from one column to another.

I'm not sure if this is possible but lets say I have a two column table.

1) An action column where I want to trigger a function e.g. 'rename' on a input field.

2) An input component, which changes from a span to an input box.
i) when either the user double clicks on the input field
ii) when the action is fired.

I am having issues to implement 2ii

I have been trying an example using ref, forwardRef and ImperativeHandle but i am only able to then rename the last virtualRow. I assume as this was the last ref set in the react state.

Is there a way to trigger an action from one cell to change the state of another?

a short example might be

const columns = useMemo(() => [
{
    header: 'Actions',
    accessorKey: 'actions',
    cell : (info) => (
        //Some function internally triggers some state to set the TagInput
        <Actions element={info.row.original} />     
    )

},
{
    header: 'Tag',  
    accessorKey: 'tag',
    cell: (info) => (
        // Has double click behaviour in-built. externalEditValue is the value i need to set base on the rename action being clicked.
        <TagInput
            value={info.row.original.tag}
            externalEditValue={???} // set the value based on the Actions triggering a rename. -->
        />
    )
}
])

const columns = useMemo(() => [
{
    header: 'Actions',
    accessorKey: 'actions',
    cell : (info) => (
        //Some function internally triggers some state to set the TagInput
        <Actions element={info.row.original} />     
    )

},
{
    header: 'Tag',  
    accessorKey: 'tag',
    cell: (info) => (
        // Has double click behaviour in-built. externalEditValue is the value i need to set base on the rename action being clicked.
        <TagInput
            value={info.row.original.tag}
            externalEditValue={???} // set the value based on the Actions triggering a rename. -->
        />
    )
}
])

TanStack•3y ago

foolish-indigo

(V8) Triggering a, per row, function from one column to another.

const columns = useMemo(() => [
{
    header: 'Actions',
    accessorKey: 'actions',
    cell : (info) => (
        //Some function internally triggers some state to set the TagInput
        <Actions element={info.row.original} />     
    )

},
{
    header: 'Tag',  
    accessorKey: 'tag',
    cell: (info) => (
        // Has double click behaviour in-built. externalEditValue is the value i need to set base on the rename action being clicked.
        <TagInput
            value={info.row.original.tag}
            externalEditValue={???} // set the value based on the Actions triggering a rename. -->
        />
    )
}
])

const columns = useMemo(() => [
{
    header: 'Actions',
    accessorKey: 'actions',
    cell : (info) => (
        //Some function internally triggers some state to set the TagInput
        <Actions element={info.row.original} />     
    )

},
{
    header: 'Tag',  
    accessorKey: 'tag',
    cell: (info) => (
        // Has double click behaviour in-built. externalEditValue is the value i need to set base on the rename action being clicked.
        <TagInput
            value={info.row.original.tag}
            externalEditValue={???} // set the value based on the Actions triggering a rename. -->
        />
    )
}
])

(V8) Triggering a, per row, function from one column to another.

Similar Threads

(V8) Triggering a, per row, function from one column to another.

Similar Threads

Similar Threads

Similar Threads