Skip to content

Implementing a trigger event for hierarchical datagrid expand #2241

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

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
+414 −136
Open

Implementing a trigger event for hierarchical datagrid expand #2241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
11021c5
Implementing logic for adding a trigger event for hierarchical data e…
Jun 11, 2025
46a61f5
Fixed behavior for loadChildren
Jun 11, 2025
2d15e67
Updated doc
Jun 11, 2025
44fce81
Added test for new Datagrid feature
Jun 12, 2025
9ea9757
Sorted props alphabetically in doc
Jun 12, 2025
ef3617f
Added fix for lazy children selection from parent
Jul 1, 2025
d216d42
Added optional chaining to prevent error
Jul 2, 2025
aa313a8
Added spinner while lazy loading datagrid
Jul 2, 2025
a7209c1
Converted loadChildren into an internal prop for each row
Jul 2, 2025
f1ca9fa
Added possibility to handle both expand and collapse actions
Jul 4, 2025
95e4473
Added unknown workaround to prevent index signature limitations
Jul 4, 2025
4effb0a
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Jul 7, 2025
5fd3d83
Fixed test for lazy loading mock
Jul 7, 2025
7ffd796
Fixed types from params
Jul 7, 2025
16b1570
Added fix for selection while loading hierarchy
Jul 8, 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
166 changes: 93 additions & 73 deletions apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ const GridRowTypeString = `{

const HierarchyGridRowTypeString = `GridRow & {
childRows?: HierarchyGridRow[] | GridRow[];
childrenTrigger?: (
open: boolean,
triggerRow: HierarchyGridRow
) => (HierarchyGridRow[] | GridRow[]) | Promise<HierarchyGridRow[] | GridRow[]>;
}`;

const ExpandableGridRowTypeString = `GridRow & {
Expand Down Expand Up @@ -116,26 +120,11 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>defaultPage</td>
<td>
<StatusBadge status="required" />
rows
</td>
<td>
<TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
<p>Each one of them being in order:</p>
<p>
<ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
</p>
<p>
<ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
</p>
<p>
<ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
</p>
</td>
<td>
List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
<TableCode>number</TableCode>
</td>
<td>Default page in which the datagrid is rendered.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -147,32 +136,45 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>selectable</td>
<td>itemsPerPage</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>number</TableCode>
</td>
<td>Whether the rows are selectable or not.</td>
<td>-</td>
<td>Number of items per page.</td>
<td>5</td>
</tr>
<tr>
<td>selectedRows</td>
<td>itemsPerPageFunction</td>
<td>
<TableCode>{`Set<string | number>`}</TableCode>
<TableCode>{`(value: number) => void`}</TableCode>
</td>
<td>
Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
<Code>uniqueRowId</Code> key will be used to identify the each row.
This function will be called when the user selects an item per page option. The value selected will be
passed as a parameter.
</td>
<td>-</td>
</tr>
<tr>
<td>onSelectRows</td>
<td>itemsPerPageOptions</td>
<td>
<TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
<TableCode>number[]</TableCode>
</td>
<td>An array of numbers representing the items per page options.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
childrenTrigger
</DxcFlex>
</td>
<td>
Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
<TableCode>{`(open: boolean, triggerRow: HierarchyGridRow) => HierarchyGridRow[] | Promise<HierarchyGridRow[]>`}</TableCode>
</td>
<td>
Function called whenever a cell with children (<Code>HierarchyGridRow</Code>) is expanded. Returns the
children array.
</td>
<td>-</td>
</tr>
Expand All @@ -184,6 +186,25 @@ const sections = [
<td>Function called whenever a cell is edited.</td>
<td>-</td>
</tr>
<tr>
<td>onPageChange</td>
<td>
<TableCode>{`(page: number) => void`}</TableCode>
</td>
<td>Function called whenever the current page is changed.</td>
<td>-</td>
</tr>
<tr>
<td>onSelectRows</td>
<td>
<TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
</td>
<td>
Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
</td>
<td>-</td>
</tr>
<tr>
<td>onSort</td>
<td>
Expand All @@ -196,90 +217,89 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>uniqueRowId</td>
<td>
<TableCode>string</TableCode>
<StatusBadge status="required" />
rows
</td>
<td>
This prop indicates the unique key that can be used to identify each row. The value of that key can be
either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
<Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
<TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
<p>Each one of them being in order:</p>
<p>
<ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
</p>
<p>
<ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
</p>
<p>
<ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
</p>
</td>
<td>-</td>
</tr>
<tr>
<td>summaryRow</td>
<td>
<TableCode>GridRow</TableCode>
List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
</td>
<td>Extra row that will be always visible.</td>
<td>-</td>
</tr>
<tr>
<td>showPaginator</td>
<td>selectable</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, paginator will be displayed.</td>
<td>false</td>
<td>Whether the rows are selectable or not.</td>
<td>-</td>
</tr>
<tr>
<td>defaultPage</td>
<td>selectedRows</td>
<td>
<TableCode>number</TableCode>
<TableCode>{`Set<string | number>`}</TableCode>
</td>
<td>
Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
<Code>uniqueRowId</Code> key will be used to identify the each row.
</td>
<td>Default page in which the datagrid is rendered.</td>
<td>-</td>
</tr>
<tr>
<td>itemsPerPage</td>
<td>showGoToPage</td>
<td>
<TableCode>number</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>Number of items per page.</td>
<td>5</td>
<td>If true, a select component for navigation between pages will be displayed.</td>
<td>true</td>
</tr>
<tr>
<td>itemsPerPageOptions</td>
<td>showPaginator</td>
<td>
<TableCode>number[]</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>An array of numbers representing the items per page options.</td>
<td>-</td>
<td>If true, paginator will be displayed.</td>
<td>false</td>
</tr>
<tr>
<td>itemsPerPageFunction</td>
<td>
<TableCode>{`(value: number) => void`}</TableCode>
</td>
<td>summaryRow</td>
<td>
This function will be called when the user selects an item per page option. The value selected will be
passed as a parameter.
<TableCode>GridRow</TableCode>
</td>
<td>Extra row that will be always visible.</td>
<td>-</td>
</tr>
<tr>
<td>onPageChange</td>
<td>totalItems</td>
<td>
<TableCode>{`(page: number) => void`}</TableCode>
<TableCode>number</TableCode>
</td>
<td>Function called whenever the current page is changed.</td>
<td>Number of total items.</td>
<td>-</td>
</tr>
<tr>
<td>showGoToPage</td>
<td>uniqueRowId</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>string</TableCode>
</td>
<td>If true, a select component for navigation between pages will be displayed.</td>
<td>true</td>
</tr>
<tr>
<td>totalItems</td>
<td>
<TableCode>number</TableCode>
This prop indicates the unique key that can be used to identify each row. The value of that key can be
either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
<Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
</td>
<td>Number of total items.</td>
<td>-</td>
</tr>
</tbody>
Expand Down
78 changes: 75 additions & 3 deletions packages/lib/src/data-grid/DataGrid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import DxcDataGrid from "./DataGrid";
import DxcContainer from "../container/Container";
import { GridColumn, HierarchyGridRow } from "./types";
import { GridColumn, GridRow, HierarchyGridRow } from "./types";
import { isValidElement, useState } from "react";
import { disabledRules } from "../../test/accessibility/rules/specific/data-grid/disabledRules";
import preview from "../../.storybook/preview";
Expand Down Expand Up @@ -325,7 +325,7 @@ const childcolumns: GridColumn[] = [
},
];

const childRows: HierarchyGridRow[] = [
const childRows = [
{
name: "Root Node 1",
value: "1",
Expand Down Expand Up @@ -444,7 +444,59 @@ const childRows: HierarchyGridRow[] = [
},
] as HierarchyGridRow[];

const childRowsPaginated: HierarchyGridRow[] = [
const childrenTrigger = (open: boolean, triggerRow: HierarchyGridRow) => {
if (open) {
return new Promise<HierarchyGridRow[]>((resolve) => {
setTimeout(() => {
resolve([
{
name: `${triggerRow.name} Child 1`,
value: triggerRow.value,
id: `${triggerRow.id}-child-1`,
childrenTrigger,
},
{
name: `${triggerRow.name} Child 2`,
value: triggerRow.value,
id: `${triggerRow.id}-child-2`,
childrenTrigger,
},
] as unknown as HierarchyGridRow[]);
}, 5000);
});
} else {
return [] as HierarchyGridRow[];
}
};

const childRowsLazy = [
{
name: "Root Node 1 Lazy",
value: "1",
id: "lazy-a",
childrenTrigger,
},
{
name: "Root Node 2 Lazy",
value: "2",
id: "lazy-b",
childrenTrigger,
},
{
name: "Root Node 3 Lazy",
value: "3",
id: "lazy-c",
childrenTrigger,
},
{
name: "Root Node 4 Lazy",
value: "4",
id: "lazy-d",
childrenTrigger,
},
] as unknown as HierarchyGridRow[];

const childRowsPaginated = [
{
name: "Paginated Node 1",
value: "1",
Expand Down Expand Up @@ -728,6 +780,17 @@ const DataGridControlled = () => {
onSelectRows={setSelectedChildRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="DataGrid with childrenTrigger function" theme="light" level={4} />
<DxcDataGrid
columns={childcolumns}
rows={childRowsLazy}
uniqueRowId="id"
selectable
selectedRows={selectedRows}
onSelectRows={setSelectedRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Empty Data Grid" theme="light" level={4} />
<DxcDataGrid
Expand Down Expand Up @@ -997,6 +1060,15 @@ export const Chromatic: Story = {

export const Controlled: Story = {
render: DataGridControlled,
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByText("Root Node 1 Lazy"));
await userEvent.click(canvas.getByText("Root Node 2 Lazy"));
// await userEvent.click(canvas.getByText("Root Node 1 Lazy Child 1"));
// await userEvent.click(canvas.getByText("Root Node 1 Lazy Child 2"));
// await userEvent.click(canvas.getByText("Root Node 2 Lazy Child 1"));
// await userEvent.click(canvas.getByText("Root Node 2 Lazy Child 2"));
},
};

export const CustomSort: Story = {
Expand Down
Loading