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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions