Skip to content

Sticky columns #37

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.

Sign up for GitHub

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

Draft
j-chmielewski wants to merge 6 commits into
base: dev
Choose a base branch
from
Draft

Sticky columns #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
968b4d7
sticky columns initial implementation
j-chmielewski Apr 14, 2026
a46d730
sticky checkboxes and headers
j-chmielewski Apr 14, 2026
0d693ad
fix css issues
j-chmielewski Apr 14, 2026
3da2297
fix content overflowing on the left side
j-chmielewski Apr 14, 2026
de0a676
sticky right column
j-chmielewski Apr 14, 2026
f6b5b06
fix header styling
j-chmielewski Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 165 additions & 92 deletions components/table/TableBody/TableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ import {
} from 'react';
import { useInView } from 'react-intersection-observer';
import { isPresent } from '../../../utils/isPresent';
import { Checkbox } from '../../Checkbox/Checkbox';
import { tableActionColumnSize } from '../consts';
import { TableCell } from '../TableCell/TableCell';
import { TableCellContext } from '../TableCell/TableCellContext';
import { TableStickyColumnsContext } from '../TableCell/TableStickyColumnsContext';
import { TableExpandCell } from '../TableExpandCell/TableExpandCell';
import { TableExpandedRowHeader } from '../TableExpandedRowHeader/TableExpandedRowHeader';
import { TableHeader } from '../TableHeader/TableHeader';
Expand Down Expand Up @@ -99,31 +101,76 @@ export const TableBody = <T extends object>({
.join(' ');
}, [table]);

const stickyColumnSides = useMemo(() => {
const headers = table.getFlatHeaders();
const stickySides: Record<string, 'left' | 'right'> = {};

let leftIndex = 0;
while (
leftIndex < headers.length &&
headers[leftIndex].column.columnDef.meta?.sticky
) {
stickySides[headers[leftIndex].column.id] = 'left';
leftIndex += 1;
}

let rightIndex = headers.length - 1;
while (rightIndex >= leftIndex && headers[rightIndex].column.columnDef.meta?.sticky) {
stickySides[headers[rightIndex].column.id] = 'right';
rightIndex -= 1;
}

return stickySides;
}, [table.getFlatHeaders]);

