Creation of Table component including generic Row Type

This commit is contained in:
apanizo 2018-10-17 17:27:47 +02:00
parent 9b80866992
commit d00cf82bda
1 changed files with 80 additions and 0 deletions

View File

@ -0,0 +1,80 @@
// @flow
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 TableHead, { type Column } from '~/components/Table/TableHead'
import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
type Props<K> = {
label: string,
rowsPerPage?: number,
defaultOrderBy: string,
columns: List<Column>,
data: Array<K>,
}
type State = {
page: number,
order: Order,
orderBy: string,
}
class GnoTable<K> extends React.Component<Props<K>, State> {
state = {
page: 0,
order: 'desc',
orderBy: this.props.defaultOrderBy,
}
onSort = (property: string) => {
const orderBy = property
let order = 'desc'
if (this.state.orderBy === property && this.state.order === 'desc') {
order = 'asc'
}
this.setState({ order, orderBy })
}
render() {
const {
data, label, columns, rowsPerPage = 5,
} = this.props
const { order, orderBy, page } = this.state
return (
<Table aria-labelledby={label}>
<TableHead
columns={columns}
order={order}
orderBy={orderBy}
onSort={this.onSort}
/>
<TableBody>
{stableSort(data, getSorting(order, orderBy))
.slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
.map((row: any) => (
<TableRow
tabIndex={-1}
key={row.id}
>
{
columns.map((column: Column) => (
<TableCell key={column.id} numeric={column.numeric} component="th" scope="row" padding="none">
{row[column.id]}
</TableCell>
))
}
</TableRow>
))}
</TableBody>
</Table>
)
}
}
export default GnoTable