[DataTableToolbar] Fix mobile single-row layout and add compactTrailing

[KhushamBansal]

Notes for Reviewers

This PR fixes #

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• New Features

  • Added an option to simplify the data table toolbar by hiding secondary controls.
  • Secondary controls now hide automatically on narrow screens, with an option to always show or hide them.
  • Improved toolbar organization by grouping search and trailing controls for better usability on narrow screens.
  • Enhanced spacing and positioning when both left- and right-side toolbar content are present.

• Tests

  • Added coverage for compact controls, grouped toolbar content, and responsive behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

The DataTableToolbar now groups right-side controls, supports the compactTrailing option, and uses responsive non-wrapping layout rules. Tests cover compact rendering, grouped controls, responsive visibility, and right-side positioning.

Changes

DataTableToolbar layout

Layer / File(s)	Summary
Compact trailing control grouping src/custom/DataTableToolbar/DataTableToolbar.types.ts, src/custom/DataTableToolbar/DataTableToolbar.tsx	Adds the optional compactTrailing prop and hides filter, column-visibility, and view-switch controls when compact mode is active. Narrow viewports enable compact mode by default.
Right-side layout rendering src/custom/DataTableToolbar/DataTableToolbar.tsx	Groups search and trailing controls in right-side containers. Applies constrained search placement, responsive spacing, and non-wrapping small-screen behavior.
Layout behavior tests src/__testing__/DataTableToolbar.test.tsx	Tests viewport handling, nested toolbar sections, compact rendering, grouped controls, responsive visibility, and right-side positioning.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: saurabhraghuvanshii, banana-three-join, rishiraj38, uday9909

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the mobile layout fix and the addition of the compactTrailing option.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

[KhushamBansal]

@Uday9909 Could you review this when you get time?

[Uday9909]

@KhushamBansal The fix direction is perfect. Three tighten-ups plus one change that isn't needed.

1. trailingControls in DataTableToolbar.tsx:189 has a dead guard: it's only rendered under hasTrailingControls, which already bakes in !compactTrailing, so the compactTrailing ? null : branch can never fire.
2. The tests reach three levels deep via parentElement?.parentElement?.parentElement (test:139, :164). That's testing DOM structure, not behavior, and any wrapper Box breaks them. Give RightSection and RightControlsGroup data-testids and assert on those. The two "grouping" tests assert the same thing, collapse them.
3. Mobile nowrap (line 24) flips non-adopting consumers from wrap to overflow. The component already tracks viewportWidth, so compacting off that beats pushing width < breakpoint && isSearchExpanded onto every consumer. If out of scope, note the change.
4. justifyContent: 'space-between' on ToolbarRoot (line 15) isn't needed. RightSection's marginLeft: 'auto' (line 38) already positions it, and auto margins win over justify-content in flexbox, so it never takes effect.

[KhushamBansal]

@Uday9909 Thanks for reviewing. I have updated the PR.

[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 `@src/custom/DataTableToolbar/DataTableToolbar.tsx`:
- Around line 87-89: Reset the column menu state when compact mode hides its
control: in the DataTableToolbar logic around effectiveCompactTrailing, clear
both dropdownOpen and anchorEl whenever effectiveCompactTrailing is true,
preventing a detached menu from reopening after the viewport widens. Add a
regression test covering an open menu followed by a narrow resize and subsequent
wide render.

🪄 Autofix

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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 80fffe89-0936-4685-8938-3fa41f07a018

📥 Commits

Reviewing files that changed from the base of the PR and between e170fb2 and c786863.

📒 Files selected for processing (3)

• src/__testing__/DataTableToolbar.test.tsx
• src/custom/DataTableToolbar/DataTableToolbar.tsx
• src/custom/DataTableToolbar/DataTableToolbar.types.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/custom/DataTableToolbar/DataTableToolbar.types.ts

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Reset the column menu state when compact mode hides the control.

effectiveCompactTrailing removes columnControl from the tree, but it does not reset dropdownOpen or anchorEl. If the menu is open before a narrow resize, the next wide render mounts PopperListener with open={true} and a detached anchor. The menu can reopen at an incorrect position.

Clear both states when effectiveCompactTrailing becomes true. Add a resize regression test.

Proposed state reset

   const [dropdownOpen, setDropdownOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    if (effectiveCompactTrailing) {
+      setAnchorEl(null);
+      setDropdownOpen(false);
+    }
+  }, [effectiveCompactTrailing]);

Also applies to: 199-201, 221-225

🤖 Prompt for 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.

In `@src/custom/DataTableToolbar/DataTableToolbar.tsx` around lines 87 - 89, Reset
the column menu state when compact mode hides its control: in the
DataTableToolbar logic around effectiveCompactTrailing, clear both dropdownOpen
and anchorEl whenever effectiveCompactTrailing is true, preventing a detached
menu from reopening after the viewport widens. Add a regression test covering an
open menu followed by a narrow resize and subsequent wide render.

[Uday9909]

LGTM!!