@patternfly/patternfly 4.157.1 → 4.159.2
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/README.md +2 -2
- package/RELEASE-NOTES.md +30 -0
- package/components/Dropdown/dropdown.css +46 -11
- package/components/Dropdown/dropdown.scss +60 -11
- package/components/Menu/menu.css +84 -0
- package/components/Menu/menu.scss +109 -0
- package/components/MenuToggle/menu-toggle.css +48 -1
- package/components/MenuToggle/menu-toggle.scss +62 -1
- package/components/Nav/nav.css +3 -3
- package/components/Nav/nav.scss +2 -1
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/docs/components/Dropdown/examples/Dropdown.css +1 -0
- package/docs/components/Dropdown/examples/Dropdown.md +94 -0
- package/docs/components/Menu/examples/Menu.md +1 -0
- package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
- package/docs/components/Nav/examples/Navigation.css +12 -4
- package/docs/components/Nav/examples/Navigation.md +51 -232
- package/docs/components/Table/examples/Table.md +2168 -76
- package/docs/demos/Button/examples/Button.md +176 -0
- package/docs/demos/Table/examples/Table.md +3734 -95
- package/package.json +1 -1
- package/patternfly-no-reset.css +183 -17
- package/patternfly.css +183 -17
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1251,44 +1251,27 @@ When header cells are empty or they contain interactive elements, `<th>` should
|
|
|
1251
1251
|
|
|
1252
1252
|
```
|
|
1253
1253
|
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
### Expandable accessibility
|
|
1257
|
-
|
|
1258
|
-
| Attribute | Applied to | Outcome |
|
|
1259
|
-
| ----------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
|
|
1260
|
-
| `hidden` | `.pf-c-table__expandable-row` | Indicates that the expandable content is hidden. **Required** |
|
|
1261
|
-
| `aria-expanded="true"` | `.pf-c-table__toggle` > `.pf-c-button` | Indicates that the row is visible. **Required** |
|
|
1262
|
-
| `aria-label="[descriptive text]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required** |
|
|
1263
|
-
| `aria-labelledby="[title_cell_id] [button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible description for toggle button. **Required** |
|
|
1264
|
-
| `id="[button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required** |
|
|
1265
|
-
| `aria-controls="[id of element the button controls]"` | `.pf-c-table__toggle` > `.pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
1266
|
-
|
|
1267
|
-
### Expandable usage
|
|
1268
|
-
|
|
1269
|
-
| Class | Applied to | Outcome |
|
|
1270
|
-
| ------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------- |
|
|
1271
|
-
| `.pf-c-table__toggle-icon` | `<span>` | Initiates the table toggle icon wrapper. |
|
|
1272
|
-
| `.pf-c-table__expandable-row` | `<tr>` | Initiates an expandable row. |
|
|
1273
|
-
| `.pf-c-table__expandable-row-content` | `.pf-c-table__expandable-row` > `<td>` > `<div>` | Initiates an expandable row content wrapper. |
|
|
1274
|
-
| `.pf-m-expanded` | `.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row` | Modifies for expanded state. |
|
|
1275
|
-
| `.pf-m-no-padding` | `.pf-c-table__expandable-row` > `<td>` | Modifies the expandable row to have no padding. |
|
|
1276
|
-
|
|
1277
|
-
## Compound expansion
|
|
1278
|
-
|
|
1279
|
-
### Compound expansion example
|
|
1254
|
+
### Expandable with nested table example
|
|
1280
1255
|
|
|
1281
1256
|
```html
|
|
1282
1257
|
<table
|
|
1283
|
-
class="pf-c-table pf-m-expandable pf-m-grid-
|
|
1258
|
+
class="pf-c-table pf-m-expandable pf-m-grid-lg"
|
|
1284
1259
|
role="grid"
|
|
1285
|
-
aria-label="
|
|
1286
|
-
id="table-
|
|
1260
|
+
aria-label="Expandable with nested table example"
|
|
1261
|
+
id="table-expandable-nested-table"
|
|
1287
1262
|
>
|
|
1288
1263
|
<thead>
|
|
1289
1264
|
<tr role="row">
|
|
1265
|
+
<td></td>
|
|
1266
|
+
<td class="pf-c-table__check" role="cell">
|
|
1267
|
+
<input
|
|
1268
|
+
type="checkbox"
|
|
1269
|
+
name="table-expandable-nested-table-check-all"
|
|
1270
|
+
aria-label="Select all rows"
|
|
1271
|
+
/>
|
|
1272
|
+
</td>
|
|
1290
1273
|
<th
|
|
1291
|
-
class="pf-c-table__sort pf-m-selected"
|
|
1274
|
+
class="pf-m-width-30 pf-c-table__sort pf-m-selected"
|
|
1292
1275
|
role="columnheader"
|
|
1293
1276
|
aria-sort="ascending"
|
|
1294
1277
|
scope="col"
|
|
@@ -1332,64 +1315,289 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
|
|
|
1332
1315
|
</div>
|
|
1333
1316
|
</button>
|
|
1334
1317
|
</th>
|
|
1335
|
-
<th role="columnheader" scope="col">Workspaces</th>
|
|
1336
|
-
<th role="columnheader" scope="col">Last commit</th>
|
|
1337
1318
|
<td></td>
|
|
1338
1319
|
<td></td>
|
|
1339
1320
|
</tr>
|
|
1340
1321
|
</thead>
|
|
1341
1322
|
|
|
1342
1323
|
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1343
|
-
<tr
|
|
1344
|
-
<td
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1324
|
+
<tr role="row">
|
|
1325
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1326
|
+
<button
|
|
1327
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
1328
|
+
aria-labelledby="table-expandable-nested-table-node1 table-expandable-nested-table-expandable-toggle1"
|
|
1329
|
+
id="table-expandable-nested-table-expandable-toggle1"
|
|
1330
|
+
aria-label="Details"
|
|
1331
|
+
aria-controls="table-expandable-nested-table-content1"
|
|
1332
|
+
aria-expanded="true"
|
|
1333
|
+
>
|
|
1334
|
+
<div class="pf-c-table__toggle-icon">
|
|
1335
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1336
|
+
</div>
|
|
1353
1337
|
</button>
|
|
1354
1338
|
</td>
|
|
1339
|
+
|
|
1340
|
+
<td class="pf-c-table__check" role="cell">
|
|
1341
|
+
<input
|
|
1342
|
+
type="checkbox"
|
|
1343
|
+
name="table-expandable-nested-table-checkrow1"
|
|
1344
|
+
aria-labelledby="table-expandable-nested-table-node1"
|
|
1345
|
+
/>
|
|
1346
|
+
</td>
|
|
1347
|
+
<th role="columnheader" data-label="Repository name">
|
|
1348
|
+
<div>
|
|
1349
|
+
<div id="table-expandable-nested-table-node1">Node 1</div>
|
|
1350
|
+
<a href="#">siemur/test-space</a>
|
|
1351
|
+
</div>
|
|
1352
|
+
</th>
|
|
1353
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1354
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1355
|
+
<td role="cell" data-label="Action">
|
|
1356
|
+
<a href="#">Link 1</a>
|
|
1357
|
+
</td>
|
|
1358
|
+
<td class="pf-c-table__action" role="cell">
|
|
1359
|
+
<div class="pf-c-dropdown">
|
|
1360
|
+
<button
|
|
1361
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1362
|
+
id="table-expandable-nested-table-dropdown-kebab-1-button"
|
|
1363
|
+
aria-expanded="false"
|
|
1364
|
+
type="button"
|
|
1365
|
+
aria-label="Actions"
|
|
1366
|
+
>
|
|
1367
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1368
|
+
</button>
|
|
1369
|
+
<ul
|
|
1370
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1371
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-1-button"
|
|
1372
|
+
hidden
|
|
1373
|
+
>
|
|
1374
|
+
<li>
|
|
1375
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1376
|
+
</li>
|
|
1377
|
+
<li>
|
|
1378
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1379
|
+
</li>
|
|
1380
|
+
<li>
|
|
1381
|
+
<a
|
|
1382
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1383
|
+
href="#"
|
|
1384
|
+
aria-disabled="true"
|
|
1385
|
+
tabindex="-1"
|
|
1386
|
+
>Disabled link</a>
|
|
1387
|
+
</li>
|
|
1388
|
+
<li>
|
|
1389
|
+
<button
|
|
1390
|
+
class="pf-c-dropdown__menu-item"
|
|
1391
|
+
type="button"
|
|
1392
|
+
disabled
|
|
1393
|
+
>Disabled action</button>
|
|
1394
|
+
</li>
|
|
1395
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1396
|
+
<li>
|
|
1397
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1398
|
+
</li>
|
|
1399
|
+
</ul>
|
|
1400
|
+
</div>
|
|
1401
|
+
</td>
|
|
1402
|
+
</tr>
|
|
1403
|
+
|
|
1404
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
1355
1405
|
<td
|
|
1356
|
-
class
|
|
1406
|
+
class
|
|
1357
1407
|
role="cell"
|
|
1358
|
-
|
|
1408
|
+
colspan="7"
|
|
1409
|
+
id="table-expandable-nested-table-content1"
|
|
1359
1410
|
>
|
|
1360
|
-
<
|
|
1361
|
-
<
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1411
|
+
<div class="pf-c-table__expandable-row-content">
|
|
1412
|
+
<table
|
|
1413
|
+
class="pf-c-table pf-m-compact pf-m-grid-md"
|
|
1414
|
+
role="grid"
|
|
1415
|
+
aria-label="This is a simple table"
|
|
1416
|
+
id="table-expandable-nested-table-table-basic"
|
|
1417
|
+
>
|
|
1418
|
+
<thead>
|
|
1419
|
+
<tr role="row">
|
|
1420
|
+
<th role="columnheader" scope="col">Repositories</th>
|
|
1421
|
+
<th role="columnheader" scope="col">Branches</th>
|
|
1422
|
+
<th role="columnheader" scope="col">Pull requests</th>
|
|
1423
|
+
<th role="columnheader" scope="col">Workspaces</th>
|
|
1424
|
+
<th role="columnheader" scope="col">Last commit</th>
|
|
1425
|
+
</tr>
|
|
1426
|
+
</thead>
|
|
1427
|
+
|
|
1428
|
+
<tbody role="rowgroup">
|
|
1429
|
+
<tr role="row">
|
|
1430
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
1431
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1432
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1433
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1434
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1435
|
+
</tr>
|
|
1436
|
+
|
|
1437
|
+
<tr role="row">
|
|
1438
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
1439
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1440
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1441
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1442
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1443
|
+
</tr>
|
|
1444
|
+
|
|
1445
|
+
<tr role="row">
|
|
1446
|
+
<td role="cell" data-label="Repository name">Repository 3</td>
|
|
1447
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1448
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1449
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1450
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1451
|
+
</tr>
|
|
1452
|
+
|
|
1453
|
+
<tr role="row">
|
|
1454
|
+
<td role="cell" data-label="Repository name">Repository 4</td>
|
|
1455
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1456
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1457
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
1458
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
1459
|
+
</tr>
|
|
1460
|
+
</tbody>
|
|
1461
|
+
</table>
|
|
1462
|
+
</div>
|
|
1463
|
+
</td>
|
|
1464
|
+
</tr>
|
|
1465
|
+
</tbody>
|
|
1466
|
+
|
|
1467
|
+
<tbody role="rowgroup">
|
|
1468
|
+
<tr role="row">
|
|
1469
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1470
|
+
<button
|
|
1471
|
+
class="pf-c-button pf-m-plain"
|
|
1472
|
+
aria-labelledby="table-expandable-nested-table-node2 table-expandable-nested-table-expandable-toggle2"
|
|
1473
|
+
id="table-expandable-nested-table-expandable-toggle2"
|
|
1474
|
+
aria-label="Details"
|
|
1475
|
+
aria-controls="table-expandable-nested-table-content2"
|
|
1476
|
+
>
|
|
1477
|
+
<div class="pf-c-table__toggle-icon">
|
|
1478
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1479
|
+
</div>
|
|
1365
1480
|
</button>
|
|
1366
1481
|
</td>
|
|
1482
|
+
|
|
1483
|
+
<td class="pf-c-table__check" role="cell">
|
|
1484
|
+
<input
|
|
1485
|
+
type="checkbox"
|
|
1486
|
+
name="table-expandable-nested-table-checkrow2"
|
|
1487
|
+
aria-labelledby="table-expandable-nested-table-node2"
|
|
1488
|
+
/>
|
|
1489
|
+
</td>
|
|
1490
|
+
<th role="columnheader" data-label="Repository name">
|
|
1491
|
+
<div>
|
|
1492
|
+
<div id="table-expandable-nested-table-node2">Node 2</div>
|
|
1493
|
+
<a href="#">siemur/test-space</a>
|
|
1494
|
+
</div>
|
|
1495
|
+
</th>
|
|
1496
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1497
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1498
|
+
<td role="cell" data-label="Action">
|
|
1499
|
+
<a href="#">Link 2</a>
|
|
1500
|
+
</td>
|
|
1501
|
+
<td class="pf-c-table__action" role="cell">
|
|
1502
|
+
<div class="pf-c-dropdown">
|
|
1503
|
+
<button
|
|
1504
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1505
|
+
id="table-expandable-nested-table-dropdown-kebab-2-button"
|
|
1506
|
+
aria-expanded="false"
|
|
1507
|
+
type="button"
|
|
1508
|
+
aria-label="Actions"
|
|
1509
|
+
>
|
|
1510
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1511
|
+
</button>
|
|
1512
|
+
<ul
|
|
1513
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1514
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-2-button"
|
|
1515
|
+
hidden
|
|
1516
|
+
>
|
|
1517
|
+
<li>
|
|
1518
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1519
|
+
</li>
|
|
1520
|
+
<li>
|
|
1521
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1522
|
+
</li>
|
|
1523
|
+
<li>
|
|
1524
|
+
<a
|
|
1525
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1526
|
+
href="#"
|
|
1527
|
+
aria-disabled="true"
|
|
1528
|
+
tabindex="-1"
|
|
1529
|
+
>Disabled link</a>
|
|
1530
|
+
</li>
|
|
1531
|
+
<li>
|
|
1532
|
+
<button
|
|
1533
|
+
class="pf-c-dropdown__menu-item"
|
|
1534
|
+
type="button"
|
|
1535
|
+
disabled
|
|
1536
|
+
>Disabled action</button>
|
|
1537
|
+
</li>
|
|
1538
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1539
|
+
<li>
|
|
1540
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1541
|
+
</li>
|
|
1542
|
+
</ul>
|
|
1543
|
+
</div>
|
|
1544
|
+
</td>
|
|
1545
|
+
</tr>
|
|
1546
|
+
|
|
1547
|
+
<tr class="pf-c-table__expandable-row" role="row">
|
|
1367
1548
|
<td
|
|
1368
|
-
class
|
|
1549
|
+
class
|
|
1369
1550
|
role="cell"
|
|
1370
|
-
|
|
1551
|
+
colspan="7"
|
|
1552
|
+
id="table-expandable-nested-table-content2"
|
|
1371
1553
|
>
|
|
1372
|
-
<
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1554
|
+
<div
|
|
1555
|
+
class="pf-c-table__expandable-row-content"
|
|
1556
|
+
>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>
|
|
1557
|
+
</td>
|
|
1558
|
+
</tr>
|
|
1559
|
+
</tbody>
|
|
1560
|
+
|
|
1561
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1562
|
+
<tr role="row">
|
|
1563
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1564
|
+
<button
|
|
1565
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
1566
|
+
aria-labelledby="table-expandable-nested-table-node3 table-expandable-nested-table-expandable-toggle3"
|
|
1567
|
+
id="table-expandable-nested-table-expandable-toggle3"
|
|
1568
|
+
aria-label="Details"
|
|
1569
|
+
aria-controls="table-expandable-nested-table-content3"
|
|
1570
|
+
aria-expanded="true"
|
|
1571
|
+
>
|
|
1572
|
+
<div class="pf-c-table__toggle-icon">
|
|
1573
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1574
|
+
</div>
|
|
1377
1575
|
</button>
|
|
1378
1576
|
</td>
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1577
|
+
|
|
1578
|
+
<td class="pf-c-table__check" role="cell">
|
|
1579
|
+
<input
|
|
1580
|
+
type="checkbox"
|
|
1581
|
+
name="table-expandable-nested-table-checkrow3"
|
|
1582
|
+
aria-labelledby="table-expandable-nested-table-node3"
|
|
1583
|
+
/>
|
|
1384
1584
|
</td>
|
|
1585
|
+
<th role="columnheader" data-label="Repository name">
|
|
1586
|
+
<div>
|
|
1587
|
+
<div id="table-expandable-nested-table-node3">Node 3</div>
|
|
1588
|
+
<a href="#">siemur/test-space</a>
|
|
1589
|
+
</div>
|
|
1590
|
+
</th>
|
|
1591
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1592
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1385
1593
|
<td role="cell" data-label="Action">
|
|
1386
|
-
<a href="#">
|
|
1594
|
+
<a href="#">Link 3</a>
|
|
1387
1595
|
</td>
|
|
1388
1596
|
<td class="pf-c-table__action" role="cell">
|
|
1389
1597
|
<div class="pf-c-dropdown">
|
|
1390
1598
|
<button
|
|
1391
1599
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1392
|
-
id="table-
|
|
1600
|
+
id="table-expandable-nested-table-dropdown-kebab-3-button"
|
|
1393
1601
|
aria-expanded="false"
|
|
1394
1602
|
type="button"
|
|
1395
1603
|
aria-label="Actions"
|
|
@@ -1398,7 +1606,299 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
|
|
|
1398
1606
|
</button>
|
|
1399
1607
|
<ul
|
|
1400
1608
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1401
|
-
aria-labelledby="table-
|
|
1609
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-3-button"
|
|
1610
|
+
hidden
|
|
1611
|
+
>
|
|
1612
|
+
<li>
|
|
1613
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1614
|
+
</li>
|
|
1615
|
+
<li>
|
|
1616
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1617
|
+
</li>
|
|
1618
|
+
<li>
|
|
1619
|
+
<a
|
|
1620
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1621
|
+
href="#"
|
|
1622
|
+
aria-disabled="true"
|
|
1623
|
+
tabindex="-1"
|
|
1624
|
+
>Disabled link</a>
|
|
1625
|
+
</li>
|
|
1626
|
+
<li>
|
|
1627
|
+
<button
|
|
1628
|
+
class="pf-c-dropdown__menu-item"
|
|
1629
|
+
type="button"
|
|
1630
|
+
disabled
|
|
1631
|
+
>Disabled action</button>
|
|
1632
|
+
</li>
|
|
1633
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1634
|
+
<li>
|
|
1635
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1636
|
+
</li>
|
|
1637
|
+
</ul>
|
|
1638
|
+
</div>
|
|
1639
|
+
</td>
|
|
1640
|
+
</tr>
|
|
1641
|
+
|
|
1642
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
1643
|
+
<td
|
|
1644
|
+
class
|
|
1645
|
+
role="cell"
|
|
1646
|
+
colspan="7"
|
|
1647
|
+
id="table-expandable-nested-table-content3"
|
|
1648
|
+
>
|
|
1649
|
+
<div
|
|
1650
|
+
class="pf-c-table__expandable-row-content"
|
|
1651
|
+
>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>
|
|
1652
|
+
</td>
|
|
1653
|
+
</tr>
|
|
1654
|
+
</tbody>
|
|
1655
|
+
|
|
1656
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1657
|
+
<tr role="row">
|
|
1658
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1659
|
+
<button
|
|
1660
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
1661
|
+
aria-labelledby="table-expandable-nested-table-node4 table-expandable-nested-table-expandable-toggle4"
|
|
1662
|
+
id="table-expandable-nested-table-expandable-toggle4"
|
|
1663
|
+
aria-label="Details"
|
|
1664
|
+
aria-controls="table-expandable-nested-table-content4"
|
|
1665
|
+
aria-expanded="true"
|
|
1666
|
+
>
|
|
1667
|
+
<div class="pf-c-table__toggle-icon">
|
|
1668
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1669
|
+
</div>
|
|
1670
|
+
</button>
|
|
1671
|
+
</td>
|
|
1672
|
+
|
|
1673
|
+
<td class="pf-c-table__check" role="cell">
|
|
1674
|
+
<input
|
|
1675
|
+
type="checkbox"
|
|
1676
|
+
name="table-expandable-nested-table-checkrow4"
|
|
1677
|
+
aria-labelledby="table-expandable-nested-table-node4"
|
|
1678
|
+
/>
|
|
1679
|
+
</td>
|
|
1680
|
+
<th role="columnheader" data-label="Repository name">
|
|
1681
|
+
<div>
|
|
1682
|
+
<div id="table-expandable-nested-table-node4">Node 4</div>
|
|
1683
|
+
<a href="#">siemur/test-space</a>
|
|
1684
|
+
</div>
|
|
1685
|
+
</th>
|
|
1686
|
+
<td role="cell" data-label="Branches">10</td>
|
|
1687
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
1688
|
+
<td role="cell" data-label="Action">
|
|
1689
|
+
<a href="#">Link 4</a>
|
|
1690
|
+
</td>
|
|
1691
|
+
<td class="pf-c-table__action" role="cell">
|
|
1692
|
+
<div class="pf-c-dropdown">
|
|
1693
|
+
<button
|
|
1694
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1695
|
+
id="table-expandable-nested-table-dropdown-kebab-4-button"
|
|
1696
|
+
aria-expanded="false"
|
|
1697
|
+
type="button"
|
|
1698
|
+
aria-label="Actions"
|
|
1699
|
+
>
|
|
1700
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1701
|
+
</button>
|
|
1702
|
+
<ul
|
|
1703
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1704
|
+
aria-labelledby="table-expandable-nested-table-dropdown-kebab-4-button"
|
|
1705
|
+
hidden
|
|
1706
|
+
>
|
|
1707
|
+
<li>
|
|
1708
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1709
|
+
</li>
|
|
1710
|
+
<li>
|
|
1711
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1712
|
+
</li>
|
|
1713
|
+
<li>
|
|
1714
|
+
<a
|
|
1715
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1716
|
+
href="#"
|
|
1717
|
+
aria-disabled="true"
|
|
1718
|
+
tabindex="-1"
|
|
1719
|
+
>Disabled link</a>
|
|
1720
|
+
</li>
|
|
1721
|
+
<li>
|
|
1722
|
+
<button
|
|
1723
|
+
class="pf-c-dropdown__menu-item"
|
|
1724
|
+
type="button"
|
|
1725
|
+
disabled
|
|
1726
|
+
>Disabled action</button>
|
|
1727
|
+
</li>
|
|
1728
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1729
|
+
<li>
|
|
1730
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1731
|
+
</li>
|
|
1732
|
+
</ul>
|
|
1733
|
+
</div>
|
|
1734
|
+
</td>
|
|
1735
|
+
</tr>
|
|
1736
|
+
|
|
1737
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
1738
|
+
<td
|
|
1739
|
+
class="pf-m-no-padding"
|
|
1740
|
+
role="cell"
|
|
1741
|
+
colspan="7"
|
|
1742
|
+
id="table-expandable-nested-table-content4"
|
|
1743
|
+
>
|
|
1744
|
+
<div
|
|
1745
|
+
class="pf-c-table__expandable-row-content"
|
|
1746
|
+
>Expandable row content has no padding.</div>
|
|
1747
|
+
</td>
|
|
1748
|
+
</tr>
|
|
1749
|
+
</tbody>
|
|
1750
|
+
</table>
|
|
1751
|
+
|
|
1752
|
+
```
|
|
1753
|
+
|
|
1754
|
+
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>`
|
|
1755
|
+
|
|
1756
|
+
### Expandable accessibility
|
|
1757
|
+
|
|
1758
|
+
| Attribute | Applied to | Outcome |
|
|
1759
|
+
| ----------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
|
|
1760
|
+
| `hidden` | `.pf-c-table__expandable-row` | Indicates that the expandable content is hidden. **Required** |
|
|
1761
|
+
| `aria-expanded="true"` | `.pf-c-table__toggle` > `.pf-c-button` | Indicates that the row is visible. **Required** |
|
|
1762
|
+
| `aria-label="[descriptive text]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required** |
|
|
1763
|
+
| `aria-labelledby="[title_cell_id] [button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible description for toggle button. **Required** |
|
|
1764
|
+
| `id="[button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required** |
|
|
1765
|
+
| `aria-controls="[id of element the button controls]"` | `.pf-c-table__toggle` > `.pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
1766
|
+
|
|
1767
|
+
### Expandable usage
|
|
1768
|
+
|
|
1769
|
+
| Class | Applied to | Outcome |
|
|
1770
|
+
| ------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------- |
|
|
1771
|
+
| `.pf-c-table__toggle-icon` | `<span>` | Initiates the table toggle icon wrapper. |
|
|
1772
|
+
| `.pf-c-table__expandable-row` | `<tr>` | Initiates an expandable row. |
|
|
1773
|
+
| `.pf-c-table__expandable-row-content` | `.pf-c-table__expandable-row` > `<td>` > `<div>` | Initiates an expandable row content wrapper. |
|
|
1774
|
+
| `.pf-m-expanded` | `.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row` | Modifies for expanded state. |
|
|
1775
|
+
| `.pf-m-no-padding` | `.pf-c-table__expandable-row` > `<td>` | Modifies the expandable row to have no padding. |
|
|
1776
|
+
|
|
1777
|
+
## Compound expansion
|
|
1778
|
+
|
|
1779
|
+
### Compound expansion example
|
|
1780
|
+
|
|
1781
|
+
```html
|
|
1782
|
+
<table
|
|
1783
|
+
class="pf-c-table pf-m-expandable pf-m-grid-md"
|
|
1784
|
+
role="grid"
|
|
1785
|
+
aria-label="Compound expandable table example"
|
|
1786
|
+
id="table-compound-expansion"
|
|
1787
|
+
>
|
|
1788
|
+
<thead>
|
|
1789
|
+
<tr role="row">
|
|
1790
|
+
<th
|
|
1791
|
+
class="pf-c-table__sort pf-m-selected"
|
|
1792
|
+
role="columnheader"
|
|
1793
|
+
aria-sort="ascending"
|
|
1794
|
+
scope="col"
|
|
1795
|
+
>
|
|
1796
|
+
<button class="pf-c-table__button">
|
|
1797
|
+
<div class="pf-c-table__button-content">
|
|
1798
|
+
<span class="pf-c-table__text">Repositories</span>
|
|
1799
|
+
<span class="pf-c-table__sort-indicator">
|
|
1800
|
+
<i class="fas fa-long-arrow-alt-up"></i>
|
|
1801
|
+
</span>
|
|
1802
|
+
</div>
|
|
1803
|
+
</button>
|
|
1804
|
+
</th>
|
|
1805
|
+
<th
|
|
1806
|
+
class="pf-c-table__sort"
|
|
1807
|
+
role="columnheader"
|
|
1808
|
+
aria-sort="none"
|
|
1809
|
+
scope="col"
|
|
1810
|
+
>
|
|
1811
|
+
<button class="pf-c-table__button">
|
|
1812
|
+
<div class="pf-c-table__button-content">
|
|
1813
|
+
<span class="pf-c-table__text">Branches</span>
|
|
1814
|
+
<span class="pf-c-table__sort-indicator">
|
|
1815
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
1816
|
+
</span>
|
|
1817
|
+
</div>
|
|
1818
|
+
</button>
|
|
1819
|
+
</th>
|
|
1820
|
+
<th
|
|
1821
|
+
class="pf-c-table__sort"
|
|
1822
|
+
role="columnheader"
|
|
1823
|
+
aria-sort="none"
|
|
1824
|
+
scope="col"
|
|
1825
|
+
>
|
|
1826
|
+
<button class="pf-c-table__button">
|
|
1827
|
+
<div class="pf-c-table__button-content">
|
|
1828
|
+
<span class="pf-c-table__text">Pull requests</span>
|
|
1829
|
+
<span class="pf-c-table__sort-indicator">
|
|
1830
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
1831
|
+
</span>
|
|
1832
|
+
</div>
|
|
1833
|
+
</button>
|
|
1834
|
+
</th>
|
|
1835
|
+
<th role="columnheader" scope="col">Workspaces</th>
|
|
1836
|
+
<th role="columnheader" scope="col">Last commit</th>
|
|
1837
|
+
<td></td>
|
|
1838
|
+
<td></td>
|
|
1839
|
+
</tr>
|
|
1840
|
+
</thead>
|
|
1841
|
+
|
|
1842
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
1843
|
+
<tr class="pf-c-table__control-row" role="row">
|
|
1844
|
+
<td
|
|
1845
|
+
class="pf-c-table__compound-expansion-togglepf-m-expanded pf-m-expanded"
|
|
1846
|
+
role="cell"
|
|
1847
|
+
data-label="Repositories"
|
|
1848
|
+
>
|
|
1849
|
+
<button class="pf-c-table__button">
|
|
1850
|
+
<span class="pf-c-table__text">
|
|
1851
|
+
<i class="fas fa-code-branch" aria-hidden="true"></i> 10
|
|
1852
|
+
</span>
|
|
1853
|
+
</button>
|
|
1854
|
+
</td>
|
|
1855
|
+
<td
|
|
1856
|
+
class="pf-c-table__compound-expansion-toggle"
|
|
1857
|
+
role="cell"
|
|
1858
|
+
data-label="Branches"
|
|
1859
|
+
>
|
|
1860
|
+
<button class="pf-c-table__button">
|
|
1861
|
+
<span class="pf-c-table__text">
|
|
1862
|
+
<i class="fas fa-code" aria-hidden="true"></i>
|
|
1863
|
+
234
|
|
1864
|
+
</span>
|
|
1865
|
+
</button>
|
|
1866
|
+
</td>
|
|
1867
|
+
<td
|
|
1868
|
+
class="pf-c-table__compound-expansion-toggle"
|
|
1869
|
+
role="cell"
|
|
1870
|
+
data-label="Pull requests"
|
|
1871
|
+
>
|
|
1872
|
+
<button class="pf-c-table__button">
|
|
1873
|
+
<span class="pf-c-table__text">
|
|
1874
|
+
<i class="fas fa-cube" aria-hidden="true"></i>
|
|
1875
|
+
4
|
|
1876
|
+
</span>
|
|
1877
|
+
</button>
|
|
1878
|
+
</td>
|
|
1879
|
+
<th role="columnheader" data-label="Workspaces">
|
|
1880
|
+
<a href="#">siemur/test-space</a>
|
|
1881
|
+
</th>
|
|
1882
|
+
<td role="cell" data-label="Last commit">
|
|
1883
|
+
<span>20 minutes</span>
|
|
1884
|
+
</td>
|
|
1885
|
+
<td role="cell" data-label="Action">
|
|
1886
|
+
<a href="#">Open in Github</a>
|
|
1887
|
+
</td>
|
|
1888
|
+
<td class="pf-c-table__action" role="cell">
|
|
1889
|
+
<div class="pf-c-dropdown">
|
|
1890
|
+
<button
|
|
1891
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1892
|
+
id="table-compound-expansion-dropdown-kebab-1-button"
|
|
1893
|
+
aria-expanded="false"
|
|
1894
|
+
type="button"
|
|
1895
|
+
aria-label="Actions"
|
|
1896
|
+
>
|
|
1897
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1898
|
+
</button>
|
|
1899
|
+
<ul
|
|
1900
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1901
|
+
aria-labelledby="table-compound-expansion-dropdown-kebab-1-button"
|
|
1402
1902
|
hidden
|
|
1403
1903
|
>
|
|
1404
1904
|
<li>
|
|
@@ -19118,28 +19618,1620 @@ Long strings in table cells will push content. Add a width modifier to `thead th
|
|
|
19118
19618
|
|
|
19119
19619
|
### Sticky column
|
|
19120
19620
|
|
|
19121
|
-
```
|
|
19122
|
-
<div class="pf-c-scroll-inner-wrapper">
|
|
19123
|
-
|
|
19621
|
+
```html
|
|
19622
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
19623
|
+
<table
|
|
19624
|
+
class="pf-c-table"
|
|
19625
|
+
role="grid"
|
|
19626
|
+
aria-label="This is a scrollable table"
|
|
19627
|
+
id="-table"
|
|
19628
|
+
>
|
|
19629
|
+
<thead>
|
|
19630
|
+
<tr role="row">
|
|
19631
|
+
<th
|
|
19632
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
19633
|
+
role="columnheader"
|
|
19634
|
+
aria-sort="none"
|
|
19635
|
+
data-label="Example th"
|
|
19636
|
+
scope="col"
|
|
19637
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19638
|
+
>
|
|
19639
|
+
<button class="pf-c-table__button">
|
|
19640
|
+
<div class="pf-c-table__button-content">
|
|
19641
|
+
<span class="pf-c-table__text">Fact</span>
|
|
19642
|
+
<span class="pf-c-table__sort-indicator">
|
|
19643
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19644
|
+
</span>
|
|
19645
|
+
</div>
|
|
19646
|
+
</button>
|
|
19647
|
+
</th>
|
|
19648
|
+
<th
|
|
19649
|
+
class="pf-m-truncate pf-c-table__sort"
|
|
19650
|
+
role="columnheader"
|
|
19651
|
+
aria-sort="none"
|
|
19652
|
+
data-label="Example th"
|
|
19653
|
+
scope="col"
|
|
19654
|
+
>
|
|
19655
|
+
<button class="pf-c-table__button">
|
|
19656
|
+
<div class="pf-c-table__button-content">
|
|
19657
|
+
<span class="pf-c-table__text">State</span>
|
|
19658
|
+
<span class="pf-c-table__sort-indicator">
|
|
19659
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19660
|
+
</span>
|
|
19661
|
+
</div>
|
|
19662
|
+
</button>
|
|
19663
|
+
</th>
|
|
19664
|
+
<th
|
|
19665
|
+
class="pf-m-truncate"
|
|
19666
|
+
role="columnheader"
|
|
19667
|
+
data-label="Example th"
|
|
19668
|
+
scope="col"
|
|
19669
|
+
>Header 3</th>
|
|
19670
|
+
<th
|
|
19671
|
+
class="pf-m-truncate"
|
|
19672
|
+
role="columnheader"
|
|
19673
|
+
data-label="Example th"
|
|
19674
|
+
scope="col"
|
|
19675
|
+
>Header 4</th>
|
|
19676
|
+
<th
|
|
19677
|
+
class="pf-m-truncate"
|
|
19678
|
+
role="columnheader"
|
|
19679
|
+
data-label="Example th"
|
|
19680
|
+
scope="col"
|
|
19681
|
+
>Header 5</th>
|
|
19682
|
+
<th
|
|
19683
|
+
class="pf-m-truncate"
|
|
19684
|
+
role="columnheader"
|
|
19685
|
+
data-label="Example th"
|
|
19686
|
+
scope="col"
|
|
19687
|
+
>Header 6</th>
|
|
19688
|
+
<th
|
|
19689
|
+
class="pf-m-truncate"
|
|
19690
|
+
role="columnheader"
|
|
19691
|
+
data-label="Example th"
|
|
19692
|
+
scope="col"
|
|
19693
|
+
>Header 7</th>
|
|
19694
|
+
<th
|
|
19695
|
+
class="pf-m-truncate"
|
|
19696
|
+
role="columnheader"
|
|
19697
|
+
data-label="Example th"
|
|
19698
|
+
scope="col"
|
|
19699
|
+
>Header 8</th>
|
|
19700
|
+
<th
|
|
19701
|
+
class="pf-m-truncate"
|
|
19702
|
+
role="columnheader"
|
|
19703
|
+
data-label="Example th"
|
|
19704
|
+
scope="col"
|
|
19705
|
+
>Header 9</th>
|
|
19706
|
+
</tr>
|
|
19707
|
+
</thead>
|
|
19708
|
+
|
|
19709
|
+
<tbody role="rowgroup">
|
|
19710
|
+
<tr role="row">
|
|
19711
|
+
<th
|
|
19712
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19713
|
+
role="columnheader"
|
|
19714
|
+
data-label="Example th"
|
|
19715
|
+
scope="col"
|
|
19716
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19717
|
+
>Fact 1</th>
|
|
19718
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 1</td>
|
|
19719
|
+
<td
|
|
19720
|
+
class="pf-m-nowrap"
|
|
19721
|
+
role="cell"
|
|
19722
|
+
data-label="Example td"
|
|
19723
|
+
>Test cell 1-3</td>
|
|
19724
|
+
<td
|
|
19725
|
+
class="pf-m-nowrap"
|
|
19726
|
+
role="cell"
|
|
19727
|
+
data-label="Example td"
|
|
19728
|
+
>Test cell 1-4</td>
|
|
19729
|
+
<td
|
|
19730
|
+
class="pf-m-nowrap"
|
|
19731
|
+
role="cell"
|
|
19732
|
+
data-label="Example td"
|
|
19733
|
+
>Test cell 1-5</td>
|
|
19734
|
+
<td
|
|
19735
|
+
class="pf-m-nowrap"
|
|
19736
|
+
role="cell"
|
|
19737
|
+
data-label="Example td"
|
|
19738
|
+
>Test cell 1-6</td>
|
|
19739
|
+
<td
|
|
19740
|
+
class="pf-m-nowrap"
|
|
19741
|
+
role="cell"
|
|
19742
|
+
data-label="Example td"
|
|
19743
|
+
>Test cell 1-7</td>
|
|
19744
|
+
<td
|
|
19745
|
+
class="pf-m-nowrap"
|
|
19746
|
+
role="cell"
|
|
19747
|
+
data-label="Example td"
|
|
19748
|
+
>Test cell 1-8</td>
|
|
19749
|
+
<td
|
|
19750
|
+
class="pf-m-nowrap"
|
|
19751
|
+
role="cell"
|
|
19752
|
+
data-label="Example td"
|
|
19753
|
+
>Test cell 1-9</td>
|
|
19754
|
+
</tr>
|
|
19755
|
+
<tr role="row">
|
|
19756
|
+
<th
|
|
19757
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19758
|
+
role="columnheader"
|
|
19759
|
+
data-label="Example th"
|
|
19760
|
+
scope="col"
|
|
19761
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19762
|
+
>Fact 2</th>
|
|
19763
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 2</td>
|
|
19764
|
+
<td
|
|
19765
|
+
class="pf-m-nowrap"
|
|
19766
|
+
role="cell"
|
|
19767
|
+
data-label="Example td"
|
|
19768
|
+
>Test cell 2-3</td>
|
|
19769
|
+
<td
|
|
19770
|
+
class="pf-m-nowrap"
|
|
19771
|
+
role="cell"
|
|
19772
|
+
data-label="Example td"
|
|
19773
|
+
>Test cell 2-4</td>
|
|
19774
|
+
<td
|
|
19775
|
+
class="pf-m-nowrap"
|
|
19776
|
+
role="cell"
|
|
19777
|
+
data-label="Example td"
|
|
19778
|
+
>Test cell 2-5</td>
|
|
19779
|
+
<td
|
|
19780
|
+
class="pf-m-nowrap"
|
|
19781
|
+
role="cell"
|
|
19782
|
+
data-label="Example td"
|
|
19783
|
+
>Test cell 2-6</td>
|
|
19784
|
+
<td
|
|
19785
|
+
class="pf-m-nowrap"
|
|
19786
|
+
role="cell"
|
|
19787
|
+
data-label="Example td"
|
|
19788
|
+
>Test cell 2-7</td>
|
|
19789
|
+
<td
|
|
19790
|
+
class="pf-m-nowrap"
|
|
19791
|
+
role="cell"
|
|
19792
|
+
data-label="Example td"
|
|
19793
|
+
>Test cell 2-8</td>
|
|
19794
|
+
<td
|
|
19795
|
+
class="pf-m-nowrap"
|
|
19796
|
+
role="cell"
|
|
19797
|
+
data-label="Example td"
|
|
19798
|
+
>Test cell 2-9</td>
|
|
19799
|
+
</tr>
|
|
19800
|
+
<tr role="row">
|
|
19801
|
+
<th
|
|
19802
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19803
|
+
role="columnheader"
|
|
19804
|
+
data-label="Example th"
|
|
19805
|
+
scope="col"
|
|
19806
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19807
|
+
>Fact 3</th>
|
|
19808
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 3</td>
|
|
19809
|
+
<td
|
|
19810
|
+
class="pf-m-nowrap"
|
|
19811
|
+
role="cell"
|
|
19812
|
+
data-label="Example td"
|
|
19813
|
+
>Test cell 3-3</td>
|
|
19814
|
+
<td
|
|
19815
|
+
class="pf-m-nowrap"
|
|
19816
|
+
role="cell"
|
|
19817
|
+
data-label="Example td"
|
|
19818
|
+
>Test cell 3-4</td>
|
|
19819
|
+
<td
|
|
19820
|
+
class="pf-m-nowrap"
|
|
19821
|
+
role="cell"
|
|
19822
|
+
data-label="Example td"
|
|
19823
|
+
>Test cell 3-5</td>
|
|
19824
|
+
<td
|
|
19825
|
+
class="pf-m-nowrap"
|
|
19826
|
+
role="cell"
|
|
19827
|
+
data-label="Example td"
|
|
19828
|
+
>Test cell 3-6</td>
|
|
19829
|
+
<td
|
|
19830
|
+
class="pf-m-nowrap"
|
|
19831
|
+
role="cell"
|
|
19832
|
+
data-label="Example td"
|
|
19833
|
+
>Test cell 3-7</td>
|
|
19834
|
+
<td
|
|
19835
|
+
class="pf-m-nowrap"
|
|
19836
|
+
role="cell"
|
|
19837
|
+
data-label="Example td"
|
|
19838
|
+
>Test cell 3-8</td>
|
|
19839
|
+
<td
|
|
19840
|
+
class="pf-m-nowrap"
|
|
19841
|
+
role="cell"
|
|
19842
|
+
data-label="Example td"
|
|
19843
|
+
>Test cell 3-9</td>
|
|
19844
|
+
</tr>
|
|
19845
|
+
<tr role="row">
|
|
19846
|
+
<th
|
|
19847
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19848
|
+
role="columnheader"
|
|
19849
|
+
data-label="Example th"
|
|
19850
|
+
scope="col"
|
|
19851
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19852
|
+
>Fact 4</th>
|
|
19853
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 4</td>
|
|
19854
|
+
<td
|
|
19855
|
+
class="pf-m-nowrap"
|
|
19856
|
+
role="cell"
|
|
19857
|
+
data-label="Example td"
|
|
19858
|
+
>Test cell 4-3</td>
|
|
19859
|
+
<td
|
|
19860
|
+
class="pf-m-nowrap"
|
|
19861
|
+
role="cell"
|
|
19862
|
+
data-label="Example td"
|
|
19863
|
+
>Test cell 4-4</td>
|
|
19864
|
+
<td
|
|
19865
|
+
class="pf-m-nowrap"
|
|
19866
|
+
role="cell"
|
|
19867
|
+
data-label="Example td"
|
|
19868
|
+
>Test cell 4-5</td>
|
|
19869
|
+
<td
|
|
19870
|
+
class="pf-m-nowrap"
|
|
19871
|
+
role="cell"
|
|
19872
|
+
data-label="Example td"
|
|
19873
|
+
>Test cell 4-6</td>
|
|
19874
|
+
<td
|
|
19875
|
+
class="pf-m-nowrap"
|
|
19876
|
+
role="cell"
|
|
19877
|
+
data-label="Example td"
|
|
19878
|
+
>Test cell 4-7</td>
|
|
19879
|
+
<td
|
|
19880
|
+
class="pf-m-nowrap"
|
|
19881
|
+
role="cell"
|
|
19882
|
+
data-label="Example td"
|
|
19883
|
+
>Test cell 4-8</td>
|
|
19884
|
+
<td
|
|
19885
|
+
class="pf-m-nowrap"
|
|
19886
|
+
role="cell"
|
|
19887
|
+
data-label="Example td"
|
|
19888
|
+
>Test cell 4-9</td>
|
|
19889
|
+
</tr>
|
|
19890
|
+
<tr role="row">
|
|
19891
|
+
<th
|
|
19892
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19893
|
+
role="columnheader"
|
|
19894
|
+
data-label="Example th"
|
|
19895
|
+
scope="col"
|
|
19896
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19897
|
+
>Fact 5</th>
|
|
19898
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 5</td>
|
|
19899
|
+
<td
|
|
19900
|
+
class="pf-m-nowrap"
|
|
19901
|
+
role="cell"
|
|
19902
|
+
data-label="Example td"
|
|
19903
|
+
>Test cell 5-3</td>
|
|
19904
|
+
<td
|
|
19905
|
+
class="pf-m-nowrap"
|
|
19906
|
+
role="cell"
|
|
19907
|
+
data-label="Example td"
|
|
19908
|
+
>Test cell 5-4</td>
|
|
19909
|
+
<td
|
|
19910
|
+
class="pf-m-nowrap"
|
|
19911
|
+
role="cell"
|
|
19912
|
+
data-label="Example td"
|
|
19913
|
+
>Test cell 5-5</td>
|
|
19914
|
+
<td
|
|
19915
|
+
class="pf-m-nowrap"
|
|
19916
|
+
role="cell"
|
|
19917
|
+
data-label="Example td"
|
|
19918
|
+
>Test cell 5-6</td>
|
|
19919
|
+
<td
|
|
19920
|
+
class="pf-m-nowrap"
|
|
19921
|
+
role="cell"
|
|
19922
|
+
data-label="Example td"
|
|
19923
|
+
>Test cell 5-7</td>
|
|
19924
|
+
<td
|
|
19925
|
+
class="pf-m-nowrap"
|
|
19926
|
+
role="cell"
|
|
19927
|
+
data-label="Example td"
|
|
19928
|
+
>Test cell 5-8</td>
|
|
19929
|
+
<td
|
|
19930
|
+
class="pf-m-nowrap"
|
|
19931
|
+
role="cell"
|
|
19932
|
+
data-label="Example td"
|
|
19933
|
+
>Test cell 5-9</td>
|
|
19934
|
+
</tr>
|
|
19935
|
+
<tr role="row">
|
|
19936
|
+
<th
|
|
19937
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19938
|
+
role="columnheader"
|
|
19939
|
+
data-label="Example th"
|
|
19940
|
+
scope="col"
|
|
19941
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19942
|
+
>Fact 6</th>
|
|
19943
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 6</td>
|
|
19944
|
+
<td
|
|
19945
|
+
class="pf-m-nowrap"
|
|
19946
|
+
role="cell"
|
|
19947
|
+
data-label="Example td"
|
|
19948
|
+
>Test cell 6-3</td>
|
|
19949
|
+
<td
|
|
19950
|
+
class="pf-m-nowrap"
|
|
19951
|
+
role="cell"
|
|
19952
|
+
data-label="Example td"
|
|
19953
|
+
>Test cell 6-4</td>
|
|
19954
|
+
<td
|
|
19955
|
+
class="pf-m-nowrap"
|
|
19956
|
+
role="cell"
|
|
19957
|
+
data-label="Example td"
|
|
19958
|
+
>Test cell 6-5</td>
|
|
19959
|
+
<td
|
|
19960
|
+
class="pf-m-nowrap"
|
|
19961
|
+
role="cell"
|
|
19962
|
+
data-label="Example td"
|
|
19963
|
+
>Test cell 6-6</td>
|
|
19964
|
+
<td
|
|
19965
|
+
class="pf-m-nowrap"
|
|
19966
|
+
role="cell"
|
|
19967
|
+
data-label="Example td"
|
|
19968
|
+
>Test cell 6-7</td>
|
|
19969
|
+
<td
|
|
19970
|
+
class="pf-m-nowrap"
|
|
19971
|
+
role="cell"
|
|
19972
|
+
data-label="Example td"
|
|
19973
|
+
>Test cell 6-8</td>
|
|
19974
|
+
<td
|
|
19975
|
+
class="pf-m-nowrap"
|
|
19976
|
+
role="cell"
|
|
19977
|
+
data-label="Example td"
|
|
19978
|
+
>Test cell 6-9</td>
|
|
19979
|
+
</tr>
|
|
19980
|
+
<tr role="row">
|
|
19981
|
+
<th
|
|
19982
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
19983
|
+
role="columnheader"
|
|
19984
|
+
data-label="Example th"
|
|
19985
|
+
scope="col"
|
|
19986
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19987
|
+
>Fact 7</th>
|
|
19988
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 7</td>
|
|
19989
|
+
<td
|
|
19990
|
+
class="pf-m-nowrap"
|
|
19991
|
+
role="cell"
|
|
19992
|
+
data-label="Example td"
|
|
19993
|
+
>Test cell 7-3</td>
|
|
19994
|
+
<td
|
|
19995
|
+
class="pf-m-nowrap"
|
|
19996
|
+
role="cell"
|
|
19997
|
+
data-label="Example td"
|
|
19998
|
+
>Test cell 7-4</td>
|
|
19999
|
+
<td
|
|
20000
|
+
class="pf-m-nowrap"
|
|
20001
|
+
role="cell"
|
|
20002
|
+
data-label="Example td"
|
|
20003
|
+
>Test cell 7-5</td>
|
|
20004
|
+
<td
|
|
20005
|
+
class="pf-m-nowrap"
|
|
20006
|
+
role="cell"
|
|
20007
|
+
data-label="Example td"
|
|
20008
|
+
>Test cell 7-6</td>
|
|
20009
|
+
<td
|
|
20010
|
+
class="pf-m-nowrap"
|
|
20011
|
+
role="cell"
|
|
20012
|
+
data-label="Example td"
|
|
20013
|
+
>Test cell 7-7</td>
|
|
20014
|
+
<td
|
|
20015
|
+
class="pf-m-nowrap"
|
|
20016
|
+
role="cell"
|
|
20017
|
+
data-label="Example td"
|
|
20018
|
+
>Test cell 7-8</td>
|
|
20019
|
+
<td
|
|
20020
|
+
class="pf-m-nowrap"
|
|
20021
|
+
role="cell"
|
|
20022
|
+
data-label="Example td"
|
|
20023
|
+
>Test cell 7-9</td>
|
|
20024
|
+
</tr>
|
|
20025
|
+
<tr role="row">
|
|
20026
|
+
<th
|
|
20027
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20028
|
+
role="columnheader"
|
|
20029
|
+
data-label="Example th"
|
|
20030
|
+
scope="col"
|
|
20031
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20032
|
+
>Fact 8</th>
|
|
20033
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 8</td>
|
|
20034
|
+
<td
|
|
20035
|
+
class="pf-m-nowrap"
|
|
20036
|
+
role="cell"
|
|
20037
|
+
data-label="Example td"
|
|
20038
|
+
>Test cell 8-3</td>
|
|
20039
|
+
<td
|
|
20040
|
+
class="pf-m-nowrap"
|
|
20041
|
+
role="cell"
|
|
20042
|
+
data-label="Example td"
|
|
20043
|
+
>Test cell 8-4</td>
|
|
20044
|
+
<td
|
|
20045
|
+
class="pf-m-nowrap"
|
|
20046
|
+
role="cell"
|
|
20047
|
+
data-label="Example td"
|
|
20048
|
+
>Test cell 8-5</td>
|
|
20049
|
+
<td
|
|
20050
|
+
class="pf-m-nowrap"
|
|
20051
|
+
role="cell"
|
|
20052
|
+
data-label="Example td"
|
|
20053
|
+
>Test cell 8-6</td>
|
|
20054
|
+
<td
|
|
20055
|
+
class="pf-m-nowrap"
|
|
20056
|
+
role="cell"
|
|
20057
|
+
data-label="Example td"
|
|
20058
|
+
>Test cell 8-7</td>
|
|
20059
|
+
<td
|
|
20060
|
+
class="pf-m-nowrap"
|
|
20061
|
+
role="cell"
|
|
20062
|
+
data-label="Example td"
|
|
20063
|
+
>Test cell 8-8</td>
|
|
20064
|
+
<td
|
|
20065
|
+
class="pf-m-nowrap"
|
|
20066
|
+
role="cell"
|
|
20067
|
+
data-label="Example td"
|
|
20068
|
+
>Test cell 8-9</td>
|
|
20069
|
+
</tr>
|
|
20070
|
+
<tr role="row">
|
|
20071
|
+
<th
|
|
20072
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20073
|
+
role="columnheader"
|
|
20074
|
+
data-label="Example th"
|
|
20075
|
+
scope="col"
|
|
20076
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20077
|
+
>Fact 9</th>
|
|
20078
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 9</td>
|
|
20079
|
+
<td
|
|
20080
|
+
class="pf-m-nowrap"
|
|
20081
|
+
role="cell"
|
|
20082
|
+
data-label="Example td"
|
|
20083
|
+
>Test cell 9-3</td>
|
|
20084
|
+
<td
|
|
20085
|
+
class="pf-m-nowrap"
|
|
20086
|
+
role="cell"
|
|
20087
|
+
data-label="Example td"
|
|
20088
|
+
>Test cell 9-4</td>
|
|
20089
|
+
<td
|
|
20090
|
+
class="pf-m-nowrap"
|
|
20091
|
+
role="cell"
|
|
20092
|
+
data-label="Example td"
|
|
20093
|
+
>Test cell 9-5</td>
|
|
20094
|
+
<td
|
|
20095
|
+
class="pf-m-nowrap"
|
|
20096
|
+
role="cell"
|
|
20097
|
+
data-label="Example td"
|
|
20098
|
+
>Test cell 9-6</td>
|
|
20099
|
+
<td
|
|
20100
|
+
class="pf-m-nowrap"
|
|
20101
|
+
role="cell"
|
|
20102
|
+
data-label="Example td"
|
|
20103
|
+
>Test cell 9-7</td>
|
|
20104
|
+
<td
|
|
20105
|
+
class="pf-m-nowrap"
|
|
20106
|
+
role="cell"
|
|
20107
|
+
data-label="Example td"
|
|
20108
|
+
>Test cell 9-8</td>
|
|
20109
|
+
<td
|
|
20110
|
+
class="pf-m-nowrap"
|
|
20111
|
+
role="cell"
|
|
20112
|
+
data-label="Example td"
|
|
20113
|
+
>Test cell 9-9</td>
|
|
20114
|
+
</tr>
|
|
20115
|
+
</tbody>
|
|
20116
|
+
</table>
|
|
20117
|
+
</div>
|
|
20118
|
+
|
|
20119
|
+
```
|
|
20120
|
+
|
|
20121
|
+
### Multiple sticky columns
|
|
20122
|
+
|
|
20123
|
+
```html
|
|
20124
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
20125
|
+
<table
|
|
20126
|
+
class="pf-c-table"
|
|
20127
|
+
role="grid"
|
|
20128
|
+
aria-label="This is a scrollable table"
|
|
20129
|
+
id="-table"
|
|
20130
|
+
>
|
|
20131
|
+
<thead>
|
|
20132
|
+
<tr role="row">
|
|
20133
|
+
<th
|
|
20134
|
+
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
20135
|
+
role="columnheader"
|
|
20136
|
+
aria-sort="none"
|
|
20137
|
+
data-label="Example th"
|
|
20138
|
+
scope="col"
|
|
20139
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20140
|
+
>
|
|
20141
|
+
<button class="pf-c-table__button">
|
|
20142
|
+
<div class="pf-c-table__button-content">
|
|
20143
|
+
<span class="pf-c-table__text">Fact</span>
|
|
20144
|
+
<span class="pf-c-table__sort-indicator">
|
|
20145
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20146
|
+
</span>
|
|
20147
|
+
</div>
|
|
20148
|
+
</button>
|
|
20149
|
+
</th>
|
|
20150
|
+
<th
|
|
20151
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
20152
|
+
role="columnheader"
|
|
20153
|
+
aria-sort="none"
|
|
20154
|
+
data-label="Example th"
|
|
20155
|
+
scope="col"
|
|
20156
|
+
style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20157
|
+
>
|
|
20158
|
+
<button class="pf-c-table__button">
|
|
20159
|
+
<div class="pf-c-table__button-content">
|
|
20160
|
+
<span class="pf-c-table__text">State</span>
|
|
20161
|
+
<span class="pf-c-table__sort-indicator">
|
|
20162
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20163
|
+
</span>
|
|
20164
|
+
</div>
|
|
20165
|
+
</button>
|
|
20166
|
+
</th>
|
|
20167
|
+
<th
|
|
20168
|
+
class="pf-m-truncate"
|
|
20169
|
+
role="columnheader"
|
|
20170
|
+
data-label="Example th"
|
|
20171
|
+
scope="col"
|
|
20172
|
+
>Header 3</th>
|
|
20173
|
+
<th
|
|
20174
|
+
class="pf-m-truncate"
|
|
20175
|
+
role="columnheader"
|
|
20176
|
+
data-label="Example th"
|
|
20177
|
+
scope="col"
|
|
20178
|
+
>Header 4</th>
|
|
20179
|
+
<th
|
|
20180
|
+
class="pf-m-truncate"
|
|
20181
|
+
role="columnheader"
|
|
20182
|
+
data-label="Example th"
|
|
20183
|
+
scope="col"
|
|
20184
|
+
>Header 5</th>
|
|
20185
|
+
<th
|
|
20186
|
+
class="pf-m-truncate"
|
|
20187
|
+
role="columnheader"
|
|
20188
|
+
data-label="Example th"
|
|
20189
|
+
scope="col"
|
|
20190
|
+
>Header 6</th>
|
|
20191
|
+
<th
|
|
20192
|
+
class="pf-m-truncate"
|
|
20193
|
+
role="columnheader"
|
|
20194
|
+
data-label="Example th"
|
|
20195
|
+
scope="col"
|
|
20196
|
+
>Header 7</th>
|
|
20197
|
+
<th
|
|
20198
|
+
class="pf-m-truncate"
|
|
20199
|
+
role="columnheader"
|
|
20200
|
+
data-label="Example th"
|
|
20201
|
+
scope="col"
|
|
20202
|
+
>Header 8</th>
|
|
20203
|
+
<th
|
|
20204
|
+
class="pf-m-truncate"
|
|
20205
|
+
role="columnheader"
|
|
20206
|
+
data-label="Example th"
|
|
20207
|
+
scope="col"
|
|
20208
|
+
>Header 9</th>
|
|
20209
|
+
</tr>
|
|
20210
|
+
</thead>
|
|
20211
|
+
|
|
20212
|
+
<tbody role="rowgroup">
|
|
20213
|
+
<tr role="row">
|
|
20214
|
+
<th
|
|
20215
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20216
|
+
role="columnheader"
|
|
20217
|
+
data-label="Example th"
|
|
20218
|
+
scope="col"
|
|
20219
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20220
|
+
>Fact 1</th>
|
|
20221
|
+
<th
|
|
20222
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20223
|
+
role="columnheader"
|
|
20224
|
+
data-label="Example th"
|
|
20225
|
+
scope="col"
|
|
20226
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20227
|
+
>State 1</th>
|
|
20228
|
+
<td
|
|
20229
|
+
class="pf-m-nowrap"
|
|
20230
|
+
role="cell"
|
|
20231
|
+
data-label="Example td"
|
|
20232
|
+
>Test cell 1-3</td>
|
|
20233
|
+
<td
|
|
20234
|
+
class="pf-m-nowrap"
|
|
20235
|
+
role="cell"
|
|
20236
|
+
data-label="Example td"
|
|
20237
|
+
>Test cell 1-4</td>
|
|
20238
|
+
<td
|
|
20239
|
+
class="pf-m-nowrap"
|
|
20240
|
+
role="cell"
|
|
20241
|
+
data-label="Example td"
|
|
20242
|
+
>Test cell 1-5</td>
|
|
20243
|
+
<td
|
|
20244
|
+
class="pf-m-nowrap"
|
|
20245
|
+
role="cell"
|
|
20246
|
+
data-label="Example td"
|
|
20247
|
+
>Test cell 1-6</td>
|
|
20248
|
+
<td
|
|
20249
|
+
class="pf-m-nowrap"
|
|
20250
|
+
role="cell"
|
|
20251
|
+
data-label="Example td"
|
|
20252
|
+
>Test cell 1-7</td>
|
|
20253
|
+
<td
|
|
20254
|
+
class="pf-m-nowrap"
|
|
20255
|
+
role="cell"
|
|
20256
|
+
data-label="Example td"
|
|
20257
|
+
>Test cell 1-8</td>
|
|
20258
|
+
<td
|
|
20259
|
+
class="pf-m-nowrap"
|
|
20260
|
+
role="cell"
|
|
20261
|
+
data-label="Example td"
|
|
20262
|
+
>Test cell 1-9</td>
|
|
20263
|
+
</tr>
|
|
20264
|
+
<tr role="row">
|
|
20265
|
+
<th
|
|
20266
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20267
|
+
role="columnheader"
|
|
20268
|
+
data-label="Example th"
|
|
20269
|
+
scope="col"
|
|
20270
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20271
|
+
>Fact 2</th>
|
|
20272
|
+
<th
|
|
20273
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20274
|
+
role="columnheader"
|
|
20275
|
+
data-label="Example th"
|
|
20276
|
+
scope="col"
|
|
20277
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20278
|
+
>State 2</th>
|
|
20279
|
+
<td
|
|
20280
|
+
class="pf-m-nowrap"
|
|
20281
|
+
role="cell"
|
|
20282
|
+
data-label="Example td"
|
|
20283
|
+
>Test cell 2-3</td>
|
|
20284
|
+
<td
|
|
20285
|
+
class="pf-m-nowrap"
|
|
20286
|
+
role="cell"
|
|
20287
|
+
data-label="Example td"
|
|
20288
|
+
>Test cell 2-4</td>
|
|
20289
|
+
<td
|
|
20290
|
+
class="pf-m-nowrap"
|
|
20291
|
+
role="cell"
|
|
20292
|
+
data-label="Example td"
|
|
20293
|
+
>Test cell 2-5</td>
|
|
20294
|
+
<td
|
|
20295
|
+
class="pf-m-nowrap"
|
|
20296
|
+
role="cell"
|
|
20297
|
+
data-label="Example td"
|
|
20298
|
+
>Test cell 2-6</td>
|
|
20299
|
+
<td
|
|
20300
|
+
class="pf-m-nowrap"
|
|
20301
|
+
role="cell"
|
|
20302
|
+
data-label="Example td"
|
|
20303
|
+
>Test cell 2-7</td>
|
|
20304
|
+
<td
|
|
20305
|
+
class="pf-m-nowrap"
|
|
20306
|
+
role="cell"
|
|
20307
|
+
data-label="Example td"
|
|
20308
|
+
>Test cell 2-8</td>
|
|
20309
|
+
<td
|
|
20310
|
+
class="pf-m-nowrap"
|
|
20311
|
+
role="cell"
|
|
20312
|
+
data-label="Example td"
|
|
20313
|
+
>Test cell 2-9</td>
|
|
20314
|
+
</tr>
|
|
20315
|
+
<tr role="row">
|
|
20316
|
+
<th
|
|
20317
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20318
|
+
role="columnheader"
|
|
20319
|
+
data-label="Example th"
|
|
20320
|
+
scope="col"
|
|
20321
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20322
|
+
>Fact 3</th>
|
|
20323
|
+
<th
|
|
20324
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20325
|
+
role="columnheader"
|
|
20326
|
+
data-label="Example th"
|
|
20327
|
+
scope="col"
|
|
20328
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20329
|
+
>State 3</th>
|
|
20330
|
+
<td
|
|
20331
|
+
class="pf-m-nowrap"
|
|
20332
|
+
role="cell"
|
|
20333
|
+
data-label="Example td"
|
|
20334
|
+
>Test cell 3-3</td>
|
|
20335
|
+
<td
|
|
20336
|
+
class="pf-m-nowrap"
|
|
20337
|
+
role="cell"
|
|
20338
|
+
data-label="Example td"
|
|
20339
|
+
>Test cell 3-4</td>
|
|
20340
|
+
<td
|
|
20341
|
+
class="pf-m-nowrap"
|
|
20342
|
+
role="cell"
|
|
20343
|
+
data-label="Example td"
|
|
20344
|
+
>Test cell 3-5</td>
|
|
20345
|
+
<td
|
|
20346
|
+
class="pf-m-nowrap"
|
|
20347
|
+
role="cell"
|
|
20348
|
+
data-label="Example td"
|
|
20349
|
+
>Test cell 3-6</td>
|
|
20350
|
+
<td
|
|
20351
|
+
class="pf-m-nowrap"
|
|
20352
|
+
role="cell"
|
|
20353
|
+
data-label="Example td"
|
|
20354
|
+
>Test cell 3-7</td>
|
|
20355
|
+
<td
|
|
20356
|
+
class="pf-m-nowrap"
|
|
20357
|
+
role="cell"
|
|
20358
|
+
data-label="Example td"
|
|
20359
|
+
>Test cell 3-8</td>
|
|
20360
|
+
<td
|
|
20361
|
+
class="pf-m-nowrap"
|
|
20362
|
+
role="cell"
|
|
20363
|
+
data-label="Example td"
|
|
20364
|
+
>Test cell 3-9</td>
|
|
20365
|
+
</tr>
|
|
20366
|
+
<tr role="row">
|
|
20367
|
+
<th
|
|
20368
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20369
|
+
role="columnheader"
|
|
20370
|
+
data-label="Example th"
|
|
20371
|
+
scope="col"
|
|
20372
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20373
|
+
>Fact 4</th>
|
|
20374
|
+
<th
|
|
20375
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20376
|
+
role="columnheader"
|
|
20377
|
+
data-label="Example th"
|
|
20378
|
+
scope="col"
|
|
20379
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20380
|
+
>State 4</th>
|
|
20381
|
+
<td
|
|
20382
|
+
class="pf-m-nowrap"
|
|
20383
|
+
role="cell"
|
|
20384
|
+
data-label="Example td"
|
|
20385
|
+
>Test cell 4-3</td>
|
|
20386
|
+
<td
|
|
20387
|
+
class="pf-m-nowrap"
|
|
20388
|
+
role="cell"
|
|
20389
|
+
data-label="Example td"
|
|
20390
|
+
>Test cell 4-4</td>
|
|
20391
|
+
<td
|
|
20392
|
+
class="pf-m-nowrap"
|
|
20393
|
+
role="cell"
|
|
20394
|
+
data-label="Example td"
|
|
20395
|
+
>Test cell 4-5</td>
|
|
20396
|
+
<td
|
|
20397
|
+
class="pf-m-nowrap"
|
|
20398
|
+
role="cell"
|
|
20399
|
+
data-label="Example td"
|
|
20400
|
+
>Test cell 4-6</td>
|
|
20401
|
+
<td
|
|
20402
|
+
class="pf-m-nowrap"
|
|
20403
|
+
role="cell"
|
|
20404
|
+
data-label="Example td"
|
|
20405
|
+
>Test cell 4-7</td>
|
|
20406
|
+
<td
|
|
20407
|
+
class="pf-m-nowrap"
|
|
20408
|
+
role="cell"
|
|
20409
|
+
data-label="Example td"
|
|
20410
|
+
>Test cell 4-8</td>
|
|
20411
|
+
<td
|
|
20412
|
+
class="pf-m-nowrap"
|
|
20413
|
+
role="cell"
|
|
20414
|
+
data-label="Example td"
|
|
20415
|
+
>Test cell 4-9</td>
|
|
20416
|
+
</tr>
|
|
20417
|
+
<tr role="row">
|
|
20418
|
+
<th
|
|
20419
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20420
|
+
role="columnheader"
|
|
20421
|
+
data-label="Example th"
|
|
20422
|
+
scope="col"
|
|
20423
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20424
|
+
>Fact 5</th>
|
|
20425
|
+
<th
|
|
20426
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20427
|
+
role="columnheader"
|
|
20428
|
+
data-label="Example th"
|
|
20429
|
+
scope="col"
|
|
20430
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20431
|
+
>State 5</th>
|
|
20432
|
+
<td
|
|
20433
|
+
class="pf-m-nowrap"
|
|
20434
|
+
role="cell"
|
|
20435
|
+
data-label="Example td"
|
|
20436
|
+
>Test cell 5-3</td>
|
|
20437
|
+
<td
|
|
20438
|
+
class="pf-m-nowrap"
|
|
20439
|
+
role="cell"
|
|
20440
|
+
data-label="Example td"
|
|
20441
|
+
>Test cell 5-4</td>
|
|
20442
|
+
<td
|
|
20443
|
+
class="pf-m-nowrap"
|
|
20444
|
+
role="cell"
|
|
20445
|
+
data-label="Example td"
|
|
20446
|
+
>Test cell 5-5</td>
|
|
20447
|
+
<td
|
|
20448
|
+
class="pf-m-nowrap"
|
|
20449
|
+
role="cell"
|
|
20450
|
+
data-label="Example td"
|
|
20451
|
+
>Test cell 5-6</td>
|
|
20452
|
+
<td
|
|
20453
|
+
class="pf-m-nowrap"
|
|
20454
|
+
role="cell"
|
|
20455
|
+
data-label="Example td"
|
|
20456
|
+
>Test cell 5-7</td>
|
|
20457
|
+
<td
|
|
20458
|
+
class="pf-m-nowrap"
|
|
20459
|
+
role="cell"
|
|
20460
|
+
data-label="Example td"
|
|
20461
|
+
>Test cell 5-8</td>
|
|
20462
|
+
<td
|
|
20463
|
+
class="pf-m-nowrap"
|
|
20464
|
+
role="cell"
|
|
20465
|
+
data-label="Example td"
|
|
20466
|
+
>Test cell 5-9</td>
|
|
20467
|
+
</tr>
|
|
20468
|
+
<tr role="row">
|
|
20469
|
+
<th
|
|
20470
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20471
|
+
role="columnheader"
|
|
20472
|
+
data-label="Example th"
|
|
20473
|
+
scope="col"
|
|
20474
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20475
|
+
>Fact 6</th>
|
|
20476
|
+
<th
|
|
20477
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20478
|
+
role="columnheader"
|
|
20479
|
+
data-label="Example th"
|
|
20480
|
+
scope="col"
|
|
20481
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20482
|
+
>State 6</th>
|
|
20483
|
+
<td
|
|
20484
|
+
class="pf-m-nowrap"
|
|
20485
|
+
role="cell"
|
|
20486
|
+
data-label="Example td"
|
|
20487
|
+
>Test cell 6-3</td>
|
|
20488
|
+
<td
|
|
20489
|
+
class="pf-m-nowrap"
|
|
20490
|
+
role="cell"
|
|
20491
|
+
data-label="Example td"
|
|
20492
|
+
>Test cell 6-4</td>
|
|
20493
|
+
<td
|
|
20494
|
+
class="pf-m-nowrap"
|
|
20495
|
+
role="cell"
|
|
20496
|
+
data-label="Example td"
|
|
20497
|
+
>Test cell 6-5</td>
|
|
20498
|
+
<td
|
|
20499
|
+
class="pf-m-nowrap"
|
|
20500
|
+
role="cell"
|
|
20501
|
+
data-label="Example td"
|
|
20502
|
+
>Test cell 6-6</td>
|
|
20503
|
+
<td
|
|
20504
|
+
class="pf-m-nowrap"
|
|
20505
|
+
role="cell"
|
|
20506
|
+
data-label="Example td"
|
|
20507
|
+
>Test cell 6-7</td>
|
|
20508
|
+
<td
|
|
20509
|
+
class="pf-m-nowrap"
|
|
20510
|
+
role="cell"
|
|
20511
|
+
data-label="Example td"
|
|
20512
|
+
>Test cell 6-8</td>
|
|
20513
|
+
<td
|
|
20514
|
+
class="pf-m-nowrap"
|
|
20515
|
+
role="cell"
|
|
20516
|
+
data-label="Example td"
|
|
20517
|
+
>Test cell 6-9</td>
|
|
20518
|
+
</tr>
|
|
20519
|
+
<tr role="row">
|
|
20520
|
+
<th
|
|
20521
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20522
|
+
role="columnheader"
|
|
20523
|
+
data-label="Example th"
|
|
20524
|
+
scope="col"
|
|
20525
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20526
|
+
>Fact 7</th>
|
|
20527
|
+
<th
|
|
20528
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20529
|
+
role="columnheader"
|
|
20530
|
+
data-label="Example th"
|
|
20531
|
+
scope="col"
|
|
20532
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20533
|
+
>State 7</th>
|
|
20534
|
+
<td
|
|
20535
|
+
class="pf-m-nowrap"
|
|
20536
|
+
role="cell"
|
|
20537
|
+
data-label="Example td"
|
|
20538
|
+
>Test cell 7-3</td>
|
|
20539
|
+
<td
|
|
20540
|
+
class="pf-m-nowrap"
|
|
20541
|
+
role="cell"
|
|
20542
|
+
data-label="Example td"
|
|
20543
|
+
>Test cell 7-4</td>
|
|
20544
|
+
<td
|
|
20545
|
+
class="pf-m-nowrap"
|
|
20546
|
+
role="cell"
|
|
20547
|
+
data-label="Example td"
|
|
20548
|
+
>Test cell 7-5</td>
|
|
20549
|
+
<td
|
|
20550
|
+
class="pf-m-nowrap"
|
|
20551
|
+
role="cell"
|
|
20552
|
+
data-label="Example td"
|
|
20553
|
+
>Test cell 7-6</td>
|
|
20554
|
+
<td
|
|
20555
|
+
class="pf-m-nowrap"
|
|
20556
|
+
role="cell"
|
|
20557
|
+
data-label="Example td"
|
|
20558
|
+
>Test cell 7-7</td>
|
|
20559
|
+
<td
|
|
20560
|
+
class="pf-m-nowrap"
|
|
20561
|
+
role="cell"
|
|
20562
|
+
data-label="Example td"
|
|
20563
|
+
>Test cell 7-8</td>
|
|
20564
|
+
<td
|
|
20565
|
+
class="pf-m-nowrap"
|
|
20566
|
+
role="cell"
|
|
20567
|
+
data-label="Example td"
|
|
20568
|
+
>Test cell 7-9</td>
|
|
20569
|
+
</tr>
|
|
20570
|
+
<tr role="row">
|
|
20571
|
+
<th
|
|
20572
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20573
|
+
role="columnheader"
|
|
20574
|
+
data-label="Example th"
|
|
20575
|
+
scope="col"
|
|
20576
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20577
|
+
>Fact 8</th>
|
|
20578
|
+
<th
|
|
20579
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20580
|
+
role="columnheader"
|
|
20581
|
+
data-label="Example th"
|
|
20582
|
+
scope="col"
|
|
20583
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20584
|
+
>State 8</th>
|
|
20585
|
+
<td
|
|
20586
|
+
class="pf-m-nowrap"
|
|
20587
|
+
role="cell"
|
|
20588
|
+
data-label="Example td"
|
|
20589
|
+
>Test cell 8-3</td>
|
|
20590
|
+
<td
|
|
20591
|
+
class="pf-m-nowrap"
|
|
20592
|
+
role="cell"
|
|
20593
|
+
data-label="Example td"
|
|
20594
|
+
>Test cell 8-4</td>
|
|
20595
|
+
<td
|
|
20596
|
+
class="pf-m-nowrap"
|
|
20597
|
+
role="cell"
|
|
20598
|
+
data-label="Example td"
|
|
20599
|
+
>Test cell 8-5</td>
|
|
20600
|
+
<td
|
|
20601
|
+
class="pf-m-nowrap"
|
|
20602
|
+
role="cell"
|
|
20603
|
+
data-label="Example td"
|
|
20604
|
+
>Test cell 8-6</td>
|
|
20605
|
+
<td
|
|
20606
|
+
class="pf-m-nowrap"
|
|
20607
|
+
role="cell"
|
|
20608
|
+
data-label="Example td"
|
|
20609
|
+
>Test cell 8-7</td>
|
|
20610
|
+
<td
|
|
20611
|
+
class="pf-m-nowrap"
|
|
20612
|
+
role="cell"
|
|
20613
|
+
data-label="Example td"
|
|
20614
|
+
>Test cell 8-8</td>
|
|
20615
|
+
<td
|
|
20616
|
+
class="pf-m-nowrap"
|
|
20617
|
+
role="cell"
|
|
20618
|
+
data-label="Example td"
|
|
20619
|
+
>Test cell 8-9</td>
|
|
20620
|
+
</tr>
|
|
20621
|
+
<tr role="row">
|
|
20622
|
+
<th
|
|
20623
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20624
|
+
role="columnheader"
|
|
20625
|
+
data-label="Example th"
|
|
20626
|
+
scope="col"
|
|
20627
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20628
|
+
>Fact 9</th>
|
|
20629
|
+
<th
|
|
20630
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20631
|
+
role="columnheader"
|
|
20632
|
+
data-label="Example th"
|
|
20633
|
+
scope="col"
|
|
20634
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20635
|
+
>State 9</th>
|
|
20636
|
+
<td
|
|
20637
|
+
class="pf-m-nowrap"
|
|
20638
|
+
role="cell"
|
|
20639
|
+
data-label="Example td"
|
|
20640
|
+
>Test cell 9-3</td>
|
|
20641
|
+
<td
|
|
20642
|
+
class="pf-m-nowrap"
|
|
20643
|
+
role="cell"
|
|
20644
|
+
data-label="Example td"
|
|
20645
|
+
>Test cell 9-4</td>
|
|
20646
|
+
<td
|
|
20647
|
+
class="pf-m-nowrap"
|
|
20648
|
+
role="cell"
|
|
20649
|
+
data-label="Example td"
|
|
20650
|
+
>Test cell 9-5</td>
|
|
20651
|
+
<td
|
|
20652
|
+
class="pf-m-nowrap"
|
|
20653
|
+
role="cell"
|
|
20654
|
+
data-label="Example td"
|
|
20655
|
+
>Test cell 9-6</td>
|
|
20656
|
+
<td
|
|
20657
|
+
class="pf-m-nowrap"
|
|
20658
|
+
role="cell"
|
|
20659
|
+
data-label="Example td"
|
|
20660
|
+
>Test cell 9-7</td>
|
|
20661
|
+
<td
|
|
20662
|
+
class="pf-m-nowrap"
|
|
20663
|
+
role="cell"
|
|
20664
|
+
data-label="Example td"
|
|
20665
|
+
>Test cell 9-8</td>
|
|
20666
|
+
<td
|
|
20667
|
+
class="pf-m-nowrap"
|
|
20668
|
+
role="cell"
|
|
20669
|
+
data-label="Example td"
|
|
20670
|
+
>Test cell 9-9</td>
|
|
20671
|
+
</tr>
|
|
20672
|
+
</tbody>
|
|
20673
|
+
</table>
|
|
19124
20674
|
</div>
|
|
19125
|
-
```
|
|
19126
|
-
|
|
19127
|
-
### Multiple sticky columns
|
|
19128
20675
|
|
|
19129
|
-
```hbs
|
|
19130
|
-
<div class="pf-c-scroll-inner-wrapper">
|
|
19131
|
-
{{> table--scrollable table--scrollable--id="sticky-multi-column-example" table--scrollable--Column1IsStickyColumn="true" table--scrollable--Column2IsStickyColumn="true" table--scrollable--th--modifier--cell-2-modifier="pf-m-border-right"}}
|
|
19132
|
-
</div>
|
|
19133
20676
|
```
|
|
19134
20677
|
|
|
19135
20678
|
### Sticky columns and header
|
|
19136
20679
|
|
|
19137
|
-
```
|
|
20680
|
+
```html
|
|
19138
20681
|
<div class="pf-c-scroll-outer-wrapper">
|
|
19139
20682
|
<div class="pf-c-scroll-inner-wrapper">
|
|
19140
|
-
|
|
20683
|
+
<table
|
|
20684
|
+
class="pf-c-table pf-m-sticky-header"
|
|
20685
|
+
role="grid"
|
|
20686
|
+
aria-label="This is a scrollable table"
|
|
20687
|
+
id="-table"
|
|
20688
|
+
>
|
|
20689
|
+
<thead>
|
|
20690
|
+
<tr role="row">
|
|
20691
|
+
<th
|
|
20692
|
+
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
20693
|
+
role="columnheader"
|
|
20694
|
+
aria-sort="none"
|
|
20695
|
+
data-label="Example th"
|
|
20696
|
+
scope="col"
|
|
20697
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20698
|
+
>
|
|
20699
|
+
<button class="pf-c-table__button">
|
|
20700
|
+
<div class="pf-c-table__button-content">
|
|
20701
|
+
<span class="pf-c-table__text">Fact</span>
|
|
20702
|
+
<span class="pf-c-table__sort-indicator">
|
|
20703
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20704
|
+
</span>
|
|
20705
|
+
</div>
|
|
20706
|
+
</button>
|
|
20707
|
+
</th>
|
|
20708
|
+
<th
|
|
20709
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
20710
|
+
role="columnheader"
|
|
20711
|
+
aria-sort="none"
|
|
20712
|
+
data-label="Example th"
|
|
20713
|
+
scope="col"
|
|
20714
|
+
style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20715
|
+
>
|
|
20716
|
+
<button class="pf-c-table__button">
|
|
20717
|
+
<div class="pf-c-table__button-content">
|
|
20718
|
+
<span class="pf-c-table__text">State</span>
|
|
20719
|
+
<span class="pf-c-table__sort-indicator">
|
|
20720
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20721
|
+
</span>
|
|
20722
|
+
</div>
|
|
20723
|
+
</button>
|
|
20724
|
+
</th>
|
|
20725
|
+
<th
|
|
20726
|
+
class="pf-m-truncate"
|
|
20727
|
+
role="columnheader"
|
|
20728
|
+
data-label="Example th"
|
|
20729
|
+
scope="col"
|
|
20730
|
+
>Header 3</th>
|
|
20731
|
+
<th
|
|
20732
|
+
class="pf-m-truncate"
|
|
20733
|
+
role="columnheader"
|
|
20734
|
+
data-label="Example th"
|
|
20735
|
+
scope="col"
|
|
20736
|
+
>Header 4</th>
|
|
20737
|
+
<th
|
|
20738
|
+
class="pf-m-truncate"
|
|
20739
|
+
role="columnheader"
|
|
20740
|
+
data-label="Example th"
|
|
20741
|
+
scope="col"
|
|
20742
|
+
>Header 5</th>
|
|
20743
|
+
<th
|
|
20744
|
+
class="pf-m-truncate"
|
|
20745
|
+
role="columnheader"
|
|
20746
|
+
data-label="Example th"
|
|
20747
|
+
scope="col"
|
|
20748
|
+
>Header 6</th>
|
|
20749
|
+
<th
|
|
20750
|
+
class="pf-m-truncate"
|
|
20751
|
+
role="columnheader"
|
|
20752
|
+
data-label="Example th"
|
|
20753
|
+
scope="col"
|
|
20754
|
+
>Header 7</th>
|
|
20755
|
+
<th
|
|
20756
|
+
class="pf-m-truncate"
|
|
20757
|
+
role="columnheader"
|
|
20758
|
+
data-label="Example th"
|
|
20759
|
+
scope="col"
|
|
20760
|
+
>Header 8</th>
|
|
20761
|
+
<th
|
|
20762
|
+
class="pf-m-truncate"
|
|
20763
|
+
role="columnheader"
|
|
20764
|
+
data-label="Example th"
|
|
20765
|
+
scope="col"
|
|
20766
|
+
>Header 9</th>
|
|
20767
|
+
</tr>
|
|
20768
|
+
</thead>
|
|
20769
|
+
|
|
20770
|
+
<tbody role="rowgroup">
|
|
20771
|
+
<tr role="row">
|
|
20772
|
+
<th
|
|
20773
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20774
|
+
role="columnheader"
|
|
20775
|
+
data-label="Example th"
|
|
20776
|
+
scope="col"
|
|
20777
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20778
|
+
>Fact 1</th>
|
|
20779
|
+
<th
|
|
20780
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20781
|
+
role="columnheader"
|
|
20782
|
+
data-label="Example th"
|
|
20783
|
+
scope="col"
|
|
20784
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20785
|
+
>State 1</th>
|
|
20786
|
+
<td
|
|
20787
|
+
class="pf-m-nowrap"
|
|
20788
|
+
role="cell"
|
|
20789
|
+
data-label="Example td"
|
|
20790
|
+
>Test cell 1-3</td>
|
|
20791
|
+
<td
|
|
20792
|
+
class="pf-m-nowrap"
|
|
20793
|
+
role="cell"
|
|
20794
|
+
data-label="Example td"
|
|
20795
|
+
>Test cell 1-4</td>
|
|
20796
|
+
<td
|
|
20797
|
+
class="pf-m-nowrap"
|
|
20798
|
+
role="cell"
|
|
20799
|
+
data-label="Example td"
|
|
20800
|
+
>Test cell 1-5</td>
|
|
20801
|
+
<td
|
|
20802
|
+
class="pf-m-nowrap"
|
|
20803
|
+
role="cell"
|
|
20804
|
+
data-label="Example td"
|
|
20805
|
+
>Test cell 1-6</td>
|
|
20806
|
+
<td
|
|
20807
|
+
class="pf-m-nowrap"
|
|
20808
|
+
role="cell"
|
|
20809
|
+
data-label="Example td"
|
|
20810
|
+
>Test cell 1-7</td>
|
|
20811
|
+
<td
|
|
20812
|
+
class="pf-m-nowrap"
|
|
20813
|
+
role="cell"
|
|
20814
|
+
data-label="Example td"
|
|
20815
|
+
>Test cell 1-8</td>
|
|
20816
|
+
<td
|
|
20817
|
+
class="pf-m-nowrap"
|
|
20818
|
+
role="cell"
|
|
20819
|
+
data-label="Example td"
|
|
20820
|
+
>Test cell 1-9</td>
|
|
20821
|
+
</tr>
|
|
20822
|
+
<tr role="row">
|
|
20823
|
+
<th
|
|
20824
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20825
|
+
role="columnheader"
|
|
20826
|
+
data-label="Example th"
|
|
20827
|
+
scope="col"
|
|
20828
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20829
|
+
>Fact 2</th>
|
|
20830
|
+
<th
|
|
20831
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20832
|
+
role="columnheader"
|
|
20833
|
+
data-label="Example th"
|
|
20834
|
+
scope="col"
|
|
20835
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20836
|
+
>State 2</th>
|
|
20837
|
+
<td
|
|
20838
|
+
class="pf-m-nowrap"
|
|
20839
|
+
role="cell"
|
|
20840
|
+
data-label="Example td"
|
|
20841
|
+
>Test cell 2-3</td>
|
|
20842
|
+
<td
|
|
20843
|
+
class="pf-m-nowrap"
|
|
20844
|
+
role="cell"
|
|
20845
|
+
data-label="Example td"
|
|
20846
|
+
>Test cell 2-4</td>
|
|
20847
|
+
<td
|
|
20848
|
+
class="pf-m-nowrap"
|
|
20849
|
+
role="cell"
|
|
20850
|
+
data-label="Example td"
|
|
20851
|
+
>Test cell 2-5</td>
|
|
20852
|
+
<td
|
|
20853
|
+
class="pf-m-nowrap"
|
|
20854
|
+
role="cell"
|
|
20855
|
+
data-label="Example td"
|
|
20856
|
+
>Test cell 2-6</td>
|
|
20857
|
+
<td
|
|
20858
|
+
class="pf-m-nowrap"
|
|
20859
|
+
role="cell"
|
|
20860
|
+
data-label="Example td"
|
|
20861
|
+
>Test cell 2-7</td>
|
|
20862
|
+
<td
|
|
20863
|
+
class="pf-m-nowrap"
|
|
20864
|
+
role="cell"
|
|
20865
|
+
data-label="Example td"
|
|
20866
|
+
>Test cell 2-8</td>
|
|
20867
|
+
<td
|
|
20868
|
+
class="pf-m-nowrap"
|
|
20869
|
+
role="cell"
|
|
20870
|
+
data-label="Example td"
|
|
20871
|
+
>Test cell 2-9</td>
|
|
20872
|
+
</tr>
|
|
20873
|
+
<tr role="row">
|
|
20874
|
+
<th
|
|
20875
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20876
|
+
role="columnheader"
|
|
20877
|
+
data-label="Example th"
|
|
20878
|
+
scope="col"
|
|
20879
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20880
|
+
>Fact 3</th>
|
|
20881
|
+
<th
|
|
20882
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20883
|
+
role="columnheader"
|
|
20884
|
+
data-label="Example th"
|
|
20885
|
+
scope="col"
|
|
20886
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20887
|
+
>State 3</th>
|
|
20888
|
+
<td
|
|
20889
|
+
class="pf-m-nowrap"
|
|
20890
|
+
role="cell"
|
|
20891
|
+
data-label="Example td"
|
|
20892
|
+
>Test cell 3-3</td>
|
|
20893
|
+
<td
|
|
20894
|
+
class="pf-m-nowrap"
|
|
20895
|
+
role="cell"
|
|
20896
|
+
data-label="Example td"
|
|
20897
|
+
>Test cell 3-4</td>
|
|
20898
|
+
<td
|
|
20899
|
+
class="pf-m-nowrap"
|
|
20900
|
+
role="cell"
|
|
20901
|
+
data-label="Example td"
|
|
20902
|
+
>Test cell 3-5</td>
|
|
20903
|
+
<td
|
|
20904
|
+
class="pf-m-nowrap"
|
|
20905
|
+
role="cell"
|
|
20906
|
+
data-label="Example td"
|
|
20907
|
+
>Test cell 3-6</td>
|
|
20908
|
+
<td
|
|
20909
|
+
class="pf-m-nowrap"
|
|
20910
|
+
role="cell"
|
|
20911
|
+
data-label="Example td"
|
|
20912
|
+
>Test cell 3-7</td>
|
|
20913
|
+
<td
|
|
20914
|
+
class="pf-m-nowrap"
|
|
20915
|
+
role="cell"
|
|
20916
|
+
data-label="Example td"
|
|
20917
|
+
>Test cell 3-8</td>
|
|
20918
|
+
<td
|
|
20919
|
+
class="pf-m-nowrap"
|
|
20920
|
+
role="cell"
|
|
20921
|
+
data-label="Example td"
|
|
20922
|
+
>Test cell 3-9</td>
|
|
20923
|
+
</tr>
|
|
20924
|
+
<tr role="row">
|
|
20925
|
+
<th
|
|
20926
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20927
|
+
role="columnheader"
|
|
20928
|
+
data-label="Example th"
|
|
20929
|
+
scope="col"
|
|
20930
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20931
|
+
>Fact 4</th>
|
|
20932
|
+
<th
|
|
20933
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20934
|
+
role="columnheader"
|
|
20935
|
+
data-label="Example th"
|
|
20936
|
+
scope="col"
|
|
20937
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20938
|
+
>State 4</th>
|
|
20939
|
+
<td
|
|
20940
|
+
class="pf-m-nowrap"
|
|
20941
|
+
role="cell"
|
|
20942
|
+
data-label="Example td"
|
|
20943
|
+
>Test cell 4-3</td>
|
|
20944
|
+
<td
|
|
20945
|
+
class="pf-m-nowrap"
|
|
20946
|
+
role="cell"
|
|
20947
|
+
data-label="Example td"
|
|
20948
|
+
>Test cell 4-4</td>
|
|
20949
|
+
<td
|
|
20950
|
+
class="pf-m-nowrap"
|
|
20951
|
+
role="cell"
|
|
20952
|
+
data-label="Example td"
|
|
20953
|
+
>Test cell 4-5</td>
|
|
20954
|
+
<td
|
|
20955
|
+
class="pf-m-nowrap"
|
|
20956
|
+
role="cell"
|
|
20957
|
+
data-label="Example td"
|
|
20958
|
+
>Test cell 4-6</td>
|
|
20959
|
+
<td
|
|
20960
|
+
class="pf-m-nowrap"
|
|
20961
|
+
role="cell"
|
|
20962
|
+
data-label="Example td"
|
|
20963
|
+
>Test cell 4-7</td>
|
|
20964
|
+
<td
|
|
20965
|
+
class="pf-m-nowrap"
|
|
20966
|
+
role="cell"
|
|
20967
|
+
data-label="Example td"
|
|
20968
|
+
>Test cell 4-8</td>
|
|
20969
|
+
<td
|
|
20970
|
+
class="pf-m-nowrap"
|
|
20971
|
+
role="cell"
|
|
20972
|
+
data-label="Example td"
|
|
20973
|
+
>Test cell 4-9</td>
|
|
20974
|
+
</tr>
|
|
20975
|
+
<tr role="row">
|
|
20976
|
+
<th
|
|
20977
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
20978
|
+
role="columnheader"
|
|
20979
|
+
data-label="Example th"
|
|
20980
|
+
scope="col"
|
|
20981
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20982
|
+
>Fact 5</th>
|
|
20983
|
+
<th
|
|
20984
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
20985
|
+
role="columnheader"
|
|
20986
|
+
data-label="Example th"
|
|
20987
|
+
scope="col"
|
|
20988
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20989
|
+
>State 5</th>
|
|
20990
|
+
<td
|
|
20991
|
+
class="pf-m-nowrap"
|
|
20992
|
+
role="cell"
|
|
20993
|
+
data-label="Example td"
|
|
20994
|
+
>Test cell 5-3</td>
|
|
20995
|
+
<td
|
|
20996
|
+
class="pf-m-nowrap"
|
|
20997
|
+
role="cell"
|
|
20998
|
+
data-label="Example td"
|
|
20999
|
+
>Test cell 5-4</td>
|
|
21000
|
+
<td
|
|
21001
|
+
class="pf-m-nowrap"
|
|
21002
|
+
role="cell"
|
|
21003
|
+
data-label="Example td"
|
|
21004
|
+
>Test cell 5-5</td>
|
|
21005
|
+
<td
|
|
21006
|
+
class="pf-m-nowrap"
|
|
21007
|
+
role="cell"
|
|
21008
|
+
data-label="Example td"
|
|
21009
|
+
>Test cell 5-6</td>
|
|
21010
|
+
<td
|
|
21011
|
+
class="pf-m-nowrap"
|
|
21012
|
+
role="cell"
|
|
21013
|
+
data-label="Example td"
|
|
21014
|
+
>Test cell 5-7</td>
|
|
21015
|
+
<td
|
|
21016
|
+
class="pf-m-nowrap"
|
|
21017
|
+
role="cell"
|
|
21018
|
+
data-label="Example td"
|
|
21019
|
+
>Test cell 5-8</td>
|
|
21020
|
+
<td
|
|
21021
|
+
class="pf-m-nowrap"
|
|
21022
|
+
role="cell"
|
|
21023
|
+
data-label="Example td"
|
|
21024
|
+
>Test cell 5-9</td>
|
|
21025
|
+
</tr>
|
|
21026
|
+
<tr role="row">
|
|
21027
|
+
<th
|
|
21028
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
21029
|
+
role="columnheader"
|
|
21030
|
+
data-label="Example th"
|
|
21031
|
+
scope="col"
|
|
21032
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
21033
|
+
>Fact 6</th>
|
|
21034
|
+
<th
|
|
21035
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
21036
|
+
role="columnheader"
|
|
21037
|
+
data-label="Example th"
|
|
21038
|
+
scope="col"
|
|
21039
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
21040
|
+
>State 6</th>
|
|
21041
|
+
<td
|
|
21042
|
+
class="pf-m-nowrap"
|
|
21043
|
+
role="cell"
|
|
21044
|
+
data-label="Example td"
|
|
21045
|
+
>Test cell 6-3</td>
|
|
21046
|
+
<td
|
|
21047
|
+
class="pf-m-nowrap"
|
|
21048
|
+
role="cell"
|
|
21049
|
+
data-label="Example td"
|
|
21050
|
+
>Test cell 6-4</td>
|
|
21051
|
+
<td
|
|
21052
|
+
class="pf-m-nowrap"
|
|
21053
|
+
role="cell"
|
|
21054
|
+
data-label="Example td"
|
|
21055
|
+
>Test cell 6-5</td>
|
|
21056
|
+
<td
|
|
21057
|
+
class="pf-m-nowrap"
|
|
21058
|
+
role="cell"
|
|
21059
|
+
data-label="Example td"
|
|
21060
|
+
>Test cell 6-6</td>
|
|
21061
|
+
<td
|
|
21062
|
+
class="pf-m-nowrap"
|
|
21063
|
+
role="cell"
|
|
21064
|
+
data-label="Example td"
|
|
21065
|
+
>Test cell 6-7</td>
|
|
21066
|
+
<td
|
|
21067
|
+
class="pf-m-nowrap"
|
|
21068
|
+
role="cell"
|
|
21069
|
+
data-label="Example td"
|
|
21070
|
+
>Test cell 6-8</td>
|
|
21071
|
+
<td
|
|
21072
|
+
class="pf-m-nowrap"
|
|
21073
|
+
role="cell"
|
|
21074
|
+
data-label="Example td"
|
|
21075
|
+
>Test cell 6-9</td>
|
|
21076
|
+
</tr>
|
|
21077
|
+
<tr role="row">
|
|
21078
|
+
<th
|
|
21079
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
21080
|
+
role="columnheader"
|
|
21081
|
+
data-label="Example th"
|
|
21082
|
+
scope="col"
|
|
21083
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
21084
|
+
>Fact 7</th>
|
|
21085
|
+
<th
|
|
21086
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
21087
|
+
role="columnheader"
|
|
21088
|
+
data-label="Example th"
|
|
21089
|
+
scope="col"
|
|
21090
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
21091
|
+
>State 7</th>
|
|
21092
|
+
<td
|
|
21093
|
+
class="pf-m-nowrap"
|
|
21094
|
+
role="cell"
|
|
21095
|
+
data-label="Example td"
|
|
21096
|
+
>Test cell 7-3</td>
|
|
21097
|
+
<td
|
|
21098
|
+
class="pf-m-nowrap"
|
|
21099
|
+
role="cell"
|
|
21100
|
+
data-label="Example td"
|
|
21101
|
+
>Test cell 7-4</td>
|
|
21102
|
+
<td
|
|
21103
|
+
class="pf-m-nowrap"
|
|
21104
|
+
role="cell"
|
|
21105
|
+
data-label="Example td"
|
|
21106
|
+
>Test cell 7-5</td>
|
|
21107
|
+
<td
|
|
21108
|
+
class="pf-m-nowrap"
|
|
21109
|
+
role="cell"
|
|
21110
|
+
data-label="Example td"
|
|
21111
|
+
>Test cell 7-6</td>
|
|
21112
|
+
<td
|
|
21113
|
+
class="pf-m-nowrap"
|
|
21114
|
+
role="cell"
|
|
21115
|
+
data-label="Example td"
|
|
21116
|
+
>Test cell 7-7</td>
|
|
21117
|
+
<td
|
|
21118
|
+
class="pf-m-nowrap"
|
|
21119
|
+
role="cell"
|
|
21120
|
+
data-label="Example td"
|
|
21121
|
+
>Test cell 7-8</td>
|
|
21122
|
+
<td
|
|
21123
|
+
class="pf-m-nowrap"
|
|
21124
|
+
role="cell"
|
|
21125
|
+
data-label="Example td"
|
|
21126
|
+
>Test cell 7-9</td>
|
|
21127
|
+
</tr>
|
|
21128
|
+
<tr role="row">
|
|
21129
|
+
<th
|
|
21130
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
21131
|
+
role="columnheader"
|
|
21132
|
+
data-label="Example th"
|
|
21133
|
+
scope="col"
|
|
21134
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
21135
|
+
>Fact 8</th>
|
|
21136
|
+
<th
|
|
21137
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
21138
|
+
role="columnheader"
|
|
21139
|
+
data-label="Example th"
|
|
21140
|
+
scope="col"
|
|
21141
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
21142
|
+
>State 8</th>
|
|
21143
|
+
<td
|
|
21144
|
+
class="pf-m-nowrap"
|
|
21145
|
+
role="cell"
|
|
21146
|
+
data-label="Example td"
|
|
21147
|
+
>Test cell 8-3</td>
|
|
21148
|
+
<td
|
|
21149
|
+
class="pf-m-nowrap"
|
|
21150
|
+
role="cell"
|
|
21151
|
+
data-label="Example td"
|
|
21152
|
+
>Test cell 8-4</td>
|
|
21153
|
+
<td
|
|
21154
|
+
class="pf-m-nowrap"
|
|
21155
|
+
role="cell"
|
|
21156
|
+
data-label="Example td"
|
|
21157
|
+
>Test cell 8-5</td>
|
|
21158
|
+
<td
|
|
21159
|
+
class="pf-m-nowrap"
|
|
21160
|
+
role="cell"
|
|
21161
|
+
data-label="Example td"
|
|
21162
|
+
>Test cell 8-6</td>
|
|
21163
|
+
<td
|
|
21164
|
+
class="pf-m-nowrap"
|
|
21165
|
+
role="cell"
|
|
21166
|
+
data-label="Example td"
|
|
21167
|
+
>Test cell 8-7</td>
|
|
21168
|
+
<td
|
|
21169
|
+
class="pf-m-nowrap"
|
|
21170
|
+
role="cell"
|
|
21171
|
+
data-label="Example td"
|
|
21172
|
+
>Test cell 8-8</td>
|
|
21173
|
+
<td
|
|
21174
|
+
class="pf-m-nowrap"
|
|
21175
|
+
role="cell"
|
|
21176
|
+
data-label="Example td"
|
|
21177
|
+
>Test cell 8-9</td>
|
|
21178
|
+
</tr>
|
|
21179
|
+
<tr role="row">
|
|
21180
|
+
<th
|
|
21181
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
21182
|
+
role="columnheader"
|
|
21183
|
+
data-label="Example th"
|
|
21184
|
+
scope="col"
|
|
21185
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
21186
|
+
>Fact 9</th>
|
|
21187
|
+
<th
|
|
21188
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
21189
|
+
role="columnheader"
|
|
21190
|
+
data-label="Example th"
|
|
21191
|
+
scope="col"
|
|
21192
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
21193
|
+
>State 9</th>
|
|
21194
|
+
<td
|
|
21195
|
+
class="pf-m-nowrap"
|
|
21196
|
+
role="cell"
|
|
21197
|
+
data-label="Example td"
|
|
21198
|
+
>Test cell 9-3</td>
|
|
21199
|
+
<td
|
|
21200
|
+
class="pf-m-nowrap"
|
|
21201
|
+
role="cell"
|
|
21202
|
+
data-label="Example td"
|
|
21203
|
+
>Test cell 9-4</td>
|
|
21204
|
+
<td
|
|
21205
|
+
class="pf-m-nowrap"
|
|
21206
|
+
role="cell"
|
|
21207
|
+
data-label="Example td"
|
|
21208
|
+
>Test cell 9-5</td>
|
|
21209
|
+
<td
|
|
21210
|
+
class="pf-m-nowrap"
|
|
21211
|
+
role="cell"
|
|
21212
|
+
data-label="Example td"
|
|
21213
|
+
>Test cell 9-6</td>
|
|
21214
|
+
<td
|
|
21215
|
+
class="pf-m-nowrap"
|
|
21216
|
+
role="cell"
|
|
21217
|
+
data-label="Example td"
|
|
21218
|
+
>Test cell 9-7</td>
|
|
21219
|
+
<td
|
|
21220
|
+
class="pf-m-nowrap"
|
|
21221
|
+
role="cell"
|
|
21222
|
+
data-label="Example td"
|
|
21223
|
+
>Test cell 9-8</td>
|
|
21224
|
+
<td
|
|
21225
|
+
class="pf-m-nowrap"
|
|
21226
|
+
role="cell"
|
|
21227
|
+
data-label="Example td"
|
|
21228
|
+
>Test cell 9-9</td>
|
|
21229
|
+
</tr>
|
|
21230
|
+
</tbody>
|
|
21231
|
+
</table>
|
|
19141
21232
|
</div>
|
|
19142
21233
|
</div>
|
|
21234
|
+
|
|
19143
21235
|
```
|
|
19144
21236
|
|
|
19145
21237
|
### Sticky column usage
|