Applied checkbox column to have fix width across all boards

harshit078 · Nov 13, 2024 · cb58911 · cb58911
1 parent 317fcdc
commit cb58911
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
@@ -54,6 +54,23 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     recordTableId,
   );
 
+  const numColumnsState = useRecoilComponentCallbackStateV2(
+    tableColumnsComponentState,
+    recordTableId,
+  );
+
+  const setNumColumns = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const tableColumns = getSnapshotValue(
+          snapshot,
+          numColumnsState,
+        );
+        return tableColumns?.filter(column => column.isVisible).length || 0;
+      },
+    [numColumnsState],
+  )();
+
   const setAvailableTableColumns = useRecoilCallback(
     ({ snapshot, set }) =>
       (columns: ColumnDefinition<FieldMetadata>[]) => {
@@ -273,5 +290,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     setOnToggleColumnFilter,
     setOnToggleColumnSort,
     setPendingRecordId,
+    setNumColumns,
   };
 };
diff --git a/...ct-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/...ct-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { Checkbox } from 'twenty-ui';
+import { Checkbox, MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -13,21 +13,30 @@ const StyledContainer = styled.div`
   background-color: ${({ theme }) => theme.background.primary};
 `;
 
-const StyledColumnHeaderCell = styled.th`
+const StyledColumnHeaderCell = styled.th<{ setNumColumns: number }>`
   background-color: ${({ theme }) => theme.background.primary};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-right: transparent;
-  max-width: 30px;
-  min-width: 30px;
-  width: 30px;
+  text-align: center;
+  width: ${({ setNumColumns }) => {
+    return setNumColumns <= 6 ? '22px' : '32px';
+  }};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 32px;
+  }
 `;
 
 export const RecordTableHeaderCheckboxColumn = () => {
   const allRowsSelectedStatus = useRecoilComponentValueV2(
     allRowsSelectedStatusComponentSelector,
   );
-  const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } =
-    useRecordTable();
+  const {
+    selectAllRows,
+    resetTableRowSelection,
+    setHasUserSelectedAllRows,
+    setNumColumns,
+  } = useRecordTable();
 
   const checked = allRowsSelectedStatus === 'all';
   const indeterminate = allRowsSelectedStatus === 'some';
@@ -37,12 +46,13 @@ export const RecordTableHeaderCheckboxColumn = () => {
       setHasUserSelectedAllRows(true);
       selectAllRows();
     } else {
+      setHasUserSelectedAllRows(false);
       resetTableRowSelection();
     }
   };
 
   return (
-    <StyledColumnHeaderCell>
+    <StyledColumnHeaderCell setNumColumns={setNumColumns}>
       <StyledContainer>
         <Checkbox
           hoverable