feat(Table): add disableMobileListView prop to prevent mobile list conversion

[maxknv]

Summary

Add new prop to Table component that disables the automatic conversion to mobile list view on narrow screens, keeping the table layout with horizontal scroll instead.

Changes

• Add disableMobileListView?: boolean prop (default: false)
• Set data-responsive-mode attribute on TableOuterContainer
• Wrap all mobile @media queries with [data-responsive-mode="list"] & selector
• When disableMobileListView=true, mobile styles don't apply

Benefits

• Simple implementation (3 main changes)
• No prop threading through nested components
• Clean CSS selector approach
• Backward compatible (default behavior unchanged)

Use case

When you want tables to scroll horizontally on mobile instead of converting to a list view format.

Testing

Tested in ClickHouse CI report viewer (https://s3.amazonaws.com/clickhouse-test-reports/report_test.html?branch=ci_ui_upd2) with the new prop set to true.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8a93b54

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[elizabetdev]

LGTM! The disableMobileListView prop is a simple, backward-compatible addition that keeps the table layout on mobile with horizontal scroll, which makes sense for complex tables. Tested locally and works as expected.

Approved from a design perspective. I would also like to get an approval from an engineer.

[DreaminDani]

love using data selectors for this. Will make it easier to migrate off of styled components in the future :)

[gjones]

@elizabetdev as per our consistency conversations, should this prop really be isResponsive:{false}

[elizabetdev]

@gjones I think your suggestion makes sense and seems like a better direction. @punkbit would you mind updating the prop name based on @gjones suggestion to isResponsive={false}?

[punkbit]

@maxknv Moved your PR to the following reviewed version:

feat(table): 🎸 add isResponsive prop to control mobile layout behaviour
#881

Your contributions are standing in the commit history 👌 This was moved to allow the CI/CD checkups to verify everything and provide us with a preview and other checks, including demo video, etc.

@maxknv You'll find the requested changes, including a preview, so you can test the feature, etc. Let me know what you think.

cc @gjones @elizabetdev