feat: draw grid lines for selected rows cols

Author: BrianHung

packages/core/data-editor/data-editor.tsx

@@ -0,0 +1 @@
+ 

packages/core/src/data-editor/data-editor.tsx

@@ -499,7 +499,7 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
     readonly gridSelection?: GridSelection;
     /**
      * Emitted whenever the grid selection changes. Specifying
-     * this function will make the grid’s selection controlled, so
+     * this function will make the grid's selection controlled, so
      * so you will need to specify {@link gridSelection} as well. See
      * the "Controlled Selection" example for details.
      *
@@ -686,6 +686,14 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
      * Allows overriding the default portal element.
      */
     readonly portalElementRef?: React.RefObject<HTMLElement>;
+
+    /**
+     * When true (default) draws accent-coloured grid lines around selected columns in the header. Set to false to
+     * revert to the original behaviour where only the header background is accented.
+     * @group Style
+     * @defaultValue true
+     */
+    readonly columnSelectionGridLines?: boolean;
 }
 
 type ScrollToFn = (
@@ -892,6 +900,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         scrollToActiveCell = true,
         drawFocusRing: drawFocusRingIn = true,
         portalElementRef,
+        columnSelectionGridLines = true,
     } = p;
 
     const drawFocusRing = drawFocusRingIn === "no-editor" ? overlay === undefined : drawFocusRingIn;
@@ -4264,6 +4273,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     gridRef={gridRef}
                     getCellRenderer={getCellRenderer}
                     resizeIndicator={resizeIndicator}
+                    columnSelectionGridLines={columnSelectionGridLines}
                 />
                 {renameGroupNode}
                 {overlay !== undefined && (

packages/core/src/docs/examples/selection-gridlines.stories.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Column & Row Selection Grid Lines"
+                    description={
+                        <>
+                            <Description>
+                                Demonstrates the <code>columnSelectionGridLines</code> and
+                                <code>rowSelectionGridLines</code> props which control whether accent-coloured grid
+                                lines are drawn around selected columns and rows.
+                            </Description>
+                            <MoreInfo>
+                                Use the story controls to toggle the behaviours on and off.
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface GridLineDemoProps {
+    columnSelectionGridLines: boolean;
+    rowSelectionGridLines: boolean;
+}
+
+export const GridLineDemo: React.FC<GridLineDemoProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(10);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={1000}
+            columnSelectionGridLines={p.columnSelectionGridLines}
+            rowSelectionGridLines={p.rowSelectionGridLines}
+            rowMarkers="both"
+        />
+    );
+};
+
+(GridLineDemo as any).args = {
+    columnSelectionGridLines: true,
+    rowSelectionGridLines: true,
+};
+
+(GridLineDemo as any).argTypes = {
+    columnSelectionGridLines: {
+        control: {
+            type: "boolean",
+        },
+    },
+    rowSelectionGridLines: {
+        control: {
+            type: "boolean",
+        },
+    },
+}; 

packages/core/src/internal/data-grid/data-grid.tsx

@@ -307,6 +307,18 @@ export interface DataGridProps {
      * @group Style
      */
     readonly resizeIndicator: "full" | "header" | "none" | undefined;
+
+    /** Enables accent-coloured grid lines for selected columns in the header.
+     * @defaultValue false
+     * @group Style
+     */
+    readonly columnSelectionGridLines?: boolean;
+
+    /** Enables accent-coloured grid lines for selected rows in the header.
+     * @defaultValue false
+     * @group Style
+     */
+    readonly rowSelectionGridLines?: boolean;
 }
 
 type DamageUpdateList = readonly {
@@ -396,6 +408,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         experimental,
         getCellRenderer,
         resizeIndicator = "full",
+        columnSelectionGridLines = true,
+        rowSelectionGridLines = true,
     } = p;
     const translateX = p.translateX ?? 0;
     const translateY = p.translateY ?? 0;
@@ -829,6 +843,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             getCellRenderer,
             minimumCellWidth,
             resizeIndicator,
+            columnSelectionGridLines,
+            rowSelectionGridLines,
         };
 
         // This confusing bit of code due to some poor design. Long story short, the damage property is only used
@@ -895,6 +911,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         getCellRenderer,
         minimumCellWidth,
         resizeIndicator,
+        columnSelectionGridLines,
+        rowSelectionGridLines,
     ]);
 
     const lastDrawRef = React.useRef(draw);

packages/core/src/internal/data-grid/render/data-grid-render.header.ts

