fix: render data table separators as table cells by AlgoArtist06 · Pull Request #29793 · calcom/cal.diy

AlgoArtist06 · 2026-07-17T06:56:32Z

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

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 · 2026-07-17T06:56:41Z

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 · 2026-07-17T06:57:52Z

@coderabbitai review

coderabbitai · 2026-07-17T06:58:15Z

✅ 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 · 2026-07-17T07:00:30Z

📝 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 accurately summarizes the main change: separator rows now render as table cells.
Description check	✅ Passed	The description matches the change set and explains the table-cell fix, regression test, and issue link.

✨ 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

_{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 · 2026-07-17T07:03:24Z

@coderabbitai review

coderabbitai · 2026-07-17T07:03:32Z

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

CLAassistant · 2026-07-23T03:44:28Z

All committers have signed the CLA.

fix: render data table separators as table cells

996bcac

pull-request-size Bot added the size/M label Jul 17, 2026

github-actions Bot added the 🐛 bug Something isn't working label Jul 17, 2026

coderabbitai Bot reviewed Jul 17, 2026

View reviewed changes

Comment thread apps/web/modules/data-table/components/SeparatorRowRenderer.tsx Outdated

refactor: import table cell from source

3190119

AlgoArtist06 marked this pull request as ready for review July 17, 2026 07:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: render data table separators as table cells#29793

fix: render data table separators as table cells#29793
AlgoArtist06 wants to merge 2 commits into
calcom:mainfrom
AlgoArtist06:agent/fix-separator-row-dom

AlgoArtist06 commented Jul 17, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

AlgoArtist06 commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Walkthrough

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

AlgoArtist06 commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Jul 23, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

AlgoArtist06 commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Visual Demo (For contributors especially)

How should this be tested?

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

AlgoArtist06 commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AlgoArtist06 commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AlgoArtist06 commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

CLAassistant commented Jul 23, 2026 •

edited

Loading