Lucas/t 295 fix checkbox column width (#261)

* wip

* Fixed table and column width

* Use last resizable column instead of table width 100%

* Removed comments

* Fix lint

* Fixed table theme

* Removed left clickable margin

* Removed overflow

* Added table width

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -15,10 +15,7 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  width: 32px;
   height: 32px;
-  margin-left: -${(props) => props.theme.table.horizontalCellMargin};
-  padding-left: ${(props) => props.theme.table.horizontalCellMargin};
 
   display: flex;
   align-items: center;

front/src/modules/ui/components/table/EntityTable.tsx

@@ -39,8 +39,8 @@ type OwnProps<
 };
 
 const StyledTable = styled.table`
-  min-width: 1000px;
+  width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
-  width: calc(100% - 2 * ${(props) => props.theme.table.horizontalCellMargin});
+
   border-radius: 4px;
   border-spacing: 0;
   border-collapse: collapse;
@@ -54,11 +54,17 @@ const StyledTable = styled.table`
     padding: 0;
     border: 1px solid ${(props) => props.theme.tertiaryBackground};
     text-align: left;
+
     :last-child {
       border-right-color: transparent;
     }
     :first-of-type {
       border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    :last-of-type {
+      width: 100%;
+      min-width: 0;
     }
   }
 
@@ -67,12 +73,19 @@ const StyledTable = styled.table`
     color: ${(props) => props.theme.text80};
     padding: 0;
     border: 1px solid ${(props) => props.theme.tertiaryBackground};
+
     text-align: left;
+
     :last-child {
       border-right-color: transparent;
     }
     :first-of-type {
       border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    :last-of-type {
+      width: 100%;
+      min-width: 0;
     }
   }
 `;
@@ -160,7 +173,9 @@ export function EntityTable<
                   <th
                     key={header.id}
                     style={{
-                      width: `${header.getSize()}px`,
+                      width: header.column.getSize(),
+                      minWidth: header.column.getSize(),
+                      maxWidth: header.column.getSize(),
                     }}
                   >
                     {header.isPlaceholder
@@ -171,6 +186,7 @@ export function EntityTable<
                         )}
                   </th>
                 ))}
+                <th></th>
               </tr>
             ))}
           </thead>
@@ -188,6 +204,11 @@ export function EntityTable<
                       onContextMenu={(event) =>
                         handleContextMenu(event, row.original.id)
                       }
+                      style={{
+                        width: cell.column.getSize(),
+                        minWidth: cell.column.getSize(),
+                        maxWidth: cell.column.getSize(),
+                      }}
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
@@ -196,6 +217,7 @@ export function EntityTable<
                     </td>
                   );
                 })}
+                <td></td>
               </StyledRow>
             ))}
           </tbody>

front/src/modules/ui/layout/styles/themes.ts

@@ -21,6 +21,7 @@ const commonTheme = {
 
   table: {
     horizontalCellMargin: '8px',
+    checkboxColumnWidth: '32px',
   },
 
   borderRadius: '4px',

front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx

@@ -0,0 +1,27 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
+import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
+
+export function getCheckBoxColumn() {
+  return {
+    id: 'select',
+    header: ({ table }: any) => (
+      <SelectAllCheckbox
+        checked={table.getIsAllRowsSelected()}
+        indeterminate={table.getIsSomeRowsSelected()}
+        onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
+      />
+    ),
+    cell: (props: CellContext<any, string>) => (
+      <CheckboxCell
+        id={`checkbox-selected-${props.row.original.id}`}
+        name={`checkbox-selected-${props.row.original.id}`}
+        checked={props.row.getIsSelected()}
+        onChange={(newValue) => props.row.toggleSelected(newValue)}
+      />
+    ),
+    size: 32,
+    maxSize: 32,
+  };
+}

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -33,7 +33,7 @@ export const SortByName: Story = {
       (await canvas.findAllByRole('checkbox')).map((item) => {
         return item.getAttribute('id');
       })[1],
-    ).toStrictEqual('company-selected-89bb825c-171e-4bcc-9cf7-43448d6fb278');
+    ).toStrictEqual('checkbox-selected-89bb825c-171e-4bcc-9cf7-43448d6fb278');
 
     const cancelButton = canvas.getByText('Cancel');
     await userEvent.click(cancelButton);

