diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx new file mode 100644 index 00000000..4c937fc0 --- /dev/null +++ b/src/components/Table/index.jsx @@ -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 = { + label: string, + rowsPerPage?: number, + defaultOrderBy: string, + columns: List, + data: Array, +} + +type State = { + page: number, + order: Order, + orderBy: string, +} + +class GnoTable extends React.Component, 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 ( + + + + {stableSort(data, getSorting(order, orderBy)) + .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage)) + .map((row: any) => ( + + { + columns.map((column: Column) => ( + + {row[column.id]} + + )) + } + + ))} + +
+ ) + } +} + +export default GnoTable