From 56d8c0f0a612f65269ac8a8fc099743b2c444e15 Mon Sep 17 00:00:00 2001
From: Jacob Wasilkowski <jwasilkowski@foursquare.com>
Date: Thu, 4 Jan 2024 09:51:40 -0500
Subject: [PATCH 1/2] modify TreeDataGrid to use `column.frozen` value if
 present; update RowGrouping live demo

---
 src/TreeDataGrid.tsx          |  2 +-
 website/demos/RowGrouping.tsx | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

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..18bbafdff0 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,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}

From 87f698d464795791fb81a255650f64c1ba91e2a8 Mon Sep 17 00:00:00 2001
From: Jacob Wasilkowski <jwasilkowski@foursquare.com>
Date: Thu, 4 Jan 2024 09:57:24 -0500
Subject: [PATCH 2/2] update demo column mapping

---
 website/demos/RowGrouping.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/website/demos/RowGrouping.tsx b/website/demos/RowGrouping.tsx
index 18bbafdff0..b31e007d53 100644
--- a/website/demos/RowGrouping.tsx
+++ b/website/demos/RowGrouping.tsx
@@ -203,7 +203,10 @@ export default function RowGrouping({ direction }: Props) {
       </label>
 
       <TreeDataGrid
-        columns={columns.map((c) => ({ ...c, frozen: areGroupColumnsFrozen }))}
+        columns={columns.map((c) => ({
+          ...c,
+          ...(selectedOptions.includes(c.key) ? { frozen: areGroupColumnsFrozen } : {})
+        }))}
         rows={rows}
         rowKeyGetter={rowKeyGetter}
         selectedRows={selectedRows}