Skip to content

Update collapsible column groups topic for React 19 #1506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 12, 2025
Merged

Update collapsible column groups topic for React 19 #1506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef52490
Update collapsible column groups topic for React 19
IMinchev64 May 2, 2025
186e6fc
Resolve comment
IMinchev64 May 8, 2025
b60626b
set correct column data types
IMinchev64 May 8, 2025
00098a5
docs(toc): add updated status for collapsible column group topic
dkamburov May 12, 2025
c64e95d
Merge branch 'vnext' into iminchev/collapsible-column-groups-react
dkamburov May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions doc/en/components/grids/_shared/collapsible-column-groups.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,25 +114,25 @@ Let's see the markup below:
```

```tsx
<IgrColumnGroup collapsible="true" header="Customer Information">
<IgrColumn field="CustomerName" header="Customer Name" visibleWhenCollapsed="true">
<IgrColumnGroup collapsible={true} header="Customer Information">
<IgrColumn field="CustomerName" header="Customer Name" visibleWhenCollapsed={true}>
</IgrColumn>
<IgrColumn field="CustomerID" header="Customer ID" visibleWhenCollapsed="false">
<IgrColumn field="CustomerID" header="Customer ID" visibleWhenCollapsed={false}>
</IgrColumn>
<IgrColumn field="CustomerFirstName" header="First Name" visibleWhenCollapsed="false">
<IgrColumn field="CustomerFirstName" header="First Name" visibleWhenCollapsed={false}>
</IgrColumn>
<IgrColumn field="CustomerLastName" header="Last Name" visibleWhenCollapsed="false">
<IgrColumn field="CustomerLastName" header="Last Name" visibleWhenCollapsed={false}>
</IgrColumn>
<IgrColumnGroup header="Customer Address">
<IgrColumn field="CustomerAddress" header="Full Address" width="250px" visibleWhenCollapsed="true">
<IgrColumn field="CustomerAddress" header="Full Address" width="250px" visibleWhenCollapsed={true}>
</IgrColumn>
<IgrColumn field="Address" visibleWhenCollapsed="false">
<IgrColumn field="Address" visibleWhenCollapsed={false}>
</IgrColumn>
<IgrColumn field="City" visibleWhenCollapsed="false">
<IgrColumn field="City" visibleWhenCollapsed={false}>
</IgrColumn>
<IgrColumn field="Country" visibleWhenCollapsed="false">
<IgrColumn field="Country" visibleWhenCollapsed={false}>
</IgrColumn>
<IgrColumn field="PostalCode" header="Postal Code" visibleWhenCollapsed="false">
<IgrColumn field="PostalCode" header="Postal Code" visibleWhenCollapsed={false}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
Expand Down Expand Up @@ -215,19 +215,19 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => {
```

```tsx
<IgrColumnGroup id="info" header="Customer Information" collapsible="true" collapsibleIndicatorTemplate={this.collapsibleIndicatorTemplate}>
<IgrColumn field="CustomerName" header="Fullname" dataType="String" visibleWhenCollapsed="true"></IgrColumn>
<IgrColumn field="CustomerID" header="Customer ID" dataType="String" visibleWhenCollapsed="false"></IgrColumn>
<IgrColumnGroup id="address" header="Customer Address" collapsible="true">
<IgrColumn field="Country" header="Country" dataType="String" sortable="true" visibleWhenCollapsed="true"></IgrColumn>
<IgrColumn field="City" header="City" dataType="String" sortable="true" visibleWhenCollapsed="false"></IgrColumn>
<IgrColumnGroup id="info" header="Customer Information" collapsible={true} collapsibleIndicatorTemplate={collapsibleIndicatorTemplate}>
<IgrColumn field="CustomerName" header="Fullname" dataType="string" visibleWhenCollapsed={true}></IgrColumn>
<IgrColumn field="CustomerID" header="Customer ID" dataType="string" visibleWhenCollapsed={false}></IgrColumn>
<IgrColumnGroup id="address" header="Customer Address" collapsible={true}>
<IgrColumn field="Country" header="Country" dataType="string" sortable={true} visibleWhenCollapsed={true}></IgrColumn>
<IgrColumn field="City" header="City" dataType="string" sortable={true} visibleWhenCollapsed={false}></IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>

function collapsibleIndicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) {
const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
return (
<div>
<IgrIcon iconName={e.dataContext.column.expanded ? 'remove' : 'add'}></IgrIcon>
<IgrIcon iconName={ctx.column.expanded ? 'remove' : 'add'}></IgrIcon>
</div>)
}
```
Expand Down
3 changes: 2 additions & 1 deletion docfx/en/components/toc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,8 @@
{
"exclude": ["Angular"],
"name": "Collapsible Column Groups",
"href": "grids/grid/collapsible-column-groups.md"
"href": "grids/grid/collapsible-column-groups.md",
"status": ["UPDATED_REACT"]
},
{
"exclude": ["Angular"],
Expand Down