Skip to content

Rework frozen column shadow #3969

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

Merged
nstepien merged 10 commits into from
Mar 2, 2026
Merged

Rework frozen column shadow #3969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
366b9c8
Rework frozen column shadow
nstepien Feb 22, 2026
8004dc8
Merge branch 'main' into frozenshadow
nstepien Feb 25, 2026
b5748e7
Update screenshots
github-actions[bot] Feb 25, 2026
30d3c5f
Merge branch 'main' into frozenshadow
nstepien Feb 27, 2026
532b09b
tweak shadow
nstepien Feb 27, 2026
5e74cdc
Update screenshots
github-actions[bot] Feb 27, 2026
128146f
rework
nstepien Feb 27, 2026
0213833
removed unused var
nstepien Feb 27, 2026
1d7799d
would you look at that, we already had totalFrozenColumnWidth
nstepien Feb 27, 2026
a796ed6
Merge branch 'main' into frozenshadow
nstepien Mar 2, 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
3 changes: 0 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,6 @@ The DataGrid supports the following CSS variables for customization:
--rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
--rdg-summary-border-color: light-dark(#aaa, #555);

/* Frozen columns */
--rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);

/* Checkboxes */
--rdg-checkbox-focus-color: hsl(207deg 100% 69%);
}
Expand Down
56 changes: 53 additions & 3 deletions src/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,12 @@ import type { PartialPosition } from './ScrollToCell';
import ScrollToCell from './ScrollToCell';
import { default as defaultRenderSortStatus } from './sortStatus';
import { cellDragHandleClassname, cellDragHandleFrozenClassname } from './style/cell';
import { rootClassname, viewportDraggingClassname } from './style/core';
import {
rootClassname,
frozenColumnShadowClassname,
viewportDraggingClassname,
frozenColumnShadowTopClassname
} from './style/core';
import SummaryRow from './SummaryRow';

export interface SelectCellState extends Position {
Expand Down Expand Up @@ -368,6 +373,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
const minRowIdx = -headerAndTopSummaryRowsCount;
const mainHeaderRowIdx = minRowIdx + groupedColumnHeaderRowsCount;
const maxRowIdx = rows.length + bottomSummaryRowsCount - 1;
const frozenShadowStyles: React.CSSProperties = {
gridColumnStart: lastFrozenColumnIndex + 2,
insetInlineStart: totalFrozenColumnWidth
};

const [selectedPosition, setSelectedPosition] = useState(
(): SelectCellState | EditCellState<R> => ({ idx: -1, rowIdx: minRowIdx - 1, mode: 'SELECT' })
Expand Down Expand Up @@ -1269,11 +1278,11 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
const top =
clientHeight > totalRowHeight
? gridHeight - summaryRowHeight * (bottomSummaryRows.length - rowIdx)
? gridHeight - summaryRowHeight * (bottomSummaryRowsCount - rowIdx)
: undefined;
const bottom =
top === undefined
? summaryRowHeight * (bottomSummaryRows.length - 1 - rowIdx)
? summaryRowHeight * (bottomSummaryRowsCount - 1 - rowIdx)
: undefined;

return (
Expand All @@ -1298,6 +1307,47 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
)}
</DataGridDefaultRenderersContext>

{lastFrozenColumnIndex > -1 && (
Copy link
Collaborator Author

@nstepien nstepien Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the best way I found to make it work in all scenarios, including column grouping.

<>
<div
Copy link
Collaborator

@amanmahajan7 amanmahajan7 Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is is possible or a good idea to use a single div instead? Can it cause performance issues?

Copy link
Collaborator Author

@nstepien nstepien Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, for example:

| header cell |
| top summary |
|    cell     |
|             |
| bot summary |

If we have no rows between the last row and the bottom summary, then we don't want to render a shadow for non-existent cells.

Also, if you scroll very fast then rows/cells may not be rendered yet, in that case I think it's better to not render the shadow as well.

Copy link
Collaborator

@amanmahajan7 amanmahajan7 Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense.

className={frozenColumnShadowTopClassname}
style={{
...frozenShadowStyles,
gridRowStart: 1,
gridRowEnd: headerRowsCount + 1 + topSummaryRowsCount,
insetBlockStart: 0
}}
/>

{rows.length > 0 && (
<div
className={frozenColumnShadowClassname}
style={{
...frozenShadowStyles,
gridRowStart: headerAndTopSummaryRowsCount + rowOverscanStartIdx + 1,
gridRowEnd: headerAndTopSummaryRowsCount + rowOverscanEndIdx + 2
}}
/>
)}

{bottomSummaryRows != null && bottomSummaryRowsCount > 0 && (
<div
className={frozenColumnShadowTopClassname}
style={{
...frozenShadowStyles,
gridRowStart: headerAndTopSummaryRowsCount + rows.length + 1,
gridRowEnd: headerAndTopSummaryRowsCount + rows.length + 1 + bottomSummaryRowsCount,
insetBlockStart:
clientHeight > totalRowHeight
? gridHeight - summaryRowHeight * bottomSummaryRowsCount
: undefined,
insetBlockEnd: clientHeight > totalRowHeight ? undefined : 0
}}
/>
)}
</>
)}

{getDragHandle()}

{/* render empty cells that span only 1 column so we can safely measure column widths, regardless of colSpan */}
Expand Down
5 changes: 0 additions & 5 deletions src/style/cell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,6 @@ export const cellFrozen = css`
position: sticky;
/* Should have a higher value than 0 to show up above unfrozen cells */
z-index: 1;

/* Add box-shadow on the last frozen cell */
&:nth-last-child(1 of &) {
box-shadow: var(--rdg-cell-frozen-box-shadow);
}
}
`;

Expand Down
40 changes: 35 additions & 5 deletions src/style/core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const root = css`
--rdg-selection-width: 2px;
--rdg-selection-color: hsl(207, 75%, 66%);
--rdg-font-size: 14px;
--rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
--rdg-border-width: 1px;
--rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
--rdg-color: light-dark(#000, #ddd);
Expand All @@ -38,10 +37,6 @@ const root = css`
color-scheme: light;
}

