diff --git a/src/TreeDataGrid.tsx b/src/TreeDataGrid.tsx
index b272817229..2b7f977235 100644
--- a/src/TreeDataGrid.tsx
+++ b/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
diff --git a/website/demos/RowGrouping.tsx b/website/demos/RowGrouping.tsx
index 87a96aedee..b31e007d53 100644
--- a/website/demos/RowGrouping.tsx
+++ b/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,22 @@ 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,
+          ...(selectedOptions.includes(c.key) ? { frozen: areGroupColumnsFrozen } : {})
+        }))}
         rows={rows}
         rowKeyGetter={rowKeyGetter}
         selectedRows={selectedRows}