Adding Pagination to Table component

This commit is contained in:
apanizo 2018-10-18 13:49:12 +02:00
parent 1e59ef9bbd
commit 53b169bc42
2 changed files with 86 additions and 28 deletions

View File

@ -6,11 +6,11 @@ import TableBody from '@material-ui/core/TableBody'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'
import TableHead, { type Column } from '~/components/Table/TableHead'
import TablePagination from '@material-ui/core/TablePagination'
import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
type Props<K> = {
label: string,
rowsPerPage?: number,
defaultOrderBy: string,
columns: List<Column>,
data: Array<K>,
@ -21,6 +21,7 @@ type State = {
order: Order,
orderBy: string,
orderProp: boolean,
rowsPerPage: number,
}
class GnoTable<K> extends React.Component<Props<K>, State> {
@ -29,6 +30,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
order: 'desc',
orderBy: this.props.defaultOrderBy,
orderProp: false,
rowsPerPage: 5,
}
onSort = (property: string, orderProp: boolean) => {
@ -42,41 +44,71 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
this.setState({ order, orderBy, orderProp })
}
handleChangePage = (page: number) => {
this.setState({ page })
}
handleChangeRowsPerPage = (event: SyntheticInputEvent<HTMLInputElement>) => {
const rowsPerPage = Number(event.target.value)
this.setState({ rowsPerPage })
}
render() {
const {
data, label, columns, rowsPerPage = 5,
data, label, columns,
} = this.props
const {
order, orderBy, page, orderProp,
order, orderBy, page, orderProp, rowsPerPage,
} = this.state
const backProps = {
'aria-label': 'Previous Page',
}
const nextProps = {
'aria-label': 'Next Page',
}
return (
<Table aria-labelledby={label}>
<TableHead
columns={columns}
order={order}
orderBy={orderBy}
onSort={this.onSort}
<React.Fragment>
<Table aria-labelledby={label}>
<TableHead
columns={columns}
order={order}
orderBy={orderBy}
onSort={this.onSort}
/>
<TableBody>
{stableSort(data, getSorting(order, orderBy, orderProp))
.slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
.map((row: any, index: number) => (
<TableRow
tabIndex={-1}
key={index}
>
{
columns.map((column: Column) => (
<TableCell key={column.id} numeric={column.numeric} component="th" scope="row" padding="none">
{row[column.id]}
</TableCell>
))
}
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
component="div"
count={data.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={backProps}
nextIconButtonProps={nextProps}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
<TableBody>
{stableSort(data, getSorting(order, orderBy, orderProp))
.slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
.map((row: any, index: number) => (
<TableRow
tabIndex={-1}
key={index}
>
{
columns.map((column: Column) => (
<TableCell key={column.id} numeric={column.numeric} component="th" scope="row" padding="none">
{row[column.id]}
</TableCell>
))
}
</TableRow>
))}
</TableBody>
</Table>
</React.Fragment>
)
}
}

View File

@ -131,6 +131,32 @@ export default createMuiTheme({
fontWeight: bolderFont,
},
},
MuiTablePagination: {
toolbar: {
'& > span:nth-child(2)': {
order: 1,
},
},
selectIcon: {
height: '100%',
top: '0px',
},
caption: {
fontFamily: 'Roboto Mono, monospace',
letterSpacing: '-0.5px',
order: 3,
color: disabled,
},
input: {
order: 2,
width: '60px',
padding: `0 ${md} 0 0`,
},
actions: {
order: 4,
color: disabled,
},
},
},
palette,
})