// biome-ignore lint/correctness/useExhaustiveDependencies: needs to recalculate on sizing changes
const columnSizeVars = useMemo(() => {
const headers = table.getFlatHeaders();
const colSizes: { [key: string]: number } = {};
const canRowsExpand = table.options.enableExpanding;
const canRowsSelect = table.options.enableRowSelection;
// assign static sizing to extra columns at the start of the row
// in the same order as they are rendered: selection -> expand -> data columns
let iterIndex = 0;
if (canRowsExpand) {
colSizes['--col-0-size'] = tableActionColumnSize;
let cumulativeStickyOffset = 0;
if (canRowsSelect) {
colSizes['--selection-sticky-offset'] = cumulativeStickyOffset;
colSizes[`--col-${iterIndex}-size`] = tableActionColumnSize;
cumulativeStickyOffset += tableActionColumnSize;
iterIndex += 1;
}
if (canRowsSelect) {
if (canRowsExpand) {
colSizes['--expand-sticky-offset'] = cumulativeStickyOffset;
colSizes[`--col-${iterIndex}-size`] = tableActionColumnSize;
cumulativeStickyOffset += tableActionColumnSize;
iterIndex += 1;
}
// Data columns - sticky ones use the cumulative offset
for (const header of headers) {
colSizes[`--col-${iterIndex}-size`] = header.column.getSize();
colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
if (stickyColumnSides[header.column.id] === 'left') {
colSizes[`--col-${header.column.id}-sticky-left-offset`] = cumulativeStickyOffset;
cumulativeStickyOffset += header.column.getSize();
}
iterIndex += 1;
}

let cumulativeStickyRightOffset = 0;
for (let index = headers.length - 1; index >= 0; index -= 1) {
const header = headers[index];
if (stickyColumnSides[header.column.id] === 'right') {
colSizes[`--col-${header.column.id}-sticky-right-offset`] =
cumulativeStickyRightOffset;
cumulativeStickyRightOffset += header.column.getSize();
}
}

return colSizes;
}, [
table.getState().columnSizingInfo,
table.getState().columnSizing,
stickyColumnSides,
table.getFlatHeaders,
]);

Expand Down Expand Up @@ -230,105 +277,131 @@ export const TableBody = <T extends object>({
}, [table]);

return (
<div
className={clsx('table', className)}
style={{
...columnSizeVars,
maxHeight: maxTableHeight ?? undefined,
overflow: 'auto',
}}
ref={scrollParentRef}
{...props}
>
<TableStickyColumnsContext value={stickyColumnSides}>
<div
className="table-virtual-body"
ref={tableVirtualBodyRef}
className={clsx('table', className)}
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
position: 'relative',
minWidth: tableWidth,
...columnSizeVars,
maxHeight: maxTableHeight ?? undefined,
overflow: 'auto',
}}
ref={scrollParentRef}
{...props}
>
<TableHeader>
{table.options.enableRowSelection && (
<TableSelectionCell
selected={table.getIsAllRowsSelected()}
onClick={() => {
table.toggleAllRowsSelected();
}}
/>
)}
{table.options.enableExpanding && <TableCell empty />}
{table.getHeaderGroups()[0].headers.map((header) => {
return <TableHeaderCell header={header} key={header.id} />;
})}
</TableHeader>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const row = rows[virtualRow.index];
const isExpanded = row.getIsExpanded() && row.getCanExpand();
const canSelect = row.getCanSelect();
const isLast = virtualRow.index === rows.length - 1 && !hasNextPage;
return (
<div
ref={(node) => rowVirtualizer.measureElement(node)}
data-index={virtualRow.index}
className={clsx('virtual-row', {
expanded: isExpanded && !isLast,
})}
key={row.id}
style={{
position: 'absolute',
transform: `translateY(${virtualRow.start}px)`,
minWidth: tableWidth,
width: '100%',
}}
>
<TableRowContainer
className={clsx({
last: isLast && !isExpanded,
<div
className="table-virtual-body"
ref={tableVirtualBodyRef}
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
position: 'relative',
minWidth: tableWidth,
}}
>
<TableHeader>
{table.options.enableRowSelection && (
<TableCell
sticky
className="header-cell"
alignContent="center"
noBorder
style={{
width: 'calc(var(--col-0-size) * 1px)',
left: 'calc(var(--selection-sticky-offset) * 1px - var(--table-inline-padding))',
}}
>
<Checkbox
active={table.getIsAllRowsSelected()}
onClick={() => {
table.toggleAllRowsSelected();
}}
/>
</TableCell>
)}
{table.options.enableExpanding && (
<TableCell
sticky
className="header-cell table-expand-cell"
noPadding
empty
style={{
width: `calc(var(--col-${canSelect ? 1 : 0}-size) * 1px)`,
left: 'calc(var(--expand-sticky-offset) * 1px - var(--table-inline-padding))',
}}
/>
)}
{table.getHeaderGroups()[0].headers.map((header) => {
return <TableHeaderCell header={header} key={header.id} />;
})}
</TableHeader>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const row = rows[virtualRow.index];
const isExpanded = row.getIsExpanded() && row.getCanExpand();
const canSelect = row.getCanSelect();
const isLast = virtualRow.index === rows.length - 1 && !hasNextPage;
return (
<div
ref={(node) => rowVirtualizer.measureElement(node)}
data-index={virtualRow.index}
className={clsx('virtual-row', {
expanded: isExpanded && !isLast,
})}
key={row.id}
style={{
position: 'absolute',
transform: `translateY(${virtualRow.start}px)`,
minWidth: tableWidth,
width: '100%',
}}
>
{canSelect && (
<TableSelectionCell
selected={row.getIsSelected()}
onClick={() => {
row.toggleSelected();
<TableRowContainer
className={clsx({
last: isLast && !isExpanded,
})}
>
{canSelect && (
<TableSelectionCell
selected={row.getIsSelected()}
onClick={() => {
row.toggleSelected();
}}
/>
)}
{table.options.enableExpanding && (
<TableExpandCell row={row} hasSelectionColumn={canSelect} />
)}
{row.getAllCells().map((cell) => (
<Fragment key={cell.id}>
<TableCellContext value={cell}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCellContext>
</Fragment>
))}
</TableRowContainer>
{isExpanded && isPresent(expandedHeaders) && (
<TableExpandedRowHeader
canExpand={table.options.enableExpanding ?? false}
canSelect={
(table.options.enableRowSelection as boolean | undefined) ?? false
}
headersData={expandedHeaders}
style={{
gridTemplateColumns: gridColsDef,
}}
/>
)}
{table.options.enableExpanding && <TableExpandCell row={row} />}
{row.getAllCells().map((cell) => (
<Fragment key={cell.id}>
<TableCellContext value={cell}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCellContext>
</Fragment>
))}
</TableRowContainer>
{isExpanded && isPresent(expandedHeaders) && (
<TableExpandedRowHeader
canExpand={table.options.enableExpanding ?? false}
canSelect={
(table.options.enableRowSelection as boolean | undefined) ?? false
}
headersData={expandedHeaders}
style={{
gridTemplateColumns: gridColsDef,
}}
/>
)}
{isExpanded &&
isPresent(renderExpandedRow) &&
renderExpandedRow(row, isLast)}
{isExpanded &&
isPresent(renderExpandedRow) &&
renderExpandedRow(row, isLast)}
</div>
);
})}
{hasNextPage && isPresent(onNextPage) && (
<div className="load-more-row" ref={loadMoreRowRef}>
<Skeleton />
</div>
);
})}
{hasNextPage && isPresent(onNextPage) && (
<div className="load-more-row" ref={loadMoreRowRef}>
<Skeleton />
</div>
)}
)}
</div>
</div>
</div>
</TableStickyColumnsContext>
);
};
4 changes: 3 additions & 1 deletion components/table/TableBody/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.table {
--table-inline-padding: var(--spacing-xl);

box-sizing: border-box;
padding: 0 var(--spacing-xl);
padding: 0 var(--table-inline-padding);
width: 100%;
}

Expand Down
40 changes: 30 additions & 10 deletions components/table/TableCell/TableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { type CSSProperties, useContext, useMemo } from 'react';
import { isPresent } from '../../../utils/isPresent';
import { tableActionColumnSize } from '../consts';
import { TableCellContext } from './TableCellContext';
import { TableStickyColumnsContext } from './TableStickyColumnsContext';
import type { TableCellProps } from './types';

export const TableCell = ({
Expand All @@ -16,34 +17,53 @@ export const TableCell = ({
alignContent = 'left',
flex = false,
radius = false,
sticky = false,
style: outsideStyle,
...props
}: TableCellProps) => {
const cell = useContext(TableCellContext);
const stickyColumns = useContext(TableStickyColumnsContext);

const isStickyFromMeta = cell?.column.columnDef.meta?.sticky ?? false;
const isSticky = sticky || isStickyFromMeta;

const style = useMemo((): CSSProperties => {
const res: CSSProperties = {};
if (outsideStyle?.width) return res;
const id = columnId ?? cell?.column.id;
const hasId = isPresent(id);
if (flex) {
return res;
}
if (empty && !hasId) {
res.width = tableActionColumnSize;
return res;

if (!outsideStyle?.width) {
if (flex) {
return res;
}
if (empty && !hasId) {
res.width = tableActionColumnSize;
return res;
}
if (hasId) {
res.width = `calc(var(--col-${id}-size) * 1px)`;
}
}
if (hasId) {
res.width = `calc(var(--col-${id}-size) * 1px)`;

if (hasId && isSticky) {
const stickySide = stickyColumns[id];
if (stickySide === 'left') {
res.left = `calc(var(--col-${id}-sticky-left-offset) * 1px - var(--table-inline-padding))`;
}
if (stickySide === 'right') {
res.right = `calc(var(--col-${id}-sticky-right-offset) * 1px - var(--table-inline-padding))`;
}
}

return res;
}, [columnId, empty, flex, outsideStyle?.width, cell]);
}, [columnId, empty, flex, outsideStyle?.width, cell, isSticky, stickyColumns]);

return (
<div
className={clsx('table-cell', className, `align-${alignContent}`, {
'no-padding': noPadding,
'no-border': noBorder,
sticky: isSticky,
empty,
flex,
radius,
Expand Down
Loading