refactor: 💡 use mobile layout prop instead of is responsive for mobile view control

[punkbit]

Why?

Replaces the isResponsive boolean prop with a more explicit mobileLayout prop on the Table component. It clearly states the behavior, while isResponsive requires knowing what "responsive" means here and both are technically "responsive".

The mobile layout version's more extensible, e.g. a new mode can be easily introduced such as compact without breaking changes.

How?

• Replace isResponsive bool by mobileLayout "list" or "scroll", e.g. names the layout instead of whether since both layouts are technically responsive

Preview?

demo-table-mobile-layout-prop.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 99b64db

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

Claude finished @punkbit's task in 1m 8s —— View job

---

PR Review

Nice refactor! The mobileLayout prop is indeed more self-documenting than isResponsive, and the extensibility argument for future values like compact is solid. The changeset includes a clear migration guide. Here's what I found:

---

🚨 Must Fix

• MobileLayoutProp not exported (Table.tsx:567): The type is defined but not exported. Consumers who manage their own state around this prop (useState<MobileLayoutProp>('list')) can't import it. Other public types in this file (TableColumnConfigProps, TableRowType, TableProps) are all exported — this should be too.

  // Table.tsx line 567
  export type MobileLayoutProp = 'list' | 'scroll';

  Fix this →

---

💡 Suggestions (non-blocking)

• Changeset bump level: isResponsive was introduced in feat(table): 🎸 add isResponsive prop to control mobile layout behavior #881 (the immediate predecessor commit). If that was published to npm before this PR, removing it is a breaking change → should be major. If both land in the same release cycle (i.e., isResponsive was never in a released version), minor is fine — just worth confirming.

• data-responsive-mode attribute name: The attribute on TableOuterContainer is named data-responsive-mode while the prop is now mobileLayout. This is a public styling hook for consumers writing custom CSS. Consider renaming to data-mobile-layout for consistency. If consumers are already targeting data-responsive-mode, that's a separate breaking change — leaving it as-is is also a reasonable choice. Either way, documenting it would help.

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[github-actions]

Claude finished @punkbit's task in 57s —— View job

---

PR Review

Nice refactor! The mobileLayout prop is more self-documenting than isResponsive, and the extensibility argument for future values like compact is solid. The previous must-fix issue has been addressed in the latest commit.

---

✅ Previously flagged issue resolved

• MobileLayoutProp is now exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.

---

💡 Suggestions (non-blocking)

• data-responsive-mode attribute name (Table.tsx:970): The DOM attribute is data-responsive-mode but the prop is now mobileLayout. This attribute is a public CSS styling hook — if consumers are writing custom CSS targeting [data-responsive-mode='list'], they'll need a migration note. If keeping the old attribute name for backward compatibility is intentional, a comment explaining that would help future maintainers. If you'd prefer consistency, renaming to data-mobile-layout (and updating the ~10 CSS selectors throughout the file) is the clean path.

• Changeset bump level: Marked as minor. Worth confirming that the isResponsive prop (introduced in the predecessor commit) was never published to npm — if it was, removing it would technically be major. If both land in the same release cycle, minor is correct.

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[punkbit]

• Changeset bump level: isResponsive was introduced in feat(table): 🎸 add isResponsive prop to control mobile layout behavior #881 (the immediate predecessor commit). If that was published to npm before this PR, removing it is a breaking change → should be major. If both land in the same release cycle (i.e., isResponsive was never in a released version), minor is fine — just worth confirming.

The isResponsive version has not yet been released publicly. There aren't any consumers using it. We can ignore and avoid having to support breaking changes in the future.

[github-actions]

Claude finished @punkbit's task in 47s —— View job

---

PR Review

Solid work — all previously flagged issues have been resolved. The implementation is clean and consistent.

---

✅ Previously flagged issues resolved

• MobileLayoutProp exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.
• data-responsive-mode → data-mobile-layout — the attribute has been renamed consistently across all ~10 styled-component selectors in the file, and the changeset migration guide now explicitly documents this change for consumers with custom CSS.
• Changeset bump level — minor confirmed correct since isResponsive was never publicly released.

---

