Adding Pagination to Table component
This commit is contained in:
parent
1e59ef9bbd
commit
53b169bc42
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue