@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -42,13 +42,13 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
44
44
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
45
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z17uPqv" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1213"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="2pDHse" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-405"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1214"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1215"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-405"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/table/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/table/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7862" data-pf-content="true" class="pf-v6-c-content--p">import ’./Table.css’</p>
|
|
46
|
-
<h1 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
48
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="e5a0E" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1159"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="1mo0Kg" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-387"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1160"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1161"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-387"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/table/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/table/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7515" data-pf-content="true" class="pf-v6-c-content--p">import ’./Table.css’</p>
|
|
46
|
+
<h1 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7516" data-pf-content="true" class="pf-v6-c-content--h1">Examples</h1>
|
|
47
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7517" data-pf-content="true" class="pf-v6-c-content--h2">Basic table</h2>
|
|
48
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7518" data-pf-content="true" class="pf-v6-c-content--h3">Basic table example</h3>
|
|
49
49
|
|
|
50
50
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1v5nzb" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a simple table example\"\n id=\"table-basic\"\n>\n <caption class=\"pf-v6-c-table__caption\">This is the table caption</caption>\n\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
51
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
51
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7519" data-pf-content="true" class="pf-v6-c-content--h3">Basic table accessibility</h3>
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
|
|
76
76
|
|
|
77
77
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role="grid"</code></td><td><code>.pf-v6-c-table</code></td><td>Identifies the element that serves as the grid widget container. <strong>Required</strong></td></tr><tr><td><code>aria-label</code></td><td><code>.pf-v6-c-table</code></td><td>Provides an accessible name for the table when a descriptive <code><caption></code> or <code><h*></code> is not available. <strong>Required in the absence of <code><caption></code> or <code><h*></code></strong></td></tr><tr><td><code>data-label="[td description]"</code></td><td><code><td></code></td><td>This attribute replaces table header in mobile viewport. It is rendered by <code>::before</code> pseudo element.</td></tr></tbody></table>
|
|
78
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
78
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7520" data-pf-content="true" class="pf-v6-c-content--h3">Basic table usage</h3>
|
|
79
79
|
|
|
80
80
|
|
|
81
81
|
|
|
@@ -132,9 +132,9 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table</code></td><td><code><table></code></td><td>Initiates a table element. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-table__thead</code></td><td><code><tr></code></td><td>Initiates a table header. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-table__tbody</code></td><td><code><tr></code></td><td>Initiates a table body. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-table__tfoot</code></td><td><code><tr></code></td><td>Initiates a table footer.</td></tr><tr><td><code>.pf-v6-c-table__tr</code></td><td><code><tr></code></td><td>Initiates a table row. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-table__th</code></td><td><code><th></code></td><td>Initiates a table header cell. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-table__td</code></td><td><code><td></code></td><td>Initiates a table data cell. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-table__caption</code></td><td><code><caption></code></td><td>Initiates a table caption.</td></tr><tr><td><code>.pf-m-center</code></td><td><code><th></code>, <code><td></code></td><td>Modifies cell to center its contents.</td></tr></tbody></table>
|
|
135
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
136
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
137
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
135
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7521" data-pf-content="true" class="pf-v6-c-content--h2">Responsive table behavior</h2>
|
|
136
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7522" data-pf-content="true" class="pf-v6-c-content--h3">Responsive layout modifier usage</h3>
|
|
137
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7523" data-pf-content="true" class="pf-v6-c-content--p">These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.</p>
|
|
138
138
|
|
|
139
139
|
|
|
140
140
|
|
|
@@ -155,12 +155,12 @@
|
|
|
155
155
|
|
|
156
156
|
|
|
157
157
|
|
|
158
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-grid-md</code>, <code>.pf-m-grid-lg</code>, <code>.pf-m-grid-xl</code>, <code>.pf-m-grid-2xl</code></td><td><code>.pf-v6-c-table</code></td><td>Changes tabular layout to responsive, grid based layout at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
159
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
160
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
158
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-grid-md</code>, <code>.pf-m-grid-lg</code>, <code>.pf-m-grid-xl</code>, <code>.pf-m-grid-2xl</code></td><td><code>.pf-v6-c-table</code></td><td>Changes tabular layout to responsive, grid based layout at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7524" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-grid</code></td><td><code>.pf-v6-c-table</code></td><td>Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.</td></tr></tbody></table>
|
|
159
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7525" data-pf-content="true" class="pf-v6-c-content--h2">Sortable</h2>
|
|
160
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7526" data-pf-content="true" class="pf-v6-c-content--h3">Sortable example</h3>
|
|
161
161
|
|
|
162
162
|
<astro-island uid="Z5QI6r" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"This is a sortable table example\"\n id=\"table-sortable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort pf-m-help\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <div class=\"pf-v6-c-table__column-help\">\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n <span class=\"pf-v6-c-table__column-help-action\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-label=\"aria-label&#x3D;&quot;More info&quot;\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th pf-m-help\" role=\"columnheader\" scope=\"col\">\n <div class=\"pf-v6-c-table__column-help\">\n <span class=\"pf-v6-c-table__text\">Last commit</span>\n <span class=\"pf-v6-c-table__column-help-action\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-label=\"aria-label&#x3D;&quot;More info&quot;\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
163
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
163
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7527" data-pf-content="true" class="pf-v6-c-content--h3">Sortable accessibility</h3>
|
|
164
164
|
|
|
165
165
|
|
|
166
166
|
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
|
|
178
178
|
|
|
179
179
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-sort=[ascending or descending]</code></td><td><code>.pf-v6-c-table__sort</code></td><td>Indicates if columns in a table are sorted in ascending or descending order. For each table, authors <strong>SHOULD</strong> apply aria-sort to only one header at a time. <strong>Required</strong></td></tr></tbody></table>
|
|
180
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
180
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7528" data-pf-content="true" class="pf-v6-c-content--h3">Sortable usage</h3>
|
|
181
181
|
|
|
182
182
|
|
|
183
183
|
|
|
@@ -234,25 +234,25 @@
|
|
|
234
234
|
|
|
235
235
|
|
|
236
236
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__sort</code></td><td><code><th></code></td><td>Initiates a table header sort cell. <strong>Required for sortable table columns</strong></td></tr><tr><td><code>.pf-v6-c-table__button</code></td><td><code><button></code>, <code><a></code></td><td>Initiates a table header sort cell button. If sorting a table row generates a unique URL that can be used as the <code>href</code> value for this element, use an <code><a></code>. Otherwise, use a <code><button></code>. <strong>Required for sortable table columns</strong></td></tr><tr><td><code>.pf-v6-c-table__button-content</code></td><td><code><div></code></td><td>Initiates a table header sort cell button content container. <strong>Required for sortable table columns</strong> Note: this is only necessary because <code><button></code> does not support<code>display: grid</code>.</td></tr><tr><td><code>.pf-v6-c-table__sort-indicator</code></td><td><code>.pf-v6-c-table__sort > .pf-v6-c-table__button > span</code></td><td>Initiates a sort indicator. <strong>Required for sortable table columns</strong></td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-table__sort</code></td><td>Modifies for sort selected state. <strong>Required for sortable table columns</strong></td></tr><tr><td><code>.pf-m-help</code></td><td><code>.pf-v6-c-table__sort</code>, <code>.pf-v6-c-table th</code></td><td>Modifies a sortable table header to accommodate a help tooltip. <strong>Required for sortable table columns with help tooltips</strong></td></tr><tr><td><code>.fa-arrows-alt-v</code></td><td><code>.pf-v6-c-table__sort > .pf-v6-c-table__button > .pf-v6-c-table__sort-indicator > .fas</code></td><td>Initiates icon within unsorted, sortable table header. <strong>Required for sortable table columns</strong></td></tr><tr><td><code>.fa-long-arrow-alt-up</code></td><td><code>.pf-v6-c-table__sort > .pf-v6-c-table__button > .pf-v6-c-table__sort-indicator > .fas</code></td><td>Initiates icon within ascending sorted and selected, sortable table header. <strong>Required for sortable table columns</strong></td></tr><tr><td><code>.fa-long-arrow-alt-down</code></td><td><code>.pf-v6-c-table__sort > .pf-v6-c-table__button > .pf-v6-c-table__sort-indicator > .fas</code></td><td>Initiates icon within descending sorted and selected, sortable table header. <strong>Required for sortable table columns</strong></td></tr></tbody></table>
|
|
237
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
237
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7529" data-pf-content="true" class="pf-v6-c-content--h3">Overflow menu usage, desktop</h3>
|
|
238
238
|
|
|
239
239
|
<astro-island uid="ZtVRyy" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table\"\n aria-label=\"This is a simple table example\"\n id=\"table-with-expanded-overflow-menu\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Branches</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Pull requests</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"table-with-expanded-overflow-menu-overflow-menu-1\"\n >\n <div class=\"pf-v6-c-overflow-menu__content\">\n <div class=\"pf-v6-c-overflow-menu__group pf-m-button-group\">\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Start</span>\n </button>\n </div>\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Stop</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"table-with-expanded-overflow-menu-overflow-menu-2\"\n >\n <div class=\"pf-v6-c-overflow-menu__content\">\n <div class=\"pf-v6-c-overflow-menu__group pf-m-button-group\">\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Start</span>\n </button>\n </div>\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Stop</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
240
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
240
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7530" data-pf-content="true" class="pf-v6-c-content--h3">Overflow menu usage, overflow menu collapsed</h3>
|
|
241
241
|
|
|
242
242
|
<astro-island uid="Z1kMDkS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table\"\n role=\"grid\"\n aria-label=\"This is a simple table example\"\n id=\"table-with-overflow-menu-collapsed\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"table-with-overflow-menu-collapsed-overflow-menu-1\"\n >\n <div class=\"pf-v6-c-overflow-menu__control\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"table-with-overflow-menu-collapsed-overflow-menu-2\"\n >\n <div class=\"pf-v6-c-overflow-menu__control\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
243
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
243
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7531" data-pf-content="true" class="pf-v6-c-content--h3">Overflow menu usage, mobile</h3>
|
|
244
244
|
|
|
245
245
|
<astro-island uid="ZyO660" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid\"\n role=\"grid\"\n aria-label=\"This is a simple table example\"\n id=\"table-with-overflow-menu-collapsed-mobile\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"table-with-overflow-menu-collapsed-mobile-overflow-menu-1\"\n >\n <div class=\"pf-v6-c-overflow-menu__control\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"table-with-overflow-menu-collapsed-mobile-overflow-menu-2\"\n >\n <div class=\"pf-v6-c-overflow-menu__control\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
246
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
247
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
246
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7532" data-pf-content="true" class="pf-v6-c-content--h2">With checkboxes, radio select, and actions</h2>
|
|
247
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7533" data-pf-content="true" class="pf-v6-c-content--h3">Checkboxes and actions example</h3>
|
|
248
248
|
|
|
249
249
|
<astro-island uid="1D3uPS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"This is a table with checkboxes\"\n id=\"table-checkboxes-and-actions\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-checkboxes-and-actions-checkrow-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-checkboxes-and-actions-checkrow-check-input\"\n name=\"table-checkboxes-and-actions-checkrow-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-checkboxes-and-actions-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-checkboxes-and-actions-checkrow-1-check-input\"\n name=\"table-checkboxes-and-actions-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-checkboxes-and-actions-node1\">Node 1</div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-checkboxes-and-actions-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-checkboxes-and-actions-checkrow-2-check-input\"\n name=\"table-checkboxes-and-actions-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-checkboxes-and-actions-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-checkboxes-and-actions-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-checkboxes-and-actions-checkrow-3-check-input\"\n name=\"table-checkboxes-and-actions-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-checkboxes-and-actions-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-checkboxes-and-actions-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-checkboxes-and-actions-checkrow-4-check-input\"\n name=\"table-checkboxes-and-actions-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-checkboxes-and-actions-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
250
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
250
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7534" data-pf-content="true" class="pf-v6-c-content--h3">Single select radio example</h3>
|
|
251
251
|
|
|
252
252
|
<astro-island uid="Z1CBs4L" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"This is single select table with radio inputs\"\n id=\"table-single-select-radio\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Row select</span>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-radio pf-m-standalone\"\n id=\"table-single-select-radio-node1-radio\"\n for=\"table-single-select-radio-node1-radio-input\"\n >\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"table-single-select-radio-node1-radio-input\"\n name=\"table-single-select-radio-node1-radio-input\"\n aria-label=\"Standalone radio\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-single-select-radio-node1\">Node 1</div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-radio pf-m-standalone\"\n id=\"table-single-select-radio-node2-radio\"\n for=\"table-single-select-radio-node2-radio-input\"\n >\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"table-single-select-radio-node2-radio-input\"\n name=\"table-single-select-radio-node2-radio-input\"\n aria-label=\"Standalone radio\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-single-select-radio-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-radio pf-m-standalone\"\n id=\"table-single-select-radio-node3-radio\"\n for=\"table-single-select-radio-node3-radio-input\"\n >\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"table-single-select-radio-node3-radio-input\"\n name=\"table-single-select-radio-node3-radio-input\"\n aria-label=\"Standalone radio\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-single-select-radio-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-radio pf-m-standalone\"\n id=\"table-single-select-radio-node4-radio\"\n for=\"table-single-select-radio-node4-radio-input\"\n >\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"table-single-select-radio-node4-radio-input\"\n name=\"table-single-select-radio-node4-radio-input\"\n aria-label=\"Standalone radio\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-single-select-radio-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
253
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
254
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
255
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
253
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7626" data-pf-content="true" class="pf-v6-c-content--p">When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a <code><th></code>, rather than a <code><td></code>. In this example, ‘Node 1’ and ‘Node 2 siemur/test-space’ are <code><th></code>s.</p>
|
|
254
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7627" data-pf-content="true" class="pf-v6-c-content--p">When header cells are empty or they contain interactive elements, <code><th></code> should be replaced with <code><td></code>.</p>
|
|
255
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7535" data-pf-content="true" class="pf-v6-c-content--h3">Checkboxes, radio select, and actions accessibility</h3>
|
|
256
256
|
|
|
257
257
|
|
|
258
258
|
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
|
|
275
275
|
|
|
276
276
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-labelledby="[row_header_id]"</code> or <code>aria-label="[descriptive text]</code></td><td><code>.pf-v6-c-table__check input</code></td><td>Provides an accessible name for the checkbox or radio input. <strong>Required</strong></td></tr><tr><td><code>id</code></td><td>row header <code><th> > *</code></td><td>Provides an accessible description for the checkbox or radio. <strong>Required if using <code>aria-labelledby</code> for <code>.pf-v6-c-table__check input</code></strong></td></tr></tbody></table>
|
|
277
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
277
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7536" data-pf-content="true" class="pf-v6-c-content--h3">Checkboxes, radio select, and actions usage</h3>
|
|
278
278
|
|
|
279
279
|
|
|
280
280
|
|
|
@@ -301,19 +301,19 @@
|
|
|
301
301
|
|
|
302
302
|
|
|
303
303
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__check</code></td><td><code><th></code>, <code><td></code></td><td>Initiates a checkbox or radio input table cell.</td></tr><tr><td><code>.pf-v6-c-table__action</code></td><td><code><th></code>, <code><td></code></td><td>Initiates an action table cell.</td></tr><tr><td><code>.pf-v6-c-table__inline-edit-action</code></td><td><code><th></code>, <code><td></code></td><td>Initiates an inline edit action table cell.</td></tr></tbody></table>
|
|
304
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
305
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
306
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
304
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7537" data-pf-content="true" class="pf-v6-c-content--h2">Expandable</h2>
|
|
305
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7538" data-pf-content="true" class="pf-v6-c-content--p">Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.</p>
|
|
306
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7539" data-pf-content="true" class="pf-v6-c-content--h3">Expandable example</h3>
|
|
307
307
|
|
|
308
308
|
<astro-island uid="ocAsy" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"Expandable table example\"\n id=\"table-expandable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-expandable-expandable-toggle-thead\"\n type=\"button\"\n aria-controls=\"table-expandable-content-thead\"\n aria-labelledby=\"table-expandable-node-thead\"\n aria-label=\"Toggle all rows\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-checkrow-thead-check-input\"\n name=\"table-expandable-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-content-1\"\n aria-labelledby=\"table-expandable-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-checkrow-1-check-input\"\n name=\"table-expandable-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-node1\">Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 1</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-expandable-content-1\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-expandable-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"table-expandable-content-2\"\n aria-labelledby=\"table-expandable-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-checkrow-2-check-input\"\n name=\"table-expandable-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 2</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-expandable-toggle-3\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-content-3\"\n aria-labelledby=\"table-expandable-node-3\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-checkrow-3-check-input\"\n name=\"table-expandable-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 3</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-content-4\"\n aria-labelledby=\"table-expandable-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-checkrow-4-check-input\"\n name=\"table-expandable-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 4</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-m-no-padding\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-content-4\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >Expandable row content has no padding.</div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
309
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
309
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7540" data-pf-content="true" class="pf-v6-c-content--h3">Expandable with set width columns example</h3>
|
|
310
310
|
|
|
311
311
|
<astro-island uid="oSoup" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"Expandable table, set column widths example\"\n id=\"expandable-set-width-columns-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"expandable-set-width-columns-example-expandable-toggle-thead\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"expandable-set-width-columns-example-content-thead\"\n aria-labelledby=\"expandable-set-width-columns-example-node-thead\"\n aria-label=\"Toggle all rows\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"expandable-set-width-columns-example-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"expandable-set-width-columns-example-checkrow-thead-check-input\"\n name=\"expandable-set-width-columns-example-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-20 pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-20 pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-10\"\n role=\"columnheader\"\n scope=\"col\"\n >Links</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"expandable-set-width-columns-example-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"expandable-set-width-columns-example-content-1\"\n aria-labelledby=\"expandable-set-width-columns-example-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"expandable-set-width-columns-example-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"expandable-set-width-columns-example-checkrow-1-check-input\"\n name=\"expandable-set-width-columns-example-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"expandable-set-width-columns-example-node1\">Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 1</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n id=\"expandable-set-width-columns-example-content-1\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"4\">\n <div class=\"pf-v6-c-table__expandable-row-content\">\n <b>Span four</b>&nbsp;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.\n </div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"expandable-set-width-columns-example-expandable-toggle-2\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"expandable-set-width-columns-example-content-2\"\n aria-labelledby=\"expandable-set-width-columns-example-node-2\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"expandable-set-width-columns-example-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"expandable-set-width-columns-example-checkrow-2-check-input\"\n name=\"expandable-set-width-columns-example-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"expandable-set-width-columns-example-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 2</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n id=\"expandable-set-width-columns-example-content-2\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"2\">\n <div class=\"pf-v6-c-table__expandable-row-content\">Span three and four</div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"2\">\n <div class=\"pf-v6-c-table__expandable-row-content\">Span five and six</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"expandable-set-width-columns-example-expandable-toggle-3\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"expandable-set-width-columns-example-content-3\"\n aria-labelledby=\"expandable-set-width-columns-example-node-3\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"expandable-set-width-columns-example-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"expandable-set-width-columns-example-checkrow-3-check-input\"\n name=\"expandable-set-width-columns-example-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"expandable-set-width-columns-example-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 3</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n id=\"expandable-set-width-columns-example-content-3\"\n >\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"7\">\n <div class=\"pf-v6-c-table__expandable-row-content\">\n <b>Span all</b>&nbsp;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.\n </div>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"expandable-set-width-columns-example-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"expandable-set-width-columns-example-content-4\"\n aria-labelledby=\"expandable-set-width-columns-example-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"expandable-set-width-columns-example-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"expandable-set-width-columns-example-checkrow-4-check-input\"\n name=\"expandable-set-width-columns-example-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"expandable-set-width-columns-example-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 4</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n id=\"expandable-set-width-columns-example-content-4\"\n >\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"3\">\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >Span one, two, and three</div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"2\">\n <div class=\"pf-v6-c-table__expandable-row-content\">Span four and five</div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" colspan=\"2\">\n <div class=\"pf-v6-c-table__expandable-row-content\">Span six and seven</div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
312
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
312
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7541" data-pf-content="true" class="pf-v6-c-content--h3">Expandable with nested table example</h3>
|
|
313
313
|
|
|
314
314
|
<astro-island uid="Z2f20K7" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"Expandable with nested table example\"\n id=\"table-expandable-nested-table\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-expandable-nested-table-expandable-toggle-thead\"\n type=\"button\"\n aria-controls=\"table-expandable-nested-table-content-thead\"\n aria-labelledby=\"table-expandable-nested-table-node-thead\"\n aria-label=\"Toggle all rows\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-nested-table-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-nested-table-checkrow-thead-check-input\"\n name=\"table-expandable-nested-table-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-nested-table-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-nested-table-content-1\"\n aria-labelledby=\"table-expandable-nested-table-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-nested-table-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-nested-table-checkrow-1-check-input\"\n name=\"table-expandable-nested-table-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-nested-table-node1\">Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 1</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-nested-table-content-1\"\n >\n <div class=\"pf-v6-c-table__expandable-row-content\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a simple table\"\n id=\"table-expandable-nested-table-table-basic\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Repositories</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Workspaces</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n </table>\n </div>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-expandable-nested-table-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"table-expandable-nested-table-content-2\"\n aria-labelledby=\"table-expandable-nested-table-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-nested-table-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-nested-table-checkrow-2-check-input\"\n name=\"table-expandable-nested-table-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-nested-table-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 2</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-nested-table-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-nested-table-expandable-toggle-3\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-nested-table-content-3\"\n aria-labelledby=\"table-expandable-nested-table-node-3\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-nested-table-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-nested-table-checkrow-3-check-input\"\n name=\"table-expandable-nested-table-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-nested-table-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 3</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-nested-table-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-nested-table-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-nested-table-content-4\"\n aria-labelledby=\"table-expandable-nested-table-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-nested-table-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-nested-table-checkrow-4-check-input\"\n name=\"table-expandable-nested-table-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-expandable-nested-table-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 4</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-m-no-padding\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-expandable-nested-table-content-4\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >Expandable row content has no padding.</div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
315
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
316
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
315
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7628" data-pf-content="true" class="pf-v6-c-content--p">Note: To apply padding to <code>.pf-v6-c-table__expandable-row</code>, wrap the content in <code>.pf-v6-c-table__expandable-row-content</code>. For no padding add <code>.pf-m-no-padding</code> to <code>.pf-v6-c-table__expandable-row</code> > <code><td></code></p>
|
|
316
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7542" data-pf-content="true" class="pf-v6-c-content--h3">Expandable accessibility</h3>
|
|
317
317
|
|
|
318
318
|
|
|
319
319
|
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
|
|
356
356
|
|
|
357
357
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>hidden</code></td><td><code>.pf-v6-c-table__expandable-row</code></td><td>Indicates that the expandable content is hidden. <strong>Required</strong></td></tr><tr><td><code>aria-expanded="true"</code></td><td><code>.pf-v6-c-table__toggle</code> > <code>.pf-v6-c-button</code></td><td>Indicates that the row is visible. <strong>Required</strong></td></tr><tr><td><code>aria-label="[descriptive text]"</code></td><td><code>.pf-v6-c-table__toggle</code> > <code>.pf-v6-c-button</code></td><td>Provides an accessible name for toggle button. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby="[title_cell_id] [button_id]"</code></td><td><code>.pf-v6-c-table__toggle</code> > <code>.pf-v6-c-button</code></td><td>Provides an accessible description for toggle button. <strong>Required</strong></td></tr><tr><td><code>id="[button_id]"</code></td><td><code>.pf-v6-c-table__toggle</code> > <code>.pf-v6-c-button</code></td><td>Provides a reference for toggle button description. <strong>Required</strong></td></tr><tr><td><code>aria-controls="[id of element the button controls]"</code></td><td><code>.pf-v6-c-table__toggle</code> > <code>.pf-v6-c-button</code></td><td>Identifies the expanded content controlled by the toggle button. <strong>Required</strong></td></tr></tbody></table>
|
|
358
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
358
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7543" data-pf-content="true" class="pf-v6-c-content--h3">Expandable usage</h3>
|
|
359
359
|
|
|
360
360
|
|
|
361
361
|
|
|
@@ -392,11 +392,11 @@
|
|
|
392
392
|
|
|
393
393
|
|
|
394
394
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__toggle-icon</code></td><td><code><span></code></td><td>Initiates the table toggle icon wrapper.</td></tr><tr><td><code>.pf-v6-c-table__expandable-row</code></td><td><code><tr></code></td><td>Initiates an expandable row.</td></tr><tr><td><code>.pf-v6-c-table__expandable-row-content</code></td><td><code>.pf-v6-c-table__expandable-row</code> > <code><td></code> > <code><div></code></td><td>Initiates an expandable row content wrapper.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-table__toggle</code> > <code>.pf-v6-c-button</code>, <code>.pf-v6-c-table__expandable-row</code></td><td>Modifies for expanded state.</td></tr><tr><td><code>.pf-m-no-padding</code></td><td><code>.pf-v6-c-table__expandable-row</code> > <code><td></code></td><td>Modifies the expandable row to have no padding.</td></tr></tbody></table>
|
|
395
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
396
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
395
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7544" data-pf-content="true" class="pf-v6-c-content--h2">Compound expansion</h2>
|
|
396
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7545" data-pf-content="true" class="pf-v6-c-content--h3">Compound expansion example</h3>
|
|
397
397
|
|
|
398
398
|
<astro-island uid="fBbc3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"Compound expandable table example\"\n id=\"table-compound-expansion\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__control-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle pf-m-expanded\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;10\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 234\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>20 minutes</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-1\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-2\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-3\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__control-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;\n 2\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 82\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 1\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>1 day ago</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-4\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-5\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-6\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__control-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 1\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>2 days ago</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-7\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-8\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"table-compound-expansion-nested-table-9\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
399
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
399
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7546" data-pf-content="true" class="pf-v6-c-content--h3">Compound expansion accessibility</h3>
|
|
400
400
|
|
|
401
401
|
|
|
402
402
|
|
|
@@ -423,7 +423,7 @@
|
|
|
423
423
|
|
|
424
424
|
|
|
425
425
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>hidden</code></td><td><code>.pf-v6-c-table__expandable-row</code></td><td>Indicates that the expandable content is hidden. <strong>Required</strong></td></tr><tr><td><code>aria-expanded="true"</code></td><td><code>.pf-v6-c-table__compound-expansion-toggle</code> > <code>.pf-v6-c-button</code></td><td>Indicates that the row is visible. <strong>Required</strong></td></tr><tr><td><code>aria-controls="[id of element the button controls]"</code></td><td><code>.pf-v6-c-table__compound-expansion-toggle</code> > <code>.pf-v6-c-button</code></td><td>Identifies the expanded content controlled by the toggle button. <strong>Required</strong></td></tr></tbody></table>
|
|
426
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
426
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7547" data-pf-content="true" class="pf-v6-c-content--h3">Compound expansion usage</h3>
|
|
427
427
|
|
|
428
428
|
|
|
429
429
|
|
|
@@ -450,14 +450,14 @@
|
|
|
450
450
|
|
|
451
451
|
|
|
452
452
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__control-row</code></td><td><code>.pf-v6-c-table__expandable > <tr></code></td><td>Modifies a compound expandable table control row.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code><tbody></code>, <code>.pf-v6-c-table__compound-expansion-toggle</code> > <code>.pf-v6-c-button</code></td><td>Modifies a tbody with a row and an expandable row.</td></tr><tr><td><code>.pf-v6-c-table__compound-expansion-toggle</code></td><td><code><td></code></td><td>Modifies a <code><td></code> on active/focus.</td></tr></tbody></table>
|
|
453
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
454
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
453
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7548" data-pf-content="true" class="pf-v6-c-content--h2">Compact variant</h2>
|
|
454
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7549" data-pf-content="true" class="pf-v6-c-content--h3">Compact example</h3>
|
|
455
455
|
|
|
456
456
|
<astro-island uid="2nPhoN" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-compact pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a compact table example\"\n id=\"table-compact\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-checkrow-thead-check-input\"\n name=\"table-compact-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Contributor</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Position</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Location</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last seen</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Numbers</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__icon\"\n role=\"columnheader\"\n scope=\"col\"\n >Icons</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-checkrow-1-check-input\"\n name=\"table-compact-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-node1\">Sam Jones</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >CSS guru</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Not too sure</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Numbers\"\n >0556</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-checkrow-2-check-input\"\n name=\"table-compact-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-node2\">Amy Wilson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >Visual design</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Raleigh</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Numbers\"\n >9492</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-checkrow-3-check-input\"\n name=\"table-compact-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-node3\">Steve Wilson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >Visual design lead</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Westford</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Numbers\"\n >9929</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-checkrow-4-check-input\"\n name=\"table-compact-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-node4\">Emma Jackson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >Interaction design</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Westford</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2217</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
457
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
457
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7550" data-pf-content="true" class="pf-v6-c-content--h3">Compact expandable example</h3>
|
|
458
458
|
|
|
459
459
|
<astro-island uid="Z1qjmBs" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-compact pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"Compact expandable table example\"\n id=\"table-compact-expandable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-thead\"\n type=\"button\"\n aria-controls=\"table-compact-expandable-content-thead\"\n aria-labelledby=\"table-compact-expandable-node-thead\"\n aria-label=\"Toggle all rows\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-thead-check-input\"\n name=\"table-compact-expandable-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30\"\n role=\"columnheader\"\n scope=\"col\"\n >Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-expanded pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-compact-expandable-content-1\"\n aria-labelledby=\"table-compact-expandable-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-1-check-input\"\n name=\"table-compact-expandable-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node1\">Node 1</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-compact-expandable-content-1\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"table-compact-expandable-content-2\"\n aria-labelledby=\"table-compact-expandable-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-2-check-input\"\n name=\"table-compact-expandable-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node2\">Node 2</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact pf-m-no-padding\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-compact-expandable-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-expanded pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-3\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-compact-expandable-content-3\"\n aria-labelledby=\"table-compact-expandable-node-3\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-3-check-input\"\n name=\"table-compact-expandable-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node3\">Node 3</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-compact-expandable-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-expanded pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-compact-expandable-content-4\"\n aria-labelledby=\"table-compact-expandable-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-4-check-input\"\n name=\"table-compact-expandable-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node4\">Node 4</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-m-compact pf-m-no-padding\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-compact-expandable-content-4\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >This content has no padding.</div>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-5\"\n type=\"button\"\n aria-controls=\"table-compact-expandable-content-5\"\n aria-labelledby=\"table-compact-expandable-node-5\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-5-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-5-check-input\"\n name=\"table-compact-expandable-checkrow-5-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node5\">Node 5</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-compact-expandable-content-5\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-expanded pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-6\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-compact-expandable-content-6\"\n aria-labelledby=\"table-compact-expandable-node-6\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-6-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-6-check-input\"\n name=\"table-compact-expandable-checkrow-6-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node6\">Node 6</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n id=\"table-compact-expandable-content-6\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-m-compact\" role=\"cell\" colspan=\"2\">\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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.</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-m-compact\" role=\"cell\" colspan=\"2\">\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-7\"\n type=\"button\"\n aria-controls=\"table-compact-expandable-content-7\"\n aria-labelledby=\"table-compact-expandable-node-7\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-7-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-7-check-input\"\n name=\"table-compact-expandable-checkrow-7-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node7\">Node 7</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-compact-expandable-content-7\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-expanded pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-8\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-compact-expandable-content-8\"\n aria-labelledby=\"table-compact-expandable-node-8\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-8-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-8-check-input\"\n name=\"table-compact-expandable-checkrow-8-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node8\">Node 8</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n id=\"table-compact-expandable-content-8\"\n >\n <td class=\"pf-v6-c-table__td pf-m-compact\" role=\"cell\" colspan=\"4\">\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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.</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-m-compact\" role=\"cell\" colspan=\"3\">\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n id=\"table-compact-expandable-expandable-toggle-9\"\n type=\"button\"\n aria-controls=\"table-compact-expandable-content-9\"\n aria-labelledby=\"table-compact-expandable-node-9\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-compact-expandable-checkrow-9-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-compact-expandable-checkrow-9-check-input\"\n name=\"table-compact-expandable-checkrow-9-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-compact-expandable-node9\">Node 9</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Branches\"\n >10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-compact-expandable-content-9\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
460
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
460
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7551" data-pf-content="true" class="pf-v6-c-content--h3">Compact Usage</h3>
|
|
461
461
|
|
|
462
462
|
|
|
463
463
|
|
|
@@ -474,14 +474,14 @@
|
|
|
474
474
|
|
|
475
475
|
|
|
476
476
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-table</code></td><td>Modifies for a compact table.</td></tr></tbody></table>
|
|
477
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
478
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
477
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7552" data-pf-content="true" class="pf-v6-c-content--h2">Clickable</h2>
|
|
478
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7553" data-pf-content="true" class="pf-v6-c-content--h3">Clickable example</h3>
|
|
479
479
|
|
|
480
480
|
<astro-island uid="Z1Sbvqs" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"Clickable and selectable table example\"\n id=\"table-clickable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-clickable-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-clickable-checkrow-thead-check-input\"\n name=\"table-clickable-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">State</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr\n class=\"pf-v6-c-table__tr pf-m-clickable\"\n role=\"row\"\n tabindex&#x26;#x3D;&#x26;quot;0&#x26;quot;\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-clickable-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-clickable-checkrow-1-check-input\"\n name=\"table-clickable-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div id=\"table-clickable-node1\">Clickable</div>\n </th>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-clickable pf-m-selected\"\n role=\"row\"\n tabindex&#x26;#x3D;&#x26;quot;0&#x26;quot;\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-clickable-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-clickable-checkrow-2-check-input\"\n name=\"table-clickable-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div id=\"table-clickable-node2\">\n <b>Clicked</b>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-clickable\"\n role=\"row\"\n tabindex&#x26;#x3D;&#x26;quot;0&#x26;quot;\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-clickable-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-clickable-checkrow-3-check-input\"\n name=\"table-clickable-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div id=\"table-clickable-node3\">Clickable</div>\n </th>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
481
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
481
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7554" data-pf-content="true" class="pf-v6-c-content--h3">Clickable and expandable example</h3>
|
|
482
482
|
|
|
483
483
|
<astro-island uid="Z1eNTf2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"Expandable and clickable table example\"\n id=\"table-expandable-clickable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-clickable-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-clickable-checkrow-thead-check-input\"\n name=\"table-expandable-clickable-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody\n class=\"pf-v6-c-table__tbody pf-m-clickable\"\n role=\"rowgroup\"\n tabindex=\"0\"\n >\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-expandable-clickable-expandable-toggle-1\"\n type=\"button\"\n aria-controls=\"table-expandable-clickable-content-1\"\n aria-labelledby=\"table-expandable-clickable-node-1\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-clickable-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-clickable-checkrow-1-check-input\"\n name=\"table-expandable-clickable-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div>\n <div id=\"table-expandable-clickable-node1\">Clickable and not expanded</div>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 1</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-expandable-clickable-content-1\"\n >\n <div class=\"pf-v6-c-table__expandable-row-content\">Expandable content</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody\n class=\"pf-v6-c-table__tbody pf-m-clickable pf-m-selected\"\n role=\"rowgroup\"\n tabindex=\"0\"\n >\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-clickable-expandable-toggle-2\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-clickable-content-2\"\n aria-labelledby=\"table-expandable-clickable-node-2\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-clickable-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-clickable-checkrow-2-check-input\"\n name=\"table-expandable-clickable-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div>\n <div id=\"table-expandable-clickable-node2\">\n <b>Clicked and expanded</b>\n </div>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 2</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-expandable-clickable-content-2\"\n >\n <div class=\"pf-v6-c-table__expandable-row-content\">Expandable content</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody\n class=\"pf-v6-c-table__tbody pf-m-clickable\"\n role=\"rowgroup\"\n tabindex=\"0\"\n >\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-expandable-clickable-expandable-toggle-3\"\n type=\"button\"\n aria-controls=\"table-expandable-clickable-content-3\"\n aria-labelledby=\"table-expandable-clickable-node-3\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-clickable-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-clickable-checkrow-3-check-input\"\n name=\"table-expandable-clickable-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div>\n <div id=\"table-expandable-clickable-node3\">Clickable and not expanded</div>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 3</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-expandable-clickable-content-3\"\n >\n <div class=\"pf-v6-c-table__expandable-row-content\">Expandable content</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody\n class=\"pf-v6-c-table__tbody pf-m-clickable\"\n role=\"rowgroup\"\n tabindex=\"0\"\n >\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-expandable-clickable-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-expandable-clickable-content-4\"\n aria-labelledby=\"table-expandable-clickable-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-expandable-clickable-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-expandable-clickable-checkrow-4-check-input\"\n name=\"table-expandable-clickable-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Repository name\"\n >\n <div>\n <div id=\"table-expandable-clickable-node4\">Clickable and expanded</div>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 4</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-expandable-clickable-content-4\"\n >\n <div class=\"pf-v6-c-table__expandable-row-content\">Expandable content</div>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
484
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
484
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7555" data-pf-content="true" class="pf-v6-c-content--h3">Clickable accessibility</h3>
|
|
485
485
|
|
|
486
486
|
|
|
487
487
|
|
|
@@ -498,7 +498,7 @@
|
|
|
498
498
|
|
|
499
499
|
|
|
500
500
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>tabindex="0"</code></td><td><code>.pf-v6-c-table tbody.pf-m-clickable</code></td><td>Inserts the clickable table element into the tab order of the page so that it is focusable. <strong>Required</strong></td></tr></tbody></table>
|
|
501
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
501
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7556" data-pf-content="true" class="pf-v6-c-content--h3">Clickable and selected usage</h3>
|
|
502
502
|
|
|
503
503
|
|
|
504
504
|
|
|
@@ -520,20 +520,20 @@
|
|
|
520
520
|
|
|
521
521
|
|
|
522
522
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-clickable</code></td><td><code>.pf-v6-c-table tbody</code>, <code>.pf-v6-c-table tr</code></td><td>Modifies a tbody or tr table element to be clickable.</td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-table tbody</code>, <code>.pf-v6-c-table tr</code></td><td>Modifies a selectable tbody or tr table element to be selected.</td></tr></tbody></table>
|
|
523
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
524
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
523
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7557" data-pf-content="true" class="pf-v6-c-content--h2">Tree table</h2>
|
|
524
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7558" data-pf-content="true" class="pf-v6-c-content--h3">Tree table basic</h3>
|
|
525
525
|
|
|
526
526
|
<astro-island uid="1DoU2o" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-tree-view pf-m-tree-view-grid-lg\"\n aria-label=\"This is a simple tree table example\"\n role=\"treegrid\"\n id=\"tree-table-basic-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-header-cell\"\n scope=\"col\"\n >Name</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Count</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Size</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Data Stores</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"1\"\n aria-setsize=\"1\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-basic-example-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-basic-example-node-1 tree-table-basic-example-expandable-toggle-1\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-1\n >Level 1 all folders</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-1--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-1\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-tree-view-details-expanded\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"false\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"tree-table-basic-example-expandable-toggle-2\"\n type=\"button\"\n aria-labelledby=\"tree-table-basic-example-node-2 tree-table-basic-example-expandable-toggle-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-2\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"tree-table-basic-example-2--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-2\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-3\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-3--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-3\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-4\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-4--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-4\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-5\n >Level 2 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-5--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-5\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"3\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-6\n >Level 2 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-6--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-6\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"4\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-basic-example-expandable-toggle-7\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-basic-example-node-7 tree-table-basic-example-expandable-toggle-7\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-7\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-7--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-7\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"3\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-8\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-8--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-8\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-basic-example-expandable-toggle-9\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-basic-example-node-9 tree-table-basic-example-expandable-toggle-9\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-9\n >Level 3 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-9--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-9\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-tree-view-details-expanded\"\n aria-level=\"4\"\n aria-setsize=\"1\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-10\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"tree-table-basic-example-10--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-10\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-11\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-11--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-11\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"5\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-basic-example-expandable-toggle-12\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-basic-example-node-12 tree-table-basic-example-expandable-toggle-12\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-12\n >Level 3 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-12--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-12\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"4\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-13\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-13--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-13\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"4\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-14\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-14--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-14\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"6\"\n tabindex=\"0\"\n aria-expanded=\"false\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"tree-table-basic-example-expandable-toggle-15\"\n type=\"button\"\n aria-labelledby=\"tree-table-basic-example-node-15 tree-table-basic-example-expandable-toggle-15\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-15\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-15--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-15\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-16\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-16--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-16\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-basic-example-node-17\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-basic-example-17--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-basic-example-actions-17\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
527
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
527
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7559" data-pf-content="true" class="pf-v6-c-content--h3">Tree table with checkboxes</h3>
|
|
528
528
|
|
|
529
529
|
<astro-island uid="Z1GaKxG" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-tree-view pf-m-tree-view-grid-lg\"\n aria-label=\"This is a simple tree table, with checkboxes example\"\n role=\"treegrid\"\n id=\"tree-table-with-checkboxes-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-header-cell\"\n scope=\"col\"\n >Name</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Count</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Size</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Data Stores</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"1\"\n aria-setsize=\"1\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-example-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-example-node-1 tree-table-with-checkboxes-example-expandable-toggle-1\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-1-level-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-1-level-1-check-input\"\n name=\"tree-table-with-checkboxes-example-level-1-level-1-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-1\n >Level 1 all folders</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-1--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-1\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-tree-view-details-expanded\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"false\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"tree-table-with-checkboxes-example-expandable-toggle-2\"\n type=\"button\"\n aria-labelledby=\"tree-table-with-checkboxes-example-node-2 tree-table-with-checkboxes-example-expandable-toggle-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-2-level-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-2-level-2-check-input\"\n name=\"tree-table-with-checkboxes-example-level-2-level-2-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-2\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"tree-table-with-checkboxes-example-2--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-2\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-3-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-3-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-3\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-3--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-3\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-4-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-4-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-4\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-4--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-4\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-2-level-5-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-2-level-5-check-input\"\n name=\"tree-table-with-checkboxes-example-level-2-level-5-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-5\n >Level 2 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-5--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-5\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"3\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-2-level-6-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-2-level-6-check-input\"\n name=\"tree-table-with-checkboxes-example-level-2-level-6-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-6\n >Level 2 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-6--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-6\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"4\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-example-expandable-toggle-7\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-example-node-7 tree-table-with-checkboxes-example-expandable-toggle-7\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-2-level-7-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-2-level-7-check-input\"\n name=\"tree-table-with-checkboxes-example-level-2-level-7-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-7\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-7--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-7\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"3\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-8-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-8-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-8-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-8\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-8--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-8\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-example-expandable-toggle-9\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-example-node-9 tree-table-with-checkboxes-example-expandable-toggle-9\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-9-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-9-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-9-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-9\n >Level 3 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-9--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-9\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-tree-view-details-expanded\"\n aria-level=\"4\"\n aria-setsize=\"1\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-4-level-10-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-4-level-10-check-input\"\n name=\"tree-table-with-checkboxes-example-level-4-level-10-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-10\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"tree-table-with-checkboxes-example-10--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-10\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-11-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-11-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-11-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-11\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-11--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-11\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"5\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-example-expandable-toggle-12\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-example-node-12 tree-table-with-checkboxes-example-expandable-toggle-12\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-12-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-12-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-12-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-12\n >Level 3 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-12--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-12\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"4\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-4-level-13-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-4-level-13-check-input\"\n name=\"tree-table-with-checkboxes-example-level-4-level-13-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-13\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-13--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-13\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"4\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-4-level-14-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-4-level-14-check-input\"\n name=\"tree-table-with-checkboxes-example-level-4-level-14-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-14\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-14--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-14\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"6\"\n tabindex=\"0\"\n aria-expanded=\"false\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"tree-table-with-checkboxes-example-expandable-toggle-15\"\n type=\"button\"\n aria-labelledby=\"tree-table-with-checkboxes-example-node-15 tree-table-with-checkboxes-example-expandable-toggle-15\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-2-level-15-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-2-level-15-check-input\"\n name=\"tree-table-with-checkboxes-example-level-2-level-15-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-15\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-15--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-15\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-16-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-16-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-16-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-16\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-16--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-16\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-example-level-3-level-17-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-example-level-3-level-17-check-input\"\n name=\"tree-table-with-checkboxes-example-level-3-level-17-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-example-node-17\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-example-17--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-example-actions-17\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
530
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
530
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7560" data-pf-content="true" class="pf-v6-c-content--h3">Tree table with checkboxes and icons</h3>
|
|
531
531
|
|
|
532
532
|
<astro-island uid="1pJWyv" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-tree-view pf-m-tree-view-grid-lg\"\n role=\"treegrid\"\n id=\"tree-table-with-checkboxes-icons-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-header-cell\"\n scope=\"col\"\n >Name</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Count</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Size</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Data Stores</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"1\"\n aria-setsize=\"1\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-icons-example-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-icons-example-node-1 tree-table-with-checkboxes-icons-example-expandable-toggle-1\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-1-level-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-1-level-1-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-1-level-1-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-1\n >Level 1 all folders</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-1--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-1\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-tree-view-details-expanded\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"false\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"tree-table-with-checkboxes-icons-example-expandable-toggle-2\"\n type=\"button\"\n aria-labelledby=\"tree-table-with-checkboxes-icons-example-node-2 tree-table-with-checkboxes-icons-example-expandable-toggle-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-2-level-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-2-level-2-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-2-level-2-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-2\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"tree-table-with-checkboxes-icons-example-2--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-2\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-3-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-3-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-3\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-3--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-3\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-4-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-4-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-4\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-4--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-4\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-2-level-5-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-2-level-5-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-2-level-5-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-5\n >Level 2 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-5--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-5\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"3\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-2-level-6-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-2-level-6-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-2-level-6-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-6\n >Level 2 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-6--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-6\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"4\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-icons-example-expandable-toggle-7\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-icons-example-node-7 tree-table-with-checkboxes-icons-example-expandable-toggle-7\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-2-level-7-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-2-level-7-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-2-level-7-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-7\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-7--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-7\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"3\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-8-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-8-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-8-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-8\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-8--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-8\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-icons-example-expandable-toggle-9\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-icons-example-node-9 tree-table-with-checkboxes-icons-example-expandable-toggle-9\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-9-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-9-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-9-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-9\n >Level 3 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-9--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-9\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-m-tree-view-details-expanded\"\n aria-level=\"4\"\n aria-setsize=\"1\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-4-level-10-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-4-level-10-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-4-level-10-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-10\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"tree-table-with-checkboxes-icons-example-10--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-10\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-11-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-11-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-11-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-11\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-11--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-11\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-m-expanded\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"5\"\n tabindex=\"0\"\n aria-expanded=\"true\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"tree-table-with-checkboxes-icons-example-expandable-toggle-12\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"tree-table-with-checkboxes-icons-example-node-12 tree-table-with-checkboxes-icons-example-expandable-toggle-12\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-12-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-12-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-12-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-12\n >Level 3 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-12--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-12\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"4\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-4-level-13-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-4-level-13-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-4-level-13-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-13\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-13--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-13\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"4\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-4-level-14-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-4-level-14-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-4-level-14-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-14\n >Level 4 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-14--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-14\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"2\"\n aria-setsize=\"5\"\n aria-posinset=\"6\"\n tabindex=\"0\"\n aria-expanded=\"false\"\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"tree-table-with-checkboxes-icons-example-expandable-toggle-15\"\n type=\"button\"\n aria-labelledby=\"tree-table-with-checkboxes-icons-example-node-15 tree-table-with-checkboxes-icons-example-expandable-toggle-15\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </span>\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-2-level-15-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-2-level-15-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-2-level-15-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-15\n >Level 2 node</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-15--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-15\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"1\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-16-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-16-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-16-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-16\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-16--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-16\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr\"\n aria-level=\"3\"\n aria-setsize=\"2\"\n aria-posinset=\"2\"\n tabindex=\"-1\"\n hidden\n role=\"row\"\n >\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <span class=\"pf-v6-c-table__td pf-v6-c-table__check\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"tree-table-with-checkboxes-icons-example-level-3-level-17-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"tree-table-with-checkboxes-icons-example-level-3-level-17-check-input\"\n name=\"tree-table-with-checkboxes-icons-example-level-3-level-17-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n </span>\n\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span class=\"pf-v6-c-table__tree-view-icon\">\n <i class=\"fas fa-fw fa-leaf\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-with-checkboxes-icons-example-node-17\n >Level 3 leaf</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-with-checkboxes-icons-example-17--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\" role=\"gridcell\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"tree-table-with-checkboxes-icons-example-actions-17\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
533
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
533
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7561" data-pf-content="true" class="pf-v6-c-content--h3">Tree with no children or indentation</h3>
|
|
534
534
|
|
|
535
535
|
<astro-island uid="hQd3t" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-tree-view pf-m-no-inset pf-m-tree-view-grid-lg\"\n role=\"treegrid\"\n aria-label=\"This is a simple tree table with no indentation\"\n id=\"tree-table-indent-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-header-cell\"\n scope=\"col\"\n >Name</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Count</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Size</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Data Stores</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-indent-example-node-1\n >Level 1, leaf 1</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-indent-example-1--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-indent-example-node-2\n >Level 1, leaf 2</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-indent-example-2--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-indent-example-node-3\n >Level 1, leaf 3</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-indent-example-3--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-indent-example-node-4\n >Level 1, leaf 4</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-indent-example-4--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-indent-example-node-5\n >Level 1, leaf 5</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-indent-example-5--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th pf-v6-c-table__tree-view-title-cell\">\n <div class=\"pf-v6-c-table__tree-view-main\">\n <div class=\"pf-v6-c-table__tree-view-text\">\n <span\n class=\"pf-v6-c-table__text\"\n tree-table-indent-example-node-6\n >Level 1, leaf 6</span>\n </div>\n <span class=\"pf-v6-c-table__tree-view-details-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"tree-table-indent-example-6--tree-table--details-toggle\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__details-toggle-icon\">\n <i class=\"fas fa-ellipsis-h\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Migration assessment\"\n >10</td>\n <td class=\"pf-v6-c-table__td\" role=\"gridcell\" data-label=\"Size of VM\">25</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"gridcell\"\n data-label=\"Number of Data Stores\"\n >5</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
536
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
536
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7562" data-pf-content="true" class="pf-v6-c-content--h3">Tree table accessibility</h3>
|
|
537
537
|
|
|
538
538
|
|
|
539
539
|
|
|
@@ -595,7 +595,7 @@
|
|
|
595
595
|
|
|
596
596
|
|
|
597
597
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role="treegrid"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view</code></td><td>Identifies the <code>table</code> as a treegrid. <strong>Place on the outermost <code>table</code> only</strong></td></tr><tr><td><code>role="row"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Identifies the <code>tr</code> element as a <code>row</code>. The row role is not an implicit semantic for the tr element when in a treegrid.</td></tr><tr><td><code>role="gridcell"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Identifies the <code>td</code> as a gridcell. The <code>gridcell</code> role is not an implicit semantic for the td element when in a treegrid.</td></tr><tr><td><code>tabindex="-1"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Makes the element with the treeitem role focusable without including it in the tab sequence of the page.</td></tr><tr><td><code>tabindex="0"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex=“0”. When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus.</td></tr><tr><td><code>aria-expanded="false"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible.</td></tr><tr><td><code>aria-expanded="true"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr.pf-m-expanded</code></td><td>Indicates the parent node is open, i.e., the descendant elements are visible.</td></tr><tr><td><code>aria-level="number"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Defines the level of the row in the hierarchical treegrid structure. Counting is one-based. Root rows have aria-level=“1”.</td></tr><tr><td><code>aria-setsize="number"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy.</td></tr><tr><td><code>aria-posinset="number"</code></td><td><code>.pf-v6-c-table.pf-m-tree-view tr</code></td><td>Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy. Counting is one-based, not zero-based.</td></tr></tbody></table>
|
|
598
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
598
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7563" data-pf-content="true" class="pf-v6-c-content--h3">Tree table usage</h3>
|
|
599
599
|
|
|
600
600
|
|
|
601
601
|
|
|
@@ -647,20 +647,20 @@
|
|
|
647
647
|
|
|
648
648
|
|
|
649
649
|
<table><thead><tr><th>Class</th><th>Applied</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__tree-view-main</code></td><td><code><div></code></td><td>Initiates a tree view table main container. <strong>Required with tree view</strong></td></tr><tr><td><code>.pf-v6-c-table__tree-view-text</code></td><td><code><div></code></td><td>Initiates a tree view table text element. <strong>Required with tree view</strong></td></tr><tr><td><code>.pf-v6-c-table__tree-view-icon</code></td><td><code><span></code></td><td>Initiates a tree view icon wrapper. <strong>Required with tree view</strong></td></tr><tr><td><code>.pf-v6-c-table__tree-view-title-header-cell</code></td><td><code><th></code></td><td>Initiates a tree view title header cell. <strong>Required with tree view</strong></td></tr><tr><td><code>.pf-v6-c-table__tree-view-details-toggle</code></td><td><code><span></code></td><td>Initiates a tree view details toggle container.</td></tr><tr><td><code>.pf-v6-c-table__tree-view-details-toggle-icon</code></td><td><code><span></code></td><td>Initiates a tree view details toggle icon.</td></tr><tr><td><code>.pf-m-treeview-details-expanded</code></td><td><code><tr></code></td><td>Modifies a tbody with a row and an expandable row.</td></tr><tr><td><code>.pf-m-no-inset</code></td><td><code>.pf-v6-c-table.pf-m-tree-view</code> , <code>.pf-v6-c-table.pf-m-tree-view <tr></code></td><td>Modifies a tree view <code>.pf-v6-c-table__tree-view-main</code> indentation.</td></tr></tbody></table>
|
|
650
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
651
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
650
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7564" data-pf-content="true" class="pf-v6-c-content--h2">Borderless variant</h2>
|
|
651
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7565" data-pf-content="true" class="pf-v6-c-content--h3">Borderless example</h3>
|
|
652
652
|
|
|
653
653
|
<astro-island uid="Z8LOl8" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md pf-m-no-border-rows\"\n role=\"grid\"\n aria-label=\"This is a compact table with border rows example\"\n id=\"borderless-table\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-checkrow-thead-check-input\"\n name=\"borderless-table-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Contributor</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Position</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Location</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last seen</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Numbers</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__icon\"\n role=\"columnheader\"\n scope=\"col\"\n >Icons</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-checkrow-1-check-input\"\n name=\"borderless-table-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-node1\">Sam Jones</div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Position\">CSS guru</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Location\"\n >Not too sure</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Numbers\">0556</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-checkrow-2-check-input\"\n name=\"borderless-table-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-node2\">Amy Wilson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Position\"\n >Visual design</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Location\">Raleigh</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Numbers\">9492</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-checkrow-3-check-input\"\n name=\"borderless-table-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-node3\">Steve Wilson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Position\"\n >Visual design lead</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Location\">Westford</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Numbers\">9929</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-checkrow-4-check-input\"\n name=\"borderless-table-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-node4\">Emma Jackson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Position\"\n >Interaction design</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Location\">Westford</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >May 9, 2018</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">2217</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
654
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
654
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7566" data-pf-content="true" class="pf-v6-c-content--h3">Borderless compact example</h3>
|
|
655
655
|
|
|
656
656
|
<astro-island uid="2q7vsO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-compact pf-m-grid-md pf-m-no-border-rows\"\n role=\"grid\"\n aria-label=\"This is a compact table with border rows example\"\n id=\"borderless-compact-table\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-compact-table-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-compact-table-checkrow-thead-check-input\"\n name=\"borderless-compact-table-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Contributor</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Position</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Location</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last seen</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Numbers</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__icon\"\n role=\"columnheader\"\n scope=\"col\"\n >Icons</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-compact-table-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-compact-table-checkrow-1-check-input\"\n name=\"borderless-compact-table-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-compact-table-node1\">Sam Jones</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >CSS guru</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Not too sure</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Numbers\"\n >0556</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-compact-table-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-compact-table-checkrow-2-check-input\"\n name=\"borderless-compact-table-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-compact-table-node2\">Amy Wilson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >Visual design</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Raleigh</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Numbers\"\n >9492</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-compact-table-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-compact-table-checkrow-3-check-input\"\n name=\"borderless-compact-table-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-compact-table-node3\">Steve Wilson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >Visual design lead</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Westford</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last seen\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Numbers\"\n >9929</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-compact-table-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-compact-table-checkrow-4-check-input\"\n name=\"borderless-compact-table-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-compact-table-node4\">Emma Jackson</div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Position\"\n >Interaction design</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Location\"\n >Westford</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >May 9, 2018</td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2217</td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__icon pf-m-compact\"\n role=\"cell\"\n data-label=\"Icon\"\n >\n <i class=\"fas fa-check\"></i>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-m-compact\"\n role=\"cell\"\n data-label=\"Action\"\n >\n <a href=\"#\">Action link</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
657
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
657
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7567" data-pf-content="true" class="pf-v6-c-content--h3">Borderless expandable example</h3>
|
|
658
658
|
|
|
659
659
|
<astro-island uid="1Gj3e9" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-lg pf-m-no-border-rows\"\n role=\"grid\"\n aria-label=\"Expandable table example\"\n id=\"borderless-table-expandable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Expand rows</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-expandable-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-expandable-checkrow-thead-check-input\"\n name=\"borderless-table-expandable-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"borderless-table-expandable-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"borderless-table-expandable-content-1\"\n aria-labelledby=\"borderless-table-expandable-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-expandable-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-expandable-checkrow-1-check-input\"\n name=\"borderless-table-expandable-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-expandable-node1\">Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 1</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"borderless-table-expandable-content-1\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"borderless-table-expandable-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"borderless-table-expandable-content-2\"\n aria-labelledby=\"borderless-table-expandable-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-expandable-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-expandable-checkrow-2-check-input\"\n name=\"borderless-table-expandable-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-expandable-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 2</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"borderless-table-expandable-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"borderless-table-expandable-expandable-toggle-3\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"borderless-table-expandable-content-3\"\n aria-labelledby=\"borderless-table-expandable-node-3\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-expandable-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-expandable-checkrow-3-check-input\"\n name=\"borderless-table-expandable-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-expandable-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 3</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"borderless-table-expandable-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"borderless-table-expandable-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"borderless-table-expandable-content-4\"\n aria-labelledby=\"borderless-table-expandable-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"borderless-table-expandable-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"borderless-table-expandable-checkrow-4-check-input\"\n name=\"borderless-table-expandable-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"borderless-table-expandable-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 4</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-m-no-padding\"\n role=\"cell\"\n colspan=\"7\"\n id=\"borderless-table-expandable-content-4\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >Expandable row content has no padding.</div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
660
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
660
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7568" data-pf-content="true" class="pf-v6-c-content--h3">Borderless with compound expansion example</h3>
|
|
661
661
|
|
|
662
662
|
<astro-island uid="ZhXtJp" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-md pf-m-no-border-rows\"\n role=\"grid\"\n aria-label=\"Compound expandable table example\"\n id=\"borderless-compound-expansion-table\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__control-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;10\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 234\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>20 minutes</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-1-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-2-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-3-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__control-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;10\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 234\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>20 minutes</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-4-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-5-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-6-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__control-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;\n 2\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle pf-m-expanded\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 82\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 1\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>1 day ago</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-7-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-8-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-9-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__control-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Repositories\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Branches\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>&nbsp;\n 4\n </span>\n </button>\n </td>\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__text\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>&nbsp;\n 1\n </span>\n </button>\n </td>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" data-label=\"Workspaces\">\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <span>2 days ago</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Open in Github</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-10-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-11-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-m-no-padding\" role=\"cell\" colspan=\"7\">\n <table\n class=\"pf-v6-c-table pf-m-compact pf-m-no-border-rows\"\n role=\"grid\"\n id=\"borderless-compound-expansion-table-nested-table-12-\"\n aria-label=\"Nested table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Description</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Date</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Status</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item one</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item two</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Warning</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item three</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item four</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Description\"\n >Item five</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Date\"\n >May 9, 2018</td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Status\"\n >Active</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
663
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
663
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7569" data-pf-content="true" class="pf-v6-c-content--h3">Borderless usage</h3>
|
|
664
664
|
|
|
665
665
|
|
|
666
666
|
|
|
@@ -682,12 +682,12 @@
|
|
|
682
682
|
|
|
683
683
|
|
|
684
684
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-no-border-rows</code></td><td><code>.pf-v6-c-table.pf-m-compact</code></td><td>Modifies to remove borders between rows. <strong>Note: Does not affect <code>.pf-v6-c-table__control-row</code>.</strong></td></tr><tr><td><code>.pf-m-expandable</code></td><td><code>.pf-v6-c-table.pf-m-compact</code></td><td>Indicates that the table has expandable rows.</td></tr></tbody></table>
|
|
685
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
686
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
685
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7570" data-pf-content="true" class="pf-v6-c-content--h2">Width modifiers</h2>
|
|
686
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7571" data-pf-content="true" class="pf-v6-c-content--h3">Width modifiers examples</h3>
|
|
687
687
|
|
|
688
688
|
<astro-island uid="Z2juOxQ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a width modifier expandable\"\n id=\"table-width-modifiers\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-width-modifiers-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-width-modifiers-checkrow-thead-check-input\"\n name=\"table-width-modifiers-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"columnheader\"\n scope=\"col\"\n >Workspaces</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"columnheader\"\n scope=\"col\"\n >Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-width-modifiers-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-width-modifiers-checkrow-1-check-input\"\n name=\"table-width-modifiers-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-width-modifiers-node1\">Node 1</div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-width-modifiers-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-width-modifiers-checkrow-2-check-input\"\n name=\"table-width-modifiers-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-width-modifiers-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-width-modifiers-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-width-modifiers-checkrow-3-check-input\"\n name=\"table-width-modifiers-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-width-modifiers-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-width-modifiers-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-width-modifiers-checkrow-4-check-input\"\n name=\"table-width-modifiers-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-width-modifiers-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
689
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
690
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
689
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7572" data-pf-content="true" class="pf-v6-c-content--h3">Width modifiers usage</h3>
|
|
690
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7642" data-pf-content="true" class="pf-v6-c-content--p">Width modifiers control the width of the columns. To control the responsive behavior of the table at different screen widths, see <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7573" data-pf-content="true" class="pf-v6-c-content--a">responsive table behavior</a>.</p>
|
|
691
691
|
|
|
692
692
|
|
|
693
693
|
|
|
@@ -714,11 +714,11 @@
|
|
|
714
714
|
|
|
715
715
|
|
|
716
716
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]</code></td><td><code><th></code>, <code><td></code></td><td>Percentage based modifier for <code>th</code> and <code>td</code> widths. <strong>Recommended for sortable title cell</strong></td></tr><tr><td><code>.pf-m-width-max</code></td><td><code><th></code>, <code><td></code></td><td>Percentage based modifier for <code>th</code> and <code>td</code> maximum width.</td></tr><tr><td><code>.pf-m-fit-content</code></td><td><code><th></code>, <code><td></code></td><td>Percentage based modifier for <code>th</code> and <code>td</code> minimum width with no text wrapping.</td></tr></tbody></table>
|
|
717
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
718
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
717
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7574" data-pf-content="true" class="pf-v6-c-content--h2">Hidden/visible breakpoint modifiers</h2>
|
|
718
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7575" data-pf-content="true" class="pf-v6-c-content--h3">Hidden/visible breakpoint modifiers example</h3>
|
|
719
719
|
|
|
720
720
|
<astro-island uid="2rwt9O" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"Table with hidden and visible modifiers example\"\n id=\"table-hidden-visible\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-hidden pf-m-visible-on-md pf-m-hidden-on-lg\"\n role=\"columnheader\"\n scope=\"col\"\n >Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-hidden-on-md pf-m-visible-on-lg\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-hidden pf-m-visible-on-sm\"\n role=\"columnheader\"\n scope=\"col\"\n >Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-md pf-m-hidden-on-lg\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Visible only on md breakpoint</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden-on-md pf-m-visible-on-lg\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >Hidden only on md breakpoint</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-sm\"\n role=\"cell\"\n data-label=\"Last commit\"\n >Hidden on xs breakpoint</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-md pf-m-hidden-on-lg\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden-on-md pf-m-visible-on-lg\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-sm\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-md pf-m-hidden-on-lg\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden-on-md pf-m-visible-on-lg\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-sm\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-md pf-m-hidden-on-lg\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden-on-md pf-m-visible-on-lg\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-hidden pf-m-visible-on-sm\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
721
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
721
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7576" data-pf-content="true" class="pf-v6-c-content--h3">Hidden/visible breakpoint modifiers usage</h3>
|
|
722
722
|
|
|
723
723
|
|
|
724
724
|
|
|
@@ -739,25 +739,25 @@
|
|
|
739
739
|
|
|
740
740
|
|
|
741
741
|
|
|
742
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-hidden{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-table tr > th</code>, <code>.pf-v6-c-table tr > td</code></td><td>Hides a table cell at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
743
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
744
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
745
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
742
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-hidden{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-table tr > th</code>, <code>.pf-v6-c-table tr > td</code></td><td>Hides a table cell at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7577" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>, or hides it at all breakpoints with <code>.pf-m-hidden</code>. <strong>Note: Needs to apply to all cells in the column you want to hide.</strong></td></tr><tr><td><code>.pf-m-visible{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-table tr > th</code>, <code>.pf-v6-c-table tr > td</code></td><td>Shows a table cell at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7578" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr></tbody></table>
|
|
743
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7579" data-pf-content="true" class="pf-v6-c-content--h2">Text control modifiers</h2>
|
|
744
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7629" data-pf-content="true" class="pf-v6-c-content--p">To better control table cell behavior, PatternFly provides a series of modifiers to help contextually control layout. By default, <code>thead</code> cells are set to truncate, whereas <code>tbody</code> cells are set to wrap. Both <code>th</code> and <code>td</code> cells use a set of shared css properties mapped to customizable css variable values. Because only the shared css variables are changed by the modifier selector and not the properties, the modifier can be applied to any parent element up until <code>.pf-v6-c-table</code> itself [<code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</code>, <code>.pf-v6-c-table__text</code>].</p>
|
|
745
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7580" data-pf-content="true" class="pf-v6-c-content--h3">Text control example</h3>
|
|
746
746
|
|
|
747
747
|
<astro-island uid="2kejrR" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-lg\"\n role=\"grid\"\n aria-label=\"This is a simple table example\"\n id=\"modifiers-without-text-wrapper-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-width-20\"\n role=\"columnheader\"\n scope=\"col\"\n >Truncate (width 20%)</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Break word</th>\n\n <th class=\"pf-v6-c-table__th pf-m-wrap\" role=\"columnheader\" scope=\"col\">\n Wrapping table header text. This\n <code>th</code> text will wrap instead of truncate.\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"columnheader\"\n scope=\"col\"\n >Fit content</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Wrapping</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-truncate\"\n role=\"cell\"\n data-label=\"Truncating text\"\n >This text will truncate instead of wrap in table layout and wrap gracefully in grid layout.</td>\n <td\n class=\"pf-v6-c-table__td pf-m-break-word\"\n role=\"cell\"\n data-label=\"Break word\"\n >\n <a\n href=\"#\"\n >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</a>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Wrapping\">\n <p>\n By default,\n <code>thead</code> cells will truncate and\n <code>tbody</code> cells will wrap. Use\n <code>.pf-m-wrap</code> on a\n <code>th</code> to change its behavior.\n </p>\n </td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Fit content\"\n >This cell's content will adjust itself to the parent th width. This modifier only affects table layouts.</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"No wrap\"\n >\n <a href=\"#\">No wrap</a>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
748
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
749
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
748
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7630" data-pf-content="true" class="pf-v6-c-content--p">By default, truncation and wrapping settings do not affect the grid layout, but text will fallback gracefully by passively wrapping long strings. Truncation and wrapping settings will persist with the addition of a <code>.pf-v6-c-table__text</code> wrapper on table cell content. In addition to <code>.pf-v6-c-table__text</code>, all PatternFly layouts can be used in table cells and contain table text elements.</p>
|
|
749
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7581" data-pf-content="true" class="pf-v6-c-content--h3">Text control using the table text element example</h3>
|
|
750
750
|
|
|
751
751
|
<astro-island uid="Z2wafA3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a simple table example\"\n id=\"table-text-element-example\"\n>\n <caption class=\"pf-v6-c-table__caption\">\n This table contains\n <code>.pf-v6-c-table__text</code>&nbsp; examples. The\n <code>.pf-v6-c-table__text</code>&nbsp; element can be using alone or in a nested configuration.\n </caption>\n\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Selector/element</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Result</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"rowheader\"\n data-label=\"Element\"\n scope=\"row\"\n >\n <div class=\"pf-v6-c-table__text\">\n <b>\n <code>th.pf-m-truncate</code>\n </b>\n </div>\n </th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-truncate\"\n role=\"cell\"\n data-label=\"Truncating text\"\n >\n <span class=\"pf-v6-c-table__text\">\n This table cell contains a single\n <code>`.pf-v6-c-table__text`</code>&nbsp; wrapper with the parent table cell applying\n <code>`.pf-m-truncate`</code>. The child\n <code>`.pf-v6-c-table__text`</code>&nbsp; element will inherit the modifier settings and apply to the grid layout.\n </span>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"rowheader\"\n data-label=\"Element\"\n scope=\"row\"\n >\n <div class=\"pf-v6-c-table__text\">\n <b>\n <code>.pf-v6-l-stack</code>\n </b>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Truncating text\">\n <div class=\"pf-v6-l-stack pf-m-gutter\">\n <div class=\"pf-v6-l-stack__item\">\n <div class=\"pf-v6-c-table__text\">\n Because\n <code>.pf-m-grid</code>&nbsp; applies a grid layout to\n <code>.pf-v6-c-table</code>, child elements will stack in the grid layout. To prevent this, wrap multiple elements with a div or use a PatternFly layout.\n </div>\n </div>\n <div class=\"pf-v6-l-stack__item\">\n <p class=\"pf-v6-c-table__text\">\n The\n <b>\n <code>.pf-v6-c-table__text</code>&nbsp;element\n </b>&nbsp; can additionally be nested, like in this example. The next\n <code>.pf-v6-c-table__text</code> element has a very long url whose width needs be constrained.\n </p>\n </div>\n <div class=\"pf-v6-l-stack__item\">\n <a\n class=\"pf-v6-c-table__text pf-m-truncate\"\n href=\"#\"\n >http://truncatemodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com</a>\n </div>\n <div class=\"pf-v6-l-stack__item\">\n <p class=\"pf-v6-c-table__text\">\n This\n <b>\n <code>.pf-v6-c-table__text</code>&nbsp;element\n </b>&nbsp; applies its own built in grid layout\n <b>\n <code>.pf-m-stack</code>\n </b>&nbsp;as well as a gutter\n <b>\n <code>.pf-m-gutter</code>\n </b>.\n </p>\n </div>\n </div>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"rowheader\"\n data-label=\"Element\"\n scope=\"row\"\n >\n <div class=\"pf-v6-c-table__text\">\n <b>\n <code>.pf-v6-l-flex</code>\n </b>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Truncating text\">\n <div class=\"pf-v6-l-flex pf-m-column pf-m-row-on-xl\">\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <p\n class=\"pf-v6-c-table__text\"\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <a\n class=\"pf-v6-c-table__text pf-m-break-word\"\n href=\"#\"\n >http://breakwordmodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com</a>\n </div>\n </div>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"rowheader\"\n data-label=\"Element\"\n scope=\"row\"\n >\n <div class=\"pf-v6-c-table__text\">\n <b>\n <code>.pf-v6-l-flex</code>\n </b>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Truncating text\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">\n <i class=\"fas fa-code-branch\" aria-hidden=\"true\"></i>\n &nbsp;5\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>\n &nbsp;9\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>\n &nbsp;2\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n &nbsp;11\n </div>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <p\n class=\"pf-v6-c-table__text\"\n >This is paragraph that we want to wrap. It doesn' t need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here.</p>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a\n class=\"pf-v6-c-table__text pf-m-break-word\"\n href=\"#\"\n >http://breakwordmodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com</a>\n </div>\n </div>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"rowheader\"\n data-label=\"Element\"\n scope=\"row\"\n >\n <div class=\"pf-v6-c-table__text\">\n <b>\n <code>.pf-v6-l-grid</code>\n </b>\n </div>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Truncating text\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-6-col pf-m-3-col-on-md\">Item 1</div>\n <div class=\"pf-v6-l-grid__item pf-m-6-col pf-m-3-col-on-md\">Item 2</div>\n <div class=\"pf-v6-l-grid__item pf-m-6-col pf-m-3-col-on-md\">Item 3</div>\n <div class=\"pf-v6-l-grid__item pf-m-6-col pf-m-3-col-on-md\">Item 4</div>\n <div class=\"pf-v6-l-grid__item\">\n <p\n class=\"pf-v6-c-table__text\"\n >This is paragraph that we want to wrap. It doesn' t need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here.</p>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <a\n class=\"pf-v6-c-table__text pf-m-truncate\"\n href=\"#\"\n >http://breakwordmodifierappliedtoaverylongurlthatwillforcethetabletobreakluckilywehavethepfctabletextelement.com</a>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
752
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
753
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
752
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7582" data-pf-content="true" class="pf-v6-c-content--h3">Table with long strings in the content</h3>
|
|
753
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7583" data-pf-content="true" class="pf-v6-c-content--p">Long strings in table cells will push that column wider and possible take from other columns. This can cause content or headers to be truncated.</p>
|
|
754
754
|
|
|
755
755
|
<astro-island uid="Z22Bgan" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tooltip pf-m-top\" role=\"tooltip\">\n <div class=\"pf-v6-c-tooltip__arrow\"></div>\n\n <div class=\"pf-v6-c-tooltip__content\" id=\"tooltip-top-content\">Pull Requests</div>\n</div>\n<table\n class=\"pf-v6-c-table\"\n aria-label=\"This is a simple table example\"\n id=\"th-truncation-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Branches</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Long lines of text will shrink adjacent column widths.</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n This example is not responsive. Adjacent\n <code>tbody</code> cells will shrink as a result of this text being a longer string and adjacent text being shorter in length. Truncation can be overridden in\n <code>th</code> cells with the addition of\n <code>.pf-m-wrap</code>,\n <code>.pf-m-nowrap</code> or\n <code>.pf-m-fit-content</code>.\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
756
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
757
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
756
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7584" data-pf-content="true" class="pf-v6-c-content--h3">Width constrained</h3>
|
|
757
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7643" data-pf-content="true" class="pf-v6-c-content--p">Add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7585" data-pf-content="true" class="pf-v6-c-content--a">width modifier</a> to <code>thead th</code> to limit string length or add <code>.pf-m-truncate</code> to <code>tbody td</code>.</p>
|
|
758
758
|
|
|
759
759
|
<astro-island uid="Z2jQbTF" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a simple table example\"\n id=\"width-constrained-example\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-width-40\"\n role=\"columnheader\"\n scope=\"col\"\n >Width 40</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n role=\"columnheader\"\n scope=\"col\"\n >Fit content th</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%.</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-truncate\"\n role=\"cell\"\n data-label=\"Repository name\"\n >This string will truncate in table mode only. Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%.</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
760
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
760
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7586" data-pf-content="true" class="pf-v6-c-content--h3">Text control modifiers usage</h3>
|
|
761
761
|
|
|
762
762
|
|
|
763
763
|
|
|
@@ -799,31 +799,31 @@
|
|
|
799
799
|
|
|
800
800
|
|
|
801
801
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__text</code></td><td><code>th > *</code>, <code>td > *</code></td><td>Initiates a table text element.</td></tr><tr><td><code>.pf-m-wrap</code></td><td><code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</code>, <code>.pf-v6-c-table__text</code></td><td>Sets table cell content to wrap. If applied to <code>thead</code>, <code>tbody</code> or <code>tr</code>, then all child cells will be affected. This is the default behavior for <code>tbody</code> cells.</td></tr><tr><td><code>.pf-m-truncate</code></td><td><code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</code>, <code>.pf-v6-c-table__text</code></td><td>Sets text to truncate based on a minimum width and available space adjacent table cells. If applied to <code>thead</code>, <code>tbody</code> or <code>tr</code>, then all child cells will be affected. This is the default behavior for <code>thead</code> cells.</td></tr><tr><td><code>.pf-m-nowrap</code></td><td><code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</code>, <code>.pf-v6-c-table__text</code></td><td>Unsets min/max width and sets whitespace to nowrap. If applied to <code>thead</code>, <code>tbody</code> or <code>tr</code>, then all child cells will be affected. This is specifically beneficial for cell’s whose <code>thead th</code> cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell’s content above all other cell’s contents.</td></tr><tr><td><code>.pf-m-fit-content</code></td><td><code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</code>, <code>.pf-v6-c-table__text</code></td><td>Fit column width to cell content. If applied to <code>thead</code>, <code>tbody</code> or <code>tr</code>, then all child cells will be affected.</td></tr><tr><td><code>.pf-m-break-word</code></td><td><code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, <code>td</code>, <code>.pf-v6-c-table__text</code></td><td>Breaks long strings to break wherever necessary as defined by the table layout. If applied to <code>thead</code>, <code>tbody</code> or <code>tr</code>, then all child cells will be affected.</td></tr></tbody></table>
|
|
802
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
803
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
804
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
805
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
806
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
807
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
808
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
802
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7587" data-pf-content="true" class="pf-v6-c-content--h2">Sticky table modifiers</h2>
|
|
803
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7631" data-pf-content="true" class="pf-v6-c-content--p"><strong>Note:</strong> Sticky table headers and columns have a higher <code>z-index</code> than the <code>z-index</code> used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.</p>
|
|
804
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7588" data-pf-content="true" class="pf-v6-c-content--p">There are a few ways this can be handled:</p>
|
|
805
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7645" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
806
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7632" data-pf-content="true" class="pf-v6-c-content--li">Manipulate the <code>z-index</code> of the menu and/or table headers/columns manually.</li>
|
|
807
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7633" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>menuAppendTo</code> prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the <code><body></code> element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.</li>
|
|
808
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7634" data-pf-content="true" class="pf-v6-c-content--li">In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower <code>z-index</code> than the <code>z-index</code> of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.</li>
|
|
809
809
|
</ul>
|
|
810
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
810
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7589" data-pf-content="true" class="pf-v6-c-content--h3">Sticky header</h3>
|
|
811
811
|
|
|
812
812
|
<astro-island uid="Z61tgB" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table pf-m-grid-md pf-m-sticky-header\"\n role=\"grid\"\n aria-label=\"This is a table with sticky header cells\"\n id=\"table-sticky-header\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
813
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
813
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7590" data-pf-content="true" class="pf-v6-c-content--h3">Sticky column</h3>
|
|
814
814
|
|
|
815
815
|
<astro-island uid="Z1FmwWA" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table\"\n role=\"grid\"\n aria-label=\"This is a scrollable table\"\n id=\"sticky-column-example\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Fact</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">State</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 3</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 4</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 5</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 6</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 7</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 8</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 9</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 1</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 1</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 2</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 2</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 3</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 4</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 5</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 6</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 7</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 8</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 8</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 9</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 9</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-9</td>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
816
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
816
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7591" data-pf-content="true" class="pf-v6-c-content--h3">Multiple sticky columns</h3>
|
|
817
817
|
|
|
818
818
|
<astro-island uid="Z26ljqR" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table\"\n role=\"grid\"\n aria-label=\"This is a scrollable table\"\n id=\"sticky-multi-column-example\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Fact</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 120px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">State</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 3</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 4</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 5</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 6</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 7</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 8</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 9</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 1</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 1</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 2</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 2</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 3</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 3</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 4</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 4</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 5</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 5</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 6</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 6</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 7</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 7</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 8</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 8</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 9</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 9</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-9</td>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
819
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
819
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7592" data-pf-content="true" class="pf-v6-c-content--h3">Sticky columns and header</h3>
|
|
820
820
|
|
|
821
821
|
<astro-island uid="ZXH9rx" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-outer-wrapper\">\n <div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table pf-m-sticky-header\"\n role=\"grid\"\n aria-label=\"This is a scrollable table\"\n id=\"sticky-header-columns-example\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Fact</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 120px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">State</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 3</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 4</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 5</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 6</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 7</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 8</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 9</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 1</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 1</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 2</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 2</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 3</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 3</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 4</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 4</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 5</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 5</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 6</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 6</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 7</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 7</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 8</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 8</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-9</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 100px;\"\n >Fact 9</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-right pf-v6-c-table__sticky-cell pf-m-left\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 80px; --pf-v6-c-table__sticky-cell--InsetInlineStart: 100px;\"\n >State 9</th>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-8</td>\n\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-9</td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
822
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
822
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7593" data-pf-content="true" class="pf-v6-c-content--h3">Sticky right column</h3>
|
|
823
823
|
|
|
824
824
|
<astro-island uid="Z1wmA2Y" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table\"\n role=\"grid\"\n aria-label=\"This is a scrollable table\"\n id=\"sticky-right-column-example\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Fact</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n data-label=\"Example th\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">State</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 3</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 4</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 5</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 6</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 7</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n >Header 8</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Header 9</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 1</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 1</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 1-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 1-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 2</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 2</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 2-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 2-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 3-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 3-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 4-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 4-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 5-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 5-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 6-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 6-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 7-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 7-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 8</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 8</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 8-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 8-9</th>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Fact 9</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >State 9</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-3</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-4</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-5</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-6</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-7</td>\n <td\n class=\"pf-v6-c-table__td pf-m-nowrap\"\n role=\"cell\"\n data-label=\"Example td\"\n >Test cell 9-8</td>\n\n <th\n class=\"pf-v6-c-table__th pf-m-truncate pf-m-border-left pf-v6-c-table__sticky-cell pf-m-right\"\n role=\"columnheader\"\n data-label=\"Example th\"\n scope=\"col\"\n style=\"--pf-v6-c-table__sticky-cell--MinWidth: 150px;\"\n >Test cell 9-9</th>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
825
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
826
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
825
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7594" data-pf-content="true" class="pf-v6-c-content--h3">Sticky table usage</h3>
|
|
826
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7635" data-pf-content="true" class="pf-v6-c-content--p">For sticky columns to function correctly, the parent table’s width must be controlled with <code>.pf-v6-c-scroll-inner-wrapper</code>. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (<code>.pf-v6-c-scroll-outer-wrapper</code> and <code>.pf-v6-c-scroll-inner-wrapper</code>)</p>
|
|
827
827
|
|
|
828
828
|
|
|
829
829
|
|
|
@@ -865,18 +865,18 @@
|
|
|
865
865
|
|
|
866
866
|
|
|
867
867
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-sticky-header</code></td><td><code>.pf-v6-c-table</code></td><td>Makes the table cells in <code><thead></code> sticky to the top of the table on scroll.</td></tr><tr><td><code>.pf-v6-c-scroll-outer-wrapper</code></td><td><code><div></code></td><td>Initiates a table container sticky columns outer wrapper.</td></tr><tr><td><code>.pf-v6-c-scroll-inner-wrapper</code></td><td><code><div></code></td><td>Initiates a table container sticky columns inner wrapper.</td></tr><tr><td><code>.pf-v6-c-table__sticky-cell</code></td><td><code><th></code>, <code><td></code></td><td>Initiates a sticky table cell.</td></tr><tr><td><code>.pf-m-right</code>, <code>.pf-m-inline-end</code></td><td><code>.pf-v6-c-table__sticky-cell</code></td><td>Initiates a sticky, right-hand (in LTR) or left-hand (in RTL) table cell.</td></tr><tr><td><code>.pf-m-left</code>, <code>.pf-m-inline-start</code></td><td><code>.pf-v6-c-table__sticky-cell</code></td><td>Initiates a sticky, left-hand (in LTR) or right-hand (in RTL) table cell.</td></tr></tbody></table>
|
|
868
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
869
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
868
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7595" data-pf-content="true" class="pf-v6-c-content--h2">Nested column headers</h2>
|
|
869
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7596" data-pf-content="true" class="pf-v6-c-content--h3">Nested column headers and expandable rows</h3>
|
|
870
870
|
|
|
871
871
|
<astro-island uid="RDXW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table pf-m-expandable\"\n role=\"grid\"\n aria-label=\"This is a nested column header table example\"\n id=\"nested-columns-expandable-example\"\n >\n <thead class=\"pf-v6-c-table__thead pf-m-nested-column-header\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n rowspan=\"2\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Expandable toggle</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n rowspan=\"2\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"nested-columns-expandable-example-checkrow-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"nested-columns-expandable-example-checkrow-check-input\"\n name=\"nested-columns-expandable-example-checkrow-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n rowspan=\"2\"\n >Team</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n colspan=\"3\"\n >Members</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n rowspan=\"2\"\n >Contact</th>\n\n <td class=\"pf-v6-c-table__td\" rowspan=\"2\"></td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-m-first-cell-offset-reset\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead\"\n role=\"columnheader\"\n scope=\"col\"\n >Design lead</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead\"\n role=\"columnheader\"\n scope=\"col\"\n >Interaction design</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n >Visual designers</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"nested-columns-expandable-example-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"nested-columns-expandable-example-content-1\"\n aria-labelledby=\"nested-columns-expandable-example-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__check\"\n aria-label=\"Check row\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"nested-columns-expandable-example-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"nested-columns-expandable-example-checkrow-1-check-input\"\n name=\"nested-columns-expandable-example-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Developer program\"\n id=\"nested-columns-expandable-example-node1\"\n >Developer program</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Branches\"\n >Stacey Logan</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >Mark Shakshober</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >Kaliq Ray</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Message us!</span>\n </button>\n </td>\n </tr>\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"5\"\n id=\"nested-columns-expandable-example-content-1\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-columns-expandable-example-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"nested-columns-expandable-example-content-2\"\n aria-labelledby=\"nested-columns-expandable-example-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__check\"\n aria-label=\"Check row\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"nested-columns-expandable-example-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"nested-columns-expandable-example-checkrow-2-check-input\"\n name=\"nested-columns-expandable-example-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Developer program\"\n id=\"nested-columns-expandable-example-node2\"\n >Developer program</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Branches\"\n >Stacey Logan</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >Mark Shakshober</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >Kaliq Ray</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Message us!</span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"5\"\n id=\"nested-columns-expandable-example-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-columns-expandable-example-expandable-toggle-3\"\n type=\"button\"\n aria-controls=\"nested-columns-expandable-example-content-3\"\n aria-labelledby=\"nested-columns-expandable-example-node-3\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__check\"\n aria-label=\"Check row\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"nested-columns-expandable-example-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"nested-columns-expandable-example-checkrow-3-check-input\"\n name=\"nested-columns-expandable-example-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Developer program\"\n id=\"nested-columns-expandable-example-node3\"\n >Developer program</th>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Branches\"\n >Stacey Logan</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >Mark Shakshober</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Workspaces\"\n >Kaliq Ray</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Last commit\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Message us!</span>\n </button>\n </td>\n </tr>\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"5\"\n id=\"nested-columns-expandable-example-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
872
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
872
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7597" data-pf-content="true" class="pf-v6-c-content--h3">Nested column headers example</h3>
|
|
873
873
|
|
|
874
874
|
<astro-island uid="Z1z7dRO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table\"\n role=\"grid\"\n aria-label=\"This is a nested column header table example\"\n id=\"table-nested-column-headers-example\"\n >\n <thead class=\"pf-v6-c-table__thead pf-m-nested-column-header\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n colspan=\"3\"\n >Pods</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n colspan=\"2\"\n >Ports</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n rowspan=\"2\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Packets</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-wrap pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Source</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-wrap pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Destination</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-fit-content pf-m-border-right pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Date & Time</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-fit-content pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Source</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-fit-content pf-m-border-right pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Destination</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
875
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
875
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7598" data-pf-content="true" class="pf-v6-c-content--h3">Nested column headers, sticky header</h3>
|
|
876
876
|
|
|
877
877
|
<astro-island uid="ZSUKal" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-scroll-inner-wrapper\">\n <table\n class=\"pf-v6-c-table pf-m-grid-md pf-m-sticky-header\"\n role=\"grid\"\n aria-label=\"This is a sticky nested column header table example\"\n id=\"table-nested-column-headers-sticky-header-example\"\n >\n <thead class=\"pf-v6-c-table__thead pf-m-nested-column-header\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n colspan=\"3\"\n >Pods</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-border-right\"\n role=\"columnheader\"\n scope=\"col\"\n colspan=\"2\"\n >Ports</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n rowspan=\"2\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Packets</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-wrap pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Source</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-wrap pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Destination</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-fit-content pf-m-border-right pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Date & Time</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-fit-content pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Source</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__subhead pf-m-fit-content pf-m-border-right pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Destination</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-source-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-flex pf-m-nowrap\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">P</span>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <span class=\"pf-v6-c-table__text pf-m-truncate\">\n <a href=\"#\">api-pod-destination-name</a>\n </span>\n </div>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Date &amp; time\">\n <div class=\"pf-v6-l-stack\">\n <span>June 22, 2021</span>\n <span class=\"pf-v6-u-color-200\">3:58:24 PM</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Source\">\n <div class=\"pf-v6-l-stack\">\n <span>443</span>\n <span class=\"pf-v6-u-color-200\">(HTTPS)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Destination\">\n <div class=\"pf-v6-l-stack\">\n <span>24</span>\n <span class=\"pf-v6-u-color-200\">(smtp)</span>\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Packets\">3</td>\n </tr>\n </tbody>\n </table>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
878
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
879
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
878
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7599" data-pf-content="true" class="pf-v6-c-content--h3">Nested column header modifier usage</h3>
|
|
879
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7600" data-pf-content="true" class="pf-v6-c-content--h2">Favorites</h2>
|
|
880
880
|
|
|
881
881
|
|
|
882
882
|
|
|
@@ -903,13 +903,13 @@
|
|
|
903
903
|
|
|
904
904
|
|
|
905
905
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-nested-column-header</code></td><td><code><thead></code></td><td>Modifies a table header to handle nested header cells.</td></tr><tr><td><code>.pf-m-border-right</code></td><td><code><th></code>, <code><td></code></td><td>Modifies a table cell to show a right border.</td></tr><tr><td><code>.pf-m-border-left</code></td><td><code><th></code>, <code><td></code></td><td>Modifies a table cell to show a left border.</td></tr></tbody></table>
|
|
906
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
906
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7601" data-pf-content="true" class="pf-v6-c-content--h3">Favorites examples</h3>
|
|
907
907
|
|
|
908
908
|
<astro-island uid="Z28lPPr" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a favorites table example\"\n id=\"table-favorites\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-favorites-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-favorites-checkrow-thead-check-input\"\n name=\"table-favorites-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Row favorited</span>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-favorites-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-favorites-checkrow-1-check-input\"\n name=\"table-favorites-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Starred\"\n id=\"table-favorites-favorite-button1\"\n aria-labelledby=\"table-favorites-node1 table-favorites-favorite-button1\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <div>\n <span id=\"table-favorites-node1\">Repository 1</span>. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines.\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-favorites-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-favorites-checkrow-2-check-input\"\n name=\"table-favorites-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Not starred\"\n id=\"table-favorites-favorite-button2\"\n aria-labelledby=\"table-favorites-node2 table-favorites-favorite-button2\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-node2\">Repository 2</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-favorites-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-favorites-checkrow-3-check-input\"\n name=\"table-favorites-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Starred\"\n id=\"table-favorites-favorite-button3\"\n aria-labelledby=\"table-favorites-node3 table-favorites-favorite-button3\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-node3\">Repository 3</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-favorites-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-favorites-checkrow-4-check-input\"\n name=\"table-favorites-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Not starred\"\n id=\"table-favorites-favorite-button4\"\n aria-labelledby=\"table-favorites-node4 table-favorites-favorite-button4\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-node4\">Repository 4</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
909
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
909
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7602" data-pf-content="true" class="pf-v6-c-content--h3">Favorites sortable example</h3>
|
|
910
910
|
|
|
911
911
|
<astro-island uid="29y29B" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a sortable with favorites table example\"\n id=\"table-favorites-sortable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__favorite\"\n aria-label=\"Row favorited\"\n role=\"columnheader\"\n scope=\"col\"\n aria-sort=\"none\"\n >\n <div class=\"pf-v6-c-action-list pf-m-icons\">\n <div class=\"pf-v6-c-action-list__item\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Favorite all\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-action-list__item\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Sort favorites\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Starred\"\n id=\"table-favorites-sortable-favorite-button1\"\n aria-labelledby=\"table-favorites-sortable-node1 table-favorites-sortable-favorite-button1\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <div>\n <span id=\"table-favorites-sortable-node1\">Repository 1</span>. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines. This is a long title that will wrap to multiple lines.\n </div>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Starred\"\n id=\"table-favorites-sortable-favorite-button3\"\n aria-labelledby=\"table-favorites-sortable-node3 table-favorites-sortable-favorite-button3\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-sortable-node3\">Repository 3</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Not starred\"\n id=\"table-favorites-sortable-favorite-button2\"\n aria-labelledby=\"table-favorites-sortable-node2 table-favorites-sortable-favorite-button2\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-sortable-node2\">Repository 2</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Not starred\"\n id=\"table-favorites-sortable-favorite-button4\"\n aria-labelledby=\"table-favorites-sortable-node4 table-favorites-sortable-favorite-button4\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-sortable-node4\">Repository 4</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td pf-v6-c-table__favorite\" role=\"cell\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"Not starred\"\n id=\"table-favorites-sortable-favorite-button5\"\n aria-labelledby=\"table-favorites-sortable-node5 table-favorites-sortable-favorite-button5\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n <span id=\"table-favorites-sortable-node5\">Repository 5</span>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
912
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
912
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7603" data-pf-content="true" class="pf-v6-c-content--h3">Favorites accessibility</h3>
|
|
913
913
|
|
|
914
914
|
|
|
915
915
|
|
|
@@ -936,7 +936,7 @@
|
|
|
936
936
|
|
|
937
937
|
|
|
938
938
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role="grid"</code></td><td><code>.pf-v6-c-table</code></td><td>Identifies the element that serves as the grid widget container. <strong>Required</strong></td></tr><tr><td><code>aria-label</code></td><td><code>.pf-v6-c-table</code></td><td>Provides an accessible name for the table when a descriptive <code><caption></code> or <code><h*></code> is not available. <strong>Required in the absence of <code><caption></code> or <code><h*></code></strong></td></tr><tr><td><code>data-label="[td description]"</code></td><td><code><td></code></td><td>This attribute replaces table header in mobile viewport. It is rendered by <code>::before</code> pseudo element.</td></tr></tbody></table>
|
|
939
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
939
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7604" data-pf-content="true" class="pf-v6-c-content--h3">Favorites usage</h3>
|
|
940
940
|
|
|
941
941
|
|
|
942
942
|
|
|
@@ -963,9 +963,9 @@
|
|
|
963
963
|
|
|
964
964
|
|
|
965
965
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__favorite</code></td><td><code>td</code></td><td>Initiates a favorite table body cell.</td></tr><tr><td><code>.pf-m-favorited</code></td><td><code>.pf-v6-c-table__favorite</code></td><td>Modifies a favorite cell for the favorited state.</td></tr><tr><td><code>.pf-m-favorite</code></td><td><code>.pf-v6-c-table__sort</code></td><td>Modifies a sortable table header cell for use with a favorites column.</td></tr></tbody></table>
|
|
966
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
967
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
968
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
966
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7605" data-pf-content="true" class="pf-v6-c-content--h2">Draggable rows</h2>
|
|
967
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7606" data-pf-content="true" class="pf-v6-c-content--h3">Draggable rows example</h3>
|
|
968
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7641" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span></span>
|
|
969
969
|
<span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"table-draggable-rows-help"</span></span>
|
|
970
970
|
<span class="line"><span style="color:#E1E4E8">>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
971
971
|
<span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">table</span></span>
|
|
@@ -1127,7 +1127,7 @@
|
|
|
1127
1127
|
<span class="line"><span style="color:#B392F0"> aria-live</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"assertive"</span></span>
|
|
1128
1128
|
<span class="line"><span style="color:#E1E4E8">>This is the aria-live section that provides real-time feedback to the user.</</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
1129
1129
|
<span class="line"></span></code></pre>
|
|
1130
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1130
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7607" data-pf-content="true" class="pf-v6-c-content--h3">Draggable rows accessibility</h3>
|
|
1131
1131
|
|
|
1132
1132
|
|
|
1133
1133
|
|
|
@@ -1164,7 +1164,7 @@
|
|
|
1164
1164
|
|
|
1165
1165
|
|
|
1166
1166
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-pressed="true or false"</code></td><td><code>.pf-v6-c-table__draggable .pf-v6-c-button</code></td><td>Indicates whether the button is currently pressed or not.</td></tr><tr><td><code>aria-live</code></td><td><code>[element with live text]</code></td><td>To give screen reader users live feedback about what’s happening during interaction with the table, both during drag and drop interactions and keyboard interactions. <strong>Highly Recommended</strong></td></tr><tr><td><code>aria-describedby="[id value of applicable content]"</code></td><td><code>.pf-v6-c-table__draggable .pf-v6-c-button</code></td><td>Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a <code><div id="table-draggable-rows-help"></div></code>. <strong>Highly recommended</strong></td></tr><tr><td><code>aria-labelledby="[id of .pf-v6-c-table__draggable .pf-v6-c-button] [id of row title text]"</code></td><td><code>.pf-v6-c-table__draggable .pf-v6-c-button</code></td><td>Provides an accessible name for the draggable button.</td></tr><tr><td><code>id="[]"</code></td><td><code>.pf-v6-c-table__draggable .pf-v6-c-button</code>, <code>[element with row title text]</code></td><td>Gives the button and the text element accessible IDs.</td></tr></tbody></table>
|
|
1167
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1167
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7608" data-pf-content="true" class="pf-v6-c-content--h3">Draggable rows usage</h3>
|
|
1168
1168
|
|
|
1169
1169
|
|
|
1170
1170
|
|
|
@@ -1186,21 +1186,21 @@
|
|
|
1186
1186
|
|
|
1187
1187
|
|
|
1188
1188
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-table__draggable</code></td><td><code><td></code></td><td>Initiates a draggable table cell.</td></tr><tr><td><code>.pf-m-drag-over</code></td><td><code>.pf-v6-c-table</code></td><td>Modifies the table to indicate that a draggable item is being dragged over the table.</td></tr></tbody></table>
|
|
1189
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1190
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1191
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1189
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7609" data-pf-content="true" class="pf-v6-c-content--h2">Striped</h2>
|
|
1190
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7636" data-pf-content="true" class="pf-v6-c-content--p">Basic striped table rows are supported on tables with a single <code><tbody></code> element and expandable tables by applying <code>.pf-m-striped</code> to the <code>.pf-v6-c-table</code> element, which applies striped styling to odd table rows. For more complex tables, <code>.pf-m-striped</code> can be applied directly to the <code><tbody></code> and <code><tr></code> elements. The class <code>.pf-m-striped-even</code> can be applied to <code><tbody></code> elements to apply striped styling to the even rows in the table body. This is for use in tables with multiple <code><tbody></code> elements where even row striping may be needed to ensure visual consistency.</p>
|
|
1191
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7610" data-pf-content="true" class="pf-v6-c-content--h3">Striped table example</h3>
|
|
1192
1192
|
|
|
1193
1193
|
<astro-island uid="Z2kpOyX" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md pf-m-striped\"\n role=\"grid\"\n aria-label=\"This is a striped table example\"\n id=\"table-striped\"\n>\n <caption class=\"pf-v6-c-table__caption\">This is the table caption</caption>\n\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
1194
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1194
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7611" data-pf-content="true" class="pf-v6-c-content--h3">Striped expandable table example</h3>
|
|
1195
1195
|
|
|
1196
1196
|
<astro-island uid="2oMRWc" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-expandable pf-m-grid-lg pf-m-striped\"\n role=\"grid\"\n aria-label=\"Striped expandable table example\"\n id=\"table-striped-expandable\"\n>\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Expand row</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__check\"\n aria-label=\"Row select\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-striped-expandable-checkrow-thead-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-striped-expandable-checkrow-thead-check-input\"\n name=\"table-striped-expandable-checkrow-thead-check-input\"\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected\"\n role=\"columnheader\"\n aria-sort=\"ascending\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Repositories</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-long-arrow-alt-up\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Branches</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__sort\"\n role=\"columnheader\"\n aria-sort=\"none\"\n scope=\"col\"\n >\n <button class=\"pf-v6-c-table__button\">\n <span class=\"pf-v6-c-table__button-content\">\n <span class=\"pf-v6-c-table__text\">Pull requests</span>\n <span class=\"pf-v6-c-table__sort-indicator\">\n <i class=\"fas fa-arrows-alt-v\"></i>\n </span>\n </span>\n </button>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Links</span>\n </th>\n\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-striped-expandable-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-striped-expandable-content-1\"\n aria-labelledby=\"table-striped-expandable-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-striped-expandable-checkrow-1-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-striped-expandable-checkrow-1-check-input\"\n name=\"table-striped-expandable-checkrow-1-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-striped-expandable-node1\">Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 1</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"4\"\n id=\"table-striped-expandable-content-1\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__cell-empty\">\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"table-striped-expandable-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"table-striped-expandable-content-2\"\n aria-labelledby=\"table-striped-expandable-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-striped-expandable-checkrow-2-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-striped-expandable-checkrow-2-check-input\"\n name=\"table-striped-expandable-checkrow-2-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-striped-expandable-node2\">Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 2</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-striped-expandable-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-striped-expandable-expandable-toggle-3\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-striped-expandable-content-3\"\n aria-labelledby=\"table-striped-expandable-node-3\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-striped-expandable-checkrow-3-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-striped-expandable-checkrow-3-check-input\"\n name=\"table-striped-expandable-checkrow-3-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-striped-expandable-node3\">Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 3</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-striped-expandable-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >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>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"table-striped-expandable-expandable-toggle-4\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"table-striped-expandable-content-4\"\n aria-labelledby=\"table-striped-expandable-node-4\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </span>\n </button>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__check\" aria-label=\"Check row\">\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"table-striped-expandable-checkrow-4-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"table-striped-expandable-checkrow-4-check-input\"\n name=\"table-striped-expandable-checkrow-4-check-input\"\n aria-label=\"Select row\"\n />\n </label>\n </td>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n data-label=\"Data label name\"\n >\n <div id=\"table-striped-expandable-node4\">Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </th>\n\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Action\">\n <a href=\"#\">Link 4</a>\n </td>\n\n <td class=\"pf-v6-c-table__td pf-v6-c-table__action\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td pf-m-no-padding\"\n role=\"cell\"\n colspan=\"7\"\n id=\"table-striped-expandable-content-4\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >Expandable row content has no padding.</div>\n </td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
1197
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1197
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7612" data-pf-content="true" class="pf-v6-c-content--h3">Striped multiple tbody example</h3>
|
|
1198
1198
|
|
|
1199
1199
|
<astro-island uid="ZshDbx" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a striped tbody example\"\n id=\"table-striped-tbody\"\n>\n <caption class=\"pf-v6-c-table__caption\">This is the table caption</caption>\n\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-striped\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n tbody 1 - Repository 1\n <br />\n <small>(odd rows striped)</small>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >tbody 1 - Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n tbody 1 - Repository 3\n <br />\n <small>(odd rows striped)</small>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-striped-even\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >tbody 2 - Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n tbody 2 - Repository 5\n <br />\n <small>(even rows striped using `.pf-m-striped-even`)</small>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >tbody 2 - Repository 6</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Repository name\">\n tbody 2 - Repository 7\n <br />\n <small>(even rows striped using `.pf-m-striped-even`)</small>\n </td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
1200
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1200
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7613" data-pf-content="true" class="pf-v6-c-content--h3">Striped tr example</h3>
|
|
1201
1201
|
|
|
1202
1202
|
<astro-island uid="Z1t68ux" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<table\n class=\"pf-v6-c-table pf-m-grid-md\"\n role=\"grid\"\n aria-label=\"This is a striped tr example\"\n id=\"table-striped-tr\"\n>\n <caption class=\"pf-v6-c-table__caption\">This is the table caption</caption>\n\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Repositories</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Branches</th>\n\n <th\n class=\"pf-v6-c-table__th\"\n role=\"columnheader\"\n scope=\"col\"\n >Pull requests</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Workspaces</th>\n\n <th class=\"pf-v6-c-table__th\" role=\"columnheader\" scope=\"col\">Last commit</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody\" role=\"rowgroup\">\n <tr class=\"pf-v6-c-table__tr pf-m-striped\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 1</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 2</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr pf-m-striped\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 3</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Repository name\"\n >Repository 4</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Branches\">10</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Pull requests\">25</td>\n <td class=\"pf-v6-c-table__td\" role=\"cell\" data-label=\"Workspaces\">5</td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Last commit\"\n >2 days ago</td>\n </tr>\n </tbody>\n</table>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
1203
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1203
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7614" data-pf-content="true" class="pf-v6-c-content--h3">Striped table usage</h3>
|
|
1204
1204
|
|
|
1205
1205
|
|
|
1206
1206
|
|
|
@@ -1222,22 +1222,22 @@
|
|
|
1222
1222
|
|
|
1223
1223
|
|
|
1224
1224
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-striped</code></td><td><code>.pf-v6-c-table</code>, <code>tbody</code>, <code>tr</code></td><td>Modifies odd table rows to be striped.</td></tr><tr><td><code>.pf-m-striped-even</code></td><td><code>tbody</code></td><td>Modifies even table rows to be striped. For use in tables with multiple <code>tbody</code> elements where adjacent <code>tbody</code> elements need even row striping to maintain visual consistency.</td></tr></tbody></table>
|
|
1225
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1226
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1227
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1228
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1229
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1230
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1231
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1232
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1233
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1234
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1235
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1236
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1237
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1238
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1239
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1240
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1241
|
-
</ul> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
1225
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7615" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
1226
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7616" data-pf-content="true" class="pf-v6-c-content--h3">Overview</h3>
|
|
1227
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7637" data-pf-content="true" class="pf-v6-c-content--p">Because the table component is not used for layout and presents tabular data only, it requires the use of <code>role="grid"</code>. Expandable table content (<code>.pf-v6-c-table__expandable-content</code>) is placed within a singular <code><td></code> per expandable row, that can span multiple columns.</p>
|
|
1228
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7617" data-pf-content="true" class="pf-v6-c-content--h3">Role=“grid”</h3>
|
|
1229
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7638" data-pf-content="true" class="pf-v6-c-content--p">Applying <code>role="grid"</code> to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that <code>role="grid"</code> be removed.</p>
|
|
1230
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7618" data-pf-content="true" class="pf-v6-c-content--h3">Sortable tables</h3>
|
|
1231
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7639" data-pf-content="true" class="pf-v6-c-content--p">Table columns may shift when expanding/collapsing. To address this, set <code>.pf-m-fit-content</code>, or assign a width <code>.pf-m-width-[width]</code> to the corresponding <code><th></code> defining the column or <code><td></code> within the column. Width values are <code>[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90]</code> or <code>max</code>.</p>
|
|
1232
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7619" data-pf-content="true" class="pf-v6-c-content--h3">Table header cells</h3>
|
|
1233
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7640" data-pf-content="true" class="pf-v6-c-content--p">By default, all table header cells are set to <code>white-space: nowrap</code>. If a <code><th></code>’s content needs to wrap, apply <code>.pf-m-wrap</code>.</p>
|
|
1234
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7620" data-pf-content="true" class="pf-v6-c-content--h3">Implementation support</h3>
|
|
1235
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7644" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
1236
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7621" data-pf-content="true" class="pf-v6-c-content--li">One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.</li>
|
|
1237
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7622" data-pf-content="true" class="pf-v6-c-content--li">One checkbox or radio input, positioned in the first or second cell of a non-expandable row.</li>
|
|
1238
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7623" data-pf-content="true" class="pf-v6-c-content--li">One action button, positioned in the last cell of a non-expandable row.</li>
|
|
1239
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7624" data-pf-content="true" class="pf-v6-c-content--li">Tabular data.</li>
|
|
1240
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7625" data-pf-content="true" class="pf-v6-c-content--li">Compact presentation modifier (not compatible with expandable table).</li>
|
|
1241
|
+
</ul> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7514" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
1242
1242
|
CSS variables
|
|
1243
1243
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="jOQ1t" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-table"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|