@patternfly/patternfly 6.6.0-prerelease.6 → 6.6.0-prerelease.7
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/components/Table/table.css +27 -0
- package/components/Table/table.scss +43 -4
- package/components/_index.css +27 -0
- package/docs/components/Table/examples/Table.css +6 -0
- package/docs/components/Table/examples/Table.md +280 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +27 -0
- package/patternfly.css +27 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -175,6 +175,8 @@
|
|
|
175
175
|
--pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
176
176
|
--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
177
177
|
--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
178
|
+
--pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
179
|
+
--pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
178
180
|
}
|
|
179
181
|
:where(.pf-v6-theme-glass) .pf-v6-c-table {
|
|
180
182
|
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -244,6 +246,26 @@
|
|
|
244
246
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
245
247
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
246
248
|
}
|
|
249
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
|
|
250
|
+
position: sticky;
|
|
251
|
+
inset-block-end: 0;
|
|
252
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
|
|
253
|
+
background: var(--pf-v6-c-table--BackgroundColor);
|
|
254
|
+
}
|
|
255
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
|
|
256
|
+
position: absolute;
|
|
257
|
+
inset: 0;
|
|
258
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
|
|
259
|
+
pointer-events: none;
|
|
260
|
+
content: "";
|
|
261
|
+
border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
262
|
+
}
|
|
263
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
|
|
264
|
+
border-block-end: 0;
|
|
265
|
+
}
|
|
266
|
+
.pf-v6-c-table.pf-m-plain {
|
|
267
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
268
|
+
}
|
|
247
269
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
248
270
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
249
271
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -978,6 +1000,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
978
1000
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
979
1001
|
}
|
|
980
1002
|
|
|
1003
|
+
.pf-v6-c-table__tfoot {
|
|
1004
|
+
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
1005
|
+
vertical-align: top;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
981
1008
|
.pf-v6-c-table__icon-inline {
|
|
982
1009
|
display: flex;
|
|
983
1010
|
align-items: center;
|
|
@@ -269,6 +269,10 @@
|
|
|
269
269
|
--#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
270
270
|
--#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
271
271
|
--#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
272
|
+
|
|
273
|
+
// * Table sticky footer
|
|
274
|
+
--#{$table}--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
275
|
+
--#{$table}--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
272
276
|
|
|
273
277
|
:where(.pf-v6-theme-glass) & {
|
|
274
278
|
--#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -373,6 +377,34 @@
|
|
|
373
377
|
}
|
|
374
378
|
}
|
|
375
379
|
|
|
380
|
+
// - Table sticky footer
|
|
381
|
+
&.pf-m-sticky-footer {
|
|
382
|
+
> .#{$table}__tfoot {
|
|
383
|
+
position: sticky;
|
|
384
|
+
inset-block-end: 0;
|
|
385
|
+
z-index: var(--#{$table}--m-sticky-footer--ZIndex);
|
|
386
|
+
background: var(--#{$table}--BackgroundColor);
|
|
387
|
+
|
|
388
|
+
&::before {
|
|
389
|
+
position: absolute;
|
|
390
|
+
inset: 0;
|
|
391
|
+
z-index: var(--#{$table}--m-sticky-footer--border--ZIndex);
|
|
392
|
+
pointer-events: none;
|
|
393
|
+
content: "";
|
|
394
|
+
border-block-start: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
> .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
|
|
399
|
+
border-block-end: 0;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
// - Table plain
|
|
404
|
+
&.pf-m-plain {
|
|
405
|
+
--#{$table}--BackgroundColor: transparent;
|
|
406
|
+
}
|
|
407
|
+
|
|
376
408
|
// - Table striped
|
|
377
409
|
// stylelint-disable
|
|
378
410
|
&.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
|
|
@@ -544,8 +576,8 @@
|
|
|
544
576
|
// }
|
|
545
577
|
|
|
546
578
|
.#{$table}__td.pf-m-action {
|
|
547
|
-
|
|
548
|
-
|
|
579
|
+
--#{$table}--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
|
|
580
|
+
--#{$table}--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
|
|
549
581
|
}
|
|
550
582
|
|
|
551
583
|
// - Table sort
|
|
@@ -1235,8 +1267,8 @@
|
|
|
1235
1267
|
}
|
|
1236
1268
|
|
|
1237
1269
|
.#{$table}__td.pf-m-action {
|
|
1238
|
-
|
|
1239
|
-
|
|
1270
|
+
--#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
|
|
1271
|
+
--#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
|
|
1240
1272
|
}
|
|
1241
1273
|
|
|
1242
1274
|
.#{$table}__icon {
|
|
@@ -1331,6 +1363,13 @@
|
|
|
1331
1363
|
}
|
|
1332
1364
|
}
|
|
1333
1365
|
|
|
1366
|
+
// - Table tfoot
|
|
1367
|
+
.#{$table}__tfoot {
|
|
1368
|
+
--#{$table}__tr--BorderBlockEndWidth: 0;
|
|
1369
|
+
|
|
1370
|
+
vertical-align: top;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1334
1373
|
// - Table icon inline
|
|
1335
1374
|
.#{$table}__icon-inline {
|
|
1336
1375
|
display: flex;
|
package/components/_index.css
CHANGED
|
@@ -19477,6 +19477,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
19477
19477
|
--pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
19478
19478
|
--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
19479
19479
|
--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
19480
|
+
--pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
19481
|
+
--pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
19480
19482
|
}
|
|
19481
19483
|
:where(.pf-v6-theme-glass) .pf-v6-c-table {
|
|
19482
19484
|
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -19546,6 +19548,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
19546
19548
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
19547
19549
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
19548
19550
|
}
|
|
19551
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
|
|
19552
|
+
position: sticky;
|
|
19553
|
+
inset-block-end: 0;
|
|
19554
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
|
|
19555
|
+
background: var(--pf-v6-c-table--BackgroundColor);
|
|
19556
|
+
}
|
|
19557
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
|
|
19558
|
+
position: absolute;
|
|
19559
|
+
inset: 0;
|
|
19560
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
|
|
19561
|
+
pointer-events: none;
|
|
19562
|
+
content: "";
|
|
19563
|
+
border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
19564
|
+
}
|
|
19565
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
|
|
19566
|
+
border-block-end: 0;
|
|
19567
|
+
}
|
|
19568
|
+
.pf-v6-c-table.pf-m-plain {
|
|
19569
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
19570
|
+
}
|
|
19549
19571
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
19550
19572
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
19551
19573
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -20280,6 +20302,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
20280
20302
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
20281
20303
|
}
|
|
20282
20304
|
|
|
20305
|
+
.pf-v6-c-table__tfoot {
|
|
20306
|
+
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
20307
|
+
vertical-align: top;
|
|
20308
|
+
}
|
|
20309
|
+
|
|
20283
20310
|
.pf-v6-c-table__icon-inline {
|
|
20284
20311
|
display: flex;
|
|
20285
20312
|
align-items: center;
|
|
@@ -12,10 +12,16 @@
|
|
|
12
12
|
#ws-core-c-table-sticky-columns-and-header .ws-preview-html,
|
|
13
13
|
#ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
|
|
14
14
|
#ws-core-c-table-sticky-header .ws-preview-html,
|
|
15
|
+
#ws-core-c-table-sticky-footer .ws-preview-html,
|
|
15
16
|
#ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html {
|
|
16
17
|
height: 400px;
|
|
17
18
|
}
|
|
18
19
|
|
|
20
|
+
#ws-core-c-table-sticky-header .ws-preview-html,
|
|
21
|
+
#ws-core-c-table-sticky-footer .ws-preview-html {
|
|
22
|
+
overflow: auto;
|
|
23
|
+
}
|
|
24
|
+
|
|
19
25
|
.pf-v6-c-overflow-menu .pf-v6-c-menu {
|
|
20
26
|
position: absolute;
|
|
21
27
|
inset-inline-end: 0;
|
|
@@ -24318,6 +24318,174 @@ This example shows the use of `.pf-m-sticky-header-base` and `.pf-m-sticky-heade
|
|
|
24318
24318
|
|
|
24319
24319
|
```
|
|
24320
24320
|
|
|
24321
|
+
### Sticky footer
|
|
24322
|
+
|
|
24323
|
+
```html
|
|
24324
|
+
<table
|
|
24325
|
+
class="pf-v6-c-table pf-m-grid-md pf-m-sticky-footer"
|
|
24326
|
+
role="grid"
|
|
24327
|
+
aria-label="This is a table with a sticky footer"
|
|
24328
|
+
id="table-sticky-footer"
|
|
24329
|
+
>
|
|
24330
|
+
<thead class="pf-v6-c-table__thead">
|
|
24331
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24332
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
|
|
24333
|
+
|
|
24334
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
|
|
24335
|
+
|
|
24336
|
+
<th
|
|
24337
|
+
class="pf-v6-c-table__th"
|
|
24338
|
+
role="columnheader"
|
|
24339
|
+
scope="col"
|
|
24340
|
+
>Pull requests</th>
|
|
24341
|
+
|
|
24342
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
|
|
24343
|
+
|
|
24344
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
|
|
24345
|
+
</tr>
|
|
24346
|
+
</thead>
|
|
24347
|
+
|
|
24348
|
+
<tbody class="pf-v6-c-table__tbody" role="rowgroup">
|
|
24349
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24350
|
+
<td
|
|
24351
|
+
class="pf-v6-c-table__td"
|
|
24352
|
+
role="cell"
|
|
24353
|
+
data-label="Repository name"
|
|
24354
|
+
>Repository 1</td>
|
|
24355
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24356
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24357
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24358
|
+
<td
|
|
24359
|
+
class="pf-v6-c-table__td"
|
|
24360
|
+
role="cell"
|
|
24361
|
+
data-label="Last commit"
|
|
24362
|
+
>2 days ago</td>
|
|
24363
|
+
</tr>
|
|
24364
|
+
|
|
24365
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24366
|
+
<td
|
|
24367
|
+
class="pf-v6-c-table__td"
|
|
24368
|
+
role="cell"
|
|
24369
|
+
data-label="Repository name"
|
|
24370
|
+
>Repository 2</td>
|
|
24371
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24372
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24373
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24374
|
+
<td
|
|
24375
|
+
class="pf-v6-c-table__td"
|
|
24376
|
+
role="cell"
|
|
24377
|
+
data-label="Last commit"
|
|
24378
|
+
>2 days ago</td>
|
|
24379
|
+
</tr>
|
|
24380
|
+
|
|
24381
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24382
|
+
<td
|
|
24383
|
+
class="pf-v6-c-table__td"
|
|
24384
|
+
role="cell"
|
|
24385
|
+
data-label="Repository name"
|
|
24386
|
+
>Repository 3</td>
|
|
24387
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24388
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24389
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24390
|
+
<td
|
|
24391
|
+
class="pf-v6-c-table__td"
|
|
24392
|
+
role="cell"
|
|
24393
|
+
data-label="Last commit"
|
|
24394
|
+
>2 days ago</td>
|
|
24395
|
+
</tr>
|
|
24396
|
+
|
|
24397
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24398
|
+
<td
|
|
24399
|
+
class="pf-v6-c-table__td"
|
|
24400
|
+
role="cell"
|
|
24401
|
+
data-label="Repository name"
|
|
24402
|
+
>Repository 4</td>
|
|
24403
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24404
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24405
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24406
|
+
<td
|
|
24407
|
+
class="pf-v6-c-table__td"
|
|
24408
|
+
role="cell"
|
|
24409
|
+
data-label="Last commit"
|
|
24410
|
+
>2 days ago</td>
|
|
24411
|
+
</tr>
|
|
24412
|
+
|
|
24413
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24414
|
+
<td
|
|
24415
|
+
class="pf-v6-c-table__td"
|
|
24416
|
+
role="cell"
|
|
24417
|
+
data-label="Repository name"
|
|
24418
|
+
>Repository 5</td>
|
|
24419
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24420
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24421
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24422
|
+
<td
|
|
24423
|
+
class="pf-v6-c-table__td"
|
|
24424
|
+
role="cell"
|
|
24425
|
+
data-label="Last commit"
|
|
24426
|
+
>2 days ago</td>
|
|
24427
|
+
</tr>
|
|
24428
|
+
|
|
24429
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24430
|
+
<td
|
|
24431
|
+
class="pf-v6-c-table__td"
|
|
24432
|
+
role="cell"
|
|
24433
|
+
data-label="Repository name"
|
|
24434
|
+
>Repository 6</td>
|
|
24435
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24436
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24437
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24438
|
+
<td
|
|
24439
|
+
class="pf-v6-c-table__td"
|
|
24440
|
+
role="cell"
|
|
24441
|
+
data-label="Last commit"
|
|
24442
|
+
>2 days ago</td>
|
|
24443
|
+
</tr>
|
|
24444
|
+
|
|
24445
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24446
|
+
<td
|
|
24447
|
+
class="pf-v6-c-table__td"
|
|
24448
|
+
role="cell"
|
|
24449
|
+
data-label="Repository name"
|
|
24450
|
+
>Repository 7</td>
|
|
24451
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24452
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24453
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24454
|
+
<td
|
|
24455
|
+
class="pf-v6-c-table__td"
|
|
24456
|
+
role="cell"
|
|
24457
|
+
data-label="Last commit"
|
|
24458
|
+
>2 days ago</td>
|
|
24459
|
+
</tr>
|
|
24460
|
+
|
|
24461
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24462
|
+
<td
|
|
24463
|
+
class="pf-v6-c-table__td"
|
|
24464
|
+
role="cell"
|
|
24465
|
+
data-label="Repository name"
|
|
24466
|
+
>Repository 8</td>
|
|
24467
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
24468
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
24469
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
24470
|
+
<td
|
|
24471
|
+
class="pf-v6-c-table__td"
|
|
24472
|
+
role="cell"
|
|
24473
|
+
data-label="Last commit"
|
|
24474
|
+
>2 days ago</td>
|
|
24475
|
+
</tr>
|
|
24476
|
+
</tbody>
|
|
24477
|
+
|
|
24478
|
+
<tfoot class="pf-v6-c-table__tfoot">
|
|
24479
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
24480
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="row">Total nodes</th>
|
|
24481
|
+
|
|
24482
|
+
<td class="pf-v6-c-table__td" role="cell" colspan="4">4</td>
|
|
24483
|
+
</tr>
|
|
24484
|
+
</tfoot>
|
|
24485
|
+
</table>
|
|
24486
|
+
|
|
24487
|
+
```
|
|
24488
|
+
|
|
24321
24489
|
### Sticky column
|
|
24322
24490
|
|
|
24323
24491
|
```html
|
|
@@ -31503,6 +31671,118 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
|
|
|
31503
31671
|
| `.pf-m-striped` | `.pf-v6-c-table`, `tbody`, `tr` | Modifies odd table rows to be striped. |
|
|
31504
31672
|
| `.pf-m-striped-even` | `tbody` | Modifies even table rows to be striped. For use in tables with multiple `tbody` elements where adjacent `tbody` elements need even row striping to maintain visual consistency. |
|
|
31505
31673
|
|
|
31674
|
+
## Table footer
|
|
31675
|
+
|
|
31676
|
+
### Table footer example
|
|
31677
|
+
|
|
31678
|
+
```html
|
|
31679
|
+
<table
|
|
31680
|
+
class="pf-v6-c-table pf-m-grid-md"
|
|
31681
|
+
role="grid"
|
|
31682
|
+
aria-label="This is a table with a footer example"
|
|
31683
|
+
id="table-footer"
|
|
31684
|
+
>
|
|
31685
|
+
<thead class="pf-v6-c-table__thead">
|
|
31686
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
31687
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
|
|
31688
|
+
|
|
31689
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
|
|
31690
|
+
|
|
31691
|
+
<th
|
|
31692
|
+
class="pf-v6-c-table__th"
|
|
31693
|
+
role="columnheader"
|
|
31694
|
+
scope="col"
|
|
31695
|
+
>Pull requests</th>
|
|
31696
|
+
|
|
31697
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
|
|
31698
|
+
|
|
31699
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
|
|
31700
|
+
</tr>
|
|
31701
|
+
</thead>
|
|
31702
|
+
|
|
31703
|
+
<tbody class="pf-v6-c-table__tbody" role="rowgroup">
|
|
31704
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
31705
|
+
<td
|
|
31706
|
+
class="pf-v6-c-table__td"
|
|
31707
|
+
role="cell"
|
|
31708
|
+
data-label="Repository name"
|
|
31709
|
+
>Repository 1</td>
|
|
31710
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
31711
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
31712
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
31713
|
+
<td
|
|
31714
|
+
class="pf-v6-c-table__td"
|
|
31715
|
+
role="cell"
|
|
31716
|
+
data-label="Last commit"
|
|
31717
|
+
>2 days ago</td>
|
|
31718
|
+
</tr>
|
|
31719
|
+
|
|
31720
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
31721
|
+
<td
|
|
31722
|
+
class="pf-v6-c-table__td"
|
|
31723
|
+
role="cell"
|
|
31724
|
+
data-label="Repository name"
|
|
31725
|
+
>Repository 2</td>
|
|
31726
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
31727
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
31728
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
31729
|
+
<td
|
|
31730
|
+
class="pf-v6-c-table__td"
|
|
31731
|
+
role="cell"
|
|
31732
|
+
data-label="Last commit"
|
|
31733
|
+
>2 days ago</td>
|
|
31734
|
+
</tr>
|
|
31735
|
+
|
|
31736
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
31737
|
+
<td
|
|
31738
|
+
class="pf-v6-c-table__td"
|
|
31739
|
+
role="cell"
|
|
31740
|
+
data-label="Repository name"
|
|
31741
|
+
>Repository 3</td>
|
|
31742
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
31743
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
31744
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
31745
|
+
<td
|
|
31746
|
+
class="pf-v6-c-table__td"
|
|
31747
|
+
role="cell"
|
|
31748
|
+
data-label="Last commit"
|
|
31749
|
+
>2 days ago</td>
|
|
31750
|
+
</tr>
|
|
31751
|
+
|
|
31752
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
31753
|
+
<td
|
|
31754
|
+
class="pf-v6-c-table__td"
|
|
31755
|
+
role="cell"
|
|
31756
|
+
data-label="Repository name"
|
|
31757
|
+
>Repository 4</td>
|
|
31758
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
|
|
31759
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
|
|
31760
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
|
|
31761
|
+
<td
|
|
31762
|
+
class="pf-v6-c-table__td"
|
|
31763
|
+
role="cell"
|
|
31764
|
+
data-label="Last commit"
|
|
31765
|
+
>2 days ago</td>
|
|
31766
|
+
</tr>
|
|
31767
|
+
</tbody>
|
|
31768
|
+
|
|
31769
|
+
<tfoot class="pf-v6-c-table__tfoot">
|
|
31770
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
31771
|
+
<th class="pf-v6-c-table__th" role="columnheader" scope="row">Total nodes</th>
|
|
31772
|
+
|
|
31773
|
+
<td class="pf-v6-c-table__td" role="cell" colspan="4">4</td>
|
|
31774
|
+
</tr>
|
|
31775
|
+
</tfoot>
|
|
31776
|
+
</table>
|
|
31777
|
+
|
|
31778
|
+
```
|
|
31779
|
+
|
|
31780
|
+
### Table footer usage
|
|
31781
|
+
|
|
31782
|
+
| Class | Applied to | Outcome |
|
|
31783
|
+
| -- | -- | -- |
|
|
31784
|
+
| `.pf-v6-c-table__tfoot` | `tfoot` | Initiates a table footer. |
|
|
31785
|
+
|
|
31506
31786
|
## Documentation
|
|
31507
31787
|
|
|
31508
31788
|
### Overview
|
package/package.json
CHANGED
|
@@ -28733,6 +28733,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
28733
28733
|
--pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
28734
28734
|
--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
28735
28735
|
--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
28736
|
+
--pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
28737
|
+
--pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
28736
28738
|
}
|
|
28737
28739
|
:where(.pf-v6-theme-glass) .pf-v6-c-table {
|
|
28738
28740
|
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -28802,6 +28804,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
28802
28804
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
28803
28805
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
28804
28806
|
}
|
|
28807
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
|
|
28808
|
+
position: sticky;
|
|
28809
|
+
inset-block-end: 0;
|
|
28810
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
|
|
28811
|
+
background: var(--pf-v6-c-table--BackgroundColor);
|
|
28812
|
+
}
|
|
28813
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
|
|
28814
|
+
position: absolute;
|
|
28815
|
+
inset: 0;
|
|
28816
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
|
|
28817
|
+
pointer-events: none;
|
|
28818
|
+
content: "";
|
|
28819
|
+
border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
28820
|
+
}
|
|
28821
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
|
|
28822
|
+
border-block-end: 0;
|
|
28823
|
+
}
|
|
28824
|
+
.pf-v6-c-table.pf-m-plain {
|
|
28825
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
28826
|
+
}
|
|
28805
28827
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
28806
28828
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
28807
28829
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -29536,6 +29558,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29536
29558
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
29537
29559
|
}
|
|
29538
29560
|
|
|
29561
|
+
.pf-v6-c-table__tfoot {
|
|
29562
|
+
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
29563
|
+
vertical-align: top;
|
|
29564
|
+
}
|
|
29565
|
+
|
|
29539
29566
|
.pf-v6-c-table__icon-inline {
|
|
29540
29567
|
display: flex;
|
|
29541
29568
|
align-items: center;
|
package/patternfly.css
CHANGED
|
@@ -28888,6 +28888,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
28888
28888
|
--pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
28889
28889
|
--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
28890
28890
|
--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
28891
|
+
--pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
28892
|
+
--pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
28891
28893
|
}
|
|
28892
28894
|
:where(.pf-v6-theme-glass) .pf-v6-c-table {
|
|
28893
28895
|
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -28957,6 +28959,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
28957
28959
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
28958
28960
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
28959
28961
|
}
|
|
28962
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
|
|
28963
|
+
position: sticky;
|
|
28964
|
+
inset-block-end: 0;
|
|
28965
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
|
|
28966
|
+
background: var(--pf-v6-c-table--BackgroundColor);
|
|
28967
|
+
}
|
|
28968
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
|
|
28969
|
+
position: absolute;
|
|
28970
|
+
inset: 0;
|
|
28971
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
|
|
28972
|
+
pointer-events: none;
|
|
28973
|
+
content: "";
|
|
28974
|
+
border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
28975
|
+
}
|
|
28976
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
|
|
28977
|
+
border-block-end: 0;
|
|
28978
|
+
}
|
|
28979
|
+
.pf-v6-c-table.pf-m-plain {
|
|
28980
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
28981
|
+
}
|
|
28960
28982
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
28961
28983
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
28962
28984
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -29691,6 +29713,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29691
29713
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
29692
29714
|
}
|
|
29693
29715
|
|
|
29716
|
+
.pf-v6-c-table__tfoot {
|
|
29717
|
+
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
29718
|
+
vertical-align: top;
|
|
29719
|
+
}
|
|
29720
|
+
|
|
29694
29721
|
.pf-v6-c-table__icon-inline {
|
|
29695
29722
|
display: flex;
|
|
29696
29723
|
align-items: center;
|