A short version of it is in core here - https://www.patternfly.org/components/table/html#responsive-layout-modifier-usage
IMO I'd like to at least update the wording so that "container queries" or "container query" are on the page somewhere in case someone searches for it. From the core docs, instead of this
Note: If a wrapping element creates an inline-size or size container with the container name pf-v6-contain-table, the breakpoints will apply to the container's width.
I'd advocate we add another h3 under the grid classes table with "Container queries" and some text like
To base the table's responsive classes on a container's width rather than the viewport, apply a CSS container named pf-v6-contain-table to the target ancestor element. For example:
.my-table-wrapper {
container: pf-v6-contain-table / inline-size;
}
Jira Issue: PF-4418
A short version of it is in core here - https://www.patternfly.org/components/table/html#responsive-layout-modifier-usage
IMO I'd like to at least update the wording so that "container queries" or "container query" are on the page somewhere in case someone searches for it. From the core docs, instead of this
I'd advocate we add another h3 under the grid classes table with "Container queries" and some text like
To base the table's responsive classes on a container's width rather than the viewport, apply a CSS container named
pf-v6-contain-tableto the target ancestor element. For example:Jira Issue: PF-4418