feat(table): allow disabling column sorting through header interactions

[Kiarokh]

fix #3715

Summary by CodeRabbit

• New Features
  • Added a new sorting control for tables: tables can now enable or disable sorting functionality across all columns globally.
  • Introduced an interactive example demonstrating the sorting toggle feature with a checkbox control for users to enable/disable column sorting.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

This PR adds a new sortableColumns prop to the table component that globally controls whether column sorting is enabled via header interactions. When set to false, all columns become non-sortable regardless of individual column settings. The changes include a new watcher that reinitializes the table when the prop changes, and an example demonstrating the feature.

Changes

Cohort / File(s)	Change Summary
Table sorting control prop src/components/table/table.tsx	Added public sortableColumns property (default true), a @Watch handler updateSortableColumns() to reinitialize the table when the prop changes, and updated getColumnDefinitions() to respect the prop by setting each column's headerSort to this.sortableColumns && (column.headerSort ?? true).
Example demonstrating global sorting control src/components/table/examples/table-sorting-disabled.tsx	Changed columns to private, added disableAllSorting boolean property and setDisableAllSorting() event handler, imported Host from @stencil/core, added Host wrapper element with limel-example-controls checkbox, and updated the third column header to include "(no sorting)" text.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Table Component
    participant Watcher
    participant Tabulator

    User->>Table Component: Set sortableColumns prop
    Table Component->>Watcher: @Watch detects prop change
    Watcher->>Table Component: Calls updateSortableColumns()
    Table Component->>Table Component: Calls reinitialize()
    Table Component->>Table Component: Calls getColumnDefinitions()
    Note over Table Component: For each column, sets<br/>headerSort = sortableColumns && (headerSort ?? true)
    Table Component->>Tabulator: Update column definitions
    Tabulator->>Tabulator: Apply sorting state to headers
    Tabulator->>User: Headers now reflect new sortable state

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify the watcher updateSortableColumns() correctly reinitializes the table and applies the new sorting state
• Confirm the logic in getColumnDefinitions() correctly combines sortableColumns with individual column headerSort settings, especially the fallback behavior when headerSort is undefined
• Review the example to ensure it properly demonstrates toggling the feature

Possibly related PRs

• fix(table): apply new columns without a full init #3482: Modifies table column-update behavior and sorting logic in src/components/table/table.tsx—may have overlapping changes to column initialization or sorting state handling

Suggested reviewers

• john-traas

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "feat(table): allow disabling column sorting through header interactions" accurately and clearly describes the primary change in the changeset. Both modified files implement the core feature: the table component adds a new sortableColumns prop to control header-based sorting, and the example file demonstrates this functionality. The title is concise, specific, and directly reflects what a developer scanning the history would understand as the main contribution.
Linked Issues Check	✅ Passed	The code changes fully implement the requirements specified in issue #3715. The table.tsx file adds the sortableColumns property with default value true, implements a watcher to reinitialize the table when the prop changes, and modifies getColumnDefinitions() to respect the prop by using the logic headerSort: this.sortableColumns && (column.headerSort ?? true). This ensures that when sortableColumns is false, users cannot sort columns via header interactions while preserving the ability for programmatic sorting. The naming is consistent with the existing movableColumns prop as required, and the example file appropriately demonstrates the feature with UI controls.
Out of Scope Changes Check	✅ Passed	All changes in the pull request are directly related to implementing and demonstrating the sortableColumns feature. The table.tsx changes add the new prop and its supporting logic, while the table-sorting-disabled.tsx example file adds demonstration controls and updates the example UI to showcase the feature. The refactoring of the columns property to private in the example file is a minor code quality improvement that supports the example's purpose. No unrelated changes, such as bug fixes in other areas or refactoring of unrelated code, were introduced.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Kiarokh]

@paulinewahle once this PR is merged, you can update your beautiful What's new page with release date and versions and so forth 😊 🙏

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0cae339 and 4b9e3a4.

⛔ Files ignored due to path filters (1)

• etc/lime-elements.api.md is excluded by !etc/lime-elements.api.md

📒 Files selected for processing (2)

