fix: render data table separators as table cells

[AlgoArtist06]

What does this PR do?

Data table separator rows currently place a <div> directly inside a <tr>, producing React DOM-nesting warnings and risking hydration differences. This change renders the separator as a semantic table cell while preserving its styling, and extracts the renderer for focused regression coverage.

• Fixes SeparatorRowRenderer renders <div> inside <tr>, causing invalid DOM nesting warning #28184

Visual Demo (For contributors especially)

N/A — no visual change. The rendered separator element changes from <div> to <td>.

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs if this PR makes changes that would require a documentation change. N/A — no documentation change is required.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• No environment variables or test data are required.
• Run yarn vitest run apps/web/modules/data-table/components/SeparatorRowRenderer.test.tsx.
• Expected: the separator label is rendered in a <td> whose parent is the table <tr>.
• Full validation: NODE_OPTIONS=--max-old-space-size=8192 yarn type-check:ci --force

[github-actions]

Welcome to Cal.diy, @AlgoArtist06! Thanks for opening this pull request.

A few things to keep in mind:

• This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
• Please review our Contributing Guidelines if you haven't already.
• Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

[AlgoArtist06]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

Extracts separator-row rendering from DataTable.tsx into a reusable SeparatorRowRenderer component. The component renders a styled table cell using separator and optional class names, and DataTableBody now uses the imported component. A React Testing Library test verifies the separator label appears within a td inside a tr.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR replaces the invalid with valid table markup, addressing the warning and hydration risk in #28184.
Out of Scope Changes check	✅ Passed	The changes stay focused on the separator renderer and its regression test, with no unrelated scope evident.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly summarizes the main change: rendering data table separators as table cells.
Description check	✅ Passed	The description is directly related to the separator row table-cell fix and the regression test additions.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/modules/data-table/components/SeparatorRowRenderer.tsx`:
- Line 3: Update the TableCell import in SeparatorRowRenderer.tsx to use the
direct TableNew source module instead of the `@calcom/ui/components/table` barrel
import.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 01c4a89a-a8d9-4381-82a6-495ad7f7e250

📥 Commits

Reviewing files that changed from the base of the PR and between f004349 and 996bcac.

📒 Files selected for processing (3)

• apps/web/modules/data-table/components/DataTable.tsx
• apps/web/modules/data-table/components/SeparatorRowRenderer.test.tsx
• apps/web/modules/data-table/components/SeparatorRowRenderer.tsx

[AlgoArtist06]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.