Add empty space when Table's page is not fullfilled

This commit is contained in:
apanizo 2018-10-24 12:15:23 +02:00
parent 20d9ca92f9
commit 31d0d941ca
2 changed files with 27 additions and 1 deletions

View File

@ -3,10 +3,13 @@ import * as React from 'react'
import { List } from 'immutable'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'
import { withStyles } from '@material-ui/core/styles'
import TablePagination from '@material-ui/core/TablePagination'
import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
import TableHead, { type Column } from '~/components/Table/TableHead'
import { xl } from '~/theme/variables'
type Props<K> = {
label: string,
@ -42,9 +45,15 @@ const styles = {
paginationRoot: {
backgroundColor: 'white',
boxShadow: '0 2px 4px 0 rgba(74, 85, 121, 0.5)',
marginBottom: xl,
},
empty: {
},
}
const FIXED_HEIGHT = 49
class GnoTable<K> extends React.Component<Props<K>, State> {
state = {
page: 0,
@ -68,7 +77,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
}))
}
handleChangePage = (page: number) => {
handleChangePage = (e: SyntheticInputEvent<HTMLInputElement>, page: number) => {
this.setState({ page })
}
@ -103,6 +112,11 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
const sortedData = stableSort(data, getSorting(order, orderBy, orderProp), fixed)
.slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage))
const emptyStyle = {
height: FIXED_HEIGHT * emptyRows,
}
return (
<React.Fragment>
<Table aria-labelledby={label} className={classes.root}>
@ -114,6 +128,11 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
/>
<TableBody>
{ children(sortedData) }
{ emptyRows > 0 &&
<TableRow style={emptyStyle}>
<TableCell colSpan={4} />
</TableRow>
}
</TableBody>
</Table>
<TablePagination

View File

@ -14,6 +14,13 @@ export type BalanceRow = SortRow & {
}
export const getBalanceData = (): Array<BalanceRow> => [
{
[BALANCE_TABLE_ASSET_ID]: 'CVL Journalism',
[BALANCE_TABLE_BALANCE_ID]: '234 CVL',
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 234,
[BALANCE_TABLE_VALUE_ID]: '$6700',
[buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 6700,
},
{
[BALANCE_TABLE_ASSET_ID]: 'ABC Periodico',
[BALANCE_TABLE_BALANCE_ID]: '1.394 ABC',