Fix hidden table pagination

This commit is contained in:
IshaVenikar 2024-10-23 12:45:19 +05:30
parent f8a7e32c78
commit ab36b88c2f

View File

@ -11,8 +11,8 @@ import Button from '@material-ui/core/Button';
import TableHead from '@material-ui/core/TableHead'; import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow'; import TableRow from '@material-ui/core/TableRow';
import TableBody from '@material-ui/core/TableBody'; import TableBody from '@material-ui/core/TableBody';
import TableFooter from '@material-ui/core/TableFooter';
import TablePagination from '@material-ui/core/TablePagination'; import TablePagination from '@material-ui/core/TablePagination';
import { Paper, TableContainer, } from '@material-ui/core';
import WNS_RECORDS from '../../../gql/wns_records.graphql'; import WNS_RECORDS from '../../../gql/wns_records.graphql';
@ -108,6 +108,12 @@ const RegistryRecords = ({ type }) => {
}; };
return ( return (
<Paper style={{
width: '100%',
}}>
<TableContainer style={{
maxHeight: 800,
}}>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
@ -121,8 +127,7 @@ const RegistryRecords = ({ type }) => {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{records.sort(sorter) {records.sort(sorter).map((record) => {
.map((record) => {
const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record; const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;
let pkgLink; let pkgLink;
@ -150,28 +155,19 @@ const RegistryRecords = ({ type }) => {
<TableCell monospace> <TableCell monospace>
{appLinks || (names || []).map(name => <div key={name}>{name}</div>)} {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
</TableCell> </TableCell>
<TableCell monospace> <TableCell monospace>{version}</TableCell>
{version} <TableCell>{displayName || service || fileName || description}</TableCell>
</TableCell> <TableCell>{moment.utc(createTime).fromNow()}</TableCell>
<TableCell> <TableCell monospace>{pkgLink}</TableCell>
{displayName || service || fileName || description}
</TableCell>
<TableCell>
{moment.utc(createTime).fromNow()}
</TableCell>
<TableCell monospace>
{pkgLink}
</TableCell>
<TableCell> <TableCell>
<QueryLink config={config} id={id} icon /> <QueryLink config={config} id={id} icon />
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
} })}
)}
</TableBody> </TableBody>
<TableFooter> </Table>
<TableRow> </TableContainer>
<TablePagination <TablePagination
component="td" component="td"
rowsPerPageOptions={[5, 10, 25]} rowsPerPageOptions={[5, 10, 25]}
@ -185,9 +181,7 @@ const RegistryRecords = ({ type }) => {
disabled: records.length < rowsPerPage, disabled: records.length < rowsPerPage,
}} }}
/> />
</TableRow> </Paper>
</TableFooter>
</Table>
); );
}; };