fix table checkbox alignment

razorpay · Nov 22, 2023 · d30d9ab · d30d9ab
1 parent d02f2ab
commit d30d9ab
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -230,7 +230,13 @@ const TableCheckboxCell = ({
 }): React.ReactElement => {
   return (
     <TableCell>
-      <BaseBox width={makeSize(checkboxCellWidth)}>
+      <BaseBox
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+        width={makeSize(checkboxCellWidth)}
+      >
         <Checkbox isDisabled={isDisabled} isChecked={isChecked} onChange={onChange} />
       </BaseBox>
     </TableCell>

diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -183,7 +183,9 @@ const TableHeaderCellCheckbox = ({
 }): React.ReactElement => {
   return (
     <TableHeaderCell headerKey="SELECT">
-      <Checkbox isChecked={isChecked} isIndeterminate={isIndeterminate} onChange={onChange} />
+      <BaseBox display="flex" alignItems="center" justifyContent="center" flex={1}>
+        <Checkbox isChecked={isChecked} isIndeterminate={isIndeterminate} onChange={onChange} />
+      </BaseBox>
     </TableHeaderCell>
   );
 };