corrected checkbox alignment in DataGrid

HCL-TECH-SOFTWARE · Oct 16, 2024 · d2f645a · d2f645a
1 parent c5516eb
commit d2f645a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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