1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

fix: allow horizontal scroll in tokens table (#1080)

* fix: allow horizontal scroll in tokens table

* refactor: fix username column width

* refactor: always show username column since we now may scroll
This commit is contained in:
olav 2022-06-09 14:04:19 +02:00 committed by GitHub
parent 608171ce93
commit 97206760be

View File

@ -80,25 +80,29 @@ export const ApiTokenTable = () => {
<Box sx={{ mb: 4 }}>
<ApiTokenDocs />
</Box>
<SearchHighlightProvider value={globalFilter}>
<Table {...getTableProps()}>
<SortableTableHeader headerGroups={headerGroups as any} />
<TableBody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map(cell => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</SearchHighlightProvider>
<Box sx={{ overflowX: 'auto' }}>
<SearchHighlightProvider value={globalFilter}>
<Table {...getTableProps()}>
<SortableTableHeader
headerGroups={headerGroups as any}
/>
<TableBody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map(cell => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</SearchHighlightProvider>
</Box>
<ConditionallyRender
condition={rows.length === 0 && !loading}
show={
@ -125,7 +129,6 @@ export const ApiTokenTable = () => {
const useHiddenColumns = (): string[] => {
const { uiConfig } = useUiConfig();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const isMediumScreen = useMediaQuery(theme.breakpoints.down('md'));
return useMemo(() => {
@ -141,12 +144,8 @@ const useHiddenColumns = (): string[] => {
hidden.push('createdAt');
}
if (isSmallScreen) {
hidden.push('username');
}
return hidden;
}, [uiConfig, isSmallScreen, isMediumScreen]);
}, [uiConfig, isMediumScreen]);
};
const COLUMNS = [
@ -161,7 +160,6 @@ const COLUMNS = [
Header: 'Username',
accessor: 'username',
Cell: HighlightCell,
width: '60%',
},
{
Header: 'Type',