public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Profile page: Add horizontal scroll for teams table (#105111)

Browse Source 
add horizontal scroll for teams table
This commit is contained in:
Ashley Harrison
2025-05-08 14:10:06 +01:00
committed by GitHub
parent f0216431af
commit 0acfa001fd
1 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/profile/UserTeams.tsx
+36 -34
View File
@@ -1,6 +1,6 @@
import { PureComponent } from 'react';
import { LoadingPlaceholder } from '@grafana/ui';
import { LoadingPlaceholder, ScrollContainer } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { Team } from 'app/types';
@@ -26,39 +26,41 @@ export class UserTeams extends PureComponent<Props> {
<h3 className="page-sub-heading">
<Trans i18nKey="profile.user-teams.teams">Teams</Trans>
</h3>
<table
className="filter-table form-inline"
aria-label={t('profile.user-teams.aria-label-user-teams-table', 'User teams table')}
>
<thead>
<tr>
<th />
<th>
<Trans i18nKey="profile.user-teams.name">Name</Trans>
</th>
<th>
<Trans i18nKey="profile.user-teams.email">Email</Trans>
</th>
<th>
<Trans i18nKey="profile.user-teams.members">Members</Trans>
</th>
</tr>
</thead>
<tbody>
{teams.map((team: Team, index) => {
return (
<tr key={index}>
<td className="width-4 text-center">
<img className="filter-table__avatar" src={team.avatarUrl} alt="" />
</td>
<td>{team.name}</td>
<td>{team.email}</td>
<td>{team.memberCount}</td>
</tr>
);
})}
</tbody>
</table>
<ScrollContainer overflowY="visible" overflowX="auto" width="100%">
<table
className="filter-table form-inline"
aria-label={t('profile.user-teams.aria-label-user-teams-table', 'User teams table')}
>
<thead>
<tr>
<th />
<th>
<Trans i18nKey="profile.user-teams.name">Name</Trans>
</th>
<th>
<Trans i18nKey="profile.user-teams.email">Email</Trans>
</th>
<th>
<Trans i18nKey="profile.user-teams.members">Members</Trans>
</th>
</tr>
</thead>
<tbody>
{teams.map((team: Team, index) => {
return (
<tr key={index}>
<td className="width-4 text-center">
<img className="filter-table__avatar" src={team.avatarUrl} alt="" />
</td>
<td>{team.name}</td>
<td>{team.email}</td>
<td>{team.memberCount}</td>
</tr>
);
})}
</tbody>
</table>
</ScrollContainer>
</div>
);
}