there is a bug when you try sticky pin column group

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.

Hey! I'm having this same issue. I've also noticed that if you group last name & something else (but not first name) you get a duplicated group header, which doesn't have any way to say it's not pinned (as it inherits the column, which is pinned, but the header is not)

Hey! I confirm that I got the same issue as above. For now I just disabled the possibility to stick column when they are grouped.

The issue is that the column.getStart('left') of the group header return the wrong value (the rightmost child header, left position value) but I couldn't find a fix for it after checking the code :(

Yep! I'm having this same issue.

Hey folks, we are having the same issue, any news about this?

I have a workaround where I check if the column have children columns, if so I use the getStart('left') value of the first one otherwise I just get the value normally.

Like this:

export const getCommonPinningStyles = <TData>(column: Column<TData>): CSSProperties => {
  const isPinned = column.getIsPinned();
  const leftValue =
    column.columns.length > 0 ? `${column.columns[0]?.getStart("left")}px` : `${column.getStart("left")}px`;

  return {
    left: isPinned === "left" ? leftValue : undefined,
  };
};

Hey guys, I also have found an issue with sticky columns.

Referring to this example:
https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky

When we make a change like the one below for any column:

cell: (info) =>
'/devicexxx/devicexxx/devicexxx/devicexxx/devicexxx/devicexxx/ devicexxx/devicexxx/devicexxx/devicexxx/devicexxx/ devicexxx/devicexxx/devicexxx/devicexxx/',

Then, as a result, we will see...

TanStack Table version
8.19.3

I don't understand how come using the getStart() function would work in a <table>. All <th>, <td> will auto expand their width depend on the widest cell in the same column. I had looked into the source code, both getStart function in the column and header are calculating the size from the ColumnRef instead of the DOM element. So, how could it be working?

some snippet from the source code:

column.getSize = () => {
      const columnSize = table.getState().columnSizing[column.id]

      return Math.min(
        Math.max(
          column.columnDef.minSize ?? defaultColumnSizing.minSize,
          columnSize ?? column.columnDef.size ?? defaultColumnSizing.size
        ),
        column.columnDef.maxSize ?? defaultColumnSizing.maxSize
      )
    }

header.getSize = () => {
      let sum = 0

      const recurse = (header: Header<TData, TValue>) => {
        if (header.subHeaders.length) {
          header.subHeaders.forEach(recurse)
        } else {
          sum += header.column.getSize() ?? 0
        }
      }

      recurse(header)

      return sum
    }

header.getStart = () => {
      if (header.index > 0) {
        const prevSiblingHeader = header.headerGroup.headers[header.index - 1]!
        return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
      }

      return 0
    }

the example is definitely not a working one for sticky column...

up

Found the solution here #3947 (comment)

Navigation Menu

Repository navigation

there is a bug when you try sticky pin column group #5397

TanStack Table version

Framework/Library version

Describe the bug and the steps to reproduce it

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Terms & Code of Conduct

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

there is a bug when you try sticky pin column group #5397

Description

TanStack Table version

Framework/Library version

Describe the bug and the steps to reproduce it

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Terms & Code of Conduct

Activity

ryanagillie commented on Apr 1, 2024

dogfootruler-kr commented on Apr 18, 2024

vuongtruong97 commented on Jul 4, 2024

rmanganiello commented on Jul 19, 2024

dogfootruler-kr commented on Jul 21, 2024

MiqueVzvsky commented on Jul 30, 2024

jack-szeto commented on Sep 24, 2024

WoodenPC commented on Dec 11, 2024

Annukul commented on Jan 30, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions