Repository navigation
Conversation
- Add useDirection hook with DirectionContext pattern (Radix-style) - Accept optional dir prop in DataGrid component - Use CSS logical properties (border-e, start-0) for RTL compatibility - Add RTL demo in data-grid-demo with DirectionProvider
- Update all data-grid components to use CSS logical properties - Replace directional classes with logical equivalents: - border-r → border-e - border-l → border-s - pl/pr → ps/pe - ml/mr → ms/me - left/right → start/end - text-left → text-start - Components updated: - data-grid-row.tsx - data-grid-column-header.tsx - data-grid-search.tsx - data-grid-filter-menu.tsx - data-grid-view-menu.tsx - data-grid-keyboard-shortcuts.tsx - data-grid-render-count.tsx - data-grid-paste-dialog.tsx - data-grid-cell-wrapper.tsx - Add DirectionProvider component wrapper - Update layout to use DirectionProvider with RTL for testing - Export Direction type from use-direction hook
- Remove redundant use-direction.ts hook - Consolidate all direction logic in direction-provider.tsx - Update imports in data-grid-demo.tsx to use direction-provider - Remove error throw from useDirection for better flexibility - Reorder some Tailwind classes for consistency
- Remove custom direction-provider in favor of official Radix Direction - Add @radix-ui/react-direction package - Update data-grid.tsx to use useDirection from Radix - Add interactive direction toggle in data-grid-demo toolbar - Use Toggle component for RTL/LTR switching - Remove layout-level RTL wrapper (now opt-in per component) - Export Direction type from data-grid types
- Add useDirection hook from Radix to view menu - Pass dir attribute to Command component for RTL support - Use Direction type from data-grid types for consistency - Update demo to use Direction type and rename direction to dir
- Add useDirection hook from Radix to sort and filter menus - Pass dir attribute to all Command components for RTL support - Thread dir prop through nested components (DataTableSortItem, DataGridFilterItem, DataGridFilterInput) - All Command search inputs now respect text direction
- Add text-start to filter menu header text for proper RTL alignment - Add text-start to sort menu header text for proper RTL alignment - Ensures 'No filters applied' and 'No sorting applied' text aligns correctly in both LTR and RTL modes
- Add dir prop to filter menu PopoverContent for RTL text alignment - Add dir prop to sort menu PopoverContent for RTL text alignment - Add dir prop to view menu PopoverContent for RTL text alignment - Ensures empty states, buttons, and all content respect text direction - Fixes layout and orientation of filter/sort items in RTL mode
- Add useDirection hook to keyboard shortcuts dialog - Pass dir attribute to DialogContent for proper RTL layout - Update registry.json with @radix-ui/react-direction dependency for all data-grid components - Add dependency to data-grid, sort-menu, view-menu, filter-menu, keyboard-shortcuts - Regenerate registry JSON files for all affected components - Fix trailing comma formatting in data-grid types - Reorder CSS classes in paste-dialog for consistency
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive RTL (Right-to-Left) support to the data-grid component system by integrating @radix-ui/react-direction and converting all directional CSS utilities to their logical equivalents.
Key changes:
- Added
@radix-ui/react-directiondependency for direction context management - Converted all directional CSS classes (left/right) to logical properties (start/end)
- Integrated
useDirection()hook across all data-grid components to support dynamic text direction - Removed unused
Optioninterface from type definitions
Reviewed changes
Copilot reviewed 22 out of 23 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| package.json, pnpm-lock.yaml | Added @radix-ui/react-direction@^1.1.1 dependency |
| src/types/data-grid.ts | Removed unused Option interface, cleaned up type definitions |
| src/components/providers.tsx | Removed extraneous blank line |
| src/components/data-grid/data-grid.tsx | Added useDirection() hook and dir attribute to wrapper, converted border-r to border-e, left-0 to start-0 |
| src/components/data-grid/data-grid-view-menu.tsx | Added direction support with useDirection() hook, converted ml-auto to ms-auto |
| src/components/data-grid/data-grid-sort-menu.tsx | Added direction prop passing to Command component and overlay elements |
| src/components/data-grid/data-grid-search.tsx | Converted right-4 to end-4 for search panel positioning |
| src/components/data-grid/data-grid-row.tsx | Converted border-r to border-e for cell borders |
| src/components/data-grid/data-grid-render-count.tsx | Converted right-4 to end-4 for render count positioning |
| src/components/data-grid/data-grid-paste-dialog.tsx | Converted left-1/2 to start-1/2 in radio button pseudo-element |
| src/components/data-grid/data-grid-keyboard-shortcuts.tsx | Added direction support, converted right-6 to end-6, left-3 to start-3, pl-8 to ps-8 |
| src/components/data-grid/data-grid-filter-menu.tsx | Comprehensive RTL support with direction prop, converted ml-auto to ms-auto, replaced Option type with inline object type |
| src/components/data-grid/data-grid-demo.tsx | Added DirectionProvider wrapper and toggle control for testing RTL/LTR modes |
| src/components/data-grid/data-grid-column-header.tsx | Converted pr/pl to pe/ps, left/right to start/end in dropdown menu items and column resizer |
| src/components/data-grid/data-grid-cell-wrapper.tsx | Converted text-left to text-start for cell content alignment |
| registry.json, public/r/*.json | Updated all component registry entries to include @radix-ui/react-direction dependency |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add useDirection hook to detect RTL/LTR mode in useDataGrid - Swap left/right arrow key behavior in RTL mode to match visual direction - Update Tab key navigation to follow RTL reading order - Refactor DataGridDemo to wrap useDataGrid inside DirectionProvider
- Add getCommonPinningStyles with RTL support to data-grid.ts - Update data-grid and data-grid-row to use useDirection hook - Swap left/right positioning and shadows in RTL mode for pinned columns - Data-table components remain LTR-only
noodleman1991
pushed a commit
to noodleman1991/tablecn
that referenced
this pull request
Mar 12, 2026
* feat: add RTL support to data-grid component - Add useDirection hook with DirectionContext pattern (Radix-style) - Accept optional dir prop in DataGrid component - Use CSS logical properties (border-e, start-0) for RTL compatibility - Add RTL demo in data-grid-demo with DirectionProvider * feat: add comprehensive RTL support to all data-grid components - Update all data-grid components to use CSS logical properties - Replace directional classes with logical equivalents: - border-r → border-e - border-l → border-s - pl/pr → ps/pe - ml/mr → ms/me - left/right → start/end - text-left → text-start - Components updated: - data-grid-row.tsx - data-grid-column-header.tsx - data-grid-search.tsx - data-grid-filter-menu.tsx - data-grid-view-menu.tsx - data-grid-keyboard-shortcuts.tsx - data-grid-render-count.tsx - data-grid-paste-dialog.tsx - data-grid-cell-wrapper.tsx - Add DirectionProvider component wrapper - Update layout to use DirectionProvider with RTL for testing - Export Direction type from use-direction hook * refactor: consolidate direction logic into single direction-provider - Remove redundant use-direction.ts hook - Consolidate all direction logic in direction-provider.tsx - Update imports in data-grid-demo.tsx to use direction-provider - Remove error throw from useDirection for better flexibility - Reorder some Tailwind classes for consistency * feat: migrate to @radix-ui/react-direction and add direction toggle - Remove custom direction-provider in favor of official Radix Direction - Add @radix-ui/react-direction package - Update data-grid.tsx to use useDirection from Radix - Add interactive direction toggle in data-grid-demo toolbar - Use Toggle component for RTL/LTR switching - Remove layout-level RTL wrapper (now opt-in per component) - Export Direction type from data-grid types * feat: add RTL support to data-grid-view-menu with cmdk direction - Add useDirection hook from Radix to view menu - Pass dir attribute to Command component for RTL support - Use Direction type from data-grid types for consistency - Update demo to use Direction type and rename direction to dir * feat: add RTL support to sort-menu and filter-menu with cmdk direction - Add useDirection hook from Radix to sort and filter menus - Pass dir attribute to all Command components for RTL support - Thread dir prop through nested components (DataTableSortItem, DataGridFilterItem, DataGridFilterInput) - All Command search inputs now respect text direction * fix: add text-start alignment for RTL support in menu headers - Add text-start to filter menu header text for proper RTL alignment - Add text-start to sort menu header text for proper RTL alignment - Ensures 'No filters applied' and 'No sorting applied' text aligns correctly in both LTR and RTL modes * fix: add dir attribute to PopoverContent for proper RTL layout - Add dir prop to filter menu PopoverContent for RTL text alignment - Add dir prop to sort menu PopoverContent for RTL text alignment - Add dir prop to view menu PopoverContent for RTL text alignment - Ensures empty states, buttons, and all content respect text direction - Fixes layout and orientation of filter/sort items in RTL mode * feat: add RTL support to keyboard shortcuts and update registry - Add useDirection hook to keyboard shortcuts dialog - Pass dir attribute to DialogContent for proper RTL layout - Update registry.json with @radix-ui/react-direction dependency for all data-grid components - Add dependency to data-grid, sort-menu, view-menu, filter-menu, keyboard-shortcuts - Regenerate registry JSON files for all affected components - Fix trailing comma formatting in data-grid types - Reorder CSS classes in paste-dialog for consistency * feat: update skeletons * fix: correct keyboard navigation in RTL mode - Add useDirection hook to detect RTL/LTR mode in useDataGrid - Swap left/right arrow key behavior in RTL mode to match visual direction - Update Tab key navigation to follow RTL reading order - Refactor DataGridDemo to wrap useDataGrid inside DirectionProvider * chore: cleanup stuffs * feat: add RTL support for data-grid column pinning - Add getCommonPinningStyles with RTL support to data-grid.ts - Update data-grid and data-grid-row to use useDirection hook - Swap left/right positioning and shadows in RTL mode for pinned columns - Data-table components remain LTR-only
anhdd-kuro
pushed a commit
to anhdd-kuro/tablecn
that referenced
this pull request
Apr 8, 2026
* feat: add RTL support to data-grid component - Add useDirection hook with DirectionContext pattern (Radix-style) - Accept optional dir prop in DataGrid component - Use CSS logical properties (border-e, start-0) for RTL compatibility - Add RTL demo in data-grid-demo with DirectionProvider * feat: add comprehensive RTL support to all data-grid components - Update all data-grid components to use CSS logical properties - Replace directional classes with logical equivalents: - border-r → border-e - border-l → border-s - pl/pr → ps/pe - ml/mr → ms/me - left/right → start/end - text-left → text-start - Components updated: - data-grid-row.tsx - data-grid-column-header.tsx - data-grid-search.tsx - data-grid-filter-menu.tsx - data-grid-view-menu.tsx - data-grid-keyboard-shortcuts.tsx - data-grid-render-count.tsx - data-grid-paste-dialog.tsx - data-grid-cell-wrapper.tsx - Add DirectionProvider component wrapper - Update layout to use DirectionProvider with RTL for testing - Export Direction type from use-direction hook * refactor: consolidate direction logic into single direction-provider - Remove redundant use-direction.ts hook - Consolidate all direction logic in direction-provider.tsx - Update imports in data-grid-demo.tsx to use direction-provider - Remove error throw from useDirection for better flexibility - Reorder some Tailwind classes for consistency * feat: migrate to @radix-ui/react-direction and add direction toggle - Remove custom direction-provider in favor of official Radix Direction - Add @radix-ui/react-direction package - Update data-grid.tsx to use useDirection from Radix - Add interactive direction toggle in data-grid-demo toolbar - Use Toggle component for RTL/LTR switching - Remove layout-level RTL wrapper (now opt-in per component) - Export Direction type from data-grid types * feat: add RTL support to data-grid-view-menu with cmdk direction - Add useDirection hook from Radix to view menu - Pass dir attribute to Command component for RTL support - Use Direction type from data-grid types for consistency - Update demo to use Direction type and rename direction to dir * feat: add RTL support to sort-menu and filter-menu with cmdk direction - Add useDirection hook from Radix to sort and filter menus - Pass dir attribute to all Command components for RTL support - Thread dir prop through nested components (DataTableSortItem, DataGridFilterItem, DataGridFilterInput) - All Command search inputs now respect text direction * fix: add text-start alignment for RTL support in menu headers - Add text-start to filter menu header text for proper RTL alignment - Add text-start to sort menu header text for proper RTL alignment - Ensures 'No filters applied' and 'No sorting applied' text aligns correctly in both LTR and RTL modes * fix: add dir attribute to PopoverContent for proper RTL layout - Add dir prop to filter menu PopoverContent for RTL text alignment - Add dir prop to sort menu PopoverContent for RTL text alignment - Add dir prop to view menu PopoverContent for RTL text alignment - Ensures empty states, buttons, and all content respect text direction - Fixes layout and orientation of filter/sort items in RTL mode * feat: add RTL support to keyboard shortcuts and update registry - Add useDirection hook to keyboard shortcuts dialog - Pass dir attribute to DialogContent for proper RTL layout - Update registry.json with @radix-ui/react-direction dependency for all data-grid components - Add dependency to data-grid, sort-menu, view-menu, filter-menu, keyboard-shortcuts - Regenerate registry JSON files for all affected components - Fix trailing comma formatting in data-grid types - Reorder CSS classes in paste-dialog for consistency * feat: update skeletons * fix: correct keyboard navigation in RTL mode - Add useDirection hook to detect RTL/LTR mode in useDataGrid - Swap left/right arrow key behavior in RTL mode to match visual direction - Update Tab key navigation to follow RTL reading order - Refactor DataGridDemo to wrap useDataGrid inside DirectionProvider * chore: cleanup stuffs * feat: add RTL support for data-grid column pinning - Add getCommonPinningStyles with RTL support to data-grid.ts - Update data-grid and data-grid-row to use useDirection hook - Swap left/right positioning and shadows in RTL mode for pinned columns - Data-table components remain LTR-only
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.