&:dir(rtl) {
--rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
}

display: grid;

accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
Expand All @@ -59,6 +54,9 @@ const root = css`
color: var(--rdg-color);
font-size: var(--rdg-font-size);

container-name: rdg-root;
container-type: scroll-state;

/* needed on Firefox to fix scrollbars */
&::before {
content: '';
Expand Down Expand Up @@ -92,3 +90,35 @@ const viewportDragging = css`
`;

export const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;

// Add shadow after the last frozen cell
export const frozenColumnShadowClassname = css`
position: sticky;
width: 10px;
background-image: linear-gradient(
to right,
light-dark(rgb(0 0 0 / 15%), rgb(0 0 0 / 40%)),
transparent
);
Comment on lines +97 to +102
Copy link
Collaborator Author

@nstepien nstepien Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The shadow is wider/stronger than before, let me know if you think we should tweak it.

Copy link
Collaborator

@amanmahajan7 amanmahajan7 Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

pointer-events: none;
z-index: 1;

opacity: 1;
transition: opacity 0.1s;

/* TODO: reverse 'opacity' and remove 'not' */
@container rdg-root not scroll-state(scrollable: inline-start) {
Copy link
Collaborator Author

@nstepien nstepien Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Firefox/Safari will always show the shadow until they support scroll-state container queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type

Copy link
Collaborator

@amanmahajan7 amanmahajan7 Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great

opacity: 0;
}

&:dir(rtl) {
transform: scaleX(-1);
}
`;

const topShadowClassname = css`
/* render above header and summary rows */
z-index: 2;
`;

export const frozenColumnShadowTopClassname = `${frozenColumnShadowClassname} ${topShadowClassname}`;
Binary file modified test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion website/routes/CommonFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const dialogContainerClassname = css`
inset: 0;
display: flex;
place-items: center;
background: rgba(0, 0, 0, 0.1);
background: rgb(0 0 0 / 10%);

> dialog {
width: 300px;
Expand Down
2 changes: 1 addition & 1 deletion website/routes/NoRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const gridClassname = css`

function EmptyRowsRenderer() {
return (
<div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
<div style={{ gridColumn: '1/-1', placeSelf: 'center' }}>
Nothing to show{' '}
<span lang="ja" title="ショボーン">
(´・ω・`)
Expand Down