gistfile1.txt

import React, { useState } from "react";
import { DataGrid, GridColDef, GridRowsProp, GridColumns } from "@mui/x-data-grid";

interface PinnedColumnsDataGridProps {
  rows: GridRowsProp;
  columns: GridColDef[];
  columnVisibilityModel: GridColumns;
  onColumnVisibilityModelChange: (model: GridColumns) => void;
}

const PinnedColumnsDataGrid: React.FC<PinnedColumnsDataGridProps> = ({
  rows,
  columns,
  columnVisibilityModel,
  onColumnVisibilityModelChange
}) => {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={onColumnVisibilityModelChange}
      />
    </div>
  );
};

interface ParentComponentProps {
  rows: GridRowsProp;
  columns: GridColDef[];
}

const ParentComponent: React.FC<ParentComponentProps> = ({ rows, columns }) => {
  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumns>(columns);

  const handleColumnVisibilityModelChange = (model: GridColumns) => {
    setColumnVisibilityModel(model);
  };

  return (
    <div>
      <PinnedColumnsDataGrid
        rows={rows}
        columns={columns}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={handleColumnVisibilityModelChange}
      />
      <PinnedColumnsDataGrid
        rows={rows}
        columns={columns}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={handleColumnVisibilityModelChange}
      />
    </div>
  );
};

export default ParentComponent;