@clayui/table 3.40.0 → 3.105.1-alpha.0

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 (28) hide show
  1. package/README.md +19 -0
  2. package/lib/Body.d.ts +4 -0
  3. package/lib/Body.js +1 -1
  4. package/lib/Body.js.map +1 -0
  5. package/lib/Cell.d.ts +30 -0
  6. package/lib/Cell.js +1 -1
  7. package/lib/Cell.js.map +1 -0
  8. package/lib/Head.d.ts +4 -0
  9. package/lib/Head.js +1 -1
  10. package/lib/Head.js.map +1 -0
  11. package/lib/Row.d.ts +14 -0
  12. package/lib/Row.js +1 -1
  13. package/lib/Row.js.map +1 -0
  14. package/lib/index.d.ts +41 -1
  15. package/lib/index.js +1 -1
  16. package/lib/index.js.map +1 -0
  17. package/lib/types.d.ts +4 -0
  18. package/lib/types.js.map +1 -0
  19. package/package.json +5 -6
  20. package/README.mdx +0 -14
  21. package/src/Body.tsx +0 -21
  22. package/src/Cell.tsx +0 -120
  23. package/src/Head.tsx +0 -21
  24. package/src/Row.tsx +0 -59
  25. package/src/__tests__/__snapshots__/index.tsx.snap +0 -443
  26. package/src/__tests__/index.tsx +0 -268
  27. package/src/index.tsx +0 -142
  28. package/src/types.ts +0 -6