✅ Tests look good

New tests at Table.test.tsx:128–138 cover both the default list layout and explicit scroll layout via the data-mobile-layout attribute — good coverage for the behavioral change.

---

✅ Looks great! No remaining issues — nice work! 🙌

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[github-actions]

Claude finished @punkbit's task in 42s —— View job

---

PR Review

All previously flagged issues have been addressed in this latest push. The implementation is clean and consistent.

---

✅ All issues resolved

• MobileLayoutProp exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.
• data-responsive-mode → data-mobile-layout — renamed consistently across all ~10 styled-component selectors in Table.tsx.
• Tests updated — both test cases (Table.test.tsx:128–138) now use mobileLayout prop and data-mobile-layout attribute.
• Changeset — migration guide documents both the prop change and the data attribute rename clearly.
• Changeset bump level — minor is correct since isResponsive was never publicly released.

---

✅ Looks great! No remaining issues — nice work! 🙌

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[github-actions]

Claude finished @punkbit's task in 42s —— View job

---

PR Review

All previously flagged issues have been addressed. The implementation is clean and consistent.

---

✅ All issues resolved

• MobileLayoutProp exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.
• data-responsive-mode → data-mobile-layout — renamed consistently across all ~10 styled-component selectors in Table.tsx.
• Tests updated — both test cases (Table.test.tsx:128–138) use mobileLayout prop and data-mobile-layout attribute correctly.
• Changeset — migration guide clearly documents both the prop rename and the data attribute rename. minor bump is correct since isResponsive was never publicly released.

---

✅ Looks great! No remaining issues — nice work! 🙌

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[github-actions]

Claude finished @punkbit's task in 35s —— View job

---

PR Review

All previously flagged issues have been addressed. The implementation is clean and consistent.

---

✅ All issues resolved

• MobileLayoutProp exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.
• data-responsive-mode → data-mobile-layout — renamed consistently across all ~10 styled-component selectors in Table.tsx.
• Tests updated — both test cases (Table.test.tsx:128–138) now use mobileLayout prop and data-mobile-layout attribute.
• Changeset — migration guide documents both the prop change and the data attribute rename clearly. minor bump is correct since isResponsive was never publicly released.

---

✅ Looks great! No remaining issues — nice work! 🙌

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[github-actions]

Claude finished @punkbit's task in 46s —— View job

---

PR Review

All previously flagged issues have been addressed. The implementation is clean and consistent.

---

✅ All issues resolved

• MobileLayoutProp exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.
• data-responsive-mode → data-mobile-layout — renamed consistently across all ~10 styled-component selectors in Table.tsx.
• Tests updated — both test cases (Table.test.tsx:128–138) now use mobileLayout prop and data-mobile-layout attribute.
• Changeset — migration guide documents both the prop change and the data attribute rename clearly. minor bump is correct since isResponsive was never publicly released.
• Default behavior preserved — mobileLayout = 'list' default matches the previous isResponsive = true behavior, no regression.

---

✅ Looks great! No remaining issues — nice work! 🙌

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[github-actions]

Claude finished @punkbit's task in 50s —— View job

---

PR Review

All previously flagged issues have been addressed. The implementation is clean and consistent.

---

✅ All issues resolved

• MobileLayoutProp exported — correctly exported from Table.tsx:567, re-exported through Table/index.ts and src/index.ts.
• data-responsive-mode → data-mobile-layout — renamed consistently across all ~10 styled-component selectors in Table.tsx.
• Tests updated — both test cases (Table.test.tsx:128–138) now use mobileLayout prop and data-mobile-layout attribute.
• Changeset — migration guide documents both the prop change and the data attribute rename clearly. minor bump is correct since isResponsive was never publicly released.
• Default behavior preserved — mobileLayout = 'list' default matches the previous isResponsive = true behavior, no regression.

---

✅ Looks great! No remaining issues — nice work! 🙌

---

• Gather context
• Read changed files
• Review for correctness, types, breaking changes
• Post findings

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-ce50433xu-clickhouse.vercel.app

Built from commit: 24b047f8b1c85a4035fc9ec7752be697e44b6ce2