-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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. |
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:
Names
grouped column appears last in the order even though it's second column incolumns
variable)columnOrder
variable shows correct order but on theUI
it'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%2Fmain.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: