想自定义MUI-datatable Toolbar和定位pagination top

Question

我可以隐藏工具栏图标，但我不知道如何将分页从下到上定位我的另一个问题是我试图在视图列工具栏中添加两个按钮（重置和应用）。有。不知道如何自定义 class here I am sharing image for reference as you can see pagination and filter align top right

我也在分享我的工作仓库，请看一看。如果有人帮我解决这个问题，我将不胜感激

codesandbox

    import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { Button } from "@material-ui/core";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
class App extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "0,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "0,000"],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, "0,000"],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, ",000"],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, ",000"],
      [
        "Blake Duncan",
        "Business Management Analyst",
        "San Diego",
        65,
        ",000"
      ],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "0,000"],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, ",000"],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, ",000"],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "5,000"],
      ["Harper White", "Attorney", "Pittsburgh", 52, "0,000"],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "0,000"],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, "0,000"],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, ",000"],
      ["Justice Mann", "Business Consultant", "Chicago", 24, "3,000"],
      [
        "Addison Navarro",
        "Business Management Analyst",
        "New York",
        50,
        "5,000"
      ],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "0,000"],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "0,000"],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "0,000"],
      ["Danny Leon", "Computer Scientist", "Newark", 60, "0,000"],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "0,000"],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, ",000"],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, ",000"],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "0,000"],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, "0,000"],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, "0,000"],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "0,000"],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, ",000"],
      [
        "Gabby Strickland",
        "Business Process Consultant",
        "Scottsdale",
        26,
        ",000"
      ],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "2,000"]
    ];
    const getMuiTheme = () =>
      createMuiTheme({
        overrides: {
          MuiChip: {
            root: {
              backgroundColor: "lightgrey"
            }
          },
          MuiTableCell: {
            head: {
              backgroundColor: "lightgray !important"
            }
          }
        }
      });

    const HeaderElements = () => (
      <>
        <Button>1</Button>
        <Button>2</Button>
      </>
    );

    const options = {
      filterType: "dropdown",
      responsive: "scroll",
      print: false,
      download: false,
      hover: false,
      filter: false,
      search: false,
      viewColumns: true,
      rowsPerPage: [10],
      rowsPerPageOptions: false,
      jumpToPage: false,
      textLabels: {
        pagination: {
          next: "Next ",
          previous: "Previous",
          rowsPerPage: "",
          displayRows: "ON"
        }
      },
      onChangePage(currentPage) {
        console.log({ currentPage });
      },
      onChangeRowsPerPage(numberOfRows) {
        console.log({ numberOfRows });
      }
    };

    return (
      <MuiThemeProvider theme={getMuiTheme()}>
        <MUIDataTable
          title={"ACME Employee list"}
          data={data}
          columns={columns}
          options={{
            customToolbar: () => <HeaderElements />
          }}
        />
      </MuiThemeProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

import * as React from "react";
import PropTypes from "prop-types";
import { alpha } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import Checkbox from "@mui/material/Checkbox";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import DeleteIcon from "@mui/icons-material/Delete";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import GridViewIcon from "@mui/icons-material/GridView";
import TuneIcon from "@mui/icons-material/Tune";
import { visuallyHidden } from "@mui/utils";

function createData(name, calories, fat, carbs, protein) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein
  };
}

const rows = [
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Donut", 452, 25.0, 51, 4.9),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Gingerbread", 356, 16.0, 49, 3.9),
  createData("Honeycomb", 408, 3.2, 87, 6.5),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Jelly Bean", 375, 0.0, 94, 0.0),
  createData("KitKat", 518, 26.0, 65, 7.0),
  createData("Lollipop", 392, 0.2, 98, 0.0),
  createData("Marshmallow", 318, 0, 81, 2.0),
  createData("Nougat", 360, 19.0, 9, 37.0),
  createData("Oreo", 437, 18.0, 63, 4.0)
];

function descendingComparator(a, b, orderBy) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

function getComparator(order, orderBy) {
  return order === "desc"
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

// This method is created for cross-browser compatibility, if you don't
// need to support IE11, you can use Array.prototype.sort() directly
function stableSort(array, comparator) {
  const stabilizedThis = array.map((el, index) => [el, index]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) {
      return order;
    }
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}

const headCells = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  {
    id: "calories",
    numeric: true,
    disablePadding: false,
    label: "Calories"
  },
  {
    id: "fat",
    numeric: true,
    disablePadding: false,
    label: "Fat (g)"
  },
  {
    id: "carbs",
    numeric: true,
    disablePadding: false,
    label: "Carbs (g)"
  },
  {
    id: "protein",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)"
  }
];

function EnhancedTableHead(props) {
  const {
    onSelectAllClick,
    order,
    orderBy,
    numSelected,
    rowCount,
    onRequestSort
  } = props;
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        <TableCell padding="checkbox">
          <Checkbox
            color="primary"
            indeterminate={numSelected > 0 && numSelected < rowCount}
            checked={rowCount > 0 && numSelected === rowCount}
            onChange={onSelectAllClick}
            inputProps={{
              "aria-label": "select all desserts"
            }}
          />
        </TableCell>
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            align={headCell.numeric ? "right" : "left"}
            padding={headCell.disablePadding ? "none" : "normal"}
            sortDirection={orderBy === headCell.id ? order : false}
          >
            <TableSortLabel
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : "asc"}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <Box component="span" sx={visuallyHidden}>
                  {order === "desc" ? "sorted descending" : "sorted ascending"}
                </Box>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

EnhancedTableHead.propTypes = {
  numSelected: PropTypes.number.isRequired,
  onRequestSort: PropTypes.func.isRequired,
  onSelectAllClick: PropTypes.func.isRequired,
  order: PropTypes.oneOf(["asc", "desc"]).isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired
};

