diff --git a/front/src/modules/ui/components/table/CheckboxCell.tsx b/front/src/modules/ui/components/table/CheckboxCell.tsx
index 10ec08327..42ab35120 100644
--- a/front/src/modules/ui/components/table/CheckboxCell.tsx
+++ b/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;
diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx
index 478d6c24d..f0115f66e 100644
--- a/front/src/modules/ui/components/table/EntityTable.tsx
+++ b/front/src/modules/ui/components/table/EntityTable.tsx
@@ -39,8 +39,8 @@ type OwnProps<
};
const StyledTable = styled.table`
- min-width: 1000px;
- width: calc(100% - 2 * ${(props) => props.theme.table.horizontalCellMargin});
+ width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
+
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<
{header.isPlaceholder
@@ -171,6 +186,7 @@ export function EntityTable<
)}
|
))}
+ |
))}
@@ -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<
);
})}
+ |
))}
diff --git a/front/src/modules/ui/layout/styles/themes.ts b/front/src/modules/ui/layout/styles/themes.ts
index 30047daac..c8c1feeb1 100644
--- a/front/src/modules/ui/layout/styles/themes.ts
+++ b/front/src/modules/ui/layout/styles/themes.ts
@@ -21,6 +21,7 @@ const commonTheme = {
table: {
horizontalCellMargin: '8px',
+ checkboxColumnWidth: '32px',
},
borderRadius: '4px',
diff --git a/front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx b/front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx
new file mode 100644
index 000000000..224b5e48f
--- /dev/null
+++ b/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) => (
+ table.toggleAllRowsSelected(newValue)}
+ />
+ ),
+ cell: (props: CellContext) => (
+ props.row.toggleSelected(newValue)}
+ />
+ ),
+ size: 32,
+ maxSize: 32,
+ };
+}
diff --git a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
index ca31d66fc..fae83e435 100644
--- a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
+++ b/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);
diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx
index eab2ccd85..14a920f6d 100644
--- a/front/src/pages/companies/companies-columns.tsx
+++ b/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();
export const useCompaniesColumns = () => {
return useMemo(() => {
return [
- {
- id: 'select',
- header: ({ table }: any) => (
- table.toggleAllRowsSelected(newValue)}
- />
- ),
- cell: (props: CellContext) => (
- props.row.toggleSelected(newValue)}
- />
- ),
- size: 25,
- },
+ getCheckBoxColumn(),
columnHelper.accessor('name', {
header: () => (
} />
@@ -58,7 +39,7 @@ export const useCompaniesColumns = () => {
cell: (props) => (
),
- 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: () => (
diff --git a/front/src/pages/people/__stories__/People.sortBy.stories.tsx b/front/src/pages/people/__stories__/People.sortBy.stories.tsx
index 70a5f1346..4d747caf4 100644
--- a/front/src/pages/people/__stories__/People.sortBy.stories.tsx
+++ b/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,
diff --git a/front/src/pages/people/people-columns.tsx b/front/src/pages/people/people-columns.tsx
index 97d42d2aa..afedcd4f8 100644
--- a/front/src/pages/people/people-columns.tsx
+++ b/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();
export const usePeopleColumns = () => {
return useMemo(() => {
return [
- {
- id: 'select',
- header: ({ table }: any) => (
- table.toggleAllRowsSelected(newValue)}
- />
- ),
- cell: (props: CellContext) => (
- props.row.toggleSelected(newValue)}
- />
- ),
- size: 25,
- },
+ getCheckBoxColumn(),
columnHelper.accessor('firstname', {
header: () => (
} />