coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CCard,
4
  CCardBody,
5
  CCardHeader,
6
  CCol,
7
  CRow,
8
  CTable,
9
  CTableBody,
10
  CTableCaption,
11
  CTableDataCell,
12
  CTableHead,
13
  CTableHeaderCell,
14
  CTableRow,
15
} from '@coreui/react'
16
import { DocsExample } from 'src/components'
17

18
const Tables = () => {
19
  return (
20
    <CRow>
21
      <CCol xs={12}>
22
        <CCard className="mb-4">
23
          <CCardHeader>
24
            <strong>React Table</strong> <small>Basic example</small>
25
          </CCardHeader>
26
          <CCardBody>
27
            <p className="text-body-secondary small">
28
              Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
29
              tables look in CoreUI.
30
            </p>
31
            <DocsExample href="components/table">
32
              <CTable>
33
                <CTableHead>
34
                  <CTableRow>
35
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
36
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
37
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
38
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
39
                  </CTableRow>
40
                </CTableHead>
41
                <CTableBody>
42
                  <CTableRow>
43
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
44
                    <CTableDataCell>Mark</CTableDataCell>
45
                    <CTableDataCell>Otto</CTableDataCell>
46
                    <CTableDataCell>@mdo</CTableDataCell>
47
                  </CTableRow>
48
                  <CTableRow>
49
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
50
                    <CTableDataCell>Jacob</CTableDataCell>
51
                    <CTableDataCell>Thornton</CTableDataCell>
52
                    <CTableDataCell>@fat</CTableDataCell>
53
                  </CTableRow>
54
                  <CTableRow>
55
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
56
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
57
                    <CTableDataCell>@twitter</CTableDataCell>
58
                  </CTableRow>
59
                </CTableBody>
60
              </CTable>
61
            </DocsExample>
62
          </CCardBody>
63
        </CCard>
64
      </CCol>
65
      <CCol xs={12}>
66
        <CCard className="mb-4">
67
          <CCardHeader>
68
            <strong>React Table</strong> <small>Variants</small>
69
          </CCardHeader>
70
          <CCardBody>
71
            <p className="text-body-secondary small">
72
              Use contextual classes to color tables, table rows or individual cells.
73
            </p>
74
            <DocsExample href="components/table#variants">
75
              <CTable>
76
                <CTableHead>
77
                  <CTableRow>
78
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
79
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
80
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
81
                  </CTableRow>
82
                </CTableHead>
83
                <CTableBody>
84
                  <CTableRow>
85
                    <CTableHeaderCell scope="row">Default</CTableHeaderCell>
86
                    <CTableDataCell>Cell</CTableDataCell>
87
                    <CTableDataCell>Cell</CTableDataCell>
88
                  </CTableRow>
89
                  <CTableRow color="primary">
90
                    <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
91
                    <CTableDataCell>Cell</CTableDataCell>
92
                    <CTableDataCell>Cell</CTableDataCell>
93
                  </CTableRow>
94
                  <CTableRow color="secondary">
95
                    <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
96
                    <CTableDataCell>Cell</CTableDataCell>
97
                    <CTableDataCell>Cell</CTableDataCell>
98
                  </CTableRow>
99
                  <CTableRow color="success">
100
                    <CTableHeaderCell scope="row">Success</CTableHeaderCell>
101
                    <CTableDataCell>Cell</CTableDataCell>
102
                    <CTableDataCell>Cell</CTableDataCell>
103
                  </CTableRow>
104
                  <CTableRow color="danger">
105
                    <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
106
                    <CTableDataCell>Cell</CTableDataCell>
107
                    <CTableDataCell>Cell</CTableDataCell>
108
                  </CTableRow>
109
                  <CTableRow color="warning">
110
                    <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
111
                    <CTableDataCell>Cell</CTableDataCell>
112
                    <CTableDataCell>Cell</CTableDataCell>
113
                  </CTableRow>
114
                  <CTableRow color="info">
115
                    <CTableHeaderCell scope="row">Info</CTableHeaderCell>
116
                    <CTableDataCell>Cell</CTableDataCell>
117
                    <CTableDataCell>Cell</CTableDataCell>
118
                  </CTableRow>
119
                  <CTableRow color="light">
120
                    <CTableHeaderCell scope="row">Light</CTableHeaderCell>
121
                    <CTableDataCell>Cell</CTableDataCell>
122
                    <CTableDataCell>Cell</CTableDataCell>
123
                  </CTableRow>
124
                  <CTableRow color="dark">
125
                    <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
126
                    <CTableDataCell>Cell</CTableDataCell>
127
                    <CTableDataCell>Cell</CTableDataCell>
128
                  </CTableRow>
129
                </CTableBody>
130
              </CTable>
131
            </DocsExample>
132
          </CCardBody>
133
        </CCard>
134
      </CCol>
135
      <CCol xs={12}>
136
        <CCard className="mb-4">
137
          <CCardHeader>
138
            <strong>React Table</strong> <small>Striped rows</small>
139
          </CCardHeader>
140
          <CCardBody>
141
            <p className="text-body-secondary small">
142
              Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
143
              <code>&lt;CTableBody&gt;</code>.
144
            </p>
145
            <DocsExample href="components/table#striped-rows">
146
              <CTable striped>
147
                <CTableHead>
148
                  <CTableRow>
149
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
150
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
151
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
152
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
153
                  </CTableRow>
154
                </CTableHead>
155
                <CTableBody>
156
                  <CTableRow>
157
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
158
                    <CTableDataCell>Mark</CTableDataCell>
159
                    <CTableDataCell>Otto</CTableDataCell>
160
                    <CTableDataCell>@mdo</CTableDataCell>
161
                  </CTableRow>
162
                  <CTableRow>
163
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
164
                    <CTableDataCell>Jacob</CTableDataCell>
165
                    <CTableDataCell>Thornton</CTableDataCell>
166
                    <CTableDataCell>@fat</CTableDataCell>
167
                  </CTableRow>
168
                  <CTableRow>
169
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
170
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
171
                    <CTableDataCell>@twitter</CTableDataCell>
172
                  </CTableRow>
173
                </CTableBody>
174
              </CTable>
175
            </DocsExample>
176
            <p className="text-body-secondary small">
177
              These classes can also be added to table variants:
178
            </p>
179
            <DocsExample href="components/table#striped-rows">
180
              <CTable color="dark" striped>
181
                <CTableHead>
182
                  <CTableRow>
183
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
184
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
185
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
186
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
187
                  </CTableRow>
188
                </CTableHead>
189
                <CTableBody>
190
                  <CTableRow>
191
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
192
                    <CTableDataCell>Mark</CTableDataCell>
193
                    <CTableDataCell>Otto</CTableDataCell>
194
                    <CTableDataCell>@mdo</CTableDataCell>
195
                  </CTableRow>
196
                  <CTableRow>
197
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
198
                    <CTableDataCell>Jacob</CTableDataCell>
199
                    <CTableDataCell>Thornton</CTableDataCell>
200
                    <CTableDataCell>@fat</CTableDataCell>
201
                  </CTableRow>
202
                  <CTableRow>
203
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
204
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
205
                    <CTableDataCell>@twitter</CTableDataCell>
206
                  </CTableRow>
207
                </CTableBody>
208
              </CTable>
209
            </DocsExample>
210
            <DocsExample href="components/table#striped-rows">
211
              <CTable color="success" striped>
212
                <CTableHead>
213
                  <CTableRow>
214
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
215
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
216
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
217
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
218
                  </CTableRow>
219
                </CTableHead>
220
                <CTableBody>
221
                  <CTableRow>
222
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
223
                    <CTableDataCell>Mark</CTableDataCell>
224
                    <CTableDataCell>Otto</CTableDataCell>
225
                    <CTableDataCell>@mdo</CTableDataCell>
226
                  </CTableRow>
227
                  <CTableRow>
228
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
229
                    <CTableDataCell>Jacob</CTableDataCell>
230
                    <CTableDataCell>Thornton</CTableDataCell>
231
                    <CTableDataCell>@fat</CTableDataCell>
232
                  </CTableRow>
233
                  <CTableRow>
234
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
235
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
236
                    <CTableDataCell>@twitter</CTableDataCell>
237
                  </CTableRow>
238
                </CTableBody>
239
              </CTable>
240
            </DocsExample>
241
          </CCardBody>
242
        </CCard>
243
      </CCol>
244
      <CCol xs={12}>
245
        <CCard className="mb-4">
246
          <CCardHeader>
247
            <strong>React Table</strong> <small>Hoverable rows</small>
248
          </CCardHeader>
249
          <CCardBody>
250
            <p className="text-body-secondary small">
251
              Use <code>hover</code> property to enable a hover state on table rows within a{' '}
252
              <code>&lt;CTableBody&gt;</code>.
253
            </p>
254
            <DocsExample href="components/table#hoverable-rows">
255
              <CTable hover>
256
                <CTableHead>
257
                  <CTableRow>
258
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
259
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
260
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
261
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
262
                  </CTableRow>
263
                </CTableHead>
264
                <CTableBody>
265
                  <CTableRow>
266
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
267
                    <CTableDataCell>Mark</CTableDataCell>
268
                    <CTableDataCell>Otto</CTableDataCell>
269
                    <CTableDataCell>@mdo</CTableDataCell>
270
                  </CTableRow>
271
                  <CTableRow>
272
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
273
                    <CTableDataCell>Jacob</CTableDataCell>
274
                    <CTableDataCell>Thornton</CTableDataCell>
275
                    <CTableDataCell>@fat</CTableDataCell>
276
                  </CTableRow>
277
                  <CTableRow>
278
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
279
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
280
                    <CTableDataCell>@twitter</CTableDataCell>
281
                  </CTableRow>
282
                </CTableBody>
283
              </CTable>
284
            </DocsExample>
285
            <DocsExample href="components/table#hoverable-rows">
286
              <CTable color="dark" hover>
287
                <CTableHead>
288
                  <CTableRow>
289
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
290
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
291
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
292
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
293
                  </CTableRow>
294
                </CTableHead>
295
                <CTableBody>
296
                  <CTableRow>
297
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
298
                    <CTableDataCell>Mark</CTableDataCell>
299
                    <CTableDataCell>Otto</CTableDataCell>
300
                    <CTableDataCell>@mdo</CTableDataCell>
301
                  </CTableRow>
302
                  <CTableRow>
303
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
304
                    <CTableDataCell>Jacob</CTableDataCell>
305
                    <CTableDataCell>Thornton</CTableDataCell>
306
                    <CTableDataCell>@fat</CTableDataCell>
307
                  </CTableRow>
308
                  <CTableRow>
309
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
310
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
311
                    <CTableDataCell>@twitter</CTableDataCell>
312
                  </CTableRow>
313
                </CTableBody>
314
              </CTable>
315
            </DocsExample>
316
            <DocsExample href="components/table#hoverable-rows">
317
              <CTable striped hover>
318
                <CTableHead>
319
                  <CTableRow>
320
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
321
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
322
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
323
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
324
                  </CTableRow>
325
                </CTableHead>
326
                <CTableBody>
327
                  <CTableRow>
328
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
329
                    <CTableDataCell>Mark</CTableDataCell>
330
                    <CTableDataCell>Otto</CTableDataCell>
331
                    <CTableDataCell>@mdo</CTableDataCell>
332
                  </CTableRow>
333
                  <CTableRow>
334
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
335
                    <CTableDataCell>Jacob</CTableDataCell>
336
                    <CTableDataCell>Thornton</CTableDataCell>
337
                    <CTableDataCell>@fat</CTableDataCell>
338
                  </CTableRow>
339
                  <CTableRow>
340
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
341
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
342
                    <CTableDataCell>@twitter</CTableDataCell>
343
                  </CTableRow>
344
                </CTableBody>
345
              </CTable>
346
            </DocsExample>
347
          </CCardBody>
348
        </CCard>
349
      </CCol>
350
      <CCol xs={12}>
351
        <CCard className="mb-4">
352
          <CCardHeader>
353
            <strong>React Table</strong> <small>Active tables</small>
354
          </CCardHeader>
355
          <CCardBody>
356
            <DocsExample href="components/table#active-tables">
357
              <CTable>
358
                <CTableHead>
359
                  <CTableRow>
360
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
361
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
362
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
363
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
364
                  </CTableRow>
365
                </CTableHead>
366
                <CTableBody>
367
                  <CTableRow active>
368
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
369
                    <CTableDataCell>Mark</CTableDataCell>
370
                    <CTableDataCell>Otto</CTableDataCell>
371
                    <CTableDataCell>@mdo</CTableDataCell>
372
                  </CTableRow>
373
                  <CTableRow>
374
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
375
                    <CTableDataCell>Jacob</CTableDataCell>
376
                    <CTableDataCell>Thornton</CTableDataCell>
377
                    <CTableDataCell>@fat</CTableDataCell>
378
                  </CTableRow>
379
                  <CTableRow>
380
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
381
                    <CTableDataCell colSpan={2} active>
382
                      Larry the Bird
383
                    </CTableDataCell>
384
                    <CTableDataCell>@twitter</CTableDataCell>
385
                  </CTableRow>
386
                </CTableBody>
387
              </CTable>
388
            </DocsExample>
389
            <DocsExample href="components/table#active-tables">
390
              <CTable color="dark">
391
                <CTableHead>
392
                  <CTableRow>
393
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
394
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
395
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
396
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
397
                  </CTableRow>
398
                </CTableHead>
399
                <CTableBody>
400
                  <CTableRow active>
401
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
402
                    <CTableDataCell>Mark</CTableDataCell>
403
                    <CTableDataCell>Otto</CTableDataCell>
404
                    <CTableDataCell>@mdo</CTableDataCell>
405
                  </CTableRow>
406
                  <CTableRow>
407
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
408
                    <CTableDataCell>Jacob</CTableDataCell>
409
                    <CTableDataCell>Thornton</CTableDataCell>
410
                    <CTableDataCell>@fat</CTableDataCell>
411
                  </CTableRow>
412
                  <CTableRow>
413
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
414
                    <CTableDataCell colSpan={2} active>
415
                      Larry the Bird
416
                    </CTableDataCell>
417
                    <CTableDataCell>@twitter</CTableDataCell>
418
                  </CTableRow>
419
                </CTableBody>
420
              </CTable>
421
            </DocsExample>
422
          </CCardBody>
423
        </CCard>
424
      </CCol>
425
      <CCol xs={12}>
426
        <CCard className="mb-4">
427
          <CCardHeader>
428
            <strong>React Table</strong> <small>Bordered tables</small>
429
          </CCardHeader>
430
          <CCardBody>
431
            <p className="text-body-secondary small">
432
              Add <code>bordered</code> property for borders on all sides of the table and cells.
433
            </p>
434
            <DocsExample href="components/table#bordered-tables">
435
              <CTable bordered>
436
                <CTableHead>
437
                  <CTableRow>
438
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
439
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
440
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
441
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
442
                  </CTableRow>
443
                </CTableHead>
444
                <CTableBody>
445
                  <CTableRow>
446
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
447
                    <CTableDataCell>Mark</CTableDataCell>
448
                    <CTableDataCell>Otto</CTableDataCell>
449
                    <CTableDataCell>@mdo</CTableDataCell>
450
                  </CTableRow>
451
                  <CTableRow>
452
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
453
                    <CTableDataCell>Jacob</CTableDataCell>
454
                    <CTableDataCell>Thornton</CTableDataCell>
455
                    <CTableDataCell>@fat</CTableDataCell>
456
                  </CTableRow>
457
                  <CTableRow>
458
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
459
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
460
                    <CTableDataCell>@twitter</CTableDataCell>
461
                  </CTableRow>
462
                </CTableBody>
463
              </CTable>
464
            </DocsExample>
465
            <p className="text-body-secondary small">
466
              <a href="https://coreui.io/docs/utilities/borders#border-color">
467
                Border color utilities
468
              </a>{' '}
469
              can be added to change colors:
470
            </p>
471
            <DocsExample href="components/table#bordered-tables">
472
              <CTable bordered borderColor="primary">
473
                <CTableHead>
474
                  <CTableRow>
475
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
476
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
477
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
478
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
479
                  </CTableRow>
480
                </CTableHead>
481
                <CTableBody>
482
                  <CTableRow>
483
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
484
                    <CTableDataCell>Mark</CTableDataCell>
485
                    <CTableDataCell>Otto</CTableDataCell>
486
                    <CTableDataCell>@mdo</CTableDataCell>
487
                  </CTableRow>
488
                  <CTableRow>
489
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
490
                    <CTableDataCell>Jacob</CTableDataCell>
491
                    <CTableDataCell>Thornton</CTableDataCell>
492
                    <CTableDataCell>@fat</CTableDataCell>
493
                  </CTableRow>
494
                  <CTableRow>
495
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
496
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
497
                    <CTableDataCell>@twitter</CTableDataCell>
498
                  </CTableRow>
499
                </CTableBody>
500
              </CTable>
501
            </DocsExample>
502
          </CCardBody>
503
        </CCard>
504
      </CCol>
505
      <CCol xs={12}>
506
        <CCard className="mb-4">
507
          <CCardHeader>
508
            <strong>React Table</strong> <small>Tables without borders</small>
509
          </CCardHeader>
510
          <CCardBody>
511
            <p className="text-body-secondary small">
512
              Add <code>borderless</code> property for a table without borders.
513
            </p>
514
            <DocsExample href="components/table#tables-without-borders">
515
              <CTable borderless>
516
                <CTableHead>
517
                  <CTableRow>
518
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
519
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
520
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
521
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
522
                  </CTableRow>
523
                </CTableHead>
524
                <CTableBody>
525
                  <CTableRow>
526
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
527
                    <CTableDataCell>Mark</CTableDataCell>
528
                    <CTableDataCell>Otto</CTableDataCell>
529
                    <CTableDataCell>@mdo</CTableDataCell>
530
                  </CTableRow>
531
                  <CTableRow>
532
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
533
                    <CTableDataCell>Jacob</CTableDataCell>
534
                    <CTableDataCell>Thornton</CTableDataCell>
535
                    <CTableDataCell>@fat</CTableDataCell>
536
                  </CTableRow>
537
                  <CTableRow>
538
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
539
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
540
                    <CTableDataCell>@twitter</CTableDataCell>
541
                  </CTableRow>
542
                </CTableBody>
543
              </CTable>
544
            </DocsExample>
545
            <DocsExample href="components/table#tables-without-borders">
546
              <CTable color="dark" borderless>
547
                <CTableHead>
548
                  <CTableRow>
549
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
550
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
551
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
552
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
553
                  </CTableRow>
554
                </CTableHead>
555
                <CTableBody>
556
                  <CTableRow>
557
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
558
                    <CTableDataCell>Mark</CTableDataCell>
559
                    <CTableDataCell>Otto</CTableDataCell>
560
                    <CTableDataCell>@mdo</CTableDataCell>
561
                  </CTableRow>
562
                  <CTableRow>
563
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
564
                    <CTableDataCell>Jacob</CTableDataCell>
565
                    <CTableDataCell>Thornton</CTableDataCell>
566
                    <CTableDataCell>@fat</CTableDataCell>
567
                  </CTableRow>
568
                  <CTableRow>
569
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
570
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
571
                    <CTableDataCell>@twitter</CTableDataCell>
572
                  </CTableRow>
573
                </CTableBody>
574
              </CTable>
575
            </DocsExample>
576
          </CCardBody>
577
        </CCard>
578
      </CCol>
579
      <CCol xs={12}>
580
        <CCard className="mb-4">
581
          <CCardHeader>
582
            <strong>React Table</strong> <small>Small tables</small>
583
          </CCardHeader>
584
          <CCardBody>
585
            <p className="text-body-secondary small">
586
              Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact
587
              by cutting all cell <code>padding</code> in half.
588
            </p>
589
            <DocsExample href="components/table#small-tables">
590
              <CTable small>
591
                <CTableHead>
592
                  <CTableRow>
593
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
594
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
595
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
596
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
597
                  </CTableRow>
598
                </CTableHead>
599
                <CTableBody>
600
                  <CTableRow>
601
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
602
                    <CTableDataCell>Mark</CTableDataCell>
603
                    <CTableDataCell>Otto</CTableDataCell>
604
                    <CTableDataCell>@mdo</CTableDataCell>
605
                  </CTableRow>
606
                  <CTableRow>
607
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
608
                    <CTableDataCell>Jacob</CTableDataCell>
609
                    <CTableDataCell>Thornton</CTableDataCell>
610
                    <CTableDataCell>@fat</CTableDataCell>
611
                  </CTableRow>
612
                  <CTableRow>
613
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
614
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
615
                    <CTableDataCell>@twitter</CTableDataCell>
616
                  </CTableRow>
617
                </CTableBody>
618
              </CTable>
619
            </DocsExample>
620
          </CCardBody>
621
        </CCard>
622
      </CCol>
623
      <CCol xs={12}>
624
        <CCard className="mb-4">
625
          <CCardHeader>
626
            <strong>React Table</strong> <small>Vertical alignment</small>
627
          </CCardHeader>
628
          <CCardBody>
629
            <p className="text-body-secondary small">
630
              Table cells of <code>&lt;CTableHead&gt;</code> are always vertical aligned to the
631
              bottom. Table cells in <code>&lt;CTableBody&gt;</code> inherit their alignment from{' '}
632
              <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align
633
              property to re-align where needed.
634
            </p>
635
            <DocsExample href="components/table#vertical-alignment">
636
              <CTable align="middle" responsive>
637
                <CTableHead>
638
                  <CTableRow>
639
                    <CTableHeaderCell scope="col" className="w-25">
640
                      Heading 1
641
                    </CTableHeaderCell>
642
                    <CTableHeaderCell scope="col" className="w-25">
643
                      Heading 2
644
                    </CTableHeaderCell>
645
                    <CTableHeaderCell scope="col" className="w-25">
646
                      Heading 3
647
                    </CTableHeaderCell>
648
                    <CTableHeaderCell scope="col" className="w-25">
649
                      Heading 4
650
                    </CTableHeaderCell>
651
                  </CTableRow>
652
                </CTableHead>
653
                <CTableBody>
654
                  <CTableRow>
655
                    <CTableDataCell>
656
                      This cell inherits <code>vertical-align: middle;</code> from the table
657
                    </CTableDataCell>
658
                    <CTableDataCell>
659
                      This cell inherits <code>vertical-align: middle;</code> from the table
660
                    </CTableDataCell>
661
                    <CTableDataCell>
662
                      This cell inherits <code>vertical-align: middle;</code> from the table
663
                    </CTableDataCell>
664
                    <CTableDataCell>
665
                      This here is some placeholder text, intended to take up quite a bit of
666
                      vertical space, to demonsCTableRowate how the vertical alignment works in the
667
                      preceding cells.
668
                    </CTableDataCell>
669
                  </CTableRow>
670
                  <CTableRow align="bottom">
671
                    <CTableDataCell>
672
                      This cell inherits <code>vertical-align: bottom;</code> from the table row
673
                    </CTableDataCell>
674
                    <CTableDataCell>
675
                      This cell inherits <code>vertical-align: bottom;</code> from the table row
676
                    </CTableDataCell>
677
                    <CTableDataCell>
678
                      This cell inherits <code>vertical-align: bottom;</code> from the table row
679
                    </CTableDataCell>
680
                    <CTableDataCell>
681
                      This here is some placeholder text, intended to take up quite a bit of
682
                      vertical space, to demonsCTableRowate how the vertical alignment works in the
683
                      preceding cells.
684
                    </CTableDataCell>
685
                  </CTableRow>
686
                  <CTableRow>
687
                    <CTableDataCell>
688
                      This cell inherits <code>vertical-align: middle;</code> from the table
689
                    </CTableDataCell>
690
                    <CTableDataCell>
691
                      This cell inherits <code>vertical-align: middle;</code> from the table
692
                    </CTableDataCell>
693
                    <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
694
                    <CTableDataCell>
695
                      This here is some placeholder text, intended to take up quite a bit of
696
                      vertical space, to demonsCTableRowate how the vertical alignment works in the
697
                      preceding cells.
698
                    </CTableDataCell>
699
                  </CTableRow>
700
                </CTableBody>
701
              </CTable>
702
            </DocsExample>
703
          </CCardBody>
704
        </CCard>
705
      </CCol>
706
      <CCol xs={12}>
707
        <CCard className="mb-4">
708
          <CCardHeader>
709
            <strong>React Table</strong> <small>Nesting</small>
710
          </CCardHeader>
711
          <CCardBody>
712
            <p className="text-body-secondary small">
713
              Border styles, active styles, and table variants are not inherited by nested tables.
714
            </p>
715
            <DocsExample href="components/table#nesting">
716
              <CTable striped>
717
                <CTableHead>
718
                  <CTableRow>
719
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
720
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
721
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
722
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
723
                  </CTableRow>
724
                </CTableHead>
725
                <CTableBody>
726
                  <CTableRow>
727
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
728
                    <CTableDataCell>Mark</CTableDataCell>
729
                    <CTableDataCell>Otto</CTableDataCell>
730
                    <CTableDataCell>@mdo</CTableDataCell>
731
                  </CTableRow>
732
                  <CTableRow>
733
                    <CTableHeaderCell colSpan={4}>
734
                      <CTable>
735
                        <CTableHead>
736
                          <CTableRow>
737
                            <CTableHeaderCell scope="col">Header</CTableHeaderCell>
738
                            <CTableHeaderCell scope="col">Header</CTableHeaderCell>
739
                            <CTableHeaderCell scope="col">Header</CTableHeaderCell>
740
                          </CTableRow>
741
                        </CTableHead>
742
                        <CTableBody>
743
                          <CTableRow>
744
                            <CTableHeaderCell scope="row">A</CTableHeaderCell>
745
                            <CTableDataCell>First</CTableDataCell>
746
                            <CTableDataCell>Last</CTableDataCell>
747
                          </CTableRow>
748
                          <CTableRow>
749
                            <CTableHeaderCell scope="row">B</CTableHeaderCell>
750
                            <CTableDataCell>First</CTableDataCell>
751
                            <CTableDataCell>Last</CTableDataCell>
752
                          </CTableRow>
753
                          <CTableRow>
754
                            <CTableHeaderCell scope="row">C</CTableHeaderCell>
755
                            <CTableDataCell>First</CTableDataCell>
756
                            <CTableDataCell>Last</CTableDataCell>
757
                          </CTableRow>
758
                        </CTableBody>
759
                      </CTable>
760
                    </CTableHeaderCell>
761
                  </CTableRow>
762
                  <CTableRow>
763
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
764
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
765
                    <CTableDataCell>@twitter</CTableDataCell>
766
                  </CTableRow>
767
                </CTableBody>
768
              </CTable>
769
            </DocsExample>
770
          </CCardBody>
771
        </CCard>
772
      </CCol>
773
      <CCol xs={12}>
774
        <CCard className="mb-4">
775
          <CCardHeader>
776
            <strong>React Table</strong> <small>Table head</small>
777
          </CCardHeader>
778
          <CCardBody>
779
            <p className="text-body-secondary small">
780
              Similar to tables and dark tables, use the modifier prop{' '}
781
              <code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '}
782
              <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
783
            </p>
784
            <DocsExample href="components/table#table-head">
785
              <CTable>
786
                <CTableHead color="light">
787
                  <CTableRow>
788
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
789
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
790
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
791
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
792
                  </CTableRow>
793
                </CTableHead>
794
                <CTableBody>
795
                  <CTableRow>
796
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
797
                    <CTableDataCell>Mark</CTableDataCell>
798
                    <CTableDataCell>Otto</CTableDataCell>
799
                    <CTableDataCell>@mdo</CTableDataCell>
800
                  </CTableRow>
801
                  <CTableRow>
802
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
803
                    <CTableDataCell>Jacob</CTableDataCell>
804
                    <CTableDataCell>Thornton</CTableDataCell>
805
                    <CTableDataCell>@fat</CTableDataCell>
806
                  </CTableRow>
807
                  <CTableRow>
808
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
809
                    <CTableDataCell>Larry</CTableDataCell>
810
                    <CTableDataCell>the Bird</CTableDataCell>
811
                    <CTableDataCell>@twitter</CTableDataCell>
812
                  </CTableRow>
813
                </CTableBody>
814
              </CTable>
815
            </DocsExample>
816
            <DocsExample href="components/table#table-head">
817
              <CTable>
818
                <CTableHead color="dark">
819
                  <CTableRow>
820
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
821
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
822
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
823
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
824
                  </CTableRow>
825
                </CTableHead>
826
                <CTableBody>
827
                  <CTableRow>
828
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
829
                    <CTableDataCell>Mark</CTableDataCell>
830
                    <CTableDataCell>Otto</CTableDataCell>
831
                    <CTableDataCell>@mdo</CTableDataCell>
832
                  </CTableRow>
833
                  <CTableRow>
834
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
835
                    <CTableDataCell>Jacob</CTableDataCell>
836
                    <CTableDataCell>Thornton</CTableDataCell>
837
                    <CTableDataCell>@fat</CTableDataCell>
838
                  </CTableRow>
839
                  <CTableRow>
840
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
841
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
842
                    <CTableDataCell>@twitter</CTableDataCell>
843
                  </CTableRow>
844
                </CTableBody>
845
              </CTable>
846
            </DocsExample>
847
          </CCardBody>
848
        </CCard>
849
      </CCol>
850
      <CCol xs={12}>
851
        <CCard className="mb-4">
852
          <CCardHeader>
853
            <strong>React Table</strong> <small>Table foot</small>
854
          </CCardHeader>
855
          <CCardBody>
856
            <DocsExample href="components/table#table-foot">
857
              <CTable>
858
                <CTableHead color="light">
859
                  <CTableRow>
860
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
861
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
862
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
863
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
864
                  </CTableRow>
865
                </CTableHead>
866
                <CTableBody>
867
                  <CTableRow>
868
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
869
                    <CTableDataCell>Mark</CTableDataCell>
870
                    <CTableDataCell>Otto</CTableDataCell>
871
                    <CTableDataCell>@mdo</CTableDataCell>
872
                  </CTableRow>
873
                  <CTableRow>
874
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
875
                    <CTableDataCell>Jacob</CTableDataCell>
876
                    <CTableDataCell>Thornton</CTableDataCell>
877
                    <CTableDataCell>@fat</CTableDataCell>
878
                  </CTableRow>
879
                  <CTableRow>
880
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
881
                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
882
                    <CTableDataCell>@twitter</CTableDataCell>
883
                  </CTableRow>
884
                </CTableBody>
885
                <CTableHead>
886
                  <CTableRow>
887
                    <CTableDataCell>Footer</CTableDataCell>
888
                    <CTableDataCell>Footer</CTableDataCell>
889
                    <CTableDataCell>Footer</CTableDataCell>
890
                    <CTableDataCell>Footer</CTableDataCell>
891
                  </CTableRow>
892
                </CTableHead>
893
              </CTable>
894
            </DocsExample>
895
          </CCardBody>
896
        </CCard>
897
      </CCol>
898
      <CCol xs={12}>
899
        <CCard className="mb-4">
900
          <CCardHeader>
901
            <strong>React Table</strong> <small>Captions</small>
902
          </CCardHeader>
903
          <CCardBody>
904
            <p className="text-body-secondary small">
905
              A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps
906
              users with screen readers to find a table and understand what it&#39;s about and
907
              decide if they want to read it.
908
            </p>
909
            <DocsExample href="components/table#captions">
910
              <CTable>
911
                <CTableCaption>List of users</CTableCaption>
912
                <CTableHead>
913
                  <CTableRow>
914
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
915
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
916
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
917
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
918
                  </CTableRow>
919
                </CTableHead>
920
                <CTableBody>
921
                  <CTableRow>
922
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
923
                    <CTableDataCell>Mark</CTableDataCell>
924
                    <CTableDataCell>Otto</CTableDataCell>
925
                    <CTableDataCell>@mdo</CTableDataCell>
926
                  </CTableRow>
927
                  <CTableRow>
928
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
929
                    <CTableDataCell>Jacob</CTableDataCell>
930
                    <CTableDataCell>Thornton</CTableDataCell>
931
                    <CTableDataCell>@fat</CTableDataCell>
932
                  </CTableRow>
933
                  <CTableRow>
934
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
935
                    <CTableDataCell>Larry</CTableDataCell>
936
                    <CTableDataCell>the Bird</CTableDataCell>
937
                    <CTableDataCell>@twitter</CTableDataCell>
938
                  </CTableRow>
939
                </CTableBody>
940
              </CTable>
941
            </DocsExample>
942
            <p className="text-body-secondary small">
943
              You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with{' '}
944
              <code>caption=&#34;top&#34;</code>.
945
            </p>
946
            <DocsExample href="components/table#captions">
947
              <CTable caption="top">
948
                <CTableCaption>List of users</CTableCaption>
949
                <CTableHead>
950
                  <CTableRow>
951
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
952
                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
953
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
954
                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
955
                  </CTableRow>
956
                </CTableHead>
957
                <CTableBody>
958
                  <CTableRow>
959
                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
960
                    <CTableDataCell>Mark</CTableDataCell>
961
                    <CTableDataCell>Otto</CTableDataCell>
962
                    <CTableDataCell>@mdo</CTableDataCell>
963
                  </CTableRow>
964
                  <CTableRow>
965
                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
966
                    <CTableDataCell>Jacob</CTableDataCell>
967
                    <CTableDataCell>Thornton</CTableDataCell>
968
                    <CTableDataCell>@fat</CTableDataCell>
969
                  </CTableRow>
970
                  <CTableRow>
971
                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
972
                    <CTableDataCell>Larry</CTableDataCell>
973
                    <CTableDataCell>the Bird</CTableDataCell>
974
                    <CTableDataCell>@twitter</CTableDataCell>
975
                  </CTableRow>
976
                </CTableBody>
977
              </CTable>
978
            </DocsExample>
979
          </CCardBody>
980
        </CCard>
981
      </CCol>
982
    </CRow>
983
  )
984
}
985

986
export default Tables
987