There is space between adjacent pinned columns

[pintuiitbhi]

TanStack Table version

v8.13.2

Framework/Library version

React 18

Describe the bug and the steps to reproduce it

There is space between the first two pinned column.

This is the common pinning style code

`import { Column } from "@tanstack/react-table"
import { ListingType } from "./columns"
import { CSSProperties } from "react"

export const getCommonPinningStyles = (column: Column): CSSProperties => {
const isPinned = column.getIsPinned()
const isLastLeftPinnedColumn =
isPinned === 'left' && column.getIsLastColumn('left')
const isFirstRightPinnedColumn =
isPinned === 'right' && column.getIsFirstColumn('right')

return {
    boxShadow: isLastLeftPinnedColumn
        ? '-2px 0 2px -2px gray inset'
        : isFirstRightPinnedColumn
            ? '2px 0 2px -2px gray inset'
            : undefined,
    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
    opacity: isPinned ? 0.95 : 1,
    position: isPinned ? 'sticky' : 'relative',
    width: `${column.getSize()}rem`,
    zIndex: isPinned ? 1 : 0,
    padding: '5px 20px',
    border: "1px solid red",
}

}
`

This is column def
{ id: "select", header: ({ table }) => ( <IndeterminateCheckbox checked={table.getIsAllRowsSelected()} indeterminate={table.getIsSomeRowsSelected()} onChange={table.getToggleAllRowsSelectedHandler()} /> ), cell: ({ row }) => ( <IndeterminateCheckbox checked={row.getIsSelected()} disabled={!row.getCanSelect()} indeterminate={row.getIsSomeSelected()} onChange={row.getToggleSelectedHandler()} /> ), enableSorting: false, enableHiding: false, }, { accessorKey: "state", id: "state", header: "State", cell: (info) => info.getValue() || "-", },

This is table defintion

const table: TanstackTable<TData> = useReactTable({ data, columns: columns as any, // @TODO: fix typescript defaultColumn: { size: 100, //starting column size // minSize: 50, //enforced during column resizing // maxSize: 200, //enforced during column resizing }, onRowSelectionChange: setRowSelection, pageCount: pageCount ?? -1, enableRowSelection: true, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, getSortedRowModel: getSortedRowModel(), state: { pagination: { pageIndex, pageSize }, rowSelection, sorting, columnVisibility, columnFilters, }, initialState: { columnPinning: { left: ['select', 'state'], right: ['status', 'actions'], }, }, columnResizeMode: 'onChange', onPaginationChange: setPagination, getPaginationRowModel: getPaginationRowModel(), manualPagination: true, manualFiltering: true, meta: { // removeRow: (rowIndex: number) => { // deleteRow(data[rowIndex].id); // }, // removeSelectedRows: (selectedRows: number[]) => { // selectedRows.forEach((rowIndex) => { // deleteRow(data[rowIndex].id); // }); // }, } });

This is css for table

table {
border-collapse: separate;
border-spacing: 0;
}

th {
border: 0.5px solid #f2f2f2;
font-weight: bold;
text-transform: uppercase;
background-color: white;
}

td {
background-color: white;
border: 0.5px solid #f2f2f2;
}

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

NA

Screenshots or Videos (Optional)

No response

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.