diff --git a/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx b/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx index ca1a5cdf88..408d7512d6 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx +++ b/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useRef, useEffect } from 'react' import { useTranslation } from 'react-i18next' import { User } from '../../../../../../types/group-management/user' import { useGroupMembersContext } from '../../context/group-members-context' @@ -28,6 +28,14 @@ export default function MembersList({ groupId }: ManagedUsersListProps) { const { users } = useGroupMembersContext() const managedUsersActive = getMeta('ol-managedUsersActive') const groupSSOActive = getMeta('ol-groupSSOActive') + const tHeadRowRef = useRef(null) + const [colSpan, setColSpan] = useState(0) + + useEffect(() => { + if (tHeadRowRef.current) { + setColSpan(tHeadRowRef.current.querySelectorAll('th').length) + } + }, []) return (
@@ -53,7 +61,7 @@ export default function MembersList({ groupId }: ManagedUsersListProps) { data-testid="managed-entities-table" > - + {t('email')} {t('name')} @@ -83,7 +91,7 @@ export default function MembersList({ groupId }: ManagedUsersListProps) { {users.length === 0 && ( - + {t('no_members')}