fix: added support for disable row selection (#1055)

Author: sagardspeed2

.changeset/hot-cobras-count.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Added support for disable row selection based on needed per row

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -417,6 +417,7 @@ View:
                         key: ${dummyData.id}
                         template:
                           DataRow:
+                            disableSelection: ${dummyData.id === 2}
                             item-template:
                               data: ${Object.values(dummyData)}
                               name: value

packages/runtime/src/widgets/DataGrid/DataCell.tsx

@@ -15,6 +15,7 @@ export interface DataCellProps {
   columnIndex: number;
   rowIndex: number;
 }
+
 export const DataCell: React.FC<DataCellProps> = memo(
   ({ template, columnIndex, rowIndex, data }) => {
     const { "item-template": itemTemplate, children } = template.properties;

packages/runtime/src/widgets/DataGrid/DataGrid.tsx

@@ -78,6 +78,7 @@ export interface DataGridStyles extends Partial<EnsembleWidgetStyles> {
 export interface DataGridRowTemplate {
   name: "DataRow";
   properties: {
+    disableSelection?: Expression<boolean>;
     onTap?: EnsembleAction;
     children?: EnsembleWidget[];
   } & HasItemTemplate;
@@ -449,6 +450,22 @@ export const DataGrid: React.FC<GridProps> = (props) => {
     return [];
   }, [values?.DataColumns, values?.allowResizableColumns, colWidth]);
 
+  const handleRowSelectableOrNot = useCallback(
+    (record: unknown): boolean => {
+      const { disableSelection } = itemTemplate.template.properties;
+
+      if (!disableSelection) return false;
+      if (disableSelection === true) return true;
+
+      return evaluate(
+        defaultScreenContext,
+        disableSelection,
+        record as { [key: string]: unknown },
+      );
+    },
+    [itemTemplate.template],
+  );
+
   return (
     <div id={resolvedWidgetId} ref={containerRef}>
       <div ref={rootRef}>
@@ -487,6 +504,11 @@ export const DataGrid: React.FC<GridProps> = (props) => {
                       onRowsSelectedCallback(selectedRowKeys, selectedRows);
                     }
                   },
+                  getCheckboxProps: (record) => {
+                    return {
+                      disabled: handleRowSelectableOrNot(record),
+                    };
+                  },
                   defaultSelectedRowKeys: values?.defaultSelectedRowKeys,
                   selectedRowKeys: rowsKey.length ? rowsKey : undefined,
                 }