Skip to content

Commit 2cc6a74

Browse files
LFDanLuLFDanLu
authored
Making TableView cell content fill 100% width of its cell (#2042)
* making TableView cell content fill 100% width * updating approach to fix text truncation * fixing where min-width is applied for table cell contents * changing table child styles so user has to provide alignment and text truncation if providing block children * fixing lint * cleaning up story * addressing review comments
1 parent b5b930f commit 2cc6a74

File tree

4 files changed

+121
-0
lines changed

4 files changed

+121
-0
lines changed

‎packages/@adobe/spectrum-css-temp/components/table/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,10 @@ governing permissions and limitations under the License.
157157
}
158158

159159
.spectrum-Table-cellContents {
160+
flex: 1 1 0%;
161+
/* To ensure the flex child only takes up available width, see https://makandracards.com/makandra/66994-css-flex-and-min-width */
162+
min-width: 0px;
163+
160164
/* truncate text with ellipsis */
161165
overflow: hidden;
162166
white-space: nowrap;

‎packages/@react-spectrum/table/src/TableView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -626,6 +626,7 @@ function TableCell({cell}) {
626626
stylesOverrides,
627627
'react-spectrum-Table-cell',
628628
{
629+
'react-spectrum-Table-cell--alignStart': columnProps.align === 'start',
629630
'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center',
630631
'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
631632
}

‎packages/@react-spectrum/table/src/table.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,18 @@
2727
height: 100%;
2828
}
2929

30+
.react-spectrum-Table-cell--alignStart {
31+
text-align: start;
32+
justify-content: start;
33+
}
34+
3035
.react-spectrum-Table-cell--alignCenter {
36+
text-align: center;
3137
justify-content: center;
3238
}
3339

3440
.react-spectrum-Table-cell--alignEnd {
41+
text-align: end;
3542
justify-content: flex-end;
3643
}
3744

‎packages/@react-spectrum/table/stories/Table.stories.tsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,115 @@ storiesOf('TableView', module)
380380
),
381381
{chromatic: {disable: true}}
382382
)
383+
.add(
384+
'should fill cell width',
385+
() => (
386+
<TableView aria-label="TableView with filled cells" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
387+
<TableHeader>
388+
<Column>File Name</Column>
389+
<Column align="center">Type</Column>
390+
<Column align="end">Size</Column>
391+
<Column>Description</Column>
392+
</TableHeader>
393+
<TableBody>
394+
<Row>
395+
<Cell>2018 Proposal</Cell>
396+
<Cell>PDF</Cell>
397+
<Cell>214 KB</Cell>
398+
<Cell>very very very very very very long long long long long description</Cell>
399+
</Row>
400+
<Row>
401+
<Cell>
402+
<View
403+
width="100%"
404+
backgroundColor="gray-200">
405+
100%
406+
</View>
407+
</Cell>
408+
<Cell>
409+
<View
410+
UNSAFE_style={{margin: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
411+
width="100%"
412+
backgroundColor="gray-200">
413+
100%
414+
</View>
415+
</Cell>
416+
<Cell>
417+
<View
418+
UNSAFE_style={{marginInlineStart: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
419+
width="100%"
420+
backgroundColor="gray-200">
421+
100%
422+
</View>
423+
</Cell>
424+
<Cell>
425+
<View
426+
UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
427+
width="100%"
428+
backgroundColor="gray-200">
429+
very very very very very very long long long long long description
430+
</View>
431+
</Cell>
432+
</Row>
433+
<Row>
434+
<Cell>
435+
<View
436+
UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
437+
width="50%"
438+
backgroundColor="gray-200">
439+
50% div
440+
</View>
441+
</Cell>
442+
<Cell>
443+
<View
444+
UNSAFE_style={{margin: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
445+
width="70%"
446+
backgroundColor="gray-200">
447+
70% div
448+
</View>
449+
</Cell>
450+
<Cell>
451+
<View
452+
UNSAFE_style={{float: 'right', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
453+
width="70%"
454+
backgroundColor="gray-200">
455+
70% div
456+
</View>
457+
</Cell>
458+
<Cell>
459+
<View
460+
UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
461+
width="70%"
462+
backgroundColor="gray-200">
463+
very very very very very very long long long long long description
464+
</View>
465+
</Cell>
466+
</Row>
467+
<Row>
468+
<Cell>
469+
<span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
470+
span child
471+
</span>
472+
</Cell>
473+
<Cell>
474+
<span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
475+
span child</span>
476+
</Cell>
477+
<Cell>
478+
<span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
479+
span child
480+
</span>
481+
</Cell>
482+
<Cell>
483+
<span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
484+
very very very very very very long long long long long description
485+
</span>
486+
</Cell>
487+
</Row>
488+
</TableBody>
489+
</TableView>
490+
)
491+
)
383492
.add(
384493
'column widths and dividers',
385494
() => (

0 commit comments

Comments
 (0)