@@ -91,8 +91,13 @@ export function drawGridHeaders(
         const xOffset = c.sourceIndex === 0 ? 0 : 1;
 
         if (selected) {
+            // Fill the header background for selected columns. We intentionally skip drawing
+            // a manual border here – the vertical grid lines will be recoloured to the accent
+            // shade later in drawGridLines so we don’t end up with double-width accent bars
+            // when multiple adjacent columns are selected.
             ctx.fillStyle = bgFillStyle;
             ctx.fillRect(x + xOffset, y, c.width - xOffset, headerHeight);
+
         } else if (hasSelectedCell || hover > 0) {
             ctx.beginPath();
             ctx.rect(x + xOffset, y, c.width - xOffset, headerHeight);

packages/core/src/internal/data-grid/render/data-grid-render.lines.ts

@@ -294,7 +294,10 @@ export function drawGridLines(
     freezeTrailingRows: number,
     rows: number,
     theme: FullTheme,
-    verticalOnly: boolean = false
+    verticalOnly: boolean = false,
+    selectedColumns?: CompactSelection,
+    accentInner: boolean = false,
+    selectedRows?: CompactSelection
 ) {
     if (spans !== undefined) {
         ctx.beginPath();
@@ -307,6 +310,8 @@ export function drawGridLines(
     }
     const hColor = theme.horizontalBorderColor ?? theme.borderColor;
     const vColor = theme.borderColor;
+    const selectedVColor = theme.accentColor;
+    const selectedHColor = theme.accentColor;
 
     const { minX, maxX, minY, maxY } = getMinMaxXY(drawRegions, width, height);
 
@@ -322,12 +327,25 @@ export function drawGridLines(
         x += c.width;
         const tx = c.sticky ? x : x + translateX;
         if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
+            const leftSelected = selectedColumns?.hasIndex(c.sourceIndex) ?? false;
+            const rightSelected =
+                index < effectiveCols.length - 1
+                    ? selectedColumns?.hasIndex(effectiveCols[index + 1].sourceIndex) ?? false
+                    : false;
+            console.log("leftSelected", {leftSelected, rightSelected, selectedColumns});
+            const color = accentInner
+                ? leftSelected || rightSelected
+                    ? selectedVColor
+                    : vColor
+                : leftSelected !== rightSelected
+                ? selectedVColor
+                : vColor;
             toDraw.push({
                 x1: tx,
                 y1: Math.max(groupHeaderHeight, minY),
                 x2: tx,
                 y2: Math.min(height, maxY),
-                color: vColor,
+                color,
             });
         }
     }
@@ -348,12 +366,25 @@ export function drawGridLines(
             const ty = y + translateY;
             if (ty >= minY && ty <= maxY - 1) {
                 const rowTheme = getRowThemeOverride?.(row);
+
+                let color = rowTheme?.horizontalBorderColor ?? rowTheme?.borderColor ?? hColor;
+
+                if (selectedRows !== undefined) {
+                    const currentSelected = selectedRows.hasIndex(row);
+                    const prevSelected = row > 0 ? selectedRows.hasIndex(row - 1) : false;
+
+                    // Accent the line if it is a boundary between selected and unselected rows.
+                    if (currentSelected !== prevSelected && (currentSelected || prevSelected)) {
+                        color = selectedHColor;
+                    }
+                }
+
                 toDraw.push({
                     x1: minX,
                     y1: ty,
                     x2: maxX,
                     y2: ty,
-                    color: rowTheme?.horizontalBorderColor ?? rowTheme?.borderColor ?? hColor,
+                    color,
                 });
             }
 

packages/core/src/internal/data-grid/render/data-grid-render.ts

@@ -308,7 +308,10 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
             freezeTrailingRows,
             rows,
             theme,
-            true
+            true,
+            arg.columnSelectionGridLines ? selection.columns : undefined,
+            false,
+            arg.rowSelectionGridLines ? selection.rows : undefined
         );
 
         overlayCtx.beginPath();
@@ -320,6 +323,39 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         );
         overlayCtx.stroke();
 
+        // Overdraw the bottom border with the accent colour for each selected column so
+        // the vertical accent grid lines visually connect with the header. We draw after
+        // the default grey stroke so the accent sits on top.
+        if (arg.columnSelectionGridLines && selection.columns.length > 0) {
+            overlayCtx.beginPath();
+            let xCursor = 0;
+            for (let index = 0; index < effectiveCols.length; index++) {
+                const col = effectiveCols[index];
+                const isSelected = selection.columns.hasIndex(col.sourceIndex);
+
+                // Check for left and right edge.
+
+                const leftSelected = selection.columns?.hasIndex(col.sourceIndex) ?? false;
+                const rightSelected =
+                    index < effectiveCols.length - 1
+                        ? selection.columns?.hasIndex(effectiveCols[index + 1].sourceIndex) ?? false
+                        : false;
+
+                console.log("col", index, isSelected, leftSelected, rightSelected);
+
+                const offset = col.sourceIndex === 0 ? 0 : 1;
+                const startX = xCursor + offset - (leftSelected ? 1 : 0);
+                const endX = xCursor + col.width + 1;
+                if (isSelected) {
+                    overlayCtx.moveTo(startX, totalHeaderHeight + 0.5);
+                    overlayCtx.lineTo(endX, totalHeaderHeight + 0.5);
+                }
+                xCursor += col.width;
+            }
+            overlayCtx.strokeStyle = theme.accentColor;
+            overlayCtx.stroke();
+        }
+
         if (mustDrawHighlightRingsOnHeader) {
             drawHighlightRings(
                 overlayCtx,
@@ -699,6 +735,8 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         theme
     );
 
+    console.log("selection", selection);
+
     drawGridLines(
         targetCtx,
         effectiveCols,
@@ -716,7 +754,11 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         verticalBorder,
         freezeTrailingRows,
         rows,
-        theme
+        theme,
+        false,
+        (arg.columnSelectionGridLines ? selection.columns : undefined),
+        false,
+        (arg.rowSelectionGridLines ? selection.rows : undefined)
     );
 
     highlightRedraw?.();

packages/core/src/internal/data-grid/render/draw-grid-arg.ts

@@ -79,4 +79,6 @@ export interface DrawGridArg {
     readonly getCellRenderer: GetCellRendererCallback;
     readonly minimumCellWidth: number;
     readonly resizeIndicator: "full" | "header" | "none";
+    readonly columnSelectionGridLines: boolean;
+    readonly rowSelectionGridLines: boolean;
 }