@xaypay/tui 0.0.109 → 0.0.110

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/index.es.js +784 -20
  2. package/dist/index.js +784 -19
  3. package/package.json +1 -1
  4. package/src/components/icon/Active.js +20 -0
  5. package/src/components/icon/Cancel.js +19 -0
  6. package/src/components/icon/DeActive.js +20 -0
  7. package/src/components/icon/Done.js +19 -0
  8. package/src/components/icon/DownArrow.js +20 -0
  9. package/src/components/icon/Reject.js +19 -0
  10. package/src/components/icon/Required.js +4 -4
  11. package/src/components/icon/UpArrow.js +20 -0
  12. package/src/components/newFile/index.js +13 -0
  13. package/src/components/newFile/newFile.stories.js +6 -0
  14. package/src/components/table/index.js +399 -60
  15. package/src/components/table/table.module.css +40 -2
  16. package/src/components/table/table.stories.js +107 -16
  17. package/src/components/table/td.js +137 -23
  18. package/src/components/table/th.js +27 -5
  19. package/src/components/typography/index.js +1 -1
  20. package/src/stories/configuration.stories.mdx +25 -0
  21. package/tui.config.js +17 -14
package/src/components/table/table.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Table from '.'
2
+ import { Table } from '.'
3
3
 
4
4
  import { ReactComponent as ReactSVGPlus } from './../../assets/plus.svg'
5
5
  import { ReactComponent as ReactSVGMinus } from './../../assets/minus.svg'
@@ -9,6 +9,12 @@ import { ReactComponent as ReactSVGArrowUp } from './../../assets/up-arrow.svg'
9
9
  import { ReactComponent as ReactSVGArrowDown } from './../../assets/down-arrow.svg'
10
10
  import { ReactComponent as ReactSVG } from './../../assets/table-settings-icon.svg'
11
11
 
