balance table fixes: add 5 to rowsPerPageOptions, remove props from initial state and use them as fallback values

package.json

@@ -108,7 +108,7 @@
     "@babel/plugin-transform-member-expression-literals": "^7.2.0",
     "@babel/plugin-transform-property-literals": "^7.2.0",
     "@babel/polyfill": "^7.4.0",
-    "@babel/preset-env": "^7.4.1",
+    "@babel/preset-env": "^7.4.2",
     "@babel/preset-flow": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
     "@sambego/storybook-state": "^1.0.7",

src/components/Table/index.jsx

@@ -28,10 +28,10 @@ type Props<K> = {
 type State = {
   page: number,
   order: Order,
-  orderBy: string,
+  orderBy?: string,
   orderProp: boolean,
   rowsPerPage: number,
-  fixed: boolean,
+  fixed?: boolean,
 }
 
 const styles = {
@@ -64,22 +64,25 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
   state = {
     page: 0,
     order: 'asc',
-    orderBy: this.props.defaultOrderBy,
+    orderBy: undefined,
-    fixed: !!this.props.defaultFixed,
+    fixed: undefined,
     orderProp: false,
     rowsPerPage: 5,
   }
 
-  onSort = (property: string, orderProp: boolean) => {
+  onSort = (newOrderBy: string, orderProp: boolean) => {
-    const orderBy = property
+    const { order, orderBy } = this.state
-    let order = 'desc'
+    let newOrder = 'desc'
 
-    if (this.state.orderBy === property && this.state.order === 'desc') {
+    if (orderBy === newOrderBy && order === 'desc') {
-      order = 'asc'
+      newOrder = 'asc'
     }
 
     this.setState(() => ({
-      order, orderBy, orderProp, fixed: false,
+      order: newOrder,
+      orderBy: newOrderBy,
+      orderProp,
+      fixed: false,
     }))
   }
 
@@ -98,12 +101,13 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
 
   render() {
     const {
-      data, label, columns, classes, children, size,
+      data, label, columns, classes, children, size, defaultOrderBy, defaultFixed,
     } = this.props
-
     const {
       order, orderBy, page, orderProp, rowsPerPage, fixed,
     } = this.state
+    const orderByParam = orderBy || defaultOrderBy
+    const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
 
     const backProps = {
       'aria-label': 'Previous Page',
@@ -119,41 +123,39 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
       input: classes.white,
     }
 
-    const sortedData = stableSort(data, getSorting(order, orderBy, orderProp), fixed)
+    const sortedData = stableSort(data, getSorting(order, orderByParam, orderProp), fixedParam).slice(
-      .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
+      page * rowsPerPage,
+      page * rowsPerPage + rowsPerPage,
+    )
 
-    const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage))
+    const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage)
     const isEmpty = size === 0
 
     return (
       <React.Fragment>
-        { !isEmpty &&
+        {!isEmpty && (
           <Table aria-labelledby={label} className={classes.root}>
-            <TableHead
+            <TableHead columns={columns} order={order} orderBy={orderByParam} onSort={this.onSort} />
-              columns={columns}
-              order={order}
-              orderBy={orderBy}
-              onSort={this.onSort}
-            />
             <TableBody>
-              { children(sortedData) }
+              {children(sortedData)}
-              { emptyRows > 0 &&
+              {emptyRows > 0 && (
                 <TableRow style={this.getEmptyStyle(emptyRows)}>
                   <TableCell colSpan={4} />
                 </TableRow>
-              }
+              )}
             </TableBody>
           </Table>
-        }
+        )}
-        { isEmpty &&
+        {isEmpty && (
           <Row className={classNames(classes.loader, classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
             <CircularProgress size={60} />
           </Row>
-        }
+        )}
         <TablePagination
           component="div"
           count={size}
           rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[5, 10, 25, 50, 100]}
           page={page}
           backIconButtonProps={backProps}
           nextIconButtonProps={nextProps}

src/routes/load/components/Layout.jsx

@@ -22,8 +22,8 @@ type Props = SelectorProps & {
 
 const iconStyle = {
   color: secondary,
-  width: '32px',
+  padding: '8px',
-  height: '32px',
+  marginRight: '5px',
 }
 
 const back = () => {

src/routes/open/components/Layout.jsx

@@ -33,8 +33,8 @@ type Props = {
 
 const iconStyle = {
   color: secondary,
-  width: '32px',
+  padding: '8px',
-  height: '32px',
+  marginRight: '5px',
 }
 
 const back = () => {