• src/components/table/examples/table-sorting-disabled.tsx (3 hunks)
• src/components/table/table.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/wrap-multiple-jsx-elements-in-host-not-in-array.mdc)

When returning multiple JSX elements from the render method, never wrap them in an array literal. Instead, always wrap them in the special <Host> element. When there is already a single top-level element, it does not have to be wrapped in <Host>.

Files:

• src/components/table/examples/table-sorting-disabled.tsx
• src/components/table/table.tsx

---

⚙️ CodeRabbit configuration file

**/*.tsx: Our .tsx files are typically using StencilJS, not React. When a developer wants to return multiple top-level JSX elements from the render method, they will sometimes wrap them in an array literal. In these cases, rather than recommending they add key properties to the elements, recommend removing the hardcoded array literal. Recommend wrapping the elements in StencilJS's special <Host> element.

Files:

• src/components/table/examples/table-sorting-disabled.tsx
• src/components/table/table.tsx

**/*.{ts,tsx}

⚙️ CodeRabbit configuration file

**/*.{ts,tsx}: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

Files:

• src/components/table/examples/table-sorting-disabled.tsx
• src/components/table/table.tsx

**/*.{tsx,scss}

⚙️ CodeRabbit configuration file

**/*.{tsx,scss}: Almost all our components use shadow-DOM. Therefore, we have no need of BEM-style class names in our CSS.

Files:

• src/components/table/examples/table-sorting-disabled.tsx
• src/components/table/table.tsx

src/components/**/examples/**/*.{ts,tsx}

⚙️ CodeRabbit configuration file

src/components/**/examples/**/*.{ts,tsx}: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is publicly exported by lime-elements, the import should be made from @limetech/lime-elements. If they import something from another file inside the example folder, the import should use a relative path.

Files:

• src/components/table/examples/table-sorting-disabled.tsx

src/components/**/*.tsx

⚙️ CodeRabbit configuration file

src/components/**/*.tsx: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.

Files:

• src/components/table/examples/table-sorting-disabled.tsx
• src/components/table/table.tsx

🧠 Learnings (2)

📚 Learning: 2025-04-25T13:32:56.396Z

Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.

Applied to files:

• src/components/table/examples/table-sorting-disabled.tsx

📚 Learning: 2025-04-25T13:32:56.396Z

Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.

Applied to files:

• src/components/table/examples/table-sorting-disabled.tsx

🧬 Code graph analysis (1)

src/components/table/examples/table-sorting-disabled.tsx (1)

src/components/table/table.types.ts (1)

• Column (5-45)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Docs / Publish Docs
• GitHub Check: Build
• GitHub Check: Test

🔇 Additional comments (6)

src/components/table/table.tsx (2)

115-120: LGTM! Clear documentation and appropriate default value.

The new sortableColumns prop is well-documented and correctly distinguishes between header interactions and programmatic sorting. The default value of true maintains backward compatibility.

---

557-563: LGTM! Correct conjunction logic for global and per-column sorting.

The implementation correctly combines the global sortableColumns prop with individual column settings:

• When sortableColumns is false, all columns become non-sortable
• When sortableColumns is true, each column respects its own headerSort setting (defaulting to true)

This matches the requirements and maintains programmatic sorting capability via the sorting prop.

src/components/table/examples/table-sorting-disabled.tsx (4)

1-1: LGTM! Correct import for StencilJS pattern.

The Host import is correctly added to wrap multiple top-level elements in the render method, following StencilJS best practices.

Based on learnings.

---

32-44: LGTM! Clear state initialization.

The new disableAllSorting state and the updated column title clearly demonstrate the distinction between global sorting control and per-column control.

---

47-65: LGTM! Excellent example demonstrating the new feature.

The example correctly demonstrates:

• Global sorting control via sortableColumns={!this.disableAllSorting}
• Per-column sorting control via headerSort: false on the Reference Person column
• User-friendly checkbox with clear labeling

The logic is correct: when the checkbox is checked, disableAllSorting becomes true, making sortableColumns evaluate to false, thereby disabling sorting.

As per coding guidelines.

---

67-70: LGTM! Clean event handler.

The handler correctly stops propagation and updates the state from the event detail.

[lime-opensource]

🎉 This PR is included in version 38.29.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