modify TreeDataGrid to use column.frozen value if present; update RowGrouping live demo

Author: Jacob Wasilkowski

src/TreeDataGrid.tsx

@@ -96,7 +96,7 @@ function TreeDataGrid<R, SR, K extends Key>(
         groupBy.push(column.key);
         columns[index] = {
           ...column,
-          frozen: true,
+          frozen: column.frozen ?? true,
           renderCell: () => null,
           renderGroupCell: column.renderGroupCell ?? renderToggleGroup,
           editable: false

website/demos/RowGrouping.tsx

@@ -24,6 +24,10 @@ const optionsClassname = css`
   text-transform: capitalize;
 `;
 
+const hrClassname = css`
+  margin: 0;
+`;
+
 interface Row {
   id: number;
   country: string;
@@ -169,6 +173,8 @@ export default function RowGrouping({ direction }: Props) {
     setExpandedGroupIds(new Set());
   }
 
+  const [areGroupColumnsFrozen, setAreGroupColumnsFrozen] = useState<boolean>(true);
+
   return (
     <div className={groupingClassname}>
       <b>Group by columns:</b>
@@ -185,8 +191,19 @@ export default function RowGrouping({ direction }: Props) {
         ))}
       </div>
 
+      <hr className={hrClassname} />
+
+      <label>
+        <input
+          type="checkbox"
+          checked={areGroupColumnsFrozen}
+          onChange={() => setAreGroupColumnsFrozen(!areGroupColumnsFrozen)}
+        />{' '}
+        Frozen group columns
+      </label>
+
       <TreeDataGrid
-        columns={columns}
+        columns={columns.map((c) => ({ ...c, frozen: areGroupColumnsFrozen }))}
         rows={rows}
         rowKeyGetter={rowKeyGetter}
         selectedRows={selectedRows}