Skip to content

Commit a6f6e60

Browse files
author
Kubit
committed
Add new props to hide header to Table component
1 parent cbb02ce commit a6f6e60

File tree

9 files changed

+816
-12
lines changed

9 files changed

+816
-12
lines changed

‎src/components/table/component/table.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,14 @@ export const TableComponent = (
105105
flexWidth={headerValue?.config?.flexWidth}
106106
hasDivider={headerValue?.config?.hasDivider}
107107
scope="col"
108+
showDivider={
109+
headerValue?.config?.srOnlyHeader?.[props.device] ||
110+
headerValue?.config?.showDividerHeader
111+
}
112+
srOnly={
113+
headerValue?.config?.srOnlyHeader?.[props.device] ||
114+
headerValue?.config?.srOnlyHeader
115+
}
108116
styles={props.styles.header?.[headerVariant]}
109117
>
110118
<Text

‎src/components/table/stories/mockBasic.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React from 'react';
2+
3+
import { ICONS } from '@/assets';
4+
import { Button } from '@/components/button/button';
5+
import { Icon } from '@/components/icon';
6+
import { DeviceBreakpointsType } from '@/types';
7+
8+
export const mockBasicTable = {
9+
headers: [
10+
{
11+
id: 'date',
12+
label: 'Date',
13+
config: { alignHeader: 'center', alignValue: 'center' },
14+
},
15+
{
16+
id: 'name',
17+
label: 'Recipient name',
18+
config: {
19+
alignHeader: 'left',
20+
alignValue: 'left',
21+
hidden: {
22+
[DeviceBreakpointsType.LARGE_DESKTOP]: false,
23+
[DeviceBreakpointsType.DESKTOP]: false,
24+
[DeviceBreakpointsType.TABLET]: false,
25+
[DeviceBreakpointsType.MOBILE]: false,
26+
},
27+
},
28+
value: (value): string | JSX.Element =>
29+
value.surname ? (
30+
<div>
31+
<div>{value.name}</div>
32+
<div>{value.surname}</div>
33+
</div>
34+
) : (
35+
value.name
36+
),
37+
},
38+
{
39+
id: 'routingNumber',
40+
label: 'Routing number',
41+
config: { alignHeader: 'center', alignValue: 'center' },
42+
},
43+
{
44+
id: 'accountNumber',
45+
label: 'Account number',
46+
config: { alignHeader: 'center', alignValue: 'center' },
47+
},
48+
{
49+
id: 'transferMoney',
50+
label: 'Transfer money',
51+
config: { alignHeader: 'center', alignValue: 'center' },
52+
value: (): JSX.Element => (
53+
<Button size="MEDIUM" variant="PRIMARY">
54+
Transfer money
55+
</Button>
56+
),
57+
},
58+
{
59+
id: 'edit',
60+
label: 'Edit',
61+
config: { alignHeader: 'center', alignValue: 'center' },
62+
value: (): JSX.Element => (
63+
<Icon
64+
altText="edit"
65+
height="25px"
66+
icon={ICONS.ICON_PLACEHOLDER}
67+
width="25px"
68+
onClick={() => null}
69+
/>
70+
),
71+
},
72+
{
73+
id: 'delete',
74+
label: 'Delete',
75+
config: { alignHeader: 'center', alignValue: 'center' },
76+
value: (): JSX.Element => (
77+
<Icon
78+
altText="delete"
79+
height="25px"
80+
icon={ICONS.ICON_PLACEHOLDER}
81+
width="25px"
82+
onClick={() => null}
83+
/>
84+
),
85+
},
86+
],
87+
values: [
88+
{
89+
date: '18 DIC',
90+
name: 'Pam',
91+
surname: 'Beasley',
92+
routingNumber: '123456789',
93+
accountNumber: '****999999',
94+
transactionNumber: '0000',
95+
},
96+
{
97+
date: '18 DIC',
98+
name: 'Dwight',
99+
surname: 'Schrute',
100+
routingNumber: '123456789',
101+
accountNumber: '****999999',
102+
transactionNumber: '0000',
103+
},
104+
{
105+
date: '19 DIC',
106+
name: 'Jim',
107+
surname: 'Halpert',
108+
routingNumber: '987654321',
109+
accountNumber: '****333333',
110+
},
111+
],
112+
};

‎src/components/table/stories/mockCustomizable.tsx

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import React from 'react';
2+
3+
import { ICONS } from '@/assets';
4+
import { Button } from '@/components/button/button';
5+
import { Icon } from '@/components/icon';
6+
import { DeviceBreakpointsType } from '@/types';
7+
8+
import { FormatListHeaderPriorityType } from '../types';
9+
10+
export const mockCustomizableTable = {
11+
headerVariant: 'CUSTOMIZABLE_HEADER',
12+
hiddenHeaderOn: {
13+
[DeviceBreakpointsType.LARGE_DESKTOP]: false,
14+
[DeviceBreakpointsType.DESKTOP]: false,
15+
[DeviceBreakpointsType.TABLET]: true,
16+
[DeviceBreakpointsType.MOBILE]: true,
17+
},
18+
formatList: {
19+
[DeviceBreakpointsType.TABLET]: true,
20+
[DeviceBreakpointsType.MOBILE]: true,
21+
},
22+
formatListHeaderPriority: FormatListHeaderPriorityType.ROW_HEADER,
23+
headers: [
24+
{
25+
id: 'date',
26+
label: 'Date',
27+
config: { alignHeader: 'center', alignValue: 'center' },
28+
},
29+
{
30+
id: 'name',
31+
label: 'Recipient name',
32+
config: {
33+
alignHeader: 'left',
34+
alignValue: 'left',
35+
// width: '100px',
36+
},
37+
value: (value): string | JSX.Element =>
38+
value.surname ? (
39+
<div>
40+
<div>{value.name.value ?? value.name}</div>
41+
<div>{value.surname}</div>
42+
</div>
43+
) : (
44+
value.name.value ?? value.name
45+
),
46+
},
47+
{
48+
id: 'routingNumber',
49+
label: 'Routing number',
50+
config: { alignHeader: 'center', alignValue: 'center' },
51+
variant: 'PRIMARY',
52+
},
53+
{
54+
id: 'accountNumber',
55+
label: 'Account number',
56+
config: { alignHeader: 'center', alignValue: 'center', backgroundColor: 'red' },
57+
},
58+
{
59+
id: 'transferMoney',
60+
label: 'Transfer money',
61+
config: { alignHeader: 'center', alignValue: 'center' },
62+
value: (): JSX.Element => (
63+
<Button size="MEDIUM" variant="PRIMARY">
64+
Transfer money
65+
</Button>
66+
),
67+
},
68+
{
69+
id: 'edit',
70+
label: 'Edit',
71+
config: { alignHeader: 'center', alignValue: 'center' },
72+
value: (): JSX.Element => (
73+
<Icon
74+
altText="edit"
75+
height="25px"
76+
icon={ICONS.ICON_PLACEHOLDER}
77+
width="25px"
78+
onClick={() => null}
79+
/>
80+
),
81+
},
82+
{
83+
id: 'delete',
84+
label: 'Delete',
85+
config: { alignHeader: 'center', alignValue: 'center' },
86+
value: (): JSX.Element => (
87+
<Icon
88+
altText="delete"
89+
height="25px"
90+
icon={ICONS.ICON_PLACEHOLDER}
91+
width="25px"
92+
onClick={() => null}
93+
/>
94+
),
95+
},
96+
],
97+
values: [
98+
{
99+
date: '18 DIC',
100+
name: { value: 'Kevin' },
101+
surname: 'Malone',
102+
routingNumber: '123456789',
103+
accountNumber: '****999999',
104+
transactionNumber: '0000',
105+
rowVariant: 'CUSTOMIZABLE_ROW',
106+
rowHeader: {
107+
label: 'Row header 1',
108+
variant: 'CUSTOMIZABLE_HEADER',
109+
// config: {
110+
// alignHeader: 'center',
111+
// alignValue: 'center',
112+
// width: '100px',
113+
// backgroundColor: 'green',
114+
// },
115+
},
116+
},
117+
{
118+
date: '18 DIC',
119+
name: { value: 'Dwight', backgroundColor: 'green', align: 'right' },
120+
surname: 'Malone',
121+
routingNumber: '123456789',
122+
accountNumber: '****999999',
123+
transactionNumber: '0000',
124+
rowVariant: 'CUSTOMIZABLE_ROW',
125+
backgroundColor: 'aqua',
126+
rowHeader: {
127+
label: 'Row header 1',
128+
variant: 'CUSTOMIZABLE_HEADER',
129+
},
130+
},
131+
{
132+
date: '19 DIC',
133+
name: 'Marta',
134+
routingNumber: '987654321',
135+
accountNumber: '****333333',
136+
rowVariant: 'CUSTOMIZABLE_ROW',
137+
rowHeader: {
138+
label: 'Row header 1',
139+
variant: 'CUSTOMIZABLE_HEADER',
140+
},
141+
},
142+
{
143+
date: '19 DIC',
144+
name: 'John',
145+
routingNumber: '9876234234',
146+
accountNumber: '****5234234',
147+
rowVariant: 'CUSTOMIZABLE_ROW',
148+
rowHeader: {
149+
label: 'Row header 1',
150+
variant: 'CUSTOMIZABLE_HEADER',
151+
},
152+
},
153+
{
154+
date: '19 DIC',
155+
name: 'Jes',
156+
routingNumber: '9876132224',
157+
accountNumber: '****5986756',
158+
rowVariant: 'CUSTOMIZABLE_ROW',
159+
delete: { backgroundColor: 'pink' },
160+
rowHeader: {
161+
label: 'Row header 1',
162+
variant: 'CUSTOMIZABLE_HEADER',
163+
},
164+
},
165+
],
166+
};

0 commit comments

Comments
 (0)