add multiple grid row selection handler

Author: b-yogesh

chartlets.js/packages/lib/src/plugins/mui/DataGrid.test.tsx

@@ -50,7 +50,7 @@ describe("DataGrid", () => {
     expect(recordedEvents[0].componentType).toBe("DataGrid");
     expect(recordedEvents[0].id).toBe("datagridId");
     expect(recordedEvents[0].property).toBe("value");
-    expect(recordedEvents[0].value).toEqual(mockRows[0]);
+    expect(recordedEvents[0].value).toEqual(mockRows);
   });
 
   it("should render with other props correctly", () => {

chartlets.js/packages/lib/src/plugins/mui/DataGrid.tsx

@@ -1,11 +1,9 @@
 import {
   DataGrid as MuiDataGrid,
-  type GridCallbackDetails,
   type GridColDef,
   type GridPaginationModel,
   type GridRowModel,
-  type GridRowParams,
-  type MuiEvent,
+  type GridRowSelectionModel,
 } from "@mui/x-data-grid";
 import type { ComponentProps, ComponentState } from "@/index";
 
@@ -78,17 +76,16 @@ export const DataGrid = ({
     return;
   }
 
-  const handleClick = (
-    params: GridRowParams,
-    _event: MuiEvent,
-    _details: GridCallbackDetails,
-  ) => {
+  const onRowsSelectionHandler = (ids: GridRowSelectionModel) => {
     if (id) {
+      const selectedRowsData = ids.map((id) =>
+        rows?.find((row) => row.id === id),
+      );
       onChange({
         componentType: type,
         id: id,
         property: "value",
-        value: params.row,
+        value: selectedRowsData,
       });
     }
   };
@@ -117,7 +114,7 @@ export const DataGrid = ({
         hideFooterPagination={hideFooterPagination}
         initialState={initialState}
         loading={loading}
-        onRowClick={handleClick}
+        onRowSelectionModelChange={onRowsSelectionHandler}
         paginationModel={paginationModel}
         pageSizeOptions={pageSizeOptions}
         rowHeight={rowHeight}