BREAKING CHANGE: SURVEY-16650 autosize columns (#308)

* Grid auto sizing BREAKING CHANGE: Grid auto sizing
linz · May 26, 2023 · df58410 · df58410
1 parent ed41e48
commit df58410
Show file tree

Hide file tree

Showing 30 changed files with 2,188 additions and 1,476 deletions.
diff --git a/README.md b/README.md
@@ -79,15 +79,11 @@ const GridDemo = () => {
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
         export: false,
       }),
       GridCell({
         field: "name",
         headerName: "Name",
-        initialWidth: 65,
-        maxWidth: 150,
         cellRendererParams: {
           warning: ({ value }) => value === "Tester" && "Testers are testing",
           info: ({ value }) => value === "Developer" && "Developers are awesome",
@@ -96,8 +92,6 @@ const GridDemo = () => {
       GridPopoverEditDropDown(
         {
           field: "position",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Position",
         },
         {
@@ -157,14 +151,25 @@ const GridDemo = () => {
             <GridFilterColumnsToggle/>
             <GridFilterDownloadCsvButton fileName={"exportFile"}/>
           </GridFilters>
-          <Grid selectable={true} columnDefs={columnDefs} rowData={rowData}/>
+          <Grid selectable={true}
+                columnDefs={columnDefs}
+                rowData={rowData}
+                onContentSize={({ width }) => setPanelSize(width)} />
         </GridWrapper>
       </GridContextProvider>
     </GridUpdatingContextProvider>
   );
 };
 ```
 
+## Grid sizing
+Grid uses ```<Grid sizeColumns="auto"/>``` which sizes by cell content by default.
+To ignore cell content use "fit", to disable use "none".
+
+If you are within a resizable window/dialog/container there is a callback parameter
+```<Grid onContentSize={({ width }) => setPanelSize(width)}/>```
+to receive the recommended container width.
+
 ## CSV Download
 CSV download relies on column valueFormatters vs ag-grid's default valueGetter implementation.
 If you use a customRenderer for a column be sure to include a valueFormatter.