score:0

fortunately, the datagrid api provides the columnvisibilitymodel and oncolumnvisibilitychange props.

see this code sandbox for a simple example of controlling the columnvisibilitymodel: https://codesandbox.io/s/mui-datagrid-oncolumnvisibilitychange-savestate-u1opzc?file=/src/app.tsx:1960-1984

here is the code for a simple implementation. your initial state may vary. also, note that i could not figure out how to get datagridpro to call oncolumnvisibilitychange unless columnvisibilitymodel was initially undefined. bug, or my mistake, i am uncertain.

import "./styles.css";
import react from "react";
import {
  datagrid,
  gridrowsprop,
  gridcoldef,
  gridcallbackdetails,
  muievent,
  gridcolumnvisibilitymodel,
  gridcolumnvisibilitychangeparams
} from "@mui/x-data-grid";
import { button } from "@mui/material";

const rows: gridrowsprop = [
  { id: 1, col1: "hello", col2: "world" },
  { id: 2, col1: "datagridpro", col2: "is awesome" },
  { id: 3, col1: "mui", col2: "is amazing" }
];

const columns: gridcoldef[] = [
  { field: "col1", headername: "column 1", width: 150 },
  { field: "col2", headername: "column 2", width: 150 }
];

const initialvisibilitymodel = { col1: true, col2: true };

export default function app() {
  // it is strange, but in order for datagridpro to call oncolumnvisibilitychange, columnvisibilitymodel must be undefined initially
  const [
    currentgridcolumnvisibilitymodel,
    setcurrentgridcolumnvisibilitymodel
  ] = react.usestate<gridcolumnvisibilitymodel | undefined>(undefined);

  const [mysavedvalue, setmysavedvalue] = react.usestate<
    gridcolumnvisibilitymodel | undefined
  >(undefined);

  const oncolumnvisibilitychange = react.usecallback(
    (
      params: gridcolumnvisibilitychangeparams,
      event: muievent<{}>,
      details: gridcallbackdetails
    ): void => {
      console.log("params", params);
      setcurrentgridcolumnvisibilitymodel((s) => ({
        // per the datagridpro strangeness, we must marry in initial state only the first update
        ...(s ? s : initialvisibilitymodel),
        [params.field]: params.isvisible
      }));
    },
    []
  );

  const saveacopyofgridstate = () => {
    setmysavedvalue(currentgridcolumnvisibilitymodel || initialvisibilitymodel);
  };

  const loadsavedcopyofgridstate = () => {
    setcurrentgridcolumnvisibilitymodel(mysavedvalue || initialvisibilitymodel);
  };

  const currentvisibilityastext =
    `${object.keys(currentgridcolumnvisibilitymodel ?? {}).map(
      (key) => `{${key}:${currentgridcolumnvisibilitymodel?.[key]}}`
    )}` || "empty";

  const savedvisibilityastext =
    `${object.keys(mysavedvalue ?? {}).map(
      (key) => `{${key}:${mysavedvalue?.[key]}}`
    )}` || "empty";

  return (
    <div style={{ height: 300, width: "100%" }}>
      <datagrid
        rows={rows}
        columns={columns}
        columnvisibilitymodel={currentgridcolumnvisibilitymodel}
        oncolumnvisibilitychange={oncolumnvisibilitychange}
      />
      <div>
        <button onclick={saveacopyofgridstate} variant="contained">
          save current column visibility state
        </button>
        <button
          onclick={loadsavedcopyofgridstate}
          variant="contained"
          color="warning"
        >
          load saved column visibility state
        </button>
      </div>
      <p>current filter state: {currentvisibilityastext}</p>
      <p>saved filter state: {savedvisibilityastext}</p>
    </div>
  );
}


Related Query

More Query from same tag