Skip to content

Commit d9eb827

Browse files
jnm2377jnm2377
authored
fix(DataTable): expandable table size variations alignment issues (#8080)
* feat: add size variation expandable tables * fix: small persistent search width * fix: size variation expandable content padding * fix: remove commented code * fix: add 16px padding expand btn * fix: tall expand btn width
1 parent 8f3c2a1 commit d9eb827

File tree

7 files changed

+202
-11
lines changed

7 files changed

+202
-11
lines changed

‎packages/components/src/components/data-table/_data-table-action.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,10 @@
544544
padding: $spacing-03;
545545
}
546546

547+
.#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent {
548+
width: 100%;
549+
}
550+
547551
//hidden
548552
.#{$prefix}--toolbar-search-container-expandable {
549553
width: rem(32px);

‎packages/components/src/components/data-table/_data-table-core.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,6 @@
319319

320320
.#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand,
321321
.#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand {
322-
width: rem(64px);
323322
height: rem(64px);
324323
}
325324

@@ -532,7 +531,6 @@
532531

533532
.#{$prefix}--data-table--sticky-header {
534533
display: block;
535-
// max-height: rem(300px);
536534
overflow-y: scroll;
537535

538536
thead,
@@ -587,10 +585,6 @@
587585
min-height: 3rem;
588586
}
589587

590-
// .#{$prefix}--parent-row td {
591-
// padding: 1rem;
592-
// }
593-
594588
&:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--short)
595589
td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
596590
padding-top: rem(14px);

‎packages/components/src/components/data-table/_data-table-expandable.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,30 @@
7070
background-color $duration--fast-02 motion(standard, productive);
7171
}
7272

73+
//compact child row padding
74+
.#{$prefix}--data-table--compact
75+
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
76+
+ tr[data-child-row]
77+
td {
78+
padding-left: 2.5rem;
79+
}
80+
81+
//short child row padding
82+
.#{$prefix}--data-table--short
83+
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
84+
+ tr[data-child-row]
85+
td {
86+
padding-left: 3rem;
87+
}
88+
89+
//tall child row padding
90+
.#{$prefix}--data-table--tall
91+
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
92+
+ tr[data-child-row]
93+
td {
94+
padding-left: 5rem;
95+
}
96+
7397
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
7498
+ tr[data-child-row]
7599
td
@@ -198,6 +222,7 @@
198222
width: 100%;
199223
// Account for the border in `.bx--table-expand`
200224
height: calc(100% + 1px);
225+
padding: 0 1rem;
201226
vertical-align: inherit;
202227
}
203228

