如何自定义material-ui组件里面DataGridpro的GridToolbarcolumnsButton的弹出框，并且结合react-sortable-hoc来改动columns的顺序，并且保留原有的显示隐藏columns功能

要自定义DataGridPro中GridToolbarColumnsButton的弹出框，您需要使用GridToolbarColumnsButtonProps来自定义它。要改变列的顺序，您可以使用react-sortable-hoc库。下面是一些步骤来实现这个目标:

1.首先，我们需要将GridToolbarColumnsButtonProps传递给GridToolbarColumnsButton组件。

import { GridToolbarColumnsButton } from '@mui/x-data-grid-pro';

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

function App() {
  const [columnsState, setColumnsState] = useState(columns);

  const handleColumnsChange = (newColumns) => {
    setColumnsState(newColumns);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columnsState}
        components={{
          Toolbar: GridToolbar,
          ColumnsButton: (props) => (
            <GridToolbarColumnsButton {...props} onColumnsChange={handleColumnsChange} />
          ),
        }}
      />
    </div>
  );
}

2.使用react-sortable-hoc库来实现拖放列并更新state中的columns的顺序。

import { SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

function ColumnOrderingDialog({ open, onClose, columns, onColumnsChange }) {
  const [orderedColumns, setOrderedColumns] = useState(columns.map((c) => c.field));

  const handleColumnsOrderChange = (newOrder) => {
    setOrderedColumns(newOrder);
  };

  const handleApply = () => {
    const newColumns = orderedColumns.map((field) => columns.find((c) => c.field === field));
    onColumnsChange(newColumns);
    onClose();
  };

  const handleClose = () => {
    setOrderedColumns(columns.map((c) => c.field));
    onClose();
  };

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Column Ordering</DialogTitle>
      <DialogContent>
        <SortableList items={orderedColumns} onSortEnd={handleColumnsOrderChange} />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          Cancel
        </Button>
        <Button onClick={handleApply} color="primary">
          Apply
        </Button>
      </DialogActions>
    </Dialog>
  );
}

3.将ColumnOrderingDialog组件作为GridToolbarColumnsButtonProps的自定义弹出窗口。

import { GridToolbarColumnsButton } from '@mui/x-data-grid-pro';

function App() {
  const [columnsState, setColumnsState] = useState(columns);
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleColumnsChange = (newColumns) => {
    setColumnsState(newColumns);
  };

  const handleDialogOpen = () => {
    setDialogOpen(true);
  };

  const handleDialogClose = () => {
    setDialogOpen(false);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columnsState}
        components={{
          Toolbar: GridToolbar,
          ColumnsButton: (props) => (
            <>
              <GridToolbarColumnsButton {...props} onColumnsChange={handleColumnsChange} />
              <ColumnOrderingDialog
                open={dialogOpen}
                onClose={handleDialogClose}
                columns={columnsState}
                onColumnsChange={handleColumnsChange}
              />
            </>
          ),
        }}
      />
    </div>
  );
}

4.最后，您需要将GridToolbarColumnsButtonProps中原有的显示隐藏columns的功能保留下来。您可以通过使用GridToolbarColumnsMenuItem组件来实现这个目标。

import { GridToolbarColumnsButton, GridToolbarColumnsMenuItem } from '@mui/x-data-grid-pro';

function App() {
  const [columnsState, setColumnsState] = useState(columns);
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleColumnsChange = (newColumns) => {
    setColumnsState(newColumns);
  };

  const handleDialogOpen = () => {
    setDialogOpen(true);
  };

  const handleDialogClose = () => {
    setDialogOpen(false);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columnsState}
        components={{
          Toolbar: GridToolbar,
          ColumnsButton: (props) => (
            <>
              <GridToolbarColumnsButton {...props} onColumnsChange={handleColumnsChange}>
                <GridToolbarColumnsMenuItem onClick={handleDialogOpen} />
              </GridToolbarColumnsButton>
              <ColumnOrderingDialog
                open={dialogOpen}
                onClose={handleDialogClose}
                columns={columnsState}
                onColumnsChange={handleColumnsChange}
              />
            </>
          ),
        }}
      />
    </div>
  );
}

现在，您已经成功地自定义了DataGridPro中GridToolbarColumnsButton的弹出框，并且结合react-sortable-hoc来改变columns的顺序，并且保留原有的显示隐藏columns功能。