there is a bug when you try sticky pin column group
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.4k
- Forks
- 3.6k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 10
Description
TanStack Table version
8.13.2
Framework/Library version
18.2.0
Describe the bug and the steps to reproduce it
open https://tanstack.com/table/v8/docs/framework/react/examples/column-pinning-sticky example and group firstname and lastname
const columnHelper = createColumnHelper<Person>();
const defaultColumns: ColumnDef<Person>[] = [
columnHelper.group({
id: 'info',
header: () => <span>Info</span>,
columns: [
{
accessorKey: 'firstName',
id: 'firstName',
header: 'First Name',
cell: (info) => info.getValue(),
footer: (props) => props.column.id,
size: 180,
},
{
accessorFn: (row) => row.lastName,
id: 'lastName',
cell: (info) => info.getValue(),
header: () => <span>Last Name</span>,
footer: (props) => props.column.id,
size: 180,
},
],
}),
{
accessorKey: 'age',
id: 'age',
header: 'Age',
footer: (props) => props.column.id,
size: 180,
},
{
accessorKey: 'visits',
id: 'visits',
header: 'Visits',
footer: (props) => props.column.id,
size: 180,
},
{
accessorKey: 'status',
id: 'status',
header: 'Status',
footer: (props) => props.column.id,
size: 180,
},
{
accessorKey: 'progress',
id: 'progress',
header: 'Profile Progress',
footer: (props) => props.column.id,
size: 180,
},
];
then try pin "info" group info to the left (or right).
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://stackblitz.com/edit/tanstack-table-n7umup?file=src%2Fmain.tsx
Screenshots or Videos (Optional)
Do you intend to try to help solve this bug with your own PR?
None
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and the column-pinning-sticky React example. Group the firstName and lastName columns as shown, pin the info group left and right, and compare the sticky behavior with ungrouped columns; done means grouped-column pinning behaves correctly in both directions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100