diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx index 7a3c89d86..4736b1099 100644 --- a/packages/core/src/data-editor/data-editor.tsx +++ b/packages/core/src/data-editor/data-editor.tsx @@ -877,6 +877,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction({ @@ -1795,7 +1798,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction ( + + + You can enable row selections by setting rowSelect prop to{" "} + multi for multi-selection or single for + single-selection. The row marker behavior and appearance can be controlled via the{" "} + rowMarkers prop. + + }> + + + + ), + ], +}; + +interface RowSelectionsProps { + rowSelect: "none" | "single" | "multi"; + rowSelectionMode: "auto" | "multi"; + rowMarkersKind: RowMarkerOptions["kind"]; + rowMarkersCheckboxStyle: RowMarkerOptions["checkboxStyle"]; +} + +export const RowSelections: React.FC = p => { + const { cols, getCellContent } = useMockDataGenerator(30); + + return ( + + ); +}; +(RowSelections as any).args = { + rowSelect: "single", + rowSelectionMode: "auto", + rowMarkersKind: "checkbox-visible", + rowMarkersCheckboxStyle: "circle", +}; +(RowSelections as any).argTypes = { + rowSelect: { + control: { type: "select" }, + options: ["none", "single", "multi"], + }, + rowSelectionMode: { + control: { type: "select" }, + options: ["auto", "multi"], + }, + rowMarkersKind: { + control: { type: "select" }, + options: ["both", "checkbox", "number", "none", "clickable-number", "checkbox-visible"], + }, + rowMarkersCheckboxStyle: { + control: { type: "select" }, + options: ["square", "circle"], + }, +}; 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 e4dd9a75f..6460740cd 100644 --- a/packages/core/src/internal/data-grid/data-grid-types.ts +++ b/packages/core/src/internal/data-grid/data-grid-types.ts @@ -197,6 +197,7 @@ export type InnerColumnExtension = { rowMarkerChecked?: BooleanIndeterminate | boolean; headerRowMarkerTheme?: Partial; headerRowMarkerAlwaysVisible?: boolean; + headerRowMarkerDisabled?: 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 85729ddf3..5b5d7b310 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 @@ -47,6 +47,7 @@ export function useMappedColumns( rowMarkerChecked: c.rowMarkerChecked, headerRowMarkerTheme: c.headerRowMarkerTheme, headerRowMarkerAlwaysVisible: c.headerRowMarkerAlwaysVisible, + headerRowMarkerDisabled: c.headerRowMarkerDisabled, }) ), [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 a92b1a83e..5828a4273 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 @@ -428,7 +428,7 @@ function drawHeaderInner( isRtl: boolean, headerLayout: HeaderLayout ) { - if (c.rowMarker !== undefined) { + if (c.rowMarker !== undefined && c.headerRowMarkerDisabled !== true) { const checked = c.rowMarkerChecked; if (checked !== true && c.headerRowMarkerAlwaysVisible !== true) { ctx.globalAlpha = hoverAmount; diff --git a/packages/core/test/data-grid-lib.test.ts b/packages/core/test/data-grid-lib.test.ts index 6848a92b3..a0f0d35c3 100644 --- a/packages/core/test/data-grid-lib.test.ts +++ b/packages/core/test/data-grid-lib.test.ts @@ -21,6 +21,7 @@ function makeCol(title: string, sourceIndex: number, sticky: boolean, width: num grow: undefined, headerRowMarkerAlwaysVisible: undefined, headerRowMarkerTheme: undefined, + headerRowMarkerDisabled: undefined, hasMenu: undefined, icon: undefined, id: undefined,