Skip to content

Commit 06033b0

Browse files
JialeclJialecl
authored
Merge pull request #2241 from dxc-technology/Mil4n0r/lazy-load-datagrid
Implementing a trigger event for hierarchical datagrid expand
2 parents 8a920a6 + 3bdbab6 commit 06033b0

File tree

6 files changed

+421
-141
lines changed

6 files changed

+421
-141
lines changed

‎apps/website/screens/components/data-grid/code/DataGridCodePage.tsx‎

Lines changed: 94 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ const GridRowTypeString = `{
3333

3434
const HierarchyGridRowTypeString = `GridRow & {
3535
childRows?: HierarchyGridRow[] | GridRow[];
36+
childrenTrigger?: (
37+
open: boolean,
38+
triggerRow: HierarchyGridRow
39+
) => (HierarchyGridRow[] | GridRow[]) | Promise<HierarchyGridRow[] | GridRow[]>;
3640
}`;
3741

3842
const ExpandableGridRowTypeString = `GridRow & {
@@ -116,26 +120,11 @@ const sections = [
116120
<td>-</td>
117121
</tr>
118122
<tr>
123+
<td>defaultPage</td>
119124
<td>
120-
<StatusBadge status="required" />
121-
rows
122-
</td>
123-
<td>
124-
<TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
125-
<p>Each one of them being in order:</p>
126-
<p>
127-
<ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
128-
</p>
129-
<p>
130-
<ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
131-
</p>
132-
<p>
133-
<ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
134-
</p>
135-
</td>
136-
<td>
137-
List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
125+
<TableCode>number</TableCode>
138126
</td>
127+
<td>Default page in which the datagrid is rendered.</td>
139128
<td>-</td>
140129
</tr>
141130
<tr>
@@ -147,32 +136,46 @@ const sections = [
147136
<td>-</td>
148137
</tr>
149138
<tr>
150-
<td>selectable</td>
139+
<td>itemsPerPage</td>
151140
<td>
152-
<TableCode>boolean</TableCode>
141+
<TableCode>number</TableCode>
153142
</td>
154-
<td>Whether the rows are selectable or not.</td>
155-
<td>-</td>
143+
<td>Number of items per page.</td>
144+
<td>5</td>
156145
</tr>
157146
<tr>
158-
<td>selectedRows</td>
147+
<td>itemsPerPageFunction</td>
159148
<td>
160-
<TableCode>{`Set<string | number>`}</TableCode>
149+
<TableCode>{`(value: number) => void`}</TableCode>
161150
</td>
162151
<td>
163-
Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
164-
<Code>uniqueRowId</Code> key will be used to identify the each row.
152+
This function will be called when the user selects an item per page option. The value selected will be
153+
passed as a parameter.
165154
</td>
166155
<td>-</td>
167156
</tr>
168157
<tr>
169-
<td>onSelectRows</td>
158+
<td>itemsPerPageOptions</td>
170159
<td>
171-
<TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
160+
<TableCode>number[]</TableCode>
161+
</td>
162+
<td>An array of numbers representing the items per page options.</td>
163+
<td>-</td>
164+
</tr>
165+
<tr>
166+
<td>
167+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
168+
<StatusBadge status="new" />
169+
childrenTrigger
170+
</DxcFlex>
172171
</td>
173172
<td>
174-
Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
175-
set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
173+
<TableCode>{`(open: boolean, triggerRow: HierarchyGridRow) => (HierarchyGridRow[] | GridRow[]) | Promise<HierarchyGridRow[] | GridRow[]>`}</TableCode>
174+
</td>
175+
<td>
176+
Function called whenever a cell with children (<Code>HierarchyGridRow</Code>) is expanded or collapsed
177+
(based on the value of <Code>open</Code>). Returns (or resolves to) the array of child rows nested under
178+
this row to display when expanded.
176179
</td>
177180
<td>-</td>
178181
</tr>
@@ -184,6 +187,25 @@ const sections = [
184187
<td>Function called whenever a cell is edited.</td>
185188
<td>-</td>
186189
</tr>
190+
<tr>
191+
<td>onPageChange</td>
192+
<td>
193+
<TableCode>{`(page: number) => void`}</TableCode>
194+
</td>
195+
<td>Function called whenever the current page is changed.</td>
196+
<td>-</td>
197+
</tr>
198+
<tr>
199+
<td>onSelectRows</td>
200+
<td>
201+
<TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
202+
</td>
203+
<td>
204+
Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
205+
set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
206+
</td>
207+
<td>-</td>
208+
</tr>
187209
<tr>
188210
<td>onSort</td>
189211
<td>
@@ -196,90 +218,89 @@ const sections = [
196218
<td>-</td>
197219
</tr>
198220
<tr>
199-
<td>uniqueRowId</td>
200221
<td>
201-
<TableCode>string</TableCode>
222+
<StatusBadge status="required" />
223+
rows
202224
</td>
203225
<td>
204-
This prop indicates the unique key that can be used to identify each row. The value of that key can be
205-
either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
206-
<Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
226+
<TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
227+
<p>Each one of them being in order:</p>
228+
<p>
229+
<ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
230+
</p>
231+
<p>
232+
<ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
233+
</p>
234+
<p>
235+
<ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
236+
</p>
207237
</td>
208-
<td>-</td>
209-
</tr>
210-
<tr>
211-
<td>summaryRow</td>
212238
<td>
213-
<TableCode>GridRow</TableCode>
239+
List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
214240
</td>
215-
<td>Extra row that will be always visible.</td>
216241
<td>-</td>
217242
</tr>
218243
<tr>
219-
<td>showPaginator</td>
244+
<td>selectable</td>
220245
<td>
221246
<TableCode>boolean</TableCode>
222247
</td>
223-
<td>If true, paginator will be displayed.</td>
224-
<td>false</td>
248+
<td>Whether the rows are selectable or not.</td>
249+
<td>-</td>
225250
</tr>
226251
<tr>
227-
<td>defaultPage</td>
252+
<td>selectedRows</td>
228253
<td>
229-
<TableCode>number</TableCode>
254+
<TableCode>{`Set<string | number>`}</TableCode>
255+
</td>
256+
<td>
257+
Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
258+
<Code>uniqueRowId</Code> key will be used to identify the each row.
230259
</td>
231-
<td>Default page in which the datagrid is rendered.</td>
232260
<td>-</td>
233261
</tr>
234262
<tr>
235-
<td>itemsPerPage</td>
263+
<td>showGoToPage</td>
236264
<td>
237-
<TableCode>number</TableCode>
265+
<TableCode>boolean</TableCode>
238266
</td>
239-
<td>Number of items per page.</td>
240-
<td>5</td>
267+
<td>If true, a select component for navigation between pages will be displayed.</td>
268+
<td>true</td>
241269
</tr>
242270
<tr>
243-
<td>itemsPerPageOptions</td>
271+
<td>showPaginator</td>
244272
<td>
245-
<TableCode>number[]</TableCode>
273+
<TableCode>boolean</TableCode>
246274
</td>
247-
<td>An array of numbers representing the items per page options.</td>
248-
<td>-</td>
275+
<td>If true, paginator will be displayed.</td>
276+
<td>false</td>
249277
</tr>
250278
<tr>
251-
<td>itemsPerPageFunction</td>
252-
<td>
253-
<TableCode>{`(value: number) => void`}</TableCode>
254-
</td>
279+
<td>summaryRow</td>
255280
<td>
256-
This function will be called when the user selects an item per page option. The value selected will be
257-
passed as a parameter.
281+
<TableCode>GridRow</TableCode>
258282
</td>
283+
<td>Extra row that will be always visible.</td>
259284
<td>-</td>
260285
</tr>
261286
<tr>
262-
<td>onPageChange</td>
287+
<td>totalItems</td>
263288
<td>
264-
<TableCode>{`(page: number) => void`}</TableCode>
289+
<TableCode>number</TableCode>
265290
</td>
266-
<td>Function called whenever the current page is changed.</td>
291+
<td>Number of total items.</td>
267292
<td>-</td>
268293
</tr>
269294
<tr>
270-
<td>showGoToPage</td>
295+
<td>uniqueRowId</td>
271296
<td>
272-
<TableCode>boolean</TableCode>
297+
<TableCode>string</TableCode>
273298
</td>
274-
<td>If true, a select component for navigation between pages will be displayed.</td>
275-
<td>true</td>
276-
</tr>
277-
<tr>
278-
<td>totalItems</td>
279299
<td>
280-
<TableCode>number</TableCode>
300+
This prop indicates the unique key that can be used to identify each row. The value of that key can be
301+
either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
302+
<Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
281303
</td>
282-
<td>Number of total items.</td>
283304
<td>-</td>
284305
</tr>
285306
</tbody>

‎packages/lib/src/data-grid/DataGrid.stories.tsx‎

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Title from "../../.storybook/components/Title";
22
import ExampleContainer from "../../.storybook/components/ExampleContainer";
33
import DxcDataGrid from "./DataGrid";
44
import DxcContainer from "../container/Container";
5-
import { GridColumn, HierarchyGridRow } from "./types";
5+
import { GridColumn, GridRow, HierarchyGridRow } from "./types";
66
import { isValidElement, useState } from "react";
77
import { disabledRules } from "../../test/accessibility/rules/specific/data-grid/disabledRules";
88
import preview from "../../.storybook/preview";
@@ -325,7 +325,7 @@ const childcolumns: GridColumn[] = [
325325
},
326326
];
327327

328-
const childRows: HierarchyGridRow[] = [
328+
const childRows = [
329329
{
330330
name: "Root Node 1",
331331
value: "1",
@@ -444,7 +444,59 @@ const childRows: HierarchyGridRow[] = [
444444
},
445445
] as HierarchyGridRow[];
446446

447-
const childRowsPaginated: HierarchyGridRow[] = [
447+
const childrenTrigger = (open: boolean, triggerRow: HierarchyGridRow) => {
448+
if (open) {
449+
return new Promise<HierarchyGridRow[]>((resolve) => {
450+
setTimeout(() => {
451+
resolve([
452+
{
453+
name: `${triggerRow.name} Child 1`,
454+
value: triggerRow.value,
455+
id: `${triggerRow.id}-child-1`,
456+
childrenTrigger,
457+
},
458+
{
459+
name: `${triggerRow.name} Child 2`,
460+
value: triggerRow.value,
461+
id: `${triggerRow.id}-child-2`,
462+
childrenTrigger,
463+
},
464+
] as unknown as HierarchyGridRow[]);
465+
}, 5000);
466+
});
467+
} else {
468+
return [] as HierarchyGridRow[];
469+
}
470+
};
471+
472+
const childRowsLazy = [
473+
{
474+
name: "Root Node 1 Lazy",
475+
value: "1",
476+
id: "lazy-a",
477+
childrenTrigger,
478+
},
479+
{
480+
name: "Root Node 2 Lazy",
481+
value: "2",
482+
id: "lazy-b",
483+
childrenTrigger,
484+
},
485+
{
486+
name: "Root Node 3 Lazy",
487+
value: "3",
488+
id: "lazy-c",
489+
childrenTrigger,
490+
},
491+
{
492+
name: "Root Node 4 Lazy",
493+
value: "4",
494+
id: "lazy-d",
495+
childrenTrigger,
496+
},
497+
] as unknown as HierarchyGridRow[];
498+
499+
const childRowsPaginated = [
448500
{
449501
name: "Paginated Node 1",
450502
value: "1",
@@ -728,6 +780,20 @@ const DataGridControlled = () => {
728780
onSelectRows={setSelectedChildRows}
729781
/>
730782
</ExampleContainer>
783+
<ExampleContainer>
784+
<Title title="DataGrid with childrenTrigger function" theme="light" level={4} />
785+
<DxcDataGrid
786+
columns={childcolumns}
787+
rows={childRowsLazy}
788+
uniqueRowId="id"
789+
selectable
790+
selectedRows={selectedRows}
791+
onSelectRows={(selectedRows) => {
792+
console.log("SELECTEDROWS", selectedRows);
793+
return setSelectedRows(selectedRows);
794+
}}
795+
/>
796+
</ExampleContainer>
731797
<ExampleContainer>
732798
<Title title="Empty Data Grid" theme="light" level={4} />
733799
<DxcDataGrid
@@ -997,6 +1063,11 @@ export const Chromatic: Story = {
9971063

9981064
export const Controlled: Story = {
9991065
render: DataGridControlled,
1066+
play: async ({ canvasElement }) => {
1067+
const canvas = within(canvasElement);
1068+
await userEvent.click(canvas.getByText("Root Node 1 Lazy"));
1069+
await userEvent.click(canvas.getByText("Root Node 2 Lazy"));
1070+
},
10001071
};
10011072

10021073
export const CustomSort: Story = {

0 commit comments

Comments
 (0)