support styles under DataRow of DataGrid widget (#1079)

Author: anserwaseem

.changeset/gorgeous-donuts-tan.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+support styles under DataRow of DataGrid widget

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

@@ -417,6 +417,9 @@ View:
                         key: ${dummyData.id}
                         template:
                           DataRow:
+                            styles:
+                              backgroundColor: ${index % 2 === 0 ? "beige" :"lightgreen"}
+                              border: 4px double blue
                             disableSelection: ${dummyData.id === 2}
                             item-template:
                               data: ${Object.values(dummyData)}

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

@@ -15,6 +15,7 @@ import {
   useRegisterBindings,
   type EnsembleAction,
   unwrapWidget,
+  evaluateDeep,
 } from "@ensembleui/react-framework";
 import React, {
   useCallback,
@@ -81,6 +82,7 @@ export interface DataGridRowTemplate {
     disableSelection?: Expression<boolean>;
     onTap?: EnsembleAction;
     children?: EnsembleWidget[];
+    styles?: EnsembleWidgetStyles;
   } & HasItemTemplate;
 }
 
@@ -475,7 +477,20 @@ export const DataGrid: React.FC<GridProps> = (props) => {
           key={resolvedWidgetId}
           onChange={onChange}
           onRow={(record, recordIndex) => {
-            return { onClick: () => onTapActionCallback(record, recordIndex) };
+            const rowStyles = itemTemplate.template.properties.styles;
+            const recordStyles = rowStyles
+              ? evaluateDeep(
+                  rowStyles as {
+                    [key: string]: unknown;
+                  },
+                  defaultScreenContext.model,
+                  { ...record, index: recordIndex },
+                )
+              : {};
+            return {
+              onClick: () => onTapActionCallback(record, recordIndex),
+              style: recordStyles,
+            };
           }}
           pagination={paginationObject}
           rowKey={(data: unknown) => {
@@ -613,6 +628,9 @@ export const DataGrid: React.FC<GridProps> = (props) => {
             height: 100%;
             cursor: col-resize;
           }
+          #${resolvedWidgetId} table {
+              border-collapse: collapse;
+          }
 
           #${resolvedWidgetId} .ant-table-thead > tr > th {
             ${