feat(DataTableToolbar): add reusable toolbar component for Meshery UI migration

[Uday9909]

Description

Adds a reusable DataTableToolbar component to replace Meshery UI's ToolWrapper. This is a pure presentational layout shell that provisions named slots for toolbar actions.

Component API

Prop	Slot Location	Description
primaryActions	Left section	Action buttons (Add, Create, Import)
secondaryActions	Left section	Secondary actions (Export, bulk delete)
filter	Right section	UniversalFilter component

| search | Right section | SearchBar component |
| columnVisibility | Right section | Column visibility control |
| viewSwitch | Right section | Grid/table view toggle |
| sx | Root | Custom styles for migration |

Key Decisions

• Uses Sistent theme tokens exclusively — no hardcoded px/rem values
• Responsive via theme.breakpoints.down('sm') — no useMediaQuery, no window.innerWidth
• Flexible minHeight — replaces ToolWrapper's fixed 4rem height
• Accepts sx prop — allows consumer overrides without per-page CSS
• Slots are optional — renders empty sections when unused

Fixes

• Addresses responsiveness issues from fix(ui): fix search bar placeholder text truncation across pages meshery/meshery#18965 (search bar truncation, window.innerWidth usage)
• Removes need for hardcoded width overrides and data-testid selectors

Files Changed

src/custom/DataTableToolbar/
├── DataTableToolbar.tsx      # Main component
├── DataTableToolbar.types.ts # TypeScript interfaces
└── index.tsx                 # Barrel export
src/__testing__/DataTableToolbar.test.tsx  # 9 tests
src/custom/index.tsx                       # Export registration

Screen.Recording.2026-07-02.at.2.33.22.PM.mov

Verification

• TypeScript: zero errors in component files
• ESLint: clean
• Prettier: formatted
• Tests: 9/9 passed (312/312 full suite)
• Build: CJS + ESM + DTS all succeed

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[gemini-code-assist]

Code Review

This pull request introduces the DataTableToolbar component, along with its corresponding TypeScript types and unit tests. The feedback highlights a few improvement opportunities: removing an ineffective zIndex property from the toolbar root styled component, adding responsive wrapping to the Section component to prevent horizontal overflow on mobile screens, and strengthening the unit test assertion for custom sx styles to verify they are actually applied.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Uday9909]

@KhushamBansal ready for PR review!

[KhushamBansal]

@Uday9909 Have you tested this locally? If yes, please attach screen recording to the PR description.

[Uday9909]

@KhushamBansal All make targets pass cleanly. npm link / make ui-build is timing out locally. Can we merge this Sistent PR first, then I'll open a follow-up Meshery UI PR that migrates ConnectionTableToolbar to use DataTableToolbar that PR will include the demo video/screenshots?

[KhushamBansal]

@Uday9909 We need to test this thoroughly before merging. Please drop a message in the #support Slack channel to get help with running it locally.

[KhushamBansal]

@Uday9909 Were you able to run the repo? Also the Description of #1661 has been updated by Lee. Please make sure to implementation of toolbar matches the mockup.

[Uday9909]

@KhushamBansal The updated layout spec matches the DataTableToolbar implementation — left section for custom operations, right section for bulk ops/search/filter/columns. The component provides slots for all these. The advanced features (multi-select filter, auto-hiding columns) will be handled by the child components passed into those slots.

[KhushamBansal]

@Uday9909 Great!! Were you able to run the repo and test it?

[Uday9909]

@KhushamBansal Yes, I'm able to run the repo. While testing DataTableToolbar locally, I discovered a related issue — the Sistent SearchBar component has a hardcoded width: '150px' when expanded, which causes placeholder text truncation across all pages that use it (this is the same root problem PR #18965 patched in tool.styles.tsx with minWidth: '12.5rem').
I've fixed it in SearchBar.tsx by changing the expanded width to '12.5rem' to match the previous behavior. Rebuilding Sistent and testing in Meshery UI now. Will attach a screen recording showing both DataTableToolbar layout and the fixed search bar shortly.

[Uday9909]

@KhushamBansal i have added the demo video in the pr!, i had just added the green border around it to check if it was actually my pack which was loading.

[KhushamBansal]

@Uday9909 Nice work!! Thanks for sharing the demo video. Could you please make some minor changes/add-ons:

• swap search and filter option
• could you add optional bulk operations (please checkout mockup)
• make filter button look like image below:

[Uday9909]

@KhushamBansal For the filter button style — should I:

1. Create a new FilterButton component in Sistent (with icon + text + badge), OR
2. Update the existing UniversalFilter in Meshery UI to match the mockup?

[KhushamBansal]

@Uday9909 Update the Already existing filter component. No, need to create a new component.

[Uday9909]

@KhushamBansal Got it ,will update UniversalFilter in Meshery UI for the filter button style.
The Sistent PR will have:

1. Search/filter order swapped
2. bulkOperations prop added to DataTableToolbar

Filter button styling will be in the Meshery UI migration PR.

[KhushamBansal]

@Uday9909 Please update filter button styling in https://github.com/layer5io/sistent/blob/master/src/custom/UniversalFilter.tsx
and not in meshery-ui.

[Uday9909]

hey @KhushamBansal i have completed the asked changes! ready for review.

[KhushamBansal]

@Uday9909 Please sign off your commits.

[Uday9909]

@KhushamBansal ready for merge!