diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx index 8b87560c9..e3131b8c8 100644 --- a/packages/core/src/data-editor/data-editor.tsx +++ b/packages/core/src/data-editor/data-editor.tsx @@ -3516,7 +3516,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction row || row > vr.y + vr.height || vr.x > col || col > vr.x + vr.width) + (vr.y > row || row > vr.y + vr.height) && + col >= freezeColumns && + (vr.x > col || col > vr.x + vr.width) ) { return; } diff --git a/packages/core/src/docs/examples/freeze-columns.stories.tsx b/packages/core/src/docs/examples/freeze-columns.stories.tsx index fd24a9e5f..74043e285 100644 --- a/packages/core/src/docs/examples/freeze-columns.stories.tsx +++ b/packages/core/src/docs/examples/freeze-columns.stories.tsx @@ -20,7 +20,8 @@ export default { description={ Columns at the start of your grid can be frozen in place by settings{" "} - freezeColumns to a number greater than 0. + freezeColumns to a number greater than 0. Cells are editable - try + clicking on them! }> @@ -30,8 +31,8 @@ export default { ], }; -export const FreezeColumns: React.VFC = (p: { freezeColumns: number }) => { - const { cols, getCellContent } = useMockDataGenerator(100); +export const FreezeColumns: React.FC<{ freezeColumns: number }> = p => { + const { cols, getCellContent, setCellValue } = useMockDataGenerator(100, false); return ( = (p: { freezeColumns: number }) => { columns={cols} verticalBorder={false} rows={1000} + onCellEdited={setCellValue} /> ); }; @@ -57,3 +59,32 @@ export const FreezeColumns: React.VFC = (p: { freezeColumns: number }) => { (FreezeColumns as any).args = { freezeColumns: 1, }; + +export const EditableFreezeColumns: React.FC<{ freezeColumns: number }> = p => { + const { cols, getCellContent, setCellValue } = useMockDataGenerator(100, false); + + return ( + + ); +}; +(EditableFreezeColumns as any).argTypes = { + freezeColumns: { + control: { + type: "range", + min: 0, + max: 10, + }, + }, +}; +(EditableFreezeColumns as any).args = { + freezeColumns: 2, +};