package/src/__tests__/__snapshots__/index.tsx.snap DELETED
@@ -1,443 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`ClayTable renders 1`] = `
4
- <div>
5
- <div
6
- class="table-responsive"
7
- >
8
- <table
9
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
10
- />
11
- </div>
12
- </div>
13
- `;
14
-
15
- exports[`ClayTable renders a Cell delimited 1`] = `
16
- <div>
17
- <div
18
- class="table-responsive"
19
- >
20
- <table
21
- class="table table-autofit show-quick-actions-on-hover table-hover table-list table-striped"
22
- >
23
- <thead>
24
- <tr
25
- class=""
26
- >
27
- <th
28
- class="table-cell-start"
29
- >
30
- Start
31
- </th>
32
- <th
33
- class=""
34
- >
35
- <button
36
- type="button"
37
- >
38
- Dummy
39
- </button>
40
- </th>
41
- <th
42
- class=""
43
- >
44
- <button
45
- type="button"
46
- >
47
- Dummy
48
- </button>
49
- </th>
50
- <th
51
- class="table-cell-end"
52
- >
53
- End
54
- </th>
55
- </tr>
56
- </thead>
57
- </table>
58
- </div>
59
- </div>
60
- `;
61
-
62
- exports[`ClayTable renders a Cell with text alignment set to center 1`] = `
63
- <div>
64
- <div
65
- class="table-responsive"
66
- >
67
- <table
68
- class="table table-autofit show-quick-actions-on-hover table-hover table-list table-striped"
69
- >
70
- <thead>
71
- <tr
72
- class=""
73
- >
74
- <th
75
- class="text-center"
76
- >
77
- <a
78
- href="#1"
79
- >
80
- Link
81
- </a>
82
- </th>
83
- </tr>
84
- </thead>
85
- <tbody />
86
- </table>
87
- </div>
88
- </div>
89
- `;
90
-
91
- exports[`ClayTable renders a full bottom vertical aligned table 1`] = `
92
- <div>
93
- <div
94
- class="table-responsive"
95
- >
96
- <table
97
- class="table table-autofit show-quick-actions-on-hover table-hover table-list thead-valign-bottom table-valign-bottom"
98
- >
99
- <thead />
100
- <tbody />
101
- </table>
102
- </div>
103
- </div>
104
- `;
105
-
106
- exports[`ClayTable renders a no wrapped table 1`] = `
107
- <div>
108
- <div
109
- class="table-responsive"
110
- >
111
- <table
112
- class="table table-autofit show-quick-actions-on-hover table-heading-nowrap table-hover table-list table-nowrap"
113
- >
114
- <thead />
115
- <tbody />
116
- </table>
117
- </div>
118
- </div>
119
- `;
120
-
121
- exports[`ClayTable renders a responsive table 1`] = `
122
- <div>
123
- <div
124
- class="table-responsive table-responsive-sm"
125
- >
126
- <table
127
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
128
- >
129
- <thead />
130
- <tbody />
131
- </table>
132
- </div>
133
- </div>
134
- `;
135
-
136
- exports[`ClayTable renders a responsive table 2`] = `
137
- <div>
138
- <div
139
- class="table-responsive table-responsive-sm"
140
- >
141
- <table
142
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
143
- >
144
- <thead />
145
- <tbody />
146
- </table>
147
- </div>
148
- </div>
149
- `;
150
-
151
- exports[`ClayTable renders a table hover 1`] = `
152
- <div>
153
- <div
154
- class="table-responsive"
155
- >
156
- <table
157
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
158
- >
159
- <thead />
160
- <tbody />
161
- </table>
162
- </div>
163
- </div>
164
- `;
165
-
166
- exports[`ClayTable renders a table striped 1`] = `
167
- <div>
168
- <div
169
- class="table-responsive"
170
- >
171
- <table
172
- class="table table-autofit show-quick-actions-on-hover table-hover table-list table-striped"
173
- >
174
- <thead />
175
- <tbody />
176
- </table>
177
- </div>
178
- </div>
179
- `;
180
-
181
- exports[`ClayTable renders a table with a Body 1`] = `
182
- <div>
183
- <div
184
- class="table-responsive"
185
- >
186
- <table
187
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
188
- >
189
- <tbody />
190
- </table>
191
- </div>
192
- </div>
193
- `;
194
-
195
- exports[`ClayTable renders a table with a Head 1`] = `
196
- <div>
197
- <div
198
- class="table-responsive"
199
- >
200
- <table
201
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
202
- >
203
- <thead />
204
- </table>
205
- </div>
206
- </div>
207
- `;
208
-
209
- exports[`ClayTable renders a table with a Head and Body 1`] = `
210
- <div>
211
- <div
212
- class="table-responsive"
213
- >
214
- <table
215
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
216
- >
217
- <thead />
218
- <tbody />
219
- </table>
220
- </div>
221
- </div>
222
- `;
223
-
224
- exports[`ClayTable renders a table with an active row 1`] = `
225
- <div>
226
- <div
227
- class="table-responsive"
228
- >
229
- <table
230
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
231
- >
232
- <tbody>
233
- <tr
234
- class="table-active"
235
- />
236
- </tbody>
237
- </table>
238
- </div>
239
- </div>
240
- `;
241
-
242
- exports[`ClayTable renders a table with columns bordered 1`] = `
243
- <div>
244
- <div
245
- class="table-responsive"
246
- >
247
- <table
248
- class="table table-autofit show-quick-actions-on-hover table-bordered table-hover table-list"
249
- >
250
- <thead />
251
- <tbody />
252
- </table>
253
- </div>
254
- </div>
255
- `;
256
-
257
- exports[`ClayTable renders a table with multiple Cells into Row 1`] = `
258
- <div>
259
- <div
260
- class="table-responsive"
261
- >
262
- <table
263
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
264
- >
265
- <tbody>
266
- <tr
267
- class=""
268
- >
269
- <td
270
- class=""
271
- >
272
- One
273
- </td>
274
- <td
275
- class=""
276
- >
277
- <button
278
- type="button"
279
- >
280
- Two
281
- </button>
282
- </td>
283
- <td
284
- class=""
285
- >
286
- Three
287
- </td>
288
- </tr>
289
- </tbody>
290
- </table>
291
- </div>
292
- </div>
293
- `;
294
-
295
- exports[`ClayTable renders a table with multiple rows into Body 1`] = `
296
- <div>
297
- <div
298
- class="table-responsive"
299
- >
300
- <table
301
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
302
- >
303
- <tbody>
304
- <tr
305
- class=""
306
- />
307
- <tr
308
- class=""
309
- />
310
- <tr
311
- class=""
312
- />
313
- </tbody>
314
- </table>
315
- </div>
316
- </div>
317
- `;
318
-
319
- exports[`ClayTable renders a table with multiple rows into Head 1`] = `
320
- <div>
321
- <div
322
- class="table-responsive"
323
- >
324
- <table
325
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
326
- >
327
- <thead>
328
- <tr
329
- class=""
330
- />
331
- <tr
332
- class=""
333
- />
334
- <tr
335
- class=""
336
- />
337
- </thead>
338
- </table>
339
- </div>
340
- </div>
341
- `;
342
-
343
- exports[`ClayTable renders with a headingTitle 1`] = `
344
- <div>
345
- <div
346
- class="table-responsive"
347
- >
348
- <table
349
- class="table table-autofit show-quick-actions-on-hover table-hover table-list"
350
- >
351
- <tbody>
352
- <tr
353
- class="table-divider"
354
- >
355
- <td
356
- class=""
357
- colspan="8"
358
- >
359
- Recipes
360
- </td>
361
- </tr>
362
- <tr
363
- class=""
364
- >
365
- <td
366
- class="table-cell-expand"
367
- >
368
- <p
369
- class="table-list-title"
370
- >
371
- Hamburger
372
- </p>
373
- </td>
374
- <td
375
- class=""
376
- />
377
- <td
378
- class=""
379
- >
380
- U.S.A
381
- </td>
382
- <td
383
- class="text-right"
384
- >
385
- 10 min.
386
- </td>
387
- </tr>
388
- </tbody>
389
- </table>
390
- </div>
391
- </div>
392
- `;
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
- `;
package/src/__tests__/index.tsx DELETED
@@ -1,268 +0,0 @@
1
- /**
2
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
3
- * SPDX-License-Identifier: BSD-3-Clause
4
- */
5
-
6
- import ClayTable from '..';
7
- import {cleanup, render} from '@testing-library/react';
8
- import React from 'react';
9
-
10
- describe('ClayTable', () => {
11
- afterEach(cleanup);
12
-
13
- it('renders', () => {
14
- const {container} = render(<ClayTable />);
15
-
16
- expect(container).toMatchSnapshot();
17
- });
18
-
19
- it('renders a table with a Body', () => {
20
- const {container} = render(
21
- <ClayTable>
22
- <ClayTable.Body />
23
- </ClayTable>
24
- );
25
-
26
- expect(container).toMatchSnapshot();
27
- });
28
-
29
- it('renders a table with a Head', () => {
30
- const {container} = render(
31
- <ClayTable>
32
- <ClayTable.Head />
33
- </ClayTable>
34
- );
35
-
36
- expect(container).toMatchSnapshot();
37
- });
38
-
39
- it('renders a table with a Head and Body', () => {
40
- const {container} = render(
41
- <ClayTable>
42
- <ClayTable.Head />
43
- <ClayTable.Body />
44
- </ClayTable>
45
- );
46
-
47
- expect(container).toMatchSnapshot();
48
- });
49
-
50
- it('renders a table with multiple rows into Head', () => {
51
- const {container} = render(
52
- <ClayTable>
53
- <ClayTable.Head>
54
- <ClayTable.Row />
55
- <ClayTable.Row />
56
- <ClayTable.Row />
57
- </ClayTable.Head>
58
- </ClayTable>
59
- );
60
-
61
- expect(container).toMatchSnapshot();
62
- });
63
-
64
- it('renders a table with multiple rows into Body', () => {
65
- const {container} = render(
66
- <ClayTable>
67
- <ClayTable.Body>
68
- <ClayTable.Row />
69
- <ClayTable.Row />
70
- <ClayTable.Row />
71
- </ClayTable.Body>
72
- </ClayTable>
73
- );
74
-
75
- expect(container).toMatchSnapshot();
76
- });
77
-
78
- it('renders a table with multiple Cells into Row', () => {
79
- const {container} = render(
80
- <ClayTable>
81
- <ClayTable.Body>
82
- <ClayTable.Row>
83
- <ClayTable.Cell>One</ClayTable.Cell>
84
- <ClayTable.Cell>
85
- <button type="button">Two</button>
86
- </ClayTable.Cell>
87
- <ClayTable.Cell>Three</ClayTable.Cell>
88
- </ClayTable.Row>
89
- </ClayTable.Body>
90
- </ClayTable>
91
- );
92
-
93
- expect(container).toMatchSnapshot();
94
- });
95
-
96
- it('renders a table with an active row', () => {
97
- const {container} = render(
98
- <ClayTable>
99
- <ClayTable.Body>
100
- <ClayTable.Row active />
101
- </ClayTable.Body>
102
- </ClayTable>
103
- );
104
-
105
- expect(container).toMatchSnapshot();
106
- });
107
-
108
- it('renders a table with columns bordered', () => {
109
- const {container} = render(
110
- <ClayTable borderedColumns>
111
- <ClayTable.Head />
112
- <ClayTable.Body />
113
- </ClayTable>
114
- );
115
-
116
- expect(container).toMatchSnapshot();
117
- });
118
-
119
- it('renders a table hover', () => {
120
- const {container} = render(
121
- <ClayTable hover>
122
- <ClayTable.Head />
123
- <ClayTable.Body />
124
- </ClayTable>
125
- );
126
- expect(container).toMatchSnapshot();
127
- });
128
-
129
- it('renders a no wrapped table', () => {
130
- const {container} = render(
131
- <ClayTable headingNoWrap noWrap>
132
- <ClayTable.Head />
133
- <ClayTable.Body />
134
- </ClayTable>
135
- );
136
- expect(container).toMatchSnapshot();
137
- });
138
-
139
- it('renders a table striped', () => {
140
- const {container} = render(
141
- <ClayTable striped>
142
- <ClayTable.Head />
143
- <ClayTable.Body />
144
- </ClayTable>
145
- );
146
- expect(container).toMatchSnapshot();
147
- });
148
-
149
- it('renders a responsive table', () => {
150
- const {container} = render(
151
- <ClayTable responsive responsiveSize="sm">
152
- <ClayTable.Head />
153
- <ClayTable.Body />
154
- </ClayTable>
155
- );
156
- expect(container).toMatchSnapshot();
157
- });
158
-
159
- it('renders a responsive table', () => {
160
- const {container} = render(
161
- <ClayTable responsive responsiveSize="sm">
162
- <ClayTable.Head />
163
- <ClayTable.Body />
164
- </ClayTable>
165
- );
166
- expect(container).toMatchSnapshot();
167
- });
168
-
169
- it('renders a full bottom vertical aligned table', () => {
170
- const {container} = render(
171
- <ClayTable
172
- headVerticalAlignment="bottom"
173
- tableVerticalAlignment="bottom"
174
- >
175
- <ClayTable.Head />
176
- <ClayTable.Body />
177
- </ClayTable>
178
- );
179
- expect(container).toMatchSnapshot();
180
- });
181
-
182
- it('renders a Cell with text alignment set to center', () => {
183
- const {container} = render(
184
- <ClayTable striped>
185
- <ClayTable.Head>
186
- <ClayTable.Row>
187
- <ClayTable.Cell align="center" headingCell>
188
- <a href="#1">Link</a>
189
- </ClayTable.Cell>
190
- </ClayTable.Row>
191
- </ClayTable.Head>
192
- <ClayTable.Body />
193
- </ClayTable>
194
- );
195
- expect(container).toMatchSnapshot();
196
- });
197
-
198
- it('renders a Cell delimited', () => {
199
- const {container} = render(
200
- <ClayTable striped>
201
- <ClayTable.Head>
202
- <ClayTable.Row>
203
- <ClayTable.Cell cellDelimiter="start" headingCell>
204
- Start
205
- </ClayTable.Cell>
206
- <ClayTable.Cell headingCell>
207
- <button type="button">Dummy</button>
208
- </ClayTable.Cell>
209
- <ClayTable.Cell headingCell>
210
- <button type="button">Dummy</button>
211
- </ClayTable.Cell>
212
- <ClayTable.Cell cellDelimiter="end" headingCell>
213
- End
214
- </ClayTable.Cell>
215
- </ClayTable.Row>
216
- </ClayTable.Head>
217
- </ClayTable>
218
- );
219
- expect(container).toMatchSnapshot();
220
- });
221
-
222
- it('renders with a headingTitle', () => {
223
- const {container} = render(
224
- <ClayTable>
225
- <ClayTable.Body>
226
- <ClayTable.Row divider>
227
- <ClayTable.Cell colSpan={8}>Recipes</ClayTable.Cell>
228
- </ClayTable.Row>
229
-
230
- <ClayTable.Row>
231
- <ClayTable.Cell expanded headingTitle>
232
- Hamburger
233
- </ClayTable.Cell>
234
- <ClayTable.Cell />
235
- <ClayTable.Cell>U.S.A</ClayTable.Cell>
236
- <ClayTable.Cell align="right">10 min.</ClayTable.Cell>
237
- </ClayTable.Row>
238
- </ClayTable.Body>
239
- </ClayTable>
240
- );
241
- expect(container).toMatchSnapshot();
242
- });
243
-
244
- it('renders with non wrapped cells', () => {
245
- const {container} = render(
246
- <ClayTable>
247
- <ClayTable.Body>
248
- <ClayTable.Row divider>
249
- <ClayTable.Cell colSpan={8}>Recipes</ClayTable.Cell>
250
- </ClayTable.Row>
251
-
252
- <ClayTable.Row>
253
- <ClayTable.Cell expanded headingTitle>
254
- Hamburger
255
- </ClayTable.Cell>
256
- <ClayTable.Cell />
257
- <ClayTable.Cell noWrap>
258
- Originally from the U.S.A. but available anywhere
259
- around the world
260
- </ClayTable.Cell>
261
- <ClayTable.Cell align="right">10 min.</ClayTable.Cell>
262
- </ClayTable.Row>
263
- </ClayTable.Body>
264
- </ClayTable>
265
- );
266
- expect(container).toMatchSnapshot();
267
- });
268
- });