Skip to content

Table - add docs for using with container queries #12550

Description

@mcoker

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Fields

    No fields configured for Tech debt.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions