8000 refactor(CTable): update interfaces · pny-htun/coreui-react@40ba59d · GitHub
[go: up one dir, main page]
Skip to content

Commit 40ba59d

Browse files
mrholekmrholek
committed
refactor(CTable): update interfaces
1 parent 475a223 commit 40ba59d

File tree

5 files changed

+134
-5
lines changed

5 files changed

+134
-5
lines changed

‎packages/coreui-react/src/components/table/CTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
1515
/**
1616
* Set the vertical aligment.
1717
*/
18-
align?: 'bottom' | 'middle' | 'top'
18+
align?: 'bottom' | 'middle' | 'top' | string
1919
/**
2020
* Sets the border color of the component to one of CoreUI’s themed colors.
2121
*

‎packages/coreui-react/src/components/table/CTableDataCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface CTableDataCellProps
1414
/**
1515
* Set the vertical aligment.
1616
*/
17-
align?: 'bottom' | 'middle' | 'top'
17+
align?: 'bottom' | 'middle' | 'top' | string
1818
/**
1919
* A string of all className you want applied to the component.
2020
*/

‎packages/coreui-react/src/components/table/CTableRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
1212
/**
1313
* Set the vertical aligment.
1414
*/
15-
align?: 'bottom' | 'middle' | 'top'
15+
align?: 'bottom' | 'middle' | 'top' | string
1616
/**
1717
* A string of all className you want applied to the component.
1818
*/

‎packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,51 @@ test('loads and displays CTable component', async () => {
1717
expect(container).toMatchSnapshot()
1818
})
1919

20+
test('loads and displays CTable component - new way', async () => {
21+
const columns = [
22+
{
23+
key: 'id',
24+
label: '#',
25+
_props: { scope: 'col' },
26+
},
27+
'class',
28+
{
29+
key: 'heading_1',
30+
label: 'Heading',
31+
_props: { scope: 'col' },
32+
},
33+
{
34+
key: 'heading_2',
35+
label: 'Heading',
36+
_props: { scope: 'col' },
37+
},
38+
]
39+
const items = [
40+
{
41+
id: 1,
42+
class: 'Mark',
43+
heading_1: 'Otto',
44+
heading_2: '@mdo',
45+
_cellProps: { id: { scope: 'row' } },
46+
},
47+
{
48+
id: 2,
49+
class: 'Jacob',
50+
heading_1: 'Thornton',
51+
heading_2: '@fat',
52+
_cellProps: { id: { scope: 'row' } },
53+
},
54+
{
55+
id: 3,
56+
class: 'Larry the Bird',
57+
heading_2: '@twitter',
58+
_cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
59+
},
60+
]
61+
const { container } = render(<CTable columns={columns} items={items} />)
62+
expect(container).toMatchSnapshot()
63+
})
64+
2065
test('CTable customize', async () => {
2166
const { container } = render(
2267
<CTable

‎packages/coreui-react/src/components/table/__tests__/__snapshots__/CTable.spec.tsx.snap

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ exports[`CTable customize 1`] = `
66
class="table-responsive-xl"
77
>
88
<table
9-
class="table align-middle caption-top border-primary table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
9+
class="table align-middle border-primary caption-top table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
1010
>
11+
<tbody />
1112
<tbody>
1213
<tr>
1314
<td>
@@ -25,6 +26,7 @@ exports[`CTable full example test 1`] = `
2526
<table
2627
class="table caption-top"
2728
>
29+
<tbody />
2830
<caption>
2931
List of users
3032
</caption>
@@ -108,10 +110,92 @@ exports[`CTable full example test 1`] = `
108110
</div>
109111
`;
110112

113+
exports[`loads and displays CTable component - new way 1`] = `
114+
<div>
115+
<table
116+
class="table"
117+
>
118+
<thead>
119+
<tr>
120+
<th
121+
scope="col"
122+
>
123+
#
124+
</th>
125+
<th>
126+
Class
127+
</th>
128+
<th
129+
scope="col"
130+
>
131+
Heading
132+
</th>
133+
<th
134+
scope="col"
135+
>
136+
Heading
137+
</th>
138+
</tr>
139+
</thead>
140+
<tbody>
141+
<tr>
142+
<th
143+
scope="row"
144+
>
145+
1
146+
</th>
147+
<td>
148+
Mark
149+
</td>
150+
<td>
151+
Otto
152+
</td>
153+
<td>
154+
@mdo
155+
</td>
156+
</tr>
157+
<tr>
158+
<th
159+
scope="row"
160+
>
161+
2
162+
</th>
163+
<td>
164+
Jacob
165+
</td>
166+
<td>
167+
Thornton
168+
</td>
169+
<td>
170+
@fat
171+
</td>
172+
</tr>
173+
<tr>
174+
<th
175+
scope="row"
176+
>
177+
3
178+
</th>
179+
<td
180+
colspan="2"
181+
>
182+
Larry the Bird
183+
</td>
184+
<td>
185+
@twitter
186+
</td>
187+
</tr>
188+
</tbody>
189+
</table>
190+
</div>
191+
`;
192+
111193
exports[`loads and displays CTable component 1`] = `
112194
<div>
113195
<table
114196
class="table"
115-
/>
197+
>
198+
<tbody />
199+
</table>
116200
</div>
117201
`;

0 commit comments

Comments
 (0)
0