Add opt-in container-width mode for column hide breakpoints

[jbetancur]

Summary

Add an opt-in, container-width based mode for the column hide prop, using CSS container queries. The existing viewport-based hide ('sm' | 'md' | 'lg' | number) stays the default and is not replaced.

Current behavior

hide is implemented with viewport media queries (@media (max-width: 599px) → .rdt_hideOnSm, etc. in DataTable.css). Columns hide based on the window width, regardless of how wide the table itself is. This is valid, intentional behavior for the common case and existing consumers depend on it.

Problem

• A table in a narrow panel (sidebar, split view, dashboard card) keeps all columns even when cramped, because the window is wide. There's currently no way to make hide respond to the table's own width instead of the window's.
• Demos or previews that simulate a narrow viewport with a constrained container (like the docs mobile demo) can't exercise the real prop, since the media query looks at the window. The docs currently fake it with omit.

Proposed change (for discussion)

Introduce a table-level opt-in prop, e.g. responsive: 'viewport' | 'container', defaulting to 'viewport' (current behavior, unchanged).

When set to 'container':

• Mark the table's scroll container (or root) as a container-type: inline-size query container.
• Generate @container (max-width: …) rules for .rdt_hideOnSm/Md/Lg at the same breakpoints (599px / 959px / 1279px), parallel to (not replacing) the existing @media rules.

This is additive: nothing changes for consumers who don't set responsive: 'container', so it can ship in a minor release.

Considerations

• container-type creates a new containment context; verify no interaction with position: sticky pinned columns and the fixed header.
• The query container should be chosen so horizontal overflow, sticky columns, fixed headers, and pagination are not unintentionally contained.
• Visual tests should resize the table independently of the viewport in sidebar, full-width, sticky, and nested-container layouts.
• Browser support: baseline since 2023; document the floor.
• Numeric hide: N breakpoints are tracked separately in Numeric hide breakpoint values are a no-op #1346 (currently a no-op even in viewport mode) — that fix should land before or alongside this so 'container' mode doesn't inherit the same gap.
• Out of scope for this issue: other viewport-based mobile styles (row height, cell padding, pagination compacting). Can be a follow-up if there's demand once container-based hide ships.

[hiSandog]

Because this changes existing layouts, an opt-in container-responsive mode with a deprecation path is safer than silently redefining hide in a minor release. The query container should be chosen so horizontal overflow, sticky columns, fixed headers, and pagination are not unintentionally contained; numeric breakpoints also need a generated-class strategy that does not emit arbitrary CSS per cell. Visual tests should resize the table independently of the viewport in sidebar, full-width, sticky, and nested-container layouts.

[jbetancur]

Good point. I think the intent was making this opt-in rather than a replacement and in either a minor or major version, something like a responsive: 'container' prop that defaults to the current viewport mode.

Going to keep this scoped to just the hide behavior for now rather than pulling in row height/padding/pagination too, that can be its own thing that needs more thought.

One thing I noticed digging into this: numeric hide values don't actually do anything right now in the current implementation, so that needs fixing as a seperate issue #1346

[jbetancur]

Note Issue Summary updated