front/src/pages/companies/companies-columns.tsx

@@ -7,7 +7,7 @@ import {
   TbSum,
   TbUser,
 } from 'react-icons/tb';
-import { CellContext, createColumnHelper } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
 
 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
 import { Company } from '@/companies/interfaces/company.interface';
@@ -21,9 +21,8 @@ import { SEARCH_USER_QUERY } from '@/search/services/search';
 import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
-import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
-import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
+import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
 import { QueryMode } from '~/generated/graphql';
 
@@ -32,25 +31,7 @@ const columnHelper = createColumnHelper<Company>();
 export const useCompaniesColumns = () => {
   return useMemo(() => {
     return [
-      {
+      getCheckBoxColumn(),
-        id: 'select',
-        header: ({ table }: any) => (
-          <SelectAllCheckbox
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
-          />
-        ),
-        cell: (props: CellContext<Company, string>) => (
-          <CheckboxCell
-            id={`company-selected-${props.row.original.id}`}
-            name={`company-selected-${props.row.original.id}`}
-            checked={props.row.getIsSelected()}
-            onChange={(newValue) => props.row.toggleSelected(newValue)}
-          />
-        ),
-        size: 25,
-      },
       columnHelper.accessor('name', {
         header: () => (
           <ColumnHead viewName="Name" viewIcon={<TbBuilding size={16} />} />
@@ -58,7 +39,7 @@ export const useCompaniesColumns = () => {
         cell: (props) => (
           <CompanyEditableNameChipCell company={props.row.original} />
         ),
-        size: 120,
+        size: 180,
       }),
       columnHelper.accessor('domainName', {
         header: () => (
@@ -98,7 +79,7 @@ export const useCompaniesColumns = () => {
             }}
           />
         ),
-        size: 70,
+        size: 150,
       }),
       columnHelper.accessor('address', {
         header: () => (
@@ -131,7 +112,7 @@ export const useCompaniesColumns = () => {
             }}
           />
         ),
-        size: 70,
+        size: 150,
       }),
       columnHelper.accessor('accountOwner', {
         header: () => (

front/src/pages/people/__stories__/People.sortBy.stories.tsx

@@ -35,7 +35,7 @@ export const Email: Story = {
       (await canvas.findAllByRole('checkbox')).map((item) => {
         return item.getAttribute('id');
       })[1],
-    ).toStrictEqual('person-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
+    ).toStrictEqual('checkbox-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
   },
   parameters: {
     msw: graphqlMocks,

front/src/pages/people/people-columns.tsx

@@ -7,7 +7,7 @@ import {
   TbPhone,
   TbUser,
 } from 'react-icons/tb';
-import { CellContext, createColumnHelper } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
 import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
@@ -16,34 +16,15 @@ import { updatePerson } from '@/people/services';
 import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
-import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
-import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
+import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 
 const columnHelper = createColumnHelper<Person>();
 
 export const usePeopleColumns = () => {
   return useMemo(() => {
     return [
-      {
+      getCheckBoxColumn(),
-        id: 'select',
-        header: ({ table }: any) => (
-          <SelectAllCheckbox
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
-          />
-        ),
-        cell: (props: CellContext<Person, string>) => (
-          <CheckboxCell
-            id={`person-selected-${props.row.original.id}`}
-            name={`person-selected-${props.row.original.id}`}
-            checked={props.row.getIsSelected()}
-            onChange={(newValue) => props.row.toggleSelected(newValue)}
-          />
-        ),
-        size: 25,
-      },
       columnHelper.accessor('firstname', {
         header: () => (
           <ColumnHead viewName="People" viewIcon={<TbUser size={16} />} />