‎packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export const Usage = () => (
104104
</TableBatchActions>
105105
<TableToolbarContent>
106106
<TableToolbarSearch
107-
defaultExpanded
107+
persistent="true"
108108
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
109109
onChange={onInputChange}
110110
/>

‎packages/react/src/components/DataTable/stories/dynamic-content/story.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
.demo-expanded-td td {
22
padding-left: 4rem;
3-
padding-bottom: 1.5rem;
4-
padding-top: 1rem;
53
}

‎packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
*/
77

88
import './DataTable-expansion-story.scss';
9+
import { action } from '@storybook/addon-actions';
910

1011
import React from 'react';
12+
import Button from '../../../Button';
1113
import DataTable, {
1214
Table,
1315
TableBody,
@@ -19,6 +21,11 @@ import DataTable, {
1921
TableHead,
2022
TableHeader,
2123
TableRow,
24+
TableToolbar,
25+
TableToolbarAction,
26+
TableToolbarContent,
27+
TableToolbarSearch,
28+
TableToolbarMenu,
2229
} from '../../../DataTable';
2330
import { rows, headers } from '../shared';
2431
import mdx from '../../DataTable.mdx';
@@ -93,6 +100,171 @@ export const Usage = () => (
93100
</DataTable>
94101
);
95102

103+
export const CompactExpansion = () => (
104+
<DataTable rows={rows} headers={headers}>
105+
{({
106+
rows,
107+
headers,
108+
getHeaderProps,
109+
getRowProps,
110+
getTableProps,
111+
onInputChange,
112+
getToolbarProps,
113+
getTableContainerProps,
114+
}) => (
115+
<TableContainer
116+
title="DataTable"
117+
description="With expansion"
118+
{...getTableContainerProps()}>
119+
<TableToolbar {...getToolbarProps()} size="small">
120+
<TableToolbarContent>
121+
<TableToolbarSearch persistent="true" onChange={onInputChange} />
122+
<TableToolbarMenu>
123+
<TableToolbarAction onClick={() => alert('Alert 1')}>
124+
Action 1
125+
</TableToolbarAction>
126+
<TableToolbarAction onClick={() => alert('Alert 2')}>
127+
Action 2
128+
</TableToolbarAction>
129+
<TableToolbarAction onClick={() => alert('Alert 3')}>
130+
Action 3
131+
</TableToolbarAction>
132+
</TableToolbarMenu>
133+
<Button onClick={action('Add new row')} size="small" kind="primary">
134+
Add new
135+
</Button>
136+
</TableToolbarContent>
137+
</TableToolbar>
138+
<Table {...getTableProps()} size="compact">
139+
<TableHead>
140+
<TableRow>
141+
<TableExpandHeader />
142+
{headers.map((header, i) => (
143+
<TableHeader key={i} {...getHeaderProps({ header })}>
144+
{header.header}
145+
</TableHeader>
146+
))}
147+
</TableRow>
148+
</TableHead>
149+
<TableBody>
150+
{rows.map((row) => (
151+
<React.Fragment key={row.id}>
152+
<TableExpandRow {...getRowProps({ row })}>
153+
{row.cells.map((cell) => (
154+
<TableCell key={cell.id}>{cell.value}</TableCell>
155+
))}
156+
</TableExpandRow>
157+
<TableExpandedRow
158+
colSpan={headers.length + 1}
159+
className="demo-expanded-td">
160+
<h6>Expandable row content</h6>
161+
<div>Description here</div>
162+
</TableExpandedRow>
163+
</React.Fragment>
164+
))}
165+
</TableBody>
166+
</Table>
167+
</TableContainer>
168+
)}
169+
</DataTable>
170+
);
171+
172+
export const ShortExpansion = () => (
173+
<DataTable rows={rows} headers={headers}>
174+
{({
175+
rows,
176+
headers,
177+
getHeaderProps,
178+
getRowProps,
179+
getTableProps,
180+
getTableContainerProps,
181+
}) => (
182+
<TableContainer
183+
title="DataTable"
184+
description="With expansion"
185+
{...getTableContainerProps()}>
186+
<Table {...getTableProps()} size="short">
187+
<TableHead>
188+
<TableRow>
189+
<TableExpandHeader />
190+
{headers.map((header, i) => (
191+
<TableHeader key={i} {...getHeaderProps({ header })}>
192+
{header.header}
193+
</TableHeader>
194+
))}
195+
</TableRow>
196+
</TableHead>
197+
<TableBody>
198+
{rows.map((row) => (
199+
<React.Fragment key={row.id}>
200+
<TableExpandRow {...getRowProps({ row })}>
201+
{row.cells.map((cell) => (
202+
<TableCell key={cell.id}>{cell.value}</TableCell>
203+
))}
204+
</TableExpandRow>
205+
<TableExpandedRow
206+
colSpan={headers.length + 1}
207+
className="demo-expanded-td">
208+
<h6>Expandable row content</h6>
209+
<div>Description here</div>
210+
</TableExpandedRow>
211+
</React.Fragment>
212+
))}
213+
</TableBody>
214+
</Table>
215+
</TableContainer>
216+
)}
217+
</DataTable>
218+
);
219+
220+
export const TallExpansion = () => (
221+
<DataTable rows={rows} headers={headers}>
222+
{({
223+
rows,
224+
headers,
225+
getHeaderProps,
226+
getRowProps,
227+
getTableProps,
228+
getTableContainerProps,
229+
}) => (
230+
<TableContainer
231+
title="DataTable"
232+
description="With expansion"
233+
{...getTableContainerProps()}>
234+
<Table {...getTableProps()} size="tall">
235+
<TableHead>
236+
<TableRow>
237+
<TableExpandHeader />
238+
{headers.map((header, i) => (
239+
<TableHeader key={i} {...getHeaderProps({ header })}>
240+
{header.header}
241+
</TableHeader>
242+
))}
243+
</TableRow>
244+
</TableHead>
245+
<TableBody>
246+
{rows.map((row) => (
247+
<React.Fragment key={row.id}>
248+
<TableExpandRow {...getRowProps({ row })}>
249+
{row.cells.map((cell) => (
250+
<TableCell key={cell.id}>{cell.value}</TableCell>
251+
))}
252+
</TableExpandRow>
253+
<TableExpandedRow
254+
colSpan={headers.length + 1}
255+
className="demo-expanded-td">
256+
<h6>Expandable row content</h6>
257+
<div>Description here</div>
258+
</TableExpandedRow>
259+
</React.Fragment>
260+
))}
261+
</TableBody>
262+
</Table>
263+
</TableContainer>
264+
)}
265+
</DataTable>
266+
);
267+
96268
export const BatchExpansion = () => (
97269
<DataTable
98270
rows={rows}

‎packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33

44
.demo-expanded-td td {
55
padding-left: 4rem;
6-
padding-bottom: 1.5rem;
7-
padding-top: 1rem;
86
}
97

108
.demo-inner-container-header {

0 commit comments

Comments
 (0)