const EnhancedTableToolbar = (props) => {
  const {
    numSelected,
    rowsPerPageOptions,
    component,
    count,
    rowsPerPage,
    page,
    onPageChange,
    onRowsPerPageChange
  } = props;

  return (
    <Toolbar
      sx={{
        pl: { sm: 2 },
        pr: { xs: 1, sm: 1 },
        ...(numSelected > 0 && {
          bgcolor: (theme) =>
            alpha(
              theme.palette.primary.main,
              theme.palette.action.activatedOpacity
            )
        })
      }}
    >
      {numSelected > 0 ? (
        <Typography
          sx={{ flex: "1 1 100%" }}
          color="inherit"
          variant="subtitle1"
          component="div"
        >
          {numSelected} selected
        </Typography>
      ) : (
        <Typography
          sx={{ flex: "1 1 100%" }}
          variant="h6"
          id="tableTitle"
          component="div"
        >
          Nutrition
        </Typography>
      )}

      {numSelected > 0 ? (
        <Tooltip title="Delete">
          <IconButton>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
      ) : (
        <>
          <Tooltip title="grid view">
            <IconButton>
              <GridViewIcon />
            </IconButton>
          </Tooltip>
          <Tooltip title="list view">
            <IconButton>
              <FormatListBulletedIcon />
            </IconButton>
          </Tooltip>
          <Tooltip title="Advance filter">
            <IconButton>
              <TuneIcon /> 
            </IconButton>
          </Tooltip>
          <Tooltip title="pagination">
            <IconButton>
              <TablePagination
                rowsPerPageOptions={rowsPerPageOptions}
                component={component}
                count={count}
                rowsPerPage={rowsPerPage}
                page={page}
                onPageChange={onPageChange}
                onRowsPerPageChange={onRowsPerPageChange}
              />
            </IconButton>
          </Tooltip>
        </>
      )}
    </Toolbar>
  );
};

EnhancedTableToolbar.propTypes = {
  numSelected: PropTypes.number.isRequired
};

export default function EnhancedTable() {
  const [order, setOrder] = React.useState("asc");
  const [orderBy, setOrderBy] = React.useState("calories");
  const [selected, setSelected] = React.useState([]);
  const [page, setPage] = React.useState(0);
  const [dense, setDense] = React.useState(false);
  const [rowsPerPage, setRowsPerPage] = React.useState(5);

  const handleRequestSort = (event, property) => {
    const isAsc = orderBy === property && order === "asc";
    setOrder(isAsc ? "desc" : "asc");
    setOrderBy(property);
  };

  const handleSelectAllClick = (event) => {
    if (event.target.checked) {
      const newSelecteds = rows.map((n) => n.name);
      setSelected(newSelecteds);
      return;
    }
    setSelected([]);
  };

  const handleClick = (event, name) => {
    const selectedIndex = selected.indexOf(name);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    setSelected(newSelected);
  };

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

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const handleChangeDense = (event) => {
    setDense(event.target.checked);
  };

  const isSelected = (name) => selected.indexOf(name) !== -1;

  // Avoid a layout jump when reaching the last page with empty rows.
  const emptyRows =
    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;

  return (
    <Box sx={{ width: "100%" }}>
      <Paper sx={{ width: "100%", mb: 2 }}>
        <EnhancedTableToolbar
          numSelected={selected.length}
          rowsPerPageOptions={false}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />
        <TableContainer>
          <Table
            sx={{ minWidth: 750 }}
            aria-labelledby="tableTitle"
            size={dense ? "small" : "medium"}
          >
            <EnhancedTableHead
              numSelected={selected.length}
              order={order}
              orderBy={orderBy}
              onSelectAllClick={handleSelectAllClick}
              onRequestSort={handleRequestSort}
              rowCount={rows.length}
            />
            <TableBody>
              {/* if you don't need to support IE11, you can replace the `stableSort` call with:
                 rows.slice().sort(getComparator(order, orderBy)) */}
              {stableSort(rows, getComparator(order, orderBy))
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((row, index) => {
                  const isItemSelected = isSelected(row.name);
                  const labelId = `enhanced-table-checkbox-${index}`;

                  return (
                    <TableRow
                      hover
                      onClick={(event) => handleClick(event, row.name)}
                      role="checkbox"
                      aria-checked={isItemSelected}
                      tabIndex={-1}
                      key={row.name}
                      selected={isItemSelected}
                    >
                      <TableCell padding="checkbox">
                        <Checkbox
                          color="primary"
                          checked={isItemSelected}
                          inputProps={{
                            "aria-labelledby": labelId
                          }}
                        />
                      </TableCell>
                      <TableCell
                        component="th"
                        id={labelId}
                        scope="row"
                        padding="none"
                      >
                        {row.name}
                      </TableCell>
                      <TableCell align="right">{row.calories}</TableCell>
                      <TableCell align="right">{row.fat}</TableCell>
                      <TableCell align="right">{row.carbs}</TableCell>
                      <TableCell align="right">{row.protein}</TableCell>
                    </TableRow>
                  );
                })}
              {emptyRows > 0 && (
                <TableRow
                  style={{
                    height: (dense ? 33 : 53) * emptyRows
                  }}
                >
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </TableContainer>
      </Paper>
      {/* <FormControlLabel
        control={<Switch checked={dense} onChange={handleChangeDense} />}
        label="Dense padding"
      /> */}
    </Box>
  );
}

最后我自己实现了。我们如何存档。我尝试并搜索了很多文章，甚至我也检查了 MUi github 问题但是互联网上没有合适的定义。希望将来也能帮助其他人