text: import React from 'react'
  
  import Checkbox from '@material-ui/core/Checkbox'
  import MaUTable from '@material-ui/core/Table'
  import PropTypes from 'prop-types'
  import TableBody from '@material-ui/core/TableBody'
  import TableCell from '@material-ui/core/TableCell'
  import TableContainer from '@material-ui/core/TableContainer'
  import TableFooter from '@material-ui/core/TableFooter'
  import TableHead from '@material-ui/core/TableHead'
  import TablePagination from '@material-ui/core/TablePagination'
  import TablePaginationActions from './TablePaginationActions'
  import TableRow from '@material-ui/core/TableRow'
  import TableSortLabel from '@material-ui/core/TableSortLabel'
  import TableToolbar from './TableToolbar'
  import {
      useGlobalFilter,
      usePagination,
      useRowSelect,
      useSortBy,
      useTable,
  } from 'react-table'
  
  const inputStyle = {
      padding: 0,
      margin: 0,
      border: 0,
      background: 'transparent',
  }
  
  // Create an editable cell renderer
  const EditableCell = ({
                            value: initialValue,
                            row: { index },
                            column: { id }
                        }) => {
      // We need to keep and update the state of the cell normally
      const [value, setValue] = React.useState(initialValue)
  
      const onChange = e => {
          setValue(e.target.value)
      }
  
      // We'll only update the external data when the input is blurred
      const onBlur = () => {
  
      }
  
      // If the initialValue is changed externall, sync it up with our state
      React.useEffect(() => {
          setValue(initialValue)
      }, [initialValue])
  
      return (
          <input
              style={inputStyle}
              value={value}
              onChange={onChange}
              onBlur={onBlur}
          />
      )
  }
  
  EditableCell.propTypes = {
      cell: PropTypes.shape({
          value: PropTypes.any.isRequired,
      }),
      row: PropTypes.shape({
          index: PropTypes.number.isRequired,
      }),
      column: PropTypes.shape({
          id: PropTypes.number.isRequired,
      })
  }
  
  // Set our editable cell renderer as the default Cell renderer
  const defaultColumn = {
      Cell: EditableCell,
  }
  
  const EnhancedTable = ({
                             columns,
                             data,
                             skipPageReset,
                         }) => {
      const {
          getTableProps,
          headerGroups,
          prepareRow,
          page,
          gotoPage,
          setPageSize,
          preGlobalFilteredRows,
          setGlobalFilter,
          state: { pageIndex, pageSize, globalFilter },
      } = useTable(
          {
              columns,
              data,
              defaultColumn,
              autoResetPage: !skipPageReset,
              initialState: {
                  sortBy: [
                      {
                          id: "values.timestamp",
                          desc: true,
                      },
                  ],
              }
          },
          useGlobalFilter,
          useSortBy,
          usePagination,
          useRowSelect,
          hooks => {
              hooks.allColumns.push(columns => [
                  // Let's make a column for selection
                  ...columns,
              ])
          }
      )
  
      const handleChangePage = (event, newPage) => {
          gotoPage(newPage)
      }
  
      const handleChangeRowsPerPage = event => {
          setPageSize(Number(event.target.value))
      }
  
      // Render the UI for your table
      return (
          <TableContainer>
              <TableToolbar
                  preGlobalFilteredRows={preGlobalFilteredRows}
                  setGlobalFilter={setGlobalFilter}
                  globalFilter={globalFilter}
              />
              <MaUTable {...getTableProps()}>
                  <TableHead>
                      {headerGroups.map(headerGroup => (
                          <TableRow {...headerGroup.getHeaderGroupProps()}>
                              {headerGroup.headers.map(column => (
                                  <TableCell
                                      {...(column.id === 'selection'
                                          ? column.getHeaderProps()
                                          : column.getHeaderProps(column.getSortByToggleProps()))}
                                  >
                                      {column.render('Header')}
                                      {column.id !== 'selection' ? (
                                          <TableSortLabel
                                              active={column.isSorted}
                                              // react-table has a unsorted state which is not treated here
                                              direction={column.isSortedDesc ? 'desc' : 'asc'}
                                          />
                                      ) : null}
                                  </TableCell>
                              ))}
                          </TableRow>
                      ))}
                  </TableHead>
                  <TableBody>
                      {page.map((row, i) => {
                          prepareRow(row)
                          return (
                              <TableRow {...row.getRowProps()}>
                                  {row.cells.map(cell => {
                                      return (
                                          <TableCell {...cell.getCellProps()}>
                                              {cell.render('Cell')}
                                          </TableCell>
                                      )
                                  })}
                              </TableRow>
                          )
                      })}
                  </TableBody>
  
                  <TableFooter>
                      <TableRow>
                          <TablePagination
                              rowsPerPageOptions={[
                                  5,
                                  10,
                                  25,
                                  { label: 'All', value: data.length },
                              ]}
                              colSpan={3}
                              count={data.length}
                              rowsPerPage={pageSize}
                              page={pageIndex}
                              SelectProps={{
                                  inputProps: { 'aria-label': 'rows per page' },
                                  native: true,
                              }}
                              onChangePage={handleChangePage}
                              onChangeRowsPerPage={handleChangeRowsPerPage}
                              ActionsComponent={TablePaginationActions}
                          />
                      </TableRow>
                  </TableFooter>
              </MaUTable>
          </TableContainer>
      )
  }
  
  EnhancedTable.propTypes = {
      columns: PropTypes.array.isRequired,
      data: PropTypes.array.isRequired,
      skipPageReset: PropTypes.bool.isRequired,
  }
  
  export default EnhancedTable
  