diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
index fbe7db8aa7..17107cf5bc 100644
--- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -9,6 +9,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Added
- We added configurable selection count visibility and clear selection button label template for improved row selection management.
+- We added the possiblity to configure the first row of a DataGrid to be auto-selected on first load, facilitating master-detail views.
+
+### Fixed
- We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
index abd7f1cfb2..09e1873507 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
@@ -165,6 +165,10 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
hidePropertyIn(defaultProperties, values, "itemSelectionMode");
}
+ if (itemSelection !== "Single") {
+ hidePropertyIn(defaultProperties, values, "selectFirstRow");
+ }
+
if (itemSelection !== "Multi" || itemSelectionMethod !== "checkbox") {
hidePropertyIn(defaultProperties, values, "showSelectAllToggle");
}
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 82dcc6a041..3a42c95731 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -38,7 +38,8 @@ const Container = observer((props: Props): ReactElement => {
props.itemSelection,
props.datasource,
props.onSelectionChange,
- props.keepSelection ? "always keep" : "always clear"
+ props.keepSelection || props.selectFirstRow ? "always keep" : "always clear",
+ props.selectFirstRow
);
const selectActionHelper = useSelectActionHelper(props, selectionHelper);
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
index afb1d00ec4..8c7957c532 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
@@ -37,6 +37,10 @@
Row click
+
+ Auto select first row
+ Automatically select the first row
+
Toggle on click
Defines item selection behavior.
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
index 513d2d6282..35a3df2c03 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -95,6 +95,7 @@ export interface DatagridContainerProps {
refreshInterval: number;
itemSelection?: SelectionSingleValue | SelectionMultiValue;
itemSelectionMethod: ItemSelectionMethodEnum;
+ selectFirstRow: boolean;
itemSelectionMode: ItemSelectionModeEnum;
showSelectAllToggle: boolean;
keepSelection: boolean;
@@ -149,6 +150,7 @@ export interface DatagridPreviewProps {
refreshInterval: number | null;
itemSelection: "None" | "Single" | "Multi";
itemSelectionMethod: ItemSelectionMethodEnum;
+ selectFirstRow: boolean;
itemSelectionMode: ItemSelectionModeEnum;
showSelectAllToggle: boolean;
keepSelection: boolean;
diff --git a/packages/shared/widget-plugin-grid/src/selection/helpers.ts b/packages/shared/widget-plugin-grid/src/selection/helpers.ts
index 05738b5416..07ef928bf6 100644
--- a/packages/shared/widget-plugin-grid/src/selection/helpers.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/helpers.ts
@@ -343,10 +343,12 @@ export function useSelectionHelper(
selection: SelectionSingleValue | SelectionMultiValue | undefined,
dataSource: ListValue,
onSelectionChange: ActionValue | undefined,
- keepSelection: Parameters[0]
+ keepSelection: Parameters[0],
+ selectFirstRow?: boolean
): SelectionHelper | undefined {
const prevObjectListRef = useRef([]);
const firstLoadDone = useRef(false);
+ const hasAutoSelected = useRef(false);
useState(() => {
if (selection) {
selection.setKeepSelection(selectionStateHandler(keepSelection));
@@ -354,6 +356,27 @@ export function useSelectionHelper(
});
firstLoadDone.current ||= dataSource?.status !== "loading";
+ useEffect(() => {
+ if (
+ selectFirstRow &&
+ dataSource.status === "available" &&
+ dataSource.items &&
+ dataSource.items.length > 0 &&
+ selection &&
+ selection.type === "Single" &&
+ !selection.selection &&
+ !hasAutoSelected.current
+ ) {
+ setTimeout(() => {
+ if (!selection.selection) {
+ const firstItem = dataSource.items![0];
+ selection.setSelection(firstItem);
+ hasAutoSelected.current = true;
+ }
+ }, 100);
+ }
+ }, [dataSource.status, dataSource.items, selectFirstRow, selection]);
+
useEffect(() => {
const prevObjectList = prevObjectListRef.current;
const current = selection?.selection ?? [];