Skip to content

Commit 66e3615

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2206 from dxc-technology/jialecl/datagrid-expanded
Added option to have rows expanded by default
2 parents 29029d9 + 532ad88 commit 66e3615

4 files changed

Lines changed: 165 additions & 145 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const HierarchyGridRowTypeString = `GridRow & {
3939
const ExpandableGridRowTypeString = `GridRow & {
4040
expandedContent?: React.ReactNode;
4141
expandedContentHeight?: number;
42+
contentIsExpanded?: boolean;
4243
}`;
4344

4445
const actionsType = `{

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ const expandableRows = [
153153
issueType: "Bug",
154154
expandedContent: <DxcContainer>Custom content 1</DxcContainer>,
155155
expandedContentHeight: 470,
156+
contentIsExpanded: true,
156157
actions: <DxcDataGrid.ActionsCell actions={actions} />,
157158
},
158159
{
@@ -1142,4 +1143,4 @@ export const DataGridSortedExpanded: Story = {
11421143

11431144
export const UnknownUniqueId: Story = {
11441145
render: DataGridUnknownUniqueRowId,
1145-
};
1146+
};

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

Lines changed: 161 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,149 @@ import DxcPaginator from "../paginator/Paginator";
2323
import { DxcActionsCell } from "../table/Table";
2424
import HalstackContext from "../HalstackContext";
2525

26+
const ActionContainer = styled.div`
27+
display: flex;
28+
height: 100%;
29+
align-items: center;
30+
justify-content: center;
31+
font-size: 14px;
32+
width: 100%;
33+
`;
34+
35+
const HierarchyContainer = styled.div<{
36+
level: number;
37+
}>`
38+
padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
39+
button {
40+
display: grid;
41+
grid-template-columns: auto 1fr;
42+
align-items: center;
43+
gap: 0.5rem;
44+
padding: 0px;
45+
border: 0px;
46+
width: 100%;
47+
height: ${(props) => props.theme.dataRowHeight}px;
48+
background: transparent;
49+
text-align: left;
50+
font-size: ${(props) => props.theme.dataFontSize};
51+
font-family: inherit;
52+
color: inherit;
53+
cursor: pointer;
54+
}
55+
`;
56+
57+
const DataGridContainer = styled.div<{
58+
paginatorRendered: boolean;
59+
}>`
60+
width: 100%;
61+
height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)};
62+
.rdg {
63+
border-radius: 4px;
64+
height: 100%;
65+
border: 0px;
66+
&::-webkit-scrollbar {
67+
width: 8px;
68+
height: 8px;
69+
}
70+
&::-webkit-scrollbar-thumb {
71+
background-color: ${(props) => props.theme.scrollBarThumbColor};
72+
border-radius: 6px;
73+
}
74+
&::-webkit-scrollbar-track {
75+
background-color: ${(props) => props.theme.scrollBarTrackColor};
76+
border-radius: 6px;
77+
}
78+
}
79+
.rdg-cell:has(> #action) {
80+
padding: 0px;
81+
}
82+
.rdg-cell {
83+
display: grid;
84+
align-items: center;
85+
width: 100%;
86+
padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
87+
font-family: ${(props) => props.theme.dataFontFamily};
88+
font-size: ${(props) => props.theme.dataFontSize};
89+
font-style: ${(props) => props.theme.dataFontStyle};
90+
font-weight: ${(props) => props.theme.dataFontWeight};
91+
color: ${(props) => props.theme.dataFontColor};
92+
text-transform: ${(props) => props.theme.dataFontTextTransform};
93+
line-height: ${(props) => props.theme.dataTextLineHeight};
94+
border-bottom: ${(props) =>
95+
`${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
96+
border-right: ${(props) =>
97+
`${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
98+
background-color: ${(props) => props.theme.dataBackgroundColor};
99+
outline-color: ${(props) => props.theme.focusColor} !important;
100+
.rdg-text-editor:focus {
101+
border-color: transparent;
102+
}
103+
}
104+
.rdg-header-row {
105+
border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
106+
border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
107+
.rdg-cell {
108+
font-family: ${(props) => props.theme.headerFontFamily};
109+
font-size: ${(props) => props.theme.headerFontSize};
110+
font-style: ${(props) => props.theme.headerFontStyle};
111+
font-weight: ${(props) => props.theme.headerFontWeight};
112+
color: ${(props) => props.theme.headerFontColor};
113+
text-transform: ${(props) => props.theme.headerFontTextTransform};
114+
padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
115+
line-height: ${(props) => props.theme.headerTextLineHeight};
116+
background-color: ${(props) => props.theme.headerBackgroundColor};
117+
.sortIconContainer {
118+
margin-left: 0.5rem;
119+
display: flex;
120+
height: 100%;
121+
align-items: center;
122+
}
123+
}
124+
}
125+
.rdg-row {
126+
.rdg-cell:last-child {
127+
border-right: 0px;
128+
}
129+
}
130+
.rdg-summary-row {
131+
background-color: #fafafa;
132+
.rdg-cell {
133+
border: 0px;
134+
font-weight: 600;
135+
}
136+
}
137+
.ellipsis-cell {
138+
text-overflow: ellipsis;
139+
overflow: hidden;
140+
white-space: nowrap;
141+
width: 100%;
142+
height: 100%;
143+
display: flex;
144+
align-items: center;
145+
}
146+
.align-left {
147+
text-align: left;
148+
justify-content: flex-start;
149+
}
150+
.align-center {
151+
text-align: center;
152+
justify-content: center;
153+
}
154+
.align-right {
155+
text-align: right;
156+
justify-content: flex-end;
157+
}
158+
.header-align-left {
159+
text-align: left;
160+
}
161+
.header-align-center {
162+
text-align: center;
163+
}
164+
.header-align-right {
165+
text-align: right;
166+
}
167+
`;
168+
26169
const DxcDataGrid = ({
27170
columns,
28171
rows,
@@ -156,7 +299,24 @@ const DxcDataGrid = ({
156299
}, [columnsToRender.length]);
157300

158301
useEffect(() => {
159-
setRowsToRender(rows);
302+
const finalRows = [...rows];
303+
if (expandable) {
304+
rows.forEach((row, index) => {
305+
if (
306+
row.contentIsExpanded &&
307+
!rows.some((row) => row[uniqueRowId] === `${rowKeyGetter(row, uniqueRowId)}_expanded`)
308+
) {
309+
addRow(finalRows, index + 1, {
310+
isExpandedChildContent: row.contentIsExpanded,
311+
[uniqueRowId]: `${rowKeyGetter(row, uniqueRowId)}_expanded`,
312+
expandedChildContent: row.expandedContent,
313+
triggerRowKey: rowKeyGetter(row, uniqueRowId),
314+
expandedContentHeight: row.expandedContentHeight,
315+
});
316+
}
317+
});
318+
}
319+
setRowsToRender(finalRows);
160320
}, [rows]);
161321

162322
const reorderedColumns = useMemo(
@@ -280,149 +440,6 @@ const DxcDataGrid = ({
280440
);
281441
};
282442

283-
const ActionContainer = styled.div`
284-
display: flex;
285-
height: 100%;
286-
align-items: center;
287-
justify-content: center;
288-
font-size: 14px;
289-
width: 100%;
290-
`;
291-
292-
const HierarchyContainer = styled.div<{
293-
level: number;
294-
}>`
295-
padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
296-
button {
297-
display: grid;
298-
grid-template-columns: auto 1fr;
299-
align-items: center;
300-
gap: 0.5rem;
301-
padding: 0px;
302-
border: 0px;
303-
width: 100%;
304-
height: ${(props) => props.theme.dataRowHeight}px;
305-
background: transparent;
306-
text-align: left;
307-
font-size: ${(props) => props.theme.dataFontSize};
308-
font-family: inherit;
309-
color: inherit;
310-
cursor: pointer;
311-
}
312-
`;
313-
314-
const DataGridContainer = styled.div<{
315-
paginatorRendered: boolean;
316-
}>`
317-
width: 100%;
318-
height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)};
319-
.rdg {
320-
border-radius: 4px;
321-
height: 100%;
322-
border: 0px;
323-
&::-webkit-scrollbar {
324-
width: 8px;
325-
height: 8px;
326-
}
327-
&::-webkit-scrollbar-thumb {
328-
background-color: ${(props) => props.theme.scrollBarThumbColor};
329-
border-radius: 6px;
330-
}
331-
&::-webkit-scrollbar-track {
332-
background-color: ${(props) => props.theme.scrollBarTrackColor};
333-
border-radius: 6px;
334-
}
335-
}
336-
.rdg-cell:has(> #action) {
337-
padding: 0px;
338-
}
339-
.rdg-cell {
340-
display: grid;
341-
align-items: center;
342-
width: 100%;
343-
padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
344-
font-family: ${(props) => props.theme.dataFontFamily};
345-
font-size: ${(props) => props.theme.dataFontSize};
346-
font-style: ${(props) => props.theme.dataFontStyle};
347-
font-weight: ${(props) => props.theme.dataFontWeight};
348-
color: ${(props) => props.theme.dataFontColor};
349-
text-transform: ${(props) => props.theme.dataFontTextTransform};
350-
line-height: ${(props) => props.theme.dataTextLineHeight};
351-
border-bottom: ${(props) =>
352-
`${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
353-
border-right: ${(props) =>
354-
`${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
355-
background-color: ${(props) => props.theme.dataBackgroundColor};
356-
outline-color: ${(props) => props.theme.focusColor} !important;
357-
.rdg-text-editor:focus {
358-
border-color: transparent;
359-
}
360-
}
361-
.rdg-header-row {
362-
border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
363-
border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
364-
.rdg-cell {
365-
font-family: ${(props) => props.theme.headerFontFamily};
366-
font-size: ${(props) => props.theme.headerFontSize};
367-
font-style: ${(props) => props.theme.headerFontStyle};
368-
font-weight: ${(props) => props.theme.headerFontWeight};
369-
color: ${(props) => props.theme.headerFontColor};
370-
text-transform: ${(props) => props.theme.headerFontTextTransform};
371-
padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
372-
line-height: ${(props) => props.theme.headerTextLineHeight};
373-
background-color: ${(props) => props.theme.headerBackgroundColor};
374-
.sortIconContainer {
375-
margin-left: 0.5rem;
376-
display: flex;
377-
height: 100%;
378-
align-items: center;
379-
}
380-
}
381-
}
382-
.rdg-row {
383-
.rdg-cell:last-child {
384-
border-right: 0px;
385-
}
386-
}
387-
.rdg-summary-row {
388-
background-color: #fafafa;
389-
.rdg-cell {
390-
border: 0px;
391-
font-weight: 600;
392-
}
393-
}
394-
.ellipsis-cell {
395-
text-overflow: ellipsis;
396-
overflow: hidden;
397-
white-space: nowrap;
398-
width: 100%;
399-
height: 100%;
400-
display: flex;
401-
align-items: center;
402-
}
403-
.align-left {
404-
text-align: left;
405-
justify-content: flex-start;
406-
}
407-
.align-center {
408-
text-align: center;
409-
justify-content: center;
410-
}
411-
.align-right {
412-
text-align: right;
413-
justify-content: flex-end;
414-
}
415-
.header-align-left {
416-
text-align: left;
417-
}
418-
.header-align-center {
419-
text-align: center;
420-
}
421-
.header-align-right {
422-
text-align: right;
423-
}
424-
`;
425-
426443
DxcDataGrid.ActionsCell = DxcActionsCell;
427444

428445
export default DxcDataGrid;

‎packages/lib/src/data-grid/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export type HierarchyGridRow = GridRow & {
5454
export type ExpandableGridRow = GridRow & {
5555
expandedContent?: ReactNode;
5656
expandedContentHeight?: number;
57+
contentIsExpanded?: boolean;
5758
};
5859

5960
export type ExpandableRows = {

0 commit comments

Comments
 (0)