Header row marker options (#913)

Author: ivoelbert

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

@@ -99,6 +99,8 @@ export interface RowMarkerOptions {
     startIndex?: number;
     width?: number;
     theme?: Partial<Theme>;
+    headerTheme?: Partial<Theme>;
+    headerAlwaysVisible?: boolean;
 }
 
 interface MouseState {
@@ -861,6 +863,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const rowMarkerWidthRaw = rowMarkersObj?.width ?? p.rowMarkerWidth;
     const rowMarkerStartIndex = rowMarkersObj?.startIndex ?? p.rowMarkerStartIndex ?? 1;
     const rowMarkerTheme = rowMarkersObj?.theme ?? p.rowMarkerTheme;
+    const headerRowMarkerTheme = rowMarkersObj?.headerTheme;
+    const headerRowMarkerAlwaysVisible = rowMarkersObj?.headerAlwaysVisible;
     const rowMarkerCheckboxStyle = rowMarkersObj?.checkboxStyle ?? "square";
 
     const minColumnWidth = Math.max(minColumnWidthIn, 20);
@@ -1093,10 +1097,21 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 themeOverride: rowMarkerTheme,
                 rowMarker: rowMarkerCheckboxStyle,
                 rowMarkerChecked,
+                headerRowMarkerTheme,
+                headerRowMarkerAlwaysVisible,
             },
             ...columns,
         ];
-    }, [rowMarkers, columns, rowMarkerWidth, rowMarkerTheme, rowMarkerCheckboxStyle, rowMarkerChecked]);
+    }, [
+        rowMarkers,
+        columns,
+        rowMarkerWidth,
+        rowMarkerTheme,
+        rowMarkerCheckboxStyle,
+        rowMarkerChecked,
+        headerRowMarkerTheme,
+        headerRowMarkerAlwaysVisible,
+    ]);
 
     const visibleRegionRef = React.useRef<VisibleRegion>({
         height: 1,

packages/core/src/docs/examples/row-markers.stories.tsx

@@ -46,7 +46,11 @@ export const RowMarkers: React.VFC<RowMarkersProps> = p => {
             verticalBorder={false}
             rowMarkers={{
                 kind: p.markers,
-                checkboxStyle: "circle",
+                checkboxStyle: "square",
+                headerAlwaysVisible: true,
+                headerTheme: {
+                    textMedium: "rgba(51, 51, 51, 0.50)",
+                },
             }}
             columns={cols}
             rows={400}

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

@@ -195,6 +195,8 @@ export type InnerColumnExtension = {
     growOffset?: number;
     rowMarker?: "square" | "circle";
     rowMarkerChecked?: BooleanIndeterminate | boolean;
+    headerRowMarkerTheme?: Partial<Theme>;
+    headerRowMarkerAlwaysVisible?: boolean;
 };
 
 /** @category Columns */

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

@@ -45,6 +45,8 @@ export function useMappedColumns(
                     growOffset: c.growOffset,
                     rowMarker: c.rowMarker,
                     rowMarkerChecked: c.rowMarkerChecked,
+                    headerRowMarkerTheme: c.headerRowMarkerTheme,
+                    headerRowMarkerAlwaysVisible: c.headerRowMarkerAlwaysVisible,
                 })
             ),
         [columns, freezeColumns]

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

@@ -430,11 +430,27 @@ function drawHeaderInner(
 ) {
     if (c.rowMarker !== undefined) {
         const checked = c.rowMarkerChecked;
-        if (checked !== true) {
+        if (checked !== true && c.headerRowMarkerAlwaysVisible !== true) {
             ctx.globalAlpha = hoverAmount;
         }
-        drawCheckbox(ctx, theme, checked, x, y, width, height, false, undefined, undefined, 18, "center", c.rowMarker);
-        if (checked !== true) {
+        const markerTheme =
+            c.headerRowMarkerTheme !== undefined ? mergeAndRealizeTheme(theme, c.headerRowMarkerTheme) : theme;
+        drawCheckbox(
+            ctx,
+            markerTheme,
+            checked,
+            x,
+            y,
+            width,
+            height,
+            false,
+            undefined,
+            undefined,
+            18,
+            "center",
+            c.rowMarker
+        );
+        if (checked !== true && c.headerRowMarkerAlwaysVisible !== true) {
             ctx.globalAlpha = 1;
         }
         return;