feat(Table): replace ref with shallowRef for data binding

[hywax]

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

We have to work with large tables, where we cannot use virtualize, so we often search the page using ctrl+f. Therefore, we are looking for places where we can optimize the code.

In this case, there is no need to use ref, shallowRef will suffice.

We testing on dev playground:

• Data items 100 000
• Per page 50
• Watch options deep false
• Client pagination
• SSR false
• Mode prod

ref	shallowRef

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Replaces ref import with createRef from @vueuse/core in src/runtime/components/Table.vue. Changes data initialization from ref(props.data ?? []) to createRef(props.data ?? [], props.watchOptions?.deep !== false). Retains existing watch-based update logic and makes no exported/public API changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title claims to replace ref with shallowRef, but the actual implementation uses createRef from '@vueuse/core', not shallowRef.	Update the title to accurately reflect the change, e.g., 'feat(Table): replace ref with createRef for data binding' or provide clarification if createRef is intended as an alias/wrapper for shallowRef.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the optimization motivation (large tables without virtualization), the performance testing methodology, and includes evidence of improvements, making it well-related to the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/runtime/components/Table.vue (1)

517-519: ⚠️ Potential issue | 🟡 Minor

Watcher correctly reassigns the array reference, which is compatible with shallowRef.

When shallowData is true, data is a ShallowRef. The watcher creates a new array via [...props.data], so the reference change will trigger reactivity even with shallow tracking. This is correct.

However, note that the default watchOptions is { deep: true }. When shallowData is true, the user likely wants to avoid deep overhead entirely. Consider documenting that users should also pass :watch-options="{ deep: false }" alongside :shallow-data="true" for maximum performance benefit, or automatically adjust the watch depth when shallowData is enabled.

💡 Suggestion: auto-adjust watchOptions when shallowData is true

-watch(() => props.data, () => {
-  data.value = props.data ? [...props.data] : []
-}, props.watchOptions)
+watch(() => props.data, () => {
+  data.value = props.data ? [...props.data] : []
+}, props.shallowData ? { ...props.watchOptions, deep: false } : props.watchOptions)

🤖 Fix all issues with AI agents

In `@src/runtime/components/Table.vue`:
- Line 259: The call to createRef is passing props.shallowData into its deep
parameter with reversed semantics; change the call that sets data (the createRef
invocation) to use the inverse boolean (i.e. deep = !props.shallowData) so
shallowData=true yields shallow reactivity: replace the current
createRef(props.data ?? [], props.shallowData) with createRef(props.data ?? [],
!props.shallowData); additionally, because createRef is evaluated once at setup,
if you need to respond to runtime changes of props.shallowData add a watcher on
props.shallowData that recreates/updates data (or switch to a different reactive
strategy) so the reactivity mode follows prop changes.

🧹 Nitpick comments (1)

src/runtime/components/Table.vue (1)

139-144: Prop naming and documentation look reasonable.

The shallowData prop is well-documented with a JSDoc @see link and default value annotation.

One minor consideration: users might confuse this with "partial data" or "incomplete data." A name like shallowReactiveData or disableDeepReactivity could be more self-descriptive, but this is a stylistic choice.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/runtime/components/Table.vue (1)

517-519: ⚠️ Potential issue | 🟠 Major

shallowData alone doesn't eliminate deep-watch overhead — users must also set watchOptions.deep = false.

With the default watchOptions: { deep: true }, Vue still deeply traverses props.data on every change even when shallowData is true. The shallow ref only avoids deep tracking on reads; the watcher's deep comparison is a separate cost.

Consider either:

1. Auto-defaulting watchOptions.deep to false when shallowData is true, or
2. Documenting this interaction clearly so users know to pass both props.

Option 1: Auto-adjust watch depth

-watch(() => props.data, () => {
-  data.value = props.data ? [...props.data] : []
-}, props.watchOptions)
+watch(() => props.data, () => {
+  data.value = props.data ? [...props.data] : []
+}, props.shallowData ? { ...props.watchOptions, deep: false } : props.watchOptions)

🤖 Fix all issues with AI agents

In `@src/runtime/components/Table.vue`:
- Line 259: The createRef call that sets const data = createRef(props.data ??
[], !props.shallowData) is evaluated only during setup so toggling
props.shallowData at runtime will not switch reactivity mode; update the
Table.vue JSDoc (near createRef/props definitions) to explicitly state that
shallowData must be set at mount time and changes after mount are ignored, and
add a short runtime guard comment next to the createRef line referencing
createRef and props.shallowData so consumers and future maintainers understand
the limitation.

🧹 Nitpick comments (1)

src/runtime/components/Table.vue (1)

139-144: Consider renaming shallowData to better convey its purpose.

The prop name shallowData suggests the data itself is shallow, but it actually controls whether the internal reactive wrapper uses shallowRef vs ref. A name like shallowReactivity or disableDeepReactivity would be more self-describing. This is a minor naming nit — feel free to keep as-is if you prefer brevity.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6023

commit: 3463e37