@patternfly/patternfly 4.159.1 → 4.161.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.
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Black.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-BlackItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-BoldItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Italic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Light.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-LightItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-MediumItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplayVF-updated-Italic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplayVF-updated.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Bold.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-BoldItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Italic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Light.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-LightItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Medium.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-MediumItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Bold.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-BoldItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Italic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Light.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-LightItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-MediumItalic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatTextVF-updated-Italic.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/RedHatText/RedHatTextVF-updated.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2 +0 -0
- package/assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2 +0 -0
- package/base/_common.scss +5 -1
- package/base/_fonts.scss +100 -0
- package/base/_globals.scss +0 -16
- package/base/_variables.scss +25 -1
- package/base/patternfly-common.css +4 -0
- package/base/patternfly-fonts.css +84 -0
- package/base/patternfly-globals.css +0 -14
- package/base/patternfly-variables.css +21 -0
- package/components/Table/table.css +3 -3
- package/components/Table/table.scss +3 -3
- package/components/Toolbar/toolbar.css +4 -2
- package/components/Toolbar/toolbar.scss +6 -2
- package/docs/components/Select/examples/Select.md +12 -11
- package/docs/components/Table/examples/Table.md +550 -42
- package/docs/demos/Button/examples/Button.md +176 -0
- package/docs/demos/Card/examples/Card.md +164 -112
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +79 -0
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +109 -0
- package/patternfly-base.css +109 -14
- package/patternfly-no-reset.css +116 -5
- package/patternfly.css +116 -19
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +6 -0
|
@@ -81,6 +81,17 @@ cssPrefix: pf-c-table
|
|
|
81
81
|
| `.pf-c-table__caption` | `<caption>` | Initiates a table caption. |
|
|
82
82
|
| `.pf-m-center` | `<th>`, `<td>` | Modifies cell to center its contents. |
|
|
83
83
|
|
|
84
|
+
## Responsive table behavior
|
|
85
|
+
|
|
86
|
+
### Responsive layout modifier usage
|
|
87
|
+
|
|
88
|
+
These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
|
|
89
|
+
|
|
90
|
+
| Class | Applied to | Outcome |
|
|
91
|
+
| ------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at suffixed breakpoint. |
|
|
93
|
+
| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
|
|
94
|
+
|
|
84
95
|
## Sortable
|
|
85
96
|
|
|
86
97
|
### Sortable example
|
|
@@ -1251,6 +1262,506 @@ When header cells are empty or they contain interactive elements, `<th>` should
|
|
|
1251
1262
|
|
|
1252
1263
|
```
|
|
1253
1264
|
|
|
1265
|
+
### Expandable with nested table example
|
|
1266
|
+
|
|
1267
|
+
```html
|
|
1268
|
+
<table
|
|
1269
|
+
class="pf-c-table pf-m-expandable pf-m-grid-lg"
|
|
1270
|
+
role="grid"
|
|
1271
|
+
aria-label="Expandable with nested table example"
|
|
1272
|
+
id="table-expandable-nested-table"
|
|
1273
|
+
>
|
|
1274
|
+
<thead>
|
|
1275
|
+
<tr role="row">
|
|
1276
|
+
<td></td>
|
|
1277
|
+
<td class="pf-c-table__check" role="cell">
|
|
1278
|
+
<input
|
|
1279
|
+
type="checkbox"
|
|
1280
|
+
name="table-expandable-nested-table-check-all"
|
|
1281
|
+
aria-label="Select all rows"
|
|
1282
|
+
/>
|
|
1283
|
+
</td>
|
|
1284
|
+
<th
|
|
1285
|
+
class="pf-m-width-30 pf-c-table__sort pf-m-selected"
|
|
1286
|
+
role="columnheader"
|
|
1287
|
+
aria-sort="ascending"
|
|
1288
|
+
scope="col"
|
|
1289
|
+
>
|
|
1290
|
+
<button class="pf-c-table__button">
|
|
1291
|
+
<div class="pf-c-table__button-content">
|
|
1292
|
+
<span class="pf-c-table__text">Repositories</span>
|
|
1293
|
+
<span class="pf-c-table__sort-indicator">
|
|
1294
|
+
<i class="fas fa-long-arrow-alt-up"></i>
|
|
1295
|
+
</span>
|
|
1296
|
+
</div>
|
|
1297
|
+
</button>
|
|
1298
|
+
</th>
|
|
1299
|
+
<th
|
|
1300
|
+
class="pf-c-table__sort"
|
|
1301
|
+
role="columnheader"
|
|
1302
|
+
aria-sort="none"
|
|
1303
|
+
scope="col"
|
|
1304
|
+
>
|
|
1305
|
+
<button class="pf-c-table__button">
|
|
1306
|
+
<div class="pf-c-table__button-content">
|
|
1307
|
+
<span class="pf-c-table__text">Branches</span>
|
|
1308
|
+
<span class="pf-c-table__sort-indicator">
|
|
1309
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
1310
|
+
</span>
|
|
1311
|
+
</div>
|
|
1312
|
+
</button>
|
|
1313
|
+
</th>
|
|
1314
|
+
<th
|
|
1315
|
+
class="pf-c-table__sort"
|
|
1316
|
+
role="columnheader"
|
|
1317
|
+
aria-sort="none"
|
|
1318
|
+
scope="col"
|
|
1319
|
+
>
|
|
1320
|
+
<button class="pf-c-table__button">
|
|
1321
|
+
<div class="pf-c-table__button-content">
|
|
1322
|
+
<span class="pf-c-table__text">Pull requests</span>
|
|
1323
|
+
<span class="pf-c-table__sort-indicator">
|
|
1324
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
1325
|
+
</span>
|
|
1326
|
+
</div>
|
|
1327
|
+
</button>
|
|
1328
|
+
</th>
|
|
1329
|
+
<td></td>
|
|
1330
|
+
<td></td>
|
|
1331
|
+
</tr>
|
|
1332
|
+
</thead>
|
|
1333
|
+
|
|
1334
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1335
|
+
<tr role="row">
|
|
1336
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1337
|
+
<button
|
|
1338
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
1339
|
+
aria-labelledby="table-expandable-nested-table-node1 table-expandable-nested-table-expandable-toggle1"
|
|
1340
|
+
id="table-expandable-nested-table-expandable-toggle1"
|
|
1341
|
+
aria-label="Details"
|
|
1342
|
+
aria-controls="table-expandable-nested-table-content1"
|
|
1343
|
+
aria-expanded="true"
|
|
1344
|
+
>
|
|
1345
|
+
<div class="pf-c-table__toggle-icon">
|
|
1346
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1347
|
+
</div>
|
|
1348
|
+
</button>
|
|
1349
|
+
</td>
|
|
1350
|
+
|
|
1351
|
+
<td class="pf-c-table__check" role="cell">
|
|
1352
|
+
<input
|
|
1353
|
+
type="checkbox"
|
|
1354
|
+
name="table-expandable-nested-table-checkrow1"
|
|
1355
|
+
aria-labelledby="table-expandable-nested-table-node1"
|
|
1356
|
+
/>
|
|
1357
|
+
</td>
|
|
1358
|
+
<th role="columnheader" data-label="Repository name">
|
|
1359
|
+
<div>
|
|
1360
|
+
<div id="table-expandable-nested-table-node1">Node 1</div>
|
|
1361
|
+
<a href="#">siemur/test-space</a>
|
|
1362
|
+
</div>
|
|
1363
|
+
</th>
|
|
1364
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1365
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1366
|
+
<td role="cell" data-label="Action">
|
|
1367
|
+
<a href="#">Link 1</a>
|
|
1368
|
+
</td>
|
|
1369
|
+
<td class="pf-c-table__action" role="cell">
|
|
1370
|
+
<div class="pf-c-dropdown">
|
|
1371
|
+
<button
|
|
1372
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1373
|
+
id="table-expandable-nested-table-dropdown-kebab-1-button"
|
|
1374
|
+
aria-expanded="false"
|
|
1375
|
+
type="button"
|
|
1376
|
+
aria-label="Actions"
|
|
1377
|
+
>
|
|
1378
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1379
|
+
</button>
|
|
1380
|
+
<ul
|
|
1381
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1382
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-1-button"
|
|
1383
|
+
hidden
|
|
1384
|
+
>
|
|
1385
|
+
<li>
|
|
1386
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1387
|
+
</li>
|
|
1388
|
+
<li>
|
|
1389
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1390
|
+
</li>
|
|
1391
|
+
<li>
|
|
1392
|
+
<a
|
|
1393
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1394
|
+
href="#"
|
|
1395
|
+
aria-disabled="true"
|
|
1396
|
+
tabindex="-1"
|
|
1397
|
+
>Disabled link</a>
|
|
1398
|
+
</li>
|
|
1399
|
+
<li>
|
|
1400
|
+
<button
|
|
1401
|
+
class="pf-c-dropdown__menu-item"
|
|
1402
|
+
type="button"
|
|
1403
|
+
disabled
|
|
1404
|
+
>Disabled action</button>
|
|
1405
|
+
</li>
|
|
1406
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1407
|
+
<li>
|
|
1408
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1409
|
+
</li>
|
|
1410
|
+
</ul>
|
|
1411
|
+
</div>
|
|
1412
|
+
</td>
|
|
1413
|
+
</tr>
|
|
1414
|
+
|
|
1415
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
1416
|
+
<td
|
|
1417
|
+
class
|
|
1418
|
+
role="cell"
|
|
1419
|
+
colspan="7"
|
|
1420
|
+
id="table-expandable-nested-table-content1"
|
|
1421
|
+
>
|
|
1422
|
+
<div class="pf-c-table__expandable-row-content">
|
|
1423
|
+
<table
|
|
1424
|
+
class="pf-c-table pf-m-compact pf-m-grid-md"
|
|
1425
|
+
role="grid"
|
|
1426
|
+
aria-label="This is a simple table"
|
|
1427
|
+
id="table-expandable-nested-table-table-basic"
|
|
1428
|
+
>
|
|
1429
|
+
<thead>
|
|
1430
|
+
<tr role="row">
|
|
1431
|
+
<th role="columnheader" scope="col">Repositories</th>
|
|
1432
|
+
<th role="columnheader" scope="col">Branches</th>
|
|
1433
|
+
<th role="columnheader" scope="col">Pull requests</th>
|
|
1434
|
+
<th role="columnheader" scope="col">Workspaces</th>
|
|
1435
|
+
<th role="columnheader" scope="col">Last commit</th>
|
|
1436
|
+
</tr>
|
|
1437
|
+
</thead>
|
|
1438
|
+
|
|
1439
|
+
<tbody role="rowgroup">
|
|
1440
|
+
<tr role="row">
|
|
1441
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
1442
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1443
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1444
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1445
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1446
|
+
</tr>
|
|
1447
|
+
|
|
1448
|
+
<tr role="row">
|
|
1449
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
1450
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1451
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1452
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1453
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1454
|
+
</tr>
|
|
1455
|
+
|
|
1456
|
+
<tr role="row">
|
|
1457
|
+
<td role="cell" data-label="Repository name">Repository 3</td>
|
|
1458
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1459
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1460
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1461
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1462
|
+
</tr>
|
|
1463
|
+
|
|
1464
|
+
<tr role="row">
|
|
1465
|
+
<td role="cell" data-label="Repository name">Repository 4</td>
|
|
1466
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1467
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1468
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1469
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1470
|
+
</tr>
|
|
1471
|
+
</tbody>
|
|
1472
|
+
</table>
|
|
1473
|
+
</div>
|
|
1474
|
+
</td>
|
|
1475
|
+
</tr>
|
|
1476
|
+
</tbody>
|
|
1477
|
+
|
|
1478
|
+
<tbody role="rowgroup">
|
|
1479
|
+
<tr role="row">
|
|
1480
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1481
|
+
<button
|
|
1482
|
+
class="pf-c-button pf-m-plain"
|
|
1483
|
+
aria-labelledby="table-expandable-nested-table-node2 table-expandable-nested-table-expandable-toggle2"
|
|
1484
|
+
id="table-expandable-nested-table-expandable-toggle2"
|
|
1485
|
+
aria-label="Details"
|
|
1486
|
+
aria-controls="table-expandable-nested-table-content2"
|
|
1487
|
+
>
|
|
1488
|
+
<div class="pf-c-table__toggle-icon">
|
|
1489
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1490
|
+
</div>
|
|
1491
|
+
</button>
|
|
1492
|
+
</td>
|
|
1493
|
+
|
|
1494
|
+
<td class="pf-c-table__check" role="cell">
|
|
1495
|
+
<input
|
|
1496
|
+
type="checkbox"
|
|
1497
|
+
name="table-expandable-nested-table-checkrow2"
|
|
1498
|
+
aria-labelledby="table-expandable-nested-table-node2"
|
|
1499
|
+
/>
|
|
1500
|
+
</td>
|
|
1501
|
+
<th role="columnheader" data-label="Repository name">
|
|
1502
|
+
<div>
|
|
1503
|
+
<div id="table-expandable-nested-table-node2">Node 2</div>
|
|
1504
|
+
<a href="#">siemur/test-space</a>
|
|
1505
|
+
</div>
|
|
1506
|
+
</th>
|
|
1507
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1508
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1509
|
+
<td role="cell" data-label="Action">
|
|
1510
|
+
<a href="#">Link 2</a>
|
|
1511
|
+
</td>
|
|
1512
|
+
<td class="pf-c-table__action" role="cell">
|
|
1513
|
+
<div class="pf-c-dropdown">
|
|
1514
|
+
<button
|
|
1515
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1516
|
+
id="table-expandable-nested-table-dropdown-kebab-2-button"
|
|
1517
|
+
aria-expanded="false"
|
|
1518
|
+
type="button"
|
|
1519
|
+
aria-label="Actions"
|
|
1520
|
+
>
|
|
1521
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1522
|
+
</button>
|
|
1523
|
+
<ul
|
|
1524
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1525
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-2-button"
|
|
1526
|
+
hidden
|
|
1527
|
+
>
|
|
1528
|
+
<li>
|
|
1529
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1530
|
+
</li>
|
|
1531
|
+
<li>
|
|
1532
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1533
|
+
</li>
|
|
1534
|
+
<li>
|
|
1535
|
+
<a
|
|
1536
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1537
|
+
href="#"
|
|
1538
|
+
aria-disabled="true"
|
|
1539
|
+
tabindex="-1"
|
|
1540
|
+
>Disabled link</a>
|
|
1541
|
+
</li>
|
|
1542
|
+
<li>
|
|
1543
|
+
<button
|
|
1544
|
+
class="pf-c-dropdown__menu-item"
|
|
1545
|
+
type="button"
|
|
1546
|
+
disabled
|
|
1547
|
+
>Disabled action</button>
|
|
1548
|
+
</li>
|
|
1549
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1550
|
+
<li>
|
|
1551
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1552
|
+
</li>
|
|
1553
|
+
</ul>
|
|
1554
|
+
</div>
|
|
1555
|
+
</td>
|
|
1556
|
+
</tr>
|
|
1557
|
+
|
|
1558
|
+
<tr class="pf-c-table__expandable-row" role="row">
|
|
1559
|
+
<td
|
|
1560
|
+
class
|
|
1561
|
+
role="cell"
|
|
1562
|
+
colspan="7"
|
|
1563
|
+
id="table-expandable-nested-table-content2"
|
|
1564
|
+
>
|
|
1565
|
+
<div
|
|
1566
|
+
class="pf-c-table__expandable-row-content"
|
|
1567
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
|
1568
|
+
</td>
|
|
1569
|
+
</tr>
|
|
1570
|
+
</tbody>
|
|
1571
|
+
|
|
1572
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1573
|
+
<tr role="row">
|
|
1574
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1575
|
+
<button
|
|
1576
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
1577
|
+
aria-labelledby="table-expandable-nested-table-node3 table-expandable-nested-table-expandable-toggle3"
|
|
1578
|
+
id="table-expandable-nested-table-expandable-toggle3"
|
|
1579
|
+
aria-label="Details"
|
|
1580
|
+
aria-controls="table-expandable-nested-table-content3"
|
|
1581
|
+
aria-expanded="true"
|
|
1582
|
+
>
|
|
1583
|
+
<div class="pf-c-table__toggle-icon">
|
|
1584
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1585
|
+
</div>
|
|
1586
|
+
</button>
|
|
1587
|
+
</td>
|
|
1588
|
+
|
|
1589
|
+
<td class="pf-c-table__check" role="cell">
|
|
1590
|
+
<input
|
|
1591
|
+
type="checkbox"
|
|
1592
|
+
name="table-expandable-nested-table-checkrow3"
|
|
1593
|
+
aria-labelledby="table-expandable-nested-table-node3"
|
|
1594
|
+
/>
|
|
1595
|
+
</td>
|
|
1596
|
+
<th role="columnheader" data-label="Repository name">
|
|
1597
|
+
<div>
|
|
1598
|
+
<div id="table-expandable-nested-table-node3">Node 3</div>
|
|
1599
|
+
<a href="#">siemur/test-space</a>
|
|
1600
|
+
</div>
|
|
1601
|
+
</th>
|
|
1602
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1603
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1604
|
+
<td role="cell" data-label="Action">
|
|
1605
|
+
<a href="#">Link 3</a>
|
|
1606
|
+
</td>
|
|
1607
|
+
<td class="pf-c-table__action" role="cell">
|
|
1608
|
+
<div class="pf-c-dropdown">
|
|
1609
|
+
<button
|
|
1610
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1611
|
+
id="table-expandable-nested-table-dropdown-kebab-3-button"
|
|
1612
|
+
aria-expanded="false"
|
|
1613
|
+
type="button"
|
|
1614
|
+
aria-label="Actions"
|
|
1615
|
+
>
|
|
1616
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1617
|
+
</button>
|
|
1618
|
+
<ul
|
|
1619
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1620
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-3-button"
|
|
1621
|
+
hidden
|
|
1622
|
+
>
|
|
1623
|
+
<li>
|
|
1624
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1625
|
+
</li>
|
|
1626
|
+
<li>
|
|
1627
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1628
|
+
</li>
|
|
1629
|
+
<li>
|
|
1630
|
+
<a
|
|
1631
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1632
|
+
href="#"
|
|
1633
|
+
aria-disabled="true"
|
|
1634
|
+
tabindex="-1"
|
|
1635
|
+
>Disabled link</a>
|
|
1636
|
+
</li>
|
|
1637
|
+
<li>
|
|
1638
|
+
<button
|
|
1639
|
+
class="pf-c-dropdown__menu-item"
|
|
1640
|
+
type="button"
|
|
1641
|
+
disabled
|
|
1642
|
+
>Disabled action</button>
|
|
1643
|
+
</li>
|
|
1644
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1645
|
+
<li>
|
|
1646
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1647
|
+
</li>
|
|
1648
|
+
</ul>
|
|
1649
|
+
</div>
|
|
1650
|
+
</td>
|
|
1651
|
+
</tr>
|
|
1652
|
+
|
|
1653
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
1654
|
+
<td
|
|
1655
|
+
class
|
|
1656
|
+
role="cell"
|
|
1657
|
+
colspan="7"
|
|
1658
|
+
id="table-expandable-nested-table-content3"
|
|
1659
|
+
>
|
|
1660
|
+
<div
|
|
1661
|
+
class="pf-c-table__expandable-row-content"
|
|
1662
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
|
1663
|
+
</td>
|
|
1664
|
+
</tr>
|
|
1665
|
+
</tbody>
|
|
1666
|
+
|
|
1667
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1668
|
+
<tr role="row">
|
|
1669
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1670
|
+
<button
|
|
1671
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
1672
|
+
aria-labelledby="table-expandable-nested-table-node4 table-expandable-nested-table-expandable-toggle4"
|
|
1673
|
+
id="table-expandable-nested-table-expandable-toggle4"
|
|
1674
|
+
aria-label="Details"
|
|
1675
|
+
aria-controls="table-expandable-nested-table-content4"
|
|
1676
|
+
aria-expanded="true"
|
|
1677
|
+
>
|
|
1678
|
+
<div class="pf-c-table__toggle-icon">
|
|
1679
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1680
|
+
</div>
|
|
1681
|
+
</button>
|
|
1682
|
+
</td>
|
|
1683
|
+
|
|
1684
|
+
<td class="pf-c-table__check" role="cell">
|
|
1685
|
+
<input
|
|
1686
|
+
type="checkbox"
|
|
1687
|
+
name="table-expandable-nested-table-checkrow4"
|
|
1688
|
+
aria-labelledby="table-expandable-nested-table-node4"
|
|
1689
|
+
/>
|
|
1690
|
+
</td>
|
|
1691
|
+
<th role="columnheader" data-label="Repository name">
|
|
1692
|
+
<div>
|
|
1693
|
+
<div id="table-expandable-nested-table-node4">Node 4</div>
|
|
1694
|
+
<a href="#">siemur/test-space</a>
|
|
1695
|
+
</div>
|
|
1696
|
+
</th>
|
|
1697
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1698
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1699
|
+
<td role="cell" data-label="Action">
|
|
1700
|
+
<a href="#">Link 4</a>
|
|
1701
|
+
</td>
|
|
1702
|
+
<td class="pf-c-table__action" role="cell">
|
|
1703
|
+
<div class="pf-c-dropdown">
|
|
1704
|
+
<button
|
|
1705
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1706
|
+
id="table-expandable-nested-table-dropdown-kebab-4-button"
|
|
1707
|
+
aria-expanded="false"
|
|
1708
|
+
type="button"
|
|
1709
|
+
aria-label="Actions"
|
|
1710
|
+
>
|
|
1711
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1712
|
+
</button>
|
|
1713
|
+
<ul
|
|
1714
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1715
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-4-button"
|
|
1716
|
+
hidden
|
|
1717
|
+
>
|
|
1718
|
+
<li>
|
|
1719
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1720
|
+
</li>
|
|
1721
|
+
<li>
|
|
1722
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1723
|
+
</li>
|
|
1724
|
+
<li>
|
|
1725
|
+
<a
|
|
1726
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1727
|
+
href="#"
|
|
1728
|
+
aria-disabled="true"
|
|
1729
|
+
tabindex="-1"
|
|
1730
|
+
>Disabled link</a>
|
|
1731
|
+
</li>
|
|
1732
|
+
<li>
|
|
1733
|
+
<button
|
|
1734
|
+
class="pf-c-dropdown__menu-item"
|
|
1735
|
+
type="button"
|
|
1736
|
+
disabled
|
|
1737
|
+
>Disabled action</button>
|
|
1738
|
+
</li>
|
|
1739
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1740
|
+
<li>
|
|
1741
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1742
|
+
</li>
|
|
1743
|
+
</ul>
|
|
1744
|
+
</div>
|
|
1745
|
+
</td>
|
|
1746
|
+
</tr>
|
|
1747
|
+
|
|
1748
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
1749
|
+
<td
|
|
1750
|
+
class="pf-m-no-padding"
|
|
1751
|
+
role="cell"
|
|
1752
|
+
colspan="7"
|
|
1753
|
+
id="table-expandable-nested-table-content4"
|
|
1754
|
+
>
|
|
1755
|
+
<div
|
|
1756
|
+
class="pf-c-table__expandable-row-content"
|
|
1757
|
+
>Expandable row content has no padding.</div>
|
|
1758
|
+
</td>
|
|
1759
|
+
</tr>
|
|
1760
|
+
</tbody>
|
|
1761
|
+
</table>
|
|
1762
|
+
|
|
1763
|
+
```
|
|
1764
|
+
|
|
1254
1765
|
Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.pf-c-table__expandable-row-content`. For no padding add `.pf-m-no-padding` to `.pf-c-table__expandable-row` > `<td>`
|
|
1255
1766
|
|
|
1256
1767
|
### Expandable accessibility
|
|
@@ -18514,6 +19025,8 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
|
|
|
18514
19025
|
|
|
18515
19026
|
### Width modifiers usage
|
|
18516
19027
|
|
|
19028
|
+
Width modifiers control the width of the columns. To control the responsive behavior of the table at different screen widths, see [responsive table behavior](#responsive-table-behavior).
|
|
19029
|
+
|
|
18517
19030
|
| Class | Applied to | Outcome |
|
|
18518
19031
|
| --------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |
|
|
18519
19032
|
| `.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]` | `<th>`, `<td>` | Percentage based modifier for `th` and `td` widths. **Recommended for sortable title cell** |
|
|
@@ -18645,19 +19158,11 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
|
|
|
18645
19158
|
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at a given breakpoint, or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
|
|
18646
19159
|
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at a given breakpoint. |
|
|
18647
19160
|
|
|
18648
|
-
##
|
|
19161
|
+
## Text control modifiers
|
|
18649
19162
|
|
|
18650
19163
|
To better control table cell behavior, PatternFly provides a series of modifiers to help contextually control layout. By default, `thead` cells are set to truncate, whereas `tbody` cells are set to wrap. Both `th` and `td` cells use a set of shared css properties mapped to customizable css variable values. Because only the shared css variables are changed by the modifier selector and not the properties, the modifier can be applied to any parent element up until `.pf-c-table` itself [`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`].
|
|
18651
19164
|
|
|
18652
|
-
|
|
18653
|
-
| ------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
18654
|
-
| `.pf-m-wrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets table cell content to wrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>tbody</code> cells. |
|
|
18655
|
-
| `.pf-m-truncate` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets text to truncate based on a minimum width and available space adjacent table cells. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>thead</code> cells. |
|
|
18656
|
-
| `.pf-m-nowrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Unsets min/max width and sets whitespace to nowrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is specifically beneficial for cell's whose <code>thead th</code> cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents. |
|
|
18657
|
-
| `.pf-m-fit-content` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Fit column width to cell content. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. |
|
|
18658
|
-
| `.pf-m-break-word` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Breaks long strings wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. |
|
|
18659
|
-
|
|
18660
|
-
### Controlling text example
|
|
19165
|
+
### Text control example
|
|
18661
19166
|
|
|
18662
19167
|
```html
|
|
18663
19168
|
<table
|
|
@@ -18720,7 +19225,7 @@ To better control table cell behavior, PatternFly provides a series of modifiers
|
|
|
18720
19225
|
|
|
18721
19226
|
By default, truncation and wrapping settings do not affect the grid layout, but text will fallback gracefully by passively wrapping long strings. Truncation and wrapping settings will persist with the addition of a `.pf-c-table__text` wrapper on table cell content. In addition to `.pf-c-table__text`, all PatternFly layouts can be used in table cells and contain table text elements.
|
|
18722
19227
|
|
|
18723
|
-
###
|
|
19228
|
+
### Text control using the table text element example
|
|
18724
19229
|
|
|
18725
19230
|
```html
|
|
18726
19231
|
<table
|
|
@@ -18932,24 +19437,9 @@ By default, truncation and wrapping settings do not affect the grid layout, but
|
|
|
18932
19437
|
|
|
18933
19438
|
```
|
|
18934
19439
|
|
|
18935
|
-
###
|
|
18936
|
-
|
|
18937
|
-
| Class | Applied to | Outcome |
|
|
18938
|
-
| -------------------- | ------------------------------------------------------- | --------------------------------------------- |
|
|
18939
|
-
| `.pf-c-table__text` | `th > *`, `td > *` | Initiates a table text element. |
|
|
18940
|
-
| `.pf-m-truncate` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to truncate. |
|
|
18941
|
-
| `.pf-m-nowrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to not wrap. |
|
|
18942
|
-
| `.pf-m-wrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to wrap. |
|
|
18943
|
-
| `.pf-m-fit-content` | `thead`, `tr`, `th`, `.pf-c-table__text` | Modifies `th` to fit its contents. |
|
|
18944
|
-
| `.pf-m-break-word` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text strings to break. |
|
|
18945
|
-
| `.pf-m-border-right` | `<th>`, `<td>` | Modifies a table cell to show a right border. |
|
|
18946
|
-
| `.pf-m-border-left` | `<th>`, `<td>` | Modifies a table cell to show a left border. |
|
|
19440
|
+
### Table with long strings in the content
|
|
18947
19441
|
|
|
18948
|
-
|
|
18949
|
-
|
|
18950
|
-
### th truncation
|
|
18951
|
-
|
|
18952
|
-
Long strings in table cells will push content. Add a width modifier to `thead th` to limit string length or add `.pf-m-truncate` to `tbody td`.
|
|
19442
|
+
Long strings in table cells will push that column wider and possible take from other columns. This can cause content or headers to be truncated.
|
|
18953
19443
|
|
|
18954
19444
|
```html
|
|
18955
19445
|
<div class="pf-c-tooltip pf-m-top" role="tooltip">
|
|
@@ -19008,6 +19498,8 @@ Long strings in table cells will push content. Add a width modifier to `thead th
|
|
|
19008
19498
|
|
|
19009
19499
|
### Width constrained
|
|
19010
19500
|
|
|
19501
|
+
Add a [width modifier](#width-modifiers) to `thead th` to limit string length or add `.pf-m-truncate` to `tbody td`.
|
|
19502
|
+
|
|
19011
19503
|
```html
|
|
19012
19504
|
<table
|
|
19013
19505
|
class="pf-c-table pf-m-grid-md"
|
|
@@ -19060,6 +19552,19 @@ Long strings in table cells will push content. Add a width modifier to `thead th
|
|
|
19060
19552
|
|
|
19061
19553
|
```
|
|
19062
19554
|
|
|
19555
|
+
### Text control modifiers usage
|
|
19556
|
+
|
|
19557
|
+
| Class | Applied to | Outcome |
|
|
19558
|
+
| ------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19559
|
+
| `.pf-c-table__text` | `th > *`, `td > *` | Initiates a table text element. |
|
|
19560
|
+
| `.pf-m-wrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets table cell content to wrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>tbody</code> cells. |
|
|
19561
|
+
| `.pf-m-truncate` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets text to truncate based on a minimum width and available space adjacent table cells. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>thead</code> cells. |
|
|
19562
|
+
| `.pf-m-nowrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Unsets min/max width and sets whitespace to nowrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is specifically beneficial for cell's whose <code>thead th</code> cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents. |
|
|
19563
|
+
| `.pf-m-fit-content` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Fit column width to cell content. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. |
|
|
19564
|
+
| `.pf-m-break-word` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Breaks long strings to break wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. |
|
|
19565
|
+
|
|
19566
|
+
## Sticky table modifiers
|
|
19567
|
+
|
|
19063
19568
|
### Sticky header
|
|
19064
19569
|
|
|
19065
19570
|
```html
|
|
@@ -20734,15 +21239,18 @@ Long strings in table cells will push content. Add a width modifier to `thead th
|
|
|
20734
21239
|
|
|
20735
21240
|
```
|
|
20736
21241
|
|
|
20737
|
-
### Sticky
|
|
21242
|
+
### Sticky table usage
|
|
20738
21243
|
|
|
20739
21244
|
For sticky columns to function correctly, the parent table's width must be controlled with `.pf-c-scroll-inner-wrapper`. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (`.pf-c-scroll-outer-wrapper` and `.pf-c-scroll-inner-wrapper`)
|
|
20740
21245
|
|
|
20741
|
-
| Class | Applied to | Outcome
|
|
20742
|
-
| ---------------------------- | -------------- |
|
|
20743
|
-
| `.pf-
|
|
20744
|
-
| `.pf-c-scroll-
|
|
20745
|
-
| `.pf-c-
|
|
21246
|
+
| Class | Applied to | Outcome |
|
|
21247
|
+
| ---------------------------- | -------------- | ---------------------------------------------------------------------------- |
|
|
21248
|
+
| `.pf-m-sticky-header` | `.pf-c-table` | Makes the table cells in `<thead>` sticky to the top of the table on scroll. |
|
|
21249
|
+
| `.pf-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
|
|
21250
|
+
| `.pf-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
|
|
21251
|
+
| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell. |
|
|
21252
|
+
|
|
21253
|
+
## Nested column headers
|
|
20746
21254
|
|
|
20747
21255
|
### Nested column headers and expandable rows
|
|
20748
21256
|
|
|
@@ -21354,6 +21862,14 @@ For sticky columns to function correctly, the parent table's width must be contr
|
|
|
21354
21862
|
|
|
21355
21863
|
```
|
|
21356
21864
|
|
|
21865
|
+
### Nested column header modifier usage
|
|
21866
|
+
|
|
21867
|
+
| Class | Applied to | Outcome |
|
|
21868
|
+
| ---------------------------- | -------------- | ------------------------------------------------------ |
|
|
21869
|
+
| `.pf-m-nested-column-header` | `<thead>` | Modifies a table header to handle nested header cells. |
|
|
21870
|
+
| `.pf-m-border-right` | `<th>`, `<td>` | Modifies a table cell to show a right border. |
|
|
21871
|
+
| `.pf-m-border-left` | `<th>`, `<td>` | Modifies a table cell to show a left border. |
|
|
21872
|
+
|
|
21357
21873
|
## Favorites
|
|
21358
21874
|
|
|
21359
21875
|
### Favorites examples
|
|
@@ -22014,11 +22530,3 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
|
|
|
22014
22530
|
- One action button, positioned in the last cell of a non-expandable row.
|
|
22015
22531
|
- Tabular data.
|
|
22016
22532
|
- Compact presentation modifier (not compatible with expandable table).
|
|
22017
|
-
|
|
22018
|
-
### Responsive layout modifiers
|
|
22019
|
-
|
|
22020
|
-
| Class | Applied to | Outcome |
|
|
22021
|
-
| ------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
22022
|
-
| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at suffixed breakpoint. |
|
|
22023
|
-
| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
|
|
22024
|
-
| `.pf-m-sticky-header` | `.pf-c-table` | Makes the table cells in `<thead>` sticky to the top of the table on scroll. |
|