feat: row col border lines

Author: BrianHung

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,22 @@ 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;
+
+    /**
+     * When true (default) draws accent-coloured grid lines around selected rows in the header. Set to false to
+     * revert to the original behaviour where only the header background is accented.
+     * @group Style
+     * @defaultValue true
+     */
+    readonly rowSelectionGridLines?: boolean;
 }
 
 type ScrollToFn = (
@@ -892,6 +908,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         scrollToActiveCell = true,
         drawFocusRing: drawFocusRingIn = true,
         portalElementRef,
+        columnSelectionGridLines = true,
+        rowSelectionGridLines = true,
     } = p;
 
     const drawFocusRing = drawFocusRingIn === "no-editor" ? overlay === undefined : drawFocusRingIn;
@@ -4264,6 +4282,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     gridRef={gridRef}
                     getCellRenderer={getCellRenderer}
                     resizeIndicator={resizeIndicator}
+                    columnSelectionGridLines={columnSelectionGridLines}
+                    rowSelectionGridLines={rowSelectionGridLines}
                 />
                 {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.lines.ts

@@ -294,7 +294,9 @@ export function drawGridLines(
     freezeTrailingRows: number,
     rows: number,
     theme: FullTheme,
-    verticalOnly: boolean = false
+    verticalOnly: boolean = false,
+    selectedColumns?: CompactSelection,
+    selectedRows?: CompactSelection
 ) {
     if (spans !== undefined) {
         ctx.beginPath();
@@ -307,6 +309,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 +326,20 @@ 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;
+            const color = 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 +360,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

@@ -268,6 +268,17 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         }
     }
     const drawHeaderTexture = () => {
+        
+        // Draw the bottom border of the header.
+        overlayCtx.beginPath();
+        overlayCtx.moveTo(0, overlayHeight - 0.5);
+        overlayCtx.lineTo(width, overlayHeight - 0.5);
+        overlayCtx.strokeStyle = blend(
+            theme.headerBottomBorderColor ?? theme.horizontalBorderColor ?? theme.borderColor,
+            theme.bgHeader
+        );
+        overlayCtx.stroke();
+
         drawGridHeaders(
             overlayCtx,
             effectiveCols,
@@ -308,17 +319,10 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
             freezeTrailingRows,
             rows,
             theme,
-            true
-        );
-
-        overlayCtx.beginPath();
-        overlayCtx.moveTo(0, overlayHeight - 0.5);
-        overlayCtx.lineTo(width, overlayHeight - 0.5);
-        overlayCtx.strokeStyle = blend(
-            theme.headerBottomBorderColor ?? theme.horizontalBorderColor ?? theme.borderColor,
-            theme.bgHeader
+            true,
+            arg.columnSelectionGridLines ? selection.columns : undefined,
+            arg.rowSelectionGridLines ? selection.rows : undefined
         );
-        overlayCtx.stroke();
 
         if (mustDrawHighlightRingsOnHeader) {
             drawHighlightRings(
@@ -716,7 +720,10 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         verticalBorder,
         freezeTrailingRows,
         rows,
-        theme
+        theme,
+        false,
+        arg.columnSelectionGridLines ? selection.columns : undefined,
+        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;
 }