[core] Support toggling initial visibility of columns (#3490)

mui · May 7, 2024 · 354a28b · 354a28b
1 parent 7ee9540
commit 354a28b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx
@@ -457,6 +457,7 @@ export interface SerializableGridColumn
   dateFormat?: DateFormat;
   dateTimeFormat?: DateFormat;
   codeComponent?: string;
+  visible?: boolean;
 }
 
 export type SerializableGridColumns = SerializableGridColumn[];
@@ -1281,6 +1282,10 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
   const appHost = useAppHost();
   const isProPlan = appHost.plan === 'pro';
 
+  const columnVisibilityModel = Object.fromEntries(
+    (columnsProp ?? []).map((column) => [column.field, column.visible ?? true]),
+  );
+
   return (
     <LicenseInfoProvider info={LICENSE_INFO}>
       <Box ref={ref} sx={{ ...sx, width: '100%', height: '100%', position: 'relative' }}>
@@ -1308,7 +1313,10 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
               getRowId={getRowId}
               onRowSelectionModelChange={onSelectionModelChange}
               rowSelectionModel={selectionModel}
-              initialState={{ pinnedColumns: { right: [ACTIONS_COLUMN_FIELD] } }}
+              initialState={{
+                columns: { columnVisibilityModel },
+                pinnedColumns: { right: [ACTIONS_COLUMN_FIELD] },
+              }}
               disableAggregation={!isProPlan}
               disableRowGrouping={!isProPlan}
               {...props}

diff --git a/packages/toolpad-studio/src/toolpad/propertyControls/GridColumns.tsx b/packages/toolpad-studio/src/toolpad/propertyControls/GridColumns.tsx
@@ -260,6 +260,24 @@ function GridColumnEditor({
         ) : null}
       </Box>
 
+      <Tooltip title="Initial visibility of this column.">
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={editedColumn.visible ?? true}
+              disabled={disabled}
+              onChange={(event) =>
+                handleColumnChange({
+                  ...editedColumn,
+                  visible: event.target.checked,
+                })
+              }
+            />
+          }
+          label="Visible"
+        />
+      </Tooltip>
+
       <FormControlLabel
         control={
           <Checkbox