Skip to content

Commit da88293

Browse files
author
Julien Castelain
committed
feat(@clayui/table): Adds the noWrap prop to ClayTable.Cell
Passing the `noWrap` (boolean) props to `<ClayTable.Cell />` will make it use the `table-cell-ws-nowrap` CSS class, which keep table cells on one line.
1 parent e492700 commit da88293

File tree

4 files changed

+197
-0
lines changed

4 files changed

+197
-0
lines changed

‎packages/clay-table/src/Cell.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@ export interface ICellProps extends TableCellBaseProps {
5050
*/
5151
headingTitle?: boolean;
5252

53+
/*
54+
* Keep cells on one line.
55+
*/
56+
noWrap?: boolean;
57+
5358
/**
5459
* Truncates the text inside a Cell. Requires `expanded`
5560
* property value set to true.
@@ -72,6 +77,7 @@ const ClayTableCell = React.forwardRef<
7277
headingCell = false,
7378
headingTitle = false,
7479
truncate = false,
80+
noWrap = false,
7581
...otherProps
7682
}: ICellProps,
7783
ref
@@ -86,6 +92,7 @@ const ClayTableCell = React.forwardRef<
8692
[`table-cell-${cellDelimiter}`]: cellDelimiter,
8793
[`table-column-text-${columnTextAlignment}`]: columnTextAlignment,
8894
[`text-${align}`]: align,
95+
'table-cell-ws-nowrap': noWrap,
8996
})}
9097
ref={ref}
9198
>

‎packages/clay-table/src/__tests__/__snapshots__/index.tsx.snap

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,3 +390,54 @@ exports[`ClayTable renders with a headingTitle 1`] = `
390390
</div>
391391
</div>
392392
`;
393+
394+
exports[`ClayTable renders with non wrapped cells 1`] = `
395+
<div>
396+
<div
397+
class="table-responsive"
398+
>
399+
<table
400+
class="table table-autofit show-quick-actions-on-hover table-hover table-list"
401+
>
402+
<tbody>
403+
<tr
404+
class="table-divider"
405+
>
406+
<td
407+
class=""
408+
colspan="8"
409+
>
410+
Recipes
411+
</td>
412+
</tr>
413+
<tr
414+
class=""
415+
>
416+
<td
417+
class="table-cell-expand"
418+
>
419+
<p
420+
class="table-list-title"
421+
>
422+
Hamburger
423+
</p>
424+
</td>
425+
<td
426+
class=""
427+
/>
428+
<td
429+
class="table-cell-ws-nowrap"
430+
>
431+
Originally from the U.S.A. but available anywhere around the world
432+
</td>
433+
<td
434+
class="text-right"
435+
>
436+
10 min.
437+
</td>
438+
</tr>
439+
</tbody>
440+
</table>
441+
</div>
442+
</div>
443+
`;

‎packages/clay-table/src/__tests__/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,4 +242,32 @@ describe('ClayTable', () => {
242242
);
243243
expect(container).toMatchSnapshot();
244244
});
245+
246+
it('renders with non wrapped cells', () => {
247+
const {container} = render(
248+
<ClayTable>
249+
<ClayTable.Body>
250+
<ClayTable.Row divider>
251+
<ClayTable.Cell colSpan={8}>{'Recipes'}</ClayTable.Cell>
252+
</ClayTable.Row>
253+
254+
<ClayTable.Row>
255+
<ClayTable.Cell expanded headingTitle>
256+
{'Hamburger'}
257+
</ClayTable.Cell>
258+
<ClayTable.Cell />
259+
<ClayTable.Cell noWrap>
260+
{
261+
'Originally from the U.S.A. but available anywhere around the world'
262+
}
263+
</ClayTable.Cell>
264+
<ClayTable.Cell align="right">
265+
{'10 min.'}
266+
</ClayTable.Cell>
267+
</ClayTable.Row>
268+
</ClayTable.Body>
269+
</ClayTable>
270+
);
271+
expect(container).toMatchSnapshot();
272+
});
245273
});

‎packages/clay-table/stories/index.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -534,4 +534,115 @@ storiesOf('Components|ClayTable', module)
534534
</ClayTable.Body>
535535
</ClayTable>
536536
</form>
537+
))
538+
.add('with non wrapped cells', () => (
539+
<form>
540+
<ClayTable
541+
bodyVerticalAlignment={select(
542+
'body vertical alignment',
543+
{bottom: 'bottom', middle: 'middle', top: 'top'},
544+
'middle'
545+
)}
546+
borderedColumns={boolean('bordered columns', false)}
547+
borderless={boolean('bordeless', false)}
548+
headVerticalAlignment={select(
549+
'head vertical alignment',
550+
{bottom: 'bottom', middle: 'middle', top: 'top'},
551+
'middle'
552+
)}
553+
headingNoWrap={boolean('heading no wrap', false)}
554+
hover={boolean('hover', true)}
555+
noWrap={boolean('no wrap', false)}
556+
responsive={boolean('responsive', false)}
557+
responsiveSize={select(
558+
'responsive size',
559+
{lg: 'lg', md: 'md', sm: 'sm', xl: 'xl'},
560+
'sm'
561+
)}
562+
striped={boolean('striped', true)}
563+
tableVerticalAlignment={select(
564+
'table vertical alignment',
565+
{bottom: 'bottom', middle: 'middle', top: 'top'},
566+
'middle'
567+
)}
568+
>
569+
<ClayTable.Head>
570+
<ClayTable.Row>
571+
<ClayTable.Cell headingCell />
572+
<ClayTable.Cell expanded headingCell headingTitle>
573+
<span className="text-truncate">
574+
{'Description'}
575+
</span>
576+
</ClayTable.Cell>
577+
<ClayTable.Cell headingCell>
578+
<span className="text-truncate">{'Format'}</span>
579+
</ClayTable.Cell>
580+
<ClayTable.Cell headingCell>
581+
<span className="text-truncate">{'Label'}</span>
582+
</ClayTable.Cell>
583+
<ClayTable.Cell headingCell />
584+
</ClayTable.Row>
585+
</ClayTable.Head>
586+
587+
<ClayTable.Body>
588+
<ClayTable.Row>
589+
<ClayTable.Cell>
590+
<ClayCheckboxWithState aria-label="Select first row" />
591+
</ClayTable.Cell>
592+
<ClayTable.Cell headingTitle noWrap>
593+
{
594+
'Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.'
595+
}
596+
</ClayTable.Cell>
597+
<ClayTable.Cell>
598+
<a href="1">{'JPG'}</a>
599+
</ClayTable.Cell>
600+
<ClayTable.Cell>
601+
<a href="1">{'JPG'}</a>
602+
</ClayTable.Cell>
603+
<ClayTable.Cell>
604+
<Dropdown />
605+
</ClayTable.Cell>
606+
</ClayTable.Row>
607+
<ClayTable.Row>
608+
<ClayTable.Cell>
609+
<ClayCheckboxWithState aria-label="Select second row" />
610+
</ClayTable.Cell>
611+
<ClayTable.Cell headingTitle noWrap>
612+
{
613+
'Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.'
614+
}
615+
</ClayTable.Cell>
616+
<ClayTable.Cell>
617+
<a href="2">{'GIF'}</a>
618+
</ClayTable.Cell>
619+
<ClayTable.Cell>
620+
<a href="2">{'GIF'}</a>
621+
</ClayTable.Cell>
622+
<ClayTable.Cell>
623+
<Dropdown />
624+
</ClayTable.Cell>
625+
</ClayTable.Row>
626+
<ClayTable.Row>
627+
<ClayTable.Cell>
628+
<ClayCheckboxWithState aria-label="Select third row" />
629+
</ClayTable.Cell>
630+
<ClayTable.Cell headingTitle noWrap>
631+
{
632+
'Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.'
633+
}
634+
</ClayTable.Cell>
635+
<ClayTable.Cell>
636+
<a href="3">{'TIFF'}</a>
637+
</ClayTable.Cell>
638+
<ClayTable.Cell>
639+
<a href="3">{'TIFF'}</a>
640+
</ClayTable.Cell>
641+
<ClayTable.Cell>
642+
<Dropdown />
643+
</ClayTable.Cell>
644+
</ClayTable.Row>
645+
</ClayTable.Body>
646+
</ClayTable>
647+
</form>
537648
));

0 commit comments

Comments
 (0)