Add empty space when Table's page is not fullfilled
This commit is contained in:
parent
20d9ca92f9
commit
31d0d941ca
|
@ -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
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue