diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx index 1a3e92518..fa20b969d 100644 --- a/packages/core/src/data-editor/data-editor.tsx +++ b/packages/core/src/data-editor/data-editor.tsx @@ -99,6 +99,8 @@ export interface RowMarkerOptions { startIndex?: number; width?: number; theme?: Partial; + headerTheme?: Partial; + headerAlwaysVisible?: boolean; } interface MouseState { @@ -861,6 +863,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction({ height: 1, diff --git a/packages/core/src/docs/examples/row-markers.stories.tsx b/packages/core/src/docs/examples/row-markers.stories.tsx index 1182f157e..905a9d944 100644 --- a/packages/core/src/docs/examples/row-markers.stories.tsx +++ b/packages/core/src/docs/examples/row-markers.stories.tsx @@ -46,7 +46,11 @@ export const RowMarkers: React.VFC = 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} diff --git a/packages/core/src/internal/data-grid/data-grid-types.ts b/packages/core/src/internal/data-grid/data-grid-types.ts index 504003a64..799a89b9c 100644 --- a/packages/core/src/internal/data-grid/data-grid-types.ts +++ b/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; + headerRowMarkerAlwaysVisible?: boolean; }; /** @category Columns */ diff --git a/packages/core/src/internal/data-grid/render/data-grid-lib.ts b/packages/core/src/internal/data-grid/render/data-grid-lib.ts index 3a4631dea..85729ddf3 100644 --- a/packages/core/src/internal/data-grid/render/data-grid-lib.ts +++ b/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] diff --git a/packages/core/src/internal/data-grid/render/data-grid-render.header.ts b/packages/core/src/internal/data-grid/render/data-grid-render.header.ts index 84b0e44cb..a92b1a83e 100644 --- a/packages/core/src/internal/data-grid/render/data-grid-render.header.ts +++ b/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;