chore(table): reflect primitive props on the Host

[Kiarokh]

In the CRM web client. consumer components need more information about tables, mostly for styling purposes.

But this is also a convention we use in this library

background info

In Stencil, reflecting a primitive prop can be a good practice when that prop represents public element state that should be visible in the DOM — but it is not automatically the right choice for every prop. Stencil itself frames reflect as useful “in some cases,” not as a blanket default.

A primitive prop like string, number, or boolean maps cleanly to HTML attributes, and Stencil already handles serialization/deserialization for these types well.

A good mental model is: reflect props that behave like real HTML attributes. Examples are things like disabled, open, required, name, value, variant, or size when you want those states to be inspectable and styleable from the outside. For booleans especially, this aligns with normal HTML behavior, where presence/absence of the attribute represents the state.

A few concrete benefits:

1. First, the component’s JavaScript state and DOM representation stay in sync, which is useful for custom elements in general.
2. Second, it enables declarative usage in HTML, which matters when your component is consumed outside a framework or across frameworks.
3. Third, CSS selectors rely on attributes, so reflected state like disabled, open, or selected can be styled from outside with selectors

Summary by CodeRabbit

• Refactor
  • Optimized table component properties for improved flexibility and integration. Configuration options for sorting, pagination, layout, columns, and loading states are now more accessible.

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]

Warning

Rate limit exceeded

@Kiarokh has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 57 minutes and 41 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 57 minutes and 41 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6340e45d-fa2a-4403-a947-6672f1ff7e63

📥 Commits

Reviewing files that changed from the base of the PR and between 248619c and a0c40f0.

📒 Files selected for processing (1)

• src/components/table/table.tsx

📝 Walkthrough

Walkthrough

The Table component class in src/components/table/table.tsx was updated to enable property reflection for nine properties (mode, layout, pageSize, totalRows, sorting, movableColumns, sortableColumns, loading, page, selectable) by changing their @Prop() decorators to @Prop({ reflect: true }). Two event declarations were repositioned without type changes.

Changes

Cohort / File(s)	Summary
Property Reflection Updates src/components/table/table.tsx	Enabled reflection for nine @Prop() decorators (mode, layout, pageSize, totalRows, sorting, movableColumns, sortableColumns, loading, page, selectable) by adding { reflect: true } option. Repositioned sort and changePage event declarations later in the class without signature changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically summarizes the main change: enabling reflection of primitive properties to the Host element in the table component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch table-prop-chores

---

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.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3993/

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/table/table.tsx`:
- Around line 115-116: The `@Prop` on the sorting property is using reflect: true
but sorting is a complex type (ColumnSorter[]), which cannot be safely reflected
to HTML; remove reflect: true from the sorting prop declaration (the `@Prop`({
reflect: true }) on sorting) so the property becomes a normal non-reflected Prop
and avoid serializing the complex ColumnSorter[] to attributes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 10888605-dbc7-4412-9a6f-e73236f3fd70

📥 Commits

Reviewing files that changed from the base of the PR and between d955384 and 248619c.

📒 Files selected for processing (1)

• src/components/table/table.tsx