From d2f645ae13dfb5d4cc430fc48533e5de140f638c Mon Sep 17 00:00:00 2001
From: nidhinrajr <phoenix.nidhin@gmail.com>
Date: Thu, 17 Oct 2024 00:06:43 +0530
Subject: [PATCH] corrected checkbox alignment in DataGrid

---
 CHANGELOG.md              | 1 +
 src/DataGrid/DataGrid.tsx | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5912382..80dfc7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@
 - Updated Tooltip title type with React.ReactNode from string so as to accept string as well as html node.
 - Added `tooltipPlacement` prop to the `MultipleSelectChip`, `Autocomplete` and `Panel` component. 
 - Updated icon button spacing in Snackbar
+- Adjusted checkbox alignment in `DataGrid` component
 
 ### Breaking changes
 
diff --git a/src/DataGrid/DataGrid.tsx b/src/DataGrid/DataGrid.tsx
index 5b95c92..a56efc9 100644
--- a/src/DataGrid/DataGrid.tsx
+++ b/src/DataGrid/DataGrid.tsx
@@ -98,6 +98,11 @@ const StyledDataGrid = styled(MuiDataGrid)<DataGridProps>((props) => {
     ' .MuiDataGrid-cell': {
       borderBottom: `1px ${theme.palette.border.secondary} solid`,
     },
+    '& .MuiDataGrid-row': {
+      '.MuiCheckbox-root': {
+        marginRight: '0',
+      },
+    },
     '& .MuiDataGrid-row:hover': {
       backgroundColor: theme.palette.action.hover,
       '.MuiCheckbox-root': {
@@ -310,6 +315,8 @@ const DataGrid = ({ components, componentsProps, ...props }: DataGridProps) => {
     if (event.key === 'Enter' || event.key === ' ') {
       if (rowCheckbox) {
         rowCheckbox.click();
+      } else if (event.key === 'Enter') {
+        target.click();
       }
     }
     // add navigation control if user press arrow right it will focus on action button on a row