12
+ import SvgDone from './../icon/Done'
13
+ import SvgActive from './../icon/Active'
14
+ import SvgReject from './../icon/Reject'
15
+ import SvgCancel from './../icon/Cancel'
16
+ import SvgDeActive from './../icon/DeActive'
17
+
12
18
  export default {
13
19
  component: Table,
14
20
  title: 'Components/Table',
@@ -84,13 +90,10 @@ const bodyData = [
84
90
  content: 19854,
85
91
  checkBox: {
86
92
  checked: false,
87
- disabled: true,
88
93
  checkedColor: 'green',
89
94
  unCheckedColor: 'green',
90
95
  },
91
- status: {
92
- color: '#0DA574',
93
- },
96
+ colorStatus: '#0DA574',
94
97
  },
95
98
  hvhh: {
96
99
  content: 10195524,
@@ -114,6 +117,7 @@ const bodyData = [
114
117
  content: '27.05.2022',
115
118
  },
116
119
  info: {
120
+ status: 'close',
117
121
  openArrow: <ReactSVGArrowUp />,
118
122
  closeArrow: <ReactSVGArrowDown />,
119
123
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -134,6 +138,26 @@ const bodyData = [
134
138
  content: <ReactSVGPlus />,
135
139
  },
136
140
  ],
141
+ more: {
142
+ dots: true,
143
+ dotsStatus: 'deActive',
144
+ activeIcon: <SvgActive />,
145
+ deActiveIcon: <SvgDeActive />,
146
+ options: [
147
+ {
148
+ icon: <SvgReject />,
149
+ content: 'Մերժել',
150
+ },
151
+ {
152
+ icon: <SvgDone />,
153
+ content: 'Հաստատել',
154
+ },
155
+ {
156
+ icon: <SvgCancel />,
157
+ content: 'Դադարեցնել',
158
+ },
159
+ ],
160
+ },
137
161
  },
138
162
  {
139
163
  hh: {
@@ -144,9 +168,7 @@ const bodyData = [
144
168
  checkedColor: 'green',
145
169
  unCheckedColor: 'green',
146
170
  },
147
- status: {
148
- color: '#EE0000',
149
- },
171
+ colorStatus: '#EE0000',
150
172
  },
151
173
  hvhh: {
152
174
  content: 14595524,
@@ -170,6 +192,7 @@ const bodyData = [
170
192
  content: '27.05.2022',
171
193
  },
172
194
  info: {
195
+ status: 'close',
173
196
  openArrow: <ReactSVGArrowUp />,
174
197
  closeArrow: <ReactSVGArrowDown />,
175
198
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -190,6 +213,26 @@ const bodyData = [
190
213
  content: <ReactSVGDelete />,
191
214
  },
192
215
  ],
216
+ more: {
217
+ dots: true,
218
+ dotsStatus: 'deActive',
219
+ activeIcon: <SvgActive />,
220
+ deActiveIcon: <SvgDeActive />,
221
+ options: [
222
+ {
223
+ icon: <SvgReject />,
224
+ content: 'Մերժել',
225
+ },
226
+ {
227
+ icon: <SvgDone />,
228
+ content: 'Հաստատել',
229
+ },
230
+ {
231
+ icon: <SvgCancel />,
232
+ content: 'Դադարեցնել',
233
+ },
234
+ ],
235
+ },
193
236
  },
194
237
  {
195
238
  hh: {
@@ -200,9 +243,7 @@ const bodyData = [
200
243
  checkedColor: 'green',
201
244
  unCheckedColor: 'green',
202
245
  },
203
- status: {
204
- color: '#FECD29',
205
- },
246
+ colorStatus: '#FECD29',
206
247
  },
207
248
  hvhh: {
208
249
  content: 14595524,
@@ -226,6 +267,7 @@ const bodyData = [
226
267
  content: '27.05.2022',
227
268
  },
228
269
  info: {
270
+ status: 'close',
229
271
  openArrow: <ReactSVGArrowUp />,
230
272
  closeArrow: <ReactSVGArrowDown />,
231
273
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -246,6 +288,26 @@ const bodyData = [
246
288
  content: <ReactSVGPlus />,
247
289
  },
248
290
  ],
291
+ more: {
292
+ dots: true,
293
+ dotsStatus: 'deActive',
294
+ activeIcon: <SvgActive />,
295
+ deActiveIcon: <SvgDeActive />,
296
+ options: [
297
+ {
298
+ icon: <SvgReject />,
299
+ content: 'Մերժել',
300
+ },
301
+ {
302
+ icon: <SvgDone />,
303
+ content: 'Հաստատել',
304
+ },
305
+ {
306
+ icon: <SvgCancel />,
307
+ content: 'Դադարեցնել',
308
+ },
309
+ ],
310
+ },
249
311
  },
250
312
  {
251
313
  hh: {
@@ -256,9 +318,7 @@ const bodyData = [
256
318
  checkedColor: 'green',
257
319
  unCheckedColor: 'green',
258
320
  },
259
- status: {
260
- color: '#0DA574',
261
- },
321
+ colorStatus: '#0DA574',
262
322
  },
263
323
  hvhh: {
264
324
  content: 14595524,
@@ -271,6 +331,7 @@ const bodyData = [
271
331
  content: 9845,
272
332
  checkBox: {
273
333
  checked: false,
334
+ disabled: true,
274
335
  checkedColor: 'green',
275
336
  unCheckedColor: 'green',
276
337
  },
@@ -282,6 +343,7 @@ const bodyData = [
282
343
  content: '27.05.2022',
283
344
  },
284
345
  info: {
346
+ status: 'close',
285
347
  openArrow: <ReactSVGArrowUp />,
286
348
  closeArrow: <ReactSVGArrowDown />,
287
349
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -325,15 +387,44 @@ const bodyData = [
325
387
  },
326
388
  ],
327
389
  ],
390
+ more: {
391
+ dots: true,
392
+ dotsStatus: 'deActive',
393
+ activeIcon: <SvgActive />,
394
+ deActiveIcon: <SvgDeActive />,
395
+ options: [
396
+ {
397
+ icon: <SvgReject />,
398
+ content: 'Մերժել',
399
+ },
400
+ {
401
+ icon: <SvgDone />,
402
+ content: 'Հաստատել',
403
+ },
404
+ {
405
+ icon: <SvgCancel />,
406
+ content: 'Դադարեցնել',
407
+ },
408
+ ],
409
+ },
328
410
  },
329
411
  ]
330
412
 
331
413
  const Template = (args) => {
332
414
  const handleGetData = (tData) => {
333
- console.log(tData, ' --- --- --- >>>')
415
+ console.log(tData, ' data from table click action, with getData props')
334
416
  }
335
417
 
336
- return <Table {...args} dataBody={bodyData} dataHeader={headerData} getData={handleGetData} />
418
+ return (
419
+ <Table
420
+ {...args}
421
+ arrowShow
422
+ arrowColumn={2}
423
+ dataBody={bodyData}
424
+ dataHeader={headerData}
425
+ getData={handleGetData}
426
+ />
427
+ )
337
428
  }
338
429
 
339
430
  export const Default = Template.bind({})
package/src/components/table/td.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
 
3
3
  import { SingleCheckbox } from './../singleCheckbox'
4
4
 
@@ -6,34 +6,36 @@ import styles from './table.module.css'
6
6
 
7
7
  const TD = ({
8
8
  item,
9
+ index,
10
+ innerIndex,
9
11
  tBodyColor,
10
12
  borderRight,
11
13
  tBodyPadding,
12
14
  tBodyFontSize,
15
+ openListColor,
13
16
  tBodyTextAlign,
14
17
  tBodyFontFamily,
15
18
  tBodyFontWeight,
19
+ handleCheckDots,
16
20
  handleCheckedBody,
17
21
  handleBodyActionClick,
22
+ handleCheckArrowAction,
23
+ handleOpenCloseRowSingleArrow,
18
24
  }) => {
19
- const [opend, setOpend] = useState(false)
20
-
21
- const handleOpenCloseSubTd = () => {
22
- setOpend(!opend)
23
- }
24
-
25
25
  return (
26
26
  <td
27
27
  style={{
28
+ width: 'auto',
28
29
  color: tBodyColor,
30
+ verticalAlign: 'top',
31
+ whiteSpace: 'nowrap',
29
32
  padding: tBodyPadding,
30
- verticalAlign: 'middle',
31
33
  fontSize: tBodyFontSize,
32
34
  borderRight: borderRight,
33
35
  textAlign: tBodyTextAlign,
34
36
  fontFamily: tBodyFontFamily,
35
37
  fontWeight: tBodyFontWeight,
36
- boxShadow: item.status ? `inset 3px 0px 0px 0px ${item.status.color}` : '',
38
+ boxShadow: item.colorStatus ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
37
39
  }}
38
40
  >
39
41
  {Array.isArray(item) ? (
@@ -46,12 +48,24 @@ const TD = ({
46
48
  width: '32px',
47
49
  height: '32px',
48
50
  marginRight: '10px',
51
+ cursor: Object.prototype.hasOwnProperty.call(newItem, 'type')
52
+ ? 'pointer'
53
+ : 'auto',
49
54
  }}
50
55
  id={newItem.id}
51
56
  type={newItem.type}
52
57
  className={styles['td-span']}
53
- key={`${newItem}_${newIndex}`}
54
- onClick={handleBodyActionClick}
58
+ key={`${newItem.id}_${newIndex}`}
59
+ onClick={
60
+ Object.prototype.hasOwnProperty.call(newItem, 'type')
61
+ ? (e) =>
62
+ handleBodyActionClick(e, {
63
+ item,
64
+ index,
65
+ innerIndex,
66
+ })
67
+ : (_) => _
68
+ }
55
69
  >
56
70
  {newItem.content}
57
71
  </span>
@@ -59,7 +73,7 @@ const TD = ({
59
73
  } else if (newItem && Array.isArray(newItem)) {
60
74
  return (
61
75
  <span
62
- key={newItem.id}
76
+ key={`${newItem.id}_${newIndex}`}
63
77
  style={{
64
78
  display: 'inline-block',
65
79
  marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
@@ -74,11 +88,25 @@ const TD = ({
74
88
  width: '32px',
75
89
  height: '32px',
76
90
  marginRight: '10px',
91
+ cursor: Object.prototype.hasOwnProperty.call(iT, 'type')
92
+ ? 'pointer'
93
+ : 'auto',
77
94
  }}
78
95
  id={iT.id ? iT.id : ''}
79
96
  type={iT.type ? iT.type : ''}
80
97
  className={styles['td-span']}
81
- onClick={handleBodyActionClick}
98
+ onClick={
99
+ Object.prototype.hasOwnProperty.call(iT, 'type')
100
+ ? (e) =>
101
+ handleBodyActionClick(e, {
102
+ index,
103
+ innerIndex,
104
+ items: item,
105
+ item: iT,
106
+ itemIndex: iN,
107
+ })
108
+ : (_) => _
109
+ }
82
110
  key={`${iT.id || iT.content}_${iN}`}
83
111
  >
84
112
  {iT.content}
@@ -88,7 +116,7 @@ const TD = ({
88
116
  </span>
89
117
  )
90
118
  } else {
91
- return <span key={`${newItem}_${newIndex}`}>{newItem}</span>
119
+ return <span key={`${newItem.id}_${newIndex}`}>{newItem}</span>
92
120
  }
93
121
  })
94
122
  ) : (
@@ -102,7 +130,6 @@ const TD = ({
102
130
  justifyContent: item.contentList || item.checkBox ? 'space-between' : 'center',
103
131
  }}
104
132
  >
105
- {console.log(item.status, 'item - - - - <>><><><><<>')}
106
133
  {item.contentList && (
107
134
  <div
108
135
  id={item.id}
@@ -110,10 +137,10 @@ const TD = ({
110
137
  width: '21px',
111
138
  height: '21px',
112
139
  }}
113
- onClick={handleOpenCloseSubTd}
140
+ onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex)}
114
141
  className={styles['td-span']}
115
142
  >
116
- {opend === false ? item.closeArrow : item.openArrow}
143
+ {item.status === 'close' ? item.closeArrow : item.openArrow}
117
144
  </div>
118
145
  )}
119
146
 
@@ -128,31 +155,118 @@ const TD = ({
128
155
  />
129
156
  )}
130
157
 
131
- <div>
158
+ <div
159
+ style={{
160
+ marginLeft: item.contentList ? '10px' : '0px',
161
+ }}
162
+ >
132
163
  <p
133
164
  style={{
134
165
  margin: '0px',
166
+ cursor:
167
+ Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ||
168
+ Object.prototype.hasOwnProperty.call(item, 'dots')
169
+ ? 'pointer'
170
+ : 'auto',
135
171
  }}
172
+ onClick={
173
+ Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
174
+ ? () => handleCheckArrowAction(item, item.checkIndex)
175
+ : Object.prototype.hasOwnProperty.call(item, 'dots')
176
+ ? (e) => handleCheckDots(e, item, index, innerIndex)
177
+ : (_) => _
178
+ }
136
179
  >
137
- {item.content}
180
+ {item.content ? (
181
+ item.content
182
+ ) : Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? (
183
+ item.status === 'close' ? (
184
+ item.closeArrow
185
+ ) : (
186
+ item.openArrow
187
+ )
188
+ ) : Object.prototype.hasOwnProperty.call(item, 'dots') ? (
189
+ <span
190
+ style={{
191
+ display: 'block',
192
+ position: 'relative',
193
+ }}
194
+ >
195
+ {item.dotsStatus === 'deActive' ? item.deActiveIcon : item.activeIcon}
196
+ <span
197
+ style={{
198
+ position: 'absolute',
199
+ display: item.dotsStatus === 'deActive' ? 'none' : 'block',
200
+ top: '0px',
201
+ right: 'calc(100% + 6px)',
202
+ width: '223px',
203
+ height: 'auto',
204
+ overflow: 'auto',
205
+ minHeight: '40px',
206
+ maxHeight: '246px',
207
+ borderRadius: '6px',
208
+ backgroundColor: '#FFFFFF',
209
+ boxShadow: '0px 0px 20px 0px #3C393E4D',
210
+ }}
211
+ >
212
+ {item.options &&
213
+ item.options.map((item, index) => {
214
+ return (
215
+ <span
216
+ key={`${item.content}_${index}`}
217
+ className={styles['dots-option-item']}
218
+ style={{
219
+ color: '#3C393E',
220
+ fontSize: '14px',
221
+ fontFamily: 'Noto Sans Armenian',
222
+ }}
223
+ // TODO: onClick
224
+ >
225
+ <span
226
+ style={{
227
+ marginRight: '10px',
228
+ }}
229
+ >
230
+ {item.icon}
231
+ </span>
232
+ <span
233
+ style={{
234
+ width: 'calc(100% - 36px)',
235
+ textAlign: 'left',
236
+ overflow: 'hidden',
237
+ whiteSpace: 'nowrap',
238
+ textOverflow: 'ellipsis',
239
+ }}
240
+ title={item.content}
241
+ >
242
+ {item.content}
243
+ </span>
244
+ </span>
245
+ )
246
+ })}
247
+ </span>
248
+ </span>
249
+ ) : (
250
+ ''
251
+ )}
138
252
  </p>
139
253
  {item.contentList && (
140
254
  <div
141
255
  style={{
142
256
  overflow: 'hidden',
143
257
  marginTop: '10px',
144
- height: opend === false ? '0px' : 'auto',
258
+ height: item.status === 'close' ? '0px' : 'auto',
145
259
  }}
146
260
  >
147
261
  {item.contentList.map((innerItem, innerIndex) => {
148
262
  return (
149
263
  <p
150
264
  key={`${innerItem}_${innerIndex}`}
265
+ className={styles['list-text']}
151
266
  style={{
152
- margin: '0px',
153
- textAlign: 'left',
154
- paddingLeft: '10px',
267
+ color: openListColor,
155
268
  }}
269
+ // TODO: add onClick
156
270
  >
157
271
  {innerItem}
158
272
  </p>
package/src/components/table/th.js CHANGED
@@ -9,31 +9,36 @@ const TH = ({
9
9
  item,
10
10
  tHeadFamily,
11
11
  tHeadPadding,
12
+ tHeadFontSize,
12
13
  tHeadFontWeight,
13
14
  handleCheckedHeader,
14
15
  borderTopLeftRadius,
15
16
  borderTopRightRadius,
16
17
  handleHeaderItemClick,
18
+ handleCheckArrowActionHeader,
17
19
  }) => {
18
20
  return (
19
21
  <th
20
22
  style={{
23
+ width: 'auto',
24
+ cursor: 'pointer',
25
+ whiteSpace: 'nowrap',
21
26
  position: 'relative',
22
27
  padding: tHeadPadding,
28
+ fontSize: tHeadFontSize,
23
29
  fontFamily: tHeadFamily,
24
30
  fontWeight: tHeadFontWeight,
25
31
  borderTopLeftRadius: borderTopLeftRadius,
26
32
  borderTopRightRadius: borderTopRightRadius,
27
- cursor: handleHeaderItemClick ? 'pointer' : 'normal',
28
33
  }}
29
- onClick={handleHeaderItemClick ? handleHeaderItemClick : (_) => _}
34
+ onClick={handleHeaderItemClick}
30
35
  className={`${item.sortingArrows && styles['sorting-arrows']}`}
31
36
  >
32
37
  <div
33
38
  style={{
34
39
  display: 'flex',
35
40
  alignItems: 'flex-start',
36
- justifyContent: item.hasOwnProperty('checkBox') ? 'space-between' : 'center',
41
+ justifyContent: Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center',
37
42
  }}
38
43
  >
39
44
  {item.hasOwnProperty('checkBox') ? (
@@ -42,14 +47,31 @@ const TH = ({
42
47
  float="left"
43
48
  checked={item.checkBox.checked}
44
49
  disabled={item.checkBox.disabled}
45
- handleChecked={handleCheckedHeader ? handleCheckedHeader : (_) => _}
50
+ handleChecked={!item.checkBox.disabled ? handleCheckedHeader : (_) => _}
46
51
  checkedColor={item.checkBox.checkedColor ? item.checkBox.checkedColor : ''}
47
52
  unCheckedColor={item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''}
48
53
  />
49
54
  ) : (
50
55
  ''
51
56
  )}
52
- {item.type === 'show' ? item.content : ''}
57
+ <p
58
+ style={{
59
+ margin: '0px',
60
+ }}
61
+ onClick={
62
+ Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
63
+ ? (e) => handleCheckArrowActionHeader(e, item)
64
+ : (_) => _
65
+ }
66
+ >
67
+ {item.type === 'show'
68
+ ? item.content
69
+ : Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
70
+ ? item.status === 'close'
71
+ ? item.closeArrow
72
+ : item.openArrow
73
+ : ''}
74
+ </p>
53
75
  </div>
54
76
  </th>
55
77
  )
package/src/components/typography/index.js CHANGED
@@ -116,7 +116,7 @@ Typography.propTypes = {
116
116
  textDecoration: PropTypes.string,
117
117
  backgroundColor: PropTypes.string,
118
118
  variant: PropTypes.oneOf(Object.values(TypographyType)),
119
- size: PropTypes.oneOf(PropTypes.string, PropTypes.number),
119
+ size: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
120
120
  }
121
121
 
122
122
  Typography.defaultProps = {
package/src/stories/configuration.stories.mdx CHANGED
@@ -619,3 +619,28 @@ import StackAlt from './assets/stackalt.svg';
619
619
  unCheckedColor: '#D1D1D1', // for checkbox border color
620
620
  }
621
621
  ```
622
+
623
+ ### TABLE
624
+ ```
625
+ {
626
+ tHeadFontSize: '16px', // for table header font size
627
+ tHeadFontWeight: 600, // for table header font weight
628
+ tHeadColor: '#FBFBFB', // for table header color
629
+ tHeadPadding: '11px 20px', // for table header padding
630
+ tHeadBorderRadius: '14px', // for table header border radius
631
+ tHeadBackgroundColor: '#00236A', // for table header background color
632
+ tHeadFamily: 'Noto Sans Armenia', // for table header font family
633
+
634
+ tBodyColor: '#3C393E', // for table body color
635
+ tBodyFontSize: '16px', // for table body font size
636
+ tBodyFontWeight: 500, // for table body font weight
637
+ tBodyTextAlign: 'center', // for table body text align
638
+ tBodyPadding: '11px 20px', // for table body padding
639
+ tBodyFontFamily: 'Noto Sans Armenia', // for table body font family
640
+
641
+ tBodyRowBorder: '1px solid #eeeeee', // for table body row border
642
+ tBodyMarginTop: '20px', // for table body margin top
643
+
644
+ openListColor: '#A3A5A9' // for table body opened list color
645
+ }
646
+ ```
package/tui.config.js CHANGED
@@ -413,21 +413,24 @@ module.exports = {
413
413
  },
414
414
  // default properties for <Table /> component
415
415
  TABLE: {
416
- tHeadFontWeight: 600,
417
- tHeadColor: '#FBFBFB',
418
- tHeadPadding: '11px 20px',
419
- tHeadBorderRadius: '14px',
420
- tHeadBackgroundColor: '#00236A',
421
- tHeadFamily: 'Noto Sans Armenia',
416
+ tHeadFontSize: '16px', // for table header font size
417
+ tHeadFontWeight: 600, // for table header font weight
418
+ tHeadColor: '#FBFBFB', // for table header color
419
+ tHeadPadding: '11px 20px', // for table header padding
420
+ tHeadBorderRadius: '14px', // for table header border radius
421
+ tHeadBackgroundColor: '#00236A', // for table header background color
422
+ tHeadFamily: 'Noto Sans Armenia', // for table header font family
422
423
 
423
- tBodyColor: '#3C393E',
424
- tBodyFontSize: '16px',
425
- tBodyFontWeight: 500,
426
- tBodyTextAlign: 'center',
427
- tBodyPadding: '11px 20px',
428
- tBodyFontFamily: 'Noto Sans Armenia',
424
+ tBodyColor: '#3C393E', // for table body color
425
+ tBodyFontSize: '16px', // for table body font size
426
+ tBodyFontWeight: 500, // for table body font weight
427
+ tBodyTextAlign: 'center', // for table body text align
428
+ tBodyPadding: '11px 20px', // for table body padding
429
+ tBodyFontFamily: 'Noto Sans Armenia', // for table body font family
429
430
 
430
- tBodyRowBorder: '1px solid #eeeeee',
431
- tBodyMarginTop: '20px',
431
+ tBodyRowBorder: '1px solid #eeeeee', // for table body row border
432
+ tBodyMarginTop: '20px', // for table body margin top
433
+
434
+ openListColor: '#A3A5A9' // for table body opened list color
432
435
  },
433
436
  }