Skip to content

Commit 56d8c0f

Browse files
Jacob Wasilkowskijwasilgeo
authored andcommitted
modify TreeDataGrid to use column.frozen value if present; update RowGrouping live demo
1 parent f71c7cf commit 56d8c0f

File tree

2 files changed

+19
-2
lines changed

2 files changed

+19
-2
lines changed

src/TreeDataGrid.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ function TreeDataGrid<R, SR, K extends Key>(
9696
groupBy.push(column.key);
9797
columns[index] = {
9898
...column,
99-
frozen: true,
99+
frozen: column.frozen ?? true,
100100
renderCell: () => null,
101101
renderGroupCell: column.renderGroupCell ?? renderToggleGroup,
102102
editable: false

website/demos/RowGrouping.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ const optionsClassname = css`
2424
text-transform: capitalize;
2525
`;
2626

27+
const hrClassname = css`
28+
margin: 0;
29+
`;
30+
2731
interface Row {
2832
id: number;
2933
country: string;
@@ -169,6 +173,8 @@ export default function RowGrouping({ direction }: Props) {
169173
setExpandedGroupIds(new Set());
170174
}
171175

176+
const [areGroupColumnsFrozen, setAreGroupColumnsFrozen] = useState<boolean>(true);
177+
172178
return (
173179
<div className={groupingClassname}>
174180
<b>Group by columns:</b>
@@ -185,8 +191,19 @@ export default function RowGrouping({ direction }: Props) {
185191
))}
186192
</div>
187193

194+
<hr className={hrClassname} />
195+
196+
<label>
197+
<input
198+
type="checkbox"
199+
checked={areGroupColumnsFrozen}
200+
onChange={() => setAreGroupColumnsFrozen(!areGroupColumnsFrozen)}
201+
/>{' '}
202+
Frozen group columns
203+
</label>
204+
188205
<TreeDataGrid
189-
columns={columns}
206+
columns={columns.map((c) => ({ ...c, frozen: areGroupColumnsFrozen }))}
190207
rows={rows}
191208
rowKeyGetter={rowKeyGetter}
192209
selectedRows={selectedRows}

0 commit comments

Comments
 (0)