there is a bug when you try sticky pin column group

[890f2151c2be69c51db72017546d00fd]

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.

[ryanagillie]

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)

[dogfootruler-kr]

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 :(

[vuongtruong97]

Yep! I'm having this same issue.

[rmanganiello]

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

[dogfootruler-kr]

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,
  };
};

[MiqueVzvsky]

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

[jack-szeto]

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...

[WoodenPC]

up

[Annukul]

Found the solution here #3947 (comment)