A React application built with Syncfusion React Data Grid that demonstrates order tracking and status management using multiple synchronized grids. The application showcases advanced grid capabilities including sorting, filtering, grouping, drag-and-drop, row reordering, exporting, adaptive layouts, and dynamic row height customization.
The Order Tracking Status Grid provides an interactive interface for managing and tracking customer orders across different stages of fulfillment.
The application consists of:
- Orders Grid - Displays all orders and their complete status.
- Order Pending Grid - Displays pending orders with virtual scrolling.
- Order Delivered Grid - Displays delivered orders with paging and row reordering.
- Adaptive Grid View - Mobile-friendly grid layout optimized for smaller screens.
All grids remain synchronized, ensuring status updates are reflected consistently throughout the application.
The Orders Grid displays all available orders and their current status.
- Sorting
- Multi-column Sorting
- Filtering
- Grouping
- Infinite Scrolling
- Inline Editing
- Excel Export
- PDF Export
- Compact Grid Layout
- Column Menu Support
The Name column is sorted in ascending order by default.
For multi-column sorting:
- Hold the Ctrl key.
- Click the Order ID column header.
- Multiple columns will be sorted simultaneously.
Each column includes a menu with options such as:
- Sort Ascending
- Sort Descending
- Filter
- AutoFit
- AutoFit All Columns
Examples:
- Selecting AutoFit on the Status column resizes the column according to its content width.
- Selecting AutoFit All Columns automatically adjusts all columns for optimal visibility.
The application supports dynamic row height customization to improve readability and user experience.
- Small
- Normal
- Large
When a user selects a mode, the row height updates instantly across the grid without requiring a page refresh.
- Virtual Scrolling
- Drag and Drop Integration
- Export Support
- Real-time Synchronization
- Paging
- Row Reordering
- Export Support
- Drag and Drop Integration
- Real-time Synchronization
- Select an order from the Order Pending Grid.
- Drag the order into the Order Delivered Grid.
- The order status automatically changes:
Pending → Delivered
- All grids are refreshed and synchronized automatically.
The Adaptive Grid provides an optimized mobile experience.
- Responsive Design
- Compact Layout
- Mobile-Friendly User Interface
- Status Editing Support
- React
- Syncfusion React Data Grid (EJ2)
- Tailwind Theme Support
npm installnpm run devOpen:
http://localhost:3000
https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview