问Mui/DataGrid设置/获取自定义筛选器组件中的筛选值

EN

function DateRangePickerFilterPanel(props) {
  // Instead of handling a date change here, pass the handler in as a prop.
  // This allows you access to the selected values in App. You could also use
  // a state management library like redux, but that is not shown here.
  return <DateRangePicker onChange={props.onChange} />;
}

export default function App() {
  const [dates, setDates] = useState()

  const handleDateChange = (newValue) => {
    // update local state with the new values
    setDates(newValue);
  }

  return (
    <DataGrid
      rows={rows}       // defined elsewhere
      columns={columns} // defined elsewhere
      components={{
        FilterPanel: DateRangePickerFilterPanel,
      }}
      componentsProps={{
        filterPanel: { onChange: handleDateChange }
      }}
    >
    </DataGrid>
  );
}

export default function App() {
  const [dates, setDates] = useState()

  useEffect( () => {
    // call the server here
  }, [dates]);
}

import * as React from "react";
import { DateRangePicker } from "rsuite";
import { DataGrid, GridFilterModel } from "@mui/x-data-grid";
import "./ui.css";
import { fakeAxios } from "./server";

function DateRangePickerFilterPanel(props) {
  // Instead of handling a date change here, pass the handler in as a prop.
  // This allows you access to the selected values in App. You could also use
  // a state management library like redux, but that is not shown here.
  return <DateRangePicker onChange={props.onChange} />;
}

const columns = [
  { field: "id", headerName: "ID", width: 150 },
  { field: "created", headerName: "DateTime", type: "date", width: 150 },
  { field: "col1", headerName: "Column 1", width: 150 }
];

export default function App() {
  // These are the selected values in the date range picker. To use server
  // side filtering they must be sent to the server, and the server returns
  // the filtered dataset.
  const [dates, setDates] = React.useState({});

  // Store the row data for the data table in react state. This will be updated
  // when you call the server API with filter parameters.
  const [rows, setRows] = React.useState([]);

  // Here is where we handle the date change in the filter panel. Set the dates
  // state so it can be used by the server API.
  const handleDateChange = (newValue) => {
    setDates(newValue);
  };

  // The rows for the datatable are loaded from the server using the dates as
  // a filter. This useEffect runs (and calls the server) every time the value
  // of 'dates' changes.
  React.useEffect(() => {
    fakeAxios
      .get(`/api/names?startDate=${dates[0]}&endDate=${dates[1]}`)
      .then((response) => {
        console.log(
          `server called with filter; returned ${response.length} records`
        );
        setRows(response);
      });
  }, [dates]);

  return (
    <div style={{ height: 500, width: "100%" }}>
      <DataGrid
        rows={rows}
        pagination
        columns={columns}
        paginationMode="server"
        rowCount={10}
        rowsPerPageOptions={[10, 100]}
        filterMode="server"
        
        // onFilterModelChange is not needed since we are using a custom filter
        // panel.

        components={{
          FilterPanel: DateRangePickerFilterPanel
        }}
        componentsProps={{
          filterPanel: { onChange: handleDateChange }
        }}
      />
    </div>
  );
}

import { useState } from "react";
import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
import { DateRangePicker, LocalizationProvider } from "@mui/x-date-pickers-pro";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers-pro/AdapterDayjs";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState([null, null]);
  const gridApi = useGridApiRef();

  const rows = [
    { id: 1, col1: "Hello", col2: "World", quantity: 5000 },
    { id: 2, col1: "DataGridPro", col2: "is Awesome", quantity: 5000 },
    { id: 3, col1: "MUI", col2: "is Amazing", quantity: 12000 }
  ];

  const columns = [
    { field: "col1", headerName: "Column 1", width: 150 },
    { field: "col2", headerName: "Column 2", width: 150 },
    { field: "quantity", headerName: "Quantity", width: 150, type: "number" }
  ];

  const handleDateChange = (newValue) => {
    setValue(newValue);

    if (gridApi.current) {
      gridApi.current.setFilterModel({
        items: [
          {
            columnField: "quantity",
            operatorValue: ">",
            value: "10000"
          }
        ]
      });
    }
  };

  return (
    <div className="App" style={{ height: "300px" }}>
      <h1>Hello CodeSandbox</h1>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateRangePicker
          value={value}
          onChange={handleDateChange}
          renderInput={(startProps, endProps) => (
            <>
              <TextField {...startProps} />
              <Box sx={{ mx: 2 }}> to </Box>
              <TextField {...endProps} />
            </>
          )}
        ></DateRangePicker>
      </LocalizationProvider>
      <DataGridPro
        apiRef={gridApi}
        rows={rows}
        columns={columns}
        onFilterModelChange={(newValue) => {
          console.log(`received filter mode change: ${newValue}`);
          console.log(newValue);
        }}
      ></DataGridPro>
    </div>
  );
}

import DateRangePicker from "rsuite/DateRangePicker";
import { DataGrid} from "@mui/x-data-grid";
import "./ui.css";

const getAllNames = (startDate, endDate)=> {
  console.log(startDate, endDate);
 //  Add your API call here
};

function DateRangePickerFilterPanel() {
 const handleDateChange = (value) => {
   getAllNames(value[0], value[1]);
 };
 return <DateRangePicker onChange={handleDateChange} />;
};

const rows = [
  { id: "2020-01-02", col1: "Hello" },
  { id: "2020-01-03", col1: "MUI X" },
  { id: "2020-01-04", col1: "Material UI" },
  { id: "2020-01-05", col1: "MUI" },
  { id: "2020-01-06", col1: "Joy UI" },
  { id: "2020-01-07", col1: "MUI Base" }
];

const columns = [
  { field: "id", headerName: "DateTime", type: "dateTime", width: 150 },
  { field: "col1", headerName: "Column 1", width: 150 }
];

export default function App() {
  /*
  const getAllNames = () => {
    axiosInstance.get(`${API_PATH}/api/names?startDate=${dates.startDate}&endDate=${dates.endDate}`)
      .then((response) => {
        ...
      })
      .catch((error) => console.error(`Error: ${error}`));
  };
  */
 
  return (
    <div style={{ height: 300, width: "100%" }}>
      <DataGrid
        rows={rows}
        pagination
        columns={columns}
        paginationMode="server"
        rowsPerPageOptions={[10]}
        filterMode="server"
        components={{
          FilterPanel: DateRangePickerFilterPanel
        }}
      />
    </div>
  );
}