T
TanStack•2y ago
like-gold

Expandable and editable table rowID is only for the last nested level

Hi. I'm trying to make table that is both expandable and editable. I managed to do both, but I noticed that the function in example of editable tables is getting rowID only from the last level of nesting. So in my picture if I edited "not-found" under "Index" then I would get row index of 1. My questions is can I get it return some array of indexes or something like that?
No description
1 Reply
fascinating-indigo
fascinating-indigo•2y ago
Hi, I tried to fix this with the below code. Feeding the function with row.id instead of row.index 
updateData: (rowId: number | string, columnId: string, value: any) => {
                const rowIdList: number[] =
                    typeof rowId === 'string'
                        ? rowId.split('.').map((index) => parseInt(index))
                        : [rowId]
                var currentDepth = 0
                const setFunc = (old: TData[]): TData[] =>
                    old.map((row, index) => {
                        if (index === rowIdList[currentDepth]) {
                            if (rowIdList.length - 1 !== currentDepth) {
                                currentDepth += 1
                                return {
                                    ...old[index],
                                    children: setFunc(row.children!),
                                }
                            }
                            return {
                                ...old[index],
                                [columnId]: value,
                            }
                        }
                        return row
                    })
                setData(setFunc)
                setOriginalData(setFunc)
            },
updateData: (rowId: number | string, columnId: string, value: any) => {
                const rowIdList: number[] =
                    typeof rowId === 'string'
                        ? rowId.split('.').map((index) => parseInt(index))
                        : [rowId]
                var currentDepth = 0
                const setFunc = (old: TData[]): TData[] =>
                    old.map((row, index) => {
                        if (index === rowIdList[currentDepth]) {
                            if (rowIdList.length - 1 !== currentDepth) {
                                currentDepth += 1
                                return {
                                    ...old[index],
                                    children: setFunc(row.children!),
                                }
                            }
                            return {
                                ...old[index],
                                [columnId]: value,
                            }
                        }
                        return row
                    })
                setData(setFunc)
                setOriginalData(setFunc)
            },
However, it doesn't seems to work perfectly. Some updates are not applied to the data. Also some updates are reflected on the wrong cells. Looking for solution too.

Did you find this page helpful?