@material-ui/core#TableFooter JavaScript Examples

The following examples show how to use @material-ui/core#TableFooter. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ApplicationListPage.jsx    From frontend with MIT License 5 votes vote down vote up
ApplicationPage = () => {
  const classes = useStyles();
  const [handlePageChange,
    handleChangeRowsPerPage,
    pagination, paginateData] = usePaginateHandlers(applications);
  return (
    <>
      <Box mb={2}>
        <Typography variant="h4">Applications</Typography>
      </Box>
      <Box>
        <Paper elevation={2}>
          <Table>
            <TableHead>
              <TableRow>
                {columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
              </TableRow>
            </TableHead>
            <TableBody>
              {paginateData.map((x) => (
                <TableRow key={x.id}>
                  <TableCell>
                    {x.requestId}
                  </TableCell>
                  <TableCell>{x.firstName}</TableCell>
                  <TableCell>{x.lastName}</TableCell>
                  <TableCell>{x.phone}</TableCell>
                  <TableCell>{x.help}</TableCell>
                  <TableCell>
                    {x.status
                      ? (
                        <Select
                          value={x.status}
                          classes={{ root: classes[x.status], select: classes[x.status] }}
                        >
                          <MenuItem value="on_hold">On hold</MenuItem>
                          <MenuItem value="in_progress">In progress</MenuItem>
                          <MenuItem value="receieved">Received</MenuItem>
                          <MenuItem value="closed">Closed</MenuItem>
                        </Select>
                      ) : 'Pending'}
                  </TableCell>
                  <TableCell align="right">
                    {!x.approved && (
                    <>
                      <IconButton color="primary">
                        <Icon>check</Icon>
                      </IconButton>
                      <IconButton color="secondary">
                        <Icon>clear</Icon>
                      </IconButton>
                    </>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  count={applications.length}
                  onChangePage={handlePageChange}
                  page={pagination.page}
                  rowsPerPage={pagination.limit}
                  onChangeRowsPerPage={handleChangeRowsPerPage}
                />
              </TableRow>
            </TableFooter>
          </Table>
        </Paper>
      </Box>
    </>
  );
}
Example #2
Source File: Regions.js    From treetracker-admin-client with GNU Affero General Public License v3.0 4 votes vote down vote up
RegionTable = (props) => {
  const { classes } = props;
  // const sortOptions = { byName: 'name' };
  const {
    regions,
    collections,
    currentPage,
    pageSize,
    showCollections,
    changeCurrentPage,
    changePageSize,
    // changeSort,
    setShowCollections,
    regionCount,
    collectionCount,
    upload,
    updateRegion,
    updateCollection,
    deleteRegion,
    deleteCollection,
  } = useContext(RegionContext);
  const { orgList, userHasOrg } = useContext(AppContext);
  const [openEdit, setOpenEdit] = useState(false);
  const [isUpload, setIsUpload] = useState(false);
  const [selectedItem, setSelectedItem] = useState(undefined);
  const [openDelete, setOpenDelete] = useState(false);
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarMessage, setSnackbarMesssage] = useState('');

  useEffect(() => {
    if (!openDelete && !openEdit) {
      // Wait for the dialog to disappear before clearing the selected item.
      setTimeout(() => {
        setSelectedItem(undefined);
        setIsUpload(false);
      }, 300);
    }
  }, [openDelete, openEdit]);

  const tableRef = useRef(null);

  const handleChangeCurrentPage = (event, value) => {
    tableRef.current && tableRef.current.scrollIntoView();
    changeCurrentPage(value);
  };

  const handleChangeRowsPerPage = (event) => {
    changePageSize(Number(event.target.value));
    changeCurrentPage(0);
  };

  const handleEdit = (item, isCollection) => {
    setSelectedItem({
      ...item,
      isCollection,
    });
    setOpenEdit(true);
  };

  const handleDelete = (item, isCollection) => {
    setSelectedItem({
      ...item,
      isCollection,
    });
    setOpenDelete(true);
  };

  const handleChangeShowCollections = (event, val) => {
    if (val !== null) {
      setShowCollections(val);
    }
  };

  const handleUploadClick = () => {
    setIsUpload(true);
    setOpenEdit(true);
  };

  const handleSnackbarClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setSnackbarOpen(false);
    setSnackbarMesssage('');
  };

  const showSnackbar = (message) => {
    setSnackbarMesssage(message);
    setSnackbarOpen(true);
  };

  const RegionProperties = ({ region, max = 0 }) => {
    return Object.keys(region.properties || {}).map((key, idx) => {
      if (max === 0 || idx < max)
        return (
          <Grid key={`prop_${region.id}_${key}_${max}`}>
            <span>
              <b>{key}:</b>
            </span>
            &nbsp;
            <span>{JSON.stringify(region.properties[key])}</span>
            {max > 0 && idx === max - 1 && <span>&nbsp;&hellip;</span>}
          </Grid>
        );
    });
  };

  const RegionTableRows = () => {
    return (showCollections ? collections : regions).map((item) => (
      <TableRow key={item.id} role="listitem">
        {/* <TableCell>
          <Checkbox
            onChange={(e) => handleSelect(e.target.checked, region.id)}
            checked={selected.includes(region.id)}
          />
        </TableCell> */}
        <TableCell component="th" scope="row" data-testid="region">
          {item.name}
        </TableCell>
        {!userHasOrg && (
          <TableCell>
            {orgList.find((org) => org.stakeholder_uuid === item.owner_id)
              ?.name || '---'}
          </TableCell>
        )}
        {!showCollections && (
          <>
            <TableCell>{item.collection_name || '---'}</TableCell>
            <Tooltip title={<RegionProperties region={item} />}>
              <TableCell>
                <RegionProperties region={item} max={3} />
              </TableCell>
            </Tooltip>
            <TableCell align="center">
              {item.show_on_org_map ? 'Yes' : 'No'}
            </TableCell>
            <TableCell align="center">
              {item.calculate_statistics ? 'Yes' : 'No'}
            </TableCell>
          </>
        )}
        <TableCell align="right" className={classes.operations}>
          <IconButton
            title="edit"
            onClick={() => handleEdit(item, showCollections)}
          >
            <Edit />
          </IconButton>
          <IconButton
            title="delete"
            onClick={() => handleDelete(item, showCollections)}
          >
            <Delete />
          </IconButton>
        </TableCell>
      </TableRow>
    ));
  };

  const RegionTablePagination = () => (
    <TablePagination
      count={Number(showCollections ? collectionCount : regionCount)}
      rowsPerPageOptions={[25, 50, 100, { label: 'All', value: -1 }]}
      page={currentPage}
      rowsPerPage={pageSize}
      onChangePage={handleChangeCurrentPage}
      onChangeRowsPerPage={handleChangeRowsPerPage}
      SelectProps={{
        inputProps: { 'aria-label': 'rows per page' },
        native: true,
      }}
    />
  );

  return (
    <>
      <Grid container className={classes.regionsTableContainer}>
        <Paper elevation={3} className={classes.menu}>
          <Menu variant="plain" />
        </Paper>

        <Grid item container className={classes.rightBox}>
          <Grid item xs={12}>
            <Grid
              container
              justify="space-between"
              className={classes.titleBox}
            >
              <Grid item>
                <Grid container>
                  <Grid item>
                    <Typography variant="h2">Regions</Typography>
                  </Grid>
                </Grid>
              </Grid>
              <Grid item className={classes.headerButtonBox}>
                <ToggleButtonGroup
                  color="primary"
                  value={showCollections}
                  exclusive
                  onChange={handleChangeShowCollections}
                >
                  <ToggleButton value={false}>Regions</ToggleButton>
                  <ToggleButton value={true}>Collections</ToggleButton>
                </ToggleButtonGroup>
              </Grid>
              <Grid item className={classes.headerButtonBox}>
                <Button
                  onClick={handleUploadClick}
                  variant="contained"
                  className={classes.upload}
                  color="primary"
                >
                  UPLOAD
                </Button>
              </Grid>
            </Grid>
            <Grid container direction="column" className={classes.bodyBox}>
              <TableContainer component={Paper} ref={tableRef}>
                <Table className={classes.table} aria-label="simple table">
                  <TableHead>
                    <TableRow>
                      <TableCell>
                        Name
                        {/* <IconButton
                          title="sortbyName"
                          onClick={() => changeSort(sortOptions.byName)}
                        >
                          <SortIcon />
                        </IconButton> */}
                      </TableCell>
                      {!userHasOrg && <TableCell>Owner</TableCell>}
                      {!showCollections && (
                        <>
                          <TableCell>Collection</TableCell>
                          <TableCell>Properties</TableCell>
                          <TableCell align="center">Shown on Org Map</TableCell>
                          <TableCell align="center">
                            Statistics Calculated
                          </TableCell>
                        </>
                      )}
                      <TableCell></TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    <RegionTableRows />
                  </TableBody>
                  <TableFooter>
                    <TableRow>
                      <RegionTablePagination />
                    </TableRow>
                  </TableFooter>
                </Table>
              </TableContainer>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
      <EditModal
        openEdit={openEdit}
        setOpenEdit={setOpenEdit}
        isUpload={isUpload}
        selectedItem={selectedItem}
        styles={{ ...classes }}
        upload={upload}
        updateRegion={updateRegion}
        updateCollection={updateCollection}
        showSnackbar={showSnackbar}
      />
      <DeleteDialog
        selectedItem={selectedItem}
        openDelete={openDelete}
        setOpenDelete={setOpenDelete}
        deleteRegion={deleteRegion}
        deleteCollection={deleteCollection}
        showSnackbar={showSnackbar}
      />
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={handleSnackbarClose}
        message={snackbarMessage}
        action={
          <>
            <IconButton
              size="small"
              aria-label="close"
              color="inherit"
              onClick={handleSnackbarClose}
            >
              <Close fontSize="small" />
            </IconButton>
          </>
        }
      />
    </>
  );
}
Example #3
Source File: SpeciesTable.js    From treetracker-admin-client with GNU Affero General Public License v3.0 4 votes vote down vote up
SpeciesTable = (props) => {
  const { classes } = props;
  const sortOptions = { byId: 'id', byName: 'name' };
  const speciesContext = useContext(SpeciesContext);
  const { isLoading } = useContext(SpeciesContext);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(25);
  const [isEdit, setIsEdit] = useState(false);
  const [isAdding, setIsAdding] = useState(false);
  const [speciesEdit, setSpeciesEdit] = useState(undefined);
  const [openDelete, setOpenDelete] = useState(false);
  const [sortedSpeciesList, setSortedSpeciesList] = useState([]);
  const [option, setOption] = useState(sortOptions.byName);
  const [selected, setSelected] = useState([]);
  const [showCombine, setShowCombine] = useState(false);

  const tableRef = useRef(null);

  useEffect(() => {
    const sortBy = (option) => {
      let sortedSpecies;
      if (option === sortOptions.byId) {
        sortedSpecies = [...speciesContext.speciesList].sort(
          (a, b) => a[option] - b[option]
        );
      }
      if (option === sortOptions.byName) {
        sortedSpecies = [...speciesContext.speciesList].sort((a, b) =>
          a[option].localeCompare(b[option])
        );
      }
      setSortedSpeciesList(sortedSpecies);
    };
    sortBy(option);
  }, [
    option,
    sortOptions.byId,
    sortOptions.byName,
    speciesContext.speciesList,
  ]);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    tableRef.current && tableRef.current.scrollIntoView();

    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const handleEdit = (species) => {
    setSpeciesEdit(species);
    setIsEdit(true);
  };

  const openDeleteDialog = (species) => {
    setSpeciesEdit(species);
    setOpenDelete(true);
  };

  const openCombineModal = () => {
    if (selected.length > 1) setShowCombine(true);
    else alert('Please select two or more species to be combined!');
  };

  const handleSelect = (checked, id) => {
    if (checked) setSelected([...selected, id]);
    else setSelected(selected.filter((item) => item !== id));
  };

  const renderSpecies = () => {
    return (rowsPerPage > 0
      ? sortedSpeciesList.slice(
          page * rowsPerPage,
          page * rowsPerPage + rowsPerPage
        )
      : sortedSpeciesList
    ).map((species) => (
      <TableRow key={species.id} role="listitem">
        <TableCell>
          <Checkbox
            onChange={(e) => handleSelect(e.target.checked, species.id)}
            checked={selected.includes(species.id)}
          />
        </TableCell>
        <TableCell component="th" scope="row">
          {species.id}
        </TableCell>
        <TableCell component="th" scope="row" data-testid="species">
          {species.name}
        </TableCell>
        <TableCell>{species.desc}</TableCell>
        <TableCell>{species.captureCount}</TableCell>
        <TableCell>
          <IconButton title="edit" onClick={() => handleEdit(species)}>
            <Edit />
          </IconButton>
          <IconButton title="delete" onClick={() => openDeleteDialog(species)}>
            <Delete />
          </IconButton>
        </TableCell>
      </TableRow>
    ));
  };

  const tablePagination = () => (
    <TablePagination
      count={speciesContext.speciesList.length}
      rowsPerPageOptions={[25, 50, 100, { label: 'All', value: -1 }]}
      colSpan={3}
      page={page}
      rowsPerPage={rowsPerPage}
      onChangePage={handleChangePage}
      onChangeRowsPerPage={handleChangeRowsPerPage}
      SelectProps={{
        inputProps: { 'aria-label': 'rows per page' },
        native: true,
      }}
    />
  );

  return (
    <Grid className={classes.speciesTableContainer}>
      <Paper elevation={3} className={classes.menu}>
        <Menu variant="plain" />
      </Paper>

      <Grid item container className={classes.rightBox}>
        <Grid item xs={12}>
          <Grid container justify="space-between" className={classes.titleBox}>
            <Grid item>
              <Grid container>
                <Grid item>
                  <Typography variant="h2">Species</Typography>
                </Grid>
              </Grid>
            </Grid>
            <Grid item className={classes.addUserBox}>
              <Button
                onClick={openCombineModal}
                variant="outlined"
                color="primary"
              >
                COMBINE SPECIES
              </Button>
              <Button
                onClick={() => setIsAdding(true)}
                variant="contained"
                className={classes.addUser}
                color="primary"
              >
                ADD NEW SPECIES
              </Button>
            </Grid>
          </Grid>
          <Grid container direction="column" className={classes.bodyBox}>
            <TableContainer component={Paper} ref={tableRef}>
              <Table className={classes.table} aria-label="simple table">
                <TableHead>
                  <TableRow>
                    <TableCell></TableCell>
                    <TableCell>
                      ID
                      <IconButton
                        title="sortbyId"
                        onClick={() => setOption(sortOptions.byId)}
                      >
                        <SortIcon />
                      </IconButton>
                    </TableCell>
                    <TableCell>
                      name
                      <IconButton
                        title="sortbyName"
                        onClick={() => setOption(sortOptions.byName)}
                      >
                        <SortIcon />
                      </IconButton>
                    </TableCell>
                    <TableCell>Description</TableCell>
                    <TableCell>Tagged Captures</TableCell>
                    <TableCell>Operations</TableCell>
                  </TableRow>
                </TableHead>
                {isLoading ? (
                  <Grid item container className={classes.loadingIndicator}>
                    <CircularProgress />
                  </Grid>
                ) : (
                  <TableBody>{renderSpecies()}</TableBody>
                )}

                <TableFooter>
                  <TableRow>{tablePagination()}</TableRow>
                </TableFooter>
              </Table>
            </TableContainer>
          </Grid>
        </Grid>
      </Grid>

      <EditModal
        isEdit={isAdding || isEdit}
        setIsEdit={isAdding ? setIsAdding : setIsEdit}
        speciesEdit={speciesEdit}
        setSpeciesEdit={setSpeciesEdit}
        styles={{ ...classes }}
        editSpecies={
          isAdding ? speciesContext.createSpecies : speciesContext.editSpecies
        }
        loadSpeciesList={speciesContext.loadSpeciesList}
        data={sortedSpeciesList}
      />
      <DeleteDialog
        speciesEdit={speciesEdit}
        setSpeciesEdit={setSpeciesEdit}
        openDelete={openDelete}
        setOpenDelete={setOpenDelete}
        deleteSpecies={speciesContext.deleteSpecies}
        loadSpeciesList={speciesContext.loadSpeciesList}
      />
      <CombineModal
        show={showCombine}
        setShow={setShowCombine}
        data={sortedSpeciesList}
        combineSpecies={speciesContext.combineSpecies}
        loadSpeciesList={speciesContext.loadSpeciesList}
        selected={selected}
        styles={{ ...classes }}
      />
    </Grid>
  );
}
Example #4
Source File: KailonaTable.js    From ehr with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
        const columnsLength = this.props.columns.length;
        const noDataColSpan = this.props.contextMenu ? columnsLength + 1 : columnsLength;
        const rowHeight = 50;
        const isWayPointAvailable = !this.state.loading && this.state.previousDataLength !== this.props.data.length;
        const tableHeight = (this.props.rowsPerPage + 1) * rowHeight;

        return (
            <Paper style={{ height: `${tableHeight}px`, width: '100%', position: 'relative', overflowY: 'auto' }}>
                <TableContainer>
                    <Table>
                        <TableHead>
                            <TableRow>
                                {this.props.columns.map(col => (
                                    <HeadCell>{col.label}</HeadCell>
                                ))}
                                {this.props.contextMenu && <HeadCell></HeadCell>}
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {this.props.data.map(record => (
                                <TableRow>
                                    {this.props.columns.map((col, index) => {
                                        let displayText = record[col.key];

                                        if (col.display && typeof col.display === 'function') {
                                            displayText = col.display(record, record[col.key]);
                                        }

                                        return (
                                            <TableCell>
                                                <div>{displayText}</div>
                                                {index === 0 && (
                                                    <div>
                                                        <Link color="primary">{record.source}</Link>
                                                    </div>
                                                )}
                                            </TableCell>
                                        );
                                    })}
                                    {this.props.contextMenu && (
                                        <TableCell>
                                            <IconButton onClick={e => this.toggleContextMenu(e, record)}>
                                                <MoreHoriz />
                                            </IconButton>
                                        </TableCell>
                                    )}
                                </TableRow>
                            ))}
                        </TableBody>
                        <TableFooter>
                            {this.props.loading && (
                                <TableRow>
                                    <TableCell colSpan={this.props.columns.length} align="center">
                                        <Loader />
                                    </TableCell>
                                </TableRow>
                            )}
                            {!this.props.loading && (!this.props.data || !this.props.data.length) && (
                                <TableRow>
                                    <TableCell colSpan={noDataColSpan} align="center">
                                        <Typography variant="h5">{t('ehr', 'No data available')}</Typography>
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableFooter>
                    </Table>
                </TableContainer>
                {isWayPointAvailable && (
                    <div style={{ marginTop: `10px`, height: '20px' }}>
                        <Waypoint onEnter={this.handleScroll}></Waypoint>
                    </div>
                )}

                {this.props.pagination && (
                    <TablePagination
                        rowsPerPageOptions={[1, 5, 10, 25]}
                        component="div"
                        count={this.props.data.length}
                        rowsPerPage={this.props.rowsPerPage}
                        page={this.state.page}
                        onChangePage={(e, page) => this.props.onChangePage(e, page)}
                        onChangeRowsPerPage={e => this.props.onChangeRowsPerPage(e)}
                    />
                )}

                <Menu
                    id="table-context-menu"
                    anchorEl={this.state.anchorEl}
                    keepMounted
                    open={Boolean(this.state.anchorEl)}
                    onClose={this.handleContextMenuClose}
                >
                    {this.props.contextMenu &&
                        this.props.contextMenu.map(menuItem => {
                            return (
                                <MenuItem onClick={() => this.handleMenuItemClick(menuItem.onClick)}>
                                    <ListItemIcon size="small" style={{ minWidth: '32px' }}>
                                        {menuItem.icon}
                                    </ListItemIcon>
                                    <ListItemText primary={menuItem.label} />
                                </MenuItem>
                            );
                        })}
                </Menu>
            </Paper>
        );
    }
Example #5
Source File: ContributorsTable.js    From git-insights with MIT License 4 votes vote down vote up
ContributorsTable = props => {
  const { className, repoid, ...rest } = props;
  const [data, dataLoading] = useFetch(
    `api/repo/${repoid}/contributors`
  );

  const classes = useStyles();

  const [page, setPage] = React.useState(0);
  const rowsPerPage = 5;
  let emptyRows = 0;

  if (data) {
    emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
  }

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <div {...rest} className={clsx(classes.root, className)}>
      <Paper className={classes.paper}>
        {dataLoading ? (
          <Grid
            container
            spacing={0}
            alignItems="center"
            justify="center"
            style={{ minHeight: "100%" }}
          >
            <Grid item xs={6}  align="center">
              <CircularProgress/>
              <Typography>
                Loading Chart..
              </Typography>
            </Grid>
          </Grid>
        ) : (
          <div>
            <TableContainer>
              <Table className={classes.table} aria-label="custom pagination table">
                <TableHead>
                  <TableRow>
                    <TableCell>Contributor Name</TableCell>
                    <TableCell align="right">Total Contributions</TableCell>
                    <TableCell align="right">Code Contributions</TableCell>
                    <TableCell align="right">Issue Contributions</TableCell>
                    <TableCell align="right">Code Reviews</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {(rowsPerPage > 0
                    ? data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                    : data
                  ).map(row => (
                    <TableRow key={row.name}>
                      <TableCell component="th" scope="row">
                        {row.name}
                      </TableCell>
                      <TableCell align="right">{row.total}</TableCell>
                      <TableCell align="right">{row.code}</TableCell>
                      <TableCell align="right">{row.issues}</TableCell>
                      <TableCell align="right">{row.reviews}</TableCell>
                    </TableRow>
                  ))}

                  {emptyRows > 0 && (
                    <TableRow style={{ height: 53 * emptyRows }}>
                      <TableCell colSpan={6} />
                    </TableRow>
                  )}
                </TableBody>
                <TableFooter>
                  <TableRow>

                  </TableRow>
                </TableFooter>
              </Table>
            </TableContainer>
            <TablePagination
              colSpan={3}
              count={data.length}
              rowsPerPage={5}
              page={page}
              onChangePage={handleChangePage}
              rowsPerPageOptions={-1}
              ActionsComponent={TablePaginationActions}
            />
          </div>
        )}
      </Paper>
    </div>
  );
}