Column ordering weird behavior on grouped columns #5577
Comments
|
Sorry, closing v7 issues. The version you listed does not match the code sandbox |
|
Am I missing something? It seems like the version is correct. I took it from the official example: https://tanstack.com/table/v8/docs/framework/react/examples/column-dnd |
|
I have the same problem with v8, did you solve it? |
|
@mgryal No, I did not. |
|
@nurbek-mirai I think I found something. Instead of mapping the column IDs, try this. function getColumns(column: any) {
if (column.columns) {
return column.columns.map(getColumns) as string[];
}
return (column.id as string) || (column.accessorKey as string);
}
function getColumnsId(columns) {
const columnsArray = [];
columns?.forEach((column) => {
const columnsId = getColumns(column);
if (typeof columnsId == 'string') columnsArray.push(columnsId);
else columnsArray.push(...columnsId);
});
console.log(columnsArray);
return columnsArray;
}And replace the columnOrder state const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
getColumnsId(columns)
);It's only for two levels of header grouping, but you can extrapolate the code. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
TanStack Table version
V8.17.3
Framework/Library version
React ^18
Describe the bug and the steps to reproduce it
When implementing Column ordering DnD I encountered 2 issues:
Namesgrouped column appears last in the order even though it's second column incolumnsvariable)columnOrdervariable shows correct order but on theUIit's wrong.I think these issues are similar: #4872 #5179
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://stackblitz.com/edit/tanstack-table-gu9mzb?file=src/main.tsx
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not have time to dig into it
Terms & Code of Conduct
The text was updated successfully, but these errors were encountered: