Syncfusion Ej2 React Part5

Essential Studio
for EJ2 React

Version - v25.1.35 | Release Date - March 15, 2024
File manager................................................................................................................................................ 25
Getting Started........................................................................................................................................ 25
Dependencies...................................................................................................................................... 25
Installation and configuration ............................................................................................................. 25
Adding Syncfusion packages ............................................................................................................... 25
Adding Style sheet to the Application................................................................................................. 26
Adding File Manager component to the Application.......................................................................... 26
Run the application ............................................................................................................................. 27
File Download support ........................................................................................................................ 28
File Upload support ............................................................................................................................. 29
Image Preview support ....................................................................................................................... 30
Injecting services for Overview ........................................................................................................... 31
Switching initial view of the File Manager .......................................................................................... 32
Maintaining component state on page reload ................................................................................... 33
Rendering component in right-to-left direction ................................................................................. 35
Specifying the current path of the File Manager ................................................................................ 36
Creating a Next.js Application Using Syncfusion React Components ..................................................... 37
What is Next.js? .................................................................................................................................. 37
Prerequisites ....................................................................................................................................... 37
Create a Next.js application ................................................................................................................ 37
Install Syncfusion React packages ....................................................................................................... 38
Import Syncfusion CSS styles .............................................................................................................. 39
Add Syncfusion React component ...................................................................................................... 39
Run the application ............................................................................................................................. 39
User interface in React File manager component .................................................................................. 40
Toolbar ................................................................................................................................................ 41
Files and folders navigation ................................................................................................................ 41
View .................................................................................................................................................... 42
Context menu...................................................................................................................................... 43
File operations in React File manager component ................................................................................. 44
Folder Upload support ........................................................................................................................ 45
File operation request and response Parameters .............................................................................. 50
File request and response contents .................................................................................................... 67
Action Buttons .................................................................................................................................... 68
Views in React File manager component................................................................................................ 69
LargeIcons View .................................................................................................................................. 69
Details View......................................................................................................................................... 70
Customization in React File manager component .................................................................................. 72
Context menu customization .............................................................................................................. 72
Details view customization ................................................................................................................. 73
Navigation pane customization .......................................................................................................... 75
Show/Hide file extension .................................................................................................................... 76
Show/Hide hidden items..................................................................................................................... 78
Show/Hide thumbnail images in large icons view .............................................................................. 79
Toolbar customization ........................................................................................................................ 80
Upload customization ......................................................................................................................... 82
Tooltip customization ......................................................................................................................... 83
Multiple selection in React File manager component ............................................................................ 87
Drag and drop in React File manager component .................................................................................. 88
File system provider in React File manager component......................................................................... 90
ASP.NET Core file system provider ..................................................................................................... 91
ASP.NET MVC 5 file provider............................................................................................................... 92
ASP.NET Core Azure cloud file system provider ................................................................................. 93
ASP.NET MVC 5 Azure cloud file system provider .............................................................................. 94
ASP.NET Core Amazon S3 cloud file provider ..................................................................................... 95
ASP.NET MVC Amazon S3 cloud file provider ..................................................................................... 96
File Transfer Protocol file system provider ......................................................................................... 98
SQL database file system provider ...................................................................................................... 99
NodeJS file system provider .............................................................................................................. 100
Google Drive file system provider..................................................................................................... 102
Firebase Realtime Database file system provider............................................................................. 103
IBM Cloud Object Storage file provider ............................................................................................ 109
Localization in React File manager component .................................................................................... 111
Virtualization in React File Manager component ................................................................................. 119
Module Injection ............................................................................................................................... 119
Enable Virtualization ......................................................................................................................... 120
Limitations for Virtualization ............................................................................................................ 122
Accessibility in React File Manager component ................................................................................... 122
WAI-ARIA attributes .......................................................................................................................... 123
Keyboard interaction ........................................................................................................................ 124
Ensuring accessibility ........................................................................................................................ 125
See also ............................................................................................................................................. 125
Access control in React File manager component ................................................................................ 125
Access Rules ...................................................................................................................................... 125
Permissions ....................................................................................................................................... 126
How To .................................................................................................................................................. 129
Adding custom item to context menu in React File manager component ....................................... 129
Adding custom item to toolbar in React File manager component.................................................. 131
Enable disable toolbar item in React File manager component ....................................................... 134
Customize custom thumbnail in React File manager component .................................................... 136
Nested items in React File manager component .............................................................................. 137
Create the custom file provider using NodeJS .................................................................................. 143
Preselect the items in React File manager component .................................................................... 162
Perform custom sorting in React FileManager component.............................................................. 164
FloatingActionButton ................................................................................................................................ 165
Getting Started with React Floating Action Button Component .......................................................... 165
Dependencies.................................................................................................................................... 165
Installation and Configuration .......................................................................................................... 166
Adding Syncfusion packages ............................................................................................................. 166
Adding Floating Action Button Component to the Application ........................................................ 166
Adding CSS reference ........................................................................................................................ 167
Running the application .................................................................................................................... 167
Click event ......................................................................................................................................... 168
Icons in React Floating action button component ................................................................................ 169
FAB with icon .................................................................................................................................... 169
FAB with icon and text ...................................................................................................................... 170
Styles in React Floating action button component ............................................................................... 174
FAB styles .......................................................................................................................................... 174
Styles customization ......................................................................................................................... 175
Show text on hover ........................................................................................................................... 176
Positions in React Floating action button component.......................................................................... 177
Custom position ................................................................................................................................ 182
Events in React Floating action button component ............................................................................. 183
created .............................................................................................................................................. 183
onclick ............................................................................................................................................... 184
Accessibility in React Floating action button component..................................................................... 185
Keyboard interaction ........................................................................................................................ 186
See also ............................................................................................................................................. 187
Form Validator .......................................................................................................................................... 187
Creating a Next.js Application Using Syncfusion React Components ................................................... 187
What is Next.js? ................................................................................................................................ 187
Prerequisites ..................................................................................................................................... 187
Create a Next.js application .............................................................................................................. 187
Install Syncfusion React packages ..................................................................................................... 188
Import Syncfusion CSS styles ............................................................................................................ 188
Add Syncfusion React component .................................................................................................... 189
Run the application ........................................................................................................................... 192
Validation rules in React Form validator component ........................................................................... 192
Default Rules ..................................................................................................................................... 192
Error messages in React Form validator component............................................................................ 193
Customizing Error Messages ............................................................................................................. 194
Validation events in React Form validator component ........................................................................ 197
Validation Begin ................................................................................................................................ 197
Validation Complete ......................................................................................................................... 197
Localization in React Form validator component ................................................................................. 201
Loading translations .......................................................................................................................... 201
React functional component in React Form validator component ...................................................... 204
Create a React form with Syncfusion form components .................................................................. 204
Perform validation ............................................................................................................................ 208
Run the Application........................................................................................................................... 210
Gantt ......................................................................................................................................................... 210
Getting Started...................................................................................................................................... 210
Getting started .................................................................................................................................. 210
loader { .............................................................................................................................................. 215
Creating a Next.js Application Using Syncfusion React Components ............................................... 245
Getting Started with the React Gantt Component in the Preact Framework .................................. 249
Module in React Gantt component ...................................................................................................... 254
Data binding in React Gantt component .............................................................................................. 254
Local data .......................................................................................................................................... 254
Remote data...................................................................................................................................... 260
Split task ............................................................................................................................................ 282
Improve performance by disabling validations ................................................................................ 289
Limitations......................................................................................................................................... 299
Columns in React Gantt component ..................................................................................................... 299
Defining columns .............................................................................................................................. 300
Custom column header ..................................................................................................................... 303
Format ............................................................................................................................................... 305
Change tree/expander column ......................................................................................................... 309
Show or hide columns dynamically................................................................................................... 311
Controlling Gantt column actions ..................................................................................................... 314
Column type ...................................................................................................................................... 316
Time line in React Gantt component .................................................................................................... 316
Timeline view modes ........................................................................................................................ 316
Change timeline view mode programmatically ................................................................................ 326
Week start day customization .......................................................................................................... 330
Customize automatic timescale update action................................................................................. 331
Timeline cells tooltip ......................................................................................................................... 333
Splitter in React Gantt component ....................................................................................................... 335
Splitter ............................................................................................................................................... 335
Changing splitter view....................................................................................................................... 337
Change splitter position dynamically ................................................................................................ 340
Task scheduling in React Gantt component ......................................................................................... 342
Automatically scheduled Tasks ......................................................................................................... 342
Manually scheduled Tasks ................................................................................................................ 345
Custom .............................................................................................................................................. 347
Unscheduled Tasks............................................................................................................................ 349
Define unscheduled tasks in data source ......................................................................................... 353
Working time range .......................................................................................................................... 356
Weekend/non-working days............................................................................................................. 358
Duration units ................................................................................................................................... 360
Taskbar in React Gantt component ...................................................................................................... 366
Taskbar template .............................................................................................................................. 366
Taskbar customization ...................................................................................................................... 371
Multi Taskbar support in project view .............................................................................................. 379
Connector lines ................................................................................................................................. 381
Enable tooltip .................................................................................................................................... 383
Tooltip template ............................................................................................................................... 387
Critical path in React Gantt component ............................................................................................... 395
Customize taskbar in critical path ..................................................................................................... 397
Undo Redo in React Gantt component ................................................................................................. 400
Configure the feature set for undo redo actions .............................................................................. 400
Configuring the Storage Step Count for Undo and Redo Actions ..................................................... 403
Perform undo redo actions programatically ..................................................................................... 405
Retrieve undo and redo stack collection .......................................................................................... 408
Clear undo and redo collection ......................................................................................................... 411
Tool bar in React Gantt component...................................................................................................... 413
Built-in toolbar items ........................................................................................................................ 413
Custom toolbar items ....................................................................................................................... 416
Built-in and custom items in toolbar ................................................................................................ 418
Enable/disable toolbar items ............................................................................................................ 420
Add input elements in Toolbar ......................................................................................................... 423
Managing tasks in React Gantt component .......................................................................................... 424
Cell edit type and its params............................................................................................................. 426
Taskbar editing tooltip ...................................................................................................................... 430
Scrolling in React Gantt component ..................................................................................................... 432
Set width and height ......................................................................................................................... 432
Responsive with the parent container .............................................................................................. 432
Scroll To Date method ...................................................................................................................... 433
Set the vertical scroll position ........................................................................................................... 435
Virtual scroll in React Gantt component............................................................................................... 436
Row virtualization ............................................................................................................................. 437
Timeline virtualization ...................................................................................................................... 447
Get filtered data when virtual scrolling is enabled ........................................................................... 457
Limitations for virtual scroll .............................................................................................................. 460
Resources in React Gantt component .................................................................................................. 461
Resource collection ........................................................................................................................... 461
Assign resource ................................................................................................................................. 462
Add/Edit resource collection ............................................................................................................ 467
Resource view in React Gantt component ........................................................................................... 468
Resource task .................................................................................................................................... 468
Resource overallocation ................................................................................................................... 474
Unassigned task ................................................................................................................................ 480
Enable taskbar drag and drop ........................................................................................................... 480
Filtering in React Gantt component ...................................................................................................... 487
Filter hierarchy modes ...................................................................................................................... 487
Initial filter ......................................................................................................................................... 489
Filter operators ................................................................................................................................. 491
Diacritics ............................................................................................................................................ 492
Filtering a specific column by method .............................................................................................. 495
Clear filtered columns ....................................................................................................................... 497
Custom component in filter menu .................................................................................................... 499
Sorting in React Gantt component ....................................................................................................... 502
Sorting column on Gantt initialization .............................................................................................. 504
Sorting column dynamically .............................................................................................................. 506
Clear all the sorted columns dynamically ......................................................................................... 508
Sorting events ................................................................................................................................... 510
Custom Sorting.................................................................................................................................. 511
Touch interaction .............................................................................................................................. 515
Selection in React Gantt component .................................................................................................... 516
Selection mode ................................................................................................................................. 516
Toggle selection ................................................................................................................................ 518
Clear selection ................................................................................................................................... 520
Get selected row indexes and records.............................................................................................. 522
Multiple Selection based on condition ............................................................................................. 524
See Also ............................................................................................................................................. 527
Rows in React Gantt component .......................................................................................................... 527
Row height ........................................................................................................................................ 527
Expand/Collapse Row ....................................................................................................................... 529
Customize rows and cells .................................................................................................................. 535
Styling alternate rows ....................................................................................................................... 538
Row spanning .................................................................................................................................... 541
Clip mode .......................................................................................................................................... 544
Export .................................................................................................................................................... 546
Excel export in React Gantt component ........................................................................................... 546
Export ................................................................................................................................................ 548
Context menu in React Gantt component ............................................................................................ 585
Custom context menu items ............................................................................................................. 587
State persistence in React Gantt component ....................................................................................... 591
Get or set localStorage value ............................................................................................................ 591
Prevent columns from persisting ...................................................................................................... 591
Persist the header template and header Text .................................................................................. 595
Accessibility in React Gantt component ............................................................................................... 599
Keyboard navigation ......................................................................................................................... 601
See also ............................................................................................................................................. 602
Global local in React Gantt component ................................................................................................ 602
Localization ....................................................................................................................................... 602
Internationalization........................................................................................................................... 607
Right to left (RTL) .............................................................................................................................. 609
See Also ............................................................................................................................................. 615
Style and appearance in React Gantt component ................................................................................ 615
Grid lines ........................................................................................................................................... 617
Timezone in React Gantt component ................................................................................................... 618
Understanding date manipulation in JavaScript ............................................................................... 618
Display same time everywhere with no time difference .................................................................. 619
CRUD operations with timezone....................................................................................................... 622
Timezone methods ........................................................................................................................... 628
How To .................................................................................................................................................. 629
Open add edit dialog in React Gantt component ............................................................................. 629
Change schedule dates in React Gantt component .......................................................................... 632
Copy paste records in React Gantt component ................................................................................ 634
Maintain record index in React Gantt component ........................................................................... 637
Custom field in React Gantt component........................................................................................... 641
Maintain zoom to fit in React Gantt component .............................................................................. 646
Drag and drop from another in React Gantt component ................................................................. 651
Restrict collapse chart rows in React Gantt component .................................................................. 655
Link to the VideoGrid ................................................................................................................................ 657
Getting Started...................................................................................................................................... 657
Getting started .................................................................................................................................. 657
Creating a Next.js Application Using Syncfusion React Components ............................................... 684
Getting Started with the React Grid Component in the Preact Framework..................................... 690
Module in React Grid component......................................................................................................... 694
Data binding in React Grid component................................................................................................. 694
Loading indicator .............................................................................................................................. 695
Refresh the datasource using property ............................................................................................ 697
Dynamically change the datasource or columns or both ................................................................. 705
Adaptive in React Grid component ....................................................................................................... 713
Render adaptive dialogs.................................................................................................................... 713
Vertical row rendering ...................................................................................................................... 837
Performance tips for React DataGrid Component................................................................................ 963
How to improve loading performance by binding large dataset ...................................................... 963
Optimizing react component rendering by mitigating unnecessary re-renders during state updates
.......................................................................................................................................................... 964
How to improve loading performance by binding large data by showing custom text or element . 965
How to improve loading performance by referring individual script and CSS ................................. 965
How to update cell values without frequent server calls ................................................................. 965
How to optimize server-side data operations with adaptors ........................................................... 965
How to avoid MaxJsonLength error while passing large amount of records ................................... 965
Microsoft excel limitation while exporting millions of records to excel file format ......................... 966
Columns in React Grid Component....................................................................................................... 966
Column types .................................................................................................................................... 966
Column width .................................................................................................................................... 973
Column formatting ............................................................................................................................ 979
Align the text of content ................................................................................................................. 1008
Render boolean value as checkbox................................................................................................. 1014
How to prevent checkbox in the blank row .................................................................................... 1019
AutoFit columns .............................................................................................................................. 1025
Lock columns................................................................................................................................... 1049
Show or hide columns ..................................................................................................................... 1055
Controlling grid actions ................................................................................................................... 1073
Customize column styles................................................................................................................. 1079
Manipulating columns .................................................................................................................... 1079
Responsive columns ........................................................................................................................ 1093
See also ........................................................................................................................................... 1098
Row in React Grid component ............................................................................................................ 1098
Customize row styles ...................................................................................................................... 1099
Row height ...................................................................................................................................... 1125
Row hover ....................................................................................................................................... 1137
Row pinning (Frozen) in React Grid component ............................................................................. 1149
Limitations....................................................................................................................................... 1163
Adding a new row programmatically .............................................................................................. 1163
Show or hide a row using an external actions ................................................................................ 1170
How to get the row data and element............................................................................................ 1177
Cell in React Grid component ............................................................................................................. 1179
Displaying the HTML content .......................................................................................................... 1179
Autowrap the grid content ............................................................................................................. 1184
Customize cell styles ....................................................................................................................... 1191
Clip mode ........................................................................................................................................ 1216
Tooltip ............................................................................................................................................. 1223
Grid lines ......................................................................................................................................... 1231
See also ........................................................................................................................................... 1238
Edit in React Grid component ............................................................................................................. 1239
Toolbar with edit option ................................................................................................................. 1245
Disable editing for particular column ............................................................................................. 1251
Editing template column ................................................................................................................. 1258
Customize delete confirmation dialog ............................................................................................ 1264
Update boolean column value with a single click ........................................................................... 1270
Edit enum column ........................................................................................................................... 1276
Edit complex column....................................................................................................................... 1283
Edit foreign key column .................................................................................................................. 1295
Troubleshoot editing works only for first row ................................................................................ 1326
How to make a Grid column always editable ................................................................................. 1326
See also ........................................................................................................................................... 1332
Sorting in React Grid component........................................................................................................ 1332
Initial sorting ................................................................................................................................... 1338
Multi-column sorting ...................................................................................................................... 1343
Prevent sorting for particular column............................................................................................. 1349
Sort order ........................................................................................................................................ 1354
Custom sorting ................................................................................................................................ 1354
Touch interaction ............................................................................................................................ 1361
Sort foreign key column based on text ........................................................................................... 1363
Perform sorting based on its culture .............................................................................................. 1394
How to customize sort icon ............................................................................................................ 1401
Sort columns externally .................................................................................................................. 1406
Sorting events ................................................................................................................................. 1426
See also ........................................................................................................................................... 1432
Grouping in React Grid component .................................................................................................... 1432
Initial group ..................................................................................................................................... 1437
Prevent grouping for particular column ......................................................................................... 1443
Hide drop area ................................................................................................................................ 1448
Show the grouped column .............................................................................................................. 1454
Reordering on grouped columns .................................................................................................... 1461
Sort grouped columns in descending order during initial grouping ............................................... 1466
Group with paging........................................................................................................................... 1472
Group by format ............................................................................................................................. 1472
Show grouped rows based on page size ......................................................................................... 1478
Collapse all grouped rows at initial rendering ................................................................................ 1484
Group or ungroup column externally ............................................................................................. 1490
Expand or collapse externally ......................................................................................................... 1497
Clear grouping ................................................................................................................................. 1510
Grouping events .............................................................................................................................. 1516
Limitations....................................................................................................................................... 1528
See also ........................................................................................................................................... 1528
Filtering in React Grid component ...................................................................................................... 1528
Initial filter ....................................................................................................................................... 1534
Filter operators ............................................................................................................................... 1552
Diacritics filter ................................................................................................................................. 1554
Filtering with case sensitivity .......................................................................................................... 1558
Enable different filter for a column ................................................................................................ 1564
Change default filter operator for particular column ..................................................................... 1571
Filter grid programmatically with single and multiple values using method.................................. 1579
How to get filtered records ............................................................................................................. 1585
Clear filtering using methods .......................................................................................................... 1593
Filtering events................................................................................................................................ 1599
See also ........................................................................................................................................... 1605
Scrolling in React Grid component ..................................................................................................... 1606
Set width and height ....................................................................................................................... 1606
Responsive with parent container .................................................................................................. 1611
Sticky header ................................................................................................................................... 1616
Scroll to selected row...................................................................................................................... 1621
Hide the empty placehoder of scrollbar ......................................................................................... 1627
Searching in React Grid component ................................................................................................... 1633
Initial search .................................................................................................................................... 1639
Search by external button............................................................................................................... 1645
Search specific columns .................................................................................................................. 1655
Search on each key stroke .............................................................................................................. 1661
Perform search based on column formatting ................................................................................. 1667
Perform search operation in Grid using multiple keywords ........................................................... 1674
How to ignore accent while searching ............................................................................................ 1682
Highlight the search text ................................................................................................................. 1710
Clear search by external button...................................................................................................... 1717
See also ........................................................................................................................................... 1723
Paging in React Grid component ........................................................................................................ 1723
Customize the pager options .......................................................................................................... 1723
Pager template................................................................................................................................ 1748
Pager with page size dropdown ...................................................................................................... 1754
How to navigate to particular page ................................................................................................ 1766
How to get the pager element ........................................................................................................ 1772
Dynamically calculate page size based on element height ............................................................. 1772
Render pager at the top of the grid ................................................................................................ 1778
Pager events.................................................................................................................................... 1784
See also ........................................................................................................................................... 1791
Selection in React Grid component .................................................................................................... 1791
Selection mode ............................................................................................................................... 1797
Touch interaction ............................................................................................................................ 1803
Toggle selection .............................................................................................................................. 1805
Clear all selection programmatically ............................................................................................... 1812
Persist selection .............................................................................................................................. 1818
Aggregates in React Grid component ................................................................................................. 1823
Built-in aggregate types .................................................................................................................. 1830
Multiple aggregates for a column ................................................................................................... 1840
Print in React Grid component ........................................................................................................... 1846
Page setup ....................................................................................................................................... 1851
Print by external button .................................................................................................................. 1852
Print visible Page ............................................................................................................................. 1861
Print only selected records ............................................................................................................. 1867
Print the hierarchy grid ................................................................................................................... 1873
Print the master detail grid ............................................................................................................. 1887
Print large number of columns ....................................................................................................... 2295
Show or hide columns while printing ............................................................................................. 2296
Limitations of printing large data.................................................................................................... 2302
Retain grid styles while printing...................................................................................................... 2303
Print grid along with other components ......................................................................................... 2331
Hierarchy grid in React Grid component ............................................................................................ 2361
Bind hierarchy grid with different field........................................................................................... 2375
Expand child grid initially ................................................................................................................ 2389
Dynamically load child grid data ..................................................................................................... 2403
Dynamically bind data to child grid based on parent row data ...................................................... 2417
Adding record in child grid .............................................................................................................. 2431
Template column in child grid ........................................................................................................ 2445
How to get parent detail in child grid ............................................................................................. 2460
Expand all by external button ......................................................................................................... 2474
Hide the expand/collapse icon in parent row when no record in child grid .................................. 2489
Customize the child grid.................................................................................................................. 2500
State Management in React Grid component .................................................................................... 2534
Restore initial Grid state ................................................................................................................. 2535
Restore to specific state version ..................................................................................................... 2547
Restore to previous state ................................................................................................................ 2554
Maintaining custom query in a persistent state ............................................................................. 2561
Get or set local storage value ......................................................................................................... 2567
Prevent columns from persisting .................................................................................................... 2567
Add to persist .................................................................................................................................. 2574
Toolbar in React Grid component ....................................................................................................... 2587
Enable or disable toolbar items ...................................................................................................... 2592
Add toolbar at the bottom of grid .................................................................................................. 2599
Customize toolbar buttons using CSS ............................................................................................. 2605
See also ........................................................................................................................................... 2611
Pdf export in React Grid component .................................................................................................. 2611
Show spinner while exporting......................................................................................................... 2617
Binding custom data source while exporting.................................................................................. 2622
Exporting with custom aggregate ................................................................................................... 2631
Exporting with cell and row spanning ............................................................................................. 2638
Exporting with custom date format ................................................................................................ 2646
Exporting multiple grids .................................................................................................................. 2652
Exporting hierarchy grid.................................................................................................................. 2669
Remove header row while exporting.............................................................................................. 2684
See also ........................................................................................................................................... 2690
Excel exporting in React Grid component........................................................................................... 2690
Show spinner while exporting......................................................................................................... 2696
Binding custom data source while exporting.................................................................................. 2702
Exporting with custom aggregate ................................................................................................... 2708
Exporting with cell and row spanning ............................................................................................. 2715
Exporting with custom date format ................................................................................................ 2723
Exporting multiple grids .................................................................................................................. 2729
Exporting hierarchy grid.................................................................................................................. 2758
Remove header row while exporting.............................................................................................. 2773
How to add formula for the cell while exporting............................................................................ 2780
Limitations....................................................................................................................................... 2824
See Also ........................................................................................................................................... 2824
Global local in React Grid component ................................................................................................ 2824
Localization ..................................................................................................................................... 2824
Internationalization......................................................................................................................... 2878
Right to Left - RTL ............................................................................................................................ 2884
See also ........................................................................................................................................... 2894
Accessibility in React Grid component ............................................................................................... 2894
WAI-ARIA attributes ........................................................................................................................ 2895
Keyboard interaction ...................................................................................................................... 2897
Ensuring accessibility ...................................................................................................................... 2912
See also ........................................................................................................................................... 2937
Clipboard in React Grid component.................................................................................................... 2937
Copy to clipboard by external buttons ........................................................................................... 2942
AutoFill ............................................................................................................................................ 2948
Paste................................................................................................................................................ 2955
Context menu in React Grid component ............................................................................................ 2961
Custom context menu items ........................................................................................................... 2968
Show context menu on left click ..................................................................................................... 2978
Enable or disable context menu items ........................................................................................... 2984
Show or hide context menu items .................................................................................................. 2991
Style and appearance in React Grid component ................................................................................ 2997
Customizing the grid root element ................................................................................................. 2998
See also ........................................................................................................................................... 3005
Ej1 api migration in React Grid component ........................................................................................ 3005
Sorting ............................................................................................................................................. 3005
Grouping ......................................................................................................................................... 3005
Filtering ........................................................................................................................................... 3007
Searching ......................................................................................................................................... 3008
Paging .............................................................................................................................................. 3008
Selection.......................................................................................................................................... 3009
Editing ............................................................................................................................................. 3012
Resizing ........................................................................................................................................... 3015
Reordering ...................................................................................................................................... 3016
Context Menu ................................................................................................................................. 3016
Toolbar ............................................................................................................................................ 3017
GridLines ......................................................................................................................................... 3018
Templates........................................................................................................................................ 3018
Row/Column Drag and Drop ........................................................................................................... 3019
Frozen Rows and Columns .............................................................................................................. 3019
ForeignKey ...................................................................................................................................... 3020
Auto Wrap ....................................................................................................................................... 3020
Responsive ...................................................................................................................................... 3020
State Persistence............................................................................................................................. 3021
Right to Left - RTL ............................................................................................................................ 3021
ToolTip ............................................................................................................................................ 3021
Aggregate/Summary ....................................................................................................................... 3021
Grid Export ...................................................................................................................................... 3022
Columns .......................................................................................................................................... 3022
Row ................................................................................................................................................. 3024
Show/Hide Columns........................................................................................................................ 3024
Column Chooser .............................................................................................................................. 3025
Header............................................................................................................................................. 3025
DataSource ...................................................................................................................................... 3025
Print ................................................................................................................................................. 3026
Scrolling ........................................................................................................................................... 3026
PrimaryKey ...................................................................................................................................... 3026
Grid.................................................................................................................................................. 3026
How To ................................................................................................................................................ 3029
Enable or disable grid and its actions in React Grid component .................................................... 3029
Cascading drop down list with grid editing in React Grid component ........................................... 3036
Import excel data in to grid............................................................................................................. 3044
Exporting grid in cordova application in React Grid component .................................................... 3051
Customize pager drop down in React Grid component.................................................................. 3058
Hide the expand collapse icon in parent row in React Grid component ........................................ 3063
Complex column as foreign key column in React Grid component ................................................ 3074
List of array of objects in React Grid component ........................................................................... 3089
Add params for filtering in React Grid component......................................................................... 3100
Select grid rows based on certain condition in React Grid component ......................................... 3105
Collapse grouped rows at initial render in React Grid component ................................................ 3111
Grouped row page size in React Grid component .......................................................................... 3117
Get row cell index in React Grid component .................................................................................. 3123
Display null values at bottom in React Grid component ................................................................ 3129
Enable editing in single click in React Grid component .................................................................. 3134
Use custom helper inside the loop with templates in React Grid component ............................... 3515
Resize the grid in various dimension in React Grid component ..................................................... 3521
Hide sorting in excel filter in React Grid component ...................................................................... 3528
How to prevent component re-rendering while updating the same state in React ...................... 3534
Testing the React application using Jest ......................................................................................... 3911
How to create a routing sample in React Grid component ............................................................ 3939
Customize the Empty Record Template in React Grid component ................................................ 3941
Getting Started.................................................................................................................................... 3948
Dependencies.................................................................................................................................. 3948
Installation and configuration ......................................................................................................... 3948
Adding HeatMap to the project ...................................................................................................... 3949
Module injection ............................................................................................................................. 3950
Populate heat map with data ......................................................................................................... 3951
Enable axis labels ............................................................................................................................ 3952
Add heat map title .......................................................................................................................... 3953
Enable legend.................................................................................................................................. 3955
Add data label ................................................................................................................................. 3957
Add custom cell palette .................................................................................................................. 3959
Enable tooltip .................................................................................................................................. 3962
Working with data in React HeatMap chart component .................................................................... 3964
Data adaptor ................................................................................................................................... 3964
Empty points ................................................................................................................................... 3981
Binding nested JSON data ............................................................................................................... 3983
See Also ........................................................................................................................................... 3990
Bubble heatmap in React Heatmap chart component ....................................................................... 3990
Bubble types ................................................................................................................................... 3990
Rendering mode in React Heatmap chart component ....................................................................... 4015
Axis in React HeatMap chart component ........................................................................................... 4017
Types ............................................................................................................................................... 4017
Inversed axis.................................................................................................................................... 4023
Opposed axis ................................................................................................................................... 4026
Axis labels customization ................................................................................................................ 4028
Axis intervals ................................................................................................................................... 4041
Axis label increment ........................................................................................................................ 4044
Limiting labels in date-time axis...................................................................................................... 4045
Multilevel Labels ............................................................................................................................. 4050
Palette in React Heatmap chart component ...................................................................................... 4054
Palette types ................................................................................................................................... 4055
Defining color stops ........................................................................................................................ 4059
Color range ...................................................................................................................................... 4061
See Also ........................................................................................................................................... 4064
Legend in React Heatmap chart component ...................................................................................... 4064
Legend types ................................................................................................................................... 4066
Placement ....................................................................................................................................... 4069
Alignment ........................................................................................................................................ 4070
Legend dimensions ......................................................................................................................... 4072
Paging for legend ............................................................................................................................ 4074
Smart Legend .................................................................................................................................. 4077
Legend Selection ............................................................................................................................. 4080
Legend Title ..................................................................................................................................... 4083
Appearance in React Heatmap chart component .............................................................................. 4085
Cell customization ........................................................................................................................... 4085
Background color ............................................................................................................................ 4091
Margin ............................................................................................................................................. 4093
Title ................................................................................................................................................. 4095
Data label ........................................................................................................................................ 4097
See Also ........................................................................................................................................... 4116
Dimensions in React Heatmap chart component ............................................................................... 4116
Size for container ............................................................................................................................ 4116
Size for heat map ............................................................................................................................ 4116
In pixel ............................................................................................................................................. 4116
In percentage .................................................................................................................................. 4118
Tooltip in React Heatmap chart component ...................................................................................... 4120
Default tooltip ................................................................................................................................. 4120
Tooltip template ............................................................................................................................. 4122
Customize the appearance of Tooltip ............................................................................................. 4125
Selection in React HeatMap chart component ................................................................................... 4128
Enable single cell selection ............................................................................................................. 4130
Accessibility in React HeatMap component ....................................................................................... 4134
WAI-ARIA attributes ........................................................................................................................ 4135
Screen reading in HeatMap ............................................................................................................ 4135
See also ........................................................................................................................................... 4136
Events in React HeatMap chart component ....................................................................................... 4136
cellClick............................................................................................................................................ 4136
cellDoubleClick ................................................................................................................................ 4138
cellRender ....................................................................................................................................... 4140
cellSelected ..................................................................................................................................... 4142
created ............................................................................................................................................ 4144
legendRender .................................................................................................................................. 4145
load ................................................................................................................................................. 4147
loaded ............................................................................................................................................. 4149
resized ............................................................................................................................................. 4151
tooltipRender .................................................................................................................................. 4153
How To ................................................................................................................................................ 4155
Tool tip table in React Heatmap chart component ........................................................................ 4155
Legend customization in React Heatmap chart component........................................................... 4158
Ej1 api migration in React Heatmap chart component....................................................................... 4161
Members ......................................................................................................................................... 4161
Events .............................................................................................................................................. 4163
Image Editor ............................................................................................................................................ 4164
Getting Started.................................................................................................................................... 4164
Dependencies.................................................................................................................................. 4164
Installation and Configuration ........................................................................................................ 4164
Adding Syncfusion packages ........................................................................................................... 4165
Adding CSS Reference ..................................................................................................................... 4165
Adding Image Editor component to the Application ...................................................................... 4165
Run the application ......................................................................................................................... 4166
End User Capabilities in the Image Editor component ....................................................................... 4167
Open an image ................................................................................................................................ 4167
Zooming .......................................................................................................................................... 4168
Panning ........................................................................................................................................... 4169
Cropping and image transformation............................................................................................... 4170
Annotations..................................................................................................................................... 4171
Filtering and fine-tune .................................................................................................................... 4172
Undo and redo the operations ....................................................................................................... 4173
Reset an image ................................................................................................................................ 4174
Export an image .............................................................................................................................. 4175
Open and save in the React Image Editor component ....................................................................... 4176
Open................................................................................................................................................ 4176
Supported image formats ............................................................................................................... 4178
Save as image .................................................................................................................................. 4178
File opened event ........................................................................................................................... 4180
Saving event .................................................................................................................................... 4181
Created event.................................................................................................................................. 4181
Destroyed event .............................................................................................................................. 4181
Reset an image ................................................................................................................................ 4181
Selection cropping in the React Image Editor component ................................................................. 4181
Insert custom / square / circle region ............................................................................................. 4182
Insert selection based on aspect ratio ............................................................................................ 4184
Crop an image ................................................................................................................................. 4186
Cropping event ................................................................................................................................ 4188
Annotation in the React Image Editor component ............................................................................. 4188
Text annotation ............................................................................................................................... 4188
Freehand drawing ........................................................................................................................... 4200
Shape annotation ............................................................................................................................ 4207
Delete a shape ................................................................................................................................ 4211
Image annotation ............................................................................................................................ 4213
Transform in the React Image Editor component .............................................................................. 4216
Rotate an image .............................................................................................................................. 4216
Flip an image ................................................................................................................................... 4218
Straightening in the React Image Editor control............................................................................. 4220
Zoom in or out an image ................................................................................................................. 4222
Panning an image ............................................................................................................................ 4229
Zooming event ................................................................................................................................ 4232
Rotating event................................................................................................................................. 4233
Flipping event.................................................................................................................................. 4233
Toolbar in the React Image Editor component ................................................................................... 4233
Built-in toolbar items ...................................................................................................................... 4233
Add a custom toolbar items ............................................................................................................ 4234
Show or hide a toolbar.................................................................................................................... 4236
Show or hide a toolbar item ........................................................................................................... 4237
Enable or disable a toolbar item ..................................................................................................... 4239
Toolbar template ............................................................................................................................ 4240
Customize Contextual Toolbar ........................................................................................................ 4242
Toolbar item clicked event.............................................................................................................. 4244
Quick access toolbar in the React Image Editor component .............................................................. 4246
Add a custom toolbar item ............................................................................................................. 4246
Undo and redo actions in the Vue Image Editor................................................................................. 4248
Undo the action .............................................................................................................................. 4249
Redo the action ............................................................................................................................... 4249
Filters in the React Image Editor component ..................................................................................... 4251
Apply filter effect ............................................................................................................................ 4251
Finetune in Image Editor component ................................................................................................. 4255
Adjust the brightness, contrast, or sharpness ................................................................................ 4255
Adjust the hue, exposure, blur, or opacity ..................................................................................... 4257
Finetune value changing event ....................................................................................................... 4260
Resize .................................................................................................................................................. 4260
Apply resize to the image................................................................................................................ 4260
Resizing event ................................................................................................................................. 4263
Frames................................................................................................................................................. 4263
Apply frame to the Image ............................................................................................................... 4263
Frame changing event..................................................................................................................... 4266
Localization in the React Image Editor component ............................................................................ 4267
Accessibility in React Image Editor component .................................................................................. 4271
Keyboard interaction ...................................................................................................................... 4272
See also ........................................................................................................................................... 4273
InplaceEditor ........................................................................................................................................... 4273
Getting Started.................................................................................................................................... 4273
Dependencies.................................................................................................................................. 4273
Set up your development environment.......................................................................................... 4273
Add the In-place Editor with Textbox ............................................................................................. 4275
Configuring DropDownList .............................................................................................................. 4276
Integrate DatePicker ....................................................................................................................... 4277
Submitting data to the server (save) .............................................................................................. 4281
Refresh with modified value ........................................................................................................... 4282
See Also ........................................................................................................................................... 4285
Getting Started.................................................................................................................................... 4285
Dependencies.................................................................................................................................. 4285
Set up your development environment.......................................................................................... 4286
Add the In-place Editor with Textbox ............................................................................................. 4287
Configuring DropDownList .............................................................................................................. 4288
Integrate DatePicker ....................................................................................................................... 4288
Submitting data to the server (save) .............................................................................................. 4290
Refresh with modified value ........................................................................................................... 4291
See Also ........................................................................................................................................... 4293
Components in React Inplace editor component ............................................................................... 4293
Model configuration ....................................................................................................................... 4305
See Also ........................................................................................................................................... 4306
Configuration in React Inplace editor component.............................................................................. 4307
Rendering modes ............................................................................................................................ 4307
Event actions for editing ................................................................................................................. 4315
Action on focus out ......................................................................................................................... 4318
Display modes ................................................................................................................................. 4322
See Also ........................................................................................................................................... 4324
Buttons in React Inplace editor component ....................................................................................... 4325
See Also ........................................................................................................................................... 4328
Server actions in React Inplace editor component ............................................................................. 4328
See Also ........................................................................................................................................... 4333
Data binding in React Inplace editor component ............................................................................... 4334
Local ................................................................................................................................................ 4334
Remote ............................................................................................................................................ 4336
Integration in React Inplace editor component .................................................................................. 4341
As a string ........................................................................................................................................ 4341
As a selector .................................................................................................................................... 4341
Validation in React Inplace editor component ................................................................................... 4343
Validation Rules .............................................................................................................................. 4344
Accessibility in React Inplace editor component ................................................................................ 4344
Style in React Inplace editor component ............................................................................................ 4344
Customizing the In-place Editor text............................................................................................... 4344
Customizing the In-place Editor action buttons ............................................................................. 4345
Localization in React Inplace editor component................................................................................. 4345
Localization ..................................................................................................................................... 4345
Right to left ..................................................................................................................................... 4350
Format ............................................................................................................................................. 4352
How To ................................................................................................................................................ 4353
Dynamic edit mode in React Inplace editor component ................................................................ 4353
Disable edit mode in React Inplace editor component .................................................................. 4357
Custom indication in React Inplace editor component .................................................................. 4360
Custom animation in React Inplace editor component .................................................................. 4362
File manager Getting Started
File manager
Getting Started
This section explains how to create and configure the simple Link to the Video component.
To get started quickly with React File Manager, you can check the video below.
Dependencies
The following list of dependencies are required to use the File Manager component in your application.
`javascript
|-- @syncfusion/ej2-react-filemanager
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-grids
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-navigations
`
Installation and configuration
You can use create-react-app to setup the applications. To install create-react-app run the following
command.
`
npm install -g create-react-app
`
To set-up a React application in TypeScript environment, run the following command.
`
npx create-react-app my-app --template typescript
cd my-app
`
To set-up a React application in JavaScript environment, run the following command.
`
npx create-react-app my-app
cd my-app
`
Adding Syncfusion packages
All the available Essential JS 2 packages are published in npmjs.com public registry.
You can choose the component that you want to install. For this application, we are going to use File
Manager component.
Copyright © 2001 -2024 Syncfusion Inc. 25

To install File Manager component, use the following command

`bash
npm install @syncfusion/ej2-react-filemanager --save
`
Adding Style sheet to the Application
To render the File Manager component, need to import File Manager and its dependent component's
styles as given below in App.css.
`css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-filemanager/styles/material.css";
`
Note: If you want to refer the combined component styles, please make use of our CRG (Custom
Resource Generator) in your application.
Adding File Manager component to the Application
File Manager can be initialized using the <FileManagerComponent> tag. Now, you can start adding
Essential JS 2 File Manager component to the application.
• To include the File Manager component in application import the FileManagerComponent

from ej2-react-filemanager package in App.tsx.
• Then add the File Manager component as shown in below code example.
[src/App.tsx]
{% raw %}
`ts
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";

return (
<div className="control-section">
<FileManagerComponent id="file" ajaxSettings = {{
url: hostUrl + "api/FileManager/FileOperations"
}} />
</div>
);
}
export default App;
`
{% endraw %}
{% raw %}
`ts
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" ajaxSettings={{
}}/>
</div>);
}
export default App;
`
{% endraw %}
Run the application
Now run the npm start command in the console, it will run your application and open the browser
window.
`
npm start
`
The following sample, shows the basic File Manager component.
APP.JSX

{% raw %}
function App() {
}}/>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
}} />
</div>
);
}
export default App;{% endraw %}
INDEX.JSX
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
INDEX.TSX
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
File Download support

To perform the download operation, initialize the downloadUrl property in a ajaxSettings of File
Manager component.
{% raw %}
`ts


function App() {
return (
url: hostUrl + "api/FileManager/FileOperations",
downloadUrl: hostUrl + 'api/FileManager/Download'
}} />
</div>
);
}
export default App;
`
{% endraw %}
File Upload support
To perform the upload operation, initialize the uploadUrl property in a ajaxSettings of File Manager
Component.
{% raw %}
`ts
function App() {
return (
uploadUrl: hostUrl + 'api/FileManager/Upload'
}} />
</div>
);
}
export default App;

`
{% endraw %}
Image Preview support
To perform the image preview support in the File Manager component, need to initialize the
getImageUrl property in a ajaxSettings of File Manager component.
APP.JSX
{% raw %}
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject
} from '@syncfusion/ej2-react-filemanager';
function App() {
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings={{
getImageUrl: hostUrl + "api/FileManager/GetImage",
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings = {{
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</div>
);
}
INDEX.JSX

INDEX.TSX
Injecting services for Overview

By default, the File Manager component not having any extra module. You can configure
NavigationPane, Toolbar , ContextMenu module using Inject.
APP.JSX
{% raw %}
function App() {
downloadUrl: hostUrl + 'api/FileManager/Download',
uploadUrl: hostUrl + 'api/FileManager/Upload',
}}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
}} >
</div>
);
}

INDEX.JSX
INDEX.TSX
Note: The appearance of the File Manager can be customized by using cssClass property. This adds a css
class to the root of the File Manager which can be used to add new styles or override existing styles to
the File Manager.
Switching initial view of the File Manager
The initial view of the File Manager can be changed to details or largeicons view with the help of view
property. By default, the File Manager will be rendered in large icons view. When the File Manager is
initially rendered, created will be triggered. This event can be utilized for performing operations once
the File Manager has been successfully created.
APP.JSX
{% raw %}
function App() {
function onCreated(args) {
console.log("File Manager has been created successfully");
}
}} created={onCreated.bind(this)}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}


function App() {
function onCreated(args: any) {
console.log("File Manager has been created successfully");
}
return (
}} created = {onCreated.bind(this)}>
</div>
);
}
INDEX.JSX
INDEX.TSX
Maintaining component state on page reload

The File Manager supports maintaining the component state on page reload. This can be achieved by
enabling enablePersistence property which maintains the following,
• Previous view of the File Manager - View

• Previous path of the File Manager - Path
• Previous selected items of the File Manager - SelectedItems
For every operation in File Manager, ajax request will be sent to the server which then processes the
request and sends back the response. When the ajax request is success, success event will be triggered
and failure event will be triggered if the request gets failed.
APP.JSX
{% raw %}


function App() {
function onSuccess(args) {
console.log("Ajax request successful");
}
function onFailure(args) {
console.log("Ajax request has failed");
}
<FileManagerComponent id="file" view="LargeIcons"
enablePersistence={true} ajaxSettings={{
}} success={onSuccess.bind(this)} failure={onFailure.bind(this)}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject,
SuccessEventArgs, FailureEventArgs } from '@syncfusion/ej2-react-
filemanager';
function App() {
function onSuccess(args: SuccessEventArgs) {
console.log("Ajax request successful");
}
function onFailure(args: FailureEventArgs) {
console.log("Ajax request has failed");
}
return (
enablePersistence={true} ajaxSettings = {{
}} success={onSuccess.bind(this)} failure={onFailure.bind(this)} >
</div>
);
}

INDEX.JSX
INDEX.TSX
Note: The files of the current folder opened in the File manager can be refreshed programatically by
calling refreshFiles method.
Rendering component in right-to-left direction
It is possible to render the File Manager in right-to-left direction by setting the enableRtl API to true.
APP.JSX
{% raw %}
function App() {
<FileManagerComponent id="file" enableRtl={true} ajaxSettings={{
}}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<FileManagerComponent id="file" enableRtl={true} ajaxSettings = {{


}} >
</div>
);
}
INDEX.JSX
INDEX.TSX
Specifying the current path of the File Manager

The current path of the File Manager can be specified initially or dynamically using the path property.
The following code snippet demonstrates specifying the current path in File Manager on rendering.
{% raw %}
`ts
function App() {
return (
}} />
</div>
);
}
export default App;

File manager Creating a Next.js Application Using Syncfusion React Components
`
{% endraw %}
{% raw %}
`ts
function App() {
}}/>
</div>);
}
export default App;
`
{% endraw %}
Note: You can refer to our React File Manager feature tour page for its groundbreaking feature
representations. You can also explore our React File Manager example that shows you how to render
the File Manager in React.
Creating a Next.js Application Using Syncfusion React Components
This section provides a step-by-step guide for setting up a Next.js application and integrating the
Syncfusion React File manager component.
What is Next.js?
Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web
applications. It provides features such as server-side rendering, automatic code splitting, routing, and
API routes, making it an excellent choice for building modern web applications.
Prerequisites
Before getting started with the Next.js application, ensure the following prerequisites are met:
• Node.js 18.17 or later.

• The application is compatible with macOS, Windows, and Linux operating systems.
Create a Next.js application

To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn.
NPM
npx create-next-app@latest

YARN
yarn create next-app
Using one of the above commands will lead you to set up additional configurations for the project as
below:
1.Define the project name: Users can specify the name of the project directly. Let's specify the name of
the project as ej2-nextjs-file-manager.
CMD
√ What is your project named? » ej2-nextjs-file-manager
2.Select the required packages.

CMD
√ What is your project named? ... ej2-nextjs-file-manager
√ Would you like to use TypeScript? ... No / `Yes`
√ Would you like to use ESLint? ... No / `Yes`
√ Would you like to use Tailwind CSS? ... `No` / Yes
√ Would you like to use `src/` directory? ... No / `Yes`
√ Would you like to use App Router? (recommended) ... No / `Yes`
√ Would you like to customize the default import alias? ... `No`/ Yes
Creating a new Next.js app in D:\ej2-nextjs-file-manager.
3.Once complete the above mentioned steps to create ej2-nextjs-file-manager, navigate to the
directory using the below command:
CMD
cd ej2-nextjs-file-manager
The application is ready to run with default settings. Now, let's add Syncfusion components to the
project.
Install Syncfusion React packages
Syncfusion React component packages are available at npmjs.com. To use Syncfusion React components
in the project, install the corresponding npm package.
Here, the React File Manager component is used as an example. To install the React File manager
component in the project, use the following command:
NPM
npm install @syncfusion/ej2-react-filemanager --save
YARN
yarn add @syncfusion/ej2-react-filemanager

Import Syncfusion CSS styles

Syncfusion React components come with built-in themes, which are available in the installed packages.
It’s easy to adapt the Syncfusion React components to match the style of your application by referring to
one of the built-in themes.
Import the Material theme into the src/app/globals.css file and removed the existing styles in that file,
as shown below:
GLOBALS.CSS
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-File managers/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-
filemanager/styles/material.css";
To know more about built-in themes and CSS reference for individual components, refer to the themes
section.
Add Syncfusion React component
Follow the below steps to add the React File manager component to the Next.js project:
1.Define the File manager component in the src/app/page.tsx file, as shown below:
PAGE.TSX
'use client'
function App() {
let ajaxSettings: object = {
getImageUrl: hostUrl + "api/FileManager/GetImage"
};
return (
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings =
{ajaxSettings} >
</div>
);
}
export default App;
Run the application

To run the application, use the following command:

File manager User interface in React File manager component
NPM
npm run dev
YARN
yarn run dev
To learn more about the functionality of the File manager component, refer to the documentation.
View the NEXT.js File manager sample in the GitHub repository.
User interface in React File manager component
The file manager UI is comprised of several sections like view, toolbar, breadcrumb, context menu, and
so on. The UI of the file manager is enhanced with injectable modules like Details View for browsing
files and folders in a grid, Navigation Pane for folder navigation, and Toolbar for file operations. The
file manager with all feature modules have the following sections in its UI.
• View (Large Icons view for browsing files and folders),

• Toolbar (For direct access to file operations),
• Navigation Pane (For easy navigation between folders),
• Breadcrumb (For parent folder navigations),
• Context Menu (For accessing file operations).
The basic file manager is a light weight component with all the basic functions. The basic file manager
have the following sections in its UI to browse files and folders and manage them with file operations.
• View (Large Icons view for browsing files and folders),

• Breadcrumb (For parent folder navigations),
• Context Menu (For accessing file operations).

Toolbar
The toolbar is an injectable module in file manager. It should be injected before rendering the file
manager to avail its functionality. It is present at the top of the file manager. Toolbar provides easy
access to the file operations using different buttons.
If the toolbar items exceed the size of the toolbar, then the exceeding toolbar size will be moved to
toolbar popup with a dropdown button at the end of toolbar.
*Refer Toolbar section in file operations to know more about the buttons present in toolbar*.
Files and folders navigation

The file manager provides navigation between files and folders using the following two options.

• Navigation Pane
• Breadcrumb
Navigation pane
The navigation pane is an injectable module so, it should be injected before rendering the file manager
to use its functionality.
It displays the folder hierarchy of the file system and provides easy navigation to the desired folder.
Using navigationPaneSettings minimum and maximum width of the navigation pane can be changed.
The navigation pane can be shown or hidden using the visible option in the navigationPaneSettings.
BreadCrumb
The file manager provides breadcrumb for navigating to the parent folders. The breadcrumb in the file
manager is responsible for resizing.
Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the
starting of the breadcrumb to hold the parent folders adjacent to root.
View
View is the section where the files and folders are displayed for the user to browse. The file manager has
two types of views to display the files and folders.
• Large Icons View

• Details View
The large icons view is the default starting view in the file manager. The view can be changed by using
the toolbar view button or by using the view menu in context menu. The view API can also be used to
change the initial view of the file manager.
Large icons view
In the large icons view, the thumbnail icons will be shown in a larger size, which displays the data in a
form that best suits their content. For image and video type files, a preview will be displayed. Extension
thumbnails will be displayed for other type files.

Details view
Details view is an injectable module in the file manager so, it should be injected before rendering the file
manager to avail its functionality. In the details view, the files are displayed in a sorted list order. This
file list comprises of several columns of information about the files such as Name, Date Modified, Type,
and Size. Each file has its own small icon representing the file type. Additional columns can be added
using detailsViewSettings API. The details view allows you to perform sorting using column header.
Context menu
The context menu appears on user interaction such as right-click. The file manager is provided with
context menu support to perform list of file operations with the files and folders. Context menu appears
with varying menu items based on the targets such as file, folder (including navigation pane folders),
and layout (empty area in view).
Context menu can be customized using the contextMenuSettings, menuOpen, and menuClick events.
*Refer Context Menu section in file operations to know more about the menu items present in context
menu*.

File manager File operations in React File manager component
File operations in React File manager component

The file manager component is used to browse, manage, and organize the files and folders in a file
system through a web application. All basic file operations like creating a new folder, uploading and
downloading of files in the file system, and deleting and renaming of existing files and folders are
available in the file manager component. Additionally, previewing of image files is also provided in the
file manager component.
The following table represents the basic operations available in the file manager and their
corresponding functions.
|Operation Name|Function|
|----|----|
|read|Read the details of files or folders available in the given path from the file system, to display the
files for the user to browse the content.|
|create|Creates a new folder in the current path of the file system.|
|delete|Removes the file or folder from the file server.|
|rename|Rename the selected file or folder in the file system.|
|search|Searches for items matching the search string in the current and child directories.|
|details|Gets the detail of the selected item(s) from the file server.|
|copy|Copy the selected file or folder in the file system.|
|move|Cut the selected file or folder in the file server.|
|upload|Upload files to the current path or directory in the file system.|
|download|Downloads the file from the server and the multiple files can be downloaded as ZIP files.|
The CreateFolder, Remove, and Rename actions will be reflected in the file manager only after the
successful response from the server.

Folder Upload support

To perform the directory(folder) upload in File Manager, set directoryUpload as true within the
uploadSettings property. The directory upload feature is supported for the following file service
providers:
• Physical file service provider.

• Azure file service provider.
• NodeJS file service provider.
• Amazon file service provider.
In the following example, directory upload is enabled/disabled on DropDownButton selection.

APP.JSX
{% raw %}
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
/**
* File Manager folder upload sample
*/
function App() {
let fmObj;
let items = [{ text: 'Folder' }, { text: 'Files' }];
document.getElementById('file_tb_upload').onclick = (e) => {
e.stopPropagation();
};
let drpDownBtn = new DropDownButton({
items: items,
select: (args) => {
if (args.item.text === 'Folder') {
fmObj.uploadSettings.directoryUpload = true;
}
else {
fmObj.uploadSettings.directoryUpload = false;
}
setTimeout(function () {
let uploadBtn = document.querySelector('.e-file-select-
wrap button');
uploadBtn.click();
}, 100);
},
}, '#file_tb_upload');
}
return (<div>
<FileManagerComponent id="file" ref={(scope) => { fmObj =
scope; }} ajaxSettings={{

}} created={onCreated.bind(this)}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar
import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
/**
* File Manager folder upload sample
*/
function App() {
let fmObj: FileManagerComponent;
let items: ItemModel[] = [{ text: 'Folder' }, { text: 'Files' }];
(document.getElementById('file_tb_upload') as HTMLElement).onclick =
(e) => {
e.stopPropagation();
};
let drpDownBtn: DropDownButton = new DropDownButton({
items: items,
select: (args) => {
if (args.item.text === 'Folder') {
fmObj.uploadSettings.directoryUpload = true;
} else {
fmObj.uploadSettings.directoryUpload = false;
}
setTimeout(function () {
let uploadBtn: HTMLElement = document.querySelector('.e-file-
select-wrap button');
uploadBtn.click();
}, 100);
},
},
'#file_tb_upload'
);
}
return(
<div>
<FileManagerComponent id="file" ref={(scope) => { fmObj =
scope; }} ajaxSettings = {{
}}

created={onCreated.bind(this)}>
</div>
</div>
);
}
export default App;
{% endraw %}
INDEX.JSX
INDEX.TSX
Physical file service provider

To achieve the directory upload in the physical file service provider, use the below code snippet in
IActionResult Upload method in the Controllers/FileManagerController.cs file.
`ts
[Route("Upload")]
public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action)
{
FileManagerResponse uploadResponse;
foreach (var file in uploadFiles)
{
var folders = (file.FileName).Split('/');
// checking the folder upload
if (folders.Length > 1)
{
for (var i = 0; i < folders.Length - 1; i++)
{
string newDirectoryPath = Path.Combine(this.basePath + path, folders[i]);
if (!Directory.Exists(newDirectoryPath))
{

this.operation.ToCamelCase(this.operation.Create(path, folders[i]));
}
path += folders[i] + "/";
}
}
}
uploadResponse = operation.Upload(path, uploadFiles, action, null);
if (uploadResponse.Error != null)
{
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase =
uploadResponse.Error.Message;
}
return Content("");
}
`
Refer to the GitHub for more details
And also add the below code snippet in FileManagerResponse Upload method in
Models/PhysicalFileProvider.cs file.
`ts
string[] folders = name.Split('/');
string fileName = folders[folders.Length - 1];
var fullName = Path.Combine((this.contentRootPath + path), fileName);
`
Refer to the GitHub for more details.
Azure file service provider
For Azure file service provider, no customizations are needed for directory upload with server side and
this will work with the below default upload method code.
NodeJS file service provider
To perform the directory upload in the NodeJS file service provider, use the below code snippet in
app.post method in the filesystem-server.js file.
`ts

var folders = (req.body.filename).split('/');

var filepath = req.body.path;
var uploadedFileName = folders[folders.length - 1];
if (folders.length > 1)
{
for (var i = 0; i < folders.length - 1; i++)
{
var newDirectoryPath = path.join(contentRootPath + filepath, folders[i]);
if (!fs.existsSync(newDirectoryPath)) {
fs.mkdirSync(newDirectoryPath);
(async () => {
await FileManagerDirectoryContent(req, res, newDirectoryPath).then(data => {
response = { files: data };
response = JSON.stringify(response);
});
})();
}
filepath += folders[i] + "/";
}
fs.rename('./' + uploadedFileName, path.join(contentRootPath, filepath + uploadedFileName), function
(err) {
if (err) {
if (err.code != 'EBUSY') {
errorValue.message = err.message;
errorValue.code = err.code;
}
}
});
}
`

Amazon file service provider

To perform the directory upload in the Amazon file service provider, use the below code snippet in
IActionResult AmazonS3Upload method in the Controllers/AmazonS3ProviderController.cs file.
`ts
foreach (var file in uploadFiles)
{
var folders = (file.FileName).Split('/');
if (folders.Length > 1)
{
for (var i = 0; i < folders.Length - 1; i++)
{
if (!this.operation.checkFileExist(path, folders[i]))
{
this.operation.ToCamelCase(this.operation.Create(path, folders[i], dataObject));
}
path += folders[i] + "/";
}
}
}
`
And also add the below code snippet in AsyncUpload method in Models/AmazonS3FileProvider.cs
file.
`ts
string[] folders = file.FileName.Split('/');
string name = folders[folders.Length - 1];
`
File operation request and response Parameters
The default parameters available in file operation request from the file manager and the corresponding
response parameters required by the file manager are listed as follows.
Read
The following table represents the request parameters of read operations.
|Parameter|Type|Default|Explanation|

|----|----|----|----|
|action|String|read|Name of the file operation.|
|path|String|-|Relative path from which the data has to be read.|
|showHiddenItems|Boolean|-|Defines show or hide the hidden items.|
|data|FileManagerDirectoryContent|-|Details about the current path (directory).|
*Refer File request and response contents for the contents of data*.
Example:
`ts
{
action: "read",
path: "/",
showHiddenItems: false,
data: []
}
`
The following table represents the response parameters of read operations.
|----|----|----|----|
|cwd|FileManagerDirectoryContent|-|Path (Current Working Directory) details.|
|files|FileManagerDirectoryContent[]|-|Details of files and folders present in given path or directory.|
|error|ErrorDetails|-|Error Details|
*Refer File request and response contents for the contents of cwd, files, and error*.
Example:
`ts
{
cwd:
{
name:"Download",
size:0,
dateModified:"2019-02-28T03:48:19.8319708+00:00",
dateCreated:"2019-02-27T17:36:15.812193+00:00",
hasChild:false,
isFile:false,

type:"",
filterPath:"//Download//"
},
files:[
{
name:"Sample Work Sheet.xlsx",
size:6172,
dateModified:"2019-02-27T17:23:50.9651206+00:00",
dateCreated:"2019-02-27T17:36:15.8151955+00:00",
hasChild:false,
isFile:true,
type:".xlsx",
filterPath:"//Download//"
}
],
error:null,
details:null
}
`
Create
The following table represents the request parameters of create operations.
|----|----|----|----|
|action|String|create|Name of the file operation.|
|path|String|-|Relative path in which the folder has to be created.|
|name|String|-|Name of the folder to be created.|
*Refer File request and response contents for the contents of data*
Example:
`ts
{
action: "create",
data: [

{
dateCreated: "2019-02-27T17:36:15.6571949+00:00",
dateModified: "2019-03-12T10:17:31.8505975+00:00",
filterPath: "/",
hasChild: true,
isFile: false,
name: files,
nodeId: "fe_tree",
size: 0,
type: ""
}
],
name: "Hello",
path: "/"
}
`
The following table represents the response parameters of create operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of the created folder|
*Refer File request and response contents for the contents of files and error*.
Example:
`ts
{
cwd: null,
files: [
{
dateCreated: "2019-03-15T10:25:05.3596171+00:00",
dateModified: "2019-03-15T10:25:05.3596171+00:00",
filterPath: null,
hasChild: false,
isFile: false,

name: "New",
size: 0,
type: ""
}
],
details: null,
error: null
}
`
Rename
The following table represents the request parameters of rename operations.
|----|----|----|----|
|action|String|rename|Name of the file operation.|
|path|String|-|Relative path in which the item is located.|
|name|String|-|Current name of the item to be renamed.|
|newname|String|-|New name for the item.|
|data|FileManagerDirectoryContent|-|Details of the item to be renamed.|
Example:
`ts
{
action: "rename",
data: [
{
dateCreated: "2019-03-20T05:22:34.621Z",
dateModified: "2019-03-20T08:45:56.000Z",
filterPath: "/Pictures/Nature/",
hasChild: false,
iconClass: "e-fe-image",
isFile: true,
name: "seaviews.jpg",
size: 95866,

type: ".jpg"
}
],
newname: "seaview.jpg",
path: "/Pictures/Nature/"
}
`
The following table represents the response parameters of rename operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of the renamed item.|
Example:
`ts
{
cwd:null,
files:[
{
name:"seaview.jpg",
size:95866,
dateModified:"2019-03-20T08:45:56+00:00",
dateCreated:"2019-03-20T05:22:34.6214847+00:00",
hasChild:false,
isFile:true,
type:".jpg",
filterPath:"//Pictures//Nature//seaview.jpg"
}
],
error:null,
details:null
}

`
Delete
The following table represents the request parameters of delete operations.
|----|----|----|----|
|action|String|delete|Name of the file operation.|
|path|String|-|Relative path where the items to be deleted are located.|
|names|String[]|-|List of the items to be deleted.|
|data|FileManagerDirectoryContent|-|Details of the item to be deleted.|
Example:
`ts
{
action: "delete",
path: "/Hello/",
names: ["New"],
data: []
}
`
The following table represents the response parameters of delete operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details about the deleted item(s).|
Example:
`ts
{
cwd: null,
details: null,
error: null,
files: [
{

dateCreated: "2019-03-15T10:13:30.346309+00:00",
dateModified: "2019-03-15T10:13:30.346309+00:00",
filterPath: "/Hello/folder",
hasChild: true,
isFile: false,
name: "folder",
size: 0,
type: ""
}
]
}
`
Details
The following table represents the request parameters of details operations.
|----|----|----|----|
|action|String|details|Name of the file operation.|
|path|String|-|Relative path where the items are located.|
|names|String[]|-|List of the items to get details.|
|data|FileManagerDirectoryContent|-|Details of the selected item.|
Example:
`ts
{
action: "details",
path: "/FileContents/",
names: ["All Files"],
data: []
}
`
The following table represents the response parameters of details operations.
|----|----|----|----|

|details|FileManagerDirectoryContent|-|Details of the requested item(s).|

*Refer File request and response contents for the contents of details and error*.
Example:
`ts
{
cwd:null,
files:null,
error:null,
details:
{
name:"All Files",
location:"//Files//FileContents//All Files",
isFile:false,
size:"679.8 KB",
created:"3/8/2019 10:18:37 AM",
modified:"3/8/2019 10:18:39 AM",
multipleFiles:false
}
}
`
Search
The following table represents the request parameters of search operations.
|----|----|----|----|
|action|String|search|Name of the file operation.|
|path|String|-|Relative path to the directory where the files should be searched.|
|caseSensitive|Boolean|-|Defines search is case sensitive or not.|
|searchString|String|-|String to be searched in the directory.|
|data|FileManagerDirectoryContent|-|Details of the searched item.|
Example:
`ts

{
action: "search",
path: "/",
searchString: "nature",
caseSensitive: false,
data: []
}
`
The following table represents the response parameters of search operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Files and folders in the searched directory that matches the
search input.|
*Refer File request and response contents for the contents of cwd, files and error.*
Example:
`ts
{
cwd:
{
name:files,
size:0,
dateModified:"2019-03-15T10:07:00.8658158+00:00",
dateCreated:"2019-02-27T17:36:15.6571949+00:00",
hasChild:true,
isFile:false,
type:"",
filterPath:"//"
},
files:[
{

name:"Nature",
size:0,
dateModified:"2019-03-08T10:18:42.9937708+00:00",
dateCreated:"2019-03-08T10:18:42.5907729+00:00",
hasChild:true,
isFile:false,
type:"",
filterPath:"//FileContents//Nature"
}
],
error:null,
details:null
}
`
Copy
The following table represents the request parameters of copy operations.
|----|----|----|----|
|action|String|copy|Name of the file operation.|
|path|String|-|Relative path to the directory where the files should be copied.|
|names|String[] |-|List of files to be copied.|
|targetPath|String|-|Relative path where the items to be pasted are located.|
|data|FileManagerDirectoryContent|-|Details of the copied item.|
|renameFiles|String[]|-|Details of the renamed item.|
Example:
`ts
{
action: "copy",
path: "/",
names: ["6.png"],
renameFiles: ["6.png"],
targetPath: "/Videos/"
}

`
The following table represents the response parameters of copy operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of copied files or folders|
Example:
`ts
{
cwd:null,
files:[
{
path:null,
action:null,
newName:null,
names:null,
name:"justin.mp4",
size:0,
previousName:"album.mp4",
dateModified:"2019-06-21T06:58:32+00:00",
dateCreated:"2019-06-24T04:22:14.6245618+00:00",
hasChild:false,
isFile:true,
type:".mp4",
id:null,
filterPath:"//"
}
],
error:null,
details:null
}

`
Move
The following table represents the request parameters of move operations.
|----|----|----|----|
|action|String|move|Name of the file operation.|
|names|String[] |-|List of files to be moved.|
|data|FileManagerDirectoryContent|-|Details of the moved item.|
Example:
`ts
{
action: "move",
path: "/",
names: ["6.png"],
renameFiles: ["6.png"],
targetPath: "/Videos/"
}
`
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of cut files or folders|
Example:
`ts
{
cwd:null,
files:[

{
path:null,
action:null,
newName:null,
names:null,
name:"justin biber.mp4",
size:0,
previousName:"justin biber.mp4",
dateModified:"2019-06-21T06:58:32+00:00",
dateCreated:"2019-06-24T04:26:49.2690476+00:00",
hasChild:false,
isFile:true,
type:".mp4",
id:null,
filterPath:"//Videos//"
}
],
error:null,
details:null
}
`
Upload
The following table represents the request parameters of Upload operations.
|----|----|----|----|
|action|String|Save|Name of the file operation.|
|path|String|-|Relative path to the location where the file has to be uploaded.|
|uploadFiles|IList<IFormFile>|-|File that are uploaded.|
Example:
`ts
uploadFiles: (binary),
path: /,
action: Save,

data: {
path:null,
action:null,
newName:null,
names:null,
name:"Downloads",
size:0,
previousName:null,
dateModified:"2019-07-22T11:23:46.7153977 00:00",
dateCreated:"2019-07-22T11:26:13.9047229 00:00",
hasChild:false,
isFile:false,
type:"",
id:null,
filterPath:"//",
targetPath:null,
renameFiles:null,
uploadFiles:null,
caseSensitive:false,
searchString:null,
showHiddenItems:false,
fmiconClass:null,
fmid:"fetree1",
fmpId:null,
fmselected:false,
fmicon:null,
data:null,
targetData:null,
permission:null
}
`
The upload response is an empty string.

Download
The following table represents the request parameters of download operations.
|----|----|----|----|
|action|String|download|Name of the file operation|
|path|String|-|Relative path to location where the files to download are present.|
|names|String[]|-|Name list of the items to be downloaded.|
|data|FileManagerDirectoryContent|-|Details of the download item.|
Example:
`ts
{
action:"download",
path:"/",
names:["1.png"],
data:[
{
path:null,
action:null,
newName:null,
names:null,
name:"1.png",
size:49792,
previousName:null,
dateModified:"2019-07-22T12:15:45.0972405+00:00",
dateCreated:"2019-07-22T12:15:45.0816042+00:00",
hasChild:false,
isFile:true,
type:".png",
id:null,
filterPath:"//",
targetPath:null,
renameFiles:null,
uploadFiles:null,

caseSensitive:false,
searchString:null,
showHiddenItems:false,
fmiconClass:"e-fe-image",
fmid:null,
fmpId:null,
fmselected:false,
fmicon:null,
data:null,
targetData:null,
permission:null,
fmcreated:"2019-07-22T12:15:45.081Z",
fmmodified:"2019-07-22T12:15:45.097Z",
fmimageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage?path=/1.png",
fmimageAttr:
{
alt:"1.png"
},
fmhtmlAttr:
{
class:"e-large-icon",
title:"1.png"
}
}
]
}
`
Downloads the requested items from the file server in response.
GetImage
The following table represents the request parameters of GetImage operations.
|----|----|----|----|
|path|String|-|Relative path to the image file|

Return the image as a file stream in response.

The request from the file manager can be customized using the beforeSend event. Additional
information can be passed to the file manager in file operation response and can be used in
customization.
File request and response contents
The following table represents the contents of data, cwd, and files in the file manager request and
response.
|----|----|----|----|
|name|String|-|File name|
|dateCreated|String|-|Date in which file was created (UTC Date string).|
|dateModified|String|-|Date in which file was last modified (UTC Date string).|
|filterPath|String|-|Relative path to the file or folder.|
|hasChild|Boolean|-|Defines this folder has any child folder or not.|
|isFile|Boolean|-|Say whether the item is file or folder.|
|size|Number|-|File size|
|type|String|-|File extension|
The following table represents the contents of error in the file manager request and response.
|----|----|----|----|
|code|String|-|Error code|
|message|String|-|Error message|
|fileExists|String[]|-|List of duplicate file names|
The following table represents the contents of details in the file manager request and response.
|----|----|----|----|
|name|String|-|File name|
|dateCreated|String|-|Date in which file was created (UTC Date string).|
|dateModified|String|-|Date in which file was last modified (UTC Date string).|
|filterPath|String|-|Relative path to the file or folder.|
|hasChild|Boolean|-|Defines this folder has any child folder or not.|
|isFile|Boolean|-|Say whether the item is file or folder.|
|size|Number|-|File size|
|type|String|-|File extension|

|multipleFiles|Boolean|-|Say whether the details are about single file or multiple files.|
Action Buttons
The file manager has several menu buttons to access the file operations. The list of menu buttons
available in the file manager is given in the following table.
|Menu Button|Behaviour|
|----|----|
|SortBy| Opens the sub menu to choose the sorting order and sorting parameter.|
|View| Opens the sub menu to choose the View.|
|Open| Navigates to the selected folder. Opens the preview for image files.|
|Refresh| Initiates the read operation for the current directory and displays the updated directory
content.|
|NewFolder| Opens the new folder dialog box to receive the name for the new folder.|
|Rename| Opens the rename dialog box to receive the new name for the selected item.|
|Delete| Opens the delete dialog box to confirm the removal of the selected items from the file
system.|
|Upload| Opens the upload box to select the items to upload to the file system.|
|Download| Downloads the selected item(s).|
|Details| Get details about the selected items and display them in details dialog box.|
|SelectAll| Selects all the files and folders displayed in the view section.|
The action menu buttons are present in the toolbar and context menu. The toolbar contains the buttons
based on the selected items count, while the context menu will appear with a list based on the target.
Toolbar
The toolbar can be divided into two sections as right and left. Whenever the toolbar buttons exceed the
size, the buttons present in the left section of the toolbar will be moved to the toolbar popup.
The following table provides the toolbar buttons that appear based on the selection.

Selected Items Count Left section Right section
0 (none of the item ) SortBy Refresh NewFolder Upload View Details
1 (single item selected) Delete Download* Rename Selected items count View* Details
>1 (multiple selection) Delete Download Selected items count View* Details
Context menu
The following table provides the default context menu item and the corresponding target areas.


File manager Views in React File manager component
Menu Name Menu Items Target

Empty space in the view section (details
SortBy View Refresh NewFolder Upload
Layout view and large icon view area). Empty folder
Details* Select all
content.
* Folders in treeview, details view, and large
Folders Open Delete Rename Downloads* Details
icon view.
Files Open Delete Rename Downloads* Details * Files in details view and large icon view.
Views in React File manager component

View is the section where the files and folders are displayed for the user to browse. The view API can
also be used to change the initial view of the file manager.
The file manager has two types of views to display the files and folders.
• LargeIcons View
• Details View
LargeIcons View
By Default, File Manager is rendered with largeicons view. The following example demonstrate this.
APP.JSX
{% raw %}
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar
function App() {
let fileObj;
return (<div>
<FileManagerComponent ref={s => (fileObj = s)} id="file"
ajaxSettings={{
}}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}


function App() {
let fileObj: FileManagerComponent;
return (
<div>
<FileManagerComponent ref={ s => (fileObj = s as
FileManagerComponent)} id="file"
ajaxSettings = {{
}} >
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX
Details View
Details view is an injectable module in the file manager so, it should be injected before rendering the file
manager to avail its functionality. The default appearance of the file manager can be changed from
largeicons to details view by using the view property. The following example demonstrate the file
manager with details view.
APP.JSX
{% raw %}
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar
function App() {
let fileObj;

return (<div>
view="Details" ajaxSettings={{
}}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<div>
FileManagerComponent)} id="file" view="Details"
ajaxSettings = {{
}} >
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX

File manager Customization in React File manager component

Customization in React File manager component

The file manager component allows customizing its functionalities like, context menu, searching,
uploading, toolbar using APIs. Given below are some of the functionalities that can be customized in the
File Manager,
• Context menu customization

• Details view customization
• Navigation pane customization
• Show/Hide file extension
• Show/Hide hidden items
• Show/Hide thumbnail images in large icons view
• Toolbar customization
• Upload customization
• Tooltip customization
Context menu customization

The context menu settings like, items to be displayed on files, folders and layout click and visibility can
be customized using contextMenuSettings property.
APP.JSX
{% raw %}
function App() {
let fileObj;
return (<div>
}} contextMenuSettings={{
file: ['Open', '|', 'Details'],
folder: ['Open', '|', 'Details'],
layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|']
}}>
</div>
</div>);
}
export default App;
{% endraw %}

APP.TSX
{% raw %}
function App() {
return (
<div>
ajaxSettings = {{
}}
contextMenuSettings = {{
file: ['Open', '|', 'Details'],
folder: ['Open', '|', 'Details'],
layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|']
}} >
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX
Details view customization

The details view settings like, column width, header text, template for each field can be customized
using detailsViewSettings property.
APP.JSX
{% raw %}


function App() {
<FileManagerComponent id="file" view="Details" ajaxSettings={{
}} detailsViewSettings={{
columns: [
{ field: 'name', headerText: 'File Name', minWidth: 120,
width: 'auto', customAttributes: { class: 'e-fe-grid-name' }, template:
'${name}' },
{ field: 'size', headerText: 'File Size', minWidth: 50,
width: '110', template: '${size}' },
{ field: '_fm_modified', headerText: 'Date Modified',
minWidth: 50, width: '190' }
]
}}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<FileManagerComponent id="file" view="Details" ajaxSettings = {{
}}
detailsViewSettings ={
{
columns : [
{field: 'name', headerText: 'File Name', minWidth: 120, width:
'auto', customAttributes: { class: 'e-fe-grid-name' },template: '${name}'},
{field: 'size', headerText: 'File Size',minWidth: 50, width:
'110', template: '${size}'},
{ field: '_fm_modified', headerText: 'Date Modified',minWidth:
50, width: '190'}
]
}

}>
</div>
);
}
INDEX.JSX
INDEX.TSX
Navigation pane customization

The navigation pane settings like, minimum and maximum width and visibility can be customized using
navigationPaneSettings property.
APP.JSX
{% raw %}
function App() {
}} navigationPaneSettings={{ maxWidth: '850px', minWidth: '140px',
visible: true }}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}


function App() {
return (
}} navigationPaneSettings ={{ maxWidth: '850px', minWidth:
'140px', visible: true }} >
</div>
);
}
INDEX.JSX
INDEX.TSX
Show/Hide file extension

The file extensions are displayed in the File Manager by default. This can be hidden by disabling the
showFileExtension property.
In File Manager fileLoad and fileOpen events are triggered before the file/folder is rendered and before
the file/folder is opened respectively. These events can be utilized to perform operations before a
file/folder is rendered or opened.
APP.JSX
{% raw %}
function App() {
function onBeforeFileLoad(args) {
console.log(args.fileDetails.name + " is loading");
}
function onBeforeFileOpen(args) {
console.log(args.fileDetails.name + " is opened");
}


showFileExtension={false} ajaxSettings={{
}} fileLoad={onBeforeFileLoad.bind(this)}
fileOpen={onBeforeFileOpen.bind(this)}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
function onBeforeFileLoad(args: any) {
console.log(args.fileDetails.name + " is loading");
}
function onBeforeFileOpen(args: any) {
console.log(args.fileDetails.name + " is opened");
}
return (
showFileExtension={false} ajaxSettings = {{
}} fileLoad={onBeforeFileLoad.bind(this)}
fileOpen={onBeforeFileOpen.bind(this)} >
</div>
);
}
INDEX.JSX
INDEX.TSX


Show/Hide hidden items

The File Manager provides support to show/hide the hidden items by enabling/disabling the
showHiddenItems property.
APP.JSX
{% raw %}
function App() {
showHiddenItems={true} ajaxSettings={{
}}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
showHiddenItems={true} ajaxSettings = {{
}} >
</div>
);
}

INDEX.JSX
INDEX.TSX
Show/Hide thumbnail images in large icons view

The thumbnail images are displayed in the File Manager's large icons view by default. This can be hidden
by disabling the showThumbnail property.
APP.JSX
{% raw %}
function App() {
showThumbnail={false} ajaxSettings={{
}}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
showThumbnail={false} ajaxSettings = {{


}} >
</div>
);
}
INDEX.JSX
INDEX.TSX
Toolbar customization
The toolbar settings like, items to be displayed in toolbar and visibility can be customized using
toolbarSettings property.
APP.JSX
{% raw %}
function App() {
let fileObj;
return (<div>
}} toolbarSettings={{ items: ['NewFolder', 'Refresh', 'View',
'Details'] }}>
</div>
</div>);
}
export default App;

{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<div>
ajaxSettings = {{
}}
toolbarSettings = {
{ items: ['NewFolder', 'Refresh', 'View', 'Details']}
} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]}
/>
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX
See Also
• How to add new items or customize default items

Upload customization
The upload settings like, minimum and maximum file size and enabling auto upload can be customized
using uploadSettings property.
APP.JSX
{% raw %}
function App() {
}} uploadSettings={{ maxFileSize: 233332, minFileSize: 120,
autoUpload: true }}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
}} uploadSettings={{ maxFileSize: 233332, minFileSize: 120,
autoUpload: true}}>
</div>
);
}
INDEX.JSX


INDEX.TSX
Tooltip customization
The tooltip value can be customized by adding extra content to the title of the toolbar, navigation pane,
details view and large icons of the file manager element.
APP.JSX
{% raw %}
import { getValue, select } from '@syncfusion/ej2-base';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let fileObj;
let tooltipObj;
function onTooltipBeforeRender(args) {
const buttonId = select('button', args.target).id;
let description = '';
switch (buttonId) {
case fileObj.element.id + '_tb_newfolder':
description = 'Create a new folder';
break;
case fileObj.element.id + '_tb_upload':
description = 'Upload new files';
break;
case fileObj.element.id + '_tb_cut':
description = 'Cut files and folders from the current
location';
break;
case fileObj.element.id + '_tb_copy':
description = 'Copy files and folders from the current
location';
break;
case fileObj.element.id + '_tb_paste':
description = 'Paste files and folders in the current
location';
break;
case fileObj.element.id + '_tb_delete':
description = 'Delete selected files and folders';
break;
case fileObj.element.id + '_tb_download':
description = 'Download selected files and folders';
break;
case fileObj.element.id + '_tb_rename':

description = 'Rename selected file or folder';

break;
case fileObj.element.id + '_tb_sortby':
description = 'Change the file sorting order';
break;
case fileObj.element.id + '_tb_refresh':
description = 'Refresh the current location';
break;
case fileObj.element.id + '_tb_selection':
description = 'Following items are currently selected:';
for (let i = 0; i < fileObj.selectedItems.length; i++) {
description = description + '</br>' +
fileObj.selectedItems[i];
}
break;
case fileObj.element.id + '_tb_view':
description = 'Switch the layout view';
break;
case fileObj.element.id + '_tb_details':
description = 'Get the details of the seletced items';
break;
default:
description = '';
break;
}
tooltipObj.content = args.target.getAttribute('title') + '</br>' +
description;
}
function fileLoad(args) {
const target = args.element;
if (args.module === 'DetailsView') {
const element = select('[title]', args.element);
const title = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
element.setAttribute('title', title);
}
else if (args.module === 'LargeIconsView') {
const title = getValue('name', args.fileDetails) +
target.setAttribute('title', title);
}
}
return (<TooltipComponent id="template-tootip" ref={s => (tooltipObj =
s)} target="#file_toolbar [title]" beforeRender={onTooltipBeforeRender}>
<div className="filemanager-container">
{/* Filemanager element */}
ajaxSettings={{
getImageUrl: hostUrl + 'api/FileManager/GetImage',
url: hostUrl + 'api/FileManager/FileOperations'
}} fileLoad={fileLoad}>
<Inject services={[NavigationPane, DetailsView,
Toolbar]}/>
</div>

</TooltipComponent>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { getValue, select } from '@syncfusion/ej2-base';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-
popups';
function App() {
let tooltipObj: TooltipComponent;
function onTooltipBeforeRender(args: TooltipEventArgs): void {
const buttonId: string = select('button', args.target).id;
let description: string = '';
switch (buttonId) {
case fileObj.element.id + '_tb_newfolder':
description = 'Create a new folder';
break;
case fileObj.element.id + '_tb_upload':
description = 'Upload new files';
break;
case fileObj.element.id + '_tb_cut':
description = 'Cut files and folders from the current
location';
break;
case fileObj.element.id + '_tb_copy':
description = 'Copy files and folders from the current
location';
break;
case fileObj.element.id + '_tb_paste':
description = 'Paste files and folders in the current
location';
break;
case fileObj.element.id + '_tb_delete':
description = 'Delete selected files and folders';
break;
case fileObj.element.id + '_tb_download':
description = 'Download selected files and folders';
break;
case fileObj.element.id + '_tb_rename':
description = 'Rename selected file or folder';
break;
case fileObj.element.id + '_tb_sortby':
description = 'Change the file sorting order';
break;
case fileObj.element.id + '_tb_refresh':
description = 'Refresh the current location';
break;
case fileObj.element.id + '_tb_selection':

description = 'Following items are currently selected:';

for (let i: number = 0; i < fileObj.selectedItems.length;
i++) {
description = description + '</br>' +
fileObj.selectedItems[i];
}
break;
case fileObj.element.id + '_tb_view':
description = 'Switch the layout view';
break;
case fileObj.element.id + '_tb_details':
description = 'Get the details of the seletced items';
break;
default:
description = '';
break;
}
tooltipObj.content = args.target.getAttribute('title') + '</br>' +
description;
}
function fileLoad(args: any): void {
const target: Element = args.element;
if (args.module==='DetailsView') {
const element: Element = select('[title]', args.element);
const title: string = getValue('name', args.fileDetails) +
element.setAttribute('title', title);
} else if (args.module==='LargeIconsView') {
const title: string = getValue('name', args.fileDetails) +
target.setAttribute('title', title);
}
}
return (
<TooltipComponent id="template-tootip" ref={ s => (tooltipObj = s as
TooltipComponent)} target="#file_toolbar [title]"
beforeRender={onTooltipBeforeRender} >
<div className="filemanager-container">
{/* Filemanager element */}
ajaxSettings = {{
downloadUrl: hostUrl +'api/FileManager/Download',
getImageUrl: hostUrl +'api/FileManager/GetImage',
uploadUrl: hostUrl +'api/FileManager/Upload',
<Inject services={[ NavigationPane, DetailsView,
Toolbar]} />
</div>
</TooltipComponent>
);
}
export default App;
{% endraw %}

File manager Multiple selection in React File manager component
INDEX.JSX
INDEX.TSX
Multiple selection in React File manager component

The file manager allows you to select multiple files by enabling the allowMultiSelection property
(enabled by default). The multiple selection can be done by pressing the Ctrl key or Shift key and
selecting the files. The check box can also be used to do multiple selection. Ctrl + A can be used to
select all files in the current directory. The fileSelect event will be triggered when the items of file
manager control is selected or unselected.
APP.JSX
{% raw %}
function App() {
function onFileSelect(args) {
console.log(args.fileDetails.name + " has been " + args.action +
"ed");
}
<FileManagerComponent id="file" view="Details"
allowMultiSelection={true} ajaxSettings={{
}} fileSelect={onFileSelect.bind(this)}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}

File manager Drag and drop in React File manager component

function App() {
function onFileSelect(args: any) {
console.log(args.fileDetails.name + " has been " + args.action + "ed");
}
return (
<FileManagerComponent id="file" view="Details"
allowMultiSelection={true} ajaxSettings = {{
}} fileSelect={onFileSelect.bind(this)} >
</div>
);
}
INDEX.JSX
INDEX.TSX
Note: The File Manager has support to select files and folders initially or dynamically by specifying their
names in selectedItems property.
Drag and drop in React File manager component
The file manager allows files or folders to be moved from one folder to another by using the
allowDragAndDrop property. It also supports uploading a file by dragging it from Windows Explorer to
FileManager control. You can enable or disable this support by using the allowDragAndDrop property of
file manager.
The event triggered in drag and drop support are
• fileDragStart - Triggers when the file/folder dragging is started.

• fileDragging - Triggers while dragging the file/folder.
• fileDragStop - Triggers when the file/folder is about to be dropped at the target.
• fileDropped - Triggers when the file/folder is dropped.
APP.JSX

File manager Drag and drop in React File manager component
{% raw %}
function App() {
let fileObj;
// File Manager Drag start event
function onFileDragStart(args) {
console.log("File Drag Start");
}
function onFileDragStop(args) {
console.log("File Drag Stop");
}
function onFileDragging(args) {
console.log("File Dragging");
}
function onFileDropped(args) {
console.log("File Dropped");
}
return (<div>
allowDragAndDrop={true} ajaxSettings={{
}} fileDragStart={onFileDragStart.bind(this)}
fileDragStop={onFileDragStop.bind(this)}
fileDragging={onFileDragging.bind(this)}
fileDropped={onFileDropped.bind(this)}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
function onFileDragStart(args: any) {
console.log("File Drag Start");
}

File manager File system provider in React File manager component

function onFileDragStop(args: any) {
console.log("File Drag Stop");
}
function onFileDragging(args: any) {
console.log("File Dragging");
}
function onFileDropped(args: any) {
console.log("File Dropped");
}
return (
<div>
FileManagerComponent)} id="file" allowDragAndDrop={true}
ajaxSettings = {{
}} fileDragStart={onFileDragStart.bind(this)}
fileDragStop={onFileDragStop.bind(this)}
fileDragging={onFileDragging.bind(this)}
fileDropped={onFileDropped.bind(this)}>
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX
File system provider in React File manager component

The file system provider allows the File Manager component to manage the files and folders in a
physical or cloud-based file system. It provides the methods for performing various file actions like
creating a new folder, copying and moving of files or folders, deleting, uploading, and downloading the
files or folders in the file system.

The following file providers are added in Syncfusion EJ2 File Manager component.
• ASP.NET Core file system provider

• ASP.NET MVC 5 file system provider
• ASP.NET Core Azure cloud file system Provider
• ASP.NET MVC 5 Azure cloud file system Provider
• ASP.NET Core Amazon S3 cloud file provider
• ASP.NET MVC Amazon S3 cloud file provider
• File Transfer Protocol file system provider
• SQL database file system provider
• NodeJS file system provider
• Google Drive file system provider
• Firebase Realtime Database file system provider
• IBM Cloud Object Storage provider
ASP.NET Core file system provider

The ASP.NET Core file system provider allows the users to access and manage the physical file system.
To get started, clone the ej2-aspcore-file-provider using the following command.
`ts
git clone https://github.com/SyncfusionExamples/ej2-aspcore-file-provider ej2-aspcore-file-provider
cd ej2-aspcore-file-provider
`
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, set the root
directory of the physical file system in the FileManager controller.
After setting the root directory of the file system, just build and run the project. Now, the project will be
hosted in http://localhost:{port} and just mapping the ajaxSettings property of the FileManager
component to the appropriate controller methods allows to manage the files in the physical file system.
{% raw %}
`ts
// Initializing File Manager ASP.NET Core service.
<div>
<FileManagerComponent id="file"
ajaxSettings = {{
// Replace the hosted port number in the place of "{port}"
url="http://localhost:{port}/api/FileManager/FileOperations",
downloadUrl="http://localhost:{port}/api/FileManager/Download",
uploadUrl="http://localhost:{port}/api/FileManager/Upload",
getImageUrl="http://localhost:{port}/api/FileManager/GetImage"

}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about file actions that can be performed with ASP.NET Core file system provider,
refer to this link
ASP.NET MVC 5 file provider
The ASP.NET MVC5 file system provider allows the users to access and manage the physical file system.
To get started, clone the ej2-aspmvc-file-provider using the following command.
`ts
git clone https://github.com/SyncfusionExamples/ej2-aspmvc-file-provider ej2-aspmvc-file-provider
cd ej2-aspmvc-file-provider
`
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, set the root
directory of the physical file system in the FileManager controller using the Root Folder method.
After setting the root directory of the file system, just build and run the project. Now, the project will be
component to the appropriate controller methods allows to manage the files in the physical file system.
{% raw %}
`ts
// Initializing File Manager ASP.NET MVC service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/api/FileManager/FileOperations",
downloadUrl="http://localhost:{port}/api/FileManager/Download",
uploadUrl="http://localhost:{port}/api/FileManager/Upload",
getImageUrl="http://localhost:{port}/api/FileManager/GetImage"
}} >
</div>

</div>
`
{% endraw %}
Note: To learn more about file actions that can be performed with ASP.NET MVC 5 file system provider,
refer to this link
ASP.NET Core Azure cloud file system provider
In ASP.NET Core, Azure cloud file system provider allows the users to access and manage the blobs in
the Azure blob storage. To get started, clone the azure-aspcore-file-provider using the following
command
`ts
git clone https://github.com/SyncfusionExamples/azure-aspcore-file-provider azure-aspcore-file-
provider
`
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, register the
Azure storage by passing details like name, password, and blob name to the Register Azure method in
the FileManager controller.
`ts
void RegisterAzure(string accountName, string accountKey, string blobName)
`
Then, set the blob container and the root blob directory by passing the corresponding URLs as
parameters in the setBlobContainer method as follows.
`ts
void setBlobContainer(string blobPath, string filePath)
`
Note: Also, assign the same blobPath URL and filePath URL in AzureFileOperations and AzureUpload
methods in the FileManager controller to determine the original path of the Azure blob.
After setting the blob container references, just build and run the project. Now, the project will be
component to the appropriate controller methods allows to manage the Azure blob storage.
{% raw %}
`ts
// Initializing File Manager Azure cloud file system service.
<div>
ajaxSettings = {{


url="http://localhost:{port}/api/AzureProvider/AzureFileOperations",
downloadUrl="http://localhost:{port}/api/AzureProvider/AzureDownload",
uploadUrl="http://localhost:{port}/api/AzureProvider/AzureUpload",
getImageUrl="http://localhost:{port}/api/AzureProvider/AzureGetImage"
}} >
</div>
</div>
`
{% endraw %}
NuGet: Additionally, we have created a NuGet package of ASP.NET Core Azure file system provider.
Please, use the following command to install the NuGet package in an application.
`ts
dotnet add package Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core
`
Note: To learn more about file actions that can be performed with ASP.NET Core Azure cloud file system
Provider, refer to this link
ASP.NET MVC 5 Azure cloud file system provider
In ASP.NET MVC, Azure cloud file system provider allows the users to access and manage the blobs in
the Azure blob storage. To get started, clone the ej2-azure-aspmvc-file-provider using the following
command
`ts
git clone https://github.com/SyncfusionExamples/ej2-azure-aspmvc-file-provider ej2-azure-aspmvc-file-
provider
`
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, register the
Azure storage by passing details like name, password, and blob name to the Register Azure method in
the FileManager controller.
`ts
void RegisterAzure(string accountName, string accountKey, string blobName)
`
Then, set the blob container and the root blob directory by passing the corresponding URLs as
parameters in the setBlobContainer method as follows.
`ts

void setBlobContainer(string blobPath, string filePath)

`
Note: Also, assign the same blobPath URL and filePath URL in AzureFileOperations and AzureUpload
methods in the FileManager controller to determine the original path of the Azure blob.
After setting the blob container references, just build and run the project. Now, the project will be
component to the appropriate controller methods allows to manage the Azure blob storage.
{% raw %}
`ts
// Initializing File Manager Azure cloud file system service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/AzureProvider/AzureFileOperations",
downloadUrl="http://localhost:{port}/AzureProvider/AzureDownload",
uploadUrl="http://localhost:{port}/AzureProvider/AzureUpload",
getImageUrl="http://localhost:{port}/AzureProvider/AzureGetImage"
}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about file actions that can be performed with ASP.NET MVC Azure cloud file system
Provider, refer to this link
ASP.NET Core Amazon S3 cloud file provider
In ASP.NET Core, Amazon S3 (Simple Storage Service) cloud file provider allows the users to access and
manage a server hosted file system as collection of objects stored in the Amazon S3 Bucket. To get
started, clone the amazon-s3-aspcore-file-provider using the following command
`ts
git clone https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider.git amazon-s3-
aspcore-file-provider.git
`

Note: To learn more about creating and configuring an Amazon S3 bucket, refer to this link.
After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon
S3 client account details like awsAccessKeyId, awsSecretKeyId and awsRegion details in
RegisterAmazonS3 method in the FileManager controller to perform the file operations.
`ts
void RegisterAmazonS3(string bucketName, string awsAccessKeyId, string awsSecretAccessKey, string
bucketRegion)
`
After registering the Amazon client account details, just build and run the project. Now, the project will
be hosted in http://localhost:{port} and just mapping the ajaxSettings property of the FileManager
component to the appropriate controller methods allows to manage the Amazon S3 (Simple Storage
Service) bucket's objects storage.
{% raw %}
`ts
// Initializing File Manager Amazon S3 cloud file system service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/api/AmazonS3Provider/AmazonS3FileOperations",
downloadUrl="http://localhost:{port}/api/AmazonS3Provider/AmazonS3Download",
uploadUrl="http://localhost:{port}/api/AmazonS3Provider/AmazonS3Upload",
getImageUrl="http://localhost:{port}/api/AmazonS3Provider/AmazonS3GetImage"
}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about the file actions that can be performed with Amazon S3 cloud file provider,
refer to this link
ASP.NET MVC Amazon S3 cloud file provider
In ASP.NET MVC, Amazon S3 (Simple Storage Service) cloud file provider allows the users to access and
manage a server hosted files as collection of objects stored in the Amazon S3 Bucket. To get started,
clone the ej2-amazon-s3-aspmvc-file-provider using the following command

`ts
git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspmvc-file-provider.git ej2-amazon-
s3-aspmvc-file-provider.git
`
Note: To learn more about creating and configuring an Amazon S3 bucket, refer to this link.
After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon
S3 client account details like awsAccessKeyId, awsSecretKeyId and awsRegion details in
RegisterAmazonS3 method in the FileManager controller to perform the file operations.
`ts
void RegisterAmazonS3(string bucketName, string awsAccessKeyId, string awsSecretAccessKey, string
bucketRegion)
`
After registering the Amazon client account details, just build and run the project. Now, the project will
component to the appropriate controller methods allows to manage the Amazon S3 (Simple Storage
Service) bucket's objects storage.
{% raw %}
`ts
// Initializing File Manager Amazon S3 cloud file service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/FileManager/FileOperations",
downloadUrl="http://localhost:{port}/FileManager/Download",
uploadUrl="http://localhost:{port}/FileManager/Upload",
getImageUrl="http://localhost:{port}/FileManager/GetImage"
}} >
</div>
</div>
`
{% endraw %}

Note: To learn more about the file actions that can be performed with ASP.NET MVC Amazon S3 Cloud
File Provider, refer to this link
File Transfer Protocol file system provider
In ASP.NET Core, File Transfer Protocol file system provider allows the users to access to the hosted file
system as collection of objects stored in the file storage using File Transfer Protocol. To get started,
clone the ftp-aspcore-file-provider using the following command
`ts
git clone https://github.com/SyncfusionExamples/ftp-aspcore-file-provider.git ftp-aspcore-file-
provider.git
`
After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register File
Transfer Protocol details like hostName, userName and password in SetFTPConnection method in the
FileManager controller to perform the file operations.
`ts
void SetFTPConnection(string hostName, string userName, string password)
`
After registering the File Transfer Protocol details, just build and run the project. Now, the project will
component to the appropriate controller methods allows you to manage the FTP’s objects storage.
{% raw %}
`ts
// Initializing File Manager file transfer protocol file system service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/api/FTPProvider/FTPFileOperations",
downloadUrl="http://localhost:{port}/api/FTPProvider/FTPDownload",
uploadUrl="http://localhost:{port}/api/FTPProvider/FTPUpload",
getImageUrl="http://localhost:{port}/api/FTPProvider/FTPGetImage"
}} >
</div>
</div>
`

{% endraw %}
Note: To learn more about the file actions that can be performed with File Transfer Protocol file system
provider, refer to this link
SQL database file system provider
In ASP.NET Core, SQL database file system provider allows the users to manage the file system being
maintained in a SQL database table. Unlike the other file system providers, the SQL database file system
provider works on ID basis. Here, each file and folder have a unique ID based on which all the file
operations will be performed. To get started, clone the sql-server-database-aspcore-file-provider using
the following command.
`ts
<add name="FileExplorerConnection" connectionString="Data
Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\FileManager.mdf;Integrated
Security=True;Trusted_Connection=true" />
`
After cloning, just open the project in Visual Studio and restore the NuGet packages. To establish the
SQL server connection with the database file (for eg: FileManager.mdf), specify the connection string in
the web config file as follows.
`ts
<add name="FileExplorerConnection" connectionString="Data
Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\FileManager.mdf;Integrated
Security=True;Trusted_Connection=true" />
`
Then, make an entry for the connection string in appsettings.json file as follows.
`ts
"ConnectionStrings": {
"FileManagerConnection": "Data
Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\App_Data\\FileManager.mdf;In
tegrated Security=True;Connect Timeout=30"
}
`
Now, to configure the database connection, set the connection name, table name and root folder ID
value by passing these values to the SetSQLConnection method.
`ts
void SetSQLConnection(string name, string tableName, string tableID)
`
Refer to this FileManager.mdf, to learn about the pre-defined file system SQL database for the EJ2 File
Manager.

After configuring the connection, just build and run the project. Now, the project will be hosted in
http://localhost:{port} and just mapping the ajaxSettings property of the FileManager component to
the appropriate controller methods allows to manage the files in the SQL database table.
{% raw %}
`ts
// Initializing File Manager with SQL Server Database service configuration.
<div>
ajaxSettings = {{
url="http://localhost:{port}/api/SQLProvider/SQLFileOperations",
downloadUrl="http://localhost:{port}/api/SQLProvider/SQLDownload",
uploadUrl="http://localhost:{port}/api/SQLProvider/SQLUpload",
getImageUrl="http://localhost:{port}/api/SQLProvider/SQLGetImage"
}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about file actions that can be performed with SQL database file system provider,
refer to this link
NodeJS file system provider
The NodeJS file system provider allows the users to manage the files and folders in a physical file
system. It provides methods for performing all basic file operations like creating a folder, copy, move,
delete, and download files and folders in the file system. We can use of the NodeJS file system provider
either by installing the ej2-filemanager-node-filesystem package or by cloning the file system provider
from the GitHub.
Using ej2-filemanager-node-filesystem package
• Install the ej2-filemanager-node-filesystem package by running the below command.
`ts
npm install @syncfusion/ej2-filemanager-node-filesystem
`

• After installing the package, navigate to the ej2-filemanager-node-filesystem package folder

within the node-modules
• Run the command npm install command.
Cloning the ej2-filemanager-node-filesystem from GitHub
• Clone the ej2-filemanager-node-filesystem using the following command.
`ts
git clone https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem.git node-filesystem-
provider
`
• After cloning, open the root folder and run the command npm install command.
After installing the packages, set the root folder directory of the physical file system in the package JSON
under scripts sections as follows.
`ts
"start": "node filesystem-server.js -d D:/Projects"
`
Note: By default, the root directory will be configured to set C:/Users as the root directory.
To set the port in which the project to be hosted and the root directory of the file system. Run the
following command.
`ts
set PORT=3000 && node filesystem-server.js -d D:/Projects
`
Note: By default, the service will run 8090 port.
Now, just mapping the ajaxSettings property of the FileManager component to the appropriate file
operation methods in the filesystem-server.js file will allow to manage the physical file system with
NodeJS file system provider.
{% raw %}
`ts
// File Manager sample with nodejs service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/",

downloadUrl="http://localhost:{port}/Download",
uploadUrl="http://localhost:{port}/Upload",
getImageUrl="http://localhost:{port}/GetImage"
}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about file actions that can be performed with NodeJS file system provider, refer to
this link
Google Drive file system provider
In ASP.NET Core, Google Drive file system provider allows the users to manage the files and folders in a
Google Drive account. The Google Drive file system provider works on ID basis where each file and
folder have a unique ID. To get started, clone the google-drive-aspcore-file-provider using the following
command.
`ts
git clone https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider google-drive-
aspcore-file-provider
cd google-drive-aspcore-file-provider
`
Google Drive file system provider use the Google Drive APIs to read the file in the file system and uses
the OAuth 2.0 protocol for authentication and authorization. To authenticate from the client end, obtain
OAuth 2.0 client credentials from the Google API Console. To learn more about generating the client
credentials from the from Google API Console, refer to this link.
After generating the client secret data, copy the JSON data to the following specified JSON files in the
cloned location.
• EJ2GoogleDriveFileProvider > credentials > client_secret.json

• GoogleOAuth2.0Base > credentials > client_secret.json
After updating the credentials, just build and run the project. Now, the project will be hosted in
http://localhost:{port}, and it will ask to log on to the Gmail account created the client secret
credentials. Then, provide permission to access the Google Drive files by clicking the allow access button
in the page. Now, just mapping the ajaxSettings property of the FileManager component to the
appropriate controller methods will allows to manage the files from the Google Drive.
{% raw %}
`ts
// File Manager sample with Google Drive service.

<div>
ajaxSettings = {{
url="http://localhost:{port}/api/GoogleDriveProvider/GoogleDriveFileOperations",
downloadUrl="http://localhost:{port}/api/GoogleDriveProvider/GoogleDriveDownload",
uploadUrl="http://localhost:{port}/api/GoogleDriveProvider/GoogleDriveUpload",
getImageUrl="http://localhost:{port}/api/GoogleDriveProvider/GoogleDriveGetImage"
}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about file actions that can be performed with Google Drive file system provider,
refer to this link
Firebase Realtime Database file system provider
The Firebase Realtime Database file system provider in ASP.NET Core provides the efficient way to store
the File Manager file system in a cloud database as JSON representation.
Generate Secret access key from service account
Follow the given steps to generate the secret access key:
• To access the Firebase console, please click on this link. Once you have accessed the console,
you can create a new project by filling in the necessary fields and clicking on the relevant
buttons.

• Within the Firebase console, navigate to the Build tab. Under this tab, select the option for
Realtime Database. From there, you can create a new database by clicking on the Create
Database button.
• To get started, create a root node and add any desired children to it. Please refer to the
following code snippet for guidance on the structure of the JSON:
`ts
{
"Files" : [ {
"caseSensitive" : false,
"dateCreated" : "8/22/2019 5:17:55 PM",

"dateModified" : "8/22/2019 5:17:55 PM",

"filterId" : "0/",
"filterPath" : "/",
"hasChild" : false,
"id" : "5",
"isFile" : false,
"isRoot" : true,
"name" : "Music",
"parentId" : "0",
"selected" : false,
"showHiddenItems" : false,
"size" : 0,
"type" : "folder"
},
{
"caseSensitive" : false,
"dateCreated" : "8/22/2019 5:18:03 PM",
"dateModified" : "8/22/2019 5:18:03 PM",
"filterId" : "0/",
"filterPath" : "/",
"hasChild" : false,
"id" : "6",
"isFile" : false,
"isRoot" : true,
"name" : "videos",
"parentId" : "0",
"selected" : false,
"showHiddenItems" : false,
"size" : 0,
"type" : ""
}]
}
`

Here, the Files denotes the rootNode and the subsequent object refers to the children of the root
node. rootNode will be taken as the root folder of the file system loaded which will be loaded in File
Manager component.
• To import a JSON file into the Firebase Realtime Database, navigate to the Data tab and click on
the action icon shown in the accompanying image. From there, select the Import JSON option
and upload the JSON file that was created using the code provided above.
• To interact with the Firebase Realtime Database through your application, it is necessary to
grant read and write permissions by defining appropriate rules in the Firebase project's Rules
tab, as shown in the following code snippet. Once you have specified the rules, you can publish
them by clicking the Publish button to enable the necessary authentication.
`ts
{
/ Visit https://firebase.google.com/docs/database/security to learn more about security rules. /
"rules": {
".read": "auth!=null",
".write": "auth!=null"
}
}
`
Note: By default, rules of a Firebase project will be false. To read and write the data, configure the
Rules as given in the following code snippet in the Rules tab in the Firebase Realtime Database project.
• Navigate to the project settings as instructed and then click on the Service Account tab.

• To obtain the access key JSON file, simply click on the Generate new private key button and
then confirm by clicking the Generate key button in the pop-up window that appears.
• Next, you will need to clone the firebase-realtime-database-apscore-file-provider repository.

Once cloned, simply open the project in Visual Studio and restore the NuGet package.
• Once you have generated the secret key, you will need to replace the JSON in the
access_key.json file in the Firebase Realtime Database provider project with the newly
generated key. This will enable authentication and allow you to perform read and write
operations.
• In the Data tab, locate the project API URL and then paste it into the below mentioned section.

Register the Firebase Realtime Database by assigning Firebase Realtime Database REST API link,
rootNode, and serviceAccountKeyPath parameters in the RegisterFirebaseRealtimeDB method of class
FirebaseRealtimeDBFileProvider in the controller part of the ASP.NET Core application.
`ts
this.operation.RegisterFirebaseRealtimeDB(string apiUrl, string rootNode, string serviceAccountKeyPath)
`
Example:
`ts
this.operation.RegisterFirebaseRealtimeDB("{copy your API URL here}", "Files",
hostingEnvironment.ContentRootPath + \\FirebaseRealtimeDBHelper\\access_key.json);
`
In the above code,
• {copy your API URL here} denotes Firebase Realtime Database REST API link.
• Files denotes newly created root node in Firebase Realtime Database.
• hostingEnvironment.ContentRootPath + \\FirebaseRealtimeDBHelper\\access_key.json
denotes service account key path which has authentication key for the Firebase Realtime
Database data.
After configuring the Firebase Realtime Database service link, build and run the project. Now, the
project will be hosted in http://localhost:{port} and just mapping the ajaxSettings property of the File
Manager component to the appropriate controller methods allows to manage the files in the Firebase
Realtime Database.
{% raw %}
`ts
// File Manager sample with IBM COS service.

<div>
ajaxSettings = {{
url="http://localhost:{port}/api/FirebaseProvider/FirebaseRealtimeFileOperations",
downloadUrl="http://localhost:{port}/api/FirebaseProvider/FirebaseRealtimeDownload",
uploadUrl="http://localhost:{port}/api/FirebaseProvider/FirebaseRealtimeUpload",
getImageUrl="http://localhost:{port}/api/FirebaseProvider/FirebaseRealtimeGetImage"
}} >
</div>
</div>
`
{% endraw %}
> Note: To learn more about the file actions that can be performed with Firebase Realtime Database file
system provider, refer to this link
IBM Cloud Object Storage file provider
The IBM Cloud Object Storage file provider module allows you work with the IBM Cloud Object Storage.
It also provides the methods for performing various file actions such as creating a new folder, renaming
files, and deleting files. The IBM Cloud Object Storage file provider serves the file provider support for
the File Manager component with the IBM Cloud Object Storage. We can make use of IBM Cloud Object
Storage file provider by installing theej2-filemanager-ibm-cos-node-file-providernpm package or by
cloning the file provider from the GitHub.
Using ej2-filemanager-ibm-cos-node-file-provider npm package
• Install the ej2-filemanager-ibm-cos-node-file-provider npm package by running the below

command.
`ts
npm install @syncfusion/ej2-filemanager-ibm-cos-node-file-provider
`
• After installing the package, navigate to the ej2-filemanager-ibm-cos-node-file-provider package

folder within the node-modules.
• Run the npm install command to install the dependent packages for file provider.

Cloning the filemanager-ibm-cos-node-file-provider from GitHub
• Clone the filemanager-ibm-cos-node-file-provider using the following command.
`ts
git clone https://github.com/SyncfusionExamples/filemanager-ibm-cos-node-file-provider.git
`
• After cloning, open the root folder and run the command npm install command.
To set the port in which the project to be hosted. Run the following command.
`ts
set PORT=3000 && node index.js
`
Note: By default, the service will run 8090 port.
Now, just mapping the ajaxSettings property of the FileManager component to the appropriate file
operation methods in the index.js file will allow to manage the IBM Cloud Object Storage.
{% raw %}
`ts
// File Manager sample with IBM COS service.
<div>
ajaxSettings = {{
url="http://localhost:{port}/",
downloadUrl="http://localhost:{port}/Download",
uploadUrl="http://localhost:{port}/Upload",
getImageUrl="http://localhost:{port}/GetImage"
}} >
</div>
</div>
`
{% endraw %}
Note: To learn more about the file actions that can be performed with IBM Cloud Object Storage file
provider, refer to this link

File manager Localization in React File manager component
Localization in React File manager component

The file manager can be localized to any culture by defining the texts and messages of the file manager
in the corresponding culture. The default locale of the file manager is en (English). The following table
represents the default texts and messages of the file manager in en culture.
|KEY|Text/Message|
|----|----|
|NewFolder|New folder|
|Upload|Upload|
|Delete|Delete|
|Rename|Rename|
|Download|Download|
|Cut|Cut|
|Copy|Copy|
|Paste|Paste|
|SortBy|Sort by|
|Refresh|Refresh|
|Item-Selection|item selected|
|Items-Selection|items selected|
|View|View|
|Details|Details|
|SelectAll|Select all|
|Open|Open|
|Tooltip-NewFolder|New folder|
|Tooltip-Upload|Upload|
|Tooltip-Delete|Delete|
|Tooltip-Rename|Rename|
|Tooltip-Download|Download|
|Tooltip-Cut|Cut|
|Tooltip-Copy|Copy|
|Tooltip-Paste|Paste|
|Tooltip-SortBy|Sort by|
|Tooltip-Refresh|Refresh|
|Tooltip-Selection|Clear selection|
|Tooltip-View|View|

|Tooltip-Details|Details|
|Tooltip-SelectAll|Select all|
|Name|Name|
|Size|Size|
|DateModified|Modified|
|DateCreated|Date created|
|Path|Path|
|Created|Created|
|Modified|Modified|
|Location|Location|
|Type|Type|
|Permission|Permission|
|Ascending|Ascending|
|Descending|Descending|
|None|None|
|View-LargeIcons|Large icons|
|View-Details|Details|
|Search|Search|
|Button-Ok|OK|
|Button-Cancel|Cancel|
|Button-Yes|Yes|
|Button-No|No|
|Button-Create|Create|
|Button-Save|Save|
|Header-NewFolder|Folder|
|Content-NewFolder|Enter your folder name|
|Header-Rename|Rename|
|Content-Rename|Enter your new name|
|Header-Rename-Confirmation|Rename Confirmation|
|Content-Rename-Confirmation|If you change a file name extension| the file might become unstable.
Are you sure you want to change it?|
|Header-Delete|Delete File|
|Content-Delete|Are you sure you want to delete this file?|

|Header-Multiple-Delete|Delete Multiple Files|

|Content-Multiple-Delete|Are you sure you want to delete these {0} files?|
|Header-Folder-Delete|Delete Folder|
|Content-Folder-Delete|Are you sure you want to delete this folder?|
|Header-Duplicate|File exists|
|Content-Duplicate| already exists. Are you sure you want to replace it?|
|Header-Upload|Upload Files|
|Error|Error|
|Validation-Empty|The file or folder name cannot be empty.|
|Validation-Invalid|The file or folder name {0} contains invalid characters. Please use a different name.
Valid file or folder names cannot end with a dot or space, and cannot contain any of the following
characters: \\/:*?\"<>\||
|Validation-NewFolder-Exists|A file or folder with the name {0} already exists.|
|Validation-Rename-Exists|Cannot rename {0} to {1}| destination already exists.|
|Folder-Empty|This folder is empty|
|File-Upload|Drag files here to upload|
|Search-Empty|No results found|
|Search-Key|Try with different keywords|
|Filter-Empty|No results found|
|Filter-Key|Try with different filter|
|Sub-Folder-Error|The destination folder is the subfolder of the source folder|
|Same-Folder-Error|The destination folder is the same as the source folder.|
|Access-Denied|Access Denied|
|Access-Details|You don't have permission to access this folder|
|Header-Retry|File Already Exists|
|Content-Retry|A file with this name already exists in this folder. What would you like to do?|
|Button-Keep-Both|Keep both|
|Button-Replace|Replace|
|Button-Skip|Skip|
|ApplyAll-Label|Do this for all current items|
|KB|KB|
|Access-Message|{0} is not accessible. You need permission to perform the {1} action.|
|Network-Error|Network Error: Failed to send on XMLHTTPRequest: Failed to load|
|Server-Error|Server Error: Invalid response from|

The below example shows adding the German culture locale(de-DE)

APP.JSX
{% raw %}
import { L10n } from '@syncfusion/ej2-base';
// Load Locale text to FileManager component
L10n.load({
'de': {
'filemanager': {
"NewFolder": "Neuer Ordner",
"Upload": "Hochladen",
"Delete": "Löschen",
"Rename": "Umbenennen",
"Download": "Herunterladen",
"Cut": "Schnitt",
"Copy": "Kopieren",
"Paste": "Einfügen",
"SortBy": "Sortiere nach",
"Refresh": "Aktualisierung",
"Item-Selection": "Artikel ausgewählt",
"Items-Selection": "Elemente ausgewählt",
"View": "Aussicht",
"Details": "Einzelheiten",
"SelectAll": "Wählen Sie Alle",
"Open": "Öffnen",
"Tooltip-NewFolder": "Neuer Ordner",
"Tooltip-Upload": "Hochladen",
"Tooltip-Delete": "Löschen",
"Tooltip-Rename": "Umbenennen",
"Tooltip-Download": "Herunterladen",
"Tooltip-Cut": "Schnitt",
"Tooltip-Copy": "Kopieren",
"Tooltip-Paste": "Einfügen",
"Tooltip-SortBy": "Sortiere nach",
"Tooltip-Refresh": "Aktualisierung",
"Tooltip-Selection": "Auswahl aufheben",
"Tooltip-View": "Aussicht",
"Tooltip-Details": "Einzelheiten",
"Tooltip-SelectAll": "Wählen Sie Alle",
"Name": "Name",
"Size": "Größe",
"DateModified": "Geändert",
"DateCreated": "Datum erstellt",
"Path": "Pfad",
"Modified": "Geändert",
"Created": "Erstellt",
"Location": "Ort",
"Type": "Art",
"Permission": "Genehmigung",
"Ascending": "Aufsteigend",
"Descending": "Absteigend",
"None": "Keiner",
"View-LargeIcons": "Große Icons",

"View-Details": "Einzelheiten",
"Search": "Suche",
"Button-Ok": "OK",
"Button-Cancel": "Stornieren",
"Button-Yes": "Ja",
"Button-No": "Nein",
"Button-Create": "Erstellen",
"Button-Save": "Sparen",
"Header-NewFolder": "Mappe",
"Content-NewFolder": "Geben Sie Ihren Ordnernamen ein",
"Header-Rename": "Umbenennen",
"Content-Rename": "Geben Sie Ihren neuen Namen ein",
"Header-Rename-Confirmation": "Bestätigung umbenennen",
"Content-Rename-Confirmation": "Wenn Sie eine
Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil.
Möchten Sie sie wirklich ändern?",
"Header-Delete": "Datei löschen",
"Content-Delete": "Möchten Sie diese Datei wirklich löschen?",
"Header-Multiple-Delete": "Mehrere Dateien löschen",
"Content-Multiple-Delete": "Möchten Sie diese {0} Dateien
wirklich löschen?",
"Header-Folder-Delete": "Lösche Ordner",
"Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich
löschen?",
"Header-Duplicate": "Datei / Ordner existiert",
"Content-Duplicate": "{0} existiert bereits. Möchten Sie
umbenennen und einfügen?",
"Header-Upload": "Daten hochladen",
"Error": "Error",
"Validation-Empty": "Der Datei - oder Ordnername darf nicht leer
sein.",
"Validation-Invalid": "Der Datei- oder Ordnername {0} enthält
ungültige Zeichen. Bitte verwenden Sie einen anderen Namen. Gültige Datei-
oder Ordnernamen dürfen nicht mit einem Punkt oder Leerzeichen enden und
keines der folgenden Zeichen enthalten: \\ /: *? \" < > | ",
"Validation-NewFolder-Exists": "Eine Datei oder ein Ordner mit
dem Namen {0} existiert bereits.",
"Validation-Rename-Exists": "{0} kann nicht in {1} umbenannt
werden: Ziel existiert bereits.",
"Folder-Empty": "Dieser Ordner ist leer",
"File-Upload": "Dateien zum Hochladen hierher ziehen",
"Search-Empty": "Keine Ergebnisse gefunden",
"Search-Key": "Versuchen Sie es mit anderen Stichwörtern",
"Filter-Empty": "keine Ergebnisse gefunden",
"Filter-Key": "Versuchen Sie es mit einem anderen Filter",
"Sub-Folder-Error": "Der Zielordner ist der Unterordner des
Quellordners.",
"Same-Folder-Error": "Der Zielordner ist derselbe wie der
Quellordner.",
"Access-Denied": "Zugriff verweigert",
"Access-Details": "Sie haben keine Berechtigung, auf diesen
Ordner zuzugreifen.",
"Header-Retry": "Die Datei existiert bereits",
"Content-Retry": "In diesem Ordner ist bereits eine Datei mit
diesem Namen vorhanden. Was möchten Sie tun?",
"Button-Keep-Both": "Behalte beides",
"Button-Replace": "Ersetzen",

"Button-Skip": "Überspringen",
"ApplyAll-Label": "Mache das für alle aktuellen Artikel",
"KB": "KB",
"Access-Message": "{0} ist nicht zugänglich. Sie benötigen die
Berechtigung, um die Aktion {1} auszuführen.",
"Network-Error": "NetworkError: Fehler beim Senden auf
XMLHTTPRequest: Fehler beim Laden",
"Server-Error": "ServerError: Ungültige Antwort von"
}
}
});
function App() {
<FileManagerComponent id="file" view="Details" locale='de'
ajaxSettings={{
}}>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar,Inject
// Load Locale text to FileManager component
L10n.load({
'de': {
'filemanager': {
"NewFolder": "Neuer Ordner",
"Upload": "Hochladen",
"Delete": "Löschen",
"Rename": "Umbenennen",
"Download": "Herunterladen",
"Cut": "Schnitt",
"Copy": "Kopieren",
"Paste": "Einfügen",
"SortBy": "Sortiere nach",
"Refresh": "Aktualisierung",
"Item-Selection": "Artikel ausgewählt",
"Items-Selection": "Elemente ausgewählt",
"View": "Aussicht",
"Details": "Einzelheiten",
"SelectAll": "Wählen Sie Alle",
"Open": "Öffnen",
"Tooltip-NewFolder": "Neuer Ordner",

"Tooltip-Upload": "Hochladen",
"Tooltip-Delete": "Löschen",
"Tooltip-Rename": "Umbenennen",
"Tooltip-Download": "Herunterladen",
"Tooltip-Cut": "Schnitt",
"Tooltip-Copy": "Kopieren",
"Tooltip-Paste": "Einfügen",
"Tooltip-SortBy": "Sortiere nach",
"Tooltip-Refresh": "Aktualisierung",
"Tooltip-Selection": "Auswahl aufheben",
"Tooltip-View": "Aussicht",
"Tooltip-Details": "Einzelheiten",
"Tooltip-SelectAll": "Wählen Sie Alle",
"Name": "Name",
"Size": "Größe",
"DateModified": "Geändert",
"DateCreated": "Datum erstellt",
"Path": "Pfad",
"Modified": "Geändert",
"Created": "Erstellt",
"Location": "Ort",
"Type": "Art",
"Permission": "Genehmigung",
"Ascending": "Aufsteigend",
"Descending": "Absteigend",
"None": "Keiner",
"View-LargeIcons": "Große Icons",
"View-Details": "Einzelheiten",
"Search": "Suche",
"Button-Ok": "OK",
"Button-Cancel": "Stornieren",
"Button-Yes": "Ja",
"Button-No": "Nein",
"Button-Create": "Erstellen",
"Button-Save": "Sparen",
"Header-NewFolder": "Mappe",
"Content-NewFolder": "Geben Sie Ihren Ordnernamen ein",
"Header-Rename": "Umbenennen",
"Content-Rename": "Geben Sie Ihren neuen Namen ein",
"Header-Rename-Confirmation": "Bestätigung umbenennen",
"Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung
ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich
ändern?",
"Header-Delete": "Datei löschen",
"Content-Delete": "Möchten Sie diese Datei wirklich löschen?",
"Header-Multiple-Delete": "Mehrere Dateien löschen",
"Content-Multiple-Delete": "Möchten Sie diese {0} Dateien wirklich
löschen?",
"Header-Folder-Delete": "Lösche Ordner",
"Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich
löschen?",
"Header-Duplicate": "Datei / Ordner existiert",
"Content-Duplicate": "{0} existiert bereits. Möchten Sie umbenennen
und einfügen?",
"Header-Upload": "Daten hochladen",
"Error": "Error",

"Validation-Empty": "Der Datei - oder Ordnername darf nicht leer

sein.",
"Validation-Invalid": "Der Datei- oder Ordnername {0} enthält
ungültige Zeichen. Bitte verwenden Sie einen anderen Namen. Gültige Datei-
oder Ordnernamen dürfen nicht mit einem Punkt oder Leerzeichen enden und
keines der folgenden Zeichen enthalten: \\ /: *? \" < > | ",
"Validation-NewFolder-Exists": "Eine Datei oder ein Ordner mit dem
Namen {0} existiert bereits.",
"Validation-Rename-Exists": "{0} kann nicht in {1} umbenannt werden:
Ziel existiert bereits.",
"Folder-Empty": "Dieser Ordner ist leer",
"File-Upload": "Dateien zum Hochladen hierher ziehen",
"Search-Empty": "Keine Ergebnisse gefunden",
"Search-Key": "Versuchen Sie es mit anderen Stichwörtern",
"Filter-Empty": "keine Ergebnisse gefunden",
"Filter-Key" : "Versuchen Sie es mit einem anderen Filter",
"Sub-Folder-Error": "Der Zielordner ist der Unterordner des
Quellordners.",
"Same-Folder-Error": "Der Zielordner ist derselbe wie der
Quellordner.",
"Access-Denied": "Zugriff verweigert",
"Access-Details": "Sie haben keine Berechtigung, auf diesen Ordner
zuzugreifen.",
"Header-Retry": "Die Datei existiert bereits",
"Content-Retry": "In diesem Ordner ist bereits eine Datei mit diesem
Namen vorhanden. Was möchten Sie tun?",
"Button-Keep-Both": "Behalte beides",
"Button-Replace": "Ersetzen",
"Button-Skip": "Überspringen",
"ApplyAll-Label": "Mache das für alle aktuellen Artikel",
"KB": "KB",
"Access-Message": "{0} ist nicht zugänglich. Sie benötigen die
Berechtigung, um die Aktion {1} auszuführen.",
"Network-Error": "NetworkError: Fehler beim Senden auf
XMLHTTPRequest: Fehler beim Laden",
"Server-Error": "ServerError: Ungültige Antwort von"
}
}
})
function App() {
return (
<FileManagerComponent id="file" view="Details" locale='de'
ajaxSettings = {{
}} >
</div>
);
}

File manager Virtualization in React File Manager component
INDEX.JSX
INDEX.TSX
Virtualization in React File Manager component

File Manager's UI virtualization allows you for the dynamic loading of a large number of directories and
files in both the detailsView and largeIconsView without degrading its performance.
Module Injection
In order to use UI Virtualization, you need to inject its virtualization service in the App. This modules
should be injected into the FileManager using the Inject directive.
{% raw %}
`ts
import { FileManagerComponent, Inject, Virtualization } from '@syncfusion/ej2-react-filemanager';
function App() {
return (
// specifies the tag to render the FileManager component
<FileManagerComponent id="filemanager" ajaxSettings={{
}} enableVirtualization={true}>
<Inject services={[Virtualization]}/>
);
}

export default App;

`
{% endraw %}
Enable Virtualization
The virtualization of the File Manager component is based on the height and width of the viewport. The
items will be loaded in both largeIconsView and detailsView based on the viewport size.
In order to enable virtualization, you must set the enableVirtualization property to true.
In the instance below, a sizable collection of files can be found in the folders Documents and Text
Documents.
APP.JSX
{% raw %}
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar,
Virtualization } from '@syncfusion/ej2-react-filemanager';
/**
* File Manager virtualization feature sample
*/
function App() {
function onBeforeSend(args) {
args.ajaxSettings.beforeSend = function (args) {
args.httpRequest.setRequestHeader('Authorization',
'FileBrowser');
};
}
function beforeImageLoad(args) {
args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser';
}
function beforeDownload(args) {
args.data.rootFolderName = 'FileBrowser';
}
return (<div>
<FileManagerComponent id="filemanager" ajaxSettings={{
}} view={"Details"} enableVirtualization={true}
beforeSend={onBeforeSend.bind(this)}
beforeImageLoad={beforeImageLoad.bind(this)}
beforeDownload={beforeDownload.bind(this)}>
<Inject services={[NavigationPane, DetailsView, Toolbar,
Virtualization]}/>
</div>
</div>);
}
export default App;
{% endraw %}

APP.TSX
{% raw %}
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar,
Virtualization } from '@syncfusion/ej2-react-filemanager';
/**
* File Manager virtualization feature sample
*/
function App() {
function onBeforeSend(args) {
args.ajaxSettings.beforeSend = function (args) {
args.httpRequest.setRequestHeader('Authorization',
'FileBrowser');
};
}
function beforeImageLoad(args) {
args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser';
}
function beforeDownload(args) {
args.data.rootFolderName = 'FileBrowser';
}
return(
<div>
<FileManagerComponent id="filemanager"
ajaxSettings = {{
}}
view = {"Details"}
enableVirtualization = {true}
beforeSend={onBeforeSend.bind(this)}
beforeImageLoad={beforeImageLoad.bind(this)}
beforeDownload={beforeDownload.bind(this)}>
<Inject services={[ NavigationPane, DetailsView, Toolbar,
Virtualization]} />
</div>
</div>
);
};
export default App;
{% endraw %}
INDEX.JSX

File manager Accessibility in React File Manager component
INDEX.TSX
Limitations for Virtualization
• Programmatic selection using the selectAll method is not supported with virtual scrolling.
• The keyboard shortcut CTRL+A will only select the files and directories that are currently visible
within the viewport, rather than selecting all files and directories in the entire directory tree.
• Selected file items are not maintained while scrolling, considering the performance of the
component.
Accessibility in React File Manager component

The File Manager component followed the accessibility guidelines and standards, including ADA, Section
508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the File Manager component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
| WCAG 2.2 Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"
alt="Yes"> |
| Section 508 Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Screen Reader Support | <img
| Right-To-Left Support | <img
| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"
alt="Yes"> |
| Mobile Device Support | <img
| Keyboard Navigation Support | <img
| Accessibility Checker Validation | <img
| Axe-core Accessibility Validation | <img
<style>
.post .post-content img {

display: inline-block;
margin: 0.5em 0;
}
</style>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All
features of the component meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png"
alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"
alt="No"> - The component does not meet the requirement.</div>
WAI-ARIA attributes
The File Manager component followed the WAI-ARIA patterns to meet the accessibility. The following
ARIA attributes are used in the File Manager component:
| Attributes | Purpose |
| --- | --- |
| role | Used to convey a significant and contextual message to the user. |
| aria-disabled | Indicates whether the File Manager component is in disabled state.|
| aria-haspopup | Indicates whether the toolbar item has a popup list or not. |
| aria-orientation | Indicates whether the File Manager element is oriented horizontally or vertically. |
| aria-expanded | Indicates whether the Treeview node has been expanded. |
| aria-owns | Contains the ID of the suggestion list to indicate popup as a child element. |
| aria-activedescendent | Holds the ID of the active list item to focus its descendant child element. |
| aria-level | Specifies the level of the element in Treeview Structure. |
| aria-selected | Indicates whether a particular node is in selected state. |
| aria-placeholder | Represents a hint (word or phrase) to the user about what to enter in the text
field. |
| aria-label | Provides an accessible name for the element. |
| aria-checked | Indicates whether the checkbox is in checked state. |
| aria-labelledby | Provides a label for the dialog. Typically, the "aria-labelledby" attribute will contain
the id of the element used as the dialog's title. |
| aria-describedby | This attribute points to the Dialog element describing the one it's set on. |
| aria-modal | Indicates whether an element is a modal when display. |
| aria-colcount | Specifies the number of columns in full table. |
| aria-colindexnt | Defines the number of columns within a table in details view. |

| aria-rowspan | Defines the number of rows a cell spanned within a table in details view. |
| aria-colspan | Defines the number of columns a cell spanned within a table in details view. |
| aria-sort | Indicates whether items in the table are sorted in ascending or descending order. |
| aria-grabbed | When the folder/file item is chosen for dragging, the aria-grabbed attribute is set to
"true." If it's set to "false," the element can be grabbed for drag-and-drop, but it won't be actively held.
|
| aria-busy | This attribute is set to false when table content is loaded. |
| aria-multiselectable | Defines more than one item has been selected. |
Keyboard interaction
The File Manager component followed the keyboard interaction guidelines, making it easy for people
who use assistive technologies (AT) and those who completely rely on keyboard navigation. The
following keyboard shortcuts are supported by the File Manager component.
| Press | To do this |
| --- | --- |
| Page Down | Scrolls down to the next folder or file and selects the first item when files are
loaded. |
| Page Up | Scrolls up to previous folder and select the first item when files are loaded. |
| Enter | Selects the focused item and navigate through the child elements. |
| Tab | Focuses on the first element of toolbar and navigates through the next tab indexed
element. |
| Esc(Escape) | Closes the image when it is in open state. |
| Alt+N | Creates a new folder dialog.|
| F5 | Refresh the file manager element. |
| Home | Navigate through the first element of details view or large icons view. |
| End | Navigate through the last element of details view or large icons view. |
| Move Left | Scrolls left to the previous folder and select the first item when files are loaded |
| Move Right | Scrolls right to the previous folder and select the first item when files are loaded
|
| Alt+Enter | Shows the get details info for selected folder. |
| Shift+Right | Allows multiselection. Select the file or folder at the right of the previously
selected folder. |
| Shift+Left | Allows multiselection. Select the file or folder at the left of the previously selected
folder. |
| Shift+Down | Allows multiselection. Select the file or folder till the focused index. |

File manager Access control in React File manager component
| Shift+Delete | Permanently deletes the selected file or folder in the file manager element. |
| Delete | Deletes the selected file or folder in the file manager element. |
| Shift+Up | Allows multiselection. Select the file or folder till the focused index. |
| Ctrl+C | Copies the selected file or folder in the file manager element. |
| Ctrl+V | Pastes the copied/cut file or folder in the file manager element. |
| Ctrl+X | Cuts the selected file or folder in the file manager element. |
| Ctrl+A | Select all the files or folders in the details view or large icons view. |
| F2 | Creates a rename dialog for a selected file or folder in the file manager element. |
| Shift+F10 | Opens the context menu for the selected file or folder in the file manager
element. |
| Ctrl+D | Downloads the list of selected files or folders in the file manager element. |
| Ctrl+Shift+1 | Changes the file manager layout to details view. |
| Ctrl+Shift+2 | Changes the file manager layout to large icons view. |
Ensuring accessibility
The File Manager component's accessibility levels are ensured through an accessibility-checker and axe-
core software tools during automated testing.
The accessibility compliance of the File Manager component is shown in the following sample. Open the
sample in a new window to evaluate the accessibility of the File Manager component with accessibility
tools.
See also
• Accessibility in Syncfusion React components
Access control in React File manager component

The React FileManager allows you to define access permissions for folders and files using a set of access
rules to user(s).
• Access Rules
• Permissions
Access Rules
The FileAccessController allows you to define security permissions for folders and files using a set of
folder or file access rules.
To set up access rules for folders (including their files and sub-folders) and individual files, use the
SetRules() method in the controller. The following table represents the AccessRule properties available
for file and folder:
| Properties | Applicable for file | Applicable for folder | Description |
| --- | --- | --- | --- |

| Copy | Yes | Yes | Allows access to copy a file or folder. |

| Read | Yes | Yes | Allows access to read a file or folder. |
| Write | Yes | Yes | Allows permission to write a file or folder. |
| WriteContents | No | Yes | Allows permission to write the content of folder. |
| Download | Yes | Yes | Allows permission to download a file or folder. |
| Upload | No | Yes | Allows permission to upload to the folder. |
| Path | Yes | Yes | Specifies the path to apply the rules, which are defined. |
| Role | Yes | Yes | Specifies the role to which the rule is applied. |
| IsFile | Yes | Yes | Specifies whether the rule is specified for folder or file. |
The following syntax represents the access Rules for Administrator using file or folder.
`ts
//Adminstrator
//Access Rules for File
new AccessRule { Path = "/.", Role = "Administrator", Read = Permission.Allow, Write =
Permission.Allow, Copy = Permission.Allow, Download = Permission.Allow, IsFile = true },
// Access Rules for folder
new AccessRule { Path = "*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Allow,
Copy = Permission.Allow, WriteContents = Permission.Allow, Upload = Permission.Allow, Download =
Permission.Deny, IsFile = false },
`
The following syntax represent the access Rules for Default user using file or folder.
`ts
//Default User
//Access Rules for File
new AccessRule { Path = "/.", Role = "Default User", Read = Permission.Deny, Write = Permission.Deny,
Copy = Permission.Deny, Download = Permission.Deny, IsFile = true },
// Access Rules for folder
new AccessRule { Path = "*", Role = "Default User", Read = Permission.Deny, Write = Permission.Deny,
Copy = Permission.Deny, WriteContents = Permission.Deny, Upload = Permission.Deny, Download =
Permission.Deny, IsFile = false },
`
Permissions
It helps to explain how to apply security permission to file manager file or folder using access rules. The
following table represent the value that determines the permission.
| Value | Description |
| --- | ---|

| Allow | Allows you to do read, write, copy, and download operations. |

| Deny | Denies you to do read, write, copy, and download operations. |
Use the Role property to apply created roles to the file manager. After that, the file manager displays
folder or file and allow permisssion based on assigned roles.
The following syntax represent how to apply permission based on assigned roles
Permission denied for administrator to write a file or folder.
`ts
// For file
new AccessRule { Path = "/.", Role = "Administrator", Read = Permission.Allow, Write = Permission.Deny,
IsFile = true},
// For folder
new AccessRule { Path = "*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Deny,
IsFile = false},
`
The following syntax represent how to allow or deny permission based on file or folder access rule.
Permission denied for writing except for particular file or folder.
`ts
// Deny writing for particular folder
new AccessRule { Path = "/Documents", Role = "Document Manager", Read = Permission.Allow, Write =
Permission.Deny, Copy = Permission.Allow, WriteContents = Permission.Deny, Upload =
Permission.Deny, Download = Permission.Deny, IsFile = false },
// Deny writing for particular file
new AccessRule { Path = "/Pictures/Employees/Adam.png", Role = "Document Manager", Read =
Permission.Allow, Write = Permission.Deny, Copy = Permission.Deny, Download = Permission.Deny,
IsFile = true },
`
Permission denied for writing and uploading in root folder.
` ts
// Folder Rule
new AccessRule { Path = "/", Role = "Document Manager", Read = Permission.Allow, Write =
Permission.Deny, Copy = Permission.Deny, WriteContents = Permission.Deny, Upload =
Permission.Deny, Download = Permission.Deny, IsFile = false },
`
The following example demonstrate the file manager rendered with access control support.
APP.JSX
{% raw %}


function App() {
let fileObj;
return (<div>
ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManagerAccess/Download',
getImageUrl: hostUrl + 'api/FileManagerAccess/GetImage',
uploadUrl: hostUrl + 'api/FileManagerAccess/Upload',
url: hostUrl + 'api/FileManagerAccess/FileOperations'
}} view={"Details"}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { DetailsView, FileManagerComponent, Inject, NavigationPane,
Toolbar} from '@syncfusion/ej2-react-filemanager';
function App() {
return (
<div>
ajaxSettings = {{
downloadUrl: hostUrl +'api/FileManagerAccess/Download',
getImageUrl: hostUrl +'api/FileManagerAccess/GetImage',
uploadUrl: hostUrl +'api/FileManagerAccess/Upload',
url: hostUrl + 'api/FileManagerAccess/FileOperations'
}} view={"Details"}>
</div>
</div>
);
}
INDEX.JSX

File manager How To
INDEX.TSX
How To
Adding custom item to context menu in React File manager component
The context menu can be customized using the contextMenuSettings, menuOpen, and menuClick
events.
The following example shows adding a custom item in the context menu.
The contextMenuSettings is used to add new menu item. The menuOpen event is used to add the icon
to the new menu item. The menuClick event is used to add an event handler to the new menu item.
APP.JSX
{% raw %}
function App() {
let fileObj;
function menuClick(args) {
if (args.item.text === 'Custom') {
alert('You have clicked custom menu item');
}
}
function menuOpen(args) {
for (const i in args.items) {
if (args.items[i].id === fileObj.element.id + '_cm_custom') {
args.items[i].iconCss = 'e-icons e-fe-tick';
}
}
}
return (<div>
}} contextMenuSettings={{
file: ['Open', '|', 'Delete', 'Rename', '|', 'Details',
'Custom'],
folder: ['Open', '|', 'Delete', 'Rename', '|', 'Details',
'Custom'],
layout: ['SortBy', 'View', 'Refresh', '|', 'NewFolder',
'Upload', '|', 'Details', '|', 'SelectAll', 'Custom'],

File manager How To
}} menuClick={menuClick} menuOpen={menuOpen}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
function menuClick(args: any): void {
if (args.item.text === 'Custom') {
alert('You have clicked custom menu item')
}
}
function menuOpen(args: any): void {
for(const i in args.items) {
if(args.items[i].id === fileObj.element.id +'_cm_custom') {
args.items[i].iconCss= 'e-icons e-fe-tick';
}
}
}
return (
<div>
ajaxSettings = {{
}}
contextMenuSettings = {{
file: ['Open', '|', 'Delete', 'Rename', '|', 'Details',
'Custom'],
folder: ['Open', '|', 'Delete', 'Rename', '|', 'Details',
'Custom'],
layout: ['SortBy', 'View', 'Refresh', '|', 'NewFolder',
'Upload', '|', 'Details', '|', 'SelectAll', 'Custom'],
}}
menuClick={menuClick} menuOpen={menuOpen} >
</div>
</div>
);
}

File manager How To
INDEX.JSX
INDEX.TSX
Adding custom item to toolbar in React File manager component

You can modify the items displayed in the toolbar by utilizing the toolbarItems API. To display both
default and customized items, it's essential to assign a unique name to each item. Additionally, you have
the flexibility to alter the default items by adjusting properties such as tooltipText, iconCss, Text,
suffixIcon and more. This level of customization allows you to tailor the toolbar to your specific
requirements and design preferences. The names used in the code example below serve as unique
identifiers for default toolbar items, while custom items can be assigned any unique name value to
distinguish them from the defaults.
For instance, here's an example of how to add a custom checkbox to the toolbar using the template
property. Here we have modified the default New Folder item and added a custom toolbar item for
selection.
APP.JSX
{% raw %}
ToolbarItemsDirective, ToolbarItemDirective } from '@syncfusion/ej2-react-
filemanager';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let fileObj;
let checkbox;
function checkboxTemplate() {
return (
<CheckBoxComponent ref={ scope => (checkbox = scope )}
label="Select All" checked={false} change={onChange} />
);
}
function onChange(args) {
if (args.checked) {
fileObj.selectAll();
checkbox.label = 'Unselect All';
}
else {

File manager How To
fileObj.clearSelection();
checkbox.label = 'Select All';
}
}
return (<div>
}}>
<ToolbarItemsDirective>
<ToolbarItemDirective name= 'NewFolder' text= 'Create
folder' prefixIcon= 'e-plus' tooltipText= 'Create folder'/>
<ToolbarItemDirective name= 'Upload'/>
<ToolbarItemDirective name= 'SortBy'/>
<ToolbarItemDirective name= 'Refresh'/>
<ToolbarItemDirective name= 'Cut'/>
<ToolbarItemDirective name= 'Copy'/>
<ToolbarItemDirective name= 'Paste'/>
<ToolbarItemDirective name= 'Delete'/>
<ToolbarItemDirective name= 'Download'/>
<ToolbarItemDirective name= 'Rename'/>
<ToolbarItemDirective name= 'Select'
template={checkboxTemplate}/>
<ToolbarItemDirective name= 'Selection'/>
<ToolbarItemDirective name= 'View'/>
<ToolbarItemDirective name= 'Details'/>
</ToolbarItemsDirective>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
ToolbarItemsDirective, ToolbarItemDirective } from '@syncfusion/ej2-react-
filemanager';
import { CheckBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-react-
buttons';
function App() {
let checkbox: CheckBoxComponent;
function checkboxTemplate() {
return (
<CheckBoxComponent ref={ scope => ((checkbox as any) = scope as
CheckBoxComponent)} label="Select All" checked={false} change={onChange} />

File manager How To
);
}
function onChange(args: ChangeEventArgs) {
if (args.checked) {
fileObj.selectAll();
checkbox.label = 'Unselect All';
}
else {
fileObj.clearSelection();
checkbox.label = 'Select All';
}
}
return (
<div>
<FileManagerComponent ref={ s => ((fileObj as any) = s as
ajaxSettings = {{
}}>
<ToolbarItemsDirective>
<ToolbarItemDirective name= 'NewFolder' text= 'Create
folder' prefixIcon= 'e-plus' tooltipText= 'Create folder'/>
<ToolbarItemDirective name= 'Upload'/>
<ToolbarItemDirective name= 'SortBy'/>
<ToolbarItemDirective name= 'Refresh'/>
<ToolbarItemDirective name= 'Cut'/>
<ToolbarItemDirective name= 'Copy'/>
<ToolbarItemDirective name= 'Paste'/>
<ToolbarItemDirective name= 'Delete'/>
<ToolbarItemDirective name= 'Download'/>
<ToolbarItemDirective name= 'Rename'/>
<ToolbarItemDirective name= 'Select'
template={checkboxTemplate}/>
<ToolbarItemDirective name= 'Selection'/>
<ToolbarItemDirective name= 'View'/>
<ToolbarItemDirective name= 'Details'/>
</ToolbarItemsDirective>
/>
</div>
</div>
);
}
INDEX.JSX

File manager How To
INDEX.TSX
Enable disable toolbar item in React File manager component

The toolbar items can be enabled/disabled by specifying the items in enableToolbarItems or
disableToolbarItems methods respectively.
The following example shows enabling and disabling toolbar items on button click.
APP.JSX
{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let fileObj;
function onEnable() {
fileObj.enableToolbarItems(["newfolder"]);
}
function onDisable() {
fileObj.disableToolbarItems(["newfolder"]);
}
return (<div>
<ButtonComponent id='enable' style={{ "margin": "10px" }}
onClick={onEnable.bind(this)} cssClass='e-success'>Enable New Folder toolbar
item</ButtonComponent>
<ButtonComponent id='disable' style={{ "margin": "10px" }}
onClick={onDisable.bind(this)} cssClass='e-danger'>Disable New Folder
toolbar item</ButtonComponent>
height={"330px"} view="Details" ajaxSettings={{
}} toolbarSettings={{ items: ['NewFolder', 'Refresh', 'View',
'Details'] }}>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX

File manager How To
{% raw %}
function App() {
function onEnable() {
fileObj.enableToolbarItems(["newfolder"]);
}
function onDisable() {
fileObj.disableToolbarItems(["newfolder"]);
}
return (
<div>
<ButtonComponent id='enable' style= {{"margin": "10px"}}
onClick={onEnable.bind(this)} cssClass='e-success'>Enable New Folder toolbar
item</ButtonComponent>
<ButtonComponent id='disable' style= {{"margin": "10px"}}
onClick={onDisable.bind(this)} cssClass='e-danger'>Disable New Folder
toolbar item</ButtonComponent>
FileManagerComponent)} id="file" height={"330px"} view="Details"
ajaxSettings = {{
}}
toolbarSettings = {
{ items: ['NewFolder', 'Refresh', 'View', 'Details']}
} >
/>
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX

File manager How To
Customize custom thumbnail in React File manager component

The default appearance of the file manager can customize with your own icon by using showThumbnail
property.
The following example demonstrate how to add a custom icon in largeicons view.
APP.JSX
{% raw %}
import { FileManagerComponent, Inject, NavigationPane, Toolbar } from
'@syncfusion/ej2-react-filemanager';
function App() {
let fileObj;
return (<div>
showThumbnail={false} ajaxSettings={{
getImageUrl: hostUrl + 'api/FileManager/GetImage',
}}>
<Inject services={[NavigationPane, Toolbar]}/>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { FileManagerComponent, Inject, NavigationPane, Toolbar} from
'@syncfusion/ej2-react-filemanager';
function App() {
return (
<div>
FileManagerComponent)} id="file" showThumbnail={false}
ajaxSettings = {{
downloadUrl: hostUrl +'api/FileManager/Download',
getImageUrl: hostUrl +'api/FileManager/GetImage',
uploadUrl: hostUrl +'api/FileManager/Upload',
}} >
<Inject services={[ NavigationPane, Toolbar]} />
</div>

File manager How To
</div>
);
}
INDEX.JSX
INDEX.TSX
Nested items in React File manager component

FileManager can be rendered inside the other components like Tab, Dialog, and more.
• Adding file manager inside the dialog

• Adding file manager inside the tab
Adding file manager inside the dialog

The following example shows the file manager component rendered inside the dialog. Click the browse
button in the Uploader element to open the File Manager inside the Dialog control.
APP.JSX
{% raw %}
import { DetailsView, Inject, FileManagerComponent, NavigationPane, Toolbar
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
function App() {
let fileUploadObj;
let dialogObj;
let filemanagerObj;
let animationSettings = { effect: 'None' };
// 'Uploader' will be shown, if Dialog is closed
function dialogClose() {
document.getElementById('uploadFileManager').style.display =
'block';
}
// 'Uploader' will be hidden, if Dialog is opened
function dialogOpen() {
document.getElementById('uploadFileManager').style.display = 'none';
}
// File Manager's fileOpen event function
function onFileOpen(args) {

File manager How To
let file = args.fileDetails;

if (file.isFile) {
args.cancel = true;
if (file.size <= 0) {
file.size = 10000;
}
fileUploadObj.files = [{ name: file.name, size: file.size, type:
file.type }];
dialogObj.hide();
}
}
function btnClick() {
dialogObj.show();
filemanagerObj.path = "/";
filemanagerObj.selectedItems = [];
filemanagerObj.refresh();
}
let contextmenuItems = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename',
'|', 'Details'];
return (<div>
<div id='uploadFileManager' className="fileupload">
<UploaderComponent id='fileUpload' type='file' ref={(scope) =>
{ fileUploadObj = scope; }}></UploaderComponent>
<ButtonComponent id="openBtn"
onClick={btnClick.bind(this)}>File Browser</ButtonComponent>
</div>
<div id='target' className="control-section">
<DialogComponent width='850px' id='dialog' target={'#target'}
ref={(scope) => { dialogObj = scope; }} header="Select a file"
showCloseIcon={true} visible={false} open={dialogOpen.bind(this)}
close={dialogClose.bind(this)} animationSettings={animationSettings}>
<FileManagerComponent id="filemanager" ref={(scope) => {
filemanagerObj = scope; }} ajaxSettings={{
}} allowMultiSelection={false} toolbarSettings={{ items:
['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy',
'Refresh', 'Selection', 'View', 'Details'] }} contextMenuSettings={{ file:
contextmenuItems, folder: contextmenuItems }}
fileOpen={onFileOpen.bind(this)}>
Toolbar]}/>
</DialogComponent>
</div>
</div>
</div>);
}
export default App;
{% endraw %}
APP.TSX

File manager How To
{% raw %}
import { DetailsView, Inject, FileManagerComponent, NavigationPane, Toolbar
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent,AnimationSettingsModel } from '@syncfusion/ej2-
react-popups';
function App() {
let fileUploadObj: UploaderComponent;
let dialogObj: DialogComponent;
let filemanagerObj: FileManagerComponent;
let animationSettings:AnimationSettingsModel = { effect: 'None' };
// 'Uploader' will be shown, if Dialog is closed
function dialogClose(): void {
document.getElementById('uploadFileManager').style.display = 'block';
}
// 'Uploader' will be hidden, if Dialog is opened
function dialogOpen(): void {
document.getElementById('uploadFileManager').style.display = 'none';
}
// File Manager's fileOpen event function
function onFileOpen(args: any): void {
let file = (args as any).fileDetails;
if (file.isFile) {
args.cancel = true;
if (file.size <= 0 ) { file.size = 10000; }
fileUploadObj.files = [{name: file.name, size: file.size, type:
file.type }];
dialogObj.hide();
}
}
function btnClick(): void {
dialogObj.show();
filemanagerObj.path ="/";
filemanagerObj.selectedItems =[];
filemanagerObj.refresh();
}
let contextmenuItems: string[] = ['Open', '|', 'Cut', 'Copy', 'Delete',
'Rename', '|', 'Details'];
return (
<div>
<div id='uploadFileManager' className="fileupload">
<UploaderComponent id='fileUpload' type='file' ref = {(scope)
=> {fileUploadObj = scope}}></UploaderComponent>
<ButtonComponent id="openBtn" onClick={ btnClick.bind(this)
}>File Browser</ButtonComponent>
</div>
<div id='target' className="control-section">
<DialogComponent width='850px' id='dialog' target={'#target'}
ref={(scope) => {(dialogObj as any) = scope}} header="Select a file"
showCloseIcon={true}
visible={false} open={dialogOpen.bind(this)}
close={dialogClose.bind(this)} animationSettings={animationSettings} >

File manager How To
<FileManagerComponent id="filemanager" ref = {(scope) =>

{(filemanagerObj as any) = scope}} ajaxSettings = {{
}} allowMultiSelection={false}
toolbarSettings={{ items: ['NewFolder', 'Upload',
'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View',
'Details'] }}
contextMenuSettings={{ file: contextmenuItems, folder:
contextmenuItems }} fileOpen={onFileOpen.bind(this)}>
/>
</DialogComponent>
</div>
</div>
</div>
);
}
INDEX.JSX
INDEX.TSX
Adding file manager inside the tab

The following example demonstrate that the file manager component is placed inside the content area
of tab element.
APP.JSX
{% raw %}
import { TabComponent, TabItemDirective, TabItemsDirective } from
'@syncfusion/ej2-react-navigations';
function App() {
let fileObj;
let tabObj;
function select(args) {
fileObj.refreshLayout();
}

File manager How To
// Template for Pie Chart

function template1() {
return (<div className="template">
<div className="cnt-text">Overview</div>
<div className="content">The file manager component contains
a context menu for performing file operations, large-icons view for
displaying the files and folders, and a breadcrumb for navigation. However,
these basic functionalities can be extended by using the additional feature
modules like toolbar, navigation pane, and details view to simplify the
navigation and file operations within the file system.</div>
</div>);
}
function template2() {
return (<div className="template">
<div className="content-title">
<div className="cnt-text">File manager with default
functionalities</div>
</div>
allowDragAndDrop={true} ajaxSettings={{
}}>
Toolbar]}/>
</div>);
}
let headertext;
headertext = [{ text: "Overview" }, { text: "File Manager" }];
return (<TabComponent ref={(tab) => { tabObj = tab; }}
showCloseButton={true} heightAdjustMode='None' height={320}
selected={select}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={template1}/>
<TabItemDirective header={headertext[1]}
content={template2.bind(this)}/>
</TabItemsDirective>
</TabComponent>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
import { TabComponent, TabItemDirective, TabItemsDirective } from
function App() {

File manager How To
let tabObj: TabComponent;

function select(args: any): void {
fileObj.refreshLayout();
}
// Template for Pie Chart
function template1(): JSX.Element {
return(
<div className="template" >
<div className="cnt-text">Overview</div>
<div className="content">The file manager component contains
a context menu for performing file operations, large-icons view for
displaying the files and folders, and a breadcrumb for navigation. However,
these basic functionalities can be extended by using the additional feature
modules like toolbar, navigation pane, and details view to simplify the
navigation and file operations within the file system.</div>
</div>
);
}
function template2(): JSX.Element {
let hostUrl: string = "https://ej2-aspcore-
service.azurewebsites.net/";
return(
<div className="template" >
<div className="content-title">
<div className="cnt-text">File manager with default
functionalities</div>
</div>
FileManagerComponent)} id="file" allowDragAndDrop={true}
ajaxSettings = {{
}} >
/>
</div>
);
}
let headertext: any;
headertext = [{ text: "Overview" }, { text: "File Manager" }];
return (
<TabComponent ref={(tab) => { tabObj = tab }} showCloseButton={
true } heightAdjustMode='None' height={320} selected={select}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={ template1
as any } />
<TabItemDirective header={headertext[1]} content={
template2.bind(this) as any }/>
</TabItemsDirective>
</TabComponent>
);
}

File manager How To
INDEX.JSX
INDEX.TSX
Create the custom file provider using NodeJS

Here we manipulate the Azure Blob Storage to supply the necessary data for the File Manager. We
achieve this by utilizing NodeJS to fetch the required data from the Azure blob storage.
NodeJS acts as the bridge between the File Manager component and Azure Blob Storage, allowing
seamless communication and data retrieval. Through this integration, the File Manager can access and
interact with the data stored in Azure Blob Storage, enabling smooth file management operations.
Prerequisites
• Valid Azure blob storage account. ( accountName, accountKey, endpointSuffix)

• Node version 14 above.
Introduction to Azure Blob Storage

Azure Blob Storage is a cloud-based object storage service provided by Microsoft Azure. It is designed to
store and manage unstructured data, also known as "blobs" in the cloud. Blobs can be any type of data,
such as images, videos, documents, backups, logs, and more.
Key concepts of Azure Blob Storage
Containers: In Azure Blob Storage, data is organized into containers. Containers are logical units that can
hold one or more blobs. Think of them as directories or folders that help organize the data.
Blobs: Blobs are the actual data objects stored in Azure Blob Storage.
By understanding the fundamental concepts and use cases of Azure Blob Storage, you will be well-
prepared to proceed with setting up and interacting with it using NodeJS in the custom File Provider.
Create NodeJS project
Following the steps to create the NodeJS project.
Create a new directory for your project and run the following command to initialize a new NodeJS
project. This will create a package.json file.
`ts
npm init
`
Install the following packages.

File manager How To
• express
• @azure/storage-blob
• archiver
• body-parser
• cors
• esm
• multer
Open your text editor or integrated development environment (IDE) and create the index.js file start
writing your NodeJS code. This file will serve as the entry point of your application.
`ts
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, NodeJS!');
});
app.listen(port, () => {
console.log(Server running on http://localhost:${port});
});
`
To start your NodeJS application, simply run the following command in your terminal, pointing to the
entry point file:
`ts
node index.js
`
Initialize container client
We need to first get the BlobServiceClient. By using the connection string, we can obtain the
BlobServiceClient. So, format the connection string as shown below.
`ts
Const connectionString =
DefaultEndpointsProtocol=https;AccountName=${accountName};AccountKey=${accountKey};E
ndpointSuffix=${EndpointSuffix};
`
We can obtain the BlobServiceClient and the containerClient using this connection String and the
BlobServiceClient. the containerName is the container from your Azure blob storage account that you
need to access.
`ts

File manager How To
import { BlobServiceClient } from "@azure/storage-blob";

const blobServiceClient = BlobServiceClient.fromConnectionString(connectionString);
const containerClient = blobServiceClient.getContainerClient(containerName);
`
File actions
Need to provide the following action to creating a new folder, copying and moving of files or folders,
deleting, uploading, and downloading the files or folders in the file system
Read
Specify the directory name that needs to be accessed.
`ts
const directoryName = 'Files';
`
Create the app.post method with URL ‘/fileManager’.
To identify the action by use this condition req.body.action === ‘read’
The following table represents the request parameters of read operations.
|----|----|----|----|
|action|String|read|Name of the file operation.|
|path|String|-|Relative path from which the data has to be read.|
Example for request:
`ts
{
action: "read",
path: "/Videos/",
data: [
0:{
name:"Videos",
size:0,
dateModified:"2023-09-14T14:28:27.000Z",
dateCreated: "2023-09-14T11:16:57.000Z",
hasChild:true,

File manager How To
isFile:false,
type:"Directory",
filterPath:"/",
fmicon: "e-fe-folder",
fmiconClass: "e-fe-folder",
fmid: "fetree0",
fmmodified: "September 14, 2023 19:58"
}
]
}
`
The following table represents the response parameters of read operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of files and folders present in given path or directory.|
<a id="file-manager-directory-content"></a>
The following table represents the contents of FileManagerDirectoryContent in the file manager
request and response.
|Parameter|Type|Default|Explanation|Is required|
|----|----|----|----|----|
|name|String|-|File name|Yes|
|dateCreated|String|-|Date in which file was created (UTC Date string).|Yes|
|dateModified|String|-|Date in which file was last modified (UTC Date string).|Yes|
|filterPath|String|-|Relative path to the file or folder.|Yes|
|hasChild|Boolean|-|Defines this folder has any child folder or not.|Yes|
|isFile|Boolean|-|Say whether the item is file or folder.|Yes|
|size|Number|-|File size|Yes|
|type|String|-|File extension|Yes|
|permission |AccessRules|-|File extension|Optional|
|caseSensitive|Boolean|-|Defines search is case sensitive or not.|Optional|
|action|String|read|Name of the file operation.|Optional|

File manager How To
|names|String[]|-|Name list of the items to be downloaded.|Optional|

|data|FileManagerDirectoryContent|-|Details of the download item.|Optional|
|uploadFiles|IList<IFormFile>|-|File that are uploaded.|Optional|
|newName|String|-|New name for the item.|Optional|
|searchString|String|-|String to be searched in the directory.|Optional|
|targetPath|String|-|Relative path where the items to be pasted are located.|Optional|
|targetData|FileManagerDirectoryContent|-|Details of the copied item.|Optional|
|renameFiles|String[]|-|Details of the renamed item.|Optional|
<a id="access-rules"></a>
The following table represents the AccessRules properties available for file and folder:
| Properties | Applicable for file | Applicable for folder | Description |
| --- | --- | --- | --- |
| Copy | Yes | Yes | Allows access to copy a file or folder. |
| Read | Yes | Yes | Allows access to read a file or folder. |
| Write | Yes | Yes | Allows permission to write a file or folder. |
| WriteContents | No | Yes | Allows permission to write the content of folder. |
| Download | Yes | Yes | Allows permission to download a file or folder. |
| Upload | No | Yes | Allows permission to upload to the folder. |
| Path | Yes | Yes | Specifies the path to apply the rules, which are defined. |
| Role | Yes | Yes | Specifies the role to which the rule is applied. |
| IsFile | Yes | Yes | Specifies whether the rule is specified for folder or file. |
Example for response:
`ts
{
cwd:
{
filterPath: "/",
hasChild: true,
name: "Videos",
size: 0,
type: "File Folder"
},
files:[

File manager How To
0:{
dateCreated: "2023-09-14T11:16:57.000Z"
dateModified: "2023-09-14T11:16:57.000Z"
filterPath: "/Videos/"
hasChild: false
isFile: true
name: "about.txt"
size: 29
type: ".txt"
}
],
error:null
}
`
Get image
Create the app.get method with URL ‘/fileManager/GetImage’.
The following table represents the request parameters of GetImage operations.
|----|----|----|----|
|path|String|-|Relative path to the image file|
The req.query.path contains the exact path of the images. For example: "/Jack.png".
Download the blob (image) from Azure Blob Storage using the blobClient and stores the result in the
downloadResponse variable.
Pipe the readableStreamBody from the blob to the res response. It means the image data will be
streamed from the Azure Blob Storage directly to the client's browser when the image URL is accessed.
Handle the exception if the image is not available in the given path.
Download
Create the app.post method with URL ‘/fileManager/Download’.
The following table represents the request parameters of download operations.
|----|----|----|----|
|action|String|download|Name of the file operation|
|path|String|-|Relative path to location where the files to download are present.|
|names|String[]|-|Name list of the items to be downloaded.|

File manager How To
|data|FileManagerDirectoryContent|-|Details of the download item.|

`ts
{
action: 'download',
path: '/Downloads/Testing/',
names: [ 'About.txt' ],
data: [
0:{
name: 'About.txt',
type: '.txt',
isFile: true,
size: 29,
dateModified: '2023-09-14T06:03:52.000Z',
hasChild: false,
filterPath: '/Downloads/Testing/',
fmcreated: null,
fmmodified: 'September 14, 2023 11:33',
fmiconClass: 'e-fe-txt',
fmicon: 'e-fe-txt'
}
]
}
`
The req.body. downloadInput must be parsed to get the downloadObj. Download the blob from Azure
Blob Storage using the blobClient.
Download the blob from Azure Blob Storage using the blobClient and Pipe the readableStreamBody to
the response object.
Create the archive file to download the multiple Files, Folders and single folders, then pipe the archive
to the response.
Upload
Create the app.post method with URL ‘/fileManager/Upload.
The following table represents the request parameters of Upload operations.

File manager How To
|----|----|----|----|
|action|String|Save|Name of the file operation.|
|path|String|-|Relative path to the location where the file has to be uploaded.|
|uploadFiles|IList<IFormFile>|-|File that are uploaded.|
`ts
{
path: '/Pictures/',
action: 'save',
data: [
0:{
name: 'Pictures',
type: 'File Folder',
isFile: true,
size: 0,
dateModified: '2023-09-14T06:03:52.000Z',
hasChild: true,
filterPath: '',
fmid: 'fetree1',
}
],
filename: 'bird (2).jpg'
}
`
Multer is a popular middleware used to handle file uploads in Express-based web applications. Create
the Multer config to store the upload files in buffer.
`ts
const multerConfig = {
storage: memoryStorage()
};
`
Need to handle the 3 cases here.
• Save

File manager How To
• Keep Both (action name will be keepboth)

• Replace (action name will be replace)
Create the getBlockBlobClient with the req.body.filename. If the blob does not exist, then upload the
data to that blob. If the blob already exists, then create an error message containing "File Already Exists"
and send the response.
Create a new folder
The following table represents the request parameters of create operations.
|----|----|----|----|
|action|String|create|Name of the file operation.|
|path|String|-|Relative path in which the folder has to be created.|
|name|String|-|Name of the folder to be created.|
`ts
action: "create",
data: [
0:{
filterPath: "/",
hasChild: true,
isFile: false,
name: "files",
nodeId: "fe_tree",
size: 0,
type: ""
}
],
name: "Hello",
path: "/test/"
`
Check the existence of the folder, If the folder exists then send the error message containing “Folder
already exists”. If it does not exist, then create the folder. Create the folder by creating the file in that
folder’s path.
The following table represents the response parameters of create operations.

File manager How To
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of the created folder|
`ts
{
cwd: null,
files: [
0:{
dateCreated: "2023-09-14T10:52:25.000Z",
dateModified: "2023-09-14T10:52:25.000Z",
filterPath: null,
hasChild: false,
isFile: false,
name: "New",
size: 0,
type: "Directory"
}
],
details: null,
error: null
}
`
Rename
The following table represents the request parameters of rename operations.
|----|----|----|----|
|action|String|rename|Name of the file operation.|
|path|String|-|Relative path in which the item is located.|
|name|String|-|Current name of the item to be renamed.|
|newName|String|-|New name for the item.|
|data|FileManagerDirectoryContent|-|Details of the item to be renamed.|

File manager How To
`ts
{
action: "rename",
data: [
0:{
dateCreated: "2023-09-14T10:41:17.000Z",
filterPath: "/Pictures/Nature/",
hasChild: false,
isFile: true,
size: 95866,
type: ".jpg"
}
],
newName: "seaview.jpg",
path: "/Pictures/Nature/"
}
`
Renaming can be done by copy the folder or file from the source blob instance to target blob instance. If
the file exists, then send the error message as response.
The following table represents the response parameters of rename operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of the renamed item.|
`ts
{
cwd:null,
files:[
0:{

File manager How To
name:"seaview.jpg",
size:95866,
dateModified:"2023-09-14T11:16:57.000Z",
dateCreated:"2023-09-14T10:41:17.000Z",
hasChild:false,
isFile:true,
type:".jpg",
filterPath:"/Pictures/Nature/"
}
],
error:null,
details:null
}
`
Delete
The following table represents the request parameters of delete operations.
|----|----|----|----|
|action|String|delete|Name of the file operation.|
|path|String|-|Relative path where the items to be deleted are located.|
|names|String[]|-|List of the items to be deleted.|
|data|FileManagerDirectoryContent|-|Details of the item to be deleted.|
`ts
{
action: "delete",
path: "/",
names: ["bird.jpg"],
data: [
0:{
dateModified: "2023-09-14T09:12:53.000Z",
filterPath: "/",
hasChild: false,

File manager How To
isFile: true,
name: "bird.jpg",
size: 102182,
type: ".jpg"
}
]
}
`
To delete the file, directly get the file instance and delete the file. To delete the folder, we need to get
all files inside that folder and delete all those files.
Handle the null exception if file or folder is not available.
The following table represents the response parameters of delete operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details about the deleted item(s).|
`ts
{
cwd: null,
details: null,
error: null,
files: [
0:{
dateModified: "2023-09-14T09:12:53.000Z",
filterPath: "/",
hasChild: false,
isFile: true,
name: "bird.jpg",
size: 102182,
type: ".jpg"

File manager How To
}
]
}
`
Details
The following table represents the request parameters of details operations.
|----|----|----|----|
|action|String|details|Name of the file operation.|
|path|String|-|Relative path where the items are located.|
|names|String[]|-|List of the items to get details.|
|data|FileManagerDirectoryContent|-|Details of the selected item.|
Example:
`ts
{
action: "details",
path: "/FileContents/",
data: [
0:{
dateModified: "2023-09-14T09:12:53.000Z",
filterPath: "/",
hasChild: false,
isFile: true,
name: "bird.jpg",
size: 102182,
type: ".jpg"
}
]
}
`
To get the file and folder details, iterate the req.body.names to get the details of files and folders. If the
data is file, then get the file instance and get the properties using the getProperties method. If the data

File manager How To
is Folder, then get the blobs details under that folder using listBlobsFlat method. Get the required
properties and send final response. Handled the null exception if the file or folder is not available.
The following table represents the response parameters of details operations.
|----|----|----|----|
|details|FileManagerDirectoryContent|-|Details of the requested item(s).|
Example:
`ts
{
cwd:null,
files:null,
error:null,
details:
{
created: "2023-09-15T06:04:12.000Z"
isFile: true
location: "Files/bird.jpg"
modified: "2023-09-15T06:04:12.000Z"
multipleFiles: false
name: "bird.jpg"
size: "100.0 KB"
}
}
`
Search
The following table represents the request parameters of search operations.
|----|----|----|----|
|action|String|search|Name of the file operation.|
|path|String|-|Relative path to the directory where the files should be searched.|
|caseSensitive|Boolean|-|Defines search is case sensitive or not.|
|searchString|String|-|String to be searched in the directory.|

File manager How To
|data|FileManagerDirectoryContent|-|Details of the searched item.|

`ts
{
action: "search",
path: "/asia/",
searchString: "nature",
caseSensitive: false,
data: [
0:{
filterPath: "/",
hasChild: true,
name: "asia",
size: 0,
type: "File Folder",
fmid: "fetree1"
}
]
}
`
Replace the '*' in the req.body.searchString and assign the result to new variable. Get all blobs under
this directory and check that path contains the search string
The following table represents the response parameters of search operations.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Files and folders in the searched directory that matches the
search input.|
`ts
{
cwd:

File manager How To
{
name:"asia",
size:0,
dateModified:"2023-09-14T14:28:27.000Z",
dateCreated:"2023-09-14T11:16:57.000Z",
hasChild:true,
isFile:false,
type:"File Folder",
filterPath:"/"
},
files:[
0: {
dateModified: "2023-09-15T06:22:00.000Z",
filterPath: "/asia/",
hasChild: false,
isFile: true,
name: "about.txt",
size: 42,
type: ".txt"
}
],
error:null,
details:null
}
`
Copy and move
The following table represents the request parameters of copy operations.
|----|----|----|----|
|action|String|copy|Name of the file operation.|
|names|String[] |-|List of files to be copied.|

File manager How To
|data|FileManagerDirectoryContent|-|Details of the copied item.|

|targetData|FileManagerDirectoryContent|-|Details of the copied item.|
`ts
{
action: "copy",
path: "/",
renameFiles: [],
targetPath: "/asia/",
targetData: {
filterPath: "/",
hasChild: true,
name: "asia",
size: 0,
type: "File Folder",
fmid: "fetree1",
},
data: [
0:{
dateCreated: "2023-09-15T06:04:12.000Z",
dateModified: "2023-09-15T06:04:12.000Z",
filterPath: "/",
hasChild: false,
isFile: true,
name: "bird.jpg",
size: 102182,
type: ".jpg",
fmcreated: "September 15, 2023 11:34",
fmhtmlAttr: {class: "e-large-icon", title: "bird.jpg"},
fmiconClass: "e-fe-image",
fmimageAttr: {alt: "bird.jpg"},

File manager How To
fmimageUrl: "http://localhost:3000/GetImage?path=%2Fbird.jpg&time=1694760243307",
fmmodified: "September 15, 2023 11:34",
}
]
}
`
Action name will be move for move action.
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of copied files or folders|
`ts
{
cwd:null,
files:[
0:{
dateCreated: "2023-09-15T06:55:03.000Z"
dateModified: "2023-09-15T06:55:03.000Z"
filterPath: "/asia/"
hasChild: false
isFile: true
name: "bird.jpg"
previousName: null
size: 102182
type: ".jpg"
}
],
error:null,
details:null
}

File manager How To
`
Need to handle two cases.
• Directory copy and move.

• File copy and move.
Create the isRename variable to store the is request is rename or not. If the isRename is false then
check the existence of the folders, and if folder is existing, then send the error message. If isRename is
true, then don’t check the existence of the folder.
To move or copy the folders you need to get all the blobs from that folder and create the new path for
each blob and copy the data from the old path to the new path. To move or copy the files copy the data
from the source blob client to target client. If the action is move then delete the old blob.
Note: To get the complete project, refer to this link
Preselect the items in React File manager component
You can preselect the items in the File Manager component by utilizing the fileLoad event. The required
file and folder names must be stated in the declared string array variable. In the event handler, we have
to assign the array of file and folder names to the selectedItems property.
The following example shows how to preselect the items.
APP.JSX
{% raw %}
function App() {
let fileObj;
let fileNames = [
'Documents',
'EJ2 File Manager.docx',
'EJ2 File Manager.pdf',
'File Manager PPT.pptx'
];
function fileLoad(args) {
// Set the array of file names to enable selection.
fileObj.selectedItems = fileNames;
}
return (<div>
</div>
</div>);

File manager How To
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
FileLoadEventArgs } from '@syncfusion/ej2-react-filemanager';
function App() {
let fileNames: string[] = [
'EJ2 File Manager.docx',
'EJ2 File Manager.pdf',
'File Manager PPT.pptx',
'Documents'
];
function fileLoad(args: FileLoadEventArgs) {
// Set the array of file names to enable selection.
fileObj.selectedItems = fileNames;
}
return (
<div>
<FileManagerComponent ref={ s => ((fileObj as any) = s as
ajaxSettings = {{
/>
</div>
</div>
);
}
export default App;
{% endraw %}
INDEX.JSX
INDEX.TSX

File manager How To

Perform custom sorting in React FileManager component

The FileManager component provides a way to customize the default sort action for the LargeIconsView
by defining the sortComparer property and for sorting individual columns in the DetailsView by defining
the sortComparer property in the columns property.
Note: To achieve natural sorting like Windows Explorer, you can import the SortComparer function
from the ‘@syncfusion/ej2-react-filemanager’. If you want to perform your own custom sorting, you
can define your own Link to the Video function.
The following example demonstrates how to define custom sort comparer function to achieve natural
sorting behavior for the LargeIconsView and name column in DetailsView.
APP.JSX
{% raw %}
sortComparer } from '@syncfusion/ej2-react-filemanager';
function App() {
downloadUrl: hostUrl + 'api/NaturalSorting/Download',
getImageUrl: hostUrl + "api/NaturalSorting/GetImage",
uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
url: hostUrl + "api/NaturalSorting/FileOperations"
columns: [
{ field: 'name', headerText: 'File Name', minWidth: 120, width:
'auto', sortComparer: sortComparer },
{ field: 'size', headerText: 'File Size', minWidth: 50, width:
'110', template: '${size}' },
{ field: '_fm_modified', headerText: 'Date Modified', minWidth: 50,
width: '190' }
]
}} sortComparer={sortComparer}>
<Inject services={[NavigationPane, DetailsView, Toolbar]} />
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
sortComparer } from '@syncfusion/ej2-react-filemanager';
function App() {
let hostUrl : string = "https://ej2-aspcore-service.azurewebsites.net/";

FloatingActionButton Getting Started with React Floating Action Button Component

downloadUrl: hostUrl + 'api/NaturalSorting/Download',
getImageUrl: hostUrl + "api/NaturalSorting/GetImage",
uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
url: hostUrl + "api/NaturalSorting/FileOperations"
columns: [
{ field: 'name', headerText: 'File Name', minWidth: 120, width:
'auto', sortComparer: sortComparer },
{ field: 'size', headerText: 'File Size', minWidth: 50, width:
'110', template: '${size}' },
{ field: '_fm_modified', headerText: 'Date Modified', minWidth: 50,
width: '190' }
]
}} sortComparer={sortComparer}>
<Inject services={[NavigationPane, DetailsView, Toolbar]} />
</div>);
}
export default App;
{% endraw %}
INDEX.JSX
INDEX.TSX
FloatingActionButton
Getting Started with React Floating Action Button Component
This section explains how to create a simple Floating Action Button and demonstrate the basic usage of
the Floating Action Button component in an React environment.
To get start quickly with React Floating Action Button component, you can check on this video:
Dependencies
The list of dependencies required to use the Floating Action Button component in your application is
given below:
`js
|-- @syncfusion/ej2-react-buttons
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-base

|-- @syncfusion/ej2-buttons
`
Installation and Configuration
You can use Create-react-app to setup
the applications. To install create-react-app run the following command.
`bash
`
Start a new project using create-react-app command as follows
`
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
`
`
create-react-app quickstart
cd quickstart
`
'react-scripts-ts' is used for creating React app with typescript.
To install Floating Action Button component, use the following command
`bash
npm install @syncfusion/ej2-react-buttons --save
`
Adding Floating Action Button Component to the Application
To include the Floating Action Button component in your application import
the FabComponent from ej2-react-buttons package in App.tsx.
Add the Floating Action Button component in application as shown in below code example.
`ts
{ / Import the Floating Action Button / }
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import './App.css';
{ / To render Floating Action Button. / }

function App() {
return (
<FabComponent id='fab'></FabComponent>
);
}
export default App;
`
Adding CSS reference
Import the Floating Action Button component's required CSS references as follows in src/App.css.
`css
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
`
Running the application
Run the application in the browser using the following command:
`
npm start
`
The following example shows a basic Floating Action Button component.
APP.JSX
{% raw %}
import { enableRipple } from '@syncfusion/ej2-base';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
return (<div>
<div id="targetElement" style={{ position: 'relative',
minHeight: '350px', border: '1px solid' }}></div>
{/* To render Floating Action Button with position. */}
<FabComponent id='fab' content='Add'
target='#targetElement'></FabComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{% endraw %}
APP.TSX
{% raw %}


enableRipple(true);
function App() {
return (
<div>
{/* To render Floating Action Button with position. */ }
<FabComponent id='fab' content='Add'
</div>
);
}
export default App;
{% endraw %}
Click event
The floating action button control triggers the onclick event when you click on the floating action
button. You can use this event to perform the required action.
APP.JSX
{% raw %}
function App() {
function onClick() {
alert("Edit is clicked!");
}
return (<div>
{/* To render Floating Action Button */}
<FabComponent id='fab' iconCss='e-icons e-edit' content='Edit'
onClick={onClick} target='#targetElement'></FabComponent>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
function onClick(): void {
}

FloatingActionButton Icons in React Floating action button component
return (
<div>
{/* To render Floating Action Button */ }
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Icons in React Floating action button component

You can customize the icon and text of React Floating Action Button(FAB) using iconCss and content
properties.
FAB with icon
You can show icon only in Floating Action Button by setting iconCss property. You can show tooltip on
hover to show additional details to end-user by setting title attribute.
`ts
function App() {
return (
{/ To render Floating Action Button with icon only /}
<FabComponent id='fab' iconCss='fab-icons fab-icon-people'></FabComponent>
);
}
export default App;
`

FAB with icon and text

You can show icon along with text in Floating Action Button by setting iconCss and content properties.
`ts
function App() {
return (
{/ To render Floating Action Button with icon and text / }
< FabComponent id = 'fab' iconCss = 'fab-icons fab-icon-people' content = 'Contacts' ></FabComponent
>
);
}
export default App;
`
Icon position
You can change the position of icon when showing along with content by setting iconPosition property.
By default, the icon is positioned on the left side together with text.
`ts
function App() {
return (
{/ To render Floating Action Button with icon position. /}
<FabComponent id='fab' iconCss='fab-icons fab-icon-people' content='Contacts'
iconPosition='Right'></FabComponent>
);
}
export default App;
`
Below example demonstrates a FAB with icon and text.
APP.JSX
{% raw %}
function App() {
return (<div>


<FabComponent id='fab' iconCss='fab-icons fab-icon-people'
content='Contacts' iconPosition='Right'
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<div>
<FabComponent id='fab' iconCss='fab-icons fab-icon-people'
content='Contacts' iconPosition='Right'
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
/* Represents the styles for fab icon */
@font-face {
font-family: 'fab-icons';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSgIAAAEoAAAAVmNtYXDnYOfNAAAByAAAAFZnbHlmkfZ
LRAAAAkgAABboaGVhZCF5f3EAAADQAAAANmhoZWEIUQQTAAAArAAAACRobXR4SAAAAAAAAYAAAAB
IbG9jYTveNR4AAAIgAAAAJm1heHABIQIXAAABCAAAACBuYW1lkwSegQAAGTAAAAIxcG9zdKKfPWY
AABtkAAAAzQABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAEgABAAAAAQAAbzQqW18
PPPUACwQAAAAAAN8znUAAAAAA3zOdQAAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAASAgsABQAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnEAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA

EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABCAAAABAAEAAEAAOcQ//8AAOcA//8AAAABAAQ
AAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAAAAAAAABpAPmBFQEggSaBK4FQAX
sBrgG1AfcCBAI5gj8CR4KPAt0AAAABAAAAAAD9APoAD0AewC5AXAAACUfCRUPDiMvDjU/Dh8CAR8
LFQ8OIy8PPw4XAR8LHQEPDi8OPQE/DDMXJw8KHQEfAgUvCSsBDw4VHw4zPwcBDwEdAR8NPw41Lw4
jDwkBNzUvASUfCTM/DT0BLw4rAQ8BA5AGBgYFBAQDAgIBAQECAwMFBAUGBgcHBwgHCAcIBwcHBgY
GBQQEAwICAQEBAgMDBQQGBQYHBwcKCwoJCv0nBwcGBgYFBAQDAwIBAQECAgQEBQUFBgcHBwcHCAc
ICAcHBgYGBQQEAwMBAQEBAQIDAwQEBgUGBwkICQoLAtwHBwcGBQUFBAMCAgEBAgMDBAUFBgYGBwg
HBwgIBwcIBwYGBQUFBAMCAgEBAgMDBAUFBQcGCQkJCQxMDAsKCQgHBgUDAgEBAQP+HwYHCAgICQk
KDQ4ODQ4NDAwMCwoJCAcHBAQCAQIDBQYHCAgKCwwMDQoLCgoREBAPDg0MCgHdAgICAgQGBggJCQs
MEBESERMSDQwMCwsJCAgGBQQCAQIDBAYGCAkJCwwMDQ0NDQ4NDgoKCQkJCAcH/h4CAQMB4gcOBwg
JCQkKCwoLEBAQEAsLCwkIBwYFAwMCAwUFBwgJCgsLDA0KCgoKEREQ2QQEBQYGBgYHBwcHBwcHBwY
HBQUFBAMDAgIBAQECAgQEBAUFBgYHBwcHBwcHBwYHBgYFBAQEAwICAQECAwFvAgMEBAUGBQcGBwc
HBwcHBwcHBgUFBQQEAwICAQEBAgIDBAQFBQYGBwcHBwcHBwcHBgYGBQUEBAMDAQEBAV0DAwQEBQU
GBgcHBggHBwcHBgcGBgUEBQMDAwEBAQEBAgIEAwUEBgYGBgcHBwcHBwcHBwYFBQUEBAMDAgEsBwc
ICgoLCwwKCQkKCQkJCeoHBgYFBQUEAwMDAgMEBQcHCAkLCgwNDA0NDA0MDAwLCwkJBwcGBAMCAQE
CBQYICQsM/v8IERAJCAgNCwsLCQkIBwgFAwEBAwQFBggICQoLDAwMDA0NDA0MDAsLCQkIBwYEBAI
BAgIDBAQFBgYHBwEDDg0NDewHDAUFBAQDAwIBAQMEBwYICAkKCwwMDA0NDA0MDAwLCwkJCAYGBAM
CAQMEAAAABQAAAAAD7wP0AD8AfwEQAVACCgAAARUPDSsBLw4/DjsBHw0FFQ8NKwEvDT0BPw07AR8
NAR8QFQcvAiMPDx8HDwcjLwc/By8PDwMvAj8QHw8/DycVDw0rAS8NPQE/DTsBHw0nDxUdAR8DDwg
fDjsBPwIfDjsBPw4fAjsBPw4vCD8CPQEvLSMPDgOxAgIDBAUFBwYHCAgJCQkKCQoJCAgIBwcGBgQ
EAwMBAQEBAwMEBAYGBwcICAgJCgkKCQkJCAgHBgcFBQQDAgL9WQEDAwQFBQYHBwgICAkKCQoJCQk
ICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgkKCQgICAcHBgUFBAMDAQGEDg0aGRcWFBMSDw4MCQg
GAwEDDAwMDBAPDw4ODQwLCgkIBwUEAgEBAgMFBgcIDRAaGhwcHR4eHh4dHR0bGxoQDQgHBgUDAgE
BAgQFBwgJCgsMDQ4ODw8QDAwMDAECAQEDBQcJCgwODxETExULFxkQBgYGBggICQkKCgsLDAwMDA4
NDQwMDAsKCggJBwcFBQQ6AgIDBAUFBgcHCAgICQoJCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAg
JCQkKCQoJCAgIBwcGBQUEAwIC+AEXDw8ODhoZGBYUEhAOCwoEAwMCAgEBAgMDBgoJCAYFBAMBAQM
EBQYICQoLDA0ODg8QEA4NDg8PEBAQERIREhISExMSFBMTExITEhITERIREREREBAPFg8ODQ4QEA8
ODg0MCwoJCAYFBAMBAQMEBQYICQoGBQICAQIDAwQEBQYGBwgICQkKCgsMDAwNDQ4ODw8PEBAQGgQ
EBQcHCAkKCwsLDQ0NDQ4PDg4NDQwLCwkJCQcGBQQBAAoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwg
ICQkJCgkKCQgICAcHBgUFBAMDAQEDAwQFBQYHBwgICAkKCQoJCQkICAcHBgUFBAMCAgICAwQFBQY
HBwgICQkJCgkKCQgICAcHBgUFBAMDAQEDAwQFBQYHBwgICAkKAigGBg4PERMUFhYZGRobHBwdHRs
bAwICAQIEBQcICQoLDA0NDw8PEA8PDg0NDQsPCw8NCwkHBAICBAcJCwwPCxALDQ0NDg8PEA8PDw0
NDAsKCQgHBQQCAQEBAgMKFhYbGxsaGhkYFxYVFBMRCA8OBxALCgkJCQgHBgYFBAMDAQEBAgIEBQY
GCAgJCgoLCwwOJgoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgkKCQgICAcHBgUFBAMDAQE
DAwQFBQYHBwgICAkKDgcKBwgICRMVFxgZGxwdHx8PEBEQEBEQExMTEwwFCwwNDg4PDxAQEA8ODg0
MCwoJCAYFBAMCAwUMCwoJCQgHBwYFBAQDAgEBAgMDBAUGBgcICAkJCxAFAwIDBAUHBwkKDAwNDQ8
OEBAQDw8PDQ0MCwUYFRUWEhESERERERAREA8QDw8ODg4NDQ0MDAsKCgoJCAgIBgkQDQwMCwoKCAg
HBwUEAwIBAgMEBgYICAoKCwsNDA4AAAMAAAAAA/QD9AAHACoAUAAACQEVMwERIRElMx8ODwcBBzU
BPwUnByERIRE/CDUvDg8GApn+D8MB7fzyAyMIBwcGBwYFBgYEAwMCAQEBAQEBAgMDBAX9rmkCVwY
GBwcHB1o1/TUDijkJBwYGBAMBAQIDAwUGCAgMCwsMDQ0ODg0ODQ0MCwsDWP4QwAHz/a8DDl0BAgI
DBAQFBgYFBgcGBgcGBwYGBgYFBv2oAWgCVgUEAwICARY1/HYCzjoKCgsLDAwMDAwMDAwLCwoKDAg
HBgUDAgEBAgMFBgcIAAADAAAAAAP0A/QAAgAGABkAADclJzcXASc3Bxc/AzUvBw8CDAEk6jvpAdP
qqW7pcgUEAgIEBaYICQkKCQkJDDrqOukB0umpbulyCAkKCQoJCKYHBAMBAQMEAAAAAAEAAAAAA/Q
D9AALAAABIRUhETMRITUhESMBwv5KAbZ8Abb+SnwCPnz+SgG2fAG2AAEAAAAAA/MDDwAFAAATFwk
BNwEMLAHKAcYs/g4BHSwBxv48LQHvAAABAAAAAAP0A/QAgQAAEw8TFR8cPxw1LxMPDS8NB+0JCRM
TEhMREhAQDg0LCgQEAwIDAQICAwMFBQYGCAgKCgsMDg4PEBETExUWFxgZNzxBQTw3GRgXFhUTExE
QDw4ODAsKCggIBgYFBQMDAgIBAwIDBAQKCw0OEBASERMSExMfFx8TEhEQDw4ODQwMDBcXFxcMDAw
NDg4PEBESEyAXA/EBAgUGCQsMDxETFBcZGw4PDxAQETsQERARERISEhISExMUExQUFRQVFhUWFhc
XFy8wMjIwLxcXFxYWFRYVFBUUFBMUExMSEhISEhEREBEQOxEQEA8PDhsZFxQTEQ8MCwkGBQUBAQE
DBAUGBwgJCQsLGRwcGQsLCQkIBwYFBAMBAQEAAAAAAgAAAAADOwP0AEAAlAAAAR0BDw4vDz8PHw4
FFxUfBgEbAT8HNS8dKwEPHQKiAwQFBwgJCwsNDQ4PEBARERAQDw4NDQsLCQgHBQQDAQEDBAUHCAk
LCw0NDg8QEBEQEA8PDg4MDAsJCAcGBAP+IgEDBAYHCAoLAQqJhAoJCAcFAgQBAQIDAwQFBgYHCAg
JCQoLCgwMDA0NDg4ODw8PEBAQEBAQEBAPDw8ODg4NDQwMCwsLCgkJCAgHBgYFBAMDAgECvAkIDw8
PDgwMCwoJCAcFBAIBAQIEBQcICQoLDAwODw8PERAPDw8ODAwLCgkIBwUEAgEBAgQGBggKCgsMDQ0
PDw8GCwsVFRQUExMR/eYBEAEKERMTFBQKFRYbDw8PDw8ODQ4NDQwMCwsLCgkJCQcIBgYGBAUDAwE
CAgEDAwUEBgYGCAcJCQkKCwsLDAwNDQ4NDg8PDw8PAAACAAAAAAOTA/QAdAC2AAAlFSMVITUjNT8

eNSMPFS8VIxUfHQMRHw8/DxEvDw8OAdGJAXeKEhISEhEREBAPEA4ODg0NDAsLCwkJCQcHBgYEBAM
CAlcCAgMEBAUFBgcHCAgSFRYXGhocHh4fHx4eHBoaFxYVEggIBwcGBQUEBAMCAlcCAgMEBAYGBwg
ICQoKCwwMDQ0ODw4QEBARERESExJ2AQIFBggKCgwNDw8QERESExMSEREQDw8NDAoKBAcFBAIBAgU
GCAkKDA0OEBARERMTExMSERAPDw0MCwkHBgUCuFtRUVsCAwMEBQUGBgcICAgJCgoKCwsMDAwNDQ4
NDg8ODw8PEA0MCwwLDAsKCwoKCRIRDw0MCgcGBAEBBAYHCgwNDxESCQoKCwoLDAsMCwwNEA8PDw4
PDg0ODQ0MDAwLCwoKCgkICAgHBgYFBQQDAwKk/rgQDw4ODQ0LCwkJBwcEBAIBAQIEBQYICQkLDAw
HDQ4ODwFQEA8ODg0NCwsJCQcGBQQCAQECBAUGBwkJCwsNDQ4ODwAAAAABAAAAAAP0A/IACQAAASE
FAyUFAyUhAwGJ/oMBNXYBNQE1dgE1/oN3AnXq/oPq6gF96gF9AAAAAAIAAAAAA/QDvQB3AO4AAAE
VHxMPFSEvFT8VLw8PDicfFA8VIT8KLw8/Dy8OIw8OAcsCAwQFBgYICAoKCgwMDQ8GBgICAQEBAgI
DAwQeNRkZFxcVFRMSEA8ODAoC8QoMDg8QEhMVFRcXGRkaGxsDBwcCAgEBAQMDAwQUDQwLCwoKCAg
GBgUEAwEBAQMEBgcJCgsNDQ4QEBEREhISEhAQDg4NCwoJBwYFAvgBAQMEBQYGCAgKCgsLDA0QBgU
DAQEBAQICAwMEHjUZGRcXFRUTEhAPDgwKAQMMDAwNDg4dHh8gIQ0MCwoJCQgHBwUFBAMCAQEBAgM
FBgYICQoLCw0NDg4PBgcHCAgJCQkKCgsLCwsLDBIRERAQDg0NCwoJBwYEAwJWExISERAPDg4NDAw
KCgkICQYHBQQFBAUEBAQDAgwXCw0NDg4QERIUFRYYGhkYFxUTEhIQDw4NDQsLCwoCBQgEBQQGBQU
FAwQLCAkKCwsMDQ0PDw8RERISFhYVFRMSEQ8ODQsJBwUEAQEEBQcKCg0OEBASFBQVFncTExEREA8
PDQ0MDAoKCQkJBQcFBAUFBAUEAwMDDBYMDA0ODw8REhQVFhkaDQ0MDAsKFBMQEA8KDAwMDQ4ODhA
PEBARERISFRQUFBMSEREQDw8NDAsKCQwLCgoJCQgIBgYFBQMCAgEDBQgJCwwOEBESExQVFgAAAAE
AAAAAAvAD9AAkAAABERsBES8PIw8OAQ/t9QECAwUFBwgICgoLDAwNDQ7WDg0NDAwLCgoICAcFBQM
CA238nwEW/uoDYQ4NDQ0LCwsJCQgHBQUDAgEBAgMFBQcICQkLCwsNDQ0AAAAAAwAAAAAD9AP0AD8
AfwC1AAAlHw8/Dy8PDw4FHw8/Dy8PDw4DMxMPAhUfDiE1IS8ENyE/BhM/AjUvBiEnIwLIAQECBAQ
FBQcHCAgJCQoKCgoKCgkJCAgHBwUFBAQCAQEBAQIEBAUFBwcICAkJCgoKCgoKCQkICAcGBgUEBAI
B/gsBAQIEBAUFBwcICAkJCgoKCgoKCQkICAcHBQUEBAIBAQEBAgQEBQUHBwgICQkKCgoKCgoJCQg
IBwYGBQQEAgHJZLVICAECAgQEBQUHBwgICQkJCgsCW/27AwMCAQEsAXEPDQwMCggIvAMEAgIDBQc
ICQr9FSumcAoKCgkJCAgHBgYFBAQCAQEBAQIEBAUFBwcICAkJCgoKCgoKCQkICAcHBQUEBAIBAQE
BAgQEBQUHBwgICQkKCgoKCgoJCQgIBwYGBQQEAgEBAQECBAQFBQcHCAgJCQoKCgoKCgkJCAgHBwU
FBAQCAQEBAQIEBAUFBwcICAkJCgoDFv6DdyYMCgoKCQkICAcGBgUEBAIBAWQBAQMCCVQBAgUFBwk
KAVADBwUQCgkIBwUDAmQAAAACAAAAAAO2A/QAAgAFAAAJAQsBCQEDRf0+ATcDbPySAhL+XQMm/Hc
CCAHgAAQAAAAAAygD9AADAAcACwAPAAABESMRIREjEQEzESMBMxEjAu5e/uBeAUPT0/6D09MDufy
OA3L8jgNy/FMD6PwYA+gAAwAAAAADuAP0ABEAZgD6AAAlDwgvBxMzHwcVMx8SDwIfCCU/CS8CPxE
zNT8HBxUPFBUfAg8NFwUfDjsBPw4FNy8MPwI1LyUjDw4CHQEBAgMEBAUFBQUFBQQDAwICKAQECAY
GBQQBAjQLFBAQERERCAgJCAcFBQQDAgEBAQ0CAgICBAUGBwkL/ZUMCQcGBQQCAgEBAg0BAQECAwQ
FBQcICQcQEBAQDw4WOAECBAUGAwcIYh8UFBYLCwsLCwoKDQkIBwUFAwMBAQIGBwEDAwMEBAYGBxA
PDhIRBQFXAQICBAQEBgYGBwgHCQgJCQkJCAgIBwcGBgUFBAQDAgEBWQUXEw8PDwYGBAQEAgICAQw
CAQICBAQGBggJCw0LCwsMCwwLFhUTEwEBAwMFBQYGCAcJCQkKCgsYCgoKCQgJBwgGBgUFBAICYwE
FBAQEAwIBAQEBAgMEBAQGA1IBAgUFBwgECUMDCAcKDA8RCgsSERERERAQERAhIqc4HBIQEA4ODQ0
OAQ8NDQ4OEBASEhUtpyIhEBEQERARERESChIQDQoJBwg/CQgIBwUDAwIoBQoICw4ICQoLDA0OFxQ
UFBMTExMSEyUnRm0qGwwKCgkICAcLCQYHBT4BCQkICAgHBgcFBQUDAwICAgICBAQFBQYGBwcICAg
NAT4HCAcKDQgICQoKDA0dL58nJRMSExMTExQUFBQSDQwMCgkICAwJBwYMCgsKCQkJBwcGBgQEAwE
BAQEDAwQGBQcHCAkJCQoKAAACAAAAAAP0A/QAQAEMAAABFQ8PLw8/Dx8OARUPBS8EDwcdAR8DDwY
rAQ8FHQEfBjsBHwUPBB8IPwQfBh0BHwU7Aj8FPQE/BR8EPwgvBD8GOwE/BT0BLwYrAS8FPwQvBys
BDwMvBj0BLwUrAg8FAsgBAwUHCAoMDQ4QEBISExQUFBQTEhIQEA4NDAoIBwUDAQEDBQcICgwNDhA
QEhITFBQUFBMSEhAQDg0MCggHBQP+6A4cHA0ODVoDBAQFBAUDA1ICAgICAgJbCA4GBgUEBH0GBQQ
DAwICAQEDAwQEBAV9BAkMBwcIWwMCAQEBAQIDUgIEBQQFBAQDWg0aDg0ODw8CAgQDBQQFcAYFBAQ
CAwEOHBwNDg1aAwQEBQQFBAJSAgIBAQEBAgJbCA4GBgUEBH0GBQQDAwICAQEDAwQEBAV9BAkMBwc
IWwMCAQEBAQIDUQMEBAUFBAQDWg0aDg0ODw8CAgMEBAUFcAUEBQMEAgICAAoKFBMSEhAQDg0MCgg
HBQMBAQMFBwgKDA0OEBASEhMUFBQUExISEBAODQwKCAcFAwEBAwUHCAoMDQ4QEBISExQBx30ECQw
HBwhbAgIBAQEBAgJSAgQEBQUEBANXDRoODQ4PDwICAwQEBQVwBgUEAwMCAg4cHA0NDloEBAUEBQQ
FA1ICAgEBAQECAlsIDgYGBQQEfQYFBAMDAgICAwMDBQQFfQQJDAcHCFsCAgEBAQECAk4DBAQFBQQ
EA1oNGg0ODg8PAgIDBAQFBHEGBAUDAwICDhwcDQ0NWwQEBQQFBAUDUgICAgICAlsIDgYGBQQEfQY
FBAMDAgICAgMDBQQAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQA
BAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACw
AMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQA
DABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAE
ECQALACQBLyBzYi1pY29uc1JlZ3VsYXJzYi1pY29uc3NiLWljb25zVmVyc2lvbiAxLjBzYi1pY29
uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXN
pb24uY29tACAAcwBiAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAcwBiAC0AaQBjAG8AbgBzAHM
AYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBiAC0AaQBjAG8AbgBzAEYAbwB

FloatingActionButton Styles in React Floating action button component
uAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4
AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgB
jAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIBAgEDAQQBBQEGAQcBCAE
JAQoBCwEMAQ0BDgEPARABEQESARMABXNoYXJlCHNoYXJlLTAxBGVkaXQHZWRpdC0wMQNhZGQHdXB
hcnJvdwVoZWFydANtYXAMdm9pY2Utc2VhcmNoCWZhdm9yaXRlcwtjaGF0LXBlcnNvbghib29rbWF
yawhzaG9wcGluZwRwbGF5BXBhdXNlCHJlbWluZGVyCHNldHRpbmdzAAAAAAA=)
format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="fab-icon-"],
[class*=" fab-icon-"] {
font-family: 'fab-icons' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fab-icon-people:before {
content: "\e70a";
}
Styles in React Floating action button component

This section explains the different styles of Floating Action Button.
FAB styles
The React Floating Action Button supports the following predefined styles that can be defined using the
cssClass property. You can customize by replacing the cssClass property with the below defined class.
| cssClass | Description |
| -------- | -------- |
| e-primary | Used to represent a primary action. |
| e-outline | Used to represent an appearance of button with outline. |
| e-info | Used to represent an informative action. |
| e-success | Used to represent a positive action. |
| e-warning | Used to represent an action with caution. |
| e-danger | Used to represent a negative action. |
APP.JSX
{% raw %}
function App() {
return (<div>


minHeight: '350px', border: '1px solid' }}> </div>
{/* To render Floating Action Button with applied warning style
*/}
<FabComponent id='fab' iconCss='e-icons e-edit' cssClass='e-
warning' target='#targetElement'></FabComponent>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<div>
minHeight: '350px', border: '1px solid' }}> </div>
{/* To render Floating Action Button with applied warning style
*/}
<FabComponent id='fab' iconCss= 'e-icons e-edit' cssClass= 'e-
warning' target='#targetElement'></FabComponent>
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Predefined Floating Action Button styles provide only the visual indication. So, Floating Action Button
content property should define the Floating Action Button style for the users of assistive technologies
such as screen readers.
Styles customization
To modify the Floating Action Button appearance, you need to override the default CSS of Floating
Action Button component. Please find the list of CSS classes and its corresponding section in Floating

Action Button component. Also, you have an option to create your own custom theme for the
components using our Theme Studio.
| CSS Class | Purpose of Class |
|-----|----- |
|.e-fab.e-btn|To customize the FAB.|
|.e-fab.e-btn:hover|To customize the FAB on hover.|
|.e-fab.e-btn:focus|To customize the FAB on focus.|
|.e-fab.e-btn:active|To customize the FAB on active.|
|.e-fab.e-btn-icon|To customize the style of FAB icon.|
Show text on hover
By using cssClass, you can customize the Floating Action Button to show text on hover with applied
transition effect. For detailed information, refer index.css file below.
The content will behave the same , when the enableHtmlSantiizer is enabled. Since we are adding only
the valid tags in content, sanitizing the content will not affect it.
APP.JSX
{% raw %}
function App() {
return (<div>
<FabComponent id='fab' iconCss='e-icons e-edit' content='<span
class="text-container"><span class="textEle">Edit</span></span>'
cssClass='fab-hover' target='#targetElement'></FabComponent>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
return (
<div>

FloatingActionButton Positions in React Floating action button component
<FabComponent id='fab' iconCss= 'e-icons e-edit' content='<span

class="text-container"><span class="textEle">Edit</span></span>' cssClass=
'fab-hover' target='#targetElement'></FabComponent>
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
/* start of onhover customization */
.e-fab.e-btn.fab-hover {
padding: 6px 0px 10px 10px;
}
.fab-hover .text-container {
overflow: hidden;
width: 0;
margin: 0;
transition: width .5s linear 0s, margin .2s linear .5s;
}
.fab-hover:hover .text-container {
width: 35px;
margin: 0 5px;
transition: width .5s linear .2s, margin .2s linear 0s;
}
/* end of onhover customization */
Positions in React Floating action button component

The floating action button can be positioned anywhere on the target using the position property. If the
target is not defined, then FAB is positioned based on the browser viewport.
The position values of Floating Action Button are as follows:
• TopLeft
• TopCenter
• TopRight
• MiddleLeft
• MiddleCenter
• MiddleRight
• BottomLeft
• BottomCenter
• BottomRight

`ts
function App() {
return (
{/ To render Floating Action Button in BottomLeft Position. /}
<FabComponent id='fab' content='Add' position='BottomLeft'></FabComponent>
);
}
export default App;
`
Below example demonstrates different supported positions of FAB.
APP.JSX
{% raw %}
function App() {
return (<div>
<div id="target" style={{ position: 'relative', minHeight:
'350px', border: '1px solid' }}></div>
<FabComponent id="fab1" iconCss='fab-icons fab-icon-people'
position='TopLeft' target='#target'></FabComponent>
position='TopCenter' target='#target'></FabComponent>
position='TopRight' target='#target'></FabComponent>
position='MiddleLeft' target='#target'></FabComponent>
position='MiddleCenter' target='#target'></FabComponent>
position='MiddleRight' target='#target'></FabComponent>
position='BottomLeft' target='#target'></FabComponent>
position='BottomCenter' target='#target'></FabComponent>
position='BottomRight' target='#target'></FabComponent>
</div>);
}
export default App;
{% endraw %}
APP.TSX

{% raw %}
function App() {
return (
<div>
<div id="target" style={{ position: 'relative', minHeight:
'350px', border: '1px solid' }}></div>
position='TopLeft' target='#target'></FabComponent>
position='TopCenter' target='#target'></FabComponent>
position='TopRight' target='#target'></FabComponent>
position='MiddleLeft' target='#target'></FabComponent>
position='MiddleCenter' target='#target'></FabComponent>
position='MiddleRight' target='#target'></FabComponent>
position='BottomLeft' target='#target'></FabComponent>
position='BottomCenter' target='#target'></FabComponent>
position='BottomRight' target='#target'></FabComponent>
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
/* Represents the styles for fab icon */
@font-face {
font-family: 'fab-icons';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSgIAAAEoAAAAVmNtYXDnYOfNAAAByAAAAFZnbHlmkfZ
LRAAAAkgAABboaGVhZCF5f3EAAADQAAAANmhoZWEIUQQTAAAArAAAACRobXR4SAAAAAAAAYAAAAB
IbG9jYTveNR4AAAIgAAAAJm1heHABIQIXAAABCAAAACBuYW1lkwSegQAAGTAAAAIxcG9zdKKfPWY
AABtkAAAAzQABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAEgABAAAAAQAAbzQqW18
PPPUACwQAAAAAAN8znUAAAAAA3zOdQAAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAASAgsABQAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnEAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA

EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABCAAAABAAEAAEAAOcQ//8AAOcA//8AAAABAAQ
AAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAAAAAAAABpAPmBFQEggSaBK4FQAX
sBrgG1AfcCBAI5gj8CR4KPAt0AAAABAAAAAAD9APoAD0AewC5AXAAACUfCRUPDiMvDjU/Dh8CAR8
LFQ8OIy8PPw4XAR8LHQEPDi8OPQE/DDMXJw8KHQEfAgUvCSsBDw4VHw4zPwcBDwEdAR8NPw41Lw4
jDwkBNzUvASUfCTM/DT0BLw4rAQ8BA5AGBgYFBAQDAgIBAQECAwMFBAUGBgcHBwgHCAcIBwcHBgY
GBQQEAwICAQEBAgMDBQQGBQYHBwcKCwoJCv0nBwcGBgYFBAQDAwIBAQECAgQEBQUFBgcHBwcHCAc
ICAcHBgYGBQQEAwMBAQEBAQIDAwQEBgUGBwkICQoLAtwHBwcGBQUFBAMCAgEBAgMDBAUFBgYGBwg
HBwgIBwcIBwYGBQUFBAMCAgEBAgMDBAUFBQcGCQkJCQxMDAsKCQgHBgUDAgEBAQP+HwYHCAgICQk
KDQ4ODQ4NDAwMCwoJCAcHBAQCAQIDBQYHCAgKCwwMDQoLCgoREBAPDg0MCgHdAgICAgQGBggJCQs
MEBESERMSDQwMCwsJCAgGBQQCAQIDBAYGCAkJCwwMDQ0NDQ4NDgoKCQkJCAcH/h4CAQMB4gcOBwg
JCQkKCwoLEBAQEAsLCwkIBwYFAwMCAwUFBwgJCgsLDA0KCgoKEREQ2QQEBQYGBgYHBwcHBwcHBwY
HBQUFBAMDAgIBAQECAgQEBAUFBgYHBwcHBwcHBwYHBgYFBAQEAwICAQECAwFvAgMEBAUGBQcGBwc
HBwcHBwcHBgUFBQQEAwICAQEBAgIDBAQFBQYGBwcHBwcHBwcHBgYGBQUEBAMDAQEBAV0DAwQEBQU
GBgcHBggHBwcHBgcGBgUEBQMDAwEBAQEBAgIEAwUEBgYGBgcHBwcHBwcHBwYFBQUEBAMDAgEsBwc
ICgoLCwwKCQkKCQkJCeoHBgYFBQUEAwMDAgMEBQcHCAkLCgwNDA0NDA0MDAwLCwkJBwcGBAMCAQE
CBQYICQsM/v8IERAJCAgNCwsLCQkIBwgFAwEBAwQFBggICQoLDAwMDA0NDA0MDAsLCQkIBwYEBAI
BAgIDBAQFBgYHBwEDDg0NDewHDAUFBAQDAwIBAQMEBwYICAkKCwwMDA0NDA0MDAwLCwkJCAYGBAM
CAQMEAAAABQAAAAAD7wP0AD8AfwEQAVACCgAAARUPDSsBLw4/DjsBHw0FFQ8NKwEvDT0BPw07AR8
NAR8QFQcvAiMPDx8HDwcjLwc/By8PDwMvAj8QHw8/DycVDw0rAS8NPQE/DTsBHw0nDxUdAR8DDwg
fDjsBPwIfDjsBPw4fAjsBPw4vCD8CPQEvLSMPDgOxAgIDBAUFBwYHCAgJCQkKCQoJCAgIBwcGBgQ
EAwMBAQEBAwMEBAYGBwcICAgJCgkKCQkJCAgHBgcFBQQDAgL9WQEDAwQFBQYHBwgICAkKCQoJCQk
ICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgkKCQgICAcHBgUFBAMDAQGEDg0aGRcWFBMSDw4MCQg
GAwEDDAwMDBAPDw4ODQwLCgkIBwUEAgEBAgMFBgcIDRAaGhwcHR4eHh4dHR0bGxoQDQgHBgUDAgE
BAgQFBwgJCgsMDQ4ODw8QDAwMDAECAQEDBQcJCgwODxETExULFxkQBgYGBggICQkKCgsLDAwMDA4
NDQwMDAsKCggJBwcFBQQ6AgIDBAUFBgcHCAgICQoJCgkJCQgIBwcGBQUEAwICAgIDBAUFBgcHCAg
JCQkKCQoJCAgIBwcGBQUEAwIC+AEXDw8ODhoZGBYUEhAOCwoEAwMCAgEBAgMDBgoJCAYFBAMBAQM
EBQYICQoLDA0ODg8QEA4NDg8PEBAQERIREhISExMSFBMTExITEhITERIREREREBAPFg8ODQ4QEA8
ODg0MCwoJCAYFBAMBAQMEBQYICQoGBQICAQIDAwQEBQYGBwgICQkKCgsMDAwNDQ4ODw8PEBAQGgQ
EBQcHCAkKCwsLDQ0NDQ4PDg4NDQwLCwkJCQcGBQQBAAoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwg
ICQkJCgkKCQgICAcHBgUFBAMDAQEDAwQFBQYHBwgICAkKCQoJCQkICAcHBgUFBAMCAgICAwQFBQY
HBwgICQkJCgkKCQgICAcHBgUFBAMDAQEDAwQFBQYHBwgICAkKAigGBg4PERMUFhYZGRobHBwdHRs
bAwICAQIEBQcICQoLDA0NDw8PEA8PDg0NDQsPCw8NCwkHBAICBAcJCwwPCxALDQ0NDg8PEA8PDw0
NDAsKCQgHBQQCAQEBAgMKFhYbGxsaGhkYFxYVFBMRCA8OBxALCgkJCQgHBgYFBAMDAQEBAgIEBQY
GCAgJCgoLCwwOJgoJCQkICAcHBgUFBAMCAgICAwQFBQYHBwgICQkJCgkKCQgICAcHBgUFBAMDAQE
DAwQFBQYHBwgICAkKDgcKBwgICRMVFxgZGxwdHx8PEBEQEBEQExMTEwwFCwwNDg4PDxAQEA8ODg0
MCwoJCAYFBAMCAwUMCwoJCQgHBwYFBAQDAgEBAgMDBAUGBgcICAkJCxAFAwIDBAUHBwkKDAwNDQ8
OEBAQDw8PDQ0MCwUYFRUWEhESERERERAREA8QDw8ODg4NDQ0MDAsKCgoJCAgIBgkQDQwMCwoKCAg
HBwUEAwIBAgMEBgYICAoKCwsNDA4AAAMAAAAAA/QD9AAHACoAUAAACQEVMwERIRElMx8ODwcBBzU
BPwUnByERIRE/CDUvDg8GApn+D8MB7fzyAyMIBwcGBwYFBgYEAwMCAQEBAQEBAgMDBAX9rmkCVwY
GBwcHB1o1/TUDijkJBwYGBAMBAQIDAwUGCAgMCwsMDQ0ODg0ODQ0MCwsDWP4QwAHz/a8DDl0BAgI
DBAQFBgYFBgcGBgcGBwYGBgYFBv2oAWgCVgUEAwICARY1/HYCzjoKCgsLDAwMDAwMDAwLCwoKDAg
HBgUDAgEBAgMFBgcIAAADAAAAAAP0A/QAAgAGABkAADclJzcXASc3Bxc/AzUvBw8CDAEk6jvpAdP
qqW7pcgUEAgIEBaYICQkKCQkJDDrqOukB0umpbulyCAkKCQoJCKYHBAMBAQMEAAAAAAEAAAAAA/Q
D9AALAAABIRUhETMRITUhESMBwv5KAbZ8Abb+SnwCPnz+SgG2fAG2AAEAAAAAA/MDDwAFAAATFwk
BNwEMLAHKAcYs/g4BHSwBxv48LQHvAAABAAAAAAP0A/QAgQAAEw8TFR8cPxw1LxMPDS8NB+0JCRM
TEhMREhAQDg0LCgQEAwIDAQICAwMFBQYGCAgKCgsMDg4PEBETExUWFxgZNzxBQTw3GRgXFhUTExE
QDw4ODAsKCggIBgYFBQMDAgIBAwIDBAQKCw0OEBASERMSExMfFx8TEhEQDw4ODQwMDBcXFxcMDAw
NDg4PEBESEyAXA/EBAgUGCQsMDxETFBcZGw4PDxAQETsQERARERISEhISExMUExQUFRQVFhUWFhc
XFy8wMjIwLxcXFxYWFRYVFBUUFBMUExMSEhISEhEREBEQOxEQEA8PDhsZFxQTEQ8MCwkGBQUBAQE
DBAUGBwgJCQsLGRwcGQsLCQkIBwYFBAMBAQEAAAAAAgAAAAADOwP0AEAAlAAAAR0BDw4vDz8PHw4
FFxUfBgEbAT8HNS8dKwEPHQKiAwQFBwgJCwsNDQ4PEBARERAQDw4NDQsLCQgHBQQDAQEDBAUHCAk
LCw0NDg8QEBEQEA8PDg4MDAsJCAcGBAP+IgEDBAYHCAoLAQqJhAoJCAcFAgQBAQIDAwQFBgYHCAg
JCQoLCgwMDA0NDg4ODw8PEBAQEBAQEBAPDw8ODg4NDQwMCwsLCgkJCAgHBgYFBAMDAgECvAkIDw8
PDgwMCwoJCAcFBAIBAQIEBQcICQoLDAwODw8PERAPDw8ODAwLCgkIBwUEAgEBAgQGBggKCgsMDQ0
PDw8GCwsVFRQUExMR/eYBEAEKERMTFBQKFRYbDw8PDw8ODQ4NDQwMCwsLCgkJCQcIBgYGBAUDAwE
CAgEDAwUEBgYGCAcJCQkKCwsLDAwNDQ4NDg8PDw8PAAACAAAAAAOTA/QAdAC2AAAlFSMVITUjNT8

eNSMPFS8VIxUfHQMRHw8/DxEvDw8OAdGJAXeKEhISEhEREBAPEA4ODg0NDAsLCwkJCQcHBgYEBAM
CAlcCAgMEBAUFBgcHCAgSFRYXGhocHh4fHx4eHBoaFxYVEggIBwcGBQUEBAMCAlcCAgMEBAYGBwg
ICQoKCwwMDQ0ODw4QEBARERESExJ2AQIFBggKCgwNDw8QERESExMSEREQDw8NDAoKBAcFBAIBAgU
GCAkKDA0OEBARERMTExMSERAPDw0MCwkHBgUCuFtRUVsCAwMEBQUGBgcICAgJCgoKCwsMDAwNDQ4
NDg8ODw8PEA0MCwwLDAsKCwoKCRIRDw0MCgcGBAEBBAYHCgwNDxESCQoKCwoLDAsMCwwNEA8PDw4
PDg0ODQ0MDAwLCwoKCgkICAgHBgYFBQQDAwKk/rgQDw4ODQ0LCwkJBwcEBAIBAQIEBQYICQkLDAw
HDQ4ODwFQEA8ODg0NCwsJCQcGBQQCAQECBAUGBwkJCwsNDQ4ODwAAAAABAAAAAAP0A/IACQAAASE
FAyUFAyUhAwGJ/oMBNXYBNQE1dgE1/oN3AnXq/oPq6gF96gF9AAAAAAIAAAAAA/QDvQB3AO4AAAE
VHxMPFSEvFT8VLw8PDicfFA8VIT8KLw8/Dy8OIw8OAcsCAwQFBgYICAoKCgwMDQ8GBgICAQEBAgI
DAwQeNRkZFxcVFRMSEA8ODAoC8QoMDg8QEhMVFRcXGRkaGxsDBwcCAgEBAQMDAwQUDQwLCwoKCAg
GBgUEAwEBAQMEBgcJCgsNDQ4QEBEREhISEhAQDg4NCwoJBwYFAvgBAQMEBQYGCAgKCgsLDA0QBgU
DAQEBAQICAwMEHjUZGRcXFRUTEhAPDgwKAQMMDAwNDg4dHh8gIQ0MCwoJCQgHBwUFBAMCAQEBAgM
FBgYICQoLCw0NDg4PBgcHCAgJCQkKCgsLCwsLDBIRERAQDg0NCwoJBwYEAwJWExISERAPDg4NDAw
KCgkICQYHBQQFBAUEBAQDAgwXCw0NDg4QERIUFRYYGhkYFxUTEhIQDw4NDQsLCwoCBQgEBQQGBQU
FAwQLCAkKCwsMDQ0PDw8RERISFhYVFRMSEQ8ODQsJBwUEAQEEBQcKCg0OEBASFBQVFncTExEREA8
PDQ0MDAoKCQkJBQcFBAUFBAUEAwMDDBYMDA0ODw8REhQVFhkaDQ0MDAsKFBMQEA8KDAwMDQ4ODhA
PEBARERISFRQUFBMSEREQDw8NDAsKCQwLCgoJCQgIBgYFBQMCAgEDBQgJCwwOEBESExQVFgAAAAE
AAAAAAvAD9AAkAAABERsBES8PIw8OAQ/t9QECAwUFBwgICgoLDAwNDQ7WDg0NDAwLCgoICAcFBQM
CA238nwEW/uoDYQ4NDQ0LCwsJCQgHBQUDAgEBAgMFBQcICQkLCwsNDQ0AAAAAAwAAAAAD9AP0AD8
AfwC1AAAlHw8/Dy8PDw4FHw8/Dy8PDw4DMxMPAhUfDiE1IS8ENyE/BhM/AjUvBiEnIwLIAQECBAQ
FBQcHCAgJCQoKCgoKCgkJCAgHBwUFBAQCAQEBAQIEBAUFBwcICAkJCgoKCgoKCQkICAcGBgUEBAI
B/gsBAQIEBAUFBwcICAkJCgoKCgoKCQkICAcHBQUEBAIBAQEBAgQEBQUHBwgICQkKCgoKCgoJCQg
IBwYGBQQEAgHJZLVICAECAgQEBQUHBwgICQkJCgsCW/27AwMCAQEsAXEPDQwMCggIvAMEAgIDBQc
ICQr9FSumcAoKCgkJCAgHBgYFBAQCAQEBAQIEBAUFBwcICAkJCgoKCgoKCQkICAcHBQUEBAIBAQE
BAgQEBQUHBwgICQkKCgoKCgoJCQgIBwYGBQQEAgEBAQECBAQFBQcHCAgJCQoKCgoKCgkJCAgHBwU
FBAQCAQEBAQIEBAUFBwcICAkJCgoDFv6DdyYMCgoKCQkICAcGBgUEBAIBAWQBAQMCCVQBAgUFBwk
KAVADBwUQCgkIBwUDAmQAAAACAAAAAAO2A/QAAgAFAAAJAQsBCQEDRf0+ATcDbPySAhL+XQMm/Hc
CCAHgAAQAAAAAAygD9AADAAcACwAPAAABESMRIREjEQEzESMBMxEjAu5e/uBeAUPT0/6D09MDufy
OA3L8jgNy/FMD6PwYA+gAAwAAAAADuAP0ABEAZgD6AAAlDwgvBxMzHwcVMx8SDwIfCCU/CS8CPxE
zNT8HBxUPFBUfAg8NFwUfDjsBPw4FNy8MPwI1LyUjDw4CHQEBAgMEBAUFBQUFBQQDAwICKAQECAY
GBQQBAjQLFBAQERERCAgJCAcFBQQDAgEBAQ0CAgICBAUGBwkL/ZUMCQcGBQQCAgEBAg0BAQECAwQ
FBQcICQcQEBAQDw4WOAECBAUGAwcIYh8UFBYLCwsLCwoKDQkIBwUFAwMBAQIGBwEDAwMEBAYGBxA
PDhIRBQFXAQICBAQEBgYGBwgHCQgJCQkJCAgIBwcGBgUFBAQDAgEBWQUXEw8PDwYGBAQEAgICAQw
CAQICBAQGBggJCw0LCwsMCwwLFhUTEwEBAwMFBQYGCAcJCQkKCgsYCgoKCQgJBwgGBgUFBAICYwE
FBAQEAwIBAQEBAgMEBAQGA1IBAgUFBwgECUMDCAcKDA8RCgsSERERERAQERAhIqc4HBIQEA4ODQ0
OAQ8NDQ4OEBASEhUtpyIhEBEQERARERESChIQDQoJBwg/CQgIBwUDAwIoBQoICw4ICQoLDA0OFxQ
UFBMTExMSEyUnRm0qGwwKCgkICAcLCQYHBT4BCQkICAgHBgcFBQUDAwICAgICBAQFBQYGBwcICAg
NAT4HCAcKDQgICQoKDA0dL58nJRMSExMTExQUFBQSDQwMCgkICAwJBwYMCgsKCQkJBwcGBgQEAwE
BAQEDAwQGBQcHCAkJCQoKAAACAAAAAAP0A/QAQAEMAAABFQ8PLw8/Dx8OARUPBS8EDwcdAR8DDwY
rAQ8FHQEfBjsBHwUPBB8IPwQfBh0BHwU7Aj8FPQE/BR8EPwgvBD8GOwE/BT0BLwYrAS8FPwQvBys
BDwMvBj0BLwUrAg8FAsgBAwUHCAoMDQ4QEBISExQUFBQTEhIQEA4NDAoIBwUDAQEDBQcICgwNDhA
QEhITFBQUFBMSEhAQDg0MCggHBQP+6A4cHA0ODVoDBAQFBAUDA1ICAgICAgJbCA4GBgUEBH0GBQQ
DAwICAQEDAwQEBAV9BAkMBwcIWwMCAQEBAQIDUgIEBQQFBAQDWg0aDg0ODw8CAgQDBQQFcAYFBAQ
CAwEOHBwNDg1aAwQEBQQFBAJSAgIBAQEBAgJbCA4GBgUEBH0GBQQDAwICAQEDAwQEBAV9BAkMBwc
IWwMCAQEBAQIDUQMEBAUFBAQDWg0aDg0ODw8CAgMEBAUFcAUEBQMEAgICAAoKFBMSEhAQDg0MCgg
HBQMBAQMFBwgKDA0OEBASEhMUFBQUExISEBAODQwKCAcFAwEBAwUHCAoMDQ4QEBISExQBx30ECQw
HBwhbAgIBAQEBAgJSAgQEBQUEBANXDRoODQ4PDwICAwQEBQVwBgUEAwMCAg4cHA0NDloEBAUEBQQ
FA1ICAgEBAQECAlsIDgYGBQQEfQYFBAMDAgICAwMDBQQFfQQJDAcHCFsCAgEBAQECAk4DBAQFBQQ
EA1oNGg0ODg8PAgIDBAQFBHEGBAUDAwICDhwcDQ0NWwQEBQQFBAUDUgICAgICAlsIDgYGBQQEfQY
FBAMDAgICAgMDBQQAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQA
BAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACw
AMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQA
DABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAE
ECQALACQBLyBzYi1pY29uc1JlZ3VsYXJzYi1pY29uc3NiLWljb25zVmVyc2lvbiAxLjBzYi1pY29
uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXN
pb24uY29tACAAcwBiAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAcwBiAC0AaQBjAG8AbgBzAHM
AYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBiAC0AaQBjAG8AbgBzAEYAbwB

uAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4
AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgB
jAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIBAgEDAQQBBQEGAQcBCAE
JAQoBCwEMAQ0BDgEPARABEQESARMABXNoYXJlCHNoYXJlLTAxBGVkaXQHZWRpdC0wMQNhZGQHdXB
hcnJvdwVoZWFydANtYXAMdm9pY2Utc2VhcmNoCWZhdm9yaXRlcwtjaGF0LXBlcnNvbghib29rbWF
yawhzaG9wcGluZwRwbGF5BXBhdXNlCHJlbWluZGVyCHNldHRpbmdzAAAAAAA=)
format('truetype');
font-style: normal;
}
[class^="fab-icon-"],
[class*=" fab-icon-"] {
font-family: 'fab-icons' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fab-icon-people:before {
content: "\e70a";
}
Custom position
You can define the custom position of the Floating Action Button by override the top, left, right, and
bottom CSS properties using cssClass. For detailed information, refer index.css file below.
APP.JSX
{% raw %}
function App() {
return (<div>
<FabComponent id='fab' iconCss='e-icons e-edit'
cssClass='custom-position' target='#targetElement'></FabComponent>
</div>);
}
export default App;
{% endraw %}
APP.TSX
{% raw %}

FloatingActionButton Events in React Floating action button component

function App() {
return (
<div>
<FabComponent id='fab' iconCss= 'e-icons e-edit' cssClass=
'custom-position' target='#targetElement'></FabComponent>
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
/* Represents the styles for button positioning */
.e-fab.e-btn.custom-position {
left: 40px;
top: 40px;
bottom: unset;
right: unset;
}
Events in React Floating action button component

This section explains the available events in Floating Action Button component.
created
Event triggers after the creation of Floating Action Button.
`ts
function App() {
function onCreate(): void {
//Your required action here
}
return (

FloatingActionButton Events in React Floating action button component
{/ To render Floating Action Button /}

<FabComponent id='fab' iconCss='e-icons e-edit' content='Edit' created={onCreate}></FabComponent>
);
}
export default App;
`
onclick
Event triggers when the Floating Action Button is clicked.
`ts
function App() {
//Your required action here
}
return (
{/ To render Floating Action Button / }
< FabComponent id = 'fab' iconCss = 'e-icons e-edit' content = 'Edit' onClick = {onClick}></FabComponent
>
);
}
export default App;
`
Below example demonstrates the click event of the Floating Action Button.
APP.JSX
{% raw %}
function App() {
function onClick() {
}
return (<div>
</div>);

FloatingActionButton Accessibility in React Floating action button component
}
export default App;
{% endraw %}
APP.TSX
{% raw %}
function App() {
}
return (
<div>
{/* To render Floating Action Button */ }
</div>
);
}
export default App;
{% endraw %}
INDEX.CSS
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Accessibility in React Floating action button component

The Floating action button component followed the accessibility guidelines and standards, including
ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate
accessibility.
The accessibility compliance for the Floating action button component is outlined below.
| -- | -- |
| WCAG 2.2 Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"
alt="Yes"> |

FloatingActionButton Accessibility in React Floating action button component

alt="Yes"> |
<style>
margin: 0.5em 0;
}
</style>
WAI-ARIA attributes
The Floating action button component followed the WAI-ARIA patterns to meet the accessibility. The
following ARIA attributes are used in the Floating action button component:
| --- | --- |
| aria-label | Provides an accessible name for the icon only floating action button. |
Keyboard interaction
The Floating action button component followed the keyboard interaction guideline, making it easy for
people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The
following keyboard shortcuts are supported by the Floating action button component.

Form Validator Creating a Next.js Application Using Syncfusion React Components
| --- | --- |
| Space | When the floating action button has focus, pressing the space key changes the state
of the floating action button. |
The Floating action button component's accessibility levels are ensured through an accessibility-checker
and axe-core software tools during automated testing.
The accessibility compliance of the Floating action button component is shown in the following sample.
Open the sample in a new window to evaluate the accessibility of the Floating action button component
with accessibility tools.
See also
Form Validator
Syncfusion React Form components.
What is Next.js?
Prerequisites


NPM
YARN
below:
the project as ej2-nextjs-form.

CMD
√ What is your project named? » ej2-nextjs-form

CMD
√ What is your project named? ... ej2-nextjs-form
Creating a new Next.js app in D:\ej2-nextjs-form.
3.Once complete the above mentioned steps to create ej2-nextjs-form, navigate to the directory using
the below command:
CMD
cd ej2-nextjs-form
project.
Here, the React Form components is used in the project. To install the React From components, use the
following command:
NPM
npm install @syncfusion/ej2-react-inputs @syncfusion/ej2-react-calendars
@syncfusion/ej2-react-buttons @syncfusion/ej2-react-dropdowns
YARN
yarn add @syncfusion/ej2-react-inputs @syncfusion/ej2-react-calendars
@syncfusion/ej2-react-buttons @syncfusion/ej2-react-dropdowns

as shown below:
GLOBALS.CSS

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import "../../node_modules/@syncfusion/ej2-react-
buttons/styles/material.css";
inputs/styles/material.css";
calendars/styles/material.css";
dropdowns/styles/material.css";
.control_wrapper.textbox-form {
max-width: 400px;
margin: auto;
border: 0.5px solid #bebebe;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 36%);
padding: 1% 4% 2%;
background: #f9f9f9;
}
.form-title {
text-align: center;
}
.submitBtn {
text-align: center;
margin: 30px;
}
#container {
margin: 20px auto 0;
width:450px;
}
.form-group {
padding-top: 11px;
}
.e-custom-label {
color: rgba(0, 0, 0, 0.54);
font-size: 13px;
font-weight: 500;
padding-top: 15px;
padding-bottom: 20px;
}
section.
Follow the below steps to add the React Form components to the Next.js project:
1.Before adding the Form components to your markup, import the From components in the
src/app/page.tsx file.
PAGE.TSX
'use client'
import { TextBoxComponent, FormValidator, MaskedTextBoxComponent,
UploaderComponent, FormValidatorModel } from '@syncfusion/ej2-react-inputs';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
2.Then, define the Form components in the src/app/page.tsx file, as shown below:
PAGE.TSX
'use client'
import { useState, useEffect, useRef, useReducer } from 'react';
import { TextBoxComponent, FormValidator, MaskedTextBoxComponent,
UploaderComponent, FormValidatorModel } from '@syncfusion/ej2-react-inputs';
let formObject: FormValidator;
export default function Form() {
const userNameRef = useRef(null);
const [dateOfBirth, setDateOfBirth] = useState('');
const initialState = { email: '', password: '' };
const reducer = (state: any, action: any) => {
switch (action.type) {
case 'update':
return { ...state, [action.field]: action.value };
default:
return initialState;
}
};
const [state, dispatch] = useReducer(reducer, initialState);
const dateChangeHandler = (event: any) => {
setDateOfBirth(event.value);
};
const update = (field: any) => (event: any) => {
//update action is dispatched to update the email and password state value
dispatch({ type: 'update', field, value: event.value });
};
// checks the length of mask value and returns corresponding boolean value
const customFn: (args: { [key: string]: string }) => boolean = (args: {
[key: string]: string }) => {
const argsLength = (args.element as any).ej2_instances[0].value.length;
return argsLength >= 10;
};
useEffect(() => {
(userNameRef.current as any).focusIn();
const options: FormValidatorModel = {
// validation rules
rules: {
name: {
required: [true, '* Please enter your full name'],
},
email: {
required: [true, '* Please enter your email'],
},
password: {
required: [true, '* Please enter your password'],
},
mask_value: {
numberValue: [customFn, '* Please enter your phone number']

},
date: {
required: [true, '* Please enter your date of birth'],
},
dropdown: {
required: [true, '* Please select your gender']
},
Address: {
required: [true, '* Please enter your address']
}
},
};
// Initialize the form validator
formObject = new FormValidator('#form1', options);
}, []);
const onSubmit = () => {
formObject.validate();
if (formObject.validate()) {
formObject.element.reset();
}
};
const genderData: string[] = ['Male', 'Female', 'Others'];
return <>
<div id="container">
<h2>Syncfusion React From Component</h2>
<div>
<div className="control_wrapper" id="control_wrapper">
<h3 className="form-title">Personal Details</h3>
<div className="control_wrapper textbox-form">
<form id="form1" method="post">
<div className="form-group">
<TextBoxComponent ref={userNameRef} name="name" value={state.email}
change={update('name')} placeholder="Full Name" floatLabelType="Auto" data-
msg-containerid="errorForName" />
<div id="errorForName" />
</div>
<TextBoxComponent type="email" name="email" value={state.email}
change={update('email')} placeholder="Email" floatLabelType="Auto" data-msg-
containerid="errorForEmail" />
<div id="errorForEmail" />
</div>
<TextBoxComponent type="password" name="password" value={state.password}
change={update('password')} placeholder="Password" floatLabelType="Auto"
data-msg-containerid="errorForPassword" />
<div id="errorForPassword" />
</div>
<DatePickerComponent name="date" value={dateOfBirth as any}
change={dateChangeHandler} placeholder="Date of Birth" floatLabelType="Auto"
data-msg-containerid="errorForDateOfBirth" />
<div id="errorForDateOfBirth" />
</div>

Form Validator Validation rules in React Form validator component
<DropDownListComponent name='dropdown' placeholder='Choose a gender'

floatLabelType='Auto' dataSource={genderData} data-msg-
containerid="errorForGender" />
<div id="errorForGender" />
</div>
<MaskedTextBoxComponent mask="000-000-0000" id="mask" name="mask_value"
placeholder="Phone Number" floatLabelType="Always" data-msg-
containerid="errorForPhone" />
<label className='e-error' htmlFor='mask_value'/>
</div>
<div className="e-float-input">
<textarea className="address-field" id="Address" name="Address" />
<span className="e-float-line" />
<label className="e-float-text e-label-top">Address</label>
</div>
</div>
<div className="e-float-text e-custom-label">Upload Photo (optional)</div>
<UploaderComponent name="upload" type="file" multiple={false} data-msg-
containerid="errorForUpload" />
</div>
</form>
<div className="submitBtn">
<ButtonComponent onClick={onSubmit}>Submit</ButtonComponent>
</div>
</div>
</div>
</div>
</div>
</>;
}
Run the application

NPM
npm run dev
YARN
yarn run dev
To know about the functionality of the react hooks, refer to the documentation.
View the NEXT.js Form sample in the GitHub repository.
Validation rules in React Form validator component
Default Rules
The FormValidator has following default validation rules, which are used to validate the form.
| Rules | Description | Example |

Form Validator Error messages in React Form validator component
| ------------- | ------------- | ------------- |

| required | The form input element must have any input values | a or 1 or - |
| email | The form input element must have valid email format values | [email protected] |
| url | The form input element must have valid url format values | http://syncfusion.com/ |
| date | The form input element must have valid date format values | 05/15/2017 |
| dateIso | The form input element must have valid dateISO format values | 2017-05-15 |
| number | The form input element must have valid number format values | 1.0 or 1 |
| digits | The form input element must have valid digits values | 1 |
| maxLength | Input value must have less than or equal to maxLength character length | if
maxLength: 5, check is valid and checking is invalid |
| minLength | Input value must have greater than or equal to minLength character length | if
minLength: 5, testing is valid and test is invalid |
| rangeLength | Input value must have value between rangeLength character length | if
rangeLength: [4,5], test is valid and key is invalid |
| range | Input value must have value between range number | if range: [4,5], 4 is valid and 6 is
invalid |
| max | Input value must have less than or equal to max number | if max: 3, 3 is valid and 4 is invalid |
| min | Input value must have greater than or equal to min number | if min: 4, 5 is valid and 2 is invalid
|
Error messages in React Form validator component
The FormValidator provides default error messages for all default validation rules.
It is tabulated as follows
| Rules | message |
| ------------- | ------------- |
| required | This field is required. |
| email | Please enter a valid email address. |
| url | Please enter a valid URL. |
| date | Please enter a valid date. |
| dateIso | Please enter a valid date ( ISO ). |
| number | Please enter a valid number. |
| digit | Please enter only digits. |
| maxLength | Please enter no more than {0} characters. |
| minLength | Please enter at least {0} characters. |

| rangeLength | Please enter a value between {0} and {1} characters long. |
| range | Please enter a value between {0} and {1}. |
| max | Please enter a value less than or equal to {0}. |
| min | Please enter a value greater than or equal to {0}. |
| regex | Please enter a correct value. |
Customizing Error Messages
The default error message for a rule can be customizable by defining it along with concern rule object as
follows.
INDEX.JSX
import { FormValidator } from '@syncfusion/ej2-inputs';
export default class Validation extends React.Component {
dialogInstance;
formObject;
animationSettings = { effect: 'Zoom' };
// Dialog will be closed, while clicking on overlay
onOverlayClick() {
this.dialogInstance.hide();
}
componentDidMount() {
const options = {
// validation rules
rules: {
'email': {
required: [true, '* Enter your email']
},
'password': {
required: [true, '* Enter your password']
},
}
};
this.formObject = new FormValidator('#form1', options);
}
onSubmitClick() {
if (this.formObject.validate()) {
this.formObject.element.reset();
this.dialogInstance.show();
}
}
render() {
return (<div className='control-pane'>
<div className='control-section col-lg-12'>
<div className='validation_wrapper'>

<input type="email" id="Email" name="email" data-msg-

containerid="mailError"/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top"
htmlFor="email">Email</label>
</div>
<div id="mailError"/>
</div>
<input type="password" id="number" name="password" data-msg-
containerid="noError"/>
htmlFor="password">Password</label>
</div>
<div id="noError"/>
</div>
</form>
<br />
<br />
<button className="submit-btn e-btn" onClick={this.onSubmitClick =
this.onSubmitClick.bind(this)} id="submit-btn">Submit</button>
</div>
<div id="confirmationDialog"/> </div>
</div>
</div>
<DialogComponent id="defaultdialog" isModal={true} visible={false}
content='Your details has been updated successfully, Thank you'
animationSettings={this.animationSettings} width={'50%'} ref={dialog =>
this.dialogInstance = dialog} target={'.control-section'}
overlayClick={this.onOverlayClick = this.onOverlayClick.bind(this)}/>
</div>);
}
}
ReactDOM.render(<Validation />, document.getElementById('form-element'));
INDEX.TSX
import { select } from '@syncfusion/ej2-base';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
export default class Validation extends React.Component<{}, {}> {
public dialogInstance: DialogComponent;
public formObject: FormValidator;
private animationSettings: object = { effect: 'Zoom' };
public onOverlayClick() {
}
public componentDidMount(): void {
// validation rules

rules: {
'email': {
required: [true, '* Enter your email']
},
'password': {
required: [true, '* Enter your password']
},
}
};
}
public onSubmitClick(): void {
if(this.formObject.validate()) {
}
}
public render(): JSX.Element {
return ( <div className = 'control-pane'>
<input type="email" id="Email" name="email" data-msg-
containerid="mailError"/>
<label className="e-float-text e-label-top" htmlFor="email"
>Email</label>
</div>
</div>
<div className="form-group" >
<input type="password" id="number" name="password" data-msg-
containerid="noError" />
htmlFor="password" >Password</label>
</div>
<div id="noError"/>
</div>
</form>
<br/>
<br/>
<button className="submit-btn e-btn" onClick={this.onSubmitClick =
this.onSubmitClick.bind(this)} id="submit-btn">Submit</button>
</div>
<div id="confirmationDialog"/> </div>
</div>
</div>
<DialogComponent id="defaultdialog" isModal={true} visible ={false}
content = 'Your details has been updated successfully, Thank you'

Form Validator Validation events in React Form validator component
animationSettings={this.animationSettings} width={'50%'} ref={dialog =>

this.dialogInstance = dialog!}
target={'.control-section'}
overlayClick={this.onOverlayClick=this.onOverlayClick.bind(this)} />
</div>) }
}
Validation events in React Form validator component

Validation events have two types of events. These are
• validationBegin
• validationComplete
Validation Begin
validationBegin event triggers before the validation starts and also it invoke for each rules in validation
process. Please find the below code snippet.
`ts
validationBegin: function(args) {
// ("Validation begin");
},
`
The following values are passed in args. You can use this values in event validation.
| Fields | Description |
|---------|-------------|
|element| Specifies the input element |
|name | Specifies the event name (validationBegin) |
|param | Specifies the param value (true/false) |
|value | Specifies the input value |
Validation Complete
validationComplete event triggered after validation is completed and also it invoke for each rules in
validation process. Please find the below code snippet.
`ts
validationComplete: function(args) {
// ("Validation complete");
}
`
The following values are passed in args. You can use this values in event validation.

| Fields | Description |
|---------|-------------|
|element| Specifies the input element |
|name | Specifies the event name (validationComplete) |
|param | Specifies the param value (true/false) |
|value | Specifies the input value |
|status | Specifies the status (success/failure) |
|inputName | Specifies the type of input |
Please find the simple sample for validation events.
INDEX.JSX
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component {
// add the rules for validation
const options = {
// validation begin event
validationBegin: (args) => {
const span = document.createElement("span");
span.innerHTML = "Validation begin <hr>";
const log = document.getElementById("EventLog");
log.insertBefore(span, log.firstChild);
},
// validation complete event
validationComplete: (args) => {
if (args.status === "success") {
span.innerHTML = "Validation complete success <hr>";
}
else {
span.innerHTML = "Validation complete failure <hr>";
}
},
};
// initialize the form validator
const formObject = new FormValidator('#form1', options);
formObject.addRules('timepicker', { required: true });
document.getElementById('clear').addEventListener('click', () => {
document.getElementById("EventLog").innerHTML = "";

});
}
render() {
return (<div>
<div id='sample'>
<form id='form1' method="post">
<div className='content-wrapper'>
<TimePickerComponent id="timepicker"
placeholder="Select a Time"/>
</div>
<label className='e-error' id='timepickerError'
htmlFor='timepicker'/>
</form>
</div>
<div id="list_event">
<h4><b>Event Trace</b></h4>
<div id="evt">
<div className="eventarea">
{/*Event log element */}
<span className="EventLog" id="EventLog"/>
</div>
<div className="evtbtn">
{/*clear button element */}
<button className='e-btn' id="clear"> Clear </button>
</div>
</div>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('form-element'));
INDEX.TSX
import { FormEventArgs, FormValidator, FormValidatorModel, ValidArgs } from
'@syncfusion/ej2-inputs';
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
// validation begin event
validationBegin: (args: ValidArgs) => {
span.innerHTML = "Validation begin <hr>";
const log = document.getElementById("EventLog") as
HTMLElement;
},
// validation complete event
validationComplete: (args: FormEventArgs) => {

if (args.status === "success") {

span.innerHTML = "Validation complete success <hr>";
HTMLElement;
} else {
span.innerHTML = "Validation complete failure <hr>";
HTMLElement;
}
},
};
const formObject: FormValidator = new FormValidator('#form1',
options);
formObject.addRules('timepicker', {required: true});
(document.getElementById('clear') as
HTMLElement).addEventListener('click', () => {
(document.getElementById("EventLog") as HTMLElement).innerHTML =
"";
});
}
public render() {
return(
<div>
<div id='sample'>
<form id='form1' method="post">
<div className='content-wrapper'>
<TimePickerComponent id="timepicker"
placeholder="Select a Time"/>
</div>
<label className='e-error' id='timepickerError'
htmlFor='timepicker'/>
</form>
</div>
<div id="list_event">
<h4><b>Event Trace</b></h4>
<div id="evt">
<div className="eventarea" >
{/*Event log element */}
<span className="EventLog" id="EventLog"/>
</div>
<div className="evtbtn">
{/*clear button element */}
<button className='e-btn' id="clear"> Clear </button>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('form-element'));

Form Validator Localization in React Form validator component
Localization in React Form validator component

The Localization library allows users to localize the default error message contents of the formValidator
to different cultures using the locale property.
The FormValidator provides default error messages for all default validation rules. It is tabulated as
follows:
| Rules | message |
| ------------- | ------------- |
| required | This field is required. |
| email | Please enter a valid email address. |
| url | Please enter a valid URL. |
| date | Please enter a valid date. |
| dateIso | Please enter a valid date ( ISO ). |
| number | Please enter a valid number. |
| digit | Please enter only digits. |
| maxLength | Please enter no more than {0} characters. |
| minLength | Please enter at least {0} characters. |
| rangeLength | Please enter a value between {0} and {1} characters long. |
| range | Please enter a value between {0} and {1}. |
| max | Please enter a value less than or equal to {0}. |
| min | Please enter a value greater than or equal to {0}. |
| regex | Please enter a correct value. |
Loading translations
To load translation object in your application use load function of L10n class.
The following example demonstrates the FormValidator in Arabic culture with error message for email.
INDEX.JSX
L10n.load({
'ar-AR': {
'formValidator': {
"creditcard": "‫"يرجى إدخال رقم بطاقة صالح‬,
"date": "‫ارجوك ادخل تاريخ صحيح‬.",
"dateIso": "‫( الرجاء إدخال تاريخ صالح‬ISO)",
"digits": "‫"الرجاء إدخال األرقام فقط‬,
"email": "‫"أدخل بريد إلكتروني صالح‬,

"equalTo": "‫"يرجى إدخال نص مطابقة صحيح‬,

"max": "}0{ ‫"الرجاء إدخال قيمة أقل من أو تساوي‬,
"maxLength": "‫ }حرف‬0{ ‫"الرجاء إدخال ما ال يزيد عن‬,
"min": "}0{ ‫"الرجاء إدخال قيمة أكبر من أو تساوي‬,
"minLength": "‫ }على األقل‬0{ ‫"الرجاء إدخال أحرف‬,
"number": "‫"من فضلك أدخل رقما صالحا‬,
"pattern": "‫"الرجاء إدخال قيمة نمط صحيح‬,
"range": "}1{ ‫ }و‬0{ ‫"يرجى إدخال قيمة بين‬,
"rangeLength": "‫ }من األحرف‬1{ ‫ }و‬0{ ‫"يرجى إدخال قيمة بين‬,
"regex": "‫"يرجى إدخال قيمة صحيحة‬,
"required": "‫"هذه الخانة مطلوبه‬,
"tel": "‫"يرجى إدخال رقم هاتف صالح‬,
"url": "‫"أدخل رابط صحيح من فضلك‬
}
}
});
export default class Validation extends React.Component {
dialogInstance;
formObject;
onOverlayClick() {
}
const options = {
locale: "ar-AR",
rules: {
email: { email: true },
}
};
}
onSubmitClick() {
if (this.formObject.validate()) {
}
}
render() {
return (<div className='control-pane'>
<input type="email" id="Email" name="email"
data-msg-containerid="mailError"/>
htmlFor="email">Email</label>
</div>
</div>
</form>
</div>
</div>

</div>
</div>);
}
}
INDEX.TSX
import { L10n, select } from '@syncfusion/ej2-base';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
L10n.load({
'ar-AR': {
'formValidator':{
"creditcard": "‫"يرجى إدخال رقم بطاقة صالح‬,
"date": "‫ارجوك ادخل تاريخ صحيح‬.",
"dateIso": "‫( الرجاء إدخال تاريخ صالح‬ISO)",
"digits" : "‫"الرجاء إدخال األرقام فقط‬,
"email": "‫"أدخل بريد إلكتروني صالح‬,
"equalTo" : "‫"يرجى إدخال نص مطابقة صحيح‬,
"max" : "}0{ ‫"الرجاء إدخال قيمة أقل من أو تساوي‬,
"maxLength" : "‫ }حرف‬0{ ‫"الرجاء إدخال ما ال يزيد عن‬,
"min" : "}0{ ‫"الرجاء إدخال قيمة أكبر من أو تساوي‬,
"minLength": "‫ }على األقل‬0{ ‫"الرجاء إدخال أحرف‬,
"number" : "‫"من فضلك أدخل رقما صالحا‬,
"pattern" : "‫"الرجاء إدخال قيمة نمط صحيح‬,
"range" : "}1{ ‫ }و‬0{ ‫"يرجى إدخال قيمة بين‬,
"rangeLength" : "‫ }من األحرف‬1{ ‫ }و‬0{ ‫"يرجى إدخال قيمة بين‬,
"regex": "‫"يرجى إدخال قيمة صحيحة‬,
"required" : "‫"هذه الخانة مطلوبه‬,
"tel" : "‫"يرجى إدخال رقم هاتف صالح‬,
"url": "‫"أدخل رابط صحيح من فضلك‬
}
}
});
export default class Validation extends React.Component<{}, {}> {
public dialogInstance: DialogComponent;
public formObject: FormValidator;
public onOverlayClick() {
}
locale:"ar-AR",
rules: {
email: { email: true },
}
};
}
public onSubmitClick(): void {
if(this.formObject.validate()) {

Form Validator React functional component in React Form validator component
}
}
public render(): JSX.Element {
return ( <div className = 'control-pane'>
<input type="email" id="Email" name="email"
data-msg-containerid="mailError"/>
htmlFor="email" >Email</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>) }
}
React functional component in React Form validator component

This article provides a step-by-step instructions on using the React functional Hooks in a simple HTML
form with the FormValidator component.
The following is a list of React Hooks methods to utilize while performing form validation.
| Hooks | Description |
| ------------- | ------------- |
| useState | The useState is a Hook that allows the state to be defined in the functional components. If
the initial state is passed to this function, then it will return a state variable with a value and a function
to update this state value. |
| useEffect | The useEffect is a Hook that executes code after rendering and re-rendering the
component. |
| useRef | The useRef is a Hook function that allows the functional component to create a direct
reference to the DOM element. |
| useReducer | The useReducer is a Hook function that accepts a reducer function and an initial state
as arguments. It returns a state value and another function to dispatch an action. |
Create a React form with Syncfusion form components
To create a React application with Syncfusion components, refer to the Getting Started section. Once
the application is set up, replace the components with React form and Syncfusion form components to
create a simple form.

In the following example, a login form is created with Syncfusion components such as TextBox,
DatePicker, and Button. This form is validated using the React FormValidator component.
• TextBox - To get the user's email and password

• DatePicker - To get the user's date of birth
APP.JSX
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
let formObject;
function App() {
const reducer = (state, action) => {
case 'update':
default:
}
};
const dateChangeHandler = (event) => {
};
const update = (field) => (event) => {
//update action is dispatched to update the email and password state
value
};
useEffect(() => {
userNameRef.current.focusIn();
const options = {
// validation rules
rules: {
email: {
},
password: {
},
date: {
},
},
};
}, []);

formObject.element.reset();
}
};
return (<div>
<h3 className="form-title">User Login</h3>
<TextBoxComponent ref={userNameRef} type="email" name="email"
value={state.email} change={update('email')} placeholder="Username"
floatLabelType="Auto" data-msg-containerid="errroForEmail"/>
<div id="errroForEmail"/>
</div>
<TextBoxComponent type="password" name="password"
value={state.password} change={update('password')} placeholder="Password"
floatLabelType="Auto" data-msg-containerid="errroForPassword"/>
<div id="errroForPassword"/>
</div>
<DatePickerComponent name="date" value={dateOfBirth}
change={dateChangeHandler} placeholder="Date of Birth" floatLabelType="Auto"
data-msg-containerid="errroForDateOfBirth"/>
<div id="errroForDateOfBirth"/>
</div>
</form>
</div>
</div>
<br />
<br />
</div>
</div>);
}
export default App;
APP.TSX
let formObject;
function App() {
case 'update':


default:
}
};
const dateChangeHandler = (event) => {
};
const update = (field) => (event) => {
//update action is dispatched to update the email and password state
value
};
useEffect(() => {
const options = {
// validation rules
rules: {
email: {
},
password: {
},
date: {
},
},
};
}, []);
(formObject as any).element.reset();
}
};
return (
<div>
<h3 className="form-title">User Login</h3>
<TextBoxComponent
ref={userNameRef}
type="email"
name="email"
value={state.email}
change={update('email')}
placeholder="Username"
floatLabelType="Auto"
data-msg-containerid="errroForEmail"
/>
<div id="errroForEmail" />

</div>
<TextBoxComponent
type="password"
name="password"
value={state.password}
change={update('password')}
placeholder="Password"
data-msg-containerid="errroForPassword"
/>
<div id="errroForPassword" />
</div>
<DatePickerComponent
name="date"
value={dateOfBirth}
change={dateChangeHandler}
placeholder="Date of Birth"
data-msg-containerid="errroForDateOfBirth"
/>
<div id="errroForDateOfBirth" />
</div>
</form>
</div>
</div>
<br />
<br />
</div>
</div>
);
}
export default App;
Perform validation
For the input validation, specify rules for the email, password, and date of birth fields. The form
validation will be initiated using the useEffect Hook.
`javascript
useEffect(() => {
const options = {
rules: {
email: {
},
password: {


},
date: {
},
}
};
}, []);
`
Check out the validation rules section to learn more about the validation rules.
Here, the useState Hook is used to store the value of the date of birth field.
`javascript
`
The useReducer Hook is used to update the email and password state values.
`javascript
case 'update':
default:
}
};
`
Here, the useRef Hook is used to focus the username field at initial loading.
`javascript
useEffect(() => {

Gantt Getting Started
}
`
Run the Application
Run the application in the browser using the following command.
`
npm run start
Link to the Video`
Gantt
Getting Started
Getting started
This section explains you the steps required to create a simple Essential JS 2 Gantt in a React application
and demonstrates its basic features.
To get started quickly with React Gantt Chart the following video explains the project configuration and
basic Gantt chart features behaviours:
Dependencies
Following is the list of minimum dependencies required to use the Gantt.
`javascript
|-- @syncfusion/ej2-react-gantt
|-- @syncfusion/ej2-grids
|-- @syncfusion/ej2-gantt
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-treegrid
`
Setup for Local Development
You can use create-react-app to setup the applications.
To install create-react-app run the following command.
`
`
• To setup basic React sample use following commands.
<div class='tsx'>
`
create-react-app quickstart --scripts-version=react-scripts-ts

`
</div>
<div class='jsx'>
`
cd quickstart
`
</div>
All the available Essential JS 2 packages are published in npmjs.com public registry.To install Gantt
component, use the following command
`
npm install @syncfusion/ej2-react-gantt --save
`
Add components style as given below in src/App.css.
`css
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
`
To refer App.css in the application then import it in the src/App.tsx file.
Adding Gantt component
Now, you can start adding React Gantt component in the application. For getting started, add the Gantt
component in src/App.tsx file using following code.
Place the following gantt code in the src/App.tsx.

`ts
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import './App.css';
const GanttData: object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress:
50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50
},
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50
},
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration:
3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress:
50 }
]
},
];
function App () {

const taskFields: any = {

id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
};
return (
<GanttComponent dataSource={GanttData} height="450px" taskFields={taskFields}/>
);
}
`
`ts
import './App.css';
const GanttData = [
{
TaskID: 1,
subtasks: [
50 },
},
},
]
},

{
TaskID: 5,
subtasks: [
3, Progress: 50 },
50 }
]
},
];
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
return (<GanttComponent dataSource={GanttData} height="450px" taskFields={taskFields}/>);
}
`
Binding Gantt with data
Bind data with the Gantt control by using the dataSource property. It accepts an array of JavaScript
object or the DataManager instance.
`
<!DOCTYPE html>
<html lang="en">
<head>

<title>Syncfusion React Gantt</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/23.1.44/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
`
Place the following code in the src/App.tsx.
`ts
import './App.css';


{
TaskID: 1,
subtasks: [
50 },
},
},
]
},
{
TaskID: 5,
subtasks: [
3, Progress: 50 },
50 }
]
},
];
function App () {
return (
<GanttComponent dataSource={GanttData} />
);
}

`
`ts
import './App.css';
const GanttData = [
{
TaskID: 1,
subtasks: [
50 },
},
},
]
},
{
TaskID: 5,
subtasks: [
3, Progress: 50 },
50 }
]
},
];

function App() {
return (<GanttComponent dataSource={GanttData}/>);
}
`
Mapping task fields
The data source fields that are required to render the tasks are mapped to the Gantt component using
the taskFields property.
`ts
import './App.css';
{
TaskID: 1,
subtasks: [
50 },
},
},
]
},
{
TaskID: 5,
subtasks: [

3, Progress: 50 },
50 }
]
},
];
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
return (
<GanttComponent dataSource={GanttData} height="450px" taskFields={taskFields}/>
);
}
`
`ts
import './App.css';
const GanttData = [
{
TaskID: 1,

subtasks: [
50 },
},
},
]
},
{
TaskID: 5,
subtasks: [
3, Progress: 50 },
50 }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
return (<GanttComponent dataSource={GanttData} height="450px" taskFields={taskFields}/>);
}

`
Defining columns
Gantt has an option to define columns as an array. You can customize the Gantt columns using the
following properties:
• field: Maps the data source fields to the columns.

• headerText: Changes the title of columns.
• textAlign: Changes the alignment of columns. By default, columns will be left aligned. To
change the columns to right align, set textAlign to right.
• format: Formats the number and date values to standard or custom formats. Here, it is defined
for the conversion of numeric values to currency.
`ts
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import './App.css';
{
TaskID: 1,
subtasks: [
50 },
},
},
]
},
{
TaskID: 5,

subtasks: [
3, Progress: 50 },
50 }
]
},
];
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
return (
<GanttComponent dataSource={GanttData} height="450px" taskFields={taskFields}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='50' />
<ColumnDirective field='TaskName' headerText='Job Name'/>
<ColumnDirective field='StartDate'/>
<ColumnDirective field='Duration'/>
</ColumnsDirective>
</GanttComponent>
);
}
`
`ts
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';


import './App.css';
const GanttData = [
{
TaskID: 1,
subtasks: [
50 },
},
},
]
},
{
TaskID: 5,
subtasks: [
3, Progress: 50 },
50 }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',

child: 'subtasks',
};
return (<GanttComponent dataSource={GanttData} height="450px" taskFields={taskFields}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='50'/>
<ColumnDirective field='TaskName' headerText='Job Name'/>
</ColumnsDirective>
</GanttComponent>);
}
`
Module Injection
Gantt component features are segregated into individual feature-wise modules.In order to use a
particular feature, you need to inject its feature service in the App.In the current application, we are
going to use editing, sorting and filtering feature of Gantt.Please find relevant feature service name and
description as follows.
• Edit: Inject this module to use the editing feature.

• Filter: Inject this module to use the filtering feature.
• Sort: Inject this module to use the sorting feature.
These modules should be injected into the gantt using the Inject directive.
Enable editing
The editing feature enables you to edit the tasks in the Gantt component. It can be enabled by using the
editSettings.allowEditing and editSettings.allowTaskbarEditing properties.
The following editing options are available to update the tasks in Gantt,
• Cell
• Dialog
• Taskbar
• Connector line

Cell editing
Modify the task details through cell editing by setting the edit mode to Auto. Inject the Edit module as
follows. If the Edit module is not injected, you cannot edit the cell when a grid cell is clicked.
INDEX.JSX
import { GanttComponent, Inject, Edit, Selection } from '@syncfusion/ej2-
react-gantt';
import { data } from './datasource';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
const editSettings = {
allowEditing: true,
mode: 'Auto',
};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowSelection={true} editSettings={editSettings} height='400px'>
<Inject services={[Edit, Selection]}/>
</GanttComponent>;
}
;
INDEX.TSX
react-gantt';
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
const editSettings: any = {
allowEditing: true,
mode: 'Auto',
};
allowSelection={true}
editSettings={editSettings} height = '400px'>
<Inject services={[Edit, Selection]} />

</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Essential JS 2 for React Components"
/>
<link href="https://cdn.syncfusion.com/ej2/23.1.44/material.css"
rel="stylesheet" type="text/css"/>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Note: When the edit mode is set to Auto, you can change the cells to editable mode by double-clicking
anywhere at the TreeGrid and edit the task details in the edit dialog by double-clicking anywhere at the
chart.
Dialog editing
Modify the task details through dialog by setting the edit mode to Dialog. Inject the Edit module as
follows. If the Edit module is not injected, you cannot edit the task details through the edit dialog.
INDEX.JSX
react-gantt';


function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
mode: 'Dialog'
};
allowSelection={true} editSettings={editSettings} height='400px'>
</GanttComponent>;
}
;
INDEX.TSX
react-gantt';
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
mode: 'Dialog'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Note: In dialog editing mode, the edit dialog will appear while performing double-click action in both
TreeGrid and chart sides.
Taskbar editing
Modify the task details through user interaction such as resizing and dragging the taskbar by enabling
the allowTaskbarEditing property. Inject the Edit module as follows. If the Edit module is not injected,
you cannot edit the task details while dragging the taskbar.
INDEX.JSX
import { GanttComponent, Inject, Edit } from '@syncfusion/ej2-react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

allowTaskbarEditing: true
};
editSettings={editSettings} height='400px'>
<Inject services={[Edit]}/>
</GanttComponent>;
}
;
INDEX.TSX
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
};
<Inject services={[Edit]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>

<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Dependency editing
Modify the task dependencies using mouse interactions by enabling the allowTaskbarEditing property
along with mapping the task dependency data source field to the dependency property.
INDEX.JSX
const data = [
{
TaskID: 1,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new
Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new
Date('04/02/2019'), Duration: 4, Progress: 50, Predecessor: '2FS' },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new
]
},
{
TaskID: 5,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation',
StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new
Date('04/04/2019'), Duration: 3, Progress: 50, Predecessor: '7SS' }
]
},

];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
dependency: 'Predecessor'
};
};
</GanttComponent>;
}
;
INDEX.TSX
const data: object[] = [
{
TaskID: 1,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate:
new Date('04/02/2019'), Duration: 4, Progress: 50 },
Date('04/02/2019'), Duration: 4, Progress: 50,Predecessor:'2FS' },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3, Progress: 50,Predecessor:'7SS' }
]
},

];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
dependency: 'Predecessor'
};
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>

</body>
</html>
Enabling predecessors or task relationships

Predecessor or task dependency in the Gantt component is used to depict the relationship between the
tasks.
• Start to Start (SS): You cannot start a task until the dependent task starts.
• Start to Finish (SF): You cannot finish a task until the dependent task finishes.
• Finish to Start (FS): You cannot start a task until the dependent task completes.
• Finish to Finish (FF): You cannot finish a task until the dependent task completes.
You can show the relationship in tasks by using the dependency property as shown in the following code
example.
INDEX.JSX
const data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4, Progress: 50, Predecessor: '2FS' },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3, Progress: 50, Predecessor: '7SS' }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',

dependency: 'Predecessor',
child: 'subtasks'
};
height='400px'/>;
}
;
INDEX.TSX
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4, Progress: 50,Predecessor:'2FS' },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3, Progress: 50,Predecessor:'7SS' }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'

};
return <GanttComponent dataSource={data} taskFields={taskFields} height
= '400px'/>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Assigning resources
You can display and assign the resource for each task in the Gantt control. Create a collection of JSON
object, which contains id, name, unit and group of the resources and assign it to the resources property.
Map these fields to the Gantt control using the resourceFields property.
INDEX.JSX
const projectResources = [
{ resourceId: 1, resourceName: 'Martin Tamer' },
{ resourceId: 2, resourceName: 'Rose Fuller' },
{ resourceId: 3, resourceName: 'Margaret Buchanan' },

{ resourceId: 4, resourceName: 'Fuller King' }

];
const data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3] },
Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2] },
Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] }
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3, Progress: 50, resources: [1, 3, 5] },
Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
resourceInfo: 'resources'
};
const labelSettings = {
rightLabel: 'resources'
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
labelSettings={labelSettings} resourceFields={resourceFields}
resources={projectResources} height='450px'/>;
}
;

INDEX.TSX
const projectResources: object[] = [
{ resourceId: 4, resourceName: 'Fuller King' }
];
{
TaskID: 1,
subtasks: [
new Date('04/02/2019'), Duration: 4, Progress: 50,resources: [2, 3] },
Date('04/02/2019'), Duration: 4, Progress: 50,resources: [2] },
Date('04/02/2019'), Duration: 4, Progress: 50,resources: [1] }
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3, Progress: 50,resources: [1, 3, 5] },
]
},
];
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
const labelSettings: any = {
};

const resourceFields: any = {

id: 'resourceId',
};
labelSettings={labelSettings}
resourceFields={resourceFields} resources={projectResources} height =
'450px'/>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Enable filtering
The filtering feature enables you to view the reduced amount of records based on filter criteria. Gantt
provides the menu filtering support for each column. It can be enabled by setting the allowFiltering
property to true along with injecting the Filter module as shown in the following code example. Filtering
feature can also be customized using the filterSettings property.

INDEX.JSX
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-
gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowFiltering={true} height='400px'>
<Inject services={[Filter]}/>
</GanttComponent>;
}
;
INDEX.TSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowFiltering={true} height = '400px'>
<Inject services={[Filter]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Enable sorting
The sorting feature enables you to order the records. It can be enabled by setting the allowSorting
property to true. Inject the Sort module as follows. If the Sort module is not injected, you cannot sort
the records when a header is clicked. The sorting feature can be customized using the sortSettings
property.
INDEX.JSX
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowSorting={true} height='400px'>
<Inject services={[Sort]}/>
</GanttComponent>;
}

;
INDEX.TSX
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
<Inject services={[Sort]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>

<body>
<div id='root'>
</div>
</body>
</html>
Run the application

The create-react-app will pre-configure the project to compile and run the application in browser. Use
the following command to run the application.
`
npm start
`
Output will be appears as follows.
INDEX.JSX
{ resourceId: 1, resourceName: 'Project Manager' },
{ resourceId: 2, resourceName: 'Software Analyst' },
{ resourceId: 3, resourceName: 'Developer' },
{ resourceId: 4, resourceName: 'Testing Engineer' }
];
const data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4, Predecessor: '3FS', Progress: 50,
resources: [1] },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3, Predecessor: '7SS', Progress: 50 }
]
},

];
import { GanttComponent, Inject, Edit, Filter, Sort } from '@syncfusion/ej2-
react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
};
allowEditing: true,
editMode: 'Auto',
};
id: 'resourceId',
};
return <GanttComponent dataSource={data} allowFiltering={true}
allowSorting={true} taskFields={taskFields} editSettings={editSettings}
labelSettings={labelSettings} resourceFields={resourceFields}
resources={projectResources} height='400px'>
<Inject services={[Edit, Filter, Sort]}/>
</GanttComponent>;
}
;
INDEX.TSX
];
{
TaskID: 1,
subtasks: [


resources: [1] },
]
},
{
TaskID: 5,
subtasks: [
]
},
];
react-gantt';
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
};
allowEditing: true,
editMode: 'Auto',
};
id: 'resourceId',
};
resourceFields={resourceFields} resources={projectResources}
height='400px'>
<Inject services={[Edit, Filter, Sort]} />
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link href="https://cdn.syncfusion.com/ej2/material.css"
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
You can refer to our React Gantt Chart feature tour page for its groundbreaking feature representations.
You can also explore our React Gantt Chart example that shows how to render the Gantt Chart in React.
Syncfusion React Gantt component.
What is Next.js?
Prerequisites



NPM
YARN
below:
the project as ej2-nextjs-gantt.
CMD
√ What is your project named? » ej2-nextjs-gantt

CMD
√ What is your project named? ... ej2-nextjs-gantt
Creating a new Next.js app in D:\ej2-nextjs-gantt.
3.Once complete the above mentioned steps to create ej2-nextjs-gantt, navigate to the directory using
the below command:
CMD
cd ej2-nextjs-gantt
project.
Here, the React Gantt component is used in the project. To install the React Gantt component, use the
following command:

NPM
YARN
yarn add @syncfusion/ej2-react-gantt

as shown below:
GLOBALS.CSS
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-
navigations/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';
splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-grids/styles/material.css';
richtexteditor/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
gantt/styles/material.css";
section.
Follow the below steps to add the React Gantt component to the Next.js project:
1.Before adding the Gantt component to your markup, create a datasource.tsx file within the src/app/
folder and add the Gantt component data.
DATASOURCE.TSX
export const projectResources: object[] = [
];
export const data: object[] = [

{
TaskID: 1,
subtasks: [
resources: [1] },
]
},
{
TaskID: 5,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 50, resources: [1, 3, 5] },
]
},
];
2.Then, import and define the Gantt component in the src/app/page.tsx file, as shown below:
PAGE.TSX
'use client'
react-gantt';
import { projectResources, data } from './datasource';
export default function Home() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
};
allowEditing: true,
editMode: 'Auto',

};
id: 'resourceId',
};
return (
<>
<h2>Syncfusion React Gantt Component</h2>
<GanttComponent dataSource={data} allowFiltering={true} allowSorting={true}
taskFields={taskFields} editSettings={editSettings}
resourceFields={resourceFields} resources={projectResources} height='400px'>
</GanttComponent>
</>
)
}
Run the application

NPM
npm run dev
YARN
yarn run dev
To learn more about the functionality of the Gantt component, refer to the documentation.
View the NEXT.js Gantt sample in the GitHub repository.
Getting Started with the React Gantt Component in the Preact Framework
This article provides a step-by-step guide for setting up a Preact project and integrating the Syncfusion
React Gantt component.
Preact is a fast and lightweight JavaScript library for building user interfaces. It's often used as an
alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in
size and faster in performance, making it a good choice for projects where file size and load times are
critical factors.
Prerequisites
System requirements for Syncfusion React UI components
Set up the Preact project
To create a new Preact project, use one of the commands that are specific to either NPM or Yarn.
`bash
npm init preact
`
or

`bash
yarn init preact
`
Using one of the above commands will lead you to set up additional configurations for the project, as
below:
1\. Define the project name: We can specify the name of the project directly. Let's specify the name of
the project as my-project for this article.
`bash
T Preact - Fast 3kB alternative to React with the same modern API
|
• Project directory:
| my-project
—
`
2\. Choose JavaScript as the framework variant to build this Preact project using JavaScript and React.
`bash
|
• Project language:
| > JavaScript
| TypeScript
—
`
3\. Then configure the project as below for this article.
`bash
|
• Use router?
| Yes / > No
—
|

• Prerender app (SSG)?
| Yes / > No
—
|
• Use ESLint?
| Yes / > No
—
`
5\. Upon completing the aforementioned steps to create my-project, run the following command to
jump into the project directory:
`bash
cd my-project
`
Now that my-project is ready to run with default settings, let's add Syncfusion components to the
project.
Add the Syncfusion React packages
This article uses the React Gantt component as an example. To use the React Gantt component in the
project, the @syncfusion/ej2-react-gantt package needs to be installed using the following command:
`bash
`
or
`bash
yarn add @syncfusion/ej2-react-gantt
`
You can import themes for the Syncfusion React component in various ways, such as using CSS or SASS
styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about
built-in themes and different ways to refer to theme's in a React project.
In this article, the Material 3 theme is applied using CSS styles, which are available in installed packages.
The necessary Material 3 CSS styles for the Gantt component and its dependents were imported into
the src/style.css file.
~/SRC/STYLE.CSS

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-
richtexteditor/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material3.css';
The order of importing CSS styles should be in line with its dependency graph.
Add the Syncfusion React component
Follow the below steps to add the React Gantt component to the Vite project:
1\. Before adding the Gantt component to your markup, import the Gantt component in the
src/index.jsx file.
~/SRC/INDEX.JSX
2\. Then, define the Gantt component with the dataSource property. Declare the values for the
dataSource property.
~/SRC/INDEX.JSX
import { render } from 'preact';
import './style.css';
function App () {
const GanttData = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,

subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 50 },
]
},
];
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
return (
<GanttComponent dataSource={GanttData} height="450px"
taskFields={taskFields}/>
);
}
render(<App />, document.querySelector('#app'));
Run the project

To run the project, use the following command:
`bash
npm run dev
`
or
`bash
yarn run dev
`
The output will appear as follows:

Gantt Module in React Gantt component
See also
Getting Started with the Syncfusion React UI Component
Module in React Gantt component
The modules that are available in Gantt are as follows.
| Module | Description |
|------|-------------|
| Sort| Inject this module to use sorting feature.|
| Filter| Inject this module to use filtering feature.|
| Reorder | Inject this module to use reorder feature.|
| ExcelExport | Inject this module to use excel export feature.|
| PdfExport | Inject this module to use PDF export feature.|
| RowDD| Inject this module to use row drag and drop feature.|
| Resize| Inject this module to use resize feature.|
| Toolbar| Inject this module to use toolbar feature.|
| Edit| Inject this module is use editing feature.|
| Selection| Inject this module to use selection feature.|
| DayMarkers| Inject this module to use event markers.|
| ContextMenu| Inject this module to use context menu feature.|
| ColumnMenu| Inject this module to use column menu feature.|
| VirtualScroll| Inject this module to use virtual scroll feature.|
| CriticalPath | Inject this module to use critical path feature.|
These modules should be injected into the Gantt using the Gantt.Inject method.
Data binding in React Gantt component
The Gantt component uses DataManager for binding the data source, which supports both RESTful
JSON data services and local JavaScript object array. The Link to the Video property can be assigned
either with the instance of DataManager or JavaScript object array collection. The Gantt component
supports binding two types of data:
• Local data
• Remote data
The following video explains about the types of data binding and how to use it on the Gantt Chart
component:
Local data
To bind local data to Gantt, you can assign a JavaScript object array to the dataSource property. The
local data source can also be provided as an instance of the DataManager.

Gantt Data binding in React Gantt component
In local data binding, the data source for rendering the Gantt component is retrieved from the same
application locally.
The following are the two types of data binding possible with the Gantt component:
• Hierarchical data binding.

• Self-referential data binding (Flat data).
Hierarchical data binding

The child property is used to map the child records in hierarchical data.
The following code example shows how to bind the hierarchical local data into the Gantt component.
INDEX.JSX
let HierarchyData = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
}
];
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'

};
return <GanttComponent dataSource={HierarchyData} taskFields={taskFields}
height = '400px'>
</GanttComponent>
};
INDEX.TSX
let HierarchyData: Object[] = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
}
];
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return <GanttComponent dataSource={HierarchyData} taskFields={taskFields}
height = '400px'>
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Self-referential data binding (Flat data)

The Gantt component can be bound with self-referential data by mapping the data source field values to
the id and parentID properties.
• ID field: This field contains unique values used to identify each individual task and it is mapped
to the id property.
• Parent ID field: This field contains values that indicate parent tasks and it is mapped to the
parentID property.
INDEX.JSX
let SelfReferenceData = [
{ TaskID: 1,TaskName: 'Project Initiation',StartDate: new
Date('04/02/2019'),EndDate: new Date('04/21/2019')},


Date('04/02/2019'), Duration: 4, Progress: 50,ParentId:1 },
Date('04/02/2019'), Duration: 4, Progress: 50, ParentId:1 },
{ TaskID: 5, TaskName: 'Project Estimation',StartDate: new
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate:
new Date('04/04/2019'), Duration: 3, Progress: 50, ParentId:5 },
Date('04/04/2019'), Duration: 3, Progress: 50, ParentId:5 }
];
function App (){
id: 'TaskID',
name: 'TaskName',
parentID: 'ParentId'
};
return <GanttComponent dataSource={SelfReferenceData}
taskFields={taskFields} height = '450px'>
</GanttComponent>
};
INDEX.TSX
let SelfReferenceData: Object[] = [
{ TaskID: 1,TaskName: 'Project Initiation',StartDate: new
Date('04/02/2019'), Duration: 4, Progress: 50, ParentId:1 },
{ TaskID: 5, TaskName: 'Project Estimation',StartDate: new
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate:
new Date('04/04/2019'), Duration: 3, Progress: 50, ParentId:5 },
Date('04/04/2019'), Duration: 3, Progress: 50, ParentId:5 }
];

function App (){

id: 'TaskID',
name: 'TaskName',
};
return <GanttComponent dataSource={SelfReferenceData}
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Remote data
To bind remote data to the Gantt component, assign service data as an instance of DataManager to the
dataSource property.
INDEX.JSX
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
function App (){
id: 'TaskId',
name: 'TaskName',
child: 'SubTasks'
};
const dataSource = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-
services/api/GanttData',
adaptor: new WebApiAdaptor,
crossDomain: true
});
return <GanttComponent dataSource={dataSource} taskFields={taskFields}
height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskId',
name: 'TaskName',
child: 'SubTasks'
};
const dataSource: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-
services/api/GanttData',
crossDomain: true
});
height = '450px'>
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
URL Adaptor
In Gantt, we can fetch data from SQL database using ADO.NET Entity Data Model and update the
changes on CRUD action to the server by using DataManager support. To communicate with the
remote data we are using UrlAdaptor of DataManager property to call the server method and get back
resultant data in JSON format. We can know more about UrlAdaptor from here.
Please refer the link to create the ADO.NET Entity Data Model in Visual Studio,
We can define data source for Gantt as instance of DataManager using url property of DataManager.
Please Check the below code snippet to assign data source to Gantt.
`ts


import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskId',
name: 'TaskName',
child: 'SubTasks'
};
public dataSource: DataManager = new DataManager({
url: '/Home/UrlDatasource',
adaptor: new UrlAdaptor
});
render() {
return <GanttComponent dataSource={this.dataSource} taskFields={this.taskFields} height = '450px'>
</GanttComponent>
}
};
`
`ts
GanttDataSourceEntities db = new GanttDataSourceEntities();
public ActionResult UrlDatasource(DataManagerRequest dm)
{
List<GanttData>DataList = db.GanttDatas.ToList();
var count = DataList.Count();
return Json(new { result = DataList, count = count });
}
`

Remote Save Adaptor

You may need to perform all Gantt Actions on the client-side except the CRUD operations, which should
be interacted with the server-side to persist data. It can be achieved in Gantt by using
RemoteSaveAdaptor.
Datasource must be set to the json property and set RemoteSaveAdaptor to the adaptor property.
CRUD operations can be mapped to the server-side using the batchUrl properties.
You can use the following code example to use RemoteSaveAdaptor in Gantt.
`ts
import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data';
id: 'taskId',
name: 'taskName',
startDate: 'startDate',
duration: 'duration',
progress: 'progress',
parentID: 'parentID',
dependency: 'predecessor',
},
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'],
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
batchUrl: '/Home/BatchUpdate',
adaptor: new RemoteSaveAdaptor
});

render() {
return <GanttComponent dataSource={this.dataSource} taskFields={this.taskFields} height = '450px'>
</GanttComponent>
}
};
`
The following code example describes the CRUD operations handled at server-side.
`
public IActionResult BatchUpdate([FromBody] CRUDModel batchmodel)
{
public class CRUDModel
{
public List<GanttDataSource> added { get; set; }
public List<GanttDataSource> changed { get; set; }
public List<GanttDataSource> deleted { get; set; }
public object key { get; set; }
public string action { get; set; }
public string table { get; set; }
}
public IActionResult BatchUpdate([FromBody] CRUDModel batchmodel)
{
if (batchmodel.changed != null)
{
for (var i = 0; i < batchmodel.changed.Count(); i++)
{
var value = batchmodel.changed[i];
GanttDataSource result = DataList.Where(or => or.taskId == value.taskId).FirstOrDefault();
result.taskId = value.taskId;
result.taskName = value.taskName;
result.startDate = value.startDate;
result.endDate = value.endDate;
result.duration = value.duration;

result.progress = value.progress;
result.parentID = value.parentID;
}
}
if (batchmodel.deleted != null)
{
for (var i = 0; i < batchmodel.deleted.Count(); i++)
{
DataList.Remove(DataList.Where(or => or.taskId.Equals(batchmodel.deleted[i].taskId)).FirstOrDefault());
RemoveChildRecords(batchmodel.deleted[i].taskId);
}
}
if (batchmodel.added != null)
{
for (var i = 0; i < batchmodel.added.Count(); i++)
{
DataList.Add(batchmodel.added[i]);
}
}
return Json(new { addedRecords = batchmodel.added, changedRecords = batchmodel.changed,
deletedRecords = batchmodel.deleted });
}
public void RemoveChildRecords(int key)
{
var childList = DataList.Where(x => x.parentID == key).ToList();
foreach (var item in childList)
{
DataList.Remove(item);
RemoveChildRecords(item.taskId);
}
}
return Json(new { addedRecords = batchmodel.added, changedRecords = batchmodel.changed,
deletedRecords = batchmodel.deleted });
}

`
Load child on demand
To render child records on demand, assign a remote service URL in the instance of DataManager to the
Url property. To interact with the remote data source, provide the endpoint URL and also define the
hasChildMapping property in taskFields of Gantt Chart.
The <code>hasChildMapping</code> property maps the field name in the data source, which denotes
whether the current record holds any child records. This is useful internally to show expand icon while
binding child data on demand.
When loadChildOnDemand is disabled, all the root nodes are rendered in a collapsed state at initial load.
On expanding the root node, the child nodes will be loaded from the remote server.
When <code>enableVirtualization</code> is enabled and <code>loadChildOnDemand</code> is
disabled, only the current viewport root nodes are rendered in a collapsed state.
When a root node is expanded, its child nodes are rendered and maintained in a collection locally, such
that on consecutive expand/collapse actions on the root node, the child nodes are loaded locally instead
of from the remote server.
When the <code>loadChildOnDemand</code> is enabled, parent records are rendered in an expanded
state.
`ts
import { Selection, VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App() {
url: 'https://services.syncfusion.com/react/production/api/GanttLoadOnDemand',
crossDomain: true
});
id: 'taskId',
name: 'taskName',
endDate: 'endDate',
hasChildMapping: 'isParent',

expandState:'IsExpanded'
};
const projectStartDate: Date = new Date('01/02/2000');
const projectEndDate: Date = new Date('12/01/2002');
return <GanttComponent id='LoadOnDemand' dataSource={dataSource} treeColumnIndex={1}
taskFields={taskFields} enableVirtualization={true} loadChildOnDemand={false} height='460px'
projectStartDate={projectStartDate} projectEndDate={projectEndDate}>
<ColumnsDirective>
<ColumnDirective field='taskId' width='80' ></ColumnDirective>
<ColumnDirective field='taskName' headerText='Job Name' width='250'
clipMode='EllipsisWithTooltip'></ColumnDirective>
<ColumnDirective field='startDate'></ColumnDirective>
<ColumnDirective field='duration'></ColumnDirective>
<ColumnDirective field='progress'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Selection, VirtualScroll]} />
</GanttComponent>
};
export default App;
`
The following code example describes handling of Load on demand at server end.
`ts
public object Get()
{
DataOperations operation = new DataOperations();
var queryString = Request.Query;
if (tree.Count == 0)
tree = TreeData.GetTree();
if (queryString.Keys.Contains("$filter") && !queryString.Keys.Contains("$top"))
{
StringValues filter;
queryString.TryGetValue("$filter", out filter);
int? fltr;

if (filter[0].ToString().Split("eq")[1] == " null")

{
fltr = null;
}
else
{
fltr = Int32.Parse(filter[0].ToString().Split("eq")[1]);
}
IQueryable<TreeData> data1 = tree.Where(f => f.parentID == fltr).AsQueryable();
return new { result = data1.ToList(), count = data1.Count() };
}
StringValues expand;
queryString.TryGetValue("$expand", out expand);
if (queryString.Keys.Contains("$expand")) // setting the ExpandStateMapping property whether is true
or false
{
if (expand[0].ToString().Split(",")[0] == "ExpandingAction")
{
var val = TreeData.GetTree().Where(ds => ds.taskId ==
int.Parse(expand[0].ToString().Split(",")[1])).FirstOrDefault();
val.IsExpanded = true;
}
else if (expand[0].ToString().Split(",")[0] == "CollapsingAction")
{
var val = TreeData.GetTree().Where(ds => ds.taskId ==
int.Parse(expand[0].ToString().Split(",")[1])).FirstOrDefault();
val.IsExpanded = false;
}
}
List<TreeData> data = tree.ToList();
if (queryString.Keys.Contains("$select"))
{
data = (from ord in tree
select new TreeData

{
parentID = ord.parentID
}
).ToList();
return data;
}
data = data.Where(p => p.parentID == null).ToList();
int count = data.Count;
if (queryString.Keys.Contains("$inlinecount"))
{
StringValues Skip;
StringValues Take;
StringValues loadchild;
int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
var GroupData = TreeData.GetTree().ToList().GroupBy(rec => rec.parentID)
.Where(g => g.Key != null).ToDictionary(g => g.Key?.ToString(), g => g.ToList());
foreach (var Record in data.ToList())
{
if (GroupData.ContainsKey(Record.taskId.ToString()))
{
var ChildGroup = GroupData[Record.taskId.ToString()];
if (ChildGroup?.Count > 0)
AppendChildren(ChildGroup, Record, GroupData, data);
}
}
if (expand.Count > 0 && expand[0].ToString().Split(",")[0] == "CollapsingAction")
{
string IdMapping = "taskId";
List<WhereFilter> CollapseFilter = new List<WhereFilter>();
CollapseFilter.Add(new WhereFilter() { Field = IdMapping, value = expand[0].ToString().Split(",")[1],
Operator = "equal" });
var CollapsedParentRecord = operation.PerformFiltering(data, CollapseFilter, "and");

var index = data.Cast<object>().ToList().IndexOf(CollapsedParentRecord.Cast<object>().ToList()[0]);

skip = index;
}
else if (expand.Count > 0 && expand[0].ToString().Split(",")[0] == "ExpandingAction")
{
string IdMapping = "taskId";
List<WhereFilter> ExpandFilter = new List<WhereFilter>();
ExpandFilter.Add(new WhereFilter() { Field = IdMapping, value = expand[0].ToString().Split(",")[1],
Operator = "equal" });
var ExpandedParentRecord = operation.PerformFiltering(data, ExpandFilter, "and");
var index = data.Cast<object>().ToList().IndexOf(ExpandedParentRecord.Cast<object>().ToList()[0]);
skip = index;
}
return new { result = data.Skip(skip).Take(top), count = data.Count };
}
else
{
return TreeData.GetTree();
}
}
private void AppendChildren(List<TreeData> ChildRecords, TreeData ParentItem, Dictionary<string,
List<TreeData>> GroupData, List<TreeData> data)
{
var queryString = Request.Query;
string TaskId = ParentItem.taskId.ToString();
var index = data.IndexOf(ParentItem);
foreach (var Child in ChildRecords)
{
string ParentId = Child.parentID.ToString();
if (TaskId == ParentId && (bool)ParentItem.IsExpanded)
{
if (data.IndexOf(Child) == -1)
((IList)data).Insert(++index, Child);
if (GroupData.ContainsKey(Child.taskId.ToString()))

{
var DeepChildRecords = GroupData[Child.taskId.ToString()];
if (DeepChildRecords?.Count > 0)
AppendChildren(DeepChildRecords, Child, GroupData, data);
}
}
}
}
// GET: api/Orders/
[HttpGet("{id}", Name = "Get")]
public string Get(int id)
{
return "value";
}
[HttpPost]
public object Post([FromBody] TreeData[] value)
{
//handle insert action
for (var i = 0; i < value.Length; i++)
{
tree.Insert(0, value[i]);
}
return value;
}
//// PUT: api/Orders
[HttpPut]
public object Put([FromBody] TreeData[] value)
{
//handle edit action
if (value.Length == 1 && value[0].isParent == true)
{
UpdateDependentRecords(value[0]);
}

for (var i = 0; i < value.Length; i++) {

var ord = value[i];
TreeData val = tree.Where(or => or.taskId == ord.taskId).FirstOrDefault();
val.taskId = ord.taskId;
val.taskName = ord.taskName;
val.endDate = ord.endDate;
val.startDate = ord.startDate;
val.duration = ord.duration;
val.predecessor = ord.predecessor;
}
return value;
}
private void UpdateDependentRecords(TreeData ParentItem)
{
var data = tree.Where(p => p.parentID == ParentItem.taskId).ToList();
var previousData = tree.Where(p => p.taskId == ParentItem.taskId).ToList();
var previousStartDate = previousData[0].startDate;
var previousEndDate = previousData[0].endDate;
double sdiff = (double)GetTimeDifference((DateTime)previousStartDate,
(DateTime)ParentItem.startDate);
double ediff = (double)GetTimeDifference((DateTime)previousEndDate,
(DateTime)ParentItem.endDate);
GetRootChildRecords(ParentItem);
for(var i=0; i<ChildRecords.Count;i++)
{
ChildRecords[i].startDate = ((DateTime)ChildRecords[i].startDate).AddSeconds(sdiff);
ChildRecords[i].endDate = ((DateTime)ChildRecords[i].endDate).AddSeconds(ediff);
}
}
private void GetRootChildRecords(TreeData ParentItem)
{
var currentchildRecords = tree.Where(p => p.parentID == ParentItem.taskId).ToList();
for (var i = 0; i < currentchildRecords.Count; i++) {
var currentRecord = currentchildRecords[i];

ChildRecords.Add(currentRecord);
if (currentRecord.isParent == true)
{
GetRootChildRecords(currentRecord);
}
}
}
public object GetTimeDifference(DateTime sdate, DateTime edate)
{
return new DateTime(edate.Year, edate.Month, edate.Day, edate.Hour, edate.Minute, edate.Second,
DateTimeKind.Utc).Subtract(new DateTime(sdate.Year, sdate.Month, sdate.Day, sdate.Hour,
sdate.Minute, sdate.Second, DateTimeKind.Utc)).TotalSeconds;
}
// DELETE: api/ApiWithActions
[HttpDelete("{id:int}")]
[Route("Orders/{id:int}")]
public object Delete(int id)
{
//handle delete action
tree.Remove(tree.Where(or => or.taskId == id).FirstOrDefault());
return Json(id);
}
public class CRUDModel<T> where T : class
{
public TreeData Value;
public int Key { get; set; }
public int RelationalKey { get; set; }
public List<TreeData> added { get; set; }
public List<TreeData> changed { get; set; }
public List<TreeData> deleted { get; set; }
}
public class TreeData
{
public static List<TreeData> tree = new List<TreeData>();

[System.ComponentModel.DataAnnotations.Key]
public int taskId { get; set; }
public string taskName { get; set; }
public DateTime startDate { get; set; }
public DateTime endDate { get; set; }
public string duration { get; set; }
public int progress { get; set; }
public int? parentID { get; set; }
public string predecessor { get; set; }
public bool? isParent { get; set; }
public bool? IsExpanded { get; set; }
public static List<TreeData> GetTree()
{
if (tree.Count == 0)
{
Random rand = new Random();
var x = 0;
int duration = 0;
DateTime startDate = new DateTime(2000, 1, 3, 08, 00, 00);
for (var i = 1; i <= 50; i++)
{
startDate = startDate.AddDays(i == 1 ? 0 : 7);
DateTime childStartDate = startDate;
TreeData Parent = new TreeData()
{
taskId = ++x,
taskName = "Task " + x,
startDate = startDate,
endDate = childStartDate.AddDays(26),
duration = "20",
progress = rand.Next(100),
predecessor = null,
isParent = true,

parentID = null,
IsExpanded = false
};
tree.Add(Parent);
for (var j = 1; j <= 4; j++)
{
childStartDate = childStartDate.AddDays(j == 1 ? 0 : duration + 2);
duration = 5;
tree.Add(new TreeData()
{
taskId = ++x,
taskName = "Task " + x,
startDate = childStartDate,
endDate = childStartDate.AddDays(5),
duration = duration.ToString(),
progress = rand.Next(100),
parentID = Parent.taskId,
predecessor = (j > 1 ? (x - 1) + "FS" : ""),
isParent = false,
IsExpanded = false
});
}
}
}
return tree;
}
}
`
Limitations
• Filtering, sorting and searching are not supported in load on demand.

• Only Self-Referential type data is supported with remote data binding in Gantt Chart.
• Load-on-demand supports only the validated data source.

Sending additional parameters to the server

We can pass additional parameters using addParams method of Query class. In server side we have
inherited and shown the additional parameter value in Syncfusion DataManager class itself. We pass an
additional parameter in load time using load event. We can also pass additional parameter to the CRUD
model. Please Check the below code snippet to send additional parameter to Gantt.
`ts
import { GanttComponent, Inject, Edit, Toolbar } from '@syncfusion/ej2-react-gantt';
import { DataManager, UrlAdaptor, Query } from '@syncfusion/ej2-data';
id: 'TaskId',
name: 'TaskName',
};
this.editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll'];
url: 'http://localhost:50039/Home/UrlDatasource',
adaptor: new UrlAdaptor,
batchUrl: 'http://localhost:50039/Home/BatchSave',
});
load(args) {
this.ganttInstance.query = new Query().addParams('ej2Gantt', "test");
}
render() {

return <GanttComponent dataSource={this.dataSource} taskFields={this.taskFields}

editSettings={this.editOptions} toolbar={this.toolbarOptions} load={this.load.bind(this)} height = '450px'
ref={gantt => this.ganttInstance = gantt}>
<Inject services={[Edit, Toolbar]}/>
</GanttComponent>
}
};
`
`ts
namespace URLAdaptor.Controllers
{
public class HomeController : Controller
{
...///
//inherit the class to show age as property of DataManager
public class Test : DataManagerRequest
{
public string ej2Gantt { get; set; }
}
public ActionResult UrlDatasource([FromBody]Test dm)
{
if (DataList == null)
{
ProjectData datasource = new ProjectData();
DataList = datasource.GetUrlDataSource();
}
var count = DataList.Count();
return Json(new { result = DataList, count = count }, JsonRequestBehavior.AllowGet);
}
...///
public class ICRUDModel<T> where T : class
{
public object key { get; set; }

public T value { get; set; }

public List<T> added { get; set; }
public List<T> changed { get; set; }
public List<T> deleted { get; set; }
public IDictionary<string, object> @params { get; set; }
}
...///
}
}
`
You can find the full sample from here.
Handling HTTP error
During server interaction from the Gantt, some server-side exceptions may occur, and you can acquire
those error messages or exception details in client-side using the actionFailure event.
The argument passed to the actionFailure event contains the error details returned from the server.
INDEX.JSX
import { DataManager } from '@syncfusion/ej2-data';
function App(){
id: 'TaskId',
name: 'TaskName',
};
const dataSource = new DataManager({
url: 'http://some.com/invalidUrl'
});
let ganttInstance;
function actionFailure(args) {
let span = document.createElement('span');
ganttInstance.element.parentNode.insertBefore(span,
ganttInstance.element);
span.style.color = '#FF0000'
span.innerHTML = 'Server exception: 404 Not found';
}
actionFailure={actionFailure} height = '450px'
ref={gantt => ganttInstance = gantt}>
</GanttComponent>
};

INDEX.TSX
function App(){
id: 'TaskId',
name: 'TaskName',
};
url: 'http://some.com/invalidUrl'
});
let ganttInstance;
function actionFailure(args) {
let span: HTMLElement = document.createElement('span');
ganttInstance.element.parentNode.insertBefore(span,
ganttInstance.element);
span.style.color = '#FF0000'
span.innerHTML = 'Server exception: 404 Not found';
}
actionFailure={actionFailure} height = '450px'
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {

color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Binding with Ajax

You can use Gantt dataSource property to bind the data source to Gantt from external Ajax request. In
the below code we have fetched the data source from the server with the help of Ajax request and
provided that to dataSource property by using onSuccess event of the Ajax.
INDEX.JSX
import { Ajax } from '@syncfusion/ej2-base';
function App (){
const taskFields= {
id: 'TaskId',
name: 'TaskName',
};
let ganttInstance;
function clickHandler() {
let ajax = new
Ajax("https://ej2services.syncfusion.com/production/web-
services/api/GanttData","GET");
ganttInstance.showSpinner();
ajax.send();
ajax.onSuccess = function (data) {
ganttInstance.hideSpinner();
ganttInstance.dataSource = (JSON.parse(data)).Items;
ganttInstance.refresh();
};
}
return <div>
<ButtonComponent onClick={clickHandler}>Bind Data</ButtonComponent>
<GanttComponent taskFields={taskFields}
projectStartDate='02/24/2019' projectEndDate='07/20/2019' height = '450px'
</GanttComponent>

</div>
};
ReactDOM.render(<App />, document.getElementById('root'));;
INDEX.TSX
import { Ajax } from '@syncfusion/ej2-base';
function App (){
id: 'TaskId',
name: 'TaskName',
};
let ganttInstance:any;
let ajax = new
Ajax("https://ej2services.syncfusion.com/production/web-
services/api/GanttData","GET");
ganttInstance.showSpinner();
ajax.send();
ajax.onSuccess = function (data: string) {
ganttInstance.hideSpinner();
ganttInstance.dataSource = (JSON.parse(data)).Items;
ganttInstance.refresh();
};
}
return <div>
<ButtonComponent onClick={clickHandler}>Bind Data</ButtonComponent>
<GanttComponent taskFields={taskFields}
projectStartDate='02/24/2019' projectEndDate='07/20/2019' height = '450px'
</GanttComponent>
</div>
};
ReactDOM.render(<App />, document.getElementById('root'));;
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Note: If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot
perform any server side crud actions.
Split task
The Split-task feature allows you to split a task or interrupt the work during planned or unforeseen
circumstances.
We can split the task either in load time or dynamically, by defining the segments either in hierarchical
or self-referential way.
Hierarchical
To split a task at load time in hierarchical way, we need to define the segment details in datasource and
this field should be mapped by using the taskFields.segments property.
`ts
[
{
TaskID: 1, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress:
50,
Segments: [
{ StartDate: new Date("04/02/2019"), Duration: 2 },
{ StartDate: new Date("04/04/2019"), Duration: 2 }
]
}

]
`
INDEX.JSX
let GanttData = [
{
TaskID: 1,
subtasks: [
new Date('04/02/2019'), Duration: 4, Progress: 50,
Segments: [
] },
Date('04/02/2019'), Duration: 4 , Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
]
}
];
function App () {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks',
segments: 'Segments'
};
return <GanttComponent dataSource={GanttData} taskFields={taskFields}
height='450px'>
</GanttComponent>;

};
INDEX.TSX
let GanttData = [
{
TaskID: 1,
subtasks: [
Segments: [
] },
]
},
{
TaskID: 5,
subtasks: [
]
}
];
function App () {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks',
segments: 'Segments'
};
return <GanttComponent dataSource={GanttData} taskFields={taskFields}
height='450px'>
</GanttComponent>;

};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Self-referential
We can also define segment details as a flat data and this collection can be mapped by using
segmentData property. The segment id field of this collection is mapped by using the
taskFields.segmentId property.
`ts
taskFields: {
segmentId: "segmentId"
},
segmentData: [

{ segmentId: 1, StartDate: new Date("02/04/2019"), Duration: 2 },

{ segmentId: 4, StartDate: new Date("04/04/2019"), Duration: 2 }
],
`
INDEX.JSX
let GanttData = [
{
TaskID: 1,
subtasks: [
Segments: [
] },
]
},
{
TaskID: 5,
subtasks: [
]
}
];
function App() {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',

child: 'subtasks',
segmentId: 'segmentId'
};
const segmentData = [
];
return (<GanttComponent dataSource={GanttData} taskFields={taskFields}

segmentData={segmentData} height='450px'>
</GanttComponent>)
};
INDEX.TSX
let GanttData = [
{
TaskID: 1,
subtasks: [
Segments: [
] },
]
},
{
TaskID: 5,
subtasks: [
]
}
];
function App() {

id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks',
segmentId: 'segmentId'
};
const segmentData = [
];
return (<GanttComponent dataSource={GanttData} taskFields={taskFields}

segmentData={segmentData} height='450px'>
</GanttComponent>)
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>

</div>
</body>
</html>
Note: Segment id field contains id of a task which should be split at load time.
Improve performance by disabling validations
The autoCalculateDateScheduling property can help you reduce the time taken for the Gantt chart to
render on the initial load. When this API is enabled, parent-child validation, data validation, and
predecessor validation are restricted, allowing the Gantt chart to load more quickly. Since we are
disabling the validations, data source provided to gantt should have all data such as start date, end date,
duration, as proper data.
INDEX.JSX
let tempData = [
{
TaskID: 1, TaskName: 'Product concept',StartDate: new
Date('04/02/2019'), EndDate: new Date('04/21/2019'),
parentID: 0
},
{
TaskID: 2, TaskName: 'Defining the product and its usage',
Duration: 3, Progress: 30, parentID: 1
},
{
TaskID: 3, TaskName: 'Defining target audience', StartDate: new
Date('04/02/2019'),
parentID: 1, Duration: 3
},
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate:
new Date('04/05/2019'),
Duration: 2, parentID: 1, Progress: 30
},
{
TaskID: 5, TaskName: 'Concept approval', StartDate: new
Date('04/08/2019'),
},
{
TaskID: 6, TaskName: 'Market research', StartDate: new
Date('04/02/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 7, TaskName: 'Demand analysis', StartDate: new
Date('04/04/2019'),
EndDate: new Date('04/21/2019'), parentID: 6
},
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new
Date('04/09/2019'),

},
{
TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new
Date('04/09/2019'),
Duration: 4, parentID: 7
},
{
TaskID: 10, TaskName: 'Competitor analysis', StartDate: new
Date('04/15/2019'),
},
{
TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new
Date('04/15/2019'),
},
{
TaskID: 12, TaskName: 'Research complete', StartDate: new
Date('04/18/2019'),
},
{
TaskID: 13, TaskName: 'Product design and development', StartDate:
new Date('04/04/2019'),
},
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new
Date('04/19/2019'),
},
{
TaskID: 15, TaskName: 'Quality design', StartDate: new
Date('04/19/2019'),
},
{
TaskID: 16, TaskName: 'Define reliability', StartDate: new
Date('04/24/2019'),
},
{
TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new
Date('04/24/2019'),
},
{
TaskID: 18, TaskName: 'Define cost plan', StartDate: new
Date('04/04/2019'),
},
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new
Date('04/26/2019'),
},
{

TaskID: 20, TaskName: 'Selling cost', StartDate: new

Date('04/26/2019'),
},
{
TaskID: 21, TaskName: 'Development of the final design', StartDate:
new Date('04/30/2019'),
},
{
TaskID: 22, TaskName: 'Defining dimensions and package volume',
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards',
},
{
TaskID: 24, TaskName: 'Include all the details', StartDate: new
Date('05/06/2019'),
},
{
TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new
Date('05/09/2019'),
},
{
TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate:
new Date('09/14/2019'),
},
{
TaskID: 27, TaskName: 'Design complete', StartDate: new
Date('05/16/2019'),
},
{
TaskID: 28, TaskName: 'Prototype testing', StartDate: new
Date('05/17/2019'),
},
{
TaskID: 29, TaskName: 'Include feedback', StartDate: new
Date('05/17/2019'),
},
{
TaskID: 30, TaskName: 'Manufacturing', StartDate: new
Date('05/23/2019'),
},
{
TaskID: 31, TaskName: 'Assembling materials to finsihed goods',

},
{
TaskID: 32, TaskName: 'Feedback and testing', StartDate: new
Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate:
new Date('06/06/2019'),
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate:
new Date('06/11/2019'),
},
{
TaskID: 35, TaskName: 'Final product development', StartDate: new
Date('04/04/2019'),
},
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new
Date('06/14/2019'),
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate:
new Date('06/14/2019'),
},
{
TaskID: 38, TaskName: 'Final product', StartDate: new
Date('04/04/2019'),
},
{
TaskID: 39, TaskName: 'Branding product', StartDate: new
Date('06/20/2019'),
},
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new
Date('06/26/2019'), Duration: 4,
Progress: 30, parentID: 38
}
];
let virtualData = [];
let projId = 1;
for (let i = 0; i < 50; i++) {
let x = virtualData.length + 1;
let parent = {};
/* tslint:disable:no-string-literal */
parent['TaskID'] = x;
parent['TaskName'] = 'Project ' + (i + 1);
virtualData.push(parent);

for (let j = 0; j < tempData.length; j++) {

let subtasks = {};
subtasks['TaskID'] = tempData[j].TaskID + x;
subtasks['TaskName'] = tempData[j].TaskName;
subtasks['StartDate'] = tempData[j].StartDate;
subtasks['Duration'] = tempData[j].Duration;
subtasks['Progress'] = tempData[j].Progress;
subtasks['parentID'] = tempData[j].parentID + x;
virtualData.push(subtasks);
}
}
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Edit,
Selection, Toolbar, VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
parentID: 'parentID'
};
const splitterSettings= {
columnIndex: 2
};
taskLabel: 'Progress'
};
allowAdding: true,
allowEditing: true,
};
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll',
'CollapseAll', 'Indent', 'Outdent'];
return (
<GanttComponent dataSource={virtualData} treeColumnIndex={1}
allowSelection={true} highlightWeekends={true}
enableVirtualization={true}
taskFields={taskFields} splitterSettings={splitterSettings}
autoCalculateDateScheduling={false} toolbar={toolbar}
<ColumnsDirective>
<ColumnDirective field='TaskID'/>
<ColumnDirective field='TaskName' headerText='Task
Name'/>
<ColumnDirective field='Progress'/>
</ColumnsDirective>

<Inject services={[Selection, VirtualScroll,Edit,Toolbar]} />

</GanttComponent>
)
};
INDEX.TSX
let tempData: any[] = [
{
parentID: 0
},
{
},
{
Date('04/02/2019'),
},
{
new Date('04/05/2019'),
},
{
Date('04/08/2019'),
},
{
Date('04/02/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/09/2019'),
},
{
Date('04/09/2019'),
},
{


Date('04/15/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/18/2019'),
},
{
new Date('04/04/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/26/2019'),
},
{
Date('04/26/2019'),
},
{
new Date('04/30/2019'),


},
{
},
{
},
{
Date('05/06/2019'),
},
{
Date('05/09/2019'),
},
{
new Date('09/14/2019'),
},
{
Date('05/16/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/23/2019'),
},
{
},
{
Date('04/04/2019'),
},

{
new Date('06/06/2019'),
},
{
new Date('06/11/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/14/2019'),
},
{
new Date('06/14/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/20/2019'),
},
{
Date('06/26/2019'), Duration: 4,
}
];
let virtualData: any[] = [];
let projId: number = 1;
for (let i: number = 0; i < 50; i++) {
let x: number = virtualData.length + 1;
let parent: any = {};
for (let j: number = 0; j < tempData.length; j++) {
let subtasks: any = {};

}
}
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
};
const splitterSettings: any = {
columnIndex: 2
};
};
allowAdding: true,
allowEditing: true,
};
const toolbar: any = ['Add', 'Edit', 'Update', 'Delete', 'Cancel',
'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];
return (
<ColumnsDirective>
Name'/>
</ColumnsDirective>
</GanttComponent>
)
};

Gantt Columns in React Gantt component
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Limitations
Gantt has the support for both Hierarchical and Self-Referential data binding. When rendering the Gantt
control with SQL database, we suggest you to use the Self-Referential data binding to maintain the
parent-child relation. Because the complex json structure is very difficult to manage it in SQL tables, we
need to write a complex queries and we have to write a complex algorithm to find out the proper record
details while updating/deleting the inner level task in Gantt data source. We cannot implement both
data binding for Gantt control and this is not a recommended way. If both child and parentID are
mapped, the records will not render properly because, when task id of a record defined in the hierarchy
structure is assigned to parent id of another record, in such case the records will not properly render. As
the self-referential will search the record with particular id in flat data only, not in the inner level of
records. If we map the parentID field, it will be prioritized and Gantt will be rendered based on the
parentID values.
Columns in React Gantt component
The column displays information from a bound data source, and you can edit the values of column to
update the task details through TreeGrid. The operations such as sorting, filtering, and searching can be

performed based on column definitions. To display a Gantt column, the field property should be
mapped from the data source to the column.
If the column field is not specified in the data source, the column values will be empty.
The treeColumnIndex property is used to define the expander column in the Gantt component to
expand and collapse the child rows.
Defining columns
Using the columns property, you can define the columns in Gantt. If the columns are not defined, then
the default columns will be rendered based on the mapped data source fields in the taskFields property.
Refer to the following code example for defining the columns in Gantt along with their widths.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];

import { GanttComponent,ColumnsDirective,ColumnDirective } from
'@syncfusion/ej2-react-gantt';
function App (){

id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
height = '450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='150'
></ColumnDirective>
<ColumnDirective field='TaskName'
width='250'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
let data: Object[] = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];

function App (){

id: 'TaskID',

name: 'TaskName',
child: 'subtasks'
};
height = '450px'>
<ColumnsDirective>
></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Custom column header

The column header text can be defined using the headerText property, and you can customize the
column headers using the headerTemplate property.
INDEX.JSX
import { GanttComponent, ColumnsDirective, ColumnDirective } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const splitterSettings = {
columnIndex: 7
};
splitterSettings={splitterSettings} height = '450px'>
<ColumnsDirective>
<ColumnDirective field='TaskName' headerText='Job Name'
headerTemplate={() => {
return (<div><img src="taskname.png" width="20"
height="20" className="e-image" />
<b className='e-header'>Task Name</b></div>);
}}></ColumnDirective>
<ColumnDirective field='StartDate' headerTemplate={() => {
return (<div><img src="startdate.png" width="20"
<b className='e-header'>Start Date</b></div>);
<ColumnDirective field='Duration' headerTemplate={() => {
return (<div><img src="duration.png" width="20"
<b className='e-header'>Duration</b></div>);
<ColumnDirective field='Progress' headerTemplate={() => {
return (<div><img src="progress.png" width="20"
<b className='e-header'>Progress</b></div>);
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex: 7
};
<ColumnsDirective>
headerTemplate={() => {
return (<div><img src="taskname.png" width="20"
<b className='e-header'>Task Name</b></div>);
<ColumnDirective field='StartDate' headerTemplate={() => {
return (<div><img src="startdate.png" width="20"
<b className='e-header'>Start Date</b></div>);
<ColumnDirective field='Duration' headerTemplate={() => {
return (<div><img src="duration.png" width="20"
<b className='e-header'>Duration</b></div>);
<ColumnDirective field='Progress' headerTemplate={() => {
return (<div><img src="progress.png" width="20"
<b className='e-header'>Progress</b></div>);
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Format
To format the cell values based on a specific culture, use the columns.format property. The Gantt
component uses the Internationalization library to format number and date values.
INDEX.JSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex : 4
};
<ColumnsDirective>
></ColumnDirective>


<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Progress'
format='P2'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Predecessor'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex : 4
};
<ColumnsDirective>
></ColumnDirective>
format='P2'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
By default, the number and date values are formatted in en-US culture.
Number formatting
The number or integer values can be formatted using the following format strings.
Format |Description |Remarks
{ type:'date', format:'dd/MM/yyyy' } | 04/07/2019
{ type:'date', format:'dd.MM.yyyy' } | 04.07.2019
{ type:'date', skeleton:'short' } | 7/4/19
{ type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' } | 04/07/2019 12:00 AM
{ type: 'dateTime', format: 'MM/dd/yyyy hh:mm:ss a' } | 07/04/2019 12:00:00 AM
INDEX.JSX
function App () {
id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
columnIndex: 4
};
const formatOption = { type: 'date', format: 'dd.MM.yyyy' };

splitterSettings={splitterSettings} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'
<ColumnDirective field='StartDate'
format={formatOption}></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>;
}
INDEX.TSX
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
public splitterSettings: any = {
columnIndex : 4
};
public formatOption: Object = {type:'date', format:'dd.MM.yyyy'};
render() {
return <GanttComponent dataSource={data}
taskFields={this.taskFields}
splitterSettings={this.splitterSettings} height = '450px'>
<ColumnsDirective>
></ColumnDirective>

format={this.formatOption}></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
}
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Change tree/expander column

The tree/expander column is a column in the Gantt component, that has icons to expand or collapse the
parent records. You can define the tree column index in the Gantt component by using the
treeColumnIndex property and the default value of this property is 0. The following code example shows
how to use this property.
INDEX.JSX


function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
position : '90%'
};
splitterSettings={splitterSettings} taskFields={taskFields}
treeColumnIndex={2}
height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
position : '90%'
};
splitterSettings={splitterSettings} taskFields={taskFields}
treeColumnIndex={2}
height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Show or hide columns dynamically

You can show or hide gantt columns dynamically using external buttons by invoking the showColumn or
hideColumn method.
INDEX.JSX
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective } from
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex : 5

};
function show() {
/** show by HeaderText */
ganttInstance.showColumn(['Duration']);
}
function hide(){
/** hide by HeaderText */
ganttInstance.hideColumn(['Duration']);
}
return (<div>
<ButtonComponent onClick= { show }>Show</ButtonComponent>
<ButtonComponent onClick= { hide }>Hide</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} height = '450px'
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' ></ColumnDirective>
Name'></ColumnDirective>
<ColumnDirective field='Duration'
headerText='Duration'></ColumnDirective>
</ColumnsDirective>
</GanttComponent></div>)
};
INDEX.TSX
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective } from
function App(){
let ganttInstance: GanttComponent;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex : 5
};
function show() {
/** show by HeaderText */
ganttInstance.showColumn(['Duration']);
}
function hide(){
/** hide by HeaderText */
ganttInstance.hideColumn(['Duration']);

}
return (<div>
<ButtonComponent onClick= { show }>Show</ButtonComponent>
<ButtonComponent onClick= { hide }>Hide</ButtonComponent>
splitterSettings={splitterSettings} height = '450px'
<ColumnsDirective>
Name'></ColumnDirective>
headerText='Duration'></ColumnDirective>
</ColumnsDirective>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>

</html>
Controlling Gantt column actions

You can enable or disable gantt action for a particular column by setting the allowFiltering, allowSorting,
allowReordering, and allowEditing properties.
INDEX.JSX
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Resize,
Sort, Filter, Edit, Reorder } from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
position : '90%'
};
let ganttInstance;
allowEditing : true
};
return (<div>
splitterSettings={splitterSettings} height='450px' allowSorting={true}
allowFiltering={true} allowReordering={true} editSettings={editSettings}
<ColumnsDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
allowSorting= {false}></ColumnDirective>
<ColumnDirective field='StartDate' allowEditing=
{false}></ColumnDirective>
<ColumnDirective field='Duration' allowFiltering=
<ColumnDirective field='Progress' allowReordering=
</ColumnsDirective>
<Inject services={[Sort, Filter, Reorder, Edit]}/>
};
INDEX.TSX

import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Resize,

Sort, Filter, Edit, Reorder } from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
position : '90%'
};
allowEditing : true
};
return (<div>
splitterSettings={splitterSettings} height='450px' allowSorting={true}
allowFiltering={true} allowReordering={true} editSettings={editSettings}
<ColumnsDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
allowSorting= {false}></ColumnDirective>
<ColumnDirective field='StartDate' allowEditing=
<ColumnDirective field='Duration' allowFiltering=
<ColumnDirective field='Progress' allowReordering=
</ColumnsDirective>
<Inject services={[Sort, Filter, Reorder, Edit]}/>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

Gantt Time line in React Gantt component
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Column type
Column type can be specified using the columns.type property. It specifies the type of data the column
binds.
If the format is defined for a column, the column uses type to select the appropriate format option
number or date.
Gantt column supports the following types:
• string
• number
• boolean
• date
• datetime
If the type is not defined, it will be determined from the first record of the dataSource.
In case if the first record of the dataSource is null/blank value for a column then it is necessary to define
the type for that column.
Time line in React Gantt component

In the Gantt component, timeline is used to represent the project duration as individual cells with
defined unit and formats.
Timeline view modes
Gantt contains the following in-built timeline view modes:
• Hour
• Day
• Week

• Month
• Year
Timescale mode in Gantt can be defined by using timelineViewMode property and also we can define
timescale mode of top tier and bottom tier by using topTier.unit and bottomTier.unit properties.
Week timeline mode
In the Week timeline mode, the upper part of the schedule header displays the weeks, whereas the
bottom half of the header displays the days. Refer to the following code example.
INDEX.JSX
import { GanttComponent} from '@syncfusion/ej2-react-gantt';
function App (){
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const timelineSettings = {
timelineViewMode:'Week'
};
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const timelineSettings: any = {
timelineViewMode:'Week'
};
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Month timeline mode

In the Month timeline mode, the upper part of the schedule header displays the months, whereas the
bottom header of the schedule displays its corresponding weeks. Refer to the following code example.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
timelineUnitSize: 80,
timelineViewMode:'Month'
};
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Month'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Year timeline mode

In the Year timeline mode, the upper schedule header displays the years whereas, the bottom header
displays its corresponding months. Refer to the following code example.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Year'
};
</GanttComponent>
};
INDEX.TSX


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Year'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>

</body>
</html>
Day timeline mode

In the Day timeline mode, the upper part of the header displays the days whereas, the bottom schedule
header displays its corresponding hours. Refer to the following code example.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Day'
};
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Day'
};
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Hour timeline mode

An Hour timeline mode tracks the tasks in minutes scale. In this mode, the upper schedule header
displays hour scale and the lower schedule header displays its corresponding minutes.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },


]
},
{
TaskID: 5,
subtasks: [
StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 },
Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Hour'
};
dateFormat="M/d/yyyy hh:mm:ss tt" durationUnit="Minute"
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [

]
},
{
TaskID: 5,
subtasks: [
StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 },
Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Hour'
};
dateFormat="M/d/yyyy hh:mm:ss tt" durationUnit="Minute"
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Change timeline view mode programmatically

In the Gantt component, the timeline view mode can be modified programmatically. As described
below, the Dropdown menu is also used to change the timeline view. The Dropdownlist component
can be used to create a dropdown menu. Once the dropdown menu is enabled, the timelineViewMode
property from the timelineSettings can be utilized to switch the timeline view between Hour, Day,
Week, Month, and Year. Refer to the following code example.
INDEX.JSX
function App (){
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const modes=[
{
item: "Hour",
id:"1"
},
{
item: "Day",
id:"2"
},

{
item: "Week",
id:"3"
},
{
item: "Month",
id:"4"
},
{
item: "Year",
id:"5"
}
];
const fields={text:"item", value:"id"};
if(args.value==="1")
{
ganttInstance.timelineSettings.timelineViewMode="Hour";
}
else if(args.value==="2")
{
ganttInstance.timelineSettings.timelineViewMode="Day";
}
{
ganttInstance.timelineSettings.timelineViewMode="Week";
}
{
ganttInstance.timelineSettings.timelineViewMode="Month";
}
{
ganttInstance.timelineSettings.timelineViewMode="Year";
}
}
return (
<div>
<DropDownListComponent id="modes" placeholder="Select"
dataSource={modes}
fields={fields} change={onChange} width="150px"/>
<GanttComponent ref={gantt => ganttInstance =gantt}

dataSource={data} taskFields={taskFields}
height = '450px'>
</GanttComponent>
</div>
);
};
INDEX.TSX


function App (){
const taskFields:any= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const modes:any=[
{
item: "Hour",
id:"1"
},
{
item: "Day",
id:"2"
},
{
item: "Week",
id:"3"
},
{
item: "Month",
id:"4"
},
{
item: "Year",
id:"5"
}
];
const fields:any={text:"item", value:"id"};
function onChange(args:any) {
{
ganttInstance.timelineSettings.timelineViewMode="Hour";
}
{
ganttInstance.timelineSettings.timelineViewMode="Day";
}
{
ganttInstance.timelineSettings.timelineViewMode="Week";
}
{
ganttInstance.timelineSettings.timelineViewMode="Month";
}
{
ganttInstance.timelineSettings.timelineViewMode="Year";
}
}

return (
<div>
<DropDownListComponent id="modes" placeholder="Select"
dataSource={modes}
fields={fields} change={onChange} width="150px"/>
<GanttComponent ref={gantt => ganttInstance =gantt}

dataSource={data} taskFields={taskFields}
height = '450px'>
</GanttComponent>
</div>
);
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Week start day customization

In the Gantt component, you can customize the week start day using the weekStartDay property. By
default, the weekStartDay is set to 0, which specifies the Sunday as a start day of the week. But, you can
customize the week start day by using the following code example.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Week',
weekStartDay: 3
};
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
timelineViewMode:'Week',
weekStartDay: 3
};
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Customize automatic timescale update action

In the Gantt component, the schedule timeline will be automatically updated when the tasks date values
are updated beyond the project start date and end date ranges. This can be enabled or disabled using
the updateTimescaleView property.
INDEX.JSX
react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
const editOptions = {
allowEditing: true,
};
updateTimescaleView: false
};
timelineSettings={timelineSettings} allowSelection={true}
editSettings={editOptions} height = '450px'>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const editOptions: EditSettingsModel = {
allowEditing: true,
};
updateTimescaleView: false
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Timeline cells tooltip

In the Gantt component, you can enable or disable the mouse hover tooltip of timeline cells using the
timelineSettings.showTooltip property. The default value of this property is true. The following code
example shows how to enable the timeline cells tooltip in Gantt.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
showTooltip: true
};

</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
showTooltip: true
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;

Gantt Splitter in React Gantt component
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Splitter in React Gantt component

Splitter
In the Gantt component, the Splitter separates the TreeGrid section from the Chart section. You can
change the position of the Splitter when loading the Gantt component using the splitterSettings
property. By splitting the TreeGrid from the chart, the width of the TreeGrid and chart sections will vary
in the component. The splitterSettings.position property denotes the percentage of the TreeGrid
section’s width to be rendered and this property supports both pixels and percentage values. You can
define the splitter position as column index value using the splitterSettings.columnIndex property. You
can also define the splitter position with built-in splitter view modes by using the splitterSettings.view
property. The following list is the possible values for this property:
• Default: Shows Grid side and Gantt side.

• Grid: Shows Grid side alone in Gantt.
• Chart: Shows chart side alone in Gantt.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
position: "80%"
};
</GanttComponent>
};
INDEX.TSX


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
position: "80%"
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>

</body>
</html>
Changing splitter view

In the Gantt component, it is possible to change the view of the component to a grid view, a chart view,
or both using the dropdown menu. This can be achieved by customizing the toolbar, which allows to add
custom toolbar items using the template attribute.
Refer below link for more details.
• To Add Custom Toolbar items
To add a custom dropdown menu to the toolbar, use the DropDownList component which is available
in @syncfusion/ej2-react-dropdowns library.
After enabling the dropdown menu in the toolbar, pass the data to the dataSource property. To modify
the component's view, use the change property. To do this, call the setSplitterPosition method on the
ganttInstance with the value and type of splitter property as an parameter, after checking with the
user's choice and the given data condition is true.
The following code example shows, how to enable the dropdown menu in the Toolbar and change view
of the Gantt component.
INDEX.JSX
import { GanttComponent, Inject,Toolbar } from '@syncfusion/ej2-react-
gantt';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
function App() {
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
{
ganttInstance.setSplitterPosition("100%","position")
}
{
ganttInstance.setSplitterPosition("0%", "position");
}

{
}
const items = [
{
item: 'Grid Only',
id:"1"
},
{
item: 'Chart Only',
id:"2"
},
{
item: 'Grid and Chart',
id:"3"
}];
const toolbarOptions = ['ExpandAll','CollapseAll',{type: "Input",
tooltipText:"Change View", template: new DropDownList({dataSource:items,
placeholder:"Select", change:onChange, fields:{text:'item', value:'id'}})}]
return (<GanttComponent ref={gantt => ganttInstance =gantt}

dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
height='450px'>
<Inject services={[Toolbar]}/>
</GanttComponent>);
}
;
INDEX.TSX
import { GanttComponent, Inject,Toolbar } from '@syncfusion/ej2-react-
gantt';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
function App() {
const taskFields:any= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function onChange(args:any) {
{

ganttInstance.setSplitterPosition("100%","position")
}
{
}
{
}
const items:any = [
{
item: 'Grid Only',
id:"1"
},
{
item: 'Chart Only',
id:"2"
},
{
item: 'Grid and Chart',
id:"3"
}];
const toolbarOptions:any = ['ExpandAll','CollapseAll',{type: "Input",
tooltipText:"Change View", template: new DropDownList({dataSource:items,
placeholder:"Select", change:onChange, fields:{text:'item', value:'id'}})}]
return (<GanttComponent ref={gantt => ganttInstance =gantt}

dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
height='450px'>
</GanttComponent>);
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Change splitter position dynamically

In Gantt, we can change the splitter position dynamically by using setSplitterPosition method. We can
change the splitter position by passing value and type parameter to setSplitterPosition method. Type
parameter will accept one of the following values 'position', 'columnIndex', 'viewType'. The following
code example shows how to use this method.
INDEX.JSX
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function clickHandler(){
ganttInstance.setSplitterPosition('50%', 'position');
}
function changeindex(){
ganttInstance.setSplitterPosition(0, 'columnIndex');
}
return (<div>
<ButtonComponent onClick= {
clickHandler}>ChangeByPosition</ButtonComponent>
changeindex}>ChangeByIndex</ButtonComponent>


height = '450px' ref={gantt => ganttInstance = gantt}>
};
INDEX.TSX
function App(){
let ganttInstance: any;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.setSplitterPosition('50%', 'position');
}
function changeindex(){
ganttInstance.setSplitterPosition(0, 'columnIndex');
}
return (<div>
clickHandler}>ChangeByPosition</ButtonComponent>
changeindex}>ChangeByIndex</ButtonComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

Gantt Task scheduling in React Gantt component
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Task scheduling in React Gantt component

The Gantt provides support for automatic and manual task scheduling modes. It is used to indicate
whether the start date and end date of all the tasks will be automatically validated or not. taskMode is
the property used to change the schedule mode of a task.
The Gantt control supports three types of mode. They are:
• Auto: All the tasks are automatically validate.

• Manual: All the tasks are manually validate by the user.
• Custom: Both Auto and Manual tasks are render by mapped from data source.
Note: The default value of taskMode is Auto.

Automatically scheduled Tasks
When the taskMode property is set as Auto, the start date and end date of all the tasks in the project
will be automatically validated. That is, dates are validated based on various factors such as working
time, holidays, weekends and predecessors.
In auto scheduling mode, the parent taskbar will be rendered according to the minimum start date and
maximum end date of its child records, irrespective of the dates provided to it.
If a child task is updated, the parent task's start and end dates are automatically updated to reflect the
changes. The parent task's progress is also updated based on the progress of its child tasks.
The rendering of the parent taskbar in auto-scheduling mode also takes into account the dependencies
between tasks. If a child task is dependent on another task, the parent task's start date and end date will
be adjusted accordingly to ensure that the child task is not scheduled to start before its predecessor is
completed.
INDEX.JSX


import { GanttComponent, Inject, Edit, Selection, Toolbar, ColumnsDirective,
ColumnDirective } from '@syncfusion/ej2-react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children',
manual: 'isManual'
};
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update',
'PrevTimeSpan', 'NextTimeSpan', 'ExpandAll', 'CollapseAll', 'Search'];
allowEditing: true,
};
highlightWeekends={true} toolbar={toolbarOptions}
editSettings={editSettings} taskMode='Custom' height='450px'>
<ColumnsDirective>
visible={false}></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
<ColumnDirective field='isManual'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Edit, Selection, Toolbar]}/>
</GanttComponent>
};
INDEX.TSX
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children',
manual: 'isManual'
};
allowEditing: true,

};
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Manually scheduled Tasks

When the taskMode property is set as Manual, the start date and end date of all the tasks in the project
will be same as given in the data source. That is, dates are not validated based on various factors such as
dependencies between tasks, holidays, weekends, working time.We can restrict this mode in
predecessor validation alone. That is, we can automatically validate the dates based on predecessor
values by enabling the validateManualTasksOnLinking property.
INDEX.JSX
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children',
manual: 'isManual'
};
allowEditing: true,
};
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
function App() {
id: 'TaskID',
name: 'TaskName',

child: 'Children',
manual: 'isManual'
};
allowEditing: true,
};
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Custom
When the taskMode property is set as Custom, the scheduling mode for each tasks will be mapped
from the data source field. The Boolean property taskFields.manual is used to map the manual
scheduling mode field from the data source.
INDEX.JSX
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children',
manual: 'isManual'
};
allowEditing: true,
};
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX


function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children',
manual: 'isManual'
};
allowEditing: true,
};
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>

#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Unscheduled Tasks
Unscheduled tasks are planned for a project without any definite schedule dates. The Gantt control
supports rendering the unscheduled tasks. You can create or update the tasks with anyone of start date,
end date, and duration values or none. You can enable or disable the unscheduled tasks by using the
allowUnscheduledTasks property. The following images represent the various types of unscheduled
tasks in Gantt.
Taskbar state |Auto |Manual

Start Date Only | |

End Date Only | |

Duration Only | |

Milestone| |
Note: A milestone is a task that has no start and end dates, but it has a duration value of zero
Define unscheduled tasks in data source
You can define the various types of unscheduled tasks in the data source as follows
INDEX.JSX
let GanttData = [
{
TaskID: 1,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', Duration: 3,
Progress: 50 },
Date('04/02/2019'), Progress: 50 },

{ TaskID: 4, TaskName: 'Soil test approval', EndDate: new

Date('04/08/2019'), Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
StartDate: new Date('04/04/2019'), EndDate: new Date('04/08/2019'),
Progress: 50 },
Date('04/04/2019'), Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', Duration: 0,
Progress: 50 }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks'
};
allowEditing: true,
};
return < GanttComponent dataSource={GanttData}

allowUnscheduledTasks={true} height='400px'>
</GanttComponent>;
};
INDEX.TSX
let GanttData = [
{
TaskID: 1,
subtasks: [

{ TaskID: 2, TaskName: 'Identify Site location', Duration: 3,

Progress: 50 },
Date('04/02/2019'), Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', EndDate: new
Date('04/08/2019'), Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
StartDate: new Date('04/04/2019'), EndDate: new Date('04/08/2019'),
Progress: 50 },
Date('04/04/2019'), Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', Duration: 0,
Progress: 50 }
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks'
};
allowEditing: true,
};
return < GanttComponent dataSource={GanttData}

allowUnscheduledTasks={true} height='400px'>
</GanttComponent>;
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
NOTE
If the allowUnscheduledTasks property is set to false, then the Gantt control automatically calculates the
scheduled date values with a default value of duration 1 and the project start date is considered as the
start date for the task.
Working time range
In the Gantt control, working hours in a day for a project can be defined by using the dayWorkingTime
property. Based on the working hours, automatic date scheduling and duration validations for a task are
performed.
The following code snippet explains how to define the working time range for the project in Gantt.
INDEX.JSX
function App() {
id: 'TaskID',
name: 'TaskName',

child: 'Children'
};
timelineViewMode: 'Day'
};
const dayWorkingTime = [{ from: 9, to: 18 }];

dayWorkingTime={dayWorkingTime} timelineSettings={timelineSettings}
height='450px'>
</GanttComponent>;
};
INDEX.TSX
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children'
};
timelineViewMode: 'Day'
};
const dayWorkingTime = [{ from: 9, to: 18 }];

dayWorkingTime={dayWorkingTime} timelineSettings={timelineSettings}
height='450px'>
</GanttComponent>;
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
NOTE
* Individual tasks can lie between any time within the defined working time range of the project.
* The dayWorkingTime property is used to define the working time for the whole project.
Weekend/non-working days
Non-working days/weekend are used to represent the non-productive days in a project. You can define
the non-working days in a week using the workWeek property in Gantt.
INDEX.JSX
import { GanttComponent, Inject, DayMarkers } from '@syncfusion/ej2-react-
gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children'
};
const workWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday'];

highlightWeekends={true} workWeek={workWeek} height='450px'>
<Inject services={[DayMarkers]}/>

</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, DayMarkers } from '@syncfusion/ej2-react-
gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'Children'
};
const workWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday'];

highlightWeekends={true} workWeek={workWeek} height='450px'>
<Inject services={[DayMarkers]}/>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;

top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
By default, Saturdays and Sundays are considered as non-working days/weekend in a project.

In the Gantt control, you can make weekend as working day by setting the includeWeekend property to
true.
Duration units
In Gantt, the task's duration value can be measured by the following duration units,
• Day
• Hour
• Minute
In Gantt, we can define duration unit for whole project by using durationUnit property, when we defines
the value for this property, this unit will be applied for all task which don't has duration unit value.
And each task in the project can be defined with different duration units and the duration unit of a task
can be defined by the following ways,
• Using taskFields.durationUnit property, to map the duration unit data source field.
• Defining the duration unit value along with the duration field in the data source.
Mapping the duration unit field

The below code snippet explains the mapping of duration unit data source field to the Gantt component
using the taskFields.durationUnit property.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 2, DurationUnit:'day', Progress: 50 },
Date('04/02/2019'), Duration: 12,DurationUnit:'hour', Progress: 70 },
Date('04/02/2019'), Duration: 240,DurationUnit:'minute', Progress: 80 },
]
},

{
TaskID: 5,
subtasks: [
StartDate: new Date('04/04/2019'), Duration: 8, DurationUnit:'hour',
Progress: 50 },
Date('04/04/2019'), Duration: 3, Progress: 50, DurationUnit:'day' },
Date('04/04/2019'), Duration: 480, DurationUnit:'minute', Progress: 70 }
]
},
];
function App (){
id: 'TaskID',
name: 'TaskName',
durationUnit:'DurationUnit',
child: 'subtasks'
};
columnIndex: 4
};
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 2, DurationUnit:'day', Progress: 50 },
Date('04/02/2019'), Duration: 12,DurationUnit:'hour', Progress: 70 },
Date('04/02/2019'), Duration: 240,DurationUnit:'minute', Progress: 80 },
]
},
{

TaskID: 5,
subtasks: [
StartDate: new Date('04/04/2019'), Duration: 8, DurationUnit:'hour',
Progress: 50 },
Date('04/04/2019'), Duration: 3, Progress: 50, DurationUnit:'day' },
Date('04/04/2019'), Duration: 480, DurationUnit:'minute', Progress: 70 }
]
},
];
function App (){
id: 'TaskID',
name: 'TaskName',
durationUnit:'DurationUnit',
child: 'subtasks'
};
columnIndex: 4
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>

<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
NOTE
The default value of the durationUnit property is day.
Defining duration unit along with duration field
Duration units for the tasks can also be defined along with the duration values, the below code snippet
explains the duration unit for a task along with duration value,
INDEX.JSX
let data = [
{
TaskID: 1,
isParent:true,
subtasks: [
Date('04/02/2019'), Duration: '4days', Progress: 50 },
Date('04/02/2019'), Duration: '16hours', Progress: 70 },
Date('04/02/2019'), Duration: '1800minutes', Progress: 80 },
]
},
{
TaskID: 5,
isParent:true,
subtasks: [
StartDate: new Date('04/04/2019'), Duration: '16hours',Progress: 50 },


Date('04/04/2019'), Duration: '480minutes', Progress: 70 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex: 4
};
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
isParent:true,
subtasks: [
Date('04/02/2019'), Duration: '16hours', Progress: 70 },
Date('04/02/2019'), Duration: '1800minutes', Progress: 80 },
]
},
{
TaskID: 5,
isParent:true,
subtasks: [
StartDate: new Date('04/04/2019'), Duration: '16hours',Progress: 50 },


Date('04/04/2019'), Duration: '480minutes', Progress: 70 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex: 4
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

Gantt Taskbar in React Gantt component
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
NOTE:
The edit type of the duration column in Gantt is string, to support editing the duration field along with
duration units.
Taskbar in React Gantt component
Taskbar template
You can design your own taskbars to view the tasks in Gantt by using taskbarTemplate property. And it is
possible to map the template script element’s ID value to this property. It is also possible to customize
the parent taskbars and milestones with custom templates by using parentTaskbarTemplate and
milestoneTemplate properties.
INDEX.JSX
import { GanttComponent } from "@syncfusion/ej2-react-gantt";
import { data } from "./datasource";
function App() {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
duration: "Duration",
progress: "Progress",
child: "subtasks"
};
function TaskbarTemplate(props) {
return (
<div
className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"
style={{ height: "100%" }}
>
<div
className="e-gantt-child-progressbar-inner-div e-gantt-child-
progressbar"
style={{
width: props.ganttProperties.progressWidth + "px",
height: "100%"
}}
>
</div>
<span
className="e-task-label"
style={{
position: "absolute",

fontSize: "12px",
color: "white",
top: "5px",
left: "10px",
fontFamily: "Segoe UI",
cursor: "move"
}}
>
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props) {
return (
<div
className="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar"
>
<div
className="e-gantt-parent-progressbar-inner-div e-row-expand e-
gantt-parent-progressbar"
style={{ width: props.ganttProperties.progressWidth+"px", height:
"100%" }}
>
</div>
<span
style={{
fontSize: "12px",
color: "white",
top: "5px",
left: "10px",
cursor: "move"
}}
>
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props) {
return (
<div className="e-gantt-milestone" style={{ position: "absolute" }}>
<div
className="e-milestone-top"
style={{
borderRightWidth: "15px",
borderLeftWidth: "15px",
borderBottomWidth: "15px"
}}
/>
<div
className="e-milestone-bottom"
style={{

top: "15px",
borderTopWidth: "15px"
}}
/>
</div>
);
}
return (
<GanttComponent
dataSource={data}
rowHeight={60}
taskFields={taskFields}
taskbarTemplate={TaskbarTemplate}
parentTaskbarTemplate={ParentTaskbarTemplate}
milestoneTemplate={MilestoneTemplate}
height="450px"
/>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
INDEX.TSX
import { GanttComponent } from "@syncfusion/ej2-react-gantt";
function App() {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
duration: "Duration",
progress: "Progress",
child: "subtasks"
};
function TaskbarTemplate(props: any) {
return (
<div
className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"
>
<div
className="e-gantt-child-progressbar-inner-div e-gantt-child-
progressbar"
style={{
width: props.ganttProperties.progressWidth + "px",
height: "100%"
}}
>
</div>
<span
style={{

fontSize: "12px",
color: "white",
top: "5px",
left: "10px",
cursor: "move"
}}
>
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props: any) {
return (
<div
className="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar"
>
<div
className="e-gantt-parent-progressbar-inner-div e-row-expand e-
gantt-parent-progressbar"
style={{ width: props.ganttProperties.progressWidth+"px", height:
"100%" }}
>
</div>
<span
style={{
fontSize: "12px",
color: "white",
top: "5px",
left: "10px",
cursor: "move"
}}
>
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props: any) {
return (
<div className="e-gantt-milestone" style={{ position: "absolute" }}>
<div
className="e-milestone-top"
style={{
borderBottomWidth: "15px"
}}
/>
<div

style={{
top: "15px",
borderTopWidth: "15px"
}}
/>
</div>
);
}
return (
<GanttComponent
dataSource={data}
rowHeight={60}
taskbarTemplate={TaskbarTemplate}
milestoneTemplate={MilestoneTemplate}
height="450px"
/>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>

<div id='root'>
</div>
</body>
</html>
Taskbar customization
Taskbar height
Height of child taskbars and parent taskbars can be customized by using taskbarHeight property. The
following code example shows how to use the property.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
rowHeight={50}
taskbarHeight={40} height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
rowHeight={50}
taskbarHeight={40} height = '450px'>
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
NOTE
The taskbarHeight value should be lower than the rowHeight property value and these properties accept
only pixel values.
Conditional formatting
The default taskbar UI can be replaced with custom templates using the queryTaskbarInfo event. The
following code example shows customizing the taskbar UI based on task progress values in the Gantt
component.
INDEX.JSX
let data = [
{
TaskID: 1,

subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function queryTaskbarInfo(args) {
if (args.data.Progress == 50) {
args.progressBarBgColor = "red";
} else if (args.data.Progress == 70) {
args.progressBarBgColor = "yellow";
args.progressBarBgColor = "lightgreen";
}
}
queryTaskbarInfo={queryTaskbarInfo} height = '450px'>
</GanttComponent>
};
INDEX.TSX


{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function queryTaskbarInfo(args: any) {
if (args.data.Progress == 50) {
args.progressBarBgColor = "red";
args.progressBarBgColor = "yellow";
args.progressBarBgColor = "lightgreen";
}
}
queryTaskbarInfo={queryTaskbarInfo} height = '450px'>
</GanttComponent>

};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Change gripper icon in taskbar

You can change the gripper icon in the taskbar by applying styles to their respective class elements.
INDEX.JSX
];
const data = [
{
TaskID: 1,


subtasks: [
resources: [1] },
]
},
{
TaskID: 5,
subtasks: [
]
},
];
react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
};
allowEditing: true,
editMode: 'Auto',
};
id: 'resourceId',
};

height='400px'>
</GanttComponent>
};
INDEX.TSX
];
{
TaskID: 1,
subtasks: [
resources: [1] },
]
},
{
TaskID: 5,
subtasks: [
]
},
];
react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',

child: 'subtasks',
};
};
allowEditing: true,
editMode: 'Auto',
};
id: 'resourceId',
};
height='400px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
rel="stylesheet" type="text/css" />
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

/* change gripper icon */

.e-gantt .e-left-resize-gripper::before,
.e-gantt .e-right-resize-gripper::before {
content: '\e934';
}
.e-gantt .e-left-resize-gripper,
.e-gantt .e-right-resize-gripper {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Multi Taskbar support in project view

The Gantt component, supports rendering multi-taskbars in the project view. With this feature the
parent taskbar, when it is collapsed, visually summarize the progress of all its child taskbars.
This feature can be enabled by setting the enableMultiTaskbar property value to true.
The following code example shows how to use this property.
INDEX.JSX
import { projectViewMultiTaskData } from './datasource';
function App (){
id: 'TaskID',
name: 'TaskName',
progress:'Progress',
duration:'Duration',
child: 'subtasks',
expandState: 'isExpand'
};
return <GanttComponent dataSource={projectViewMultiTaskData}

renableMultiTaskbar={true}
</GanttComponent>
};
INDEX.TSX

import { projectViewMultiTaskData } from './datasource';

function App (){
id: 'TaskID',
name: 'TaskName',
progress:'Progress',
duration:'Duration',
child: 'subtasks',
};
return <GanttComponent dataSource={projectViewMultiTaskData}

enableMultiTaskbar={true}
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>

</html>
Connector lines
The width and background color of connector lines in Gantt can be customized using the
connectorLineWidth and connectorLineBackground properties. The following code example shows how
to use these properties.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019'),Predecessor:"3SS", Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'),Predecessor:"7FS", Duration: 3, Progress: 50 }
]
},
];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

connectorLineWidth={2} connectorLineBackground='#0aecb8' height =

'450px'>
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [
Date('04/02/2019'),Predecessor:"3SS", Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'),Predecessor:"7FS", Duration: 3, Progress: 50 }
]
},
];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

connectorLineWidth={2} connectorLineBackground='#0aecb8' height =

'450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Enable tooltip
In the Gantt component, you can enable or disable the mouse hover tooltip for the following UI
elements using the tooltipSettings.showTooltip property:
• Taskbar
• Connector line
• Baseline
• Event marker

INDEX.JSX
export let datasource = [
{
TaskID: 1,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site
location',BaselineStartDate: new Date('04/02/2019'),BaselineEndDate: new
Date('04/02/2019'), StartDate: new Date('04/02/2019'), Duration: 0,
Progress: 50 },
Date('04/02/2019'),BaselineStartDate: new
Date('04/04/2019'),BaselineEndDate: new Date('04/09/2019'), Duration: 4,
Progress: 50 },
Date('04/08/2019'),BaselineEndDate: new Date('04/12/2019'), Duration:
4,Predecessor:"2FS", Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for
estimation',BaselineStartDate: new Date('04/04/2019'),BaselineEndDate: new
Progress: 50 },
Progress: 50 },
0,Predecessor:"6SS", Progress: 50 }
]
},
];

import { GanttComponent, Inject, DayMarkers, EventMarkersDirective,
EventMarkerDirective } from '@syncfusion/ej2-react-gantt';
function App (){

id: 'TaskID',
name: 'TaskName',

baselineStartDate: 'BaselineStartDate',
baselineEndDate: 'BaselineEndDate',
child: 'subtasks'
};
const tooltipSettings = {
showTooltip: true
};
let eventMarkerDay1= new Date('04/10/2019');
tooltipSettings={tooltipSettings} renderBaseline={true}
baselineColor="Red" height = '450px'>
<EventMarkersDirective>
<EventMarkerDirective day={eventMarkerDay1} label='Project
kick-off' >
</EventMarkerDirective>
</EventMarkersDirective>
<Inject services={[DayMarkers]} />
</GanttComponent>
};
INDEX.TSX
export let data: Object[] = [
{
TaskID: 1,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location',BaselineStartDate:
new Date('04/02/2019'),BaselineEndDate: new Date('04/02/2019'), StartDate:
Progress: 50 },
4,Predecessor:"2FS", Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
estimation',BaselineStartDate: new Date('04/04/2019'),BaselineEndDate: new
Progress: 50 },


Progress: 50 },
0,Predecessor:"6SS", Progress: 50 }
]
},
];
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective,
EventMarkerDirective } from '@syncfusion/ej2-react-gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const tooltipSettings: any = {
showTooltip: true
};
let eventMarkerDay1: Date = new Date('04/10/2019');
baselineColor="Red" height = '450px'>
<EventMarkersDirective>
<EventMarkerDirective day={eventMarkerDay1} label='Project
kick-off' >
</EventMarkerDirective>
</EventMarkersDirective>
<Inject services={[DayMarkers]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
The default value of the tooltipSettings.showTooltip property is true.

Tooltip template
Taskbar tooltip
The default tooltip in the Gantt component can be customized using the tooltipSettings.taskbar
property. You can map the template script element’s ID value or template string directly to this
property.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function tooltipTemplate(props) {
return (<div>TaskID : {props.TaskID}</div>)
};
const template = tooltipTemplate;
taskbar:template
};


tooltipSettings={tooltipSettings} height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function tooltipTemplate(props:any) {
return (<div>TaskID : {props.TaskID}</div>)
};
const template: any = tooltipTemplate;
taskbar:template
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {

color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Connector line tooltip

The default connector line tooltip in the Gantt component can be customized using the
tooltipSettings.connectorLine property. You can map the value to this property as template script
element ID or template string format. The following code example shows how to use the
tooltipSettings.connectorLine property.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4,Predecessor:'3FS+2 days', Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'),Predecessor:'7SS+ 2 days', Duration: 3, Progress: 50 }
]
},
];


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return (<div>Offset : {props.offsetString}</div>)
};
connectorLine: template
};
<ColumnsDirective>
></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4,Predecessor:'3FS+2 days', Progress: 50 },
]
},
{
TaskID: 5,
subtasks: [


Date('04/04/2019'),Predecessor:'7SS+ 2 days', Duration: 3, Progress: 50 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return (<div>Offset : {props.offsetString}</div>)
};
connectorLine: template
};
<ColumnsDirective>
></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Baseline tooltip
A baseline tooltip can be customized using the tooltipSettings.baseline property. The following code
example shows how to customize the baseline tooltip in Gantt.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location',
BaselineStartDate: new Date('04/02/2019'), BaselineEndDate: new
Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', BaselineStartDate:
new Date('04/04/2019'), BaselineEndDate: new Date('04/09/2019'), StartDate:
{ TaskID: 4, TaskName: 'Soil test approval', BaselineStartDate:
]
},
{
TaskID: 5,
subtasks: [


Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', BaselineStartDate: new
Date('04/02/2019'), BaselineEndDate: new Date('04/04/2019'), StartDate: new
{ TaskID: 8, TaskName: 'Estimation approval', BaselineStartDate:
new Date('04/04/2019'), Duration: 0, Progress: 50 }
]
},
];

function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return (<div>Baseline StartDate :
{ganttInstance.getFormatedDate(props.BaselineStartDate)}</div>)
};
baseline: template
};
baselineColor="red" height = '450px' ref={gantt => ganttInstance = gantt}>
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [


Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', BaselineStartDate: new
{ TaskID: 4, TaskName: 'Soil test approval', BaselineStartDate:
]
},
{
TaskID: 5,
subtasks: [
Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', BaselineStartDate: new
{ TaskID: 8, TaskName: 'Estimation approval', BaselineStartDate:
new Date('04/04/2019'), Duration: 0, Progress: 50 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return (<div>Baseline StartDate :
{ganttInstance.getFormatedDate(props.BaselineStartDate)}</div>)
};
baseline: template
};

Gantt Critical path in React Gantt component
baselineColor="red" height = '450px' ref={gantt => ganttInstance = gantt}>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Critical path in React Gantt component

The critical path in a project is indicated by a single task or a series of tasks. If a task in critical path is
delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task
would affect the project end date.
The critical path can be enabled in Gantt by using the built-in toolbar button or enableCriticalPath
property.
The following code example shows how to display the critical path taskbar in the Gantt control:
INDEX.JSX


import { GanttComponent, Inject, Edit, Toolbar, CriticalPath } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
};
const toolbarOptions = ['CriticalPath'];
enableCriticalPath={true}
editSettings={editOptions} toolbar={toolbarOptions} height =
'450px'>
<Inject services={[Edit, CriticalPath, Toolbar]} />
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, EditSettingsModel, Toolbar,
ToolbarItem, CriticalPath } from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
};
const toolbarOptions: ToolbarItem[] = ['CriticalPath'];


'450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Customize taskbar in critical path

The taskbar in critical path can be customized by using queryTaskbarInfo event and isCritical property of
row data in the event argument.
The following code example shows how to customize the critical path taskbar in the Gantt control:

INDEX.JSX
import { GanttComponent, Inject, Edit, Toolbar, CriticalPath } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
};
function queryTaskbarInfo(args) {
if ((args.data.isCritical || args.data.slack === '0 day') &&
!args.data.hasChildRecords) {
args.taskbarBgColor = 'rgb(242, 210, 189)';
args.progressBarBgColor = 'rgb(201, 169, 166)';
}
}
const toolbarOptions = ['CriticalPath'];
height = '450px' queryTaskbarInfo={queryTaskbarInfo}
editSettings={editOptions} toolbar={toolbarOptions}>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, EditSettingsModel, Toolbar,
ToolbarItem, CriticalPath } from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};


allowAdding: true,
allowEditing: true,
};
function queryTaskbarInfo(args: any): void {
if ((args.data.isCritical || args.data.slack === '0 day') &&
!args.data.hasChildRecords) {
args.taskbarBgColor = 'rgb(242, 210, 189)';
args.progressBarBgColor = 'rgb(201, 169, 166)';
}
}
const toolbarOptions: ToolbarItem[] = ['CriticalPath'];
height = '450px' queryTaskbarInfo={queryTaskbarInfo}
editSettings={editOptions} toolbar={toolbarOptions}>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
}

Gantt Undo Redo in React Gantt component
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Undo Redo in React Gantt component

The Undo feature enables users to revert the most recent action performed in the Gantt Chart. It helps
undo changes made to tasks, dependencies, or other actions within the Gantt Chart.
The Redo feature can reapply an action that was previously undone using the Undo feature. This allows
users to revert their decision to undo an action.
The undo redo feature can be enabled in Gantt by using the enableUndoRedo property.
To Undo Redo, inject the UndoRedo module into the Gantt component.
Configure the feature set for undo redo actions
By default, all the gantt features listed in the below table will be restored for undo and redo actions.
However, you have the option to specify only the required actions to be restored using
undoRedoActions property.
| Built-in Undo Redo Items | Actions |
|------------------------|---------|
| Edit | Undo redo actions can be performed for edited record.|
| Delete | Undo redo actions can be performed for deleted record.|
| Add | Undo redo actions can be performed for newly added record.|
| ColumnReorder | Undo redo actions can be performed for reordered column.|
| Indent | Undo redo actions can be performed for indented record.|
| Outdent | Undo redo actions can be performed for outdented record.|
| ColumnResize | Undo redo actions can be performed for resized column.|
| Sorting | Undo redo actions can be performed for sorted column.|
| Filtering | Undo redo actions can be performed for filtered record.|
| Search | Undo redo actions can be performed for searched value.|
| ZoomIn | Undo redo actions can be performed for zoomIn action.|
| ZoomOut | Undo redo actions can be performed for zoomOut action.|
| ZoomToFit | Undo redo actions can be performed for zoomToFit action.|
| ColumnState | Undo redo actions can be performed for hided or shown columns.|
| RowDragAndDrop | Undo redo actions can be performed for row drag and drop.|
| TaskbarDragAndDrop | Undo redo actions can be performed for taskbar drag and drop.|

| PreviousTimeSpan | Undo redo actions can be performed for previous time span acton.|
| NextTimeSpan | Undo redo actions can be performed for next time span action.|
In the following code example, Edit and Delete actions are specified in undoRedoActions property.
INDEX.JSX
import { GanttComponent, Inject, Toolbar, Selection, Edit,
Filter,Sort,RowDD,ColumnMenu,Reorder,Resize,UndoRedo }from '@syncfusion/ej2-
react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Search',
'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent',
'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'];
const undoRedoActions= ['Edit', 'Delete'];
allowSelection={true} allowSorting={true} allowFiltering={true}
allowRowDragAndDrop={true}
editSettings={editOptions} showColumnMenu={true}
enableUndoRedo={true} allowResizing={true} allowReordering={true}
toolbar={toolbarOptions} undoRedoActions={undoRedoActions} height = '450px'>
<Inject services={[Toolbar, Selection, Edit,
Filter,Sort,RowDD,ColumnMenu,Reorder,Resize,UndoRedo]} />
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, EditSettingsModel,GanttAction, ToolbarItem,
Toolbar, Selection, Edit,
react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const undoRedoActions: GanttAction[]= ['Edit', 'Delete'];
const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete',
'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent',
allowRowDragAndDrop={true}
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>

</head>
<body>
<div id='root'>
</div>
</body>
</html>
Configuring the Storage Step Count for Undo and Redo Actions
You can specify the number of actions to be stored for undo and redo operations using the
undoRedoStepsCount property.
By default, the value of undoRedoStepsCount is set to 10.
When the number of actions performed exceeds the undoRedoStepsCount, the oldest action in the
undo collection is removed, and the latest action performed is added to the collection. This ensures that
the number of stored actions does not exceed the specified limit, maintaining efficient memory usage.
In the following example, undoRedoStepsCount value is set to 5.
INDEX.JSX
react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const undoRedoStepsCount = 5;
const undoRedoActions= ['Add', 'Edit', 'Delete',
'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut',
'ZoomToFit','Indent','Outdent',
'PreviousTimeSpan', 'NextTimeSpan','ColumnState'];
allowRowDragAndDrop={true} undoRedoStepsCount={undoRedoStepsCount}


</GanttComponent>
};
INDEX.TSX
react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const undoRedoStepsCount: number = 5;
const undoRedoActions: GanttAction[]= ['Add', 'Edit', 'Delete',
allowRowDragAndDrop={true} undoRedoStepsCount={undoRedoStepsCount}
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Perform undo redo actions programatically

You can perform undo and redo actions programatically using undo and redo methods.
The following code example demonstrates how to invoke the undo and redo method by clicking the
external button.
INDEX.JSX
react-gantt';
function App(){
let gantt;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

allowAdding: true,
allowEditing: true,
allowDeleting: true
};
function undo() {
gantt.undo();
}
function redo() {
gantt.redo();
}
return (<div>
<ButtonComponent onClick={undo}>Undo</ButtonComponent>
<ButtonComponent onClick={redo}>Redo</ButtonComponent>
<GanttComponent dataSource={data} ref={g => gantt = g}
taskFields={taskFields} allowSelection={true} allowSorting={true}
allowFiltering={true} allowRowDragAndDrop={true}
};
INDEX.TSX
react-gantt';
function App(){
let gantt: any;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,

allowDeleting: true
};
function undo() {
gantt.undo();
}
function redo() {
gantt.redo();
}
return (<div>
<ButtonComponent onClick={undo}>Undo</ButtonComponent>
<ButtonComponent onClick={redo}>Redo</ButtonComponent>
editSettings={editOptions} showColumnMenu={true} enableUndoRedo={true}
allowResizing={true} allowReordering={true} toolbar={toolbarOptions}
undoRedoActions={undoRedoActions} height='450px'>
<Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD,
ColumnMenu, Reorder, Resize, UndoRedo]} />
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;

top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Retrieve undo and redo stack collection

By default, when an undo or redo action is performed, the actions are stored in an array collection. To
retrieve the undo and redo stack array collections, you can use the getUndoActions and getRedoActions
methods.
The following code example demonstrates how to retrieve the undo and redo collection using method
by clicking the external button.
INDEX.JSX
react-gantt';
function App(){
let gantt;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
function getundocollection() {
console.log(gantt.getUndoActions());
}
function getredocollection() {
console.log(gantt.getRedoActions());

}
return (<div>
<ButtonComponent
onClick={getundocollection}>GetUndoCollection</ButtonComponent>
<ButtonComponent
onClick={getredocollection}>GetRedoCollection</ButtonComponent>
};
INDEX.TSX
react-gantt';
function App(){
let gantt: any;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
function getundocollection() {
console.log(gantt.getUndoActions());
}
function getredocollection() {
console.log(gantt.getRedoActions());
}

return (<div>
<ButtonComponent
onClick={getundocollection}>GetUndoCollection</ButtonComponent>
<ButtonComponent
onClick={getredocollection}>GetRedoCollection</ButtonComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Clear undo and redo collection

At any point, you can clear the undo and redo collections using the clearUndoCollection and
clearRedoCollection methods. This allows you to reset the undo and redo stacks as needed during
runtime.
The following code example demonstrates how to clear the undo and redo collection using method by
clicking the external button.
INDEX.JSX
react-gantt';
function App(){
let gantt;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
function clearundocollection() {
gantt.clearUndoCollection();
}
function clearredocollection() {
gantt.clearRedoCollection();
}
return (<div>
<ButtonComponent
onClick={clearundocollection}>ClearUndoCollection</ButtonComponent>
<ButtonComponent
onClick={clearredocollection}>ClearRedoCollection</ButtonComponent>


};
INDEX.TSX
react-gantt';
function App(){
let gantt: any;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
function clearundocollection() {
gantt.clearUndoCollection();
}
function clearredocollection() {
gantt.clearRedoCollection();
}
return (<div>
<ButtonComponent
onClick={clearundocollection}>ClearUndoCollection</ButtonComponent>
<ButtonComponent
onClick={clearredocollection}>ClearRedoCollection</ButtonComponent>

Gantt Tool bar in React Gantt component

};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Tool bar in React Gantt component

The Gantt component provides the toolbar support to handle Gantt actions. The toolbar property
accepts the collection of built-in toolbar items and ItemModel objects for custom toolbar items.
Built-in toolbar items
Built-in toolbar items execute standard actions of the Gantt component, and these items can be added
to toolbar by defining the toolbar as a collection of built-in items. It renders the button with icon and
text.
The following table shows built-in toolbar items and its actions.

| Built-in Toolbar Items | Actions |

|------------------------|---------|
| Add | Adds a new record. |
| Cancel | Cancels the edit state. |
| CollapseAll | Collapses all the rows. |
| Delete | Deletes the selected record. |
| Edit | Edits the selected record. |
| Indent | Indent the selected record to one level.|
| Outdent | Outdent the elected record to one level.|
| ExpandAll | Expands all the rows. |
| NextTimeSpan | Navigate the Gantt timeline to next time span. |
| PrevTimeSpan | Navigate the Gantt timeline to previous time span. |
| Search | Searches the records by the given key. |
| Update | Updates the edited record. |
INDEX.JSX
import { GanttComponent, Inject, Edit, Filter, Selection, Toolbar }from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions =
['Add','Edit','Delete','Cancel','Update','PrevTimeSpan','NextTimeSpan','Expa
ndAll','CollapseAll','Search','Indent','Outdent'];
'450px'>
<Inject services={[Edit, Selection, Toolbar, Filter]} />
</GanttComponent>
};

INDEX.TSX
import { GanttComponent, Inject, Edit, Filter, EditSettingsModel, Selection,
Toolbar, ToolbarItem }from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions: ToolbarItem[] =
['Add','Edit','Delete','Cancel','Update','PrevTimeSpan','NextTimeSpan','Expa
ndAll','CollapseAll','Search','Indent','Outdent'];
'450px'>
<Inject services={[Edit, Selection, Toolbar, Filter]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;

height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
* The toolbar has options to define both built-in and custom toolbar items.
Custom toolbar items
Custom toolbar items can be added to the toolbar by defining the toolbar property as a collection of
ItemModels.
Actions for this customized toolbar items are defined in the Link to the Video event.
You can check this video to learn about how to use custom toolbar in Gantt.
By default, the custom toolbar items are at left position. You can change the position by using the align
property. In the following sample, the Quick Filter toolbar item is positioned at right.
INDEX.JSX
import { GanttComponent, Inject, Filter, Toolbar } from '@syncfusion/ej2-
react-gantt';
function App(){
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = [{text: 'Quick Filter', tooltipText: 'Quick
Filter', id: 'toolbarfilter', align:'Right', prefixIcon: 'e-quickfilter' }];
function toolbarClick(){
ganttInstance.filterByColumn('TaskName', 'startswith',
'Identify');
};
allowFiltering={true} toolbar={toolbarOptions}
toolbarClick={toolbarClick.bind(this)} height = '450px' ref={gantt =>
ganttInstance = gantt}>
<Inject services={[Filter, Toolbar]} />

</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Filter, Toolbar } from '@syncfusion/ej2-
react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions: any[] = [{text: 'Quick Filter', tooltipText: 'Quick
Filter', id: 'toolbarfilter', align:'Right', prefixIcon: 'e-quickfilter' }];
function toolbarClick(): void {
'Identify');
};
allowFiltering={true} toolbar={toolbarOptions}
toolbarClick={toolbarClick.bind(this)} height = '450px' ref={gantt =>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>

<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-quickfilter::before {
content: '\e7ee';
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
* The toolbar has options to define both built-in and custom toolbar items.
* If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.
Built-in and custom items in toolbar
The Gantt component has an option to use both built-in and custom toolbar items at the same time.
In the following example, the ExpandAll and CollapseAll are built-in toolbar items and Test is the
custom toolbar item.
INDEX.JSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
const toolbarOptions = ['ExpandAll', 'CollapseAll', { text: 'Test',
tooltipText: 'Test',id: 'Test' }];
function toolbarClick(args) {
if (args.item.text === 'Test') {
alert("Custom toolbar Click...");
}
};

toolbar={toolbarOptions} toolbarClick={toolbarClick} height =

'450px'>
<Inject services={[Toolbar]} />
</GanttComponent>
};
INDEX.TSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
const toolbarOptions: any[] = ['ExpandAll', 'CollapseAll', { text: 'Test',
tooltipText: 'Test',id: 'Test' }];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Test') {
alert("Custom toolbar Click...");
}
};
toolbar={toolbarOptions} toolbarClick={toolbarClick} height =
'450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Enable/disable toolbar items

You can enable or disable the toolbar items by using the enableItems method.
INDEX.JSX
import { GanttComponent, Inject, Toolbar, Filter, ColumnsDirective,
ColumnDirective} from '@syncfusion/ej2-react-gantt';
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = ['QuickFilter', 'ClearFilter'];
function enable() {
ganttInstance.toolbarModule.enableItems([ganttInstance.element.id +
'_QuickFilter', ganttInstance.element.id + '_ClearFilter'], true);// enable
toolbar items.
};
function disable() {
'_QuickFilter', ganttInstance.element.id + '_ClearFilter'], false);//
disable toolbar items.
};
function toolbarClick(args){

if (args.item.text === 'QuickFilter') {

'Identify');
}
if (args.item.text === 'ClearFilter') {
ganttInstance.clearFiltering();
}
};
return (<div>
<ButtonComponent onClick= {enable}>Enable</ButtonComponent>
<ButtonComponent onClick= { disable}>Disable</ButtonComponent>
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowFiltering={true} height = '450px'
<Inject services={[Toolbar, Filter]} />
};
INDEX.TSX
import { GanttComponent, Inject, Toolbar, Filter, ColumnsDirective,
ColumnDirective} from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions: any[] = ['QuickFilter', 'ClearFilter'];
function enable() {
'_QuickFilter', ganttInstance.element.id + '_ClearFilter'], true);// enable
toolbar items.
};
function disable() {
'_QuickFilter', ganttInstance.element.id + '_ClearFilter'], false);//
disable toolbar items.
};
if (args.item.text === 'QuickFilter') {
'Identify');
}
if (args.item.text === 'ClearFilter') {

}
};
return (<div>
<ButtonComponent onClick= {enable}>Enable</ButtonComponent>
<ButtonComponent onClick= { disable}>Disable</ButtonComponent>
toolbarClick={toolbarClick} allowFiltering={true} height = '450px'
<Inject services={[Toolbar, Filter]} />
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Add input elements in Toolbar

In Gantt toolbar, it is possible to add EJ2 editor elements like numeric text box, dropdown list and date
picker components. The following code snippets explains how to add EJ2 editors in Gantt toolbar.
INDEX.JSX
import { NumericTextBox} from '@syncfusion/ej2-inputs';
gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = [ { type: 'Input',template:new NumericTextBox({
format: 'c2', value:1 })} ];
toolbar={toolbarOptions} height = '400px'>
</GanttComponent>
};
INDEX.TSX
import { NumericTextBox} from '@syncfusion/ej2-inputs';
gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions: any[] = [ { type: 'Input',template:new
NumericTextBox({ format: 'c2', value:1 })} ];
toolbar={toolbarOptions} height = '400px'>
</GanttComponent>
};

Gantt Managing tasks in React Gantt component
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Managing tasks in React Gantt component

The Gantt component has options to dynamically insert, delete, and update tasks in a project. The
primary key column is necessary to manage the tasks and perform CRUD operations in Gantt. To define
the primary key, set the columns.isPrimaryKey property to true in the column.
To use CRUD, inject the Edit module into the Gantt component.
Note: If the Edit module is not injected, you cannot edit the tasks through TreeGrid cells.
The following code example shows you how to enable the cell editing in Gantt component.
INDEX.JSX
react-gantt';
function App (){

id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
mode: 'Auto'
};
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
mode: 'Auto'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Cell edit type and its params

The columns.editType is used to define the edit type for any particular column.
You can set the columns.editType based on data type of the column.
• numericedit - NumericTextBox component for integers, double, and decimal data types.
• defaultedit - TextBox component for string data type.
• dropdownedit - DropDownList component to show all unique values related to that field.
• booleanedit - CheckBox component for boolean data type.
• datepickeredit - DatePicker component for date data type.
• datetimepickeredit - DateTimePicker component for date time data type.
Also, you can customize the behavior of the editor component through the columns.edit.params.
The following table describes cell edit type component and their corresponding edit params of the
column.
Edit Type |Component |Example
Cell editing | To perform double tap on a specific cell, initiate the cell to be in edit state.
Dialog editing | To perform double tap on a specific row, initiate the edit dialog to be opened.

Taskbar editing | Taskbar editing action is initiated using the tap action on the taskbar. <br> Parent
taskbar : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging
action on parent taskbar editing. <br> ![Alt text](images/editing-parent.PNG) <br> Child taskbar : Once
you tap the child taskbar, it will be changed to editing state. <br> ![Alt text](images/editing-state.PNG)
<br> Dragging taskbar : To drag a taskbar to the left or right in editing state. <br> <br> Resizing taskbar :
To resize a taskbar, drag the left/right resize icon. <br> <br> Progress resizing : To change the progress,
drag the progress resize icon to the left or right direction.
Task dependency editing
You can tap the left/right connector point to initiate task dependencies edit mode and again tap
another taskbar to establish the dependency line between two taskbars.
The following table explains the taskbar state in dependency edit mode.
![Taskbar states](images/taskbar-states.PNG)
Taskbar state |Description
Parent taskbar | You cannot create dependency relationship to parent tasks. <br> ![Parent
taskbar](images/parent-taskbar.PNG)
Taskbar without dependency | If you tap a valid child taskbar, it will create FS type dependency line
between tasks, otherwise exits from task dependency edit mode. <br> ![Valid taskbar](images/valid-
taskbar.PNG)
Taskbar with dependency | If you tap the second taskbar, which has already been directly connected,
it will ask to remove it. <br> ![Invalid taskbar](images/invalid-taskbar.PNG)
Removing dependency | Once you tap the taskbar with direct dependency, then confirmation dialog
will be shown for removing dependency. <br> ![Confirm dialog](images/confirm-dialog.PNG)
INDEX.JSX
react-gantt';
const data = [
{
TaskID: 1,
subtasks: [
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate:
{ TaskID: 4, TaskName: 'Soil test approval', StartDate:
new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },
]
},
{
TaskID: 5,


subtasks: [
estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate:
new Date('04/04/2019'), Duration: 4,Predecessor:"6SS", Progress: 50 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
};
let ganttInstance;
function load() {
this.isAdaptive = true; // Forcing desktop layout to change as
mobile layout
}
return <GanttComponent dataSource={data} ref={gantt => ganttInstance
= gantt} taskFields={taskFields}
editSettings={editSettings} height = '400px' load={load}>
</GanttComponent>
};
INDEX.TSX
react-gantt';
{
TaskID: 1,
subtasks: [
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate:
{ TaskID: 4, TaskName: 'Soil test approval', StartDate:
new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },

]
},
{
TaskID: 5,
subtasks: [
estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate:
new Date('04/04/2019'), Duration: 4,Predecessor:"6SS", Progress: 50 }
]
},
];
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
};
function load() {
this.isAdaptive = true; // Forcing desktop layout to change as
mobile layout
}
return <GanttComponent dataSource={data} ref={gantt => ganttInstance
= gantt} taskFields={taskFields}
editSettings={editSettings} height = '400px' load={load}>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Note: In mobile device, you cannot create dependency other than FS by taskbar editing. By using
cell/dialog editing, you can add all type of dependencies.
Taskbar editing tooltip
The taskbar editing tooltip can be customized using the tooltipSettings.editing property. The following
code example shows how to customize the taskbar editing tooltip in Gantt.
INDEX.JSX
function App(){
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
};
return (<div>Duration : {props.duration}</div>)
};
editing: template

};
tooltipSettings={tooltipSettings} editSettings={editOptions}
height = '450px'>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, EditSettingsModel } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
};
return (<div>Duration : {props.duration}</div>)
};
editing: template
};
tooltipSettings={tooltipSettings} editSettings={editOptions}
height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

Gantt Scrolling in React Gantt component
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Scrolling in React Gantt component

The scrollbar will be displayed in the gantt when content exceeds the element width or height. The
vertical and horizontal scrollbars will be displayed based on the following criteria:
• The vertical scrollbar appears when the total height of rows present in the gantt exceeds its
element height.
• The horizontal scrollbar appears when the sum of columns width exceeds the grid pane size.
• The height and width are used to set the gantt height and width, respectively.
The default value for height and width is auto.

Set width and height
We can even set pixel values to width and height of gantt container using width and height properties.
APP.JSX
APP.TSX
Responsive with the parent container

Specify the width and height as 100% to make the gantt element fill its parent container.

Setting the height to 100% requires the gantt parent element to have explicit height. Also, the
component will be responsive when the parent container is resized.
APP.JSX
APP.TSX
Scroll To Date method

In the Gantt control, When We use the scrollToDate method, it will scroll the timeline horizontally to the
date that we specified in the method's argument.
The following code examples show how the scroll To Date method works in Gantt:
INDEX.JSX
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.scrollToDate('05/10/2019');
};
return (<div>
<ButtonComponent onClick=
{clickHandler}>ScrollToDate</ButtonComponent>
};
INDEX.TSX

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.scrollToDate('05/10/2019');
};
return (<div>
{clickHandler}>ScrollToDate</ButtonComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>

</div>
</body>
</html>
Set the vertical scroll position

In the Gantt component, you can set the vertical scroller position dynamically by clicking the custom
button using the setScrollTop method.
INDEX.JSX
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.ganttChartModule.scrollObject.setScrollTop(300);
};
return (<div>
{clickHandler}>SetScrollTop</ButtonComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',

Gantt Virtual scroll in React Gantt component
child: 'subtasks'
};
ganttInstance.ganttChartModule.scrollObject.setScrollTop(300);
};
return (<div>
{clickHandler}>SetScrollTop</ButtonComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Virtual scroll in React Gantt component

Virtual Scroll support in Gantt allows you to load large amount of data without performance
degradation. To enable Virtual Scrolling, you need to inject VirtualScroll module in Gantt.

Row virtualization
Row virtualization allows you to load and render a large number of tasks in Gantt with effective
performance. In this mode, all tasks are fetched initially from the datasource and rendered in the DOM
within a compact viewport area.
The number of records displayed in the Gantt is determined by the height.
This mode can be enable by setting the enableVirtualization property to true.
INDEX.JSX
let tempData = [
{
parentID: 0
},
{
},
{
Date('04/02/2019'),
},
{
new Date('04/05/2019'),
},
{
Date('04/08/2019'),
},
{
Date('04/02/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/09/2019'),
},
{
Date('04/09/2019'),
},

{
Date('04/15/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/18/2019'),
},
{
new Date('04/04/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/26/2019'),
},
{
Date('04/26/2019'),
},
{


new Date('04/30/2019'),
},
{
},
{
},
{
Date('05/06/2019'),
},
{
Date('05/09/2019'),
},
{
new Date('09/14/2019'),
},
{
Date('05/16/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/23/2019'),
},
{
},
{
Date('04/04/2019'),


},
{
new Date('06/06/2019'),
},
{
new Date('06/11/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/14/2019'),
},
{
new Date('06/14/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/20/2019'),
},
{
Date('06/26/2019'), Duration: 4,
}
];
let projId = 1;
for (let i = 0; i < 50; i++) {
let parent = {};
let subtasks = {};

}
}
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Selection,
VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
};
columnIndex: 2
};
};
return (
height='450px'>
<ColumnsDirective>
Name'/>
</ColumnsDirective>
</GanttComponent>
)
};
INDEX.TSX
{
parentID: 0
},

{
},
{
Date('04/02/2019'),
},
{
new Date('04/05/2019'),
},
{
Date('04/08/2019'),
},
{
Date('04/02/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/09/2019'),
},
{
Date('04/09/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/18/2019'),
},
{


new Date('04/04/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/26/2019'),
},
{
Date('04/26/2019'),
},
{
new Date('04/30/2019'),
},
{
},
{
},
{
Date('05/06/2019'),

},
{
Date('05/09/2019'),
},
{
new Date('09/14/2019'),
},
{
Date('05/16/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/23/2019'),
},
{
},
{
Date('04/04/2019'),
},
{
new Date('06/06/2019'),
},
{
new Date('06/11/2019'),
},
{
Date('04/04/2019'),
},

{
Date('06/14/2019'),
},
{
new Date('06/14/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/20/2019'),
},
{
Date('06/26/2019'), Duration: 4,
}
];
}
}
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Selection,
VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',

};
columnIndex: 2
};
};
return (
height='450px'>
<ColumnsDirective>
Name'/>
</ColumnsDirective>
</GanttComponent>
)
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;

position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Timeline virtualization
Timeline virtualization allows you to load a data source having large timespan with high performance.
Initially, it renders the timeline with thrice the width of the gantt element, while other timeline cells
render on-demand during horizontal scrolling.
This mode can be enable by setting the enableTimelineVirtualization property to true.
INDEX.JSX
let tempData = [
{
parentID: 0
},
{
},
{
Date('04/02/2019'),
},
{
new Date('04/05/2019'),
},
{
Date('04/08/2019'),
},
{
Date('04/02/2019'),
},
{
Date('04/04/2019'),


},
{
Date('04/09/2019'),
},
{
Date('04/09/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/18/2019'),
},
{
new Date('04/04/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/04/2019'),
},

{
Date('04/26/2019'),
},
{
Date('04/26/2019'),
},
{
new Date('04/30/2019'),
},
{
},
{
},
{
Date('05/06/2019'),
},
{
Date('05/09/2019'),
},
{
new Date('09/14/2019'),
},
{
Date('05/16/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/17/2019'),
},
{


Date('05/23/2019'),
},
{
},
{
Date('04/04/2019'),
},
{
new Date('06/06/2019'),
},
{
new Date('06/11/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/14/2019'),
},
{
new Date('06/14/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/20/2019'),
},
{
Date('06/26/2019'), Duration: 4,
}
];
let projId = 1;

for (let i = 0; i < 50; i++) {

let parent = {};
let subtasks = {};
}
}
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
};
columnIndex: 2
};
};
allowAdding: true,
allowEditing: true,
};
const projectStartDate = new Date('04/01/2019');
const projectEndDate = new Date('12/31/2025');
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll',
'CollapseAll', 'Indent', 'Outdent'];
return (
labelSettings={labelSettings} projectEndDate={projectEndDate}
enableVirtualization={true} enableTimelineVirtualization={true}
projectStartDate={projectStartDate}

<ColumnsDirective>
Name'/>
</ColumnsDirective>
</GanttComponent>
)
};
INDEX.TSX
{
parentID: 0
},
{
},
{
Date('04/02/2019'),
},
{
new Date('04/05/2019'),
},
{
Date('04/08/2019'),
},
{
Date('04/02/2019'),
},
{
Date('04/04/2019'),
},
{


Date('04/09/2019'),
},
{
Date('04/09/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/15/2019'),
},
{
Date('04/18/2019'),
},
{
new Date('04/04/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/19/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/24/2019'),
},
{
Date('04/04/2019'),
},
{
Date('04/26/2019'),


},
{
Date('04/26/2019'),
},
{
new Date('04/30/2019'),
},
{
},
{
},
{
Date('05/06/2019'),
},
{
Date('05/09/2019'),
},
{
new Date('09/14/2019'),
},
{
Date('05/16/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/17/2019'),
},
{
Date('05/23/2019'),
},

{
},
{
Date('04/04/2019'),
},
{
new Date('06/06/2019'),
},
{
new Date('06/11/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/14/2019'),
},
{
new Date('06/14/2019'),
},
{
Date('04/04/2019'),
},
{
Date('06/20/2019'),
},
{
Date('06/26/2019'), Duration: 4,
}
];

}
}
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
};
columnIndex: 2
};
};
allowAdding: true,
allowEditing: true,
};
const toolbar: any = ['Add', 'Edit', 'Update', 'Delete', 'Cancel',
'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];
const projectStartDate: Date = new Date('04/01/2019');
const projectEndDate: Date = new Date('12/31/2025');
return (
labelSettings={labelSettings} projectEndDate={projectEndDate}
enableVirtualization={true} enableTimelineVirtualization={true}
projectStartDate={projectStartDate}
<ColumnsDirective>


Name'/>
</ColumnsDirective>
</GanttComponent>
)
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Get filtered data when virtual scrolling is enabled

While enabling virtual scroll you can get the filtered or sorted record count using filteredResult from
the filterModule of the treegrid inside the actionComplete event.
The following code example shows how to get filtered data count in the gantt control.

INDEX.JSX
import { useState } from 'react';
import { GanttComponent, Inject, Filter, Sort, VirtualScroll, Selection,
ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { virtualData } from './datasource';
function App(){
const [filteredCount, setFilteredCount] = useState(0);
const [datasetCount, setdatasetCount] = useState(0);
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
};
columnIndex: 2
};
let ganttInstance;
function actionComplete(args) {
if (args.requestType === 'filtering') {
if (args.rows != null) {
setFilteredCount(ganttInstance.treeGrid.filterModule.filteredResult.length);
}
}
};
function created() {
setdatasetCount(ganttInstance.flatData.length);
}
return (
<div>
<GanttComponent dataSource={virtualData} taskFields={taskFields}
splitterSettings={splitterSettings} enableVirtualization={true}
allowSorting={true} allowFiltering={true} height='450px' ref={gantt =>
ganttInstance = gantt} created={created} actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width= '120'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Filter, Selection, Sort, VirtualScroll]}/>
</GanttComponent>
<div>
<p>
<b>Dataset Count:</b> {datasetCount}
</p>
<p>
<b>Filtered Count:</b> {filteredCount}
</p>

</div>
</div>);
};
INDEX.TSX
import { GanttComponent, Inject, Filter, Sort, VirtualScroll, Selection,
ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { virtualData } from './datasource';
function App(){
const [filteredCount, setFilteredCount] = useState(0);
const [datasetCount, setdatasetCount] = useState(0);
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
};
columnIndex: 2
};
function actionComplete(args: any) {
if (args.requestType === 'filtering') {
if (args.rows != null) {
setFilteredCount(ganttInstance.treeGrid.filterModule.filteredResult.length);
}
}
};
function created() {
setdatasetCount(ganttInstance.flatData.length);
}
return (
<div>
<GanttComponent dataSource={virtualData} taskFields={taskFields}
splitterSettings={splitterSettings} enableVirtualization={true}
allowSorting={true} allowFiltering={true} height='450px' ref={gantt =>
ganttInstance = gantt} created={created} actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width= '120'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Filter, Selection, Sort, VirtualScroll]}/>
</GanttComponent>
<div>

<p>
<b>Dataset Count:</b> {datasetCount}
</p>
<p>
<b>Filtered Count:</b> {filteredCount}
</p>
</div>
</div>);
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Limitations for virtual scroll
• Due to the element height limitation in browsers, the maximum number of records loaded is
limited by the browser capacity.
• Cell selection will not be persisted.

Gantt Resources in React Gantt component
• The number of records rendered will be determined by the Link to the Video property.
• It is necessary to mention the height of the Gantt in pixels when enabling Virtual Scrolling.
Resources in React Gantt component

In Gantt, the resources are represented by staff, equipment and materials etc. In Gantt component you
can show or allocate the resources (human resources) for each task.
To get start quickly with Resource Allocation for each task and to know about Resource view Gantt, you
can check on this video
Resource collection
The resource collection contains details about resources that are used in the project. Resources are
JSON object that contains id, name, unit and group of the resources and this collection is mapped to the
Gantt control using the resources property. These resource fields are mapped to the Gantt control using
the resourceFields property.
Resource fields | Description
id | This field is used to assign resources to the tasks.
name | This field is used to map the resource names. These names are displayed as one of Gantt
columns and also can display as labels using the labelSettings property.
unit | It indicates the amount of work that can be done by a resource for the task in a day.
group | This field is used to group the resources and the tasks assigned to that particular resource into
category.
The following code snippets shows resource collection and how it assigned to Gantt control.
`ts
let projectResources: object[] = resources: [
{ resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team', resourceUnit: 50},
{ resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team', resourceUnit: 70 },
{ resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },
{ resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },
{ resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },
{ resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team', resourceUnit: 40 },
];
render() {
resourceFields: {
id: 'resourceId', //resource Id Mapping
name: 'resourceName', //resource Name mapping
unit: 'resourceUnit', //resource Unit mapping

group: 'resourceGroup' //resource Group mapping

},
resources: projectResources //resource collection dataSource
</GanttComponent>
}
};
`
Assign resource
We can assign resources for a task at initial load, using the resource id value of the resources as a
collection. This collection is mapped from the dataSource to the Gantt control using the resourceInfo
property.
Resources are assigned to tasks in following ways.
Assign resource alone
If the unit is not specified for specific resource, the amount of work done will be consider as 100% by
default. In such cases, the resource unit will not be displayed in Gantt UI.
`ts
50,resources: [2, 3] }
`
Assign resources with unit
We can assign the quantity of work done by the resources for the specific task as like below code
snippet.
`ts
{ TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4,
resources: [{resourceId: 2, resourceUnit: 70}, {resourceId: 1, resourceUnit: 70}] },
`
When resource unit is defined in resource collection, the amount of work done by that particular
resource will be same for all the tasks.
The following code snippet shows how to assign the resource for each task and map to Gantt control.
INDEX.JSX
export let ProjectResources = [
{ resourceId: 4, resourceName: 'Fuller King' },
{ resourceId: 5, resourceName: 'Davolio Fuller' },
{ resourceId: 6, resourceName: 'Van Jack' },
{ resourceId: 7, resourceName: 'Fuller Buchanan' },

{ resourceId: 8, resourceName: 'Jack Davolio' },

{ resourceId: 9, resourceName: 'Tamer Vinet' },
{ resourceId: 10, resourceName: 'Vinet Fuller' },
{ resourceId: 11, resourceName: 'Bergs Anton' },
{ resourceId: 12, resourceName: 'Construction Supervisor' }
];
let data = [
{
TaskID: 1,
TaskName: 'Project initiation',
subtasks: [
{
TaskID: 2, TaskName: 'Identify site location', StartDate:
new Date('03/29/2019'), Duration: 2,
Progress: 30, resources: [{ resourceId: 1, Unit: 70 }, 6]
},
{
TaskID: 3, TaskName: 'Perform soil test', StartDate: new
Date('03/29/2019'), Duration: 4,
resources: [2, 3, 5]
},
{
TaskID: 4, TaskName: 'Soil test approval', StartDate: new
Date('03/29/2019'), Duration: 1,
resources: [8, { resourceId: 9, Unit: 50 }], Progress: 30
},
]
},
{
TaskID: 5,
TaskName: 'Project estimation', StartDate: new Date('03/29/2019'),
subtasks: [
{
TaskID: 6, TaskName: 'Develop floor plan for estimation',
Duration: 3, Progress: 30, resources: [{ resourceId: 4,
Unit: 50 }]
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new
Date('04/01/2019'), Duration: 3,
resources: [4, 8]
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new
Date('04/01/2019'),
Duration: 2, resources: [12, { resourceId: 5, Unit: 70 }]
}
]
},
{
TaskID: 9, TaskName: 'Sign contract', StartDate: new
Date('04/01/2019'), Duration: 1,
Progress: 30, resources: [12]

}
];
function App(){
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit'
};
};
return <GanttComponent id='root' dataSource={ data } taskFields = {
taskFields } resourceFields={resourceFields} labelSettings = {labelSettings
} resources = { ProjectResources } height = '450px' >
<ColumnsDirective>
<ColumnDirective field= 'TaskID' visible= 'false' >
</ColumnDirective>
< ColumnDirective field= 'TaskName' headerText= 'Task Name'
width= '180' > </ColumnDirective>
< ColumnDirective field= 'resources' headerText= 'Resources'
< ColumnDirective field= 'Duration' width= '100' >
</ColumnDirective>
</ColumnsDirective>
</GanttComponent>;
};
INDEX.TSX
export let ProjectResources = [

];
let data = [
{
TaskID: 1,
subtasks: [
{
Progress: 30, resources: [{ resourceId: 1, Unit: 70 }, 6]
},
{
Date('03/29/2019'), Duration: 4,
resources: [2, 3, 5]
},
{
Date('03/29/2019'), Duration: 1,
resources: [8, { resourceId: 9, Unit: 50 }], Progress: 30
},
]
},
{
TaskID: 5,
subtasks: [
{
Unit: 50 }]
},
{
Date('04/01/2019'), Duration: 3,
resources: [4, 8]
},
{
Date('04/01/2019'),
Duration: 2, resources: [12, { resourceId: 5, Unit: 70 }]
}
]
},
{
Date('04/01/2019'), Duration: 1,
Progress: 30, resources: [12]
}
];


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit'
};
};
return <GanttComponent id='root' dataSource={ data } taskFields = {
taskFields } resourceFields={resourceFields} labelSettings = {labelSettings
} resources = { ProjectResources } height = '450px' >
<ColumnsDirective>
<ColumnDirective field= 'TaskID' visible= 'false' >
</ColumnDirective>
< ColumnDirective field= 'TaskName' headerText= 'Task Name'
< ColumnDirective field= 'resources' headerText= 'Resources'
< ColumnDirective field= 'Duration' width= '100' >
</ColumnDirective>
</ColumnsDirective>
</GanttComponent>;
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>

<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Add/Edit resource collection

By using cell/ dialog edit option, we can add/remove the multiple resources for a particular task.
Resource Unit can be change for a each task on resource tab in edit dialog by double click on the unit
cell.

Gantt Resource view in React Gantt component
Resource view in React Gantt component

The resource breakdown view is used to visualize the tasks assigned to each resource in hierarchy
manner. Resources are displayed as parents and all the tasks assigned to each resource are displayed as
its child records. It can be initialized by setting the viewType property to ResourceView.
Resource task
A task assigned to one or more resources are termed as resource task and it is added as child task to the
respective resource. Already assigned task can also be shared or moved with other resources by adding
a resource name to the task or removing resource name from the task by cell or dialog editing.
Note: Currently there is no support for unscheduled task in Resource view Gantt.
INDEX.JSX
let resourceCollection = [
{ resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning
Team'},
{ resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing
Team' },
{ resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup:
'Approval Team' },
{ resourceId: 4, resourceName: 'Fuller King', resourceGroup:
'Development Team' },
{ resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup:
'Approval Team' },
{ resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development
Team' },
];
let data = [
{
TaskID: 1,


subtasks: [
{
Progress: 30, work: 10, resources: [{ resourceId: 1,
resourceUnit: 50 }]
},
{
Date('03/29/2019'), Duration: 4,
resources: [{resourceId: 2, resourceUnit: 70}], Progress:
30, work: 20
},
{
Date('03/29/2019'), Duration: 1,
resources: [{resourceId: 3, resourceUnit: 25}, { resourceId:
1, resourceUnit: 75 }], Progress: 30, work: 10,
},
]
},
{
TaskID: 5,
subtasks: [
{
resourceUnit: 50 }, {resourceId: 2, resourceUnit: 70}], work: 30
},
{
Date('04/01/2019'), Duration: 3,
30, work: 40
},
{
Date('04/01/2019'),
Duration: 2, resources: [{ resourceId: 5, resourceUnit: 75
}], Progress: 30, work: 60,
}
]
},
{
Date('04/01/2019'), Duration: 1,
Progress: 30,
}
];
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit,
Selection, Toolbar } from '@syncfusion/ej2-react-gantt';

function App (){

id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit',
group: 'resourceGroup'
};
allowAdding: true,
allowEditing: true,
};
const toolbar = ['Add', 'Edit', 'Delete', 'Cancel', 'Update',
};
columnIndex: 3
};
return <GanttComponent id='root' dataSource = { data }
treeColumnIndex = { 1} viewType = 'ResourceView' allowSelection = { true}
allowResizing = { true} highlightWeekends = { true} toolbar = { toolbar }
editSettings = { editSettings } projectStartDate = { projectStartDate }
projectEndDate = { projectEndDate } resourceFields = {resourceFields }
taskFields = { taskFields } labelSettings = { labelSettings }
splitterSettings = { splitterSettings } height = '410px' resources = {
resourceCollection } >
<ColumnsDirective>
<ColumnDirective field= 'TaskID' visible= {false} >
</ColumnDirective>
<ColumnDirective field= 'TaskName' headerText= 'Task Name'
<ColumnDirective field= 'work' headerText= 'Work' >
</ColumnDirective>
<ColumnDirective field= 'Progress' > </ColumnDirective>
<ColumnDirective field= 'resourceGroup' headerText= 'Group' >
</ColumnDirective>
<ColumnDirective field= 'StartDate' > </ColumnDirective>
<ColumnDirective field= 'Duration' > </ColumnDirective>
</ColumnsDirective>
<Inject services={[ Toolbar, Edit, Selection ]}/>
</GanttComponent>;

};
INDEX.TSX
let resourceCollection: object[] = [
Team'},
Team' },
'Approval Team' },
{ resourceId: 4, resourceName: 'Fuller King', resourceGroup:
'Development Team' },
{ resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup:
'Approval Team' },
{ resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development
Team' },
];
let data = [
{
TaskID: 1,
subtasks: [
{
resourceUnit: 50 }]
},
{
Date('03/29/2019'), Duration: 4,
30, work: 20
},
{
Date('03/29/2019'), Duration: 1,
resources: [{resourceId: 3, resourceUnit: 25}, { resourceId:
1, resourceUnit: 75 }], Progress: 30, work: 10,
},
]
},
{
TaskID: 5,
subtasks: [
{
resourceUnit: 50 }, {resourceId: 2, resourceUnit: 70}], work: 30

},
{
Date('04/01/2019'), Duration: 3,
30, work: 40
},
{
Date('04/01/2019'),
}], Progress: 30, work: 60,
}
]
},
{
Date('04/01/2019'), Duration: 1,
Progress: 30,
}
];
function App (){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit',
};
allowAdding: true,
allowEditing: true,
};
const toolbar = ['Add', 'Edit', 'Delete', 'Cancel', 'Update',
};
columnIndex: 3
};


allowResizing = { true} highlightWeekends = { true} toolbar = { toolbar }
editSettings = { editSettings } projectStartDate = { projectStartDate }
projectEndDate = { projectEndDate } resourceFields = {resourceFields }
taskFields = { taskFields } labelSettings = { labelSettings }
splitterSettings = { splitterSettings } height = '410px' resources = {
resourceCollection } >
<ColumnsDirective>
</ColumnDirective>
</ColumnDirective>
</ColumnDirective>
</ColumnsDirective>
</GanttComponent>;
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;

}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Resource overallocation
When a resource is assigned too much of work to complete within a day of resource’s available time
then it is called as overallocation.
The available working time of resources for completing the task in a day will be calculated based on the
dayWorkingTime property and resource unit.
The range of overallocation dates can be highlighted by a square bracket. It can be enabled by setting
the showOverallocation property as true. The following code example demonstrates how to hide or
show the over allocation by clicking the custom button.
Note: By default, the showOverAllocation property value is false.
INDEX.JSX
Team'},
Team' },
'Approval Team' }
];
let data = [
{
TaskID: 1,
subtasks: [
{
resourceUnit: 50 }]
},
{
Date('04/03/2019'), Duration: 4,
resources: [{ resourceId: 1, resourceUnit: 70 }],
Predecessor: 2, Progress: 30, work: 20
},
{
Date('04/09/2019'), Duration: 4,


Predecessor: 3, Progress: 30, work: 10,
},
]
},
{
TaskID: 5,
subtasks: [
{
resourceUnit: 50 }], work: 30
},
{
Date('04/04/2019'), Duration: 4,
Predecessor: '6FS-2', Progress: 30, work: 40
},
{
Date('04/09/2019'),
}], Predecessor: '7FS-1', Progress: 30, work: 60,
}
]
},
{
TaskID: 9,
TaskName: 'Site work',
subtasks: [
{
TaskID: 10, TaskName: 'Install temporary power service',
StartDate: new Date('04/01/2019'), Duration: 14,
Progress: 30, resources: [{ resourceId: 3, resourceUnit: 75
}]
},
{
TaskID: 11, TaskName: 'Clear the building site', StartDate:
new Date('04/08/2019'),
Duration: 9, Progress: 30, Predecessor: '10FS-9', resources:
[3]
},
{
Date('04/12/2019'),
Duration: 5, resources: [3], Predecessor: '11FS-5'
},
]
}
];


function App() {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit',
};
allowAdding: true,
allowEditing: true,
};
const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete',
'Cancel', 'ExpandAll', 'CollapseAll',
{ text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide
Overallocation', id: 'showhidebar' }];
rightLabel: 'resources',
};
let ganttInstance;
if (args.item.id === 'showhidebar') {
ganttInstance.showOverAllocation =
ganttInstance.showOverAllocation ? false : true;
}}
allowResizing = { true} highlightWeekends = { true} toolbar =
{toolbarOptions } toolbarClick={toolbarClick}
editSettings = {editSettings } projectStartDate = { projectStartDate
} projectEndDate = { projectEndDate }
resourceFields = { resourceFields } taskFields = {taskFields }
labelSettings = {labelSettings }
resources = { resourceCollection } showOverAllocation = {true}
ref={gantt => ganttInstance = gantt} >
<ColumnsDirective>
</ColumnDirective>


</ColumnDirective>
</ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
Team'},
Team' },
'Approval Team' }
];
let data = [
{
TaskID: 1,
subtasks: [
{
resourceUnit: 50 }]
},
{
Date('04/03/2019'), Duration: 4,
},
{
Date('04/09/2019'), Duration: 4,
},
]
},
{
TaskID: 5,

subtasks: [
{
},
{
Date('04/04/2019'), Duration: 4,
},
{
Date('04/09/2019'),
}
]
},
{
TaskID: 9,
subtasks: [
{
}]
},
{
new Date('04/08/2019'),
[3]
},
{
Date('04/12/2019'),
},
]
}
];
function App() {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',

child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit',
};
allowAdding: true,
allowEditing: true,
};
const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete',
'Cancel', 'ExpandAll', 'CollapseAll',
{ text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide
Overallocation', id: 'showhidebar' }];
};
if (args.item.id === 'showhidebar') {
ganttInstance.showOverAllocation =
ganttInstance.showOverAllocation ? false : true;
}}
allowResizing = { true} highlightWeekends = { true} toolbar =
{toolbarOptions } toolbarClick={toolbarClick}
editSettings = {editSettings } projectStartDate = { projectStartDate
} projectEndDate = { projectEndDate }
labelSettings = {labelSettings }
ref={gantt => ganttInstance = gantt} >
<ColumnsDirective>
</ColumnDirective>
</ColumnDirective>
</ColumnDirective>
</ColumnsDirective>


</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Unassigned task
A task not assigned to any one of the resource are termed as unassigned tasks. The unassigned tasks are
grouped with a name as Unassigned Task and displayed at the bottom of Gantt data collection . It is
validated at load time during Gantt record creation by default based on a task resourceInfo mapping
property in the Gantt chart data source. If the resource is assigned to the unassigned grouped tasks, the
task will be moved as child to the respective resource.
Enable taskbar drag and drop
In Gantt, you can enable taskbar drag and drop between resources by using the
allowTaskbarDragAndDrop property. This allows you to move a taskbar from one resource to another
vertically, making it easier to schedule tasks and manage resources.

INDEX.JSX
Team', isExpand: false},
Team', isExpand: true},
'Approval Team', isExpand: false }
];
let data = [
{
TaskID: 1,
subtasks: [
{
resourceUnit: 50 }]
},
{
Date('04/03/2019'), Duration: 4,
},
{
Date('04/09/2019'), Duration: 4,
},
]
},
{
TaskID: 5,
subtasks: [
{
},
{
Date('04/04/2019'), Duration: 4,
},
{
Date('04/09/2019'),


}
]
},
{
TaskID: 9,
subtasks: [
{
}]
},
{
new Date('04/08/2019'),
[3]
},
{
Date('04/12/2019'),
},
]
}
];
function App () {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
expandState: 'isExpand',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit',
};
allowAdding: true,
allowEditing: true,

};
const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel',
'ExpandAll', 'CollapseAll'];
taskLabel: 'TaskName'
};
treeColumnIndex = {1} viewType = 'ResourceView' allowSelection = { true}
allowResizing = { true} highlightWeekends = { true} toolbar = {
toolbarOptions } allowTaskbarDragAndDrop = {true}
editSettings = { editSettings } projectStartDate = {
projectStartDate } projectEndDate = { projectEndDate }
labelSettings = { labelSettings }
enableMultiTaskbar = {true}>
<ColumnsDirective>
<ColumnDirective field= 'TaskID' > </ColumnDirective>
</ColumnDirective>
</ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
Team', isExpand: false},
Team', isExpand: true},
'Approval Team', isExpand: false }
];
let data = [
{
TaskID: 1,
subtasks: [

{
resourceUnit: 50 }]
},
{
Date('04/03/2019'), Duration: 4,
},
{
Date('04/09/2019'), Duration: 4,
},
]
},
{
TaskID: 5,
subtasks: [
{
},
{
Date('04/04/2019'), Duration: 4,
},
{
Date('04/09/2019'),
}
]
},
{
TaskID: 9,
subtasks: [
{
}]
},

{
new Date('04/08/2019'),
[3]
},
{
Date('04/12/2019'),
},
]
}
];
function App () {
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
expandState: 'isExpand',
child: 'subtasks'
};
id: 'resourceId',
unit: 'Unit',
};
allowAdding: true,
allowEditing: true,
};
const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel',
'ExpandAll', 'CollapseAll'];
taskLabel: 'TaskName'
};
treeColumnIndex = {1} viewType = 'ResourceView' allowSelection = { true}
allowResizing = { true} highlightWeekends = { true} toolbar = {
toolbarOptions } allowTaskbarDragAndDrop = {true}

editSettings = { editSettings } projectStartDate = {

projectStartDate } projectEndDate = { projectEndDate }
labelSettings = { labelSettings }
enableMultiTaskbar = {true}>
<ColumnsDirective>
<ColumnDirective field= 'TaskID' > </ColumnDirective>
</ColumnDirective>
</ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>

Gantt Filtering in React Gantt component
</div>
</body>
</html>
Filtering in React Gantt component

Filtering allows you to view specific or related records based on filter criteria. This can be done in the
Gantt component by using the filter menu and toolbar search. To enable filtering in the Gantt
component, set the allowFiltering to true. Menu -filtering support can be configured using the
filterSettings property and toolbar searching can be configured using the searchSettings property.
To use filter, inject the Filter module into the Gantt component.
Filter hierarchy modes
The Gantt component supports a set of filtering modes with the filterSettings.hierarchyMode property.
The following are the types of filter hierarchy modes available in the Gantt component:
• Parent: This is the default filter hierarchy mode in Gantt. The filtered records are displayed with
their parent records. If the filtered records do not have any parent record, then only the filtered
records will be displayed.
• Child: Displays the filtered records with their child record. If the filtered records do not have any
child record, then only the filtered records will be displayed.
• Both: Displays the filtered records with their both parent and child records. If the filtered
records do not have any parent or child records, then only the filtered records will be displayed.
• None: Displays only the filtered records.
INDEX.JSX
let DropData = [
{ text: 'Parent', value: 'Parent' },
{ text: 'Child', value: 'Child' },
{ text: 'Both', value: 'Both' },
{ text: 'None', value: 'None' },
];
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
gantt';
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function onChange(sel) {
let mode= sel.value.toString();
ganttInstance.filterSettings.hierarchyMode = mode;

}
return(<div>
<DropDownListComponent dataSource={DropData}
change={onChange} width= {150}
value="Parent"></DropDownListComponent>
allowFiltering={true} height = '450px' ref={gantt =>
};
INDEX.TSX
let DropData: any[] = [
{ text: 'Parent', value: 'Parent' },
{ text: 'Child', value: 'Child' },
{ text: 'None', value: 'None' },
];
import { DropDownListComponent, ChangeEventArgs } from "@syncfusion/ej2-
react-dropdowns";
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function onChange(sel: ChangeEventArgs): void {
let mode:any = sel.value.toString();
ganttInstance.filterSettings.hierarchyMode = mode;
}
return(<div>
<DropDownListComponent dataSource={DropData}
change={onChange} width= {150}
value="Parent"></DropDownListComponent>
allowFiltering={true} height = '450px' ref={gantt => ganttInstance
= gantt}>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Initial filter
To apply the filter at initial rendering, set the filter to predicate object in the filterSettings.columns
property.
INDEX.JSX
import { GanttComponent, Inject, Filter} from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'

};
const FilterOptions = {
columns: [
{ field: 'TaskName', matchCase: false, operator: 'startswith',
predicate: 'and', value: 'Identify' },
{ field: 'TaskID', matchCase: false, operator: 'equal', predicate:
'and', value: 2 }]
};
allowFiltering={true} filterSettings={FilterOptions} height =
'450px'>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Filter, FilterSettingsModel } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const FilterOptions: FilterSettingsModel = {
columns: [
{ field: 'TaskName', matchCase: false, operator: 'startswith',
predicate: 'and', value: 'Identify' },
{ field: 'TaskID', matchCase: false, operator: 'equal', predicate:
'and', value: 2 }]
};
'450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Filter operators
The filter operator for a column can be defined in the filterSettings.columns.operator property.
The available operators and their supported data types are:
Operator |Description |Supported Types
startswith |Checks whether the value begins with the specified value. |String
endswith |Checks whether the value ends with the specified value. |String
contains |Checks whether the value contains the specified value. |String
equal |Checks whether the value is equal to the specified value. |String | Number | Boolean
| Date
notequal |Checks for the values that are not equal to the specified value. |String | Number
| Boolean | Date
greaterthan |Checks whether the value is greater than the specified value. |Number | Date
greaterthanorequal|Checks whether the value is greater than or equal to the specified value. |Number
| Date
lessthan |Checks whether the value is less than the specified value. |Number | Date
lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number |
Date

By default, the filterSettings.columns.operator value is equal

Diacritics
By default, the Gantt component ignores the diacritic characters while filtering. To include diacritic
characters, set the filterSettings.ignoreAccent to true.
In the following sample, type Perform in the TaskName column to filter diacritic characters.
INDEX.JSX
let data = [
{
TaskID: 1,
TaskName: 'Projéct initiàtion',
subtasks: [
{TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new
Date('04/02/2019'), Duration: 4,Progress: 50 },
{TaskID: 3, TaskName: 'Perförm soil test', StartDate: new
{TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new
]
},
{
TaskID: 5,
TaskName: 'Project estimation',
subtasks: [
{TaskID: 6, TaskName: 'Develöp floor plan for estimàtion',
StartDate: new Date('04/04/2019'),Duration: 3, Progress: 50, resources:
[4]},
{TaskID: 7, TaskName: 'List matërials', StartDate: new
Date('04/04/2019'),Duration: 3, Progress: 50},
{TaskID: 8, TaskName: 'Estimation approval', StartDate: new
Date('04/04/2019'),Duration: 3, Progress: 50 }
]
}];

import { GanttComponent, Inject, Filter} from '@syncfusion/ej2-react-
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

ignoreAccent:true
};
'450px'>
</GanttComponent>
};
gantt';
class App extends React.Component {
taskFields = {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
FilterOptions = {
ignoreAccent: true
};
render() {
taskFields={this.taskFields} allowFiltering={true}
filterSettings={this.FilterOptions} height='450px'>
</GanttComponent>;
}
}
;
INDEX.TSX
{
TaskID: 1,
TaskName: 'Projéct initiàtion',
subtasks: [
{TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new
Date('04/02/2019'), Duration: 4,Progress: 50 },
{TaskID: 3, TaskName: 'Perförm soil test', StartDate: new
{TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new
]
},
{
TaskID: 5,
TaskName: 'Project estimation',


subtasks: [
{TaskID: 6, TaskName: 'Develöp floor plan for estimàtion',
StartDate: new Date('04/04/2019'),Duration: 3, Progress: 50, resources:
[4]},
{TaskID: 7, TaskName: 'List matërials', StartDate: new
Date('04/04/2019'),Duration: 3, Progress: 50},
{TaskID: 8, TaskName: 'Estimation approval', StartDate: new
Date('04/04/2019'),Duration: 3, Progress: 50 }
]
}];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ignoreAccent:true
};
'450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Filtering a specific column by method

You can filter the columns dynamically by using the filterByColumn method.
INDEX.JSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
let ganttInstance;
ganttInstance.filterByColumn('TaskName', 'startswith', 'Perf');
}
return (<div>
<ButtonComponent onClick={clickHandler}>Filter Column</ButtonComponent>
allowFiltering={true} height='450px' ref={gantt => ganttInstance = gantt}>
</GanttComponent></div>);
};

INDEX.TSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
let ganttInstance;
ganttInstance.filterByColumn('TaskName', 'startswith', 'Perf');
}
return (<div>
<ButtonComponent onClick={clickHandler}>Filter Column</ButtonComponent>
allowFiltering={true} height='450px' ref={gantt => ganttInstance = gantt}>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;

top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Clear filtered columns

You can clear all the filtering conditions done in the Gantt component by using the clearFiltering
method.The following code snippet explains the above behavior.
INDEX.JSX
gantt';
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columns: [
{ field: 'TaskName', matchCase: false, operator:
'startswith', predicate: 'and', value: 'perfor' },
{ field: 'TaskID', matchCase: false, operator: 'equal',
predicate: 'and', value: 3 }]
};
ganttInstance .clearFiltering();
}
return(<div>
<ButtonComponent onClick= {clickHandler}>Clear
Filter</ButtonComponent>
filterSettings={FilterOptions}
= gantt}>
};

INDEX.TSX
function App(){
let ganttInstance : any;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columns: [
{ field: 'TaskName', matchCase: false, operator:
'startswith', predicate: 'and', value: 'perfor' },
{ field: 'TaskID', matchCase: false, operator: 'equal',
predicate: 'and', value: 3 }]
};
ganttInstance .clearFiltering();
}
return(<div>
<ButtonComponent onClick= {clickHandler}>Clear
filterSettings={FilterOptions}
= gantt}>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Custom component in filter menu

The column.filter.ui is used to add custom filter components to a particular column.
To implement a custom filter UI, define the following functions:
• create: Creates custom component.

• write: Wire events for custom component.
• read: Read the filter value from custom component.
In the following sample, the dropdown is used as a custom component in the TaskName column.
INDEX.JSX
gantt';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-
gantt';
import { createElement } from '@syncfusion/ej2-base';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
function App () {
taskFields = {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',

};
Filter = {
ui: {
create: (args) => {
const flValInput = createElement('input', { className:
'flm-input' });
args.target.appendChild(flValInput);
dropInstance = new DropDownList({
dataSource: new DataManager(data),
fields: { text: 'TaskName', value: 'TaskName' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
},
read: (args) => {
args.fltrObj.filterByColumn(args.column.field,
args.operator, dropInstance.value);
},
write: (args) => {
dropInstance.value = args.filteredValue;
}
}
};

allowFiltering={true} height='450px'>
<ColumnsDirective>
<ColumnDirective field="TaskID"></ColumnDirective>
<ColumnDirective field="TaskName" headerText="Job Name"
filter={Filter}></ColumnDirective>
<ColumnDirective field="StartDate"></ColumnDirective>
<ColumnDirective field="Duration"></ColumnDirective>
<ColumnDirective field="Progress"></ColumnDirective>
<ColumnDirective field="Predecessor"></ColumnDirective>
</ColumnsDirective>
</GanttComponent>;
};
INDEX.TSX
import { GanttComponent, Inject, Filter, IFilter } from '@syncfusion/ej2-
react-gantt';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-
gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
function App (){


id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
let dropInstance:any;
const Filters : IFilter = {
ui: {
create: (args: { target: Element, column: object }) => {
const flValInput: HTMLElement = createElement('input', { className:
'flm-input' });
args.target.appendChild(flValInput);
dropInstance = new DropDownList({
dataSource: new DataManager(data),
fields: { text: 'TaskName', value: 'TaskName' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
},
read: (args: { target: Element, column: any, operator: string, fltrObj:
Filter }) => {
args.fltrObj.filterByColumn(args.column.field, args.operator,
dropInstance.value);
},
write: (args: {
column: object, target: Element, parent: any,
filteredValue: number | string }) => {
dropInstance.value = args.filteredValue;
}
}
};
allowFiltering={true} height = '450px'>
<ColumnsDirective>
<ColumnDirective field="TaskID" ></ColumnDirective>
<ColumnDirective
field="TaskName"
headerText="Job Name"
filter={Filters}
></ColumnDirective>
<ColumnDirective field="StartDate"></ColumnDirective>
<ColumnDirective field="Duration"></ColumnDirective>
<ColumnDirective field="Progress"></ColumnDirective>
<ColumnDirective field="Predecessor"></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML

Gantt Sorting in React Gantt component
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Sorting in React Gantt component

Sorting enables you to sort data in the ascending or descending order. To sort a column, click the
column header.
To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting
of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific
column header.
To enable sorting in the Gantt component, set the allowSorting property to true. Sorting options can be
configured through the sortSettings property.
To sort, inject the Sort module into the Gantt component.
INDEX.JSX
function App(){

id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>

<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
* Gantt columns are sorted in the ascending order. If you click the already sorted column, the sort
direction toggles.
* To disable sorting for a particular column, set the columns.allowSorting property to false.
Sorting column on Gantt initialization
The Gantt component can be rendered with sorted columns initially, and this can be achieved by using
the sortSettings property. You can add columns that are sorted initially in the sortSettings.columns
collection defined with field and direction properties. The following code example shows how to add the
sorted column to Gantt initialization.
INDEX.JSX
import { GanttComponent, Inject, Sort} from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const sortingOptions = { columns: [{ field: 'TaskID', direction:
'Descending' }] };
sortSettings={sortingOptions} allowSorting={true} height='450px'>
</GanttComponent>
};
INDEX.TSX


import { GanttComponent, Inject, Sort, SortSettingsModel } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const sortingOptions: SortSettingsModel = { columns: [{ field: 'TaskID',
direction: 'Descending' }] };
sortSettings={sortingOptions} allowSorting={true} height='450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>

</div>
</body>
</html>
Sorting column dynamically

Columns in the Gantt component can be sorted dynamically using the sortColumn method. The
following code example demonstrates how to invoke the sortColumn method by clicking the custom
button.
INDEX.JSX
function App (){
let gantt;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
gantt.sortModule.sortColumn('TaskID', "Descending", false);
}
return (<div>
<ButtonComponent onClick={clickHandler}>Sort
Column</ButtonComponent>
};
INDEX.TSX
function App (){
let gantt: any;
id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
gantt.sortModule.sortColumn('TaskID', "Descending", false);
}
return (<div>
<ButtonComponent onClick={clickHandler}>Sort
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Clear all the sorted columns dynamically

In the Gantt component, you can clear all the sorted columns and return to previous position using the
clearSorting public method. The following code snippet shows how to clear all the sorted columns by
clicking the custom button.
INDEX.JSX
import { GanttComponent, Inject, Sort} from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
let ganttInstance;
const sortingOptions = { columns: [{ field: 'TaskID', direction:
'Descending' }] };
ganttInstance.clearSorting();
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Clear
Sorting</ButtonComponent>
ref={gantt => ganttInstance = gantt} allowSorting={true}
sortSettings={sortingOptions} height='450px'>
};
INDEX.TSX
import { GanttComponent, Inject, Sort, SortSettingsModel } from
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',

};
const sortingOptions: SortSettingsModel = { columns: [{ field: 'TaskID',
direction: 'Descending' }] };
ganttInstance.clearSorting();
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Clear
Sorting</ButtonComponent>
ref={gantt => ganttInstance = gantt} allowSorting={true}
sortSettings={sortingOptions} height='450px'>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Sorting events
During the sort action, the Gantt component triggers two events. The actionBegin event triggers before
the sort action starts, and the actionComplete event triggers after the sort action is completed.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function actionHandler (args) {
alert(args.requestType + ' ' + args.type);
}
allowSorting={true}
actionBegin={actionHandler} actionComplete={actionHandler}
height='450px'>
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function actionHandler (args: any) {
alert(args.requestType + ' ' + args.type);
}
allowSorting={true}
actionBegin={actionHandler} actionComplete={actionHandler}
height='450px'>

</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
The args.requestType is the current action name. For example, for sorting the args.requestType,
value is sorting.
Custom Sorting
In Gantt, you can sort custom columns of different types like string, numeric, etc., By adding the custom
column in the column collection, you can perform initial sort using the sortSettings or you can also sort
the column dynamically by a button click.
The following code snippets explains how to achieve this.
INDEX.JSX
let GanttData = [

{
TaskID: 1,
subtasks: [
Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn:
'BCustomColumn'*/ CustomColumn: '2' },
]
},
{
TaskID: 5,
subtasks: [
StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50,
/*CustomColumn: 'BCustomColumn'*/ CustomColumn: '6' },
'BCustomColumn'*/ CustomColumn: '5' }
]
},
];
import { GanttComponent, Inject, Sort, ColumnsDirective, ColumnDirective }
from '@syncfusion/ej2-react-gantt';
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.sortModule.sortColumn('CustomColumn', 'Ascending', false);
}
return (<div>
<ButtonComponent onClick={clickHandler}>Sort Custom

<GanttComponent dataSource={GanttData} ref={gantt => ganttInstance =

gantt} taskFields={taskFields}
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName' width='250'></ColumnDirective>
<ColumnDirective field='EndDate'></ColumnDirective>
<ColumnDirective field='CustomColumn'></ColumnDirective>
</ColumnsDirective>
};
INDEX.TSX
let GanttData = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50,
/*CustomColumn: 'BCustomColumn'*/ CustomColumn: '6' },
'BCustomColumn'*/ CustomColumn: '5' }
]
},
];


import { GanttComponent, Inject, Sort, ColumnsDirective, ColumnDirective }
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.sortModule.sortColumn('CustomColumn', 'Ascending', false);
}
return (<div>
<ButtonComponent onClick={clickHandler}>Sort Custom
<GanttComponent dataSource={GanttData} ref={gantt => ganttInstance =
gantt} taskFields={taskFields}
<ColumnsDirective>
<ColumnDirective field='TaskName' width='250'></ColumnDirective>
<ColumnDirective field='EndDate'></ColumnDirective>
<ColumnDirective field='CustomColumn'></ColumnDirective>
</ColumnsDirective>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>

<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Touch interaction
To perform tap action on a column header, trigger sorting operation to the selected column. A popup is
displayed for multi-column sorting. To sort multiple columns, tap the popup, and then tap the desired
column headers.
The following screenshot shows Gantt touch sorting,

Gantt Selection in React Gantt component
Selection in React Gantt component

Selection provides an option to highlight a row or a cell. It can be done using arrow keys or by scrolling
down the mouse. To disable selection in the Gantt component, set the allowSelection to false.
To select data, inject the Selection module into the Gantt control.
The Gantt component supports two types of selection that can be set by using the selectionSettings.type
property. They are:
• Single: Sets a single value by default and allows only selection of a single row or a cell.
• Link to the Video: Allows you to select multiple rows or cells. To perform the multi-selection,
press and hold the CTRL key and click the desired rows or cells.
To get start quickly with Selection and to know its type and behaviors, you can check on this video
Selection mode
The Gantt component supports three types of selection modes that can be set by using the
selectionSettings.mode. They are:
• Row: Allows you to select only rows, and the row value is set by default.
• Cell: Allows you to select only cells.
• Both: Allows you to select rows and cells at the same time.
INDEX.JSX
import { GanttComponent, Inject, Selection} from '@syncfusion/ej2-react-
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const settings = {
mode: 'Both'
};
return <GanttComponent dataSource={data} allowSelection={true}
taskFields={taskFields} selectionSettings={settings} height = '450px'>
<Inject services={[Selection]} />
</GanttComponent>
};
INDEX.TSX

import { GanttComponent, Inject, Selection, SelectionSettingsModel } from

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const settings: SelectionSettingsModel = {
mode: 'Both'
};
taskFields={taskFields} selectionSettings={settings} height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>

</div>
</body>
</html>
Toggle selection
The toggle selection allows you to select and deselect a specific row or cell. To enable toggle selection,
set the enableToggle property of the selectionSettings to true. If you click the selected row or cell, then
it will be deselected and vice versa.
By default, the enableToggle property is set to false.
INDEX.JSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
let ganttInstance;
const settings = {
mode: 'Row',
type: 'Multiple',
enableToggle: true
};
ganttInstance.selectionSettings.enableToggle = false;
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Disable
Toggle</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt => ganttInstance =
gantt} allowSelection={true} taskFields={taskFields}
selectionSettings={settings} height = '450px'>
</GanttComponent> </div>)
};
INDEX.TSX


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
mode: 'Row',
type: 'Multiple',
enableToggle: true
};
ganttInstance.selectionSettings.enableToggle = false;
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Disable
Toggle</ButtonComponent>
</GanttComponent> </div>)
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;

top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Clear selection
You can clear the selected cells and selected rows by using a method called clearSelection. The following
code example demonstrates how to clear the selected rows in Gantt Chart.
INDEX.JSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
let ganttInstance;
const settings = {
mode: 'Row',
type: 'Multiple'
};
ganttInstance.selectionModule.selectRows([1, 3, 5]); // passing the
record index as array collection
}
function clickHandler1(){
ganttInstance.clearSelection(); // Clear the selected rows
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Select Multiple
Rows</ButtonComponent>
<ButtonComponent onClick= { clickHandler1}>Clear
Selection</ButtonComponent>
};

INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
mode: 'Row',
type: 'Multiple'
};
ganttInstance.selectionModule.selectRows([1, 3, 5]); // passing the
record index as array collection
}
function clickHandler1(){
ganttInstance.clearSelection(); // Clear the selected rows
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Select Multiple
Rows</ButtonComponent>
<ButtonComponent onClick= { clickHandler1}>Clear
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Get selected row indexes and records

You can get the selected row indexes by using the getSelectedRowIndexes method. And by using
getSelectedRecords method, you can get the selected record details.
INDEX.JSX
gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const settings = {
mode: 'Row',
type: 'Multiple'
};
let ganttInstance ;
function rowSelected(args) {
let selectedrowindex =
ganttInstance.selectionModule.getSelectedRowIndexes(); // get the selected
row indexes.

alert(selectedrowindex); // to alert the selected row indexes.

let selectedrecords =
ganttInstance.selectionModule.getSelectedRecords(); // get the selected
records.
console.log(selectedrecords); // to print the selected records in
console window.
}
selectionSettings={settings} rowSelected={rowSelected} height =
'450px' ref={gantt => ganttInstance = gantt}>
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
mode: 'Row',
type: 'Multiple'
};
let ganttInstance :any;
function rowSelected(args:any) {
let selectedrowindex: number[] =
ganttInstance.selectionModule.getSelectedRowIndexes(); // get the selected
row indexes.
alert(selectedrowindex); // to alert the selected row indexes.
let selectedrecords: Object[] =
ganttInstance.selectionModule.getSelectedRecords(); // get the selected
records.
console.log(selectedrecords); // to print the selected records in
console window.
}
selectionSettings={settings} rowSelected={rowSelected} height =
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Multiple Selection based on condition

You can select multiple rows based on condition by using the selectRows method.
In the following code, the rows which contains TaskId value as 3 and 4 are selected at initial rendering.
INDEX.JSX
gantt';
function App (){
id: 'TaskID',
name: 'TaskName',

child: 'subtasks'
};
const settings = {
mode: 'Row',
type: 'Multiple'
};
let ganttInstance ;
function dataBound(args) {
var rowIndexes =[];
ganttInstance.treeGrid.grid.dataSource.forEach((data,index)=>{
if (data.TaskID === 3 || data.TaskID === 4){
rowIndexes.push(index);
}
});
ganttInstance.selectRows(rowIndexes);
}
selectionSettings={settings} dataBound={dataBound} height = '450px'
ref={gantt =>ganttInstance = gantt}>
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
mode: 'Row',
type: 'Multiple'
};
let ganttInstance :any;
var rowIndexes =[];
ganttInstance.treeGrid.grid.dataSource.forEach((data,index)=>{
if (data.TaskID === 3 || data.TaskID === 4){
rowIndexes.push(index);
}
});
ganttInstance.selectRows(rowIndexes);

}
selectionSettings={settings} dataBound={dataBound} height = '450px'
ref={gantt =>ganttInstance = gantt}>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Touch interaction
When you tap gantt row, tapped row will be selected.
Single selection : To select a single row or cell, perform single tap on it.
Multiple selection : To perform multiple selection, tap on the multiple selection popup, and then tap the
desired rows or cells.

Gantt Rows in React Gantt component
See Also
• Touch interaction
Rows in React Gantt component

Row represents a task information from the data source, and it is possible to perform the following
actions in Gantt rows.
Row height
It is possible to change the height of the row in Gantt by setting row height in pixels to the rowHeight
property. The following code example explains how to change the row height in Gantt at load time.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'

};
rowHeight={60} height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
rowHeight={60} height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;

}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Expand/Collapse Row
In Gantt parent tasks are expanded/collapsed by using expand/collapse icons, expand all/collapse all
toolbar items and by using public methods. By default all tasks in Gantt was rendered in expanded state
but we can change this status in Gantt.
Collapse all tasks at Gantt load
All tasks available in Gantt was rendered in collapsed state by setting collapseAllParentTasks property as
true. The following code example shows how to use this property.
INDEX.JSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
collapseAllParentTasks={true} height = '450px'>
</GanttComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};


collapseAllParentTasks={true} height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Define expand/collapse status of tasks

In Gantt, we can render some tasks in collapsed state and some tasks in expanded state, this can done
by defining expand status of the task in data source. This value was mapped to Gantt component by
using expandState property. The following code example shows how to use this property.
INDEX.JSX
let data = [
{
TaskID: 1,


isExpand:true,
subtasks: [
]
},
{
TaskID: 5,
isExpand:false,
subtasks: [
]
},
];

function App (){

id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
height = '450px'>
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,


isExpand:true,
subtasks: [
]
},
{
TaskID: 5,
isExpand:false,
subtasks: [
]
},
];
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>


<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Customize expand/collapse action

On expand action expanding and expanded event will be triggered with current expanding row’s
information. Similarly on collapse action collapsing and collapsed event will be triggered. Using this
events and it’s arguments we can customize the expand/collapse action. The following code example
shows how to prevent the particular row from expand/collapse action using expanding and collapsing
event.
INDEX.JSX
import { GanttComponent, ColumnsDirective, ColumnDirective} from
function App (){
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function collapsing(args) {
if (args.data.TaskID==1){
args.cancel=true;
}}

function expanding(args) {
args.cancel=true;
}
}
collapsing={collapsing} expanding={expanding} height = '450px'>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, ColumnsDirective, ColumnDirective} from
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function collapsing(args: any) {
args.cancel=true;
}}
function expanding(args: any) {
args.cancel=true;
}
}
collapsing={collapsing} expanding={expanding} height = '450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Customize rows and cells

While rendering the TreeGrid part in Gantt, the rowDataBound and queryCellInfo events trigger for
every row and cell. Using these events, you can customize the rows and cells. The following code
example shows how to customize the cell and row elements using these events.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [


Date('04/04/2019'), Duration: 3 , Progress: 50 }
]
},
];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex: 5
};
function customizeCell(args) {
if (args.column.field == "Progress") {
if (args.data.Progress < 60)
args.cell.style.backgroundColor="lightgreen"
else
args.cell.style.backgroundColor="yellow"
}
};
function rowDataBound(args) {
if(args.data.TaskID==4)
args.row.style.backgroundColor="red"
}
splitterSettings={splitterSettings} queryCellInfo={customizeCell}
rowDataBound={rowDataBound}
height = '450px'>
</GanttComponent>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [


]
},
{
TaskID: 5,
subtasks: [
Date('04/04/2019'), Duration: 3 , Progress: 50 }
]
},
];

function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
columnIndex: 5
};
function customizeCell(args: any) {
if (args.column.field == "Progress") {
if (args.data.Progress < 60)
args.cell.style.backgroundColor="lightgreen"
else
args.cell.style.backgroundColor="yellow"
}
};
function rowDataBound(args: any) {
if(args.data.TaskID==4)
args.row.style.backgroundColor="red"
}
splitterSettings={splitterSettings} queryCellInfo={customizeCell}
rowDataBound={rowDataBound}
height = '450px'>
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Styling alternate rows

You can change the background colour of alternative rows in Gantt chart, by overriding the class as
shown below.
`css
.e-altrow, tr.e-chart-row:nth-child(even) {
background-color: #f2f2f2;
}
`
INDEX.JSX
let data = [

{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
height='450px'>
</GanttComponent>
};
INDEX.TSX
let data = [
{
TaskID: 1,
subtasks: [


]
},
{
TaskID: 5,
subtasks: [
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
height='450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-altrow, tr.e-chart-row:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Row spanning
Gantt chart has an option to span row cells. You can achieve this using rowSpan attribute to span cells in
the QueryCellInfo event.
In the following demo, Soil test approval cell is spanned to two rows in the TaskName column.
INDEX.JSX
let data = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,

subtasks: [
]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function queryCellInfo(args) {
if (args.data['TaskID'] == 4 && args.column.field === 'TaskName') {
args.rowSpan = 2;
}}
queryCellInfo={queryCellInfo} height='450px'>
</GanttComponent>
};
INDEX.TSX
let data = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [


]
},
];
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
function queryCellInfo(args) {
if (args.data['TaskID'] == 4 && args.column.field === 'TaskName') {
args.rowSpan = 2;
}}
queryCellInfo={queryCellInfo} height='450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;

position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Clip mode
The clip mode provides options to display its overflow cell content and it can be defined by the
columns.clipMode property.
The following are three types of clipMode:
• Clip: Truncates the cell content when it overflows its area.

• Ellipsis: Displays ellipsis when content of the cell overflows its area.
• EllipsisWithTooltip: Displays ellipsis when content of the cell overflows its area; it displays the
tooltip content when hover over ellipsis.
NOTE
By default, all the column's clipMode property is defined as EllipsisWithTooltip.
Cell tooltip
You can enable or disable the Grid cell tooltip using the columns.clipMode property.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
height = '450px'>
<ColumnsDirective>
></ColumnDirective>
clipMode='EllipsisWithTooltip' width='120'></ColumnDirective>

</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
height = '450px'>
<ColumnsDirective>
></ColumnDirective>
clipMode='EllipsisWithTooltip' width='120'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

Gantt Export
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Export
Excel export in React Gantt component
Gantt supports client-side exporting, which allows you to export its data to the Excel and CSV formats.
Use the excelExport and csvExport methods for exporting. To enable Excel export in the Gantt, set the
allowExcelExport to true.
To export data to Excel and CSV, inject the Link to the Video module in Gantt.
To get start quickly with Excel exporting and to know its functionalities, you can check on this video
INDEX.JSX
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport,
Selection } from '@syncfusion/ej2-react-gantt';
function App (){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport', 'CsvExport'];
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
ganttInstance.csvExport();

Gantt Export
}
};
return <GanttComponent id='GanttExport' dataSource={data}
taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px'
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport,
Selection } from '@syncfusion/ej2-react-gantt';
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
ganttInstance.csvExport();
}
};
return <GanttComponent id='GanttExport' dataSource={data}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px'
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

Gantt Export

<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Export
Pdf export in React Gantt component
PDF export allows exporting Gantt data to PDF document. You need to use the pdfExport method for
exporting. To enable PDF export in the Gantt, set the allowPdfExport to true.
To export data to PDF document, inject the Link to the Video module in Gantt.
To get start quickly with PDF exporting and to know its functionalities, you can check on this video
Note: Currently, we do not have support for exporting manually scheduled tasks.
INDEX.JSX
import { ClickEventArgs } from '@syncfusion/ej2-
navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection
} from '@syncfusion/ej2-react-gantt';
function App(){
let ganttChart;
id: 'TaskID',
name: 'TaskName',

Gantt Export
child: 'subtasks'
};
const toolbarOptions = ['PdfExport'];
if (args.item.text === 'Pdf export') {
ganttChart.pdfExport();
}
};
return <GanttComponent id='root' dataSource={data}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
INDEX.TSX
function App(){
let ganttChart: any;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['PdfExport'];
}
};
</GanttComponent>
};

Gantt Export
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Indicators in PDF exporting

The PDF export functionality allows users to export Gantt charts enriched with dynamic indicators and
accompanying images.
These indicators, represented by images,can be effortlessly defined using the base64 encoding value in
the data object of datasource.This data object field should be mapped to indiactor property of task
fields.
INDEX.JSX

Gantt Export

function App(){
let ganttChart;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
indicators: 'Indicators'
};
}
};
</GanttComponent>
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
indicators: 'Indicators'
};
}
};

Gantt Export

</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Exporting Gantt data as a blob object

In Gantt, you can export the Gantt chart data as a blob object, which allows you to preview or modify
the data before exporting it.

Gantt Export
To export the Gantt chart data as a blob object, follow these steps:
step 1: pdfExport fourth argument set as true.
step 2: Then , pdfExpComplete return as blob object.
INDEX.JSX
import { GanttComponent, Inject, Toolbar, PdfExport, Selection,ExcelExport }
function App () {
const excelExpComplete = (args) => {
//This event will be triggered when excel exporting.
if (args.promise) {
args.promise.then((e) => {
//In this `then` function, we can get blob data through the arguments
after promise resolved.
exportBlob(e.blobData);
});
}
};
const pdfExpComplete= (args) => {
//This event will be triggered when pdf exporting.
if (args.promise) {
args.promise.then((e) => {
});
}
};
const exportBlob = (blob) => {
let a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport','ExcelExport'];
let ganttChart;

Gantt Export
if (args.item.text === "Pdf export") {

ganttChart.pdfExport(null,null,null,true);
}
if (args.item.text === 'Excel export') {
ganttChart.excelExport(null,null,null,true);
}
};
pdfExportComplete={pdfExpComplete} excelExportComplete={excelExpComplete}
toolbarClick={toolbarClick} allowPdfExport={true} allowExcelExport={true}
height='400px' ref={gantt =>ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection,ExcelExport]}/>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Toolbar, PdfExport,
Selection,ExcelExport,ExcelExportCompleteArgs, PdfExportCompleteArgs } from
function App () {
let excelExpComplete = (args: ExcelExportCompleteArgs) => {
//This event will be triggered when excel exporting.
if (args.promise) {
args.promise.then((e: { blobData: Blob }) => {
});
}
};
let pdfExpComplete= (args: PdfExportCompleteArgs) => {
//This event will be triggered when pdf exporting.
if (args.promise) {
args.promise.then((e: { blobData: Blob }) => {
});
}
};
let exportBlob: Function = (blob: Blob) => {
let a: HTMLAnchorElement = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
let url: string = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();

Gantt Export
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport','ExcelExport'];
let ganttChart:any;
function toolbarClick(args:any) {
if (args.item.text === "Pdf export") {
ganttChart.pdfExport(null,null,null,true);
}
if (args.item.text === 'Excel export') {
ganttChart.excelExport(null,null,null,true);
}
};
taskFields={taskFields} pdfExportComplete={pdfExpComplete}
excelExportComplete={excelExpComplete} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} allowExcelExport={true}
height='400px' ref={gantt =>ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection,ExcelExport]}/>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;

Gantt Export
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Single page exporting in gantt

In Gantt, we have provided support to export the Gantt component where each rows are auto-fit to the
PDF document page width by setting isFitToWidth as true in <code>fitToWidthSettings</code> of
<code>PdfExportProperties</code>.
Also, we can customize the chart width and grid width in exported file using chartWidth and gridWidth
by defining it as percentage in string.
INDEX.JSX
import { GanttData } from './datasource';
function App(){
let ganttChart;
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks',
};
var exportProperties= {
fitToWidthSettings: {
isFitToWidth: true,
}
};
ganttChart.pdfExport(exportProperties);
}
};
return <GanttComponent id='root' dataSource={GanttData}

Gantt Export
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection,
PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App(){
id: 'TaskID',
name: 'TaskName',
endDate: 'EndDate',
child: 'subtasks',
};
let exportProperties : PdfExportProperties= {
fitToWidthSettings: {
isFitToWidth: true,
}
};
}
};
return <GanttComponent id='root' dataSource={GanttData}
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>

Gantt Export

/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Exporting with templates

Exporting with column template
The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom
text to an PDF document using pdfQueryCellInfo event.
In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image
properties in the pdfQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
INDEX.JSX
let ProjectResources = [

Gantt Export

];
let data = [
{
TaskID: 1,
TaskName: 'Product concept',
EmailId: '[email protected]',
subtasks: [
{ TaskID: 2, TaskName: 'Defining the product and its usage',
Duration: 3, Progress: 30, resources: [2], EmailId:
'[email protected]', resourcesImage:
'/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wC
EAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIio
lJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRU
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAADAAMBAQAAAAAAAAAAAAA
FBwgEBgkCA//aAAgBAQAAAAC/hQFOvYjnCinKzbmZbGH5zuQtL+rjE/fO5y7I93/rpMhES5qCgxO
TPErmqDaDCzVpNoBsPfbf/8QAGgEAAQUBAAAAAAAAAAAAAAAAAAECAwQFBv/aAAgBAhAAAAAoWZj
mNLVM6a2Pan//xAAXAQEBAQEAAAAAAAAAAAAAAAAABAUG/9oACAEDEAAAAGjNO7PFxm1FEH//xAA
3EAACAgECBAMFBgQHAAAAAAABAgMEBQAGBxESQSExMhATUVKBCBQiYWKhFiNxkTNCU2RygrH/2gA
IAQEAAT8A0chavSvWwcaFUYrJdlBMSkeYjA9Z/bW5b209pY98xvncBFf57UrKrP8ACOGL1H8gCdR
cfOB8txaopTojeU5p8o9Uq+OuVUv7XzrLE4DIYpvvNduY+Vif2I1Vyk0NiPH5eBYLD+EUqEmCc/B
SfJv0n2ZB5MjajwlZ2RCnvbkinkViJ5CMH5n/APNdNajV5L0Q14IyflREUeJ1vDP53jTu65l72QM
OMWZ4MbW/yQwBuw+Yj1HW3OAEF1lntZ50iHNRGkHiSe/MtrbEF3ghuPEWkyktvbt2daeQRx4oH8E
fkPk1PTr5CrLVtRBom5fkQR3B7EdjrD2Z1exibrdVury/mf6sLeiT+vY6wRV69rJv671mSX4n3an
oRfoo1l6pv4rKUAwQ2ak8AY+QMiFef76x2VbacmNrvjnnmjAMiGRU5OW9IB8WOtucRXk2ra3FiMK
9panISQGTpCv+ZAJ1ZvZjiJgbr28VBVimjjmj6RYVo2V/DwljQN3BI1Gysqup5hgCNZ2VcbZx2Z7
Rl683LzaORSw/syjW3HUYHFfEVkB9m7sNitqby3LVzlFmkhlkmrFVKO6MSY+nXBvN0Zq+YoLQsix
LKr9DxosBHkSCxAIXvrFTRzyDCrSjhnM6x9KgCFwT6l5dtIOlFX4Aa3uhG3bCjxYyxfU9WsEfu5v
4lvBqlhygPeGY9aH9yPZ9rHEQ0M5tvOo/4sjVnqSoP9uQQw+kuuFMAd0DW4pK5J61lkYsOf8A28D
rYaU23dFVqoohgWWdlTyDEcv7nnz9mShTIZGhiTzaNFe1Z5dlAKIPqTrK1bEU8GYx8ZezApSWIec
8BPMqP1DzXXEn7Ue2dlT2sNisLfyGZi7TxmrWT+rP+JtY7c03GVty/wAVSKcnNcjsQyJ4CCLoEaJ
EOypy1tjgruGnuypiZcpXkSWMWVevZVHeH5mTnzGt75ylwWweJkw5jmzlu5FyD94IiGm+jenWy+N
G1N60m+4CxHlo4laTGshMhZjyHQw8GBOsZTmrJNaukNftMJJyPJeyxj9KD2cReDu0OJNUnJVBDdH
+Hai/C6nW2+AWe4ZbrOTe3VvYKeKSByT0ypzIKkL31tfZ+8It62tx5a37h6+T+/0pY5FKycj0CAg
EkRmPw1ujg/n+Ke7XzuRvpTwcaJBVjRg0vuk8T/xJOtmcPtu7EpJVw9VRL0/zJ28XY+z/xAAiEQA
CAQMEAgMAAAAAAAAAAAABAgMABBEQEhNRISIFQYH/2gAIAQIBAT8AqW/hjk4y/t1ioJ0nTemtyA0
pYREOjeT3XxjFufxhcg/ut5aMw5Ez7H6Gas7ZraHa4wzHcdVYjaOjmiSTk6f/xAAiEQACAQIGAwE
AAAAAAAAAAAABAgMEEQAFEBITISJBUZH/2gAIAQMBAT8AxFltRJGsvH4H3fFTTvTPsf2LjWlBECh
p1aNk8V+YzdVUwDddrH81y6t4xxkjpSLsbdYr6hamfehuoULr91//2Q==' },
{ TaskID: 3, TaskName: 'Defining target audience', StartDate:
new Date('04/02/2019'),
Duration: 3, resources: [3], EmailId:
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAA
EBwMFCAb/2gAIAQEAAAAA39UUCnct2dVSZMV11tS5G5fmOGS73fU8SeVXNvlpWZ6WVEOtoiTVwgB
tW2poSoCztszrv//EABoBAAICAwAAAAAAAAAAAAAAAAUGAAMBAgT/2gAIAQIQAAAA1WTBChM72vC
cdKyi+f/EABkBAAIDAQAAAAAAAAAAAAAAAAAGAQMFBP/aAAgBAxAAAACWjF4L3/LTR/WMcvoP/8Q

Gantt Export
AHhAAAgMBAQEBAQEAAAAAAAAABAUCAwYBAAcIFBP/2gAIAQEAAQgA9NkSZZMdLpDUWdEkXoQvreH
KL6PcoksbBcYZYVpdSRWvb+YTsYlVpBnDIPOJCzOPgtNuibSb2HzhkuvnfDL6jW4QvhA+cdL9xmR
y7k5N8ZkKTUnOWDkMPfTuXV5uu6Fd4ku1i8006qreD+1lkIrbb/fmd1ezzr//AFe2xWkrnPs5OPE
Krz2iN6oyEy0QFzWhh0hfI921rv0iT+1UQtt/Pau5PlTed28O8zpEeIu/z9PUyvqjdTbXNgvOGvt
7WSFfW9p7SKtt1BxagJEsilSKE0GVMGDEBT1qKRVfQ4XhmDnj1lC6r+jhxXQ24moaF3DA06BJ8S7
RodKp2KBzn12lTLA7hoXFG+KTy5fM5V1NolT3QMdC4eQHVkQQL/zZu/oDm3S7/B/OM189WUrkfv/
EADMQAAIBAwIDBQYFBQAAAAAAAAECAwAEERIhMUGBBRMyUWEQFCIzYpEGI0JxsVNjc4Kh/9oACAE
BAAk/AKRCqMVkvZQTEpHERgeMj7Ve3faM5BKQazlz9EaFVA9TX4TW2USmLL41huWQBsTywa7ZmhX
O8eszRBseFo5OHSoFguH2ilQkwTnyUng30n2OyIU728kU4KxE4EYPJn/ioglrZwEhEHEjZUGPM0G
jjc7SsShC8lQKQQBXasrsMACUZ8DBl3HkRV+hhfR30Zj1LIEGNxVqUWZcSR53SRean/qmm1Xdrj8
z+rC3gk/fka8V7cSS+vdqdEa9AKUlE7RsTOv9ppgtSvFK65QGJwrfsxGKkd5TvoSJ3PXSDispokX
DEEFaZ3WC7iVC3m0e9cIy9vNji0cilh9mUVxFsgPSlJQgA+u+aiBvLfLKwkYthv44UzM07ZUM5DL
obPwHl64qUhQqgM7FiApzueJxVsYYJLoiJTzKKFZq3YyxdTqrZrS4coDzhmOtD0yRXBlKnrUg7j4
xOipmbXsAyljjAHLFMY7cOXuJp4wjkAfoCnz5mptFxeq0MMh/Qxyxb/UCpmlWys4Ldpn8UpiQKXb
1bGay0aK91c45KAUQdSc9KjL3MClJYhxngJyVH1DitSao26EEcQRyIqFJm0g6C2nlyNWJUt4zqyq
g+bVete9qTZSGxtyNbIxw2nP3LGrxb22vlU2yQ7yO7D5Wnk44MDwohr+6YST44LgYWMfSg9lx7rd
v8zI1Qzf5E8/Ub1Ms3Z1/cLPbe7sCYSI1jMY1EHTtkVaLNd6CIIflqXI21M3rxNdvQRRzPulq+sq
nKNCfBVoBoyTK27Fm4nfmfZ//xAAjEQACAQQBAwUAAAAAAAAAAAABAgMABBESEAUiURMjMWKR/9o
ACAECAQE/AGZUVnY4UDJNTdbLSN6b6R5wO3Oasr+O6ULkb44uRtbzD6GpY4cIjKdfIrouqzKoBz3
fnBAIIPwauk0Y2scezByB5rpVmbWD3FxIeY7eGJ3dEGzEknn/xAAjEQACAgEEAQUBAAAAAAAAAAA
BAgMEEQAFEBIiITFRYnGx/9oACAEDAQE/AFUsyqoySQANQbATEC695CMkdsY1eoS03IYeGeKx62I
T911VE3m6MpPwdb/E5rvMWUAdR+kngHBBGqFvNYSysFygJPtrebot2AInzEv95kszSqiO56qAAB6
Dn//Z' },
{ TaskID: 4, TaskName: 'Prepare product sketch and notes',
Duration: 2, Predecessor: '2', Progress: 30, resources: [4],
EmailId: '[email protected]', resourcesImage:
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAA
FBwQGCAMCCf/aAAgBAQAAAADfwhV0x/EZ4hW5npVo+hcTlnMn4TW6ofZUBIXDSIEnOzwAaDYEyIC
YV79vc+aEqNLsbBM//8QAGAEAAwEBAAAAAAAAAAAAAAAAAgQFAwD/2gAIAQIQAAAABNvRaHSpjAq
O9hof/8QAGQEAAgMBAAAAAAAAAAAAAAAAAgUDBAYA/9oACAEDEAAAADbLIbutRIi2OdXdagD/xAA
fEAACAwEBAQADAQAAAAAAAAAEBQIDBgEHABITFBX/2gAIAQEAAQgA+/0izrLKEuj9O81zxtwL2r3
Pze87lUFwwDEEVrlQ21sL617X47th5VaUf2TSlZ/O0Z9IT468vpqspb+dtFYNhQ3jnpLfFP6lzAo
QY4aY5acm+MyFJqOf5jlMu+12WWaxaJBjugEFv8cG+5kMlobU70irSIgntauc+rF0rHtsVpK5z9n
Z/ihVc56fmiTmueaDmJMvJkTeVxnnCKIgcJUrma0oRaHRwYYYeO3h3mdIjxF3+fp6mRlA5dMxyHy
yqbZuDVFcbTyFFuAVdpIlKz5lTBgxAU9aikV30OALtIDMbnQ9akbk12vEoL7YmE1i9xrWtZKdU6t
YkvF7IVYHcNC4o35zmhjLJmCfqbZwqBJeqGzphcDs2mzjIsTN8WJ84Ak7K2H3/8QAMxAAAgEDAgM
ECQMFAAAAAAAAAQIDAAQREjETIVEFQWGhEBQjMkJicXKBBiIzUlOCkbH/2gAIAQEACT8ApE0IxWS
9l5xKRuEHxnyrt687Wv4v5o4Q7oh8Fj0pX6PuY7HIBunjjDjqdCk12xItvOgkhZJDPbspH9D58iD
UKw3D8opUJMEx6KTs3yn0SMqlOLeyqcFYicCNT1f/AJXsZryMxkxjBSHbC/dUS3XEjDSaSoYN/kR
VndZikKSppJKMOoHcakkXseadI7mCbKhdZwZUB2K0gaKTGANwe4g9xFNqu7XHtP7sLe5J9e40My3
1zJL1IjU6EH4UUTxNFsR0KvIVxVnLPPGig5dIkzjnguQTiuxxi4bHtpAgBHzYNWcEc9rexJrt51n
DRzciCQBUgaQ20RYg55ledbRl7ebG7RyKWH+mUVv6sgPhgUoYiWO3lDclVUbiqSfrUEMlyrH4QWO
fOpFdopjmAxMMN0C489qgRtckMiRON3WQPjyonTFEqDPRRiubGWL8nVXJrS4coOsMx1ofMiow6Hc
VcvBLLMdMyAFlO/xCnLXnMLcNAMdNVScd7ePEkxULqZ+/C4A9GWjRXurnHcoBRB+Saj13MAKSxDe
eA8yo+YbrUmt2HMEEafr4ipHkljYm4Qe+veGHUVLFpZsamWpGnyWSd1HvTIobC/aDtUrTTNgJbqh
EruTyUCiGv7phJPjZcDCxj5UHok9WvH95gMxyfevXxFW4MWzNFIGR1+hwaaW2u5c8UJEBFkjGcMV
w3iKs/Ubaxt7mOX1iZZuJLOysZMpgs37eg3ocW9fOudhjGdwg7h6P/8QAIREBAAIBBAEFAAAAAAA
AAAAAAQIDAAQQETESBSJBYYH/2gAIAQIBAT8AnMhFk4a2Euph+ZXYWG2rOaX6yTxEDr5z015jMD2
m0kB5yyLXKzkAVTND4RoiHart3llNdkGE48mRhGIeMToNv//EACIRAQACAQMEAwEAAAAAAAAAAAE
CAxEAEBIEBTFhFSEiNP/aAAgBAwEBPwCuuVs4wj5dfFTBzFUPGdXUyplxdu3/ANURQyOq6xCUs5c
Ydd7hwnUyRk7R5cjj510t5OqGP2kQfSa7k2T6qyUj6MB62FETVHU3U2RsrniXh96nZOaspLlV2//
Z' }
]

Gantt Export
},
{
Date('04/02/2019'), Duration: 0, Predecessor: '3,4', resources: [5],
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAA
HCAQFBgID/9oACAEBAAAAAH+qsdiSrczqiUBMb22cXitDeKqHJh+9YFRxtGA87Oevw2Kx1qZOdFq
/gVwmsmjsTDfKu9sf/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAQFBgED/9oACAECEAAAAORaDfjmqNo
zlhsZWP/EABkBAAIDAQAAAAAAAAAAAAAAAAAGAwQFAf/aAAgBAxAAAADu/l0535dXB6VKBDMf/8Q
ANRAAAgIBAgQDBgUCBwAAAAAAAQIDBAUABhESIUEHIjEQEzJhgZEIFFJicRYjQkNRU6Gx0f/aAAg
BAQABPwDRyFq9K9bBxoVRisl2UExKR6iMD4z/AMa3ZuPaO0ljG6stav3JFLpVVizn5iKMqqL821S
8WPC675v6duQR8SDK9VOA+fkYnWJfE5eimT2jnZFhPoFcywhv0vHJ1U/Y6qZSeGePHZeAQWHPCKV
OsE5/0Un0b9p9mRle9ZTDV5GSMoJLkingViJ4CNT+p/8ArWSsLicRZkpQKErQkRRjopb0UfxqvtK
DJy5DI5ZFnuW3LyyP1PA/4RrM7OxVPnaJCir5Qo462Bck2luuCerZc46+Vgnic9FPz/j1GrVWtfr
SVbKB42HXsQexB7Eaw9mdXsYm63Nbq8P7n+7C3wSfz2OsEVkr2snJ1e9ZklHc+7Q8kY+gGt3OYMR
zMQqvNGp+p1l/ELD7fdaj15ZmLBCyPGoB+QZgW+g1u/etWq8cEVI2PeRrM3K4HlZebsCTrbmWpZq
JrEdaeKeOVeEfu3kC9QOYlAeH11i7iXMXRlSVZCY1DFTxBZeh+x1nZVxtnHZntGXrzcPVo5FLD7M
o1txlGCxRHxCsgOt2442sM3lDGJxMVb0IH/gPHVuth1s1oI4meRuMrhVBVFXuen21ubKYo7gi9yv
vVSFIDGkbIyIo9OLDh/A1tCCNoMpdqM0R/J2EjUgcyMqgq3A62nhzg8BjMbJIXkih4yv+qWQl3I+
XMTw1vdCNu2FHVjLF9TzawZ/Lm/iWPBqdhygPeGY86EfcjUsayK6OoZWUqQfQg6yuCWPMGvYkmik
qWRMhjdk94i9VDcpHMpHqNbrxUty4VmhgEDyBnMMUkbso7czSPw9O2vDivEk/AgK5aOMD08yedvt
zBfZkoUyGRoYk8WjRXtWeHZQCiD6k6ytWxFPBmMfGXswKUliHrPATxKj9w9V1mfETY23KkV3Oblp
1VdOdYGYtYI9OkKcX1Z3zQ8Q6ljO7TpzitjbUlMTyoEaduRX4qvZRx6cdbq3Nu5bDKFPkPUiuUCB
evEknhrJ+J+6bNqEUMrNDFWsCdJUYq7zIxYScfkTxGvCn8S2e3ZNits39ny5LKjyWr9SURx8naVo
yvRtYynNWSa1dIa/aYSTkei9ljH7UHs8QPCTa+/4C1+uIbw+CzF5XGsNsbdXhdtnI4PEClfju5SS
y1qySAsRijjCKilSX8vxa8RU35ubBxbdwWBrQGy5F65+ZQNLGT0iHE8VX9etl/hN3LlpIbe5MrWq
0+6Vn53OtheGe1vDvHpSwNBEk/wAyc9Xdu5JPs//EACMRAAIBAwMEAwAAAAAAAAAAAAECAwAREgQ
QMQUTIUEiM3L/2gAIAQIBAT8AJABJ4FSdWChmwOPANaPVJq4s15HO0/0y/k1IUKhcSUHqulKEzwS
ysLnzvPBJFM0CDk3Xx6NaOJooQrizHfJTAD2o8wbCS3ytv//EACMRAAEDAwQCAwAAAAAAAAAAAAE
CAxEABBIFECExFCJBUXH/2gAIAQMBAT8AAJIA7JimNELsAujOORV7Zrs3i0v9B2tY8liTHuO6t7V
cyk4qUJyNa8BnC3cnEKCRA7ESd9OvG3rYXD6uQnE8/IrUXkv3K1oVkn73BcDpSHlhCuSifUnf/9k
='
},
{
TaskID: 6,
TaskName: 'Market research',
subtasks: [
{
TaskID: 7,
TaskName: 'Demand analysis',
subtasks: [
{ TaskID: 8, TaskName: 'Customer strength', StartDate:
new Date('04/04/2019'),
Duration: 4, Predecessor: '5', Progress: 30,
resources: [7], EmailId: '[email protected]', resourcesImage:

Gantt Export
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAdAAACAgIDAQAAAAAAAAAAAAA
EBwUIAwYAAQkC/9oACAEBAAAAAL/RKXSL6ch0UrvNI3nqPuPwl9aaldWm688LUdtYd922TOpawDH
viJKrZ2W4J00JAp+yjGkf/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBBAUCBv/aAAgBAhAAAAAR2yP
O2tkxrV8S+P/EABkBAAIDAQAAAAAAAAAAAAAAAAAFAQQGA//aAAgBAxAAAACb9ev01i5AbFIpGC8
//8QANBAAAgIBAgMFBgUEAwAAAAAAAQIDBAUABgcREhMhIjFBFDJRYnKBCBAVQqFTYXGRI3Ox/9o
ACAEBAAE/ANHIW70skGFRCqErJdlHOFCPMRj95/jXEHi/w32HA4zmbl3BmA5Q42pYDujjz60jISI
D5tVvxT7auTOIOFkIh9Ge6Fcj7Ra4ecUtmb96Ku28xaw+Y6S36bccOj/QGJDj6DqrlJobEePy8Cw
WH7opUJME5+Ck+TfKfyyDyZG1HhKzsiFO1uSKeRWInkIwfRn/APNceN0vsvhhlxiXNa1cVMZS7Lw
lDP3Mw/uqAnUXC3dt5Ip6dSSwHTqPQpY6j2LuvFiT23b2TLwqSI46jv8AfuGrWA3ttaLG7nt46xT
AkVon6ws0bDxo3h5sp/zrhruJeJfDbb2dycQ7W5Ay2QP68DmIuvwJK8xrD2Z1exibrdVury/5P6s
Le5J/n0OsB0tWs5Jh47tmSQep7NT0IPsBr8RWIN/bG1JSoMdbdGMef/rdyh1w8kQ0olji7h5nUzy
PA6dIOuL2MsWtp5/2eEuUgEpUeYER6iRr8LmThv8ACbFQiXvp2bUJT4EuX1nZVxtnHZn0jL15uXm
0cilh/plGtuOowOK+IrIDrfmHOc2jk6ar41aGwn1VpVmH8rrAVt9YaGfLpmIVhWszmvKhkhceagE
KvTrN4e/uGtUavlLtVexR2SvMU5u68+Z5FQwHwOptvLj6EyT2J7HbR9EomIIAI5eQ7tcFtvRbY2Z
QxUUaDs1DSunk8rgF21vdCNu2FHexli+56tYI+zm/iW7mqWHKA+sMx60P8kamj7WGaMnkHUr/ALG
s5kbuJ2xkaMkDA17TVJH8kVonAKuf2gj11j8hkMpiqlubHSU4Y4lQ8uouXA5c1Ze4aFu1Yov7eJE
kUMCsg6SeXkdbf6IsFiliUL1VYj3D4oNZKFMhkaGJPNo0V7Vnl6KAUQfcnWVq2Ip4Mxj4y9mBSks
Q854CeZUfMPNdVrte/VSzVk643+xBHmCPQjXGixgsPuPEVhN2VjORTpbjA8DCLpEc31gnlra/tQq
169mSvJFCp7Hkh6vCeRKk+Q1JZTK5T9KpsJrTP1OqnmEjT1b4AE6xOQgweMhx83azyIAkCjxPMxP
PpX7n7DWMpzVkmtXSGv2mEk5HkvosY+VB+VvDv28l7FWjUuP7/hDRS/Wnx/uNcSeHlzcYpWc7EDL
UNns545AwmE/SSPRkKlfDqngt/i3Xw0WYWtiWcq11wkk0UfyovIsx1szaX6NjWqYHHgCWTnNkrso
eawR++QLzJPwXuUaxuGgx7e1TObF4ry7Vx7oPogHuj8v/xAAjEQACAgEDAwUAAAAAAAAAAAABAwI
RABAhMQQFYRIyQVFi/9oACAECAQE/AOMHUpn7WA4tsWi4SBHjQ7g4ulxkv1A2Tx5zthK5MT+r1mm
KmygRyLGdCqQLZgGtt9Wwi1sJz5oDL+BsPoaf/8QAIhEAAgEDAwUBAAAAAAAAAAAAAQMCAAQREBI
hBRMiMWFi/9oACAEDAQE/AIgyIiPZo2D1kdxUqeiSCBIEfDok7WrP6FXEJMYGY2j7XVYhioOzyAI
6puZXNpBwwDE811RsT2oGXkSTt+a2l25FuxK8beSMjkZo5lIzkSZH2T70/9k=' },
]
}
]
}
];

import { GanttComponent, ColumnsDirective, ColumnDirective ,Inject,
Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs} from
function App (){

id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
let ganttChart;
let exportProperties = {
enableFooter: false
};
}

Gantt Export
};
function pdfQueryCellInfo(args) {
if (args.column.headerText === 'Resources') {
{
args.image = { height:40,width:40, base64:
(args).data.taskData.resourcesImage };
}
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + (args).data.taskData.EmailId,
displayText: (args).data.taskData.EmailId
};
}
}
columnIndex: 7
};
id: 'resourceId',
};
function ganttTemplate(props) {
var src = props.TaskID + '.png';
return (<div className='image' >
<img src={src} style={{height:'42px'}}/>
</div>);
};
const template = ganttTemplate;
return <GanttComponent dataSource={data} rowHeight={60}
taskFields={taskFields} toolbar={toolbarOptions} pdfQueryCellInfo =
{pdfQueryCellInfo} toolbarClick={toolbarClick} allowPdfExport={true}
ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings}
resourceFields={resourceFields} resources={ProjectResources} height =
'450px'>
<ColumnsDirective>
<ColumnDirective field='resources'
headerText='Resources' width='250' template={template}
textAlign='Center'></ColumnDirective>
<ColumnDirective field='EmailId' headerText='Email ID'
width='250' ></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection]}/>
</GanttComponent>
};
INDEX.TSX
let ProjectResources: Object[] = [

Gantt Export

];
let data: Object[] =[

{
TaskID: 1,
TaskName: 'Product concept',
subtasks: [
{ TaskID: 2, TaskName: 'Defining the product and its usage',
Duration: 3, Progress: 30, resources: [2], EmailId:
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAADAAMBAQAAAAAAAAAAAAA
FBwgEBgkCA//aAAgBAQAAAAC/hQFOvYjnCinKzbmZbGH5zuQtL+rjE/fO5y7I93/rpMhES5qCgxO
TPErmqDaDCzVpNoBsPfbf/8QAGgEAAQUBAAAAAAAAAAAAAAAAAAECAwQFBv/aAAgBAhAAAAAoWZj
mNLVM6a2Pan//xAAXAQEBAQEAAAAAAAAAAAAAAAAABAUG/9oACAEDEAAAAGjNO7PFxm1FEH//xAA
3EAACAgECBAMFBgQHAAAAAAABAgMEBQAGBxESQSExMhATUVKBCBQiYWKhFiNxkTNCU2RygrH/2gA
IAQEAAT8A0chavSvWwcaFUYrJdlBMSkeYjA9Z/bW5b209pY98xvncBFf57UrKrP8ACOGL1H8gCdR
cfOB8txaopTojeU5p8o9Uq+OuVUv7XzrLE4DIYpvvNduY+Vif2I1Vyk0NiPH5eBYLD+EUqEmCc/B
SfJv0n2ZB5MjajwlZ2RCnvbkinkViJ5CMH5n/APNdNajV5L0Q14IyflREUeJ1vDP53jTu65l72QM
OMWZ4MbW/yQwBuw+Yj1HW3OAEF1lntZ50iHNRGkHiSe/MtrbEF3ghuPEWkyktvbt2daeQRx4oH8E
fkPk1PTr5CrLVtRBom5fkQR3B7EdjrD2Z1exibrdVury/mf6sLeiT+vY6wRV69rJv671mSX4n3an
oRfoo1l6pv4rKUAwQ2ak8AY+QMiFef76x2VbacmNrvjnnmjAMiGRU5OW9IB8WOtucRXk2ra3FiMK
9panISQGTpCv+ZAJ1ZvZjiJgbr28VBVimjjmj6RYVo2V/DwljQN3BI1Gysqup5hgCNZ2VcbZx2Z7
Rl683LzaORSw/syjW3HUYHFfEVkB9m7sNitqby3LVzlFmkhlkmrFVKO6MSY+nXBvN0Zq+YoLQsix
LKr9DxosBHkSCxAIXvrFTRzyDCrSjhnM6x9KgCFwT6l5dtIOlFX4Aa3uhG3bCjxYyxfU9WsEfu5v
4lvBqlhygPeGY9aH9yPZ9rHEQ0M5tvOo/4sjVnqSoP9uQQw+kuuFMAd0DW4pK5J61lkYsOf8A28D
rYaU23dFVqoohgWWdlTyDEcv7nnz9mShTIZGhiTzaNFe1Z5dlAKIPqTrK1bEU8GYx8ZezApSWIec
8BPMqP1DzXXEn7Ue2dlT2sNisLfyGZi7TxmrWT+rP+JtY7c03GVty/wAVSKcnNcjsQyJ4CCLoEaJ
EOypy1tjgruGnuypiZcpXkSWMWVevZVHeH5mTnzGt75ylwWweJkw5jmzlu5FyD94IiGm+jenWy+N
G1N60m+4CxHlo4laTGshMhZjyHQw8GBOsZTmrJNaukNftMJJyPJeyxj9KD2cReDu0OJNUnJVBDdH
+Hai/C6nW2+AWe4ZbrOTe3VvYKeKSByT0ypzIKkL31tfZ+8It62tx5a37h6+T+/0pY5FKycj0CAg
EkRmPw1ujg/n+Ke7XzuRvpTwcaJBVjRg0vuk8T/xJOtmcPtu7EpJVw9VRL0/zJ28XY+z/xAAiEQA
CAQMEAgMAAAAAAAAAAAABAgMABBEQEhNRISIFQYH/2gAIAQIBAT8AqW/hjk4y/t1ioJ0nTemtyA0
pYREOjeT3XxjFufxhcg/ut5aMw5Ez7H6Gas7ZraHa4wzHcdVYjaOjmiSTk6f/xAAiEQACAQIGAwE
AAAAAAAAAAAABAgMEEQAFEBITISJBUZH/2gAIAQMBAT8AxFltRJGsvH4H3fFTTvTPsf2LjWlBECh
p1aNk8V+YzdVUwDddrH81y6t4xxkjpSLsbdYr6hamfehuoULr91//2Q==' },
{ TaskID: 3, TaskName: 'Defining target audience', StartDate:
new Date('04/02/2019'),
Duration: 3, resources: [3], EmailId:

Gantt Export
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAA
EBwMFCAb/2gAIAQEAAAAA39UUCnct2dVSZMV11tS5G5fmOGS73fU8SeVXNvlpWZ6WVEOtoiTVwgB
tW2poSoCztszrv//EABoBAAICAwAAAAAAAAAAAAAAAAUGAAMBAgT/2gAIAQIQAAAA1WTBChM72vC
cdKyi+f/EABkBAAIDAQAAAAAAAAAAAAAAAAAGAQMFBP/aAAgBAxAAAACWjF4L3/LTR/WMcvoP/8Q
AHhAAAgMBAQEBAQEAAAAAAAAABAUCAwYBAAcIFBP/2gAIAQEAAQgA9NkSZZMdLpDUWdEkXoQvreH
KL6PcoksbBcYZYVpdSRWvb+YTsYlVpBnDIPOJCzOPgtNuibSb2HzhkuvnfDL6jW4QvhA+cdL9xmR
y7k5N8ZkKTUnOWDkMPfTuXV5uu6Fd4ku1i8006qreD+1lkIrbb/fmd1ezzr//AFe2xWkrnPs5OPE
Krz2iN6oyEy0QFzWhh0hfI921rv0iT+1UQtt/Pau5PlTed28O8zpEeIu/z9PUyvqjdTbXNgvOGvt
7WSFfW9p7SKtt1BxagJEsilSKE0GVMGDEBT1qKRVfQ4XhmDnj1lC6r+jhxXQ24moaF3DA06BJ8S7
RodKp2KBzn12lTLA7hoXFG+KTy5fM5V1NolT3QMdC4eQHVkQQL/zZu/oDm3S7/B/OM189WUrkfv/
EADMQAAIBAwIDBQYFBQAAAAAAAAECAwAEERIhMUGBBRMyUWEQFCIzYpEGI0JxsVNjc4Kh/9oACAE
BAAk/AKRCqMVkvZQTEpHERgeMj7Ve3faM5BKQazlz9EaFVA9TX4TW2USmLL41huWQBsTywa7ZmhX
O8eszRBseFo5OHSoFguH2ilQkwTnyUng30n2OyIU728kU4KxE4EYPJn/ioglrZwEhEHEjZUGPM0G
jjc7SsShC8lQKQQBXasrsMACUZ8DBl3HkRV+hhfR30Zj1LIEGNxVqUWZcSR53SRean/qmm1Xdrj8
z+rC3gk/fka8V7cSS+vdqdEa9AKUlE7RsTOv9ppgtSvFK65QGJwrfsxGKkd5TvoSJ3PXSDispokX
DEEFaZ3WC7iVC3m0e9cIy9vNji0cilh9mUVxFsgPSlJQgA+u+aiBvLfLKwkYthv44UzM07ZUM5DL
obPwHl64qUhQqgM7FiApzueJxVsYYJLoiJTzKKFZq3YyxdTqrZrS4coDzhmOtD0yRXBlKnrUg7j4
xOipmbXsAyljjAHLFMY7cOXuJp4wjkAfoCnz5mptFxeq0MMh/Qxyxb/UCpmlWys4Ldpn8UpiQKXb
1bGay0aK91c45KAUQdSc9KjL3MClJYhxngJyVH1DitSao26EEcQRyIqFJm0g6C2nlyNWJUt4zqyq
g+bVete9qTZSGxtyNbIxw2nP3LGrxb22vlU2yQ7yO7D5Wnk44MDwohr+6YST44LgYWMfSg9lx7rd
v8zI1Qzf5E8/Ub1Ms3Z1/cLPbe7sCYSI1jMY1EHTtkVaLNd6CIIflqXI21M3rxNdvQRRzPulq+sq
nKNCfBVoBoyTK27Fm4nfmfZ//xAAjEQACAQQBAwUAAAAAAAAAAAABAgMABBESEAUiURMjMWKR/9o
ACAECAQE/AGZUVnY4UDJNTdbLSN6b6R5wO3Oasr+O6ULkb44uRtbzD6GpY4cIjKdfIrouqzKoBz3
fnBAIIPwauk0Y2scezByB5rpVmbWD3FxIeY7eGJ3dEGzEknn/xAAjEQACAgEEAQUBAAAAAAAAAAA
BAgMEEQAFEBIiITFRYnGx/9oACAEDAQE/AFUsyqoySQANQbATEC695CMkdsY1eoS03IYeGeKx62I
T911VE3m6MpPwdb/E5rvMWUAdR+kngHBBGqFvNYSysFygJPtrebot2AInzEv95kszSqiO56qAAB6
Dn//Z' },
{ TaskID: 4, TaskName: 'Prepare product sketch and notes',
Duration: 2, Predecessor: '2', Progress: 30, resources: [4],
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAA
FBwQGCAMCCf/aAAgBAQAAAADfwhV0x/EZ4hW5npVo+hcTlnMn4TW6ofZUBIXDSIEnOzwAaDYEyIC
YV79vc+aEqNLsbBM//8QAGAEAAwEBAAAAAAAAAAAAAAAAAgQFAwD/2gAIAQIQAAAABNvRaHSpjAq
O9hof/8QAGQEAAgMBAAAAAAAAAAAAAAAAAgUDBAYA/9oACAEDEAAAADbLIbutRIi2OdXdagD/xAA
fEAACAwEBAQADAQAAAAAAAAAEBQIDBgEHABITFBX/2gAIAQEAAQgA+/0izrLKEuj9O81zxtwL2r3
Pze87lUFwwDEEVrlQ21sL617X47th5VaUf2TSlZ/O0Z9IT468vpqspb+dtFYNhQ3jnpLfFP6lzAo
QY4aY5acm+MyFJqOf5jlMu+12WWaxaJBjugEFv8cG+5kMlobU70irSIgntauc+rF0rHtsVpK5z9n
Z/ihVc56fmiTmueaDmJMvJkTeVxnnCKIgcJUrma0oRaHRwYYYeO3h3mdIjxF3+fp6mRlA5dMxyHy
yqbZuDVFcbTyFFuAVdpIlKz5lTBgxAU9aikV30OALtIDMbnQ9akbk12vEoL7YmE1i9xrWtZKdU6t
YkvF7IVYHcNC4o35zmhjLJmCfqbZwqBJeqGzphcDs2mzjIsTN8WJ84Ak7K2H3/8QAMxAAAgEDAgM
ECQMFAAAAAAAAAQIDAAQREjETIVEFQWGhEBQjMkJicXKBBiIzUlOCkbH/2gAIAQEACT8ApE0IxWS
9l5xKRuEHxnyrt687Wv4v5o4Q7oh8Fj0pX6PuY7HIBunjjDjqdCk12xItvOgkhZJDPbspH9D58iD
UKw3D8opUJMEx6KTs3yn0SMqlOLeyqcFYicCNT1f/AJXsZryMxkxjBSHbC/dUS3XEjDSaSoYN/kR
VndZikKSppJKMOoHcakkXseadI7mCbKhdZwZUB2K0gaKTGANwe4g9xFNqu7XHtP7sLe5J9e40My3
1zJL1IjU6EH4UUTxNFsR0KvIVxVnLPPGig5dIkzjnguQTiuxxi4bHtpAgBHzYNWcEc9rexJrt51n
DRzciCQBUgaQ20RYg55ledbRl7ebG7RyKWH+mUVv6sgPhgUoYiWO3lDclVUbiqSfrUEMlyrH4QWO
fOpFdopjmAxMMN0C489qgRtckMiRON3WQPjyonTFEqDPRRiubGWL8nVXJrS4coOsMx1ofMiow6Hc
VcvBLLMdMyAFlO/xCnLXnMLcNAMdNVScd7ePEkxULqZ+/C4A9GWjRXurnHcoBRB+Saj13MAKSxDe
eA8yo+YbrUmt2HMEEafr4ipHkljYm4Qe+veGHUVLFpZsamWpGnyWSd1HvTIobC/aDtUrTTNgJbqh
EruTyUCiGv7phJPjZcDCxj5UHok9WvH95gMxyfevXxFW4MWzNFIGR1+hwaaW2u5c8UJEBFkjGcMV
w3iKs/Ubaxt7mOX1iZZuJLOysZMpgs37eg3ocW9fOudhjGdwg7h6P/8QAIREBAAIBBAEFAAAAAAA
AAAAAAQIDAAQQETESBSJBYYH/2gAIAQIBAT8AnMhFk4a2Euph+ZXYWG2rOaX6yTxEDr5z015jMD2

Gantt Export
m0kB5yyLXKzkAVTND4RoiHart3llNdkGE48mRhGIeMToNv//EACIRAQACAQMEAwEAAAAAAAAAAAE
CAxEAEBIEBTFhFSEiNP/aAAgBAwEBPwCuuVs4wj5dfFTBzFUPGdXUyplxdu3/ANURQyOq6xCUs5c
Ydd7hwnUyRk7R5cjj510t5OqGP2kQfSa7k2T6qyUj6MB62FETVHU3U2RsrniXh96nZOaspLlV2//
Z' }
]
},
{
Date('04/02/2019'), Duration: 0, Predecessor: '3,4', resources: [5],
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAA
HCAQFBgID/9oACAEBAAAAAH+qsdiSrczqiUBMb22cXitDeKqHJh+9YFRxtGA87Oevw2Kx1qZOdFq
/gVwmsmjsTDfKu9sf/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAQFBgED/9oACAECEAAAAORaDfjmqNo
zlhsZWP/EABkBAAIDAQAAAAAAAAAAAAAAAAAGAwQFAf/aAAgBAxAAAADu/l0535dXB6VKBDMf/8Q
ANRAAAgIBAgQDBgUCBwAAAAAAAQIDBAUABhESIUEHIjEQEzJhgZEIFFJicRYjQkNRU6Gx0f/aAAg
BAQABPwDRyFq9K9bBxoVRisl2UExKR6iMD4z/AMa3ZuPaO0ljG6stav3JFLpVVizn5iKMqqL821S
8WPC675v6duQR8SDK9VOA+fkYnWJfE5eimT2jnZFhPoFcywhv0vHJ1U/Y6qZSeGePHZeAQWHPCKV
OsE5/0Un0b9p9mRle9ZTDV5GSMoJLkingViJ4CNT+p/8ArWSsLicRZkpQKErQkRRjopb0UfxqvtK
DJy5DI5ZFnuW3LyyP1PA/4RrM7OxVPnaJCir5Qo462Bck2luuCerZc46+Vgnic9FPz/j1GrVWtfr
SVbKB42HXsQexB7Eaw9mdXsYm63Nbq8P7n+7C3wSfz2OsEVkr2snJ1e9ZklHc+7Q8kY+gGt3OYMR
zMQqvNGp+p1l/ELD7fdaj15ZmLBCyPGoB+QZgW+g1u/etWq8cEVI2PeRrM3K4HlZebsCTrbmWpZq
JrEdaeKeOVeEfu3kC9QOYlAeH11i7iXMXRlSVZCY1DFTxBZeh+x1nZVxtnHZntGXrzcPVo5FLD7M
o1txlGCxRHxCsgOt2442sM3lDGJxMVb0IH/gPHVuth1s1oI4meRuMrhVBVFXuen21ubKYo7gi9yv
vVSFIDGkbIyIo9OLDh/A1tCCNoMpdqM0R/J2EjUgcyMqgq3A62nhzg8BjMbJIXkih4yv+qWQl3I+
XMTw1vdCNu2FHVjLF9TzawZ/Lm/iWPBqdhygPeGY86EfcjUsayK6OoZWUqQfQg6yuCWPMGvYkmik
qWRMhjdk94i9VDcpHMpHqNbrxUty4VmhgEDyBnMMUkbso7czSPw9O2vDivEk/AgK5aOMD08yedvt
zBfZkoUyGRoYk8WjRXtWeHZQCiD6k6ytWxFPBmMfGXswKUliHrPATxKj9w9V1mfETY23KkV3Oblp
1VdOdYGYtYI9OkKcX1Z3zQ8Q6ljO7TpzitjbUlMTyoEaduRX4qvZRx6cdbq3Nu5bDKFPkPUiuUCB
evEknhrJ+J+6bNqEUMrNDFWsCdJUYq7zIxYScfkTxGvCn8S2e3ZNits39ny5LKjyWr9SURx8naVo
yvRtYynNWSa1dIa/aYSTkei9ljH7UHs8QPCTa+/4C1+uIbw+CzF5XGsNsbdXhdtnI4PEClfju5SS
y1qySAsRijjCKilSX8vxa8RU35ubBxbdwWBrQGy5F65+ZQNLGT0iHE8VX9etl/hN3LlpIbe5MrWq
0+6Vn53OtheGe1vDvHpSwNBEk/wAyc9Xdu5JPs//EACMRAAIBAwMEAwAAAAAAAAAAAAECAwAREgQ
QMQUTIUEiM3L/2gAIAQIBAT8AJABJ4FSdWChmwOPANaPVJq4s15HO0/0y/k1IUKhcSUHqulKEzwS
ysLnzvPBJFM0CDk3Xx6NaOJooQrizHfJTAD2o8wbCS3ytv//EACMRAAEDAwQCAwAAAAAAAAAAAAE
CAxEABBIFECExFCJBUXH/2gAIAQMBAT8AAJIA7JimNELsAujOORV7Zrs3i0v9B2tY8liTHuO6t7V
cyk4qUJyNa8BnC3cnEKCRA7ESd9OvG3rYXD6uQnE8/IrUXkv3K1oVkn73BcDpSHlhCuSifUnf/9k
='
},
{
TaskID: 6,
TaskName: 'Market research',
subtasks: [
{
TaskID: 7,
TaskName: 'Demand analysis',
subtasks: [
{ TaskID: 8, TaskName: 'Customer strength', StartDate:
new Date('04/04/2019'),

Gantt Export
Duration: 4, Predecessor: '5', Progress: 30,

resources: [7], EmailId: '[email protected]', resourcesImage:
XHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAdAAACAgIDAQAAAAAAAAAAAAA
EBwUIAwYAAQkC/9oACAEBAAAAAL/RKXSL6ch0UrvNI3nqPuPwl9aaldWm688LUdtYd922TOpawDH
viJKrZ2W4J00JAp+yjGkf/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBBAUCBv/aAAgBAhAAAAAR2yP
O2tkxrV8S+P/EABkBAAIDAQAAAAAAAAAAAAAAAAAFAQQGA//aAAgBAxAAAACb9ev01i5AbFIpGC8
//8QANBAAAgIBAgMFBgUEAwAAAAAAAQIDBAUABgcREhMhIjFBFDJRYnKBCBAVQqFTYXGRI3Ox/9o
ACAEBAAE/ANHIW70skGFRCqErJdlHOFCPMRj95/jXEHi/w32HA4zmbl3BmA5Q42pYDujjz60jISI
D5tVvxT7auTOIOFkIh9Ge6Fcj7Ra4ecUtmb96Ku28xaw+Y6S36bccOj/QGJDj6DqrlJobEePy8Cw
WH7opUJME5+Ck+TfKfyyDyZG1HhKzsiFO1uSKeRWInkIwfRn/APNceN0vsvhhlxiXNa1cVMZS7Lw
lDP3Mw/uqAnUXC3dt5Ip6dSSwHTqPQpY6j2LuvFiT23b2TLwqSI46jv8AfuGrWA3ttaLG7nt46xT
AkVon6ws0bDxo3h5sp/zrhruJeJfDbb2dycQ7W5Ay2QP68DmIuvwJK8xrD2Z1exibrdVury/5P6s
Le5J/n0OsB0tWs5Jh47tmSQep7NT0IPsBr8RWIN/bG1JSoMdbdGMef/rdyh1w8kQ0olji7h5nUzy
PA6dIOuL2MsWtp5/2eEuUgEpUeYER6iRr8LmThv8ACbFQiXvp2bUJT4EuX1nZVxtnHZn0jL15uXm
0cilh/plGtuOowOK+IrIDrfmHOc2jk6ar41aGwn1VpVmH8rrAVt9YaGfLpmIVhWszmvKhkhceagE
KvTrN4e/uGtUavlLtVexR2SvMU5u68+Z5FQwHwOptvLj6EyT2J7HbR9EomIIAI5eQ7tcFtvRbY2Z
QxUUaDs1DSunk8rgF21vdCNu2FHexli+56tYI+zm/iW7mqWHKA+sMx60P8kamj7WGaMnkHUr/ALG
s5kbuJ2xkaMkDA17TVJH8kVonAKuf2gj11j8hkMpiqlubHSU4Y4lQ8uouXA5c1Ze4aFu1Yov7eJE
kUMCsg6SeXkdbf6IsFiliUL1VYj3D4oNZKFMhkaGJPNo0V7Vnl6KAUQfcnWVq2Ip4Mxj4y9mBSks
Q854CeZUfMPNdVrte/VSzVk643+xBHmCPQjXGixgsPuPEVhN2VjORTpbjA8DCLpEc31gnlra/tQq
169mSvJFCp7Hkh6vCeRKk+Q1JZTK5T9KpsJrTP1OqnmEjT1b4AE6xOQgweMhx83azyIAkCjxPMxP
PpX7n7DWMpzVkmtXSGv2mEk5HkvosY+VB+VvDv28l7FWjUuP7/hDRS/Wnx/uNcSeHlzcYpWc7EDL
UNns545AwmE/SSPRkKlfDqngt/i3Xw0WYWtiWcq11wkk0UfyovIsx1szaX6NjWqYHHgCWTnNkrso
eawR++QLzJPwXuUaxuGgx7e1TObF4ry7Vx7oPogHuj8v/xAAjEQACAgEDAwUAAAAAAAAAAAABAwI
RABAhMQQFYRIyQVFi/9oACAECAQE/AOMHUpn7WA4tsWi4SBHjQ7g4ulxkv1A2Tx5zthK5MT+r1mm
KmygRyLGdCqQLZgGtt9Wwi1sJz5oDL+BsPoaf/8QAIhEAAgEDAwUBAAAAAAAAAAAAAQMCAAQREBI
hBRMiMWFi/9oACAEDAQE/AIgyIiPZo2D1kdxUqeiSCBIEfDok7WrP6FXEJMYGY2j7XVYhioOzyAI
6puZXNpBwwDE811RsT2oGXkSTt+a2l25FuxK8beSMjkZo5lIzkSZH2T70/9k=' },
]
}
]
}
];

import { GanttComponent, ColumnsDirective, ColumnDirective
,PdfQueryCellInfoEventArgs, Inject, Toolbar, PdfExport, Selection } from
function App (){

id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
let ganttChart:any;

Gantt Export
let exportProperties: PdfExportProperties = {

enableFooter: false
};
}
};
function pdfQueryCellInfo(args :PdfQueryCellInfoEventArgs) {
if (args.column.headerText === 'Resources') {
{
args.image = { height:40,width:40, base64: (args as
any).data.taskData.resourcesImage };
}
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + (args as any).data.taskData.EmailId,
displayText: (args as any).data.taskData.EmailId
};
}
}
columnIndex: 7
};
id: 'resourceId',
};
function ganttTemplate(props:any) {
var src = props.TaskID + '.png';
return (<div className='image' >
<img src={src} style={{height:'42px'}}/>
</div>);
};
const template: any = ganttTemplate;
return <GanttComponent dataSource={data} rowHeight={60}
taskFields={taskFields} pdfQueryCellInfo = {pdfQueryCellInfo}
toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true}
resourceFields={resourceFields} resources={ProjectResources} height =
'450px'>
<ColumnsDirective>
<ColumnDirective field='resources'
headerText='Resources' width='250' template={template}
textAlign='Center'></ColumnDirective>
<ColumnDirective field='EmailId' headerText='Email ID'
width='250' ></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection]}/>
</GanttComponent>
};
INDEX.HTML

Gantt Export
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Exporting with taskbar template

The PDF export functionality allows to export taskbar templates that include images and text to an PDF
document using pdfQueryTaskbarInfo event. Taskbars in the exported PDF document can be customized
or formatted using the pdfQueryTaskbarInfo event for parent taskbar templates, taskbar templates
and milestone templates.
In the following sample, taskbar templates with images and text are exported to PDF using
taskbarTemplate properties in the pdfQueryTaskbarInfo event.
INDEX.JSX
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar,
PdfExport, Selection, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-
react-gantt';
import { base64Data } from './datasource';

Gantt Export
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
let ganttChart;
enableFooter: false
};
}
};
function pdfQueryTaskbarInfo(args) {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage,
height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
args.taskbarTemplate.fontStyle = {
fontColor: new PdfColor(255, 255, 255),
fontFamily: 'TimesRoman',
}
}
if (args.data.hasChildRecords) {
height: 20
}]
}
fontFamily: 'TimesRoman',
}
}
if (args.data.ganttProperties.duration === 0) {
height: 20,
}]
}
args.taskbarTemplate.value = args.data.TaskName,

Gantt Export
fontFamily: 'TimesRoman'
}
}
}
columnIndex: 2
};
function TaskbarTemplate(props) {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-
taskbar" style={{ height: "100%" }} >
<div className="e-gantt-child-progressbar-inner-div e-gantt-
child-progressbar" style={{ width: props.ganttProperties.progressWidth +
"px", height: "100%" }} >
<img className="image"
src={`./images/${props.ganttProperties.resourceNames}.png`} style={{
height: '30px', width: '30px', top: '10px' }} />
</div>
<span
style={{ position: "absolute", fontSize: "12px", color:
"white", top: "5px", left: "30px", fontFamily: "Segoe UI", cursor: "move",
overflow: "hidden" }} >
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props) {
return (
<div className="e-gantt-parent-taskbar-inner-div e-gantt-parent-
<div className="e-gantt-parent-progressbar-inner-div e-row-
expand e-gantt-parent-progressbar" style={{ width:
props.ganttProperties.progressWidth + "px", height: "100%" }} >
</div>
<span className="e-task-label" style={{ position:
"absolute", fontSize: "12px", color: "white", top: "5px", left: "10px",
fontFamily: "Segoe UI", cursor: "move" }} >
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props) {
return (
<div className="e-gantt-milestone" style={{ position:
"relative", display: "inline-block" }}>
<div className="e-milestone-top" style={{ position:
"absolute", borderRightWidth: "20px", borderLeftWidth: "20px",
borderBottomWidth: "20px" }} />
<div className="e-milestone-bottom" style={{ position:
"absolute", top: "20px", borderRightWidth: "20px", borderLeftWidth: "20px",
borderTopWidth: "20px" }} />
src={`./images/${props.ganttProperties.resourceNames}.png`} style={{

Gantt Export
height: '30px', width: '30px', position: 'absolute', top: '1px', left:

'80%', transform: 'translateX(-50%)' }} />
</div>
);
}
id: 'resourceId',
};
return <GanttComponent dataSource={base64Data} rowHeight={45}
pdfQueryTaskbarInfo={pdfQueryTaskbarInfo} toolbarClick={toolbarClick}
allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} resourceFields={resourceFields}
resources={editingResources} taskbarTemplate={TaskbarTemplate}
milestoneTemplate={MilestoneTemplate} height='450px'>
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
PdfExport, Selection, PdfExportProperties, PdfQueryTaskbarInfoEventArgs }
import { base64Data, editingResources } from './datasource';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
function toolbarClick(args: ClickEventArgs) {
enableFooter: false
};
}
};
function pdfQueryTaskbarInfo(args: PdfQueryTaskbarInfoEventArgs) {

Gantt Export
if (!args.data.hasChildRecords) {
width: 20, base64: (args as
any).data.taskData.resourcesImage, height: 20
}]
}
}
if (args.data.hasChildRecords) {
any).data.taskData.resourcesImage, height: 20
}]
}
}
if (args.data.ganttProperties.duration === 0) {
any).data.taskData.resourcesImage, height: 20,
}]
}
}
}
columnIndex: 2
};
id: 'resourceId',
};
function TaskbarTemplate(props: any) {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-
<div className="e-gantt-child-progressbar-inner-div e-gantt-
child-progressbar" style={{ width: props.ganttProperties.progressWidth +
"px", height: "100%" }} >
src={`./images/${props.ganttProperties.resourceNames}.png`} style={{ height:
'30px', width: '30px', top: '10px' }} />
</div>
<span
style={{ position: "absolute", fontSize: "12px", color:
"white", top: "5px", left: "30px", fontFamily: "Segoe UI", cursor: "move",
overflow: "hidden" }}>
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props: any) {

Gantt Export
return (
<div className="e-gantt-parent-taskbar-inner-div e-gantt-parent-
<div className="e-gantt-parent-progressbar-inner-div e-row-
expand e-gantt-parent-progressbar" style={{ width:
props.ganttProperties.progressWidth + "px", height: "100%" }} >
</div>
<span className="e-task-label" style={{ position:
"absolute", fontSize: "12px", color: "white", top: "5px", left: "10px",
fontFamily: "Segoe UI", cursor: "move" }} >
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props: any) {
return (
<div className="e-gantt-milestone" style={{ position:
"relative", display: "inline-block" }}>
<div className="e-milestone-top" style={{ position:
"absolute", borderRightWidth: "20px", borderLeftWidth: "20px",
borderBottomWidth: "20px" }} />
<div
style={{ position: "absolute", top: "20px",
borderRightWidth: "20px", borderLeftWidth: "20px", borderTopWidth: "20px" }}
/>
src={`./images/${props.ganttProperties.resourceNames}.png`} style={{ height:
'30px', width: '30px', position: 'absolute', top: '1px', left: '80%',
transform: 'translateX(-50%)' }} />
</div>
);
}
taskFields={taskFields} pdfQueryTaskbarInfo={pdfQueryTaskbarInfo}
splitterSettings={splitterSettings} resourceFields={resourceFields}
resources={editingResources} taskbarTemplate={TaskbarTemplate}
milestoneTemplate={MilestoneTemplate} height='450px'>
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>

Gantt Export

/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Exporting with task label template

The PDF export functionality allows to export task label template that include images and text to an
PDF document using pdfQueryTaskbarInfo event.
In the following sample, task label template with images and text are exported to PDF using
labelSettings properties in the pdfQueryTaskbarInfo event.
INDEX.JSX
PdfExport, Selection, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-
react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',

Gantt Export
child: 'subtasks',
};
let ganttChart;
enableFooter: false
};
}
};
function pdfQueryTaskbarInfo(args) {
args.labelSettings.leftLabel.value =
args.data.ganttProperties.taskName + '[' +
args.data.ganttProperties.progress + ']';
args.labelSettings.rightLabel.value =
args.data.ganttProperties.resourceNames;
args.labelSettings.rightLabel.image = [{
base64: (args).data.taskData.resourcesImage, width: 20,
height: 20
}]
}
args.labelSettings.taskLabel.value =
args.data.ganttProperties.progress + '%'
}
const LeftLabelTemplate = (props) => {
return (<span>{props.TaskName} [ {props.Progress}% ]</span>);
};
const templateLeft = LeftLabelTemplate;
const RightLabelTemplate = (props) => {
if (props.ganttProperties.resourceInfo) {
let resources = props.ganttProperties.resourceInfo;
let out = [];
for (let index = 0; index < resources.length; index++) {
let src =
'https://ej2.syncfusion.com/react/demos/src/gantt/images/' +
resources[index].resourceName + '.png';
let img = <img src={src} height='40px' />;
let span = <span style={{ marginLeft: '5px', marginRight:
'5px' }}>{resources[index].resourceName}</span>;
out.push(img, span);
}
return (<div>{out}</div>);
} else {
return <div></div>
}
};
const templateRight = RightLabelTemplate;
leftLabel: templateLeft.bind(this),
rightLabel: templateRight.bind(this),
taskLabel: '${Progress}%'
};

Gantt Export
columnIndex: 2
};
id: 'resourceId',
};
pdfQueryTaskbarInfo={pdfQueryTaskbarInfo} toolbarClick={toolbarClick}
allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} labelSettings={labelSettings}
resourceFields={resourceFields} resources={editingResources}
projectStartDate={projectStartDate} projectEndDate={projectEndDate}
height='450px'>
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, ColumnsDirective,
PdfExportProperties,ColumnDirective, pdfQueryTaskbarInfoEventArgs, Inject,
Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
function toolbarClick(args : ClickEventArgs) {
enableFooter: false
};
}
};
function pdfQueryTaskbarInfo(args: pdfQueryTaskbarInfoEventArgs) {

Gantt Export
args.labelSettings.leftLabel.value =
args.data.ganttProperties.taskName + '[' +
args.data.ganttProperties.progress + ']';
args.labelSettings.rightLabel.value =
args.data.ganttProperties.resourceNames;
args.labelSettings.rightLabel.image = [{
base64: (args as any).data.taskData.resourcesImage, width:
20, height: 20
}]
}
args.labelSettings.taskLabel.value =
args.data.ganttProperties.progress + '%'
}
const LeftLabelTemplate = (props : any) => {
return (<span>{props.TaskName} [ {props.Progress}% ]</span>);
};
const templateLeft: any = LeftLabelTemplate;
const RightLabelTemplate = (props : any) => {
if (props.ganttProperties.resourceInfo) {
let resources = props.ganttProperties.resourceInfo;
let out : any = [];
for (let index = 0; index < resources.length; index++) {
let src =
'https://ej2.syncfusion.com/react/demos/src/gantt/images/' +
resources[index].resourceName + '.png';
let img = <img src={src} height='40px' />;
let span = <span style={{ marginLeft: '5px', marginRight:
'5px' }}>{resources[index].resourceName}</span>;
out.push(img, span);
}
return (<div>{out}</div>);
} else {
return <div></div>
}
};
const templateRight: any = RightLabelTemplate;
leftLabel: templateLeft.bind(this),
rightLabel: templateRight.bind(this),
taskLabel: '${Progress}%'
};
columnIndex: 2
};
id: 'resourceId',
};
taskFields={taskFields} pdfQueryTaskbarInfo={pdfQueryTaskbarInfo}

Gantt Export
height='450px'>
<ColumnsDirective>
</ColumnsDirective>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Exporting with header template

The PDF export functionality allows to export header template that include images and text to an PDF
document using pdfColumnHeaderQueryCellInfo event.
In the following sample, header template with images and text are exported to PDF using
headerTemplate properties in the pdfColumnHeaderQueryCellInfo event.

Gantt Export

INDEX.JSX
PdfExport, Selection, PdfQueryCellInfoEventArgs,pdfColumnHeaderQueryCellInfo
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
let ganttChart;
enableFooter: false
};
}
};
function pdfColumnHeaderQueryCellInfo(args) {
let base64Array = [
{ 'TaskName':
'/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAU
AAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQA
AABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0
RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBA
QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQE
BAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRY
xFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAM
BAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mew
u7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW
8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kF
KkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwS
HnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/ov
eB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJ
UeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cP
oP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy
3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByI
YjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
{ 'StartDate':
QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQE
BAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI
0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAA

Gantt Export
AABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spj
EKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIx
wAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2
nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkW
jGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJF
XblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhB
Q42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNco
qANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnm
EvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vA
FlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20
LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBku
AfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9
ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
]
while (i < base64Array.length) {
const key = Object.keys(base64Array[i])[0];
const value = base64Array[i][key];
if (key === args.column.field) {
args.headerTemplate.image = [{
base64: value, width: 20, height: 20
}];
args.headerTemplate.value = args.column.field;
break;
}
i++;
}
}
columnIndex: 2
};
id: 'resourceId',
};
pdfColumnHeaderQueryCellInfo={pdfColumnHeaderQueryCellInfo}
toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart =
gantt}
height='450px'>
<ColumnsDirective>
headerText='TaskName' headerTemplate={() => {
return (<div><img className="image"
src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Task
name.png" width="20" height="20" />
<b className='e-header'>Task
Name</b></div>);
}} ></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start
Date' headerTemplate={() => {

Gantt Export

src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Start
date.png" width="20" height="20" />
<b className='e-header'>Start
Date</b></div>);
</ColumnsDirective>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, ColumnsDirective, ColumnDirective,
PdfQueryCellInfoEventArgs, pdfColumnHeaderQueryCellInfo, Inject, Toolbar,
PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks',
};
function toolbarClick(args: ClickEventArgs) {
enableFooter: false
};
}
};
let i: number = 0;
function pdfColumnHeaderQueryCellInfo(args:
pdfColumnHeaderQueryCellInfo) {
let base64Array: Object[] = [
{ 'TaskName':
QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQE
BAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRY
xFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAM
BAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mew
u7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW

Gantt Export
8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kF
KkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwS
HnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/ov
eB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJ
UeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cP
oP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy
3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByI
YjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
{ 'StartDate':
QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQE
BAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI
0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAA
AABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spj
EKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIx
wAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2
nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkW
jGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJF
XblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhB
Q42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNco
qANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnm
EvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vA
FlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20
LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBku
AfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9
ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
]
while (i < base64Array.length) {
const key = Object.keys(base64Array[i])[0];
const value = base64Array[i][key];
if (key === args.column.field) {
args.headerTemplate.image = [{
base64: value, width: 20, height: 20
}];
args.headerTemplate.value = args.column.field;
break;
}
i++;
}
}
columnIndex: 2
};
id: 'resourceId',
};
return (
<div className='control-pane'>
<div className='control-section'>
<GanttComponent dataSource={base64Data} rowHeight={60}

Gantt Export
pdfColumnHeaderQueryCellInfo={pdfColumnHeaderQueryCellInfo}
height='450px'>
<ColumnsDirective>
headerText='TaskName' headerTemplate={() => {
src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Task
name.png" width="20" height="20" />
<b className='e-header'>Task
Name</b></div>);
}} ></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start
Date' headerTemplate={() => {
src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Start
date.png" width="20" height="20" />
<b className='e-header'>Start
Date</b></div>);
</ColumnsDirective>
</GanttComponent>
</div>
</div>
)
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;

Gantt Context menu in React Gantt component
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Context menu in React Gantt component

The Gantt control allows you to perform quick actions by using context menu. When right-clicking the
context menu, the context menu options are shown. To enable this feature, set the enableContextMenu
to true. The default context menu options are enabled using the editSettings property. The context
menu options can be customized using the contextMenuItems property.
To use the context menu, inject the ContextMenu module into the Gantt component.
The default items are listed in the following table.
Items| Description
AutoFit| Auto-fits the current column.
AutoFitAll | Auto-fits all columns.
SortAscending | Sorts the current column in ascending order.
SortDescending | Sorts the current column in descending order.
TaskInformation| Edits the current task.
Add | Adds a new row to the Gantt.
Indent | Indent the selected record to one level.
Outdent | Outdent the selected record to one level.
DeleteTask | Deletes the current task.
Save | Saves the edited task.
Cancel | Cancels the edited task.
DeleteDependency | Deletes the current dependency task link.
Convert | Converts current task to milestone or vice-versa.
INDEX.JSX
import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize


function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
editSettings={editSettings} allowSorting={true} allowResizing={true}
enableContextMenu={true} height = '450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize]}
/>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize,
EditSettingsModel } from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const editSettings: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
enableContextMenu={true} height = '450px'>
/>
</GanttComponent>
};

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Custom context menu items

The custom context menu items can be added by defining the contextMenuItems as a collection of
contextMenuItemModel. Actions for the customized items can be defined in the contextMenuClick
event and the visibility of customized items can be defined in the contextMenuOpen event.
To create custom context menu items for header area, define the target property as .e-gridheader.
The following sample shows context menu item for parent rows to expand or collapse child rows in the
content area and a context menu item to hide columns in the header area.
INDEX.JSX
EditSettingsModel, IGanttData } from '@syncfusion/ej2-react-gantt';
function App(){

let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const contextMenuItems = ['AutoFitAll', 'AutoFit', 'TaskInformation',
'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add',
'DeleteDependency', 'Convert',
{ text: 'Collapse the Row', target: '.e-content', id: 'collapserow'
},
{ text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
{ text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
];
function contextMenuClick (args) {
let record = args.rowData;
if (args.item.id === 'collapserow') {
ganttInstance.collapseByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'expandrow') {
ganttInstance.expandByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'hidecols') {
ganttInstance.hideColumn(args.column.headerText);
}
};
function contextMenuOpen (args) {
let record = args.rowData;
if (args.type !== 'Header') {
if (!record.hasChildRecords) {
args.hideItems.push('Collapse the Row');
args.hideItems.push('Expand the Row');
} else {
if(record.expanded){
args.hideItems.push("Expand the Row");
} else {
args.hideItems.push("Collapse the Row");
}
}
}
};
enableContextMenu={true} contextMenuItems={contextMenuItems}
contextMenuClick={contextMenuClick} contextMenuOpen={contextMenuOpen}
ref={gantt => ganttInstance = gantt} height = '450px'>


/>
</GanttComponent>
};
INDEX.TSX
EditSettingsModel, IGanttData } from '@syncfusion/ej2-react-gantt';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const editSettings: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const contextMenuItems: any = ['AutoFitAll', 'AutoFit', 'TaskInformation',
'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add',
'DeleteDependency', 'Convert',
{ text: 'Collapse the Row', target: '.e-content', id: 'collapserow'
},
{ text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
{ text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
];
function contextMenuClick (args: any) {
let record: IGanttData = args.rowData;
if (args.item.id === 'collapserow') {
ganttInstance.collapseByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'expandrow') {
ganttInstance.expandByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'hidecols') {
ganttInstance.hideColumn(args.column.headerText);
}
};
function contextMenuOpen (args: any) {
let record: IGanttData = args.rowData;
if (!record.hasChildRecords) {
args.hideItems.push('Collapse the Row');
args.hideItems.push('Expand the Row');

} else {
if(record.expanded){
args.hideItems.push("Expand the Row");
} else {
args.hideItems.push("Collapse the Row");
}
}
}
};
ref={gantt => ganttInstance = gantt} height = '450px'>
/>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>

Gantt State persistence in React Gantt component
</html>
You can show an specific item in context menu for header/content area in the Gantt control by defining
the target property.
Touch interaction
To perform long press action on a row, context menu is opened, and then tap a menu item to trigger its
action.
State persistence in React Gantt component
State persistence refers to the Gantt's state maintained in the browser's localStorage even if the
browser is refreshed or if you move to the next page within the browser. State persistence stores gantt’s
model object in the local storage when the enablePersistence is defined as true.
Get or set localStorage value
If the enablePersistence property is set to true, the gantt property value is saved in the
window.localStorage for reference. You can get/set the localStorage value by using the
getItem/setItem method in the window.localStorage.
`ts
//get the Gantt model.
let value: string = window.localStorage.getItem('ganttGantt'); //"ganttGantt" is component name +
component id.
let model: Object = JSON.parse(model);
`
`ts
//set the Gantt model.
window.localStorage.setItem('ganttGantt', JSON.stringify(model)); //"ganttGantt" is component name +
component id.
`
You can refer to our React Gantt feature tour page for its groundbreaking feature representations. You
can also explore our React Gantt example to knows how to present and manipulate data.
Prevent columns from persisting
When the enablePersistence property is set to true, the Gantt properties such as Filtering, Sorting , and
Columns will persist. You can use the addOnPersist method to prevent these Gantt properties from
persisting.
The following example demonstrates how to prevent Gantt columns from persisting. In the dataBound
event of the Gantt, you can override the addOnPersist method and remove the columns from the key
list given for persistence.
Note: When the enablePersistence property is set to true, the Gantt features such as column template,
column formatter, header text, and value accessor will not persist.
INDEX.JSX

let data = [
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];
import { Gantt} from '@syncfusion/ej2-react-gantt';
function App (){
let ganttInstance;
function dataBound(){
let cloned = ganttInstance.addOnPersist;
ganttInstance.addOnPersist = function (key) {
key = key.filter((item) => item !== "columns");
return cloned.call(this, key);
};
}
function addColumn(){
let obj = { field: "Progress", headerText: 'Progress', width: 100 };
ganttInstance.columns.push(obj); //you can add the columns by using the
Gantt columns method
ganttInstance.treeGrid.refreshColumns();
}
function removeColumn(){
ganttInstance.columns.pop();
}
id: 'TaskID',

name: 'TaskName',
child: 'subtasks'
};
return( <div> <ButtonComponent onClick= { addColumn }>Add
Columns</ButtonComponent>
<ButtonComponent onClick= { removeColumn }>Remove
Columns</ButtonComponent><GanttComponent id="Gantt" dataSource={data}
enablePersistence={true} dataBound={dataBound} height={430}
<ColumnsDirective>
<ColumnDirective field='TaskName' width='100'/>
<ColumnDirective field='StartDate' width='100'/>
<ColumnDirective field='Duration' width='100'/>
</ColumnsDirective>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];


function App (){
function dataBound(){
let cloned = ganttInstance.addOnPersist;
ganttInstance.addOnPersist = function (key: any) {
key = key.filter((item: string) => item !== "columns");
return cloned.call(this, key);
};
}
function addColumn(){
let obj = { field: "Progress", headerText: 'Progress', width: 100 };
ganttInstance.columns.push(obj as any); //you can add the columns by using
the Gantt columns method
}
function removeColumn(){
ganttInstance.columns.pop();
}
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return( <div> <ButtonComponent onClick= { addColumn }>Add
Columns</ButtonComponent>
<ButtonComponent onClick= { removeColumn }>Remove
Columns</ButtonComponent><GanttComponent id="Gantt" dataSource={data}
enablePersistence={true} dataBound={dataBound} height={430}
<ColumnsDirective>
<ColumnDirective field='TaskName' width='100'/>
</ColumnsDirective>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Persist the header template and header Text

By default, the Gantt properties such as column template, header text, header template, column
formatter, and value accessor will not persist when enablePersistence is set to true. Because the column
template and header text can be customized at the application level.
If you wish to restore all these column properties, then you can achieve it by cloning the gantt columns
property using JavaScript Object’s assign method and storing this along with the persist data manually.
While restoring the settings, this column object must be assigned to the gantt’s columns property to
restore the column settings as demonstrated in the following sample.
INDEX.JSX
{
TaskID: 1,
subtasks: [


]
},
{
TaskID: 5,
subtasks: [
]
},
];
import { ColumnDirective, ColumnsDirective, GanttComponent } from
function App (){
let ganttInstance;
let savedProperties = JSON.parse(ganttInstance.getPersistData());
let gridColumnsState = Object.assign([], ganttInstance.ganttColumns);
savedProperties.columns.forEach((col) => {
let headerText = gridColumnsState.find((colColumnsState) =>
colColumnsState.field === col.field)['headerText'];
let colTemplate = gridColumnsState.find((colColumnsState) =>
colColumnsState.field === col.field)['template'];
let headerTemplate = gridColumnsState.find((colColumnsState) =>
colColumnsState.field === col.field)['headerTemplate'];
col.headerText = 'Text Changed';
col.template = colTemplate;
col.headerTemplate = headerTemplate; //likewise you can restore required
column properties as per your wants.
}
);
console.log(savedProperties);
ganttInstance.treeGrid.setProperties(savedProperties);
}
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const headerTemplate = customerTemplate;
function customerTemplate(props) {
return (<div>

<span className="e-icons e-header" ></span>Task Name

</div>);
}
return( <div> <ButtonComponent onClick= { clickHandler
}>Restore</ButtonComponent> <GanttComponent id="Gantt" dataSource={data}
taskFields={taskFields} enablePersistence={true} height={230}
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' textAlign="Right"/>
<ColumnDirective field='TaskName' width='100'
headerTemplate={headerTemplate}/>
</ColumnsDirective>
};
INDEX.TSX
{
TaskID: 1,
subtasks: [
]
},
{
TaskID: 5,
subtasks: [
]
},
];
import { ColumnDirective, ColumnsDirective, GanttComponent } from

function App (){

let ganttInstance: Gantt | null;
let savedProperties = JSON.parse(ganttInstance.getPersistData());
let gridColumnsState = Object.assign([], ganttInstance.ganttColumns);
savedProperties.columns.forEach((col: {
field: any;
headerText: any;
template: any;
headerTemplate: any;
}) => {
let headerText = gridColumnsState.find((colColumnsState) =>
colColumnsState.field === col.field)['headerText'];
let colTemplate = gridColumnsState.find((colColumnsState) =>
colColumnsState.field === col.field)['template'];
let headerTemplate = gridColumnsState.find((colColumnsState) =>
colColumnsState.field === col.field)['headerTemplate'];
col.headerText = 'Text Changed';
col.template = colTemplate;
col.headerTemplate = headerTemplate; //likewise you can restore required
column properties as per your wants.
}
);
console.log(savedProperties);
ganttInstance.treeGrid.setProperties(savedProperties);
}
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const headerTemplate: any = customerTemplate;
function customerTemplate(props: any): any {
return (<div>
<span className="e-icons e-header" ></span>Task Name
</div>);
}
return( <div> <ButtonComponent onClick= { clickHandler
}>Restore</ButtonComponent> <GanttComponent id="Gantt" dataSource={data}
taskFields={taskFields} enablePersistence={true} height={230}
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' textAlign="Right"/>
<ColumnDirective field='TaskName' width='100'
headerTemplate={headerTemplate}/>
</ColumnsDirective>
};
INDEX.HTML

Gantt Accessibility in React Gantt component
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Accessibility in React Gantt component

The Gantt component followed the accessibility guidelines and standards, including ADA, Section 508,
WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Gantt component is outlined below.
| -- | -- |
| WCAG 2.2 Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |


alt="Yes"> |
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">
|
<style>
margin: 0.5em 0;
}
</style>
WAI-ARIA attributes
The Gantt component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA
attributes are used in the Gantt component:
The following ARIA attributes are used in Gantt:
| --- | --- |
| grid (role) | This attribute is added to the e-table element present in the Gantt, which represents
Grid part |
| gridcell (role) | This attribute is added to the td elements present within the e-table, which
represents the work cells of Gantt |
| columnheader (role) | This attribute is added to the th elements within the e-table, which
represents the header cells of Grid table |

| separator (role) | This attribute is added to the e-split-bar element, which represents the splitter
between the Grid table and Chart |
| dialog (role) | This attribute is added to the e-dialog element, which represents the pop-up dialog |
| toolbar (role) | This attribute is added to the e-gantt-toolbar element, which represents the toolbars
of Gantt |
| aria-label | It indicates the element's information<br> It is assigned to the Gantt UI elements such as
timeline cell, taskbar, left label, right label, dependency line, and event markers. |
| aria-selected | This attribute is assigned to the Gantt chart row, and it defaults to false. The value is
changed to true when the user selects a grid cell or task |
| aria-expanded | This attribute is assigned to the Gantt chart parent task row. The value is changed to
true when the user clicks a parent taskbar to expand. After the user clicked a parent taskbar to collapse,
the attribute value is changed to false |
| aria-grabbed | This attribute is assigned to the taskbars of Gantt when the user tries to achieve
taskbar editing |
Keyboard navigation
The Gantt component followed the keyboard interaction guideline, making it easy for people who use
assistive technologies (AT) and those who completely rely on keyboard navigation. The following
keyboard shortcuts are supported by the Gantt component.
| --- | --- |
| Home | Selects the first row. |
| End | Selects the last row. |
| DownArrow | Moves the cell focus/row or cell selection downward. |
| UpArrow | Moves the cell focus/row or cell selection upward. |
| LeftArrow | Moves the cell focus/row or cell selection left side. |
| RightArrow | Moves the cell focus/row or cell selection right side. |
| Ctrl + Up Arrow | Collapses all tasks. |
| Ctrl + Down Arrow | Expands all tasks. |
| Ctrl + Shift + Up Arrow | Collapses the selected row. |
| Ctrl + Shift + Down Arrow | Expands the selected row. |
|Enter | Saves request. |
| Esc | Cancels request. |
| Insert | Adds a new row. |
| Ctrl + Insert | Opens addRowDialog. |
| Ctrl + F2 | Opens editRowDialog. |

Gantt Global local in React Gantt component
| Delete | Deletes the selected row. |

| Shift + F5 | FocusTask |
| Ctrl + Shift + F | Focus search |
| Shift + DownArrow | Extends the row/cell selection downwards. |
| Shift + UpArrow | Extends the row/cell selection upwards. |
| Shift + LeftArrow | Extends the cell selection to the left side. |
| Shift + RightArrow | Extends the cell selection to the right side. |
| Tab / Shift + Tab | To focus the close icon in the message. |
| Alt + j | Focus Gantt component. |
The Gantt component's accessibility levels are ensured through an accessibility-checker and axe-core
software tools during automated testing.
The accessibility compliance of the Gantt component is shown in the following sample. Open the sample
in a new window to evaluate the accessibility of the Gantt component with accessibility tools.
See also
Global local in React Gantt component

Localization
The Localization library allows you to localize default text content of the Gantt.The Gantt component
has static text on some features (like column headers, add and edit dialog, tooltip, toolbar, etc.)that can
be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
locale value and translation object.
The following list of properties and its values are used in the Gantt.
Locale key words |Text
emptyRecord |No records to display
id |ID
name |Name
startDate |Start Date
endDate |End Date
duration |Duration
progress |Progress
dependency |Dependency
notes |Notes
baselineStartDate| Baseline Start Date

baselineEndDate| Baseline End Date

type| Type
offset | Offset
resourceName | Resources
resourceID | Resource ID
day | day
hour | hour
minute | minute
days | days
hours | hours
minutes | minutes
generalTab | General
customTab | Custom Columns
writeNotes | Write Notes
addDialogTitle | New Task
editDialogTitle | Task Information
add | Add
edit | Edit
update | Update
delete | Delete
cancel | Cancel
search | Search
task | task
tasks | tasks
zoomIn | Zoom in
zoomOut | Zoom out
zoomToFit | Zoom to fit
expandAll | Expand all
collapseAll | Collapse all
nextTimeSpan | Next timespan
prevTimeSpan | Previous timespan
saveButton | Save

taskBeforePredecessor_FS | You moved "{0}" to start before "{1}" finishes and the two tasks are linked.
As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_FS | You moved "{0}" away from "{1}" and the two tasks are linked. As the result,
the links cannot be honored. Select one action below to perform
taskBeforePredecessor_SS | You moved "{0}" to start before "{1}" starts and the two tasks are linked. As
the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_SS | You moved "{0}" to start after "{1}" starts and the two tasks are linked. As the
result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_FF | You moved "{0}" to finish before "{1}" finishes and the two tasks are linked.
As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_FF | You moved "{0}" to finish after "{1}" finishes and the two tasks are linked. As
taskBeforePredecessor_SF | You moved "{0}" away from "{1}" to starts and the two tasks are linked. As
taskAfterPredecessor_SF | You moved "{0}" to finish after "{1}" starts and the two tasks are linked. As
okText | Ok
confirmDelete | Are you sure you want to Delete Record?
from | From
to | To
taskLink | Task Link
lag | Lag
start | Start
finish | Finish
enterValue | Enter the value
taskInformation | Task Information
deleteTask | Delete Task
deleteDependency | Delete Dependency
convert | Convert
save | Save
above | Above
below | Below
child | Child
milestone | Milestone
toTask | To Task
toMilestone | To Milestone

eventMarkers | Event markers

leftTaskLabel | Left task label
rightTaskLabel | Right task label
timelineCell | Timeline cell
confirmPredecessorDelete | Are you sure you want to remove dependency link?taskMode | Task Mode
changeScheduleMode | Change Schedule Mode
subTasksStartDate | SubTasks Start Date
subTasksEndDate | SubTasks End Date
scheduleStartDate | Schedule Start Date
scheduleEndDate | Schedule End Date
auto | Auto
manual | Manual
excelExport | Excel export
csvExport | CSV export
pdfExport | Pdf export
unit | Unit
work | Work
taskType | Task Type
unassignedTask | Unassigned Task
group | Group
Loading translations
To load translation object in an application use load function of L10n class.
The below example demonstrates the Gantt in Deutsch culture.
INDEX.JSX
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
setCulture('de-DE');
L10n.load({
'de-DE': {
'gantt': {
"id": "Ich würde",
"name": "Name",
"startDate": "Anfangsdatum",
"duration": "Dauer",
"progress": "Fortschritt",
}
}

});
function App () {
const taskFields= {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return <GanttComponent dataSource={data} locale='de-DE'
allowSelection={true} taskFields={taskFields} height = '450px'>
</GanttComponent>
};
INDEX.TSX
import { L10n, setCulture } from '@syncfusion/ej2-base';
L10n.load({
'de-DE': {
'gantt': {
"id": "Ich würde",
"name": "Name",
}
}
});
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>


/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Internationalization
The Internationalization library is used to globalize number, date, and time values in gantt component.
INDEX.JSX
import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as cagregorian from './ca-gregorian.jsx';
import * as numbers from './numbers.jsx';
loadCldr(cagregorian, numbers);
L10n.load({
'de-DE': {
'gantt': {
"id": "Ich würde",
"name": "Name",
}
}

});
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
</GanttComponent>
};
INDEX.TSX
import * as cagregorian from './ca-gregorian.tsx';
import * as numbers from './numbers.tsx';
loadCldr(cagregorian, numbers);
L10n.load({
'de-DE': {
'gantt': {
"id": "Ich würde",
"name": "Name",
}
}
});
function App() {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>

<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
* In the above sample, Timeline is formatted by NumberFormatOptions and DateFormatOptions.

* By default, locale value is en-US. If you want to change en-US culture, then set the locale.
Right to left (RTL)
RTL provides an option to switch the text direction and layout of the Gantt component from right to left.
It improves the user experiences and accessibility for users who use right-to-left languages (Arabic,
Urdu, etc.). To enable RTL Gantt, set the enableRtl to true.
INDEX.JSX
setCulture('ar-AE');
L10n.load({
'ar-AE': {
"gantt": {
"emptyRecord": "‫"ال سجالت لعرضها‬,

"id": "‫"هوية شخصية‬,

"name": "‫"اسم‬,
"startDate": "‫"تاريخ البدء‬,
"endDate": "‫"تاريخ االنتهاء‬,
"duration": "‫"المدة الزمنية‬,
"progress": "‫"تقدم‬,
"dependency": "‫"االعتماد‬,
"notes": "‫"مالحظات‬,
"baselineStartDate": "‫"تاريخ البدء األساسي‬,
"baselineEndDate": "‫"تاريخ نهاية خط األساس‬,
"taskMode": "‫"وضع المهام‬,
"changeScheduleMode": "‫"تغيير وضع الجدول‬,
"subTasksStartDate": "‫"تاريخ بدء المهام الفرعية‬,
"subTasksEndDate": "‫"تاريخ انتهاء المهام الفرعية‬,
"scheduleStartDate": "‫"جدولة تاريخ البدء‬,
"scheduleEndDate": "‫"تاريخ انتهاء الجدول الزمني‬,
"auto": "‫"تلقاءي‬,
"manual": "‫"كتيب‬,
"type": "‫"اكتب‬,
"offset": "‫"عوض‬,
"resourceName": "‫"مصادر‬,
"resourceID": "‫"معرف المورد‬,
"day": "‫"يوم‬,
"hour": "‫"ساعة‬,
"minute": "‫"دقيقة‬,
"days": "‫"أيام‬,
"hours": "‫"ساعات‬,
"minutes": "‫"الدقائق‬,
"generalTab": "‫"جنرال لواء‬,
"customTab": "‫"أعمدة مخصصة‬,
"writeNotes": "‫"اكتب مالحظات‬,
"addDialogTitle": "‫"مهمة جديدة‬,
"editDialogTitle": "‫"معلومات المهمة‬,
"saveButton": "‫"حفظ‬,
"add": "‫"إضافة‬,
"edit": "‫"تعديل‬,
"update": "‫"تحديث‬,
"delete": "‫"حذف‬,
"cancel": "‫"إلغاء‬,
"search": "‫"بحث‬,
"task": " ‫"مهمة‬,
"tasks": " ‫"مهام‬,
"zoomIn": "‫"تكبير‬,
"zoomOut": "‫"تصغير‬,
"zoomToFit": "‫"تكبير لتناسب‬,
"excelExport": "‫"اكسل التصدير‬,
"csvExport": "‫ تصدير‬CSV",
"expandAll": "‫"توسيع الكل‬,
"collapseAll": "‫"انهيار جميع‬,
"nextTimeSpan": "‫"الجدول الزمني التالي‬,
"prevTimeSpan": "‫"الجدول الزمني السابق‬,
"okText": "‫"حسنا‬,
"confirmDelete": "‫"هل أنت متأكد أنك تريد حذف السجل؟‬,
"from": "‫"من عند‬,
"to": "‫"إلى‬,
"taskLink": "‫"رابط المهمة‬,
"lag": "‫"بطئ‬,

‫‪Gantt‬‬ ‫‪Global local in React Gantt component‬‬
‫‪",‬بداية" ‪"start":‬‬
‫‪",‬إنهاء" ‪"finish":‬‬
‫‪",‬أدخل القيمة" ‪"enterValue":‬‬
‫قمت بنقل {'‪}' 0‬للبدء قبل انتهاء" ‪"taskBeforePredecessor_FS":‬‬
‫ً '}‪'{1‬‬
‫ويتم ربط المهمتين ‪.‬ونتيجة لذلك ‪ ،‬ال يمكن احترام الروابط ‪.‬حدد إجراء‬
‫‪",‬واحدا أدناه للقيام به‬
‫قمت بنقل {'‪}' 0‬بعيدا عن {'‪}' 1‬ويتم" ‪"taskAfterPredecessor_FS":‬‬
‫ً واحدا أدناه‬
‫ربط المهمتين ‪.‬ونتيجة لذلك ‪ ،‬ال يمكن احترام الروابط ‪.‬حدد إجراء‬
‫‪",‬للقيام به‬
‫قمت بنقل {'‪}' 0‬للبدء قبل أن يبدأ" ‪"taskBeforePredecessor_SS":‬‬
‫ً واحدا '}‪'{1‬‬
‫وربط المهمتين ‪.‬ونتيجة لذلك ‪ ،‬ال يمكن احترام الروابط ‪.‬حدد إجراء‬
‫‪",‬أدناه للقيام به‬
‫'قمت بنقل {'‪}' 0‬للبدء بعد بدء {'‪"taskAfterPredecessor_SS": "}1‬‬
‫قمت بنقل {'‪}' 0‬لإلنهاء قبل انتهاء" ‪"taskBeforePredecessor_FF":‬‬
‫ً '}‪'{1‬‬
‫قمت بنقل {'‪' }0‬لإلنهاء بعد انتهاء" ‪"taskAfterPredecessor_FF":‬‬
‫ً '}‪'{1‬‬
‫قمت بنقل {'‪}' 0‬بعيدا عن {'‪}' 1‬لبدء" ‪"taskBeforePredecessor_SF":‬‬
‫التشغيل وترتبط المهمتان ‪.‬ونتيجة لذلك ‪ ،‬ال يمكن احترام الروابط ‪.‬حدد إجراء‬
‫ً‬
‫'قمت بنقل {'‪}' 0‬لإلنهاء بعد بدء {'‪"taskAfterPredecessor_SF": "}1‬‬
‫‪",‬معلومات المهمة" ‪"taskInformation":‬‬
‫‪",‬حذف المهمة" ‪"deleteTask":‬‬
‫‪",‬حذف التبعية" ‪"deleteDependency":‬‬
‫‪",‬تحويل" ‪"convert":‬‬
‫‪",‬حفظ" ‪"save":‬‬
‫‪",‬في االعلى" ‪"above":‬‬
‫‪",‬أدناه" ‪"below":‬‬
‫‪",‬طفل" ‪"child":‬‬
‫‪",‬معلما" ‪"milestone":‬‬
‫‪",‬لمهمة" ‪"toTask":‬‬
‫‪",‬إلى معلم" ‪"toMilestone":‬‬
‫‪",‬عالمات الحدث" ‪"eventMarkers":‬‬
‫‪",‬تسمية المهمة اليسرى" ‪"leftTaskLabel":‬‬
‫‪",‬تسمية المهمة الصحيحة" ‪"rightTaskLabel":‬‬
‫‪",‬خلية الجدول الزمني" ‪"timelineCell":‬‬
‫هل أنت متأكد أنك تريد إزالة رابط" ‪"confirmPredecessorDelete":‬‬
‫‪",‬التبعية؟‬
‫‪",‬وحدة" ‪"unit":‬‬
‫‪",‬عمل" ‪"work":‬‬
‫‪",‬نوع المهمة" ‪"taskType":‬‬
‫‪",‬مهمة غير محددة" ‪"unassignedTask":‬‬
‫‪",‬مجموعة" ‪"group":‬‬
‫‪",‬مسافة بادئة" ‪"indent":‬‬
‫‪",‬عفا عليها الزمن" ‪"outdent":‬‬
‫‪",‬شرائح" ‪"segments":‬‬
‫‪",‬تقسيم المهمة" ‪"splitTask":‬‬
‫‪",‬مهمة الدمج" ‪"mergeTask":‬‬
‫‪",‬اليسار" ‪"left":‬‬
‫"حق" ‪"right":‬‬
‫}‬
‫‪Copyright © 2001 -2024 Syncfusion Inc.‬‬ ‫‪611‬‬

}
});
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return <GanttComponent dataSource={data} locale='ar-AE'
allowSelection={true} taskFields={taskFields} enableRtl= {true} height =
'450px'>
</GanttComponent>
};
INDEX.TSX
setCulture('ar-AE');
L10n.load({
'ar-AE': {
"gantt": {
"emptyRecord": "‫"ال سجالت لعرضها‬,
"id": "‫"هوية شخصية‬,
"name": "‫"اسم‬,
"startDate": "‫"تاريخ البدء‬,
"endDate": "‫"تاريخ االنتهاء‬,
"duration": "‫"المدة الزمنية‬,
"progress": "‫"تقدم‬,
"dependency": "‫"االعتماد‬,
"notes": "‫"مالحظات‬,
"baselineStartDate": "‫"تاريخ البدء األساسي‬,
"baselineEndDate": "‫"تاريخ نهاية خط األساس‬,
"taskMode": "‫"وضع المهام‬,
"changeScheduleMode": "‫"تغيير وضع الجدول‬,
"subTasksStartDate": "‫"تاريخ بدء المهام الفرعية‬,
"subTasksEndDate": "‫"تاريخ انتهاء المهام الفرعية‬,
"scheduleStartDate": "‫"جدولة تاريخ البدء‬,
"scheduleEndDate": "‫"تاريخ انتهاء الجدول الزمني‬,
"auto": "‫"تلقاءي‬,
"manual": "‫"كتيب‬,
"type": "‫"اكتب‬,
"offset": "‫"عوض‬,
"resourceName": "‫"مصادر‬,
"resourceID": "‫"معرف المورد‬,
"day": "‫"يوم‬,
"hour": "‫"ساعة‬,
"minute": "‫"دقيقة‬,
"days": "‫"أيام‬,

‫‪Gantt‬‬ ‫‪Global local in React Gantt component‬‬
‫‪",‬ساعات" ‪"hours":‬‬
‫‪",‬الدقائق" ‪"minutes":‬‬
‫‪",‬جنرال لواء" ‪"generalTab":‬‬
‫‪",‬أعمدة مخصصة" ‪"customTab":‬‬
‫‪",‬اكتب مالحظات" ‪"writeNotes":‬‬
‫‪",‬مهمة جديدة" ‪"addDialogTitle":‬‬
‫‪",‬معلومات المهمة" ‪"editDialogTitle":‬‬
‫‪",‬حفظ" ‪"saveButton":‬‬
‫‪",‬إضافة" ‪"add":‬‬
‫‪",‬تعديل" ‪"edit":‬‬
‫‪",‬تحديث" ‪"update":‬‬
‫‪",‬حذف" ‪"delete":‬‬
‫‪",‬إلغاء" ‪"cancel":‬‬
‫‪",‬بحث" ‪"search":‬‬
‫‪",‬مهمة " ‪"task":‬‬
‫‪",‬مهام " ‪"tasks":‬‬
‫‪",‬تكبير" ‪"zoomIn":‬‬
‫‪",‬تصغير" ‪"zoomOut":‬‬
‫‪",‬تكبير لتناسب" ‪"zoomToFit":‬‬
‫‪",‬اكسل التصدير" ‪"excelExport":‬‬
‫‪ CSV",‬تصدير" ‪"csvExport":‬‬
‫‪",‬توسيع الكل" ‪"expandAll":‬‬
‫‪",‬انهيار جميع" ‪"collapseAll":‬‬
‫‪",‬الجدول الزمني التالي" ‪"nextTimeSpan":‬‬
‫‪",‬الجدول الزمني السابق" ‪"prevTimeSpan":‬‬
‫‪",‬حسنا" ‪"okText":‬‬
‫‪",‬هل أنت متأكد أنك تريد حذف السجل؟" ‪"confirmDelete":‬‬
‫‪",‬من عند" ‪"from":‬‬
‫‪",‬إلى" ‪"to":‬‬
‫‪",‬رابط المهمة" ‪"taskLink":‬‬
‫‪",‬بطئ" ‪"lag":‬‬
‫‪",‬بداية" ‪"start":‬‬
‫‪",‬إنهاء" ‪"finish":‬‬
‫‪",‬أدخل القيمة" ‪"enterValue":‬‬
‫قمت بنقل {'‪}' 0‬للبدء قبل انتهاء" ‪"taskBeforePredecessor_FS":‬‬
‫ً '}‪'{1‬‬
‫قمت بنقل {'‪}' 0‬بعيدا عن {'‪}' 1‬ويتم" ‪"taskAfterPredecessor_FS":‬‬
‫ربط المهمتين ‪.‬ونتيجة لذلك ‪ ،‬ال يمكن احترام الروابط ‪.‬حدد إجراء‬
‫قمت بنقل {'‪}' 0‬للبدء قبل أن يبدأ" ‪"taskBeforePredecessor_SS":‬‬
‫ً واحدا '}‪'{1‬‬
‫‪",‬أدناه للقيام به‬
‫'قمت بنقل {'‪}' 0‬للبدء بعد بدء {'‪"taskAfterPredecessor_SS": "}1‬‬
‫قمت بنقل {'‪}' 0‬لإلنهاء قبل انتهاء" ‪"taskBeforePredecessor_FF":‬‬
‫ً '}‪'{1‬‬
‫قمت بنقل {'‪}' 0‬لإلنهاء بعد انتهاء" ‪"taskAfterPredecessor_FF":‬‬
‫ً '}‪'{1‬‬
‫قمت بنقل {'‪}' 0‬بعيدا عن {'‪}' 1‬لبدء" ‪"taskBeforePredecessor_SF":‬‬
‫التشغيل وترتبط المهمتان ‪.‬ونتيجة لذلك ‪ ،‬ال يمكن احترام الروابط ‪.‬حدد إجراء‬
‫ً‬
‫‪Copyright © 2001 -2024 Syncfusion Inc.‬‬ ‫‪613‬‬

"taskAfterPredecessor_SF": "}1'{ ‫ '}لإلنهاء بعد بدء‬0'{ ‫'قمت بنقل‬

‫إجراء واحدا أدناه‬
ً ‫حدد‬. ‫ ال يمكن احترام الروابط‬، ‫ونتيجة لذلك‬. ‫وربط المهمتين‬
‫"للقيام به‬,
"taskInformation": "‫"معلومات المهمة‬,
"deleteTask": "‫"حذف المهمة‬,
"deleteDependency": "‫"حذف التبعية‬,
"convert": "‫"تحويل‬,
"save": "‫"حفظ‬,
"above": "‫"في االعلى‬,
"below": "‫"أدناه‬,
"child": "‫"طفل‬,
"milestone": "‫"معلما‬,
"toTask": "‫"لمهمة‬,
"toMilestone": "‫"إلى معلم‬,
"eventMarkers": "‫"عالمات الحدث‬,
"leftTaskLabel": "‫"تسمية المهمة اليسرى‬,
"rightTaskLabel": "‫"تسمية المهمة الصحيحة‬,
"timelineCell": "‫"خلية الجدول الزمني‬,
"confirmPredecessorDelete": "‫هل أنت متأكد أنك تريد إزالة رابط‬
‫"التبعية؟‬,
"unit": "‫"وحدة‬,
"work": "‫"عمل‬,
"taskType": "‫"نوع المهمة‬,
"unassignedTask": "‫"مهمة غير محددة‬,
"group": "‫"مجموعة‬,
"indent": "‫"مسافة بادئة‬,
"outdent": "‫"عفا عليها الزمن‬,
"segments": "‫"شرائح‬,
"splitTask": "‫"تقسيم المهمة‬,
"mergeTask": "‫"مهمة الدمج‬,
"left": "‫"اليسار‬,
"right": "‫"حق‬
}
}
});
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return <GanttComponent dataSource={data} locale='ar-AE'
allowSelection={true} taskFields={taskFields} enableRtl= {true} height =
'450px'>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>

Gantt Style and appearance in React Gantt component

/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
See Also
• Internationalization
• Localization
Style and appearance in React Gantt component

To modify the Gantt Chart appearance, you need to override the default CSS of gantt chart. Please find
the list of CSS classes and its corresponding section in Gantt Chart. Also, you have an option to create
your own custom theme for all the JavaScript controls using our Theme Studio.
Section | CSS Class | Purpose of Class
Root|e-gantt|This class is in the root element (div) of the gantt chart control.
Header|e-gridheader|This class is added in the root element of header element. In this class, You can
override thin line between header and content of the gantt chart.
||e-table|This class is added at 'table' of the gantt chart header. This CSS class makes table width as 100
%.
||e-columnheader|This class is added at 'tr' of the gantt chart header.

Grid Content|e-gridcontent|This class is added at root of body content. This is to override background
color of the body.
||e-table|This class is added to table of content. This CSS class makes table width as 100 %.
||e=row|This class is added to rows of gantt chart.
||e-altrow|This class is added to alternate rows of gantt chart. This is to override alternate row color of
the gantt chart.
||e-rowcell|This class is added to all cells in the gantt chart. This is to override cells appearance and
styling.
Chart Content|e-gantt-chart|This class is added to the chart side of the gantt chart.
||e-chart-row|This class is added to rows of gantt chart.
Timeline|e-timeline-header-container|This class is added to timeline of the gantt chart.
||e-header-cell-label|This class is added to the header cell of the timeline.
||e-weekend-header-cell|This class is added to the weekend cells.
Taskbar|e-taskbar-main-container|This class is added to taskbar of the gantt chart.
||e-gantt-parent-taskbar|This class is added to the parent task bar of the gantt chart.
||e-gantt-milestone|This class is added to the milestone tasks of the gantt chart.
||e-gantt-unscheduled-taskbar|This class is added to the unscheduled tasks.
||e-gantt-manualparenttaskbar|This class is added to the manual scheduled parent taskbar.
||e-gantt-child-manualtaskbar|This class is added to the manual scheduled child taskbar.
||e-gantt-unscheduled-manualtask|This class is added to the manual unscheduled tasks.
Splitter|e-split-bar|This class is added to the gantt chart splitter.
||e-resize-handler|This class is added to the resize handler of the gantt chart splitter.
||e-arrow-left|This class is added to the left arrow of the resize handler.
||e-arrow=right|This class is added to the right arrow of the resize handler.
Connector Lines|e-line|This class is added to the connector lines.
||e-connector-line-right-arrow|This class is added to the right arrow of the connector line.
||e-connector-line-left-arrow|This class is added to the left arrow of the connector line.
Labels|e-task-label|This class is added to the task labels.
||e-right-label-container|This class is added to the right label.
||e-left-label-container|This class is added to the left label.
Event Markers|e-event-markers|This class is added to the event markers.
Baseline|e-baseline-bar|This class is added to the baseline.
||e-baseline-gantt-milestone-container|This class is added to the baseline of milestone tasks.
Tooltip|e-gantt-tooltip|This class is added to the tooltip.

Grid lines
In the Gantt component, you can show or hide the grid lines in the TreeGrid side and chart side by using
the gridLines property.
The following options are available in the Gantt component for rendering the grid lines:
• Horizontal: The horizontal grid lines alone will be visible.

• Vertical: The vertical grid lines alone will be visible.
• Both: Both the horizontal and vertical grid lines will be visible on the TreeGrid and chart sides.
• None: Gridlines will not be visible on TreeGrid and chart sides.
By default, the gridLines property is set to Horizontal type.

The following code example shows how to change the gridlines rendering mode in the Gantt
component.
INDEX.JSX
import {data} from './datasource';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return <GanttComponent dataSource={data} gridLines='Both'
</GanttComponent>
};
INDEX.TSX
import {data} from './datasource';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
return <GanttComponent dataSource={data} gridLines='Both'
</GanttComponent>

Gantt Timezone in React Gantt component
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Timezone in React Gantt component

The Gantt makes use of the current system time zone by default. If it needs to follow some other user-
specific time zone, then the timezone property needs to be used.
Understanding date manipulation in JavaScript
The new Date() in JavaScript returns the exact current date object with complete time and timezone
information. For example, it may return value such as Wed Dec 12 2018 05:23:27 GMT+0530 (India
Standard Time) which indicates that the current date is December 12, 2018 and the current time is
5.23 AM on browsers following the IST timezone.

Display same time everywhere with no time difference

Setting timezone to UTC for Gantt will display the same time as in the database for all the users in
different time zone.
INDEX.JSX
import { GanttComponent, Inject,Edit, Selection } from '@syncfusion/ej2-
react-gantt';
function App(){
const timezoneData = [
{ taskID: 1, taskName: 'Project Schedule', startDate: new
Date('02/04/2019 08:00'), endDate: new Date('03/10/2019')},
{ taskID: 2, taskName: 'Planning', startDate: new Date('02/04/2019
08:00'), endDate: new Date('02/10/2019'), parentID: 1},
{ taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/04/2019
08:00'), endDate: new Date('02/10/2019'), duration: 6, progress: '60',
parentID: 2 },
{ taskID: 4, taskName: 'Plan budget', startDate: new Date('02/04/2019
parentID: 2 },
{ taskID: 5, taskName: 'Allocate resources', startDate: new
Date('02/04/2019 08:00'), endDate: new Date('02/10/2019'), duration: 6,
progress: '75', parentID: 2 },
{ taskID: 6, taskName: 'Planning complete', startDate: new
predecessor: '3FS,4FS,5FS', parentID: 2 },
{ taskID: 7, taskName: 'Design', startDate: new Date('02/13/2019
08:00'), endDate: new Date('02/17/2019 08:00'), parentID: 1, },
{ taskID: 8, taskName: 'Software Specification', startDate: new
progress: '60', predecessor: '6FS', parentID: 7, },
{ taskID: 9, taskName: 'Develop prototype', startDate: new
{ taskID: 10, taskName: 'Get approval from customer', startDate: new
Date('02/16/2019 08:00'), endDate: new Date('02/17/2019 08:00'), duration:
2, progress: '100', predecessor: '9FS', parentID: 7 },
{ taskID: 11, taskName: 'Design complete', startDate: new
0, predecessor: '10FS', parentID: 7 }
];
id: 'taskID',
name: 'taskName',
};
topTier: {
unit: 'Day',
format: 'MMM dd, yyyy'

},
bottomTier: {
unit: 'Hour',
format: 'hh:mm a'
}
};
let dayWorkingTime = [{ from: 0, to: 24 }];
return <GanttComponent dataSource={timezoneData} taskFields={taskFields}
timezone='UTC' height='450px' dateFormat='hh:mm a'
dayWorkingTime={dayWorkingTime} durationUnit='Hour'
includeWeekend={true}>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject,Edit, Selection } from '@syncfusion/ej2-
react-gantt';
function App(){
const timezoneData: any = [
{ taskID: 1, taskName: 'Project Schedule', startDate: new
Date('02/04/2019 08:00'), endDate: new Date('03/10/2019')},
{ taskID: 2, taskName: 'Planning', startDate: new Date('02/04/2019
08:00'), endDate: new Date('02/10/2019'), parentID: 1},
{ taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/04/2019
parentID: 2 },
{ taskID: 4, taskName: 'Plan budget', startDate: new Date('02/04/2019
parentID: 2 },
{ taskID: 5, taskName: 'Allocate resources', startDate: new
progress: '75', parentID: 2 },
{ taskID: 6, taskName: 'Planning complete', startDate: new
predecessor: '3FS,4FS,5FS', parentID: 2 },
{ taskID: 7, taskName: 'Design', startDate: new Date('02/13/2019
08:00'), endDate: new Date('02/17/2019 08:00'), parentID: 1, },
{ taskID: 8, taskName: 'Software Specification', startDate: new
{ taskID: 9, taskName: 'Develop prototype', startDate: new
{ taskID: 10, taskName: 'Get approval from customer', startDate: new
2, progress: '100', predecessor: '9FS', parentID: 7 },
{ taskID: 11, taskName: 'Design complete', startDate: new
0, predecessor: '10FS', parentID: 7 }
];


id: 'taskID',
name: 'taskName',
};
topTier: {
unit: 'Day',
},
bottomTier: {
unit: 'Hour',
format: 'hh:mm a'
}
};
let dayWorkingTime: any = [{ from: 0, to: 24 }];
return <GanttComponent dataSource={timezoneData} taskFields={taskFields}
timezone='UTC' height='450px' dateFormat='hh:mm a'
dayWorkingTime={dayWorkingTime} durationUnit='Hour'
includeWeekend={true}>
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;

position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
CRUD operations with timezone

CRUD operations can be performed with timezone, and the gantt is rendered based on the timezone
specified in the load time. All the editing actions will be done based on the user timezone, but on
database save action, we have reversed this conversion to local time and provided data to client side
events for better understanding purpose. Refer to the following code example.
INDEX.JSX
import { GanttComponent, Inject, Selection, Edit } from '@syncfusion/ej2-
react-gantt';
function App(){
const timezoneData= [
{
taskID: 1,
taskName: 'Project Schedule',
startDate: new Date('02/04/2019 08:00'),
endDate: new Date('03/10/2019')
},
{
taskID: 2,
taskName: 'Planning',
endDate: new Date('02/10/2019'),
parentID: 1
},
{
taskID: 3,
taskName: 'Plan timeline',
duration: 6,
progress: '60',
parentID: 2
},
{
taskID: 4,
taskName: 'Plan budget',
duration: 6,
progress: '90',

parentID: 2
},
{
taskID: 5,
taskName: 'Allocate resources',
duration: 6,
progress: '75',
parentID: 2
},
{
taskID: 6,
taskName: 'Planning complete',
duration: 0,
predecessor: '3FS,4FS,5FS',
parentID: 2
},
{
taskID: 7,
taskName: 'Design',
endDate: new Date('02/17/2019 08:00'),
parentID: 1
},
{
taskID: 8,
taskName: 'Software Specification',
duration: 3,
progress: '60',
predecessor: '6FS',
parentID: 7
},
{
taskID: 9,
taskName: 'Develop prototype',
duration: 3,
progress: '100',
predecessor: '6FS',
parentID: 7
},
{
taskID: 10,
taskName: 'Get approval from customer',
endDate: new Date('02/17/2019 08:00'),
duration: 2,
progress: '100',
predecessor: '9FS',
parentID: 7
},

{
taskID: 11,
taskName: 'Design complete',
endDate: new Date('02/17/2019 08:00'),
duration: 0,
predecessor: '10FS',
parentID: 7
}];
id: 'taskID',
name: 'taskName',
};
allowAdding: true,
allowEditing: true,
};
const timelineSettings= {
topTier: {
unit: 'Day',
},
bottomTier: {
unit: 'Hour',
format: 'hh:mm a'
}
};
if(args.action == "TaskbarEditing") {
console.log(args.data.ganttProperties.endDate);
}
}
let dayWorkingTime = [{ from: 0, to: 24 }];
return <GanttComponent dataSource={timezoneData}
taskFields={taskFields} editSettings={editSettings} allowSelection={true}
durationUnit='Hour' actionComplete={actionComplete} height = '450px'
includeWeekend={true} dayWorkingTime={dayWorkingTime}
timelineSettings={timelineSettings} >
</GanttComponent>
};
INDEX.TSX

import { GanttComponent, Inject, Selection, Edit } from '@syncfusion/ej2-

react-gantt';
function App(){
const timezoneData: any = [
{
taskID: 1,
taskName: 'Project Schedule',
endDate: new Date('03/10/2019')
},
{
taskID: 2,
taskName: 'Planning',
parentID: 1
},
{
taskID: 3,
taskName: 'Plan timeline',
duration: 6,
progress: '60',
parentID: 2
},
{
taskID: 4,
taskName: 'Plan budget',
duration: 6,
progress: '90',
parentID: 2
},
{
taskID: 5,
taskName: 'Allocate resources',
duration: 6,
progress: '75',
parentID: 2
},
{
taskID: 6,
taskName: 'Planning complete',
duration: 0,
predecessor: '3FS,4FS,5FS',
parentID: 2
},
{
taskID: 7,
taskName: 'Design',

endDate: new Date('02/17/2019 08:00'),

parentID: 1
},
{
taskID: 8,
taskName: 'Software Specification',
duration: 3,
progress: '60',
predecessor: '6FS',
parentID: 7
},
{
taskID: 9,
taskName: 'Develop prototype',
duration: 3,
progress: '100',
predecessor: '6FS',
parentID: 7
},
{
taskID: 10,
taskName: 'Get approval from customer',
endDate: new Date('02/17/2019 08:00'),
duration: 2,
progress: '100',
predecessor: '9FS',
parentID: 7
},
{
taskID: 11,
taskName: 'Design complete',
endDate: new Date('02/17/2019 08:00'),
duration: 0,
predecessor: '10FS',
parentID: 7
}];
id: 'taskID',
name: 'taskName',
};
allowAdding: true,
allowEditing: true,

};
topTier: {
unit: 'Day',
},
bottomTier: {
unit: 'Hour',
format: 'hh:mm a'
}
};
function actionComplete(args: any) {
if(args.action == "TaskbarEditing") {
console.log(args.data.ganttProperties.endDate);
}
}
let dayWorkingTime: any = [{ from: 0, to: 24 }];
return <GanttComponent dataSource={timezoneData}
taskFields={taskFields} editSettings={editSettings} allowSelection={true}
durationUnit='Hour' actionComplete={actionComplete} height = '450px'
includeWeekend={true} dayWorkingTime={dayWorkingTime}
timelineSettings={timelineSettings} >
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;

}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Timezone methods
offset
This method is used to calculate the difference between passed UTC date and timezone.
| Parameters | Type | Description |
|------------|------|-------------|
| Date | Date | UTC time as date object.|
| Timezone | String | Timezone.|
Returns number
`ts
// Assume your local timezone as IST/UTC+05:30
let timezone: Timezone = new Timezone();
let date: Date = new Date(2018,11,5,15,25,11);
let timeZoneOffset: number = timezone.offset(date,"Europe/Paris");
console.log(timeZoneOffset); //-60
`
convert
This method is used to convert the passed date from one timezone to another timezone.
|------------|------|-------------|
| Date | Date | UTC time as date object.|
| fromOffset | number/string | Timezone from which date need to be converted.|
| toOffset | number/string | Timezone to which date need to be converted.|
Returns Date
`ts

Gantt How To
let convertedDate: Date = timezone.convert(date, "Europe/Paris", "Asia/Tokya");

let convertedDate1: Date = timezone.convert(date, 60, -360);
console.log(convertedDate); //2018-12-05T08:55:11.000Z
console.log(convertedDate1); //2018-12-05T16:55:11.000Z
`
remove
This method is used to remove the time difference between passed UTC date and timezone.
|------------|------|-------------|
| Date | Date | UTC as date object.|
| Timezone | String | Timezone.|
Returns Date
`ts
let convertedDate: Date = timezone.remove(date, "Europe/Paris");
console.log(convertedDate); //2018-12-05T14:25:11.000Z
`
How To
Open add edit dialog in React Gantt component
Gantt add and edit dialogs can be opened dynamically by using openAddDialog and openEditDialog
methods. The following code example shows how to open add and dialog on separate button click
actions.
INDEX.JSX
react-gantt';
taskFields = {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance;

Gantt How To
editOptions = {
allowEditing: true,
allowAdding: true
};
editHandler() {
this.ganttInstance.editModule.dialogModule.openEditDialog();
}
addHandler() {
this.ganttInstance.editModule.dialogModule.openAddDialog();
}
render() {
return (<div>
<ButtonComponent onClick={this.addHandler.bind(this)}>Open Add
Dialog</ButtonComponent>
<ButtonComponent onClick={this.editHandler.bind(this)}>Open Edit
<GanttComponent dataSource={data} ref={gantt => this.ganttInstance =
gantt} taskFields={this.taskFields} allowSelection={true}
editSettings={this.editOptions} height='450px'>
}
}
;
INDEX.TSX
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
public ganttInstance:any;
public editOptions: EditSettingsModel = {
allowEditing: true,
allowAdding:true
};
public editHandler(){
this.ganttInstance.editModule.dialogModule.openEditDialog();
}
public addHandler(){
this.ganttInstance.editModule.dialogModule.openAddDialog();
}
render() {
return (<div>

Gantt How To
<ButtonComponent onClick= { this.addHandler.bind(this)}>Open Add

<ButtonComponent onClick= { this.editHandler.bind(this)}>Open Edit
<GanttComponent dataSource={data} ref={gantt => this.ganttInstance =
gantt} taskFields={this.taskFields} allowSelection={true}
editSettings={this.editOptions} height = '450px'>
}
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
NOTE: We should select any one of the row in Gantt to open the edit dialog.

Gantt How To
Change schedule dates in React Gantt component

In the Gantt component, you can change the schedule start and end dates by clicking the custom button
programmatically using the updateProjectDates method. You can pass the start and end dates as
method arguments to the updateProjectDates method. You can also pass the Boolean value as an
additional parameter, which is used to round-off the schedule start and end dates displayed in Gantt
timeline.
INDEX.JSX
function App (){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
ganttInstance.updateProjectDates(new Date('01/10/2019'),new
Date('06/20/2019'),true);
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Update
ScheduleDates</ButtonComponent>
};
INDEX.TSX
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

Gantt How To
ganttInstance.updateProjectDates(new Date('01/10/2019'),new
Date('06/20/2019'),true);
}
return (<div>
<ButtonComponent onClick= { clickHandler}>Update
ScheduleDates</ButtonComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Gantt How To
Copy paste records in React Gantt component

You can copy and paste a record in the Gantt chart by using the addRecord method and custom
context menu. It is also possible to copy and paste the parent record with multiple hierarchical child
records on the required position.
INDEX.JSX
import { GanttComponent, Inject, Edit, Selection, ContextMenu } from
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const contextMenuItems = [{ text: 'Copy', target: '.e-content',
id: 'copy' },
{ text: 'Paste', target: '.e-content', id: 'paste' }
];
let copiedRecord;
let gantt;
function contextMenuClick(args) {
if (args.item.id === 'copy') {
copiedRecord = args.rowData;
copiedRecord.taskData.TaskID = gantt.currentViewData.length
+ 1;
}
if (args.item.id === 'paste') {
gantt.addRecord(copiedRecord.taskData,'Below',args.rowData.index);
if(copiedRecord.hasChildRecords) {
addChildRecords(copiedRecord, args.rowData.index + 1);
}
copiedRecord = undefined;
}
};
function contextMenuOpen(args ) {
if (copiedRecord) {
args.hideItems.push('Copy');
} else {
args.hideItems.push('Paste');
}

Gantt How To
}
};
function addChildRecords(record, index) {
for(var i=0; i<record.childRecords.length; i++) {
var childRecord = record.childRecords[i];
childRecord.taskData.TaskID = gantt.currentViewData.length
+ 1;
gantt.addRecord(childRecord.taskData,'Below',index);
if(childRecord.hasChildRecords) {
addChildRecords(childRecord, index + (i+1));
}
}
};
editSettings={editSettings} enableContextMenu={true}
contextMenuItems={contextMenuItems} contextMenuClick={contextMenuClick}
contextMenuOpen={contextMenuOpen} ref={gantt => gantt = gantt}
height='450px'>
<Inject services={[Edit, ContextMenu, Selection]}/>
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, Selection, ContextMenu } from
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const contextMenuItems = [{ text: 'Copy', target: '.e-content', id:
'copy' },
{ text: 'Paste', target: '.e-content', id: 'paste' }
];
let copiedRecord: any;

let gantt:any;

Gantt How To
function contextMenuClick(args:any) {
if (args.item.id === 'copy') {
copiedRecord = args.rowData;
copiedRecord.taskData.TaskID = gantt.currentViewData.length + 1;
}
if (args.item.id === 'paste') {
gantt.addRecord(copiedRecord.taskData,'Below',args.rowData.index);
if(copiedRecord.hasChildRecords) {
addChildRecords(copiedRecord, args.rowData.index + 1);
}
copiedRecord = undefined;
}
};
function contextMenuOpen(args:any ) {
if (copiedRecord) {
args.hideItems.push('Copy');
} else {
args.hideItems.push('Paste');
}
}
};
function addChildRecords(record: any, index: any) {
for(var i=0; i<record.childRecords.length; i++) {
var childRecord = record.childRecords[i];
childRecord.taskData.TaskID = gantt.currentViewData.length +
1;
gantt.addRecord(childRecord.taskData,'Below',index);
if(childRecord.hasChildRecords) {
addChildRecords(childRecord, index + (i+1));
}
}
};
editSettings={editSettings} enableContextMenu={true}
ref={gantt => gantt = gantt} height='450px'>
<Inject services={[Edit, ContextMenu, Selection]}/>
</GanttComponent>;
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>

Gantt How To
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Maintain record index in React Gantt component

Row dropped record’s index position can be maintained in the Gantt chart by changing the database
table index position using the rowDrop event. In this event, the fromIndex and dropIndex values can
be passed to the server side using Ajax request. On the server side, the insert and insertAtTop methods
are used to update the row index position. The following code snippets explain the solution.
`ts
import { GanttComponent, Inject, RowDD, Edit, Selection } from '@syncfusion/ej2-react-gantt';
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',

Gantt How To
child: 'subtasks'
};
url: 'https://localhost:44379/Home/UrlDatasource',
adaptor: new UrlAdaptor,
crossDomain: true,
batchUrl: 'https://localhost:44379/Home/BatchUpdate'
});
}
rowDrop(args) {
let record = this.flatData[args.fromIndex][this.taskFields.id];
let record2 = this.flatData[args.dropIndex][this.taskFields.id];
let data: IGanttData = args.data[0];
let uri = 'https://localhost:44379/Home/RowDropMethod';
let dragdropdata = {
record: data[0].taskData,
position: args.dropIndex,
dragidMapping: record,
dropidMapping: record2
};
let ajax = new Ajax(
{
url: uri,
type: 'POST',
contentType: "application/json",
data: JSON.stringify(dragdropdata),
});
ajax.send();
};
render() {

Gantt How To
return <GanttComponent dataSource={projectNewData} taskFields={this.taskFields}

allowRowDragAndDrop={true} height='450px'>
<Inject services={[RowDD, Edit, Selection]}/>
</GanttComponent>;
}
}
;
`
`ts
public IActionResult RowDropMethod([FromBody]DragDropData value)
{
var data = new CRUDModel();
copyRecord = true;
if (value.position == "bottomSegment" || value.position == "topSegment")
{
{
var childCount = 0;
int parent1 = (int)value.record.parentID;
childCount += FindChildRecords(parent1);
if (childCount == 1)
{
var i = 0;
for (; i < DataList.Count; i++)
{
if (DataList[i].taskID == parent1)
{
DataList[i].isParent = false;
break;
}
if (DataList[i].taskID == value.record.taskID)
{
DataList[i].parentID = null;

Gantt How To
break;
}
}
}
}
DataList.Remove(DataList.Where(ds => ds.taskID == value.dragidMapping).FirstOrDefault());
var j = 0;
for (; j < DataList.Count; j++)
{
if (DataList[j].taskID == value.dropidMapping)
{
value.record.parentID = DataList[j].parentID;
break;
}
}
data.Value = value.record;
if (value.position == "bottomSegment")
{
this.Insert(data, value.dropidMapping);
}
else if (value.position == "topSegment")
{
this.InsertAtTop(data, value.dropidMapping);
}
}
else if (value.position == "middleSegment")
{
DataList.Remove(DataList.Where(ds => ds.taskID == value.dragidMapping).FirstOrDefault());
value.record.parentID = value.dropidMapping;
FindDropdata(value.dropidMapping);
data.Value = value.record;
this.Insert(data, value.dropidMapping);
}

Gantt How To
copyRecord = false;
return Json(new { updatedRecords = value.record });
}
`
Custom field in React Gantt component
Generally in Gantt, Custom fields are displayed in the Custom Tab of the Add/Edit dialogs. However,
they can be included in the General Tab of Add/Edit Dialog Box using actionBegin and actionComplete
events. These events are used to append the custom field to the dialog box. The following code snippets
demonstrate the solution.
INDEX.JSX
import { GanttComponent, Inject, Edit, Selection, ColumnsDirective,
ColumnDirective, AddDialogFieldsDirective, EditDialogFieldsDirective,
EditDialogFieldDirective, AddDialogFieldDirective, Toolbar } from
import { CheckBox } from "@syncfusion/ej2-buttons";
import { TextBox, NumericTextBox, MaskedTextBox } from "@syncfusion/ej2-
inputs";
import { DatePicker, DateTimePicker } from "@syncfusion/ej2-calendars";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
mode: "Dialog"
};
'ExpandAll', 'CollapseAll', 'Search'];
let divElement;
let ganttInstance;
const inputs = {
booleanedit: CheckBox,
dropdownedit: DropDownList,
datepickeredit: DatePicker,
datetimepickeredit: DateTimePicker,
maskededit: MaskedTextBox,
numericedit: NumericTextBox,
stringedit: TextBox

Gantt How To
};
function actionBegin(args) {
if (args.requestType === "beforeOpenEditDialog" || args.requestType
=== "beforeOpenAddDialog" ) {
var column = ganttInstance.columnByField["CustomField"];
divElement = ganttInstance.createElement("div", {
className: "e-edit-form-column"
});
var inputElement;
inputElement = ganttInstance.createElement("input", {
attrs: {
type: "text",
id: ganttInstance.controlId + "" + column.field,
name: column.field,
title: column.field
}
});
divElement.appendChild(inputElement);
var input = {
enabled: true,
floatLabelType: "Auto",
placeholder: "CustomField",
value: args.rowData.CustomField
};
var inputObj = new inputs[column.editType](input);
inputObj.appendTo(inputElement);
}
};
if (args.requestType === "openEditDialog" || args.requestType ===
"openAddDialog") {
var generalTab = document.getElementById(
ganttInstance.controlId + "GeneralTabContainer"
);
generalTab.appendChild(divElement);
}
};
allowSelection={true} editSettings={editOptions}
toolbar={toolbarOptions} actionBegin={actionBegin}
actionComplete={actionComplete} ref={gantt => ganttInstance = gantt}
height='400px'>
<ColumnsDirective>
<ColumnDirective field='EndDate'
<ColumnDirective field='CustomField'

Gantt How To
</ColumnsDirective>
<AddDialogFieldsDirective>
<AddDialogFieldDirective type='General'
headerText='General'></AddDialogFieldDirective>
<AddDialogFieldDirective
type='Dependency'></AddDialogFieldDirective>
type='Resources'></AddDialogFieldDirective>
<AddDialogFieldDirective type='Notes'></AddDialogFieldDirective>
</AddDialogFieldsDirective>
<EditDialogFieldsDirective>
<EditDialogFieldDirective type='General'
headerText='General'></EditDialogFieldDirective>
<EditDialogFieldDirective
type='Dependency'></EditDialogFieldDirective>
type='Resources'></EditDialogFieldDirective>
type='Notes'></EditDialogFieldDirective>
</EditDialogFieldsDirective>
</GanttComponent>;
};
INDEX.TSX
import { GanttComponent, Inject, Edit, Selection, ColumnsDirective,
ColumnDirective, AddDialogFieldsDirective, EditDialogFieldsDirective,
EditDialogFieldDirective, AddDialogFieldDirective, Toolbar } from
import { CheckBox } from "@syncfusion/ej2-buttons";
import { TextBox, NumericTextBox, MaskedTextBox } from "@syncfusion/ej2-
inputs";
import { DatePicker, DateTimePicker } from "@syncfusion/ej2-calendars";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
function App () {
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowAdding: true,
allowEditing: true,
mode: "Dialog"
};

Gantt How To

'ExpandAll', 'CollapseAll', 'Search'];
let divElement: any;

let ganttInstance;
const inputs = {
booleanedit: CheckBox,
dropdownedit: DropDownList,
datepickeredit: DatePicker,
datetimepickeredit: DateTimePicker,
maskededit: MaskedTextBox,
numericedit: NumericTextBox,
stringedit: TextBox
};
function actionBegin(args) {
if (args.requestType === "beforeOpenEditDialog" || args.requestType
=== "beforeOpenAddDialog" ) {
var column = ganttInstance.columnByField["CustomField"];
divElement = ganttInstance.createElement("div", {
className: "e-edit-form-column"
});
var inputElement: any;
inputElement = ganttInstance.createElement("input", {
attrs: {
type: "text",
id: ganttInstance.controlId + "" + column.field,
name: column.field,
title: column.field
}
});
divElement.appendChild(inputElement);
var input = {
enabled: true,
floatLabelType: "Auto",
placeholder: "CustomField",
value: args.rowData.CustomField
};
var inputObj = new inputs[column.editType](input);
inputObj.appendTo(inputElement);
}
};
if (args.requestType === "openEditDialog" || args.requestType ===
"openAddDialog") {
var generalTab:any = document.getElementById(
ganttInstance.controlId + "GeneralTabContainer"
);
generalTab.appendChild(divElement);
}
};
allowSelection={true} editSettings={editOptions}
toolbar={toolbarOptions} actionBegin={actionBegin}
actionComplete={actionComplete} ref={gantt => ganttInstance = gantt}
height='400px'>
<ColumnsDirective>

Gantt How To
<ColumnDirective field='EndDate'
<ColumnDirective field='CustomField'
</ColumnsDirective>
<AddDialogFieldsDirective>
<AddDialogFieldDirective type='General'
headerText='General'></AddDialogFieldDirective>
type='Dependency'></AddDialogFieldDirective>
type='Resources'></AddDialogFieldDirective>
<AddDialogFieldDirective type='Notes'></AddDialogFieldDirective>
</AddDialogFieldsDirective>
<EditDialogFieldsDirective>
<EditDialogFieldDirective type='General'
headerText='General'></EditDialogFieldDirective>
type='Dependency'></EditDialogFieldDirective>
type='Resources'></EditDialogFieldDirective>
type='Notes'></EditDialogFieldDirective>
</EditDialogFieldsDirective>
</GanttComponent>;
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />

Gantt How To
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Maintain zoom to fit in React Gantt component

In the Gantt control, While performing edit actions or dynamically change dataSource, the timeline gets
refreshed. When zoomToFit toolbar item is clicked and perform editing actions or dynamically change
dataSource, the timeline gets refreshed. So that, the timeline will not fit to the project any more.
Maintain zoomToFit after edit actions
We can maintain zoomToFit after editing actions(cell edit,dialog edit,taskbar edit) by using fitToProject
method in actionComplete and taskbarEdited event.
INDEX.JSX
import { GanttComponent, Inject, Toolbar, Edit, Selection}from
function App (){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
};
const toolbarOptions = ['Edit','ZoomToFit'];

Gantt How To
if ((args.action === "CellEditing" || args.action === "DialogEditing")

&& args.requestType === "save") {
ganttInstance.dataSource = data;
ganttInstance.fitToProject();
}
};
function taskbarEdited(args) {
if (args) {
}
};
toolbar={toolbarOptions} editSettings={editSettings}
actionComplete={actionComplete} taskbarEdited={taskbarEdited} height =
<Inject services={[Toolbar, Edit, Selection]} />
</GanttComponent>
};
INDEX.TSX
import { GanttComponent, Inject, Toolbar, Edit, Selection, ToolbarItem }from
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
};
const toolbarOptions: ToolbarItem[] = ['Edit','ZoomToFit'];
if ((args.action === "CellEditing" || args.action === "DialogEditing")
&& args.requestType === "save") {
}
};
function taskbarEdited(args) {
if (args) {
}

Gantt How To
};
toolbar={toolbarOptions} editSettings={editSettings}
actionComplete={actionComplete} taskbarEdited={taskbarEdited} height =
<Inject services={[Toolbar, Edit, Selection]} />
</GanttComponent>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Maintain zoomToFit after change dataSource dynamically

We can maintain zoomToFit after change dataSource dynamically, by calling fitToProject method in
dataBound event.
INDEX.JSX

Gantt How To

import { GanttComponent, Inject, Toolbar, ToolbarItem }from
import { data, changeData } from './datasource';
function App(){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions = ['ZoomToFit'];
ganttInstance.dataSource = changeData;
};
};
return (<div>
<ButtonComponent onClick= { clickHandler}>Change
Data</ButtonComponent>
dataBound={dataBound}
toolbar={toolbarOptions} height = '450px' ref={gantt =>
};
INDEX.TSX
import { GanttComponent, Inject, Toolbar, ToolbarItem }from
import { data, changeData } from './datasource';
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ZoomToFit'];

Gantt How To
ganttInstance.dataSource = changeData;
};
};
return (<div>
<ButtonComponent onClick= { clickHandler}>Change
toolbar={toolbarOptions} height = '450px' ref={gantt =>
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

Gantt How To
Drag and drop from another in React Gantt component

In Gantt, it is possible to drag a record from another component and drop it in Gantt chart with updating
the Gantt record. Here, dragging an item from TreeView component to Gantt and that item is updated
as a resource for the Gantt record, we can achieve this, by using nodeDragStop event of TreeView
control.
INDEX.JSX
import { GanttComponent, Inject, Edit, Selection, ToolbarItem }from
import { DragAndDropEventArgs } from '@syncfusion/ej2-navigations';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { closest,addClass } from '@syncfusion/ej2-base';
import { editingData, editingResources } from './datasource';
function App (){
let ganttInstance;
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
id: 'resourceId',
name: 'resourceName'
};
allowEditing: true
};
};
const fields = { dataSource: editingResources, id: 'resourceId', text:
'resourceName' };
const allowDragAndDrop = true;
function nodeDragStop(args) {
let chartEle = closest(args.target, '.e-chart-row');
let gridEle = closest(args.target, '.e-row');
if(gridEle){
var index = ganttInstance.treeGrid.getRows().indexOf(gridEle);
ganttInstance.selectRow(index);
}
if (chartEle) {
var index = chartEle.ariaRowIndex;
ganttInstance.selectRow(Number(index));
}
let record = args.draggedNodeData;
let selectedData =
ganttInstance.flatData[ganttInstance.selectedRowIndex];
let selectedDataResource = selectedData.taskData.resources;

Gantt How To
let resources = [];

if (selectedDataResource) {
for (var i = 0; i < selectedDataResource.length; i++) {
resources.push(selectedDataResource[i].resourceId);
}
}
resources.push(parseInt(record.id));
if (chartEle || gridEle) {
var data = {
TaskID: selectedData.taskData.TaskID,
resources: resources
};
ganttInstance.updateRecordByID(data);
var elements = document.querySelectorAll('.e-drag-item');
while (elements.length > 0 && elements[0].parentNode) {
elements[0].parentNode.removeChild(elements[0]);
}
}
};
return <div><GanttComponent dataSource={editingData}
taskFields={taskFields} resources={editingResources}
editSettings={editSettings}
height='450px' resourceFields={resourceFields}
labelSettings={labelSettings} ref={gantt => ganttInstance = gantt}>
<Inject services={[ Edit, Selection]} />
</GanttComponent>
<TreeViewComponent fields={fields}
allowDragAndDrop={allowDragAndDrop} nodeDragStop={nodeDragStop}/>
</div>
};
INDEX.TSX
import { GanttComponent, Inject, Edit, Selection, ToolbarItem }from
import { DragAndDropEventArgs } from '@syncfusion/ej2-navigations';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { closest,addClass } from '@syncfusion/ej2-base';
import { editingData, editingResources } from './datasource';
function App (){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};

Gantt How To
id: 'resourceId',
name: 'resourceName'
};
allowEditing: true
};
};
const fields = { dataSource: editingResources, id: 'resourceId', text:
'resourceName' };
const allowDragAndDrop = true;
function nodeDragStop(args: DragAndDropEventArgs): void {
let chartEle: any = closest(args.target, '.e-chart-row');
let gridEle: any = closest(args.target, '.e-row');
if(gridEle){
var index = ganttInstance.treeGrid.getRows().indexOf(gridEle);
ganttInstance.selectRow(index);
}
if(chartEle){
var index = chartEle.ariaRowIndex;
ganttInstance.selectRow(Number(index));
}
let record: any = args.draggedNodeData;
let selectedData =
ganttInstance.flatData[ganttInstance.selectedRowIndex];
let selectedDataResource = selectedData.taskData.resources;
let resources = [];
if (selectedDataResource) {
for (var i = 0; i < selectedDataResource.length; i++) {
resources.push(selectedDataResource[i].resourceId);
}
}
resources.push(parseInt(record.id));
if (chartEle || gridEle) {
var data = {
TaskID: selectedData.taskData.TaskID,
resources: resources
};
ganttInstance.updateRecordByID(data);
var elements = document.querySelectorAll('.e-drag-item');
while (elements.length > 0 && elements[0].parentNode) {
elements[0].parentNode.removeChild(elements[0]);
}
}
};
return <div><GanttComponent dataSource={editingData}
taskFields={taskFields} resources={editingResources}
editSettings={editSettings}
height='450px' resourceFields={resourceFields}
labelSettings={labelSettings} ref={gantt => ganttInstance = gantt}>
<Inject services={[ Edit, Selection]} />
</GanttComponent>
<TreeViewComponent fields={fields}
allowDragAndDrop={allowDragAndDrop} nodeDragStop={nodeDragStop}/>
</div>

Gantt How To
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
The following screenshot shows dropping record from another component in to Gantt, and Rose Fuller
is added as resource for the task Develop floor plan estimation.

Gantt How To
Restrict collapse chart rows in React Gantt component

Restriction of collapsing the records when clicking on gantt chart rows can be performed by using the
collapsing event.
INDEX.JSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
let ganttInstance;
allowEditing: true,
allowAdding:true
};
let gantt;
function collapsing(args) {
if (gantt.ganttChartModule.isExpandCollapseFromChart) {
args.cancel = true;
}
};

Gantt How To
return (<div>
gantt} taskFields={taskFields} collapsing={collapsing} allowSelection={true}
};
INDEX.TSX
function App(){
id: 'TaskID',
name: 'TaskName',
child: 'subtasks'
};
allowEditing: true,
allowAdding:true
};
let gantt;
function collapsing(args:any) {
if (gantt.ganttChartModule.isExpandCollapseFromChart) {
args.cancel = true;
}
};
return (<div>
gantt} taskFields={taskFields} collapsing={collapsing} allowSelection={true}
};
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>

Link to the VideoGrid Getting Started

/>
<link
rel="stylesheet" />
<script
ript>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Link to the VideoGrid

Getting Started
Getting started
This section explains you the steps required to create a simple Grid and demonstrate the basic usage of
the Grid component in React environment.
To get start quickly with React Grid, you can check on this video:
Setup for Local Development
To set-up a React application, choose any of the following ways. The best and easiest way is to use the
create-react-app. It sets up your development environment in JavaScript and improvise your application
for production. Refer to the installation instructions of create-react-app.
`bash
npx create-react-app my-app
cd my-app
npm start
`
or

`bash
yarn create react-app my-app
cd my-app
yarn start
`
To set-up a React application in TypeScript environment, run the following command.
`bash
npx create-react-app my-app --template typescript
cd my-app
npm start
`
Besides using the npx package runner tool, also create an application from the npm init. To begin with
the npm init, upgrade the npm version to npm 6+.
`bash
npm init react-app my-app
cd my-app
npm start
`
Adding Syncfusion Grid packages
To install Grid component, use the following command
`
npm install @syncfusion/ej2-react-grids --save
`
The --save will instruct NPM to include the Grid package inside of the dependencies section of the
package.json.
The following CSS files are available in ../node_modules/@syncfusion package folder. This can be added
as reference in src/App.css.
`css
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";
`
To refer App.css in the application then import it in the src/App.tsx file.
Adding Grid component
Now, you can start adding React Grid component in the application. For getting started, add the Grid
component in src/App.tsx file using following code.
Place the following grid code in the src/App.tsx.
`ts
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
function App() {
return <GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
</GridComponent>
};
export default App;
`
Module Injection
React Grid component features are segregated into individual feature-wise modules.
In order to use a particular feature, you need to inject its feature service in the App.
In the current application, we are going to use paging, sorting, filtering and grouping feature of Grid.
Please find relevant feature service name and description as follows.

• Page - Inject this service to use paging feature.

• Sort - Inject this service to use sorting feature.
• Filter - Inject this service to use filtering feature.
• Group - Inject this service to use grouping feature.
These modules should be injected into the grid using the Inject directive.
Additional feature modules are available here.
Enable Paging
The paging feature enables users to view the Grid record in a paged view.
It can be enabled by setting allowPaging property to true.
Inject the Page module in Inject.services as follows.
If the Page service is not injected, the pager will not be rendered in the grid.
Pager can be customized using pageSettings property.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Group,
Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
function App() {
const pageSettings = { pageSize: 6 };
return <GridComponent dataSource={data} allowPaging={true}
pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' width='100'
textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2"
textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]}/>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Group,
Inject, Page, PageSettingsModel, Sort } from '@syncfusion/ej2-react-grids';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 6 }
return <GridComponent dataSource={data} allowPaging={true} pageSettings={
pageSettings }>
<ColumnsDirective>


textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]} />
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new
Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims',
ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France',
Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new
Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress:
'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany',
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new
Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress:
'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil',
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new
Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2,
rue du Commerce',
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new
Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress:
'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium',
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new
Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress:
'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland',
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new
Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress:
'Starenweg 5',
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new
Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress:
'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil',
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new
Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress:
'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry:
'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new
Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse
6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria',
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new
Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.',
ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico',
},
{

OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new

Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress:
'Mehrheimerstr. 369',
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new
Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress:
'Rua da Panificadora, 12',
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new
Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque',
ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA',
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Enable Sorting
The sorting feature enables you to order the records.
It can be enabled by setting the allowSorting property as true.
Inject the Sort module in the Inject.services as follows.
If the Sort module is not injected, you cannot sort when a header is clicked.
Sorting feature can be customized using sortSettings property.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Group }
from '@syncfusion/ej2-react-grids';
import { Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
function App() {


const sortSettings = { columns: [
{ field: 'EmployeeID', direction: 'Ascending' }
] };
pageSettings={pageSettings} allowSorting={true} sortSettings={sortSettings}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { Inject, Page, PageSettingsModel, Sort, SortSettingsModel } from
'@syncfusion/ej2-react-grids';
function App() {
const sortSettings: SortSettingsModel = { columns: [
{field: 'EmployeeID', direction: 'Ascending' }
] };
pageSettings }
allowSorting={true} sortSettings={ sortSettings }>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{


Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Enable Filtering
It can be enabled by setting the allowFiltering property as true.
Inject the Filter module in the Inject.services as follows.
If Filter` module is not injected, filter bar will not be rendered in Grid.
Filtering feature can be customized using filterSettings property.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter, GridComponent } from
import { Group, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
function App() {
] };
const filterSettings = { columns: [
{ field: 'EmployeeID', operator: 'greaterthan', value: 2 }
] };
pageSettings={pageSettings} filterSettings={filterSettings}
allowSorting={true} sortSettings={sortSettings} allowFiltering={true}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>

</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel,
GridComponent } from '@syncfusion/ej2-react-grids';
import { Group, Inject, Page, PageSettingsModel, Sort, SortSettingsModel }
function App() {
] };
const filterSettings: FilterSettingsModel = { columns: [
{field: 'EmployeeID', operator: 'greaterthan',
value: 2 }
] };
pageSettings }
filterSettings = {filterSettings}
allowSorting={true} sortSettings={ sortSettings }
allowFiltering={true}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{


Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{


Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];

DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}];
Enable Grouping
The grouping feature enables you to view the grid record in a grouped view.
It can be enabled by setting allowGrouping property to true.
The Group module has to be injected as follows.
If Group module is not injected, the group drop area will not be rendered in Grid.
Grouping feature can be customized using groupSettings property.
APP.JSX
function App() {
] };
] };
const groupSettings = { columns: ['EmployeeID'] };
allowGrouping={true} groupSettings={groupSettings} allowSorting={true}
sortSettings={sortSettings} allowFiltering={true} height={180}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>;
}

;
export default App;
APP.TSX
GridComponent, Group, GroupSettingsModel } from '@syncfusion/ej2-react-
grids';
import {Inject, Page, PageSettingsModel, Sort, SortSettingsModel } from
function App() {
] };
value: 2 }
] };
const groupSettings: GroupSettingsModel = { columns: ['EmployeeID'] };
pageSettings }
filterSettings = {filterSettings} allowGrouping={true}
groupSettings={ groupSettings }
allowFiltering={true} height={180}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX


{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},

{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}];
Run the application

The create-react-app will pre-configure the project to compile and run the application in browser. Use
the following command to run the application.
`
npm start
`
Output will be appears as follows.
APP.JSX
function App() {
] };
] };
const groupSettings = { columns: ['EmployeeID'] };
allowGrouping={true} groupSettings={groupSettings} allowSorting={true}
sortSettings={sortSettings} allowFiltering={true} height={180}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX


GridComponent, Group, GroupSettingsModel } from '@syncfusion/ej2-react-
grids';
import {Inject, Page, PageSettingsModel, Sort, SortSettingsModel } from
function App() {
] };
value: 2 }
] };
const groupSettings: GroupSettingsModel = { columns: ['EmployeeID'] };
pageSettings }
filterSettings = {filterSettings} allowGrouping={true}
groupSettings={ groupSettings }
allowFiltering={true} height={180}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
};
export default App;
You can refer to our React Grid feature tour page for its groundbreaking feature representations. You
can also explore our React Grid Component example that shows how to render the Grid in React.
See also
• Top 5 Features of React Data Grid

• How to render React Grid with bootstrap theme

Syncfusion React Grid component.
What is Next.js?

Prerequisites


NPM
YARN
below:
the project as ej2-nextjs-grid.
CMD
√ What is your project named? » ej2-nextjs-grid

CMD
√ What is your project named? ... ej2-nextjs-grid
Creating a new Next.js app in D:\ej2-nextjs-grid.
3.Once complete the above mentioned steps to create ej2-nextjs-grid, navigate to the directory using
the below command:
CMD
cd ej2-nextjs-grid
project.

Here, the React Grid component is used as an example. To install the React Grid component in the
project, use the following command:
NPM
YARN
yarn add @syncfusion/ej2-react-grids

as shown below:
GLOBALS.CSS
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
splitbuttons/styles/material.css';
@import "../../node_modules/@syncfusion/ej2-react-grids/styles/material.css";
section.
Follow the below steps to add the React Grid component to the Next.js project:
1.Before adding the Grid component to your markup, create a datasource.tsx file within the src/app/
folder and add the Grid component data.
DATASOURCE.TSX
{
Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59
rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight:
32.38, Verified: !0
},
{
Date(836505e6),

ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr.

48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight:
11.61, Verified: !1
},
{
Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do
Paço, 67',
},
{
Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du
Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight:
41.34, Verified: !0
},
{
Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard
Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight:
51.3, Verified: !0
},
{
Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do
Paço, 67',
},
{
Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
},
{
Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg
5',
},
{
Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do
Mercado, 12',


},
{
Date(8374554e5),
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela',
},
{
Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight:
140.51, Verified: !0
},
{
Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress:
'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight:
3.25, Verified: !1
},
{
Date(8377146e5),
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight:
55.09, Verified: !0
},
{
Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da
Panificadora, 12',
},
{
Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress:
'2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight:
48.29, Verified: !0
}
];
2.Then, import and define the Grid component with the dataSource property and column definitions in
the src/app/page.tsx file, as shown below:
PAGE.TSX

'use client'
import {
ColumnDirective, ColumnsDirective, GridComponent,
Inject, Page, Sort, Filter, Group
} from '@syncfusion/ej2-react-grids';
export default function Home() {
const pageSettings: object = { pageSize: 6 };
const filterSettings: object = { type: 'Excel' };
return (
<>
<h2>Syncfusion React Grid Component</h2>
<GridComponent
dataSource={data}
allowGrouping={true}
allowSorting={true}
allowFiltering={true}
allowPaging={true}
pageSettings={pageSettings}
filterSettings={filterSettings}
height={180}
>
<ColumnsDirective>
<ColumnDirective field="OrderID" width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" width="100" />
<ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
<ColumnDirective
field="Freight"
width="100"
format="C2"
textAlign="Right"
/>
<ColumnDirective field="ShipCountry" width="100" />
</ColumnsDirective>
</GridComponent>
</>
)
}
Run the application

NPM
npm run dev
YARN
yarn run dev
To learn more about the functionality of the Grid component, refer to the documentation.
View the NEXT.js Grid sample in the GitHub repository.

Getting Started with the React Grid Component in the Preact Framework
This article provides a step-by-step guide for setting up a Preact project and integrating the Syncfusion
React Grid component.
Preact is a fast and lightweight JavaScript library for building user interfaces. It's often used as an
alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in
size and faster in performance, making it a good choice for projects where file size and load times are
critical factors.
Prerequisites
System requirements for Syncfusion React UI components
Set up the Preact project
To create a new Preact project, use one of the commands that are specific to either NPM or Yarn.
`bash
npm init preact
`
or
`bash
yarn init preact
`
Using one of the above commands will lead you to set up additional configurations for the project, as
below:
1\. Define the project name: We can specify the name of the project directly. Let's specify the name of
the project as my-project for this article.
`bash
|
• Project directory:
| my-project
—
`
2\. Choose JavaScript as the framework variant to build this Preact project using JavaScript and React.
`bash
|
• Project language:

| > JavaScript
| TypeScript
—
`
3\. Then configure the project as below for this article.
`bash
|
• Use router?
| Yes / > No
—
|
• Prerender app (SSG)?
| Yes / > No
—
|
• Use ESLint?
| Yes / > No
—
`
5\. Upon completing the aforementioned steps to create my-project, run the following command to
jump into the project directory:
`bash
cd my-project
`
Now that my-project is ready to run with default settings, let's add Syncfusion components to the
project.
Add the Syncfusion React packages
This article uses the React Grid component as an example. To use the React Grid component in the
project, the @syncfusion/ej2-react-grids package needs to be installed using the following command:

`bash
`
or
`bash
yarn add @syncfusion/ej2-react-grids
`
You can import themes for the Syncfusion React component in various ways, such as using CSS or SASS
styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about
built-in themes and different ways to refer to theme's in a React project.
In this article, the Material 3 theme is applied using CSS styles, which are available in installed packages.
The necessary Material 3 CSS styles for the Grid component and its dependents were imported into the
src/style.css file.
~/SRC/STYLE.CSS
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material3.css";
The order of importing CSS styles should be in line with its dependency graph.
Add the Syncfusion React component
Follow the below steps to add the React Grid component to the Vite project:
1\. Before adding the Grid component to your markup, import the Grid component in the src/index.jsx
file.
~/SRC/INDEX.JSX
import { ColumnDirective, ColumnsDirective, GridComponent } from
2\. Then, define the Grid component with the dataSource property and column definitions. Declare the
values for the dataSource property.
~/SRC/INDEX.JSX
import { render } from 'preact';
import './style.css';
export function App() {

const data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France',
Freight: 32.38
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany',
Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil',
Freight: 65.83
}
];
return (
<GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
);
}
render(<App />, document.getElementById('app'));
Run the project

To run the project, use the following command:
`bash
npm run dev
`
or
`bash
yarn run dev
`
The output will appear as follows:
See also
Getting Started with the Syncfusion React UI Component

Link to the VideoGrid Module in React Grid component
Module in React Grid component

The following modules should be injected to extend grid's functionality.
| Module | Description |
|------|-------------|
| Page| Inject this module to use paging feature.|
| Sort| Inject this module to use sorting feature.|
| Filter| Inject this module to use filtering feature.|
| Group| Inject this module to use grouping feature|
| Edit| Inject this module is use editing feature.|
| Aggregate| Inject this module to use aggregate feature.|
| ColumnChooser| Inject this module to use column chooser feature.|
| ColumnMenu| Inject this module to use column menu feature.|
| CommandColumn| Inject this module to use command column feature.|
| ContextMenu| Inject this module to use context menu feature.|
| DetailRow| Inject this module to use detail template feature.|
| ForeignKey| Inject this module to use foreign key feature.|
| Freeze| Inject this module to use frozen rows and columns feature.|
| Resize| Inject this module to use resize feature.|
| Reorder| Inject this module to use reorder feature.|
| RowDD| Inject this module to use row drag and drop feature.|
| Search| Inject this module to use search feature and this is a default injected module.|
| Selection| Inject this module to use selection feature and this is a default injected module.|
| Scroll| Inject this module to use scrolling feature and this is a default injected module.|
| Print| Inject this module to use to use print feature and this is a default injected module.|
| Toolbar| Inject this module to use toolbar feature.|
| VirtualScroll| Inject this module to use virtual scroll feature.|
| ExcelExport| Inject this module to use excel export feature.|
| PdfExport| Inject this module to use PDF export feature.|
These modules should be injected into the grid using the Inject directive.
Data binding in React Grid component
Data binding is a fundamental technique that empowers the Grid component to integrate data into its
interface, enabling the creation of dynamic and interactive grid views. This feature is particularly
valuable when working with large datasets or when data needs to be fetched remotely.

Link to the VideoGrid Data binding in React Grid component
The Syncfusion Grid utilizes the Link to the Video, which supports both local binding with JavaScript
object arrays and remote binding with RESTful JSON data services. The key property, dataSource, can be
assigned to a DataManager instance or a collection of JavaScript object arrays.
It supports two kinds of data binding methods:
• Local data
• Remote data
To learn about how to bind local or remote data to React Grid, you can check on this video:
Loading indicator
The Syncfusion React Grid offers a loading animation feature, which makes it easy to identify when data
is being loaded or refreshed. This feature provides a clear understanding of the grid's current state and
actions, such as sorting, filtering, grouping, and more.
To achieve this, you can utilize the loadingIndicator.indicatorType property of the grid, which supports
two types of indicators:
• Spinner (default indicator)

• Shimmer
The following example demonstrates how to set the loadingIndicator.indicatorType property based
on changing the dropdown value using the change event of the DropDownList component. The
refreshColumns method is used to apply the changes and display the updated loading indicator type.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page,
Sort, Filter, PageSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
let grid;
let dropDown;
const data = new DataManager({
url:
'https://ej2services.syncfusion.com/js/development/api/UrlDataSource',
});
const pageOptions = { pageSize: 5, pageCount: 5 };
const loadingIndicator = { indicatorType: 'Spinner' };
const ddlData = [
{ id: 'Spinner', value: 'Spinner' },
{ id: 'Shimmer', value: 'Shimmer' }
]
const fields = { text: 'value', value: 'id' };
const valueChange = () => {
if (dropDown.value === 'Shimmer') {
grid.loadingIndicator.indicatorType = 'Shimmer';
grid.refreshColumns();
} else {
grid.loadingIndicator.indicatorType = 'Spinner';

}
}
return (<div>
<label style={{ padding: "10px 10px 26px 0" }}> Change the loading
indicator type: </label>
<DropDownListComponent ref={d => dropDown = d} index={0} width={120}
dataSource={ddlData} fields={fields}
change={valueChange}></DropDownListComponent>
<GridComponent ref={g => grid = g} dataSource={data} allowPaging={true}
pageSettings={pageOptions} height={315} allowFiltering={true}
allowSorting={true} loadingIndicator={loadingIndicator}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID'
width='120' textAlign="Right" />
<ColumnDirective field='Employees' headerText='Employees' width='150'
/>
<ColumnDirective field='Designation' headerText='Designation'
width='150' />
<ColumnDirective field='CurrentSalary' headerText='Current Salary'
width='150' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]} />
</GridComponent></div>)
};
export default App;
APP.TSX
Sort, Filter, PageSettingsModel } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-
react-dropdowns';
function App() {
let grid: GridComponent | null;
let dropDown: DropDownListComponent | null;
const data:DataManager = new DataManager({
url:
'https://ej2services.syncfusion.com/js/development/api/UrlDataSource',
});
const pageOptions: PageSettingsModel = { pageSize: 5, pageCount: 5 };
const loadingIndicator = { indicatorType: 'Spinner' };
const ddlData: Object[] = [
{ id: 'Spinner', value: 'Spinner' },
{ id: 'Shimmer', value: 'Shimmer' }
]
const fields: object = { text: 'value', value: 'id' };
const valueChange = (args: ChangeEventArgs) => {
if ((dropDown as DropDownListComponent).value === 'Shimmer') {
(grid as GridComponent).loadingIndicator.indicatorType = 'Shimmer';
(grid as GridComponent).refreshColumns();
} else {
(grid as GridComponent).loadingIndicator.indicatorType = 'Spinner';

}
}
return (<div>
<label style={{ padding: "10px 10px 26px 0" }}> Change the loading
indicator type: </label>
<DropDownListComponent ref={d => dropDown = d} index={0} width={120}
dataSource={ddlData} fields={fields}
<GridComponent ref={g => grid = g} dataSource={data} allowPaging={true}
pageSettings={pageOptions} height={315} allowFiltering={true}
allowSorting={true} loadingIndicator={loadingIndicator}>
<ColumnsDirective>
<ColumnDirective field='Employees' headerText='Employees' width='150'
/>
<ColumnDirective field='Designation' headerText='Designation'
width='150' />
<ColumnDirective field='CurrentSalary' headerText='Current Salary'
width='150' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]} />
};
export default App;
Refresh the datasource using property

Refreshing the data source in a Syncfusion Grid involves updating the data that the grid displays
dynamically. This operation is essential when you need to reflect changes in the underlying data without
reloading the entire page or component.
To achieve this, you can make use of the datasource property in conjunction with the setProperties
method. This ensures that the grid reflects the changes in the data source without requiring a complete
page or component reload.
For example, if you add or delete data source records, follow these steps:
Step 1: Add/delete the datasource record by using the following code.
`typescript
grid.dataSource.unshift(data); // Add a new record.
grid.dataSource.splice(selectedRow, 1); // Delete a record.
`
Step 2: Refresh the datasource after changes by invoking the setProperties method.
`typescript
(grid as GridComponent).setProperties({ dataSource: (grid as GridComponent).dataSource as object[] });
`
The following example demonstrates adding a new record to the data source through an external
button:

APP.JSX
import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from
function App() {
let grid;
let newRecords = [];
// Generate a random OrderId
const generateOrderId = () => {
return Math.floor(10000 + Math.random() * 90000);
}
// Generate a random CustomerId
const generateCustomerId = () => {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let result = '';
for (let i = 0; i < 5; i++) {
result += characters.charAt(Math.floor(Math.random() *
characters.length));
}
return result;
}
// Generate a random ShipCity
const generateShipCity = () => {
const cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
return cities[Math.floor(Math.random() * cities.length)];
}
// Generate a random Freight value
const generateFreight = () => {
return Math.random() * 100;
}
// Generate a random ShipName
const generateShipName = () => {
const names = ['Que Delícia', 'Bueno Foods', 'Island Trading',
'Laughing Bacchus Winecellars'];
return names[Math.floor(Math.random() * names.length)];
}
const changeDatasource = () => {
for (let i = 0; i < 5; i++) {
newRecords = {
OrderID: generateOrderId(),
CustomerID: generateCustomerId(),
ShipCity: generateShipCity(),
Freight: generateFreight(),
ShipName: generateShipName()
};
(grid.dataSource).unshift(newRecords);
grid.setProperties({ dataSource: grid.dataSource });
}
}
return <div>
<ButtonComponent onClick={changeDatasource}>Change
Datasource</ButtonComponent>
<GridComponent dataSource={data} height={280} ref={g => grid = g}>
<ColumnsDirective>

<ColumnDirective field='OrderID' headerText='Order ID'

<ColumnDirective field='CustomerID' headerText='Customer ID'
width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City'
width='150' />
<ColumnDirective field='Freight' headerText='Freight'
width='150' format='C2' />
<ColumnDirective field='ShipName' headerText='Ship Name'
width='150' />
</ColumnsDirective>
</GridComponent>
</div>
};
export default App;
APP.TSX
function App() {
let newRecords: Object = [];
// Generate a random OrderId
}
// Generate a random CustomerId
let result = '';
for (let i = 0; i < 5; i++) {
}
return result;
}
// Generate a random ShipCity
}
// Generate a random Freight value
}
// Generate a random ShipName
}
const changeDatasource = () => {

for (let i = 0; i < 5; i++) {

newRecords = {
};
((grid as GridComponent).dataSource as
object[]).unshift(newRecords);
(grid as GridComponent).setProperties({ dataSource: (grid as
GridComponent).dataSource as object[] });
}
}
return <div>
<ButtonComponent onClick={changeDatasource}>Change
Datasource</ButtonComponent>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
</GridComponent>
</div>
};
export default App;
DATASOURCE.JSX
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5,
OrderDate: new Date(8364186e5),
ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry:
'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6,
'Luisenstr. 48',
'Germany', Freight: 11.61, Verified: !1
},
{

OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4,

'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876',
ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3,
rue du Commerce',
},
{
OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4,
ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000',
ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
'Rua do Paço, 67',
},
{
OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5,
'Hauptstr. 31',
'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9,
'Starenweg 5',
},
{
OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3,
ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363',
},
{

OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 4,

ShipRegion: 'Táchira', Mask: '1234', ShipPostalCode: '5022',
ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1,
6',
'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4,
'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4,
},
{
OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4,
},
{
OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8,
ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry:
'USA', Freight: 48.29, Verified: !0
}
];
DATASOURCE.TSX
{


},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{


'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{
},
{


}];
Dynamically change the datasource or columns or both

The Grid component in Syncfusion allows dynamic modification of the data source, columns, or both .
This feature is particularly valuable when you need to refresh the grid's content and structure without
requiring a complete page reload.
To achieve dynamic changes, you can utilize the changeDataSource method. This method enables you to
update the data source, columns, or both, based on your application's requirements. However, it is
important to note that during the changing process for the data source and columns, the grid's existing
actions such as sorting, filtering, grouping, aggregation, and searching will be reset.The
changeDataSource method has two optional arguments: the first argument represents the data
source, and the second argument represents the columns. The various uses of the changeDataSource
method are explained in the following topic.
1. Change both data source and columns:
To modify both the existing columns and the data source, you need to pass the both arguments to the
changeDataSource method. The following example demonstrates how to change both the data source
and columns.
You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The
code below provides an example of how to create a data source for the grid.
`typescript
{
OrderID: 10248, CustomerID: 'VINET', Freight: 32.38,
ShipCity: 'Reims'
},
{
OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61,
ShipCity: 'Münster'
},
{
OrderID: 10250, CustomerID: 'HANAR', Freight: 61.34,
ShipCity: 'Rio de Janeiro'
}];
`

The following code demonstrates how to create the columns for the grid, which are based on the
provided grid data source.
`typescript
const newColumn: ColumnModel[] = [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 125 },
];
`
The following code demonstrates updating the data source and columns defined above using the
changeDataSource method.
`typescript
gridInstance.changeDataSource(data, newColumn);
`
2. Modify only the existing columns:
To modify the existing columns in a grid, you can either add or remove columns or change the entire set
of columns using the changeDataSource method. To use this method, you should set the first parameter
to null and provide the new columns as the second parameter. However, please note that if a column
field is not specified in the data source, its corresponding column values will be empty. The following
example illustrates how to modify existing columns.
The following code demonstrates how to add new columns with existing grid columns ('newColumn') by
using changeDataSource method.
`typescript
const newColumn1: ColumnModel[] = [
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 125 },
{ field: 'ShipCity', headerText: 'ShipCity', width: 125 },
];
let column: any = newColumn.push(...newColumn1);
gridInstance.changeDataSource(null, column);
`
3. Modify only the data source:
You can change the entire data source in the grid using the changeDataSource method. To use this
method, you should provide the data source as the first argument, and the second argument which is
optional can be used to specify new columns for the grid. If you are not specifying the columns, the grid
will generate the columns automatically based on the data source. The following example demonstrates
how to modify the data source.
You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The
code below provides an example of how to create a new data source for the grid.

`typescript
export let employeeData: Object[] = [
{
FirstName: 'Nancy', City: 'Seattle', Region: 'WA',
Country: 'USA'
},
{
FirstName: 'Andrew', City: 'London', Region: null,
Country: 'UK',
},
{
FirstName: 'Janet', City: 'Kirkland', Region: 'WA',
Country: 'USA'
}];
`
The following code demonstrates, how to use the changeDataSource method to bind the new
employeeData to the grid.
`typescript
gridInstance.changeDataSource(employeeData);
`
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, PageSettingsModel
function App() {
let grid;
let count = 0;
const pageSettings = { pageSize: 5, pageCount: 3 };
const newColumn = [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right',
width: 125 },
{ field: 'CustomerID', headerText: 'Customer Name', width: 125 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format:
'yMd', textAlign: 'Right' },
{ field: 'Freight', headerText: 'Freight', width: 120, textAlign:
'Right' },
];
const onClick = () => {
count = count + 100;
grid.changeDataSource(data.slice(0, count + 100), newColumn);

}
return <div>
<ButtonComponent onClick={onClick}>Click Button</ButtonComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g}
allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
width='150' />
</ColumnsDirective>
</GridComponent>
</div>
};
export default App;
APP.TSX
function App() {
let count: number = 0;
const pageSettings: PageSettingsModel = { pageSize: 5, pageCount: 3 };
const newColumn = [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right',
width: 125 },
{ field: 'CustomerID', headerText: 'Customer Name', width: 125 },
'yMd' },
{ field: 'Freight', headerText: 'Freight', width: 120, format:'C2' },
];
const onClick = () => {
count = count + 100;
(grid as GridComponent).changeDataSource(data.slice(0, count + 100),
newColumn as Object[]);
}
return <div>
<ButtonComponent onClick={onClick}>Click Button</ButtonComponent>
allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
width='150' />
</ColumnsDirective>
</GridComponent>
</div>

};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{


'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{


},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{


},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{

Link to the VideoGrid Adaptive in React Grid component

},
{
},
{
},
{
}];
* The Grid state persistence feature does not support the changeDataSource method.
* In this document, the above sample uses the local data for changeDataSource method. For those
using a remote data source, refer to the FlexibleData resource.
Adaptive in React Grid component
The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve
usability on small screens. This interface will render the filter, sort, column chooser, column
menu(supports only when the rowRenderingMode as Horizontal) and edit dialogs adaptively and have
an option to render the grid row elements in the vertical direction.
Render adaptive dialogs
The Syncfusion React Grid offers a valuable feature for rendering adaptive dialogs, specifically designed
to enhance the user experience on smaller screens. This feature proves especially useful for optimizing
the interface on devices with limited screen real estate. The functionality is achieved by enabling the
enableAdaptiveUI property, allowing the grid to render filter, sort, and edit dialogs in full-screen mode.
The following sample demonstrates how to enable and utilize adaptive dialogs in the Syncfusion React
Grid:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from

import { Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-

grids';
function App() {
const editSettings = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog' };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel',
'Search'];
const validationRule = { required: true };
const orderidRules = { required: true, number: true };
const filterOptions = { type: 'Excel' };
let grid;
const load = () => {
grid = document.getElementById('adaptivebrowser').ej2_instances[0];
grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-
content')[0];
};
let menuFilter = { type: 'Menu' };
let checkboxFilter = { type: 'CheckBox' };
return (<div className="e-adaptive-demo e-bigger">
<div className="e-mobile-layout">
<div className="e-mobile-content">
<GridComponent id="adaptivebrowser" dataSource={data}
height='100%' ref={g => grid = g} enableAdaptiveUI={true}
allowFiltering={true} allowSorting={true} allowPaging={true}
filterSettings={filterOptions} toolbar={toolbarOptions}
editSettings={editSettings} load={load}>
<ColumnsDirective>
<ColumnDirective field='SNO' headerText='S NO'
width='150' isPrimaryKey={true}
validationRules={orderidRules}></ColumnDirective>
<ColumnDirective field='Model' headerText='Model
Name' width='200' editType='dropdownedit' validationRules={validationRule}/>
<ColumnDirective field='Developer'
headerText='Developer' width='200' filter={menuFilter}
validationRules={validationRule}></ColumnDirective>
<ColumnDirective field='ReleaseDate'
headerText='Released Date' editType='datepickeredit' type='date'
format='yMMM' width='200'></ColumnDirective>
<ColumnDirective field='AndroidVersion'
headerText='Android Version' width='200' filter={checkboxFilter}
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar,
Page]}/>
</GridComponent>
</div>
</div>
<br></br>
<div className="datalink">Source:
<a
href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
target="_blank">Wikipedia: List of Android smartphones</a>
</div>
</div>);
}

export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject,
EditSettingsModel, ToolbarItems, FilterSettingsModel } from '@syncfusion/ej2-
react-grids';
import { Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-
grids';
function App() {
const editSettings: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Dialog' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update',
'Cancel', 'Search'];
const validationRule: Object = { required: true };
const orderidRules: Object = { required: true, number: true };
const filterOptions: FilterSettingsModel = { type: 'Excel' };
let grid: GridComponent;
const load = (): void => {
grid = (document.getElementById('adaptivebrowser') as
HTMLFormElement).ej2_instances[0];
content')[0] as HTMLElement;
}
return (<div className="e-adaptive-demo e-bigger">
<GridComponent id="adaptivebrowser" dataSource={data}
height='100%' ref={g => grid = g} enableAdaptiveUI={true}
editSettings={editSettings} load={load}>
<ColumnsDirective>
<ColumnDirective field='SNO' headerText='S NO'
width='150' isPrimaryKey={true}
validationRules={orderidRules}></ColumnDirective>
<ColumnDirective field='Model' headerText='Model
Name' width='200' editType='dropdownedit' validationRules={validationRule} />
<ColumnDirective field='Developer'
headerText='Developer' width='200' filter={menuFilter}
<ColumnDirective field='ReleaseDate'
headerText='Released Date' editType='datepickeredit' type='date'
format='yMMM' width='200'></ColumnDirective>
<ColumnDirective field='AndroidVersion'
headerText='Android Version' width='200' filter={checkboxFilter}
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]}
/>
</GridComponent>
</div>

</div>
<br></br>
<a
href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
target="_blank">Wikipedia: List of Android
smartphones</a>
</div>
</div>
)
}
export default App;
DATASOURCE.JSX
export let data = [
{ "Model": "Samsung Galaxy", "Developer": "Samsung Electronics",
"ReleaseDate": new Date("2009-03-31T18:30:00.000Z"), "AndroidVersion":
"Android 1.5 \"Cupcake\"", "SNO": 1 },
{ "Model": "Samsung Galaxy A01", "Developer": "Samsung Electronics",
"Android 10", "SNO": 2 },
{ "Model": "Samsung Galaxy A01 Core", "Developer": "Samsung Electronics",
"Android 8.0 \"Oreo\"", "SNO": 5 },
{ "Model": "Samsung Galaxy A02s/M02s", "Developer": "Samsung
Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"),
"AndroidVersion": "Android 10", "SNO": 6 },
{ "Model": "Samsung Galaxy A3 (2016)/A5 (2016)/A7 (2016)", "Developer":
"Samsung Electronics", "ReleaseDate": new Date("2015-11-30T18:30:00.000Z"),
"AndroidVersion": "Android 5.0 \"Lollipop\"", "SNO": 7 },
"AndroidVersion": "Android 6.0 \"Marshmallow\"", "SNO": 8 },
{ "Model": "Samsung Galaxy A3/Duos", "Developer": "Samsung Electronics",
"Android 4.4 \"KitKat\"", "SNO": 9 },
{ "Model": "Samsung Galaxy A5 Duos", "Developer": "Samsung Electronics",
{ "Model": "Samsung Galaxy A6/+", "Developer": "Samsung Electronics",
"Android 8.0 \"Oreo\"", "SNO": 12 },
{ "Model": "Samsung Galaxy A6s", "Developer": "Samsung Electronics",
"Android 8.0 \"Oreo\"", "SNO": 13 },

{ "Model": "Samsung Galaxy A7 (2018)", "Developer": "Samsung

"AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 14 },
{ "Model": "Samsung Galaxy A8 (2018)/+", "Developer": "Samsung
"AndroidVersion": "Android 7.0 \"Nougat\"", "SNO": 17 },
{ "Model": "Samsung Galaxy A8 Star", "Developer": "Samsung Electronics",
"Android 8.0 \"Oreo\"", "SNO": 18 },
"Android 5.0 \"Lollipop\"", "SNO": 19 },
"Android 9.0 \"Pie\"", "SNO": 20 },
{ "Model": "Samsung Galaxy A9 Pro (2016)", "Developer": "Samsung
"Android 9.0 \"Pie\"", "SNO": 24 },
{ "Model": "Samsung Galaxy A10e", "Developer": "Samsung Electronics",
"Android 9.0 \"Pie\"", "SNO": 25 },
"Android 9.0 \"Pie\"", "SNO": 26 },
"Android 10", "SNO": 27 },
"Android 10", "SNO": 28 },
{ "Model": "Samsung Galaxy A20/A40", "Developer": "Samsung Electronics",
"Android 9.0 \"Pie\"", "SNO": 29 },
"Android 9.0 \"Pie\"", "SNO": 30 },
"Android 9.0 \"Pie\"", "SNO": 31 },
"Android 10", "SNO": 32 },


"Android 10", "SNO": 33 },
"Android 9.0 \"Pie\"", "SNO": 34 },
{ "Model": "Samsung Galaxy A30s/A50s", "Developer": "Samsung
"AndroidVersion": "Android 9.0 \"Pie\"", "SNO": 35 },
"Android 10", "SNO": 36 },
"Android 11", "SNO": 37 },
{ "Model": "Samsung Galaxy A32 5G", "Developer": "Samsung Electronics",
"Android 11", "SNO": 38 },
"Android 10", "SNO": 39 },
"Android 10", "SNO": 40 },
"Android 9.0 \"Pie\"", "SNO": 41 },
{ "Model": "Samsung Galaxy A51 5G UW", "Developer": "Samsung
{ "Model": "Samsung Galaxy A51 5G/A71 5G", "Developer": "Samsung
"Android 10", "SNO": 44 },
"Android 9.0 \"Pie\"", "SNO": 45 },
"Android 9.0 \"Pie\"", "SNO": 46 },
"Android 9.0 \"Pie\"", "SNO": 47 },
"Android 9.0 \"Pie\"", "SNO": 49 },
"Android 9.0 \"Pie\"", "SNO": 50 },
{ "Model": "Samsung Galaxy Alpha", "Developer": "Samsung Electronics",

{ "Model": "Samsung Galaxy C5", "Developer": "Samsung Electronics",

"Android 7.1.2 \"Nougat\"", "SNO": 52 },
"Android 6.0 \"Marshmallow\"", "SNO": 53 },
{ "Model": "Samsung Galaxy C9 Pro", "Developer": "Samsung Electronics",
"Android 6.0.1 \"Marshmallow\"", "SNO": 55 },
{ "Model": "Samsung Galaxy F41", "Developer": "Samsung Electronics",
"Android 10", "SNO": 56 },
"Android 11", "SNO": 57 },
{ "Model": "Samsung Galaxy Fold", "Developer": "Samsung Electronics",
"Android 9.0 \"Pie\"", "SNO": 58 },
{ "Model": "Samsung Galaxy Grand Prime", "Developer": "Samsung
{ "Model": "Samsung Galaxy M02", "Developer": "Samsung Electronics",
"Android 10", "SNO": 60 },
"Android 11", "SNO": 61 },
{ "Model": "Samsung Galaxy M21s", "Developer": "Samsung Electronics",
"Android 10", "SNO": 62 },
"Android 11", "SNO": 63 },
{ "Model": "Samsung Galaxy Note", "Developer": "Samsung Electronics",
"Android 2.3 \"Gingerbread\"", "SNO": 64 },
{ "Model": "Samsung Galaxy Note 2", "Developer": "Samsung Electronics",
"Android 4.0 \"Ice Cream Sandwich\"", "SNO": 65 },
"Android 4.1 \"Jelly Bean\"", "SNO": 66 },
{ "Model": "Samsung Galaxy Note 3 Neo", "Developer": "Samsung
"AndroidVersion": "Android 4.1 \"Jelly Bean\"", "SNO": 67 },


"Android 7.0 \"Nougat\"", "SNO": 71 },
"Android 8.0 \"Oreo\"", "SNO": 72 },
{ "Model": "Samsung Galaxy Note 10/+", "Developer": "Samsung
{ "Model": "Samsung Galaxy Note 20/Ultra", "Developer": "Samsung
{ "Model": "Samsung Galaxy Note Edge", "Developer": "Samsung
"AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 75 },
{ "Model": "Samsung Galaxy Note FE", "Developer": "Samsung Electronics",
{ "Model": "Samsung Galaxy S1", "Developer": "Samsung Electronics",
"Android 2.0 \"Eclair\"", "SNO": 77 },
{ "Model": "Samsung Galaxy S4 Zoom", "Developer": "Samsung Electronics",
{ "Model": "Samsung Galaxy S6 Edge+", "Developer": "Samsung Electronics",
{ "Model": "Samsung Galaxy S6/Edge", "Developer": "Samsung Electronics",
{ "Model": "Samsung Galaxy S8/+", "Developer": "Samsung Electronics",
"Android 8.0 \"Oreo\"", "SNO": 87 },
{ "Model": "Samsung Galaxy S10 5G", "Developer": "Samsung Electronics",
"Android 9.0 \"Pie\"", "SNO": 88 },
{ "Model": "Samsung Galaxy S10/e/+", "Developer": "Samsung Electronics",
"Android 9.0 \"Pie\"", "SNO": 89 },

{ "Model": "Samsung Galaxy S20 FE", "Developer": "Samsung Electronics",

"Android 10", "SNO": 90 },
{ "Model": "Samsung Galaxy S20/+/Ultra", "Developer": "Samsung
{ "Model": "Samsung Galaxy Z Flip", "Developer": "Samsung Electronics",
"Android 10", "SNO": 93 },
{ "Model": "Samsung Galaxy Z Flip 5G", "Developer": "Samsung
{ "Model": "Samsung Galaxy Z Fold 2", "Developer": "Samsung Electronics",
"Android 10", "SNO": 95 },
{ "Model": "Sony Ericsson Xperia Play", "Developer": "Sony Ericsson",
{ "Model": "Sony Ericsson Xperia pro", "Developer": "Sony Ericsson",
{ "Model": "Sony Ericsson Xperia X8", "Developer": "Sony Ericsson",
"Android 1.6 \"Donut\"", "SNO": 98 },
{ "Model": "Sony Xperia 1", "Developer": "Sony Mobile", "ReleaseDate":
new Date("2019-04-30T18:30:00.000Z"), "AndroidVersion": "Android 9.0
\"Pie\"", "SNO": 100 },
{ "Model": "Sony Xperia 1 II", "Developer": "Sony Mobile", "ReleaseDate":
new Date("2020-04-30T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO":
101 },
\"Pie\"", "SNO": 102 },
103 },
\"Pie\"", "SNO": 104 },
{ "Model": "Sony Xperia 10 II", "Developer": "Sony Mobile",
"Android 10", "SNO": 105 },
{ "Model": "Sony Xperia 10/10 Plus", "Developer": "Sony Mobile",
"Android 9.0 \"Pie\"", "SNO": 106 },
{ "Model": "Sony Xperia L1", "Developer": "Sony Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 107 },
\"Nougat\"", "SNO": 108 },


\"Oreo\"", "SNO": 109 },
\"Pie\"", "SNO": 110 },
{ "Model": "Sony Xperia Pro", "Developer": "Sony Mobile", "ReleaseDate":
111 },
{ "Model": "Sony Xperia X Compact", "Developer": "Sony Mobile",
{ "Model": "Sony Xperia X/Performance", "Developer": "Sony Mobile",
{ "Model": "Sony Xperia XA", "Developer": "Sony Mobile", "ReleaseDate":
\"Marshmallow\"", "SNO": 114 },
{ "Model": "Sony Xperia XA Ultra", "Developer": "Sony Mobile",
{ "Model": "Sony Xperia XA1", "Developer": "Sony Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 116 },
{ "Model": "Sony Xperia XA1 Plus", "Developer": "Sony Mobile",
{ "Model": "Sony Xperia XA1 Ultra", "Developer": "Sony Mobile",
"Android 8.0 \"Oreo\"", "SNO": 119 },
{ "Model": "Sony Xperia XA2/Ultra", "Developer": "Sony Mobile",
"Android 8.0 \"Oreo\"", "SNO": 120 },
{ "Model": "Sony Xperia XZ", "Developer": "Sony Mobile", "ReleaseDate":
{ "Model": "Sony Xperia XZ1/Compact", "Developer": "Sony Mobile",
"Android 8.0 \"Oreo\"", "SNO": 122 },
{ "Model": "Sony Xperia XZ2 Premium", "Developer": "Sony Mobile",
"Android 8.0 \"Oreo\"", "SNO": 123 },
"Android 8.0 \"Oreo\"", "SNO": 124 },
{ "Model": "Sony Xperia XZ3", "Developer": "Sony Mobile", "ReleaseDate":
\"Pie\"", "SNO": 125 },
{ "Model": "Sony Xperia XZs/Premium", "Developer": "Sony Mobile",
{ "Model": "Sony Xperia Z", "Developer": "Sony Mobile", "ReleaseDate":
new Date("2013-01-31T18:30:00.000Z"), "AndroidVersion": "Android 4.1 \"Jelly
Bean\"", "SNO": 127 },

{ "Model": "Sony Xperia Z Ultra", "Developer": "Sony Mobile",

{ "Model": "Sony Xperia Z1", "Developer": "Sony Mobile", "ReleaseDate":
Bean\"", "SNO": 129 },
{ "Model": "Sony Xperia Z1 Compact", "Developer": "Sony Mobile",
\"KitKat\"", "SNO": 131 },
{ "Model": "Sony Xperia Z3/Compact", "Developer": "Sony Mobile",
\"Lollipop\"", "SNO": 133 },
{ "Model": "Sony Xperia Z5 Premium", "Developer": "Sony Mobile",
{ "Model": "Surface Duo", "Developer": "Microsoft", "ReleaseDate": new
Date("2020-08-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 136
},
{ "Model": "TCL Plex", "Developer": "TCL", "ReleaseDate": new Date("2019-
09-30T18:30:00.000Z"), "AndroidVersion": "Android 9.0 \"Pie\"", "SNO": 137 },
{ "Model": "TCL 10L", "Developer": "TCL", "ReleaseDate": new Date("2020-
04-30T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 138 },
{ "Model": "TCL 10 Pro", "Developer": "TCL", "ReleaseDate": new
},
{ "Model": "TCL 10 SE", "Developer": "TCL", "ReleaseDate": new
},
{ "Model": "TCL 10 5G", "Developer": "TCL", "ReleaseDate": new
},
{ "Model": "TCL 10 Plus", "Developer": "TCL", "ReleaseDate": new
},
{ "Model": "Tecno Phantom 6/Plus", "Developer": "Tecno Mobile",
{ "Model": "Tecno Camon CX", "Developer": "Tecno Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 144 },
{ "Model": "Tecno Camon CX Air", "Developer": "Tecno Mobile",
{ "Model": "Tecno Spark", "Developer": "Tecno Mobile", "ReleaseDate": new
Date("2017-04-30T18:30:00.000Z"), "AndroidVersion": "Android 7.0 \"Nougat\"",
"SNO": 146 },

{ "Model": "Tecno Spark Plus", "Developer": "Tecno Mobile",

{ "Model": "Tecno Phantom 8", "Developer": "Tecno Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 148 },
{ "Model": "Tecno Spark Pro", "Developer": "Tecno Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 149 },
{ "Model": "Tecno Camon CM", "Developer": "Tecno Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 150 },
{ "Model": "Tecno Spark CM", "Developer": "Tecno Mobile", "ReleaseDate":
\"Nougat\"", "SNO": 151 },
{ "Model": "Tecno Camon X/Pro", "Developer": "Tecno Mobile",
"Android 8.0 \"Oreo\"", "SNO": 152 },
{ "Model": "Tecno Spark 2", "Developer": "Tecno Mobile", "ReleaseDate":
\"Oreo\"", "SNO": 153 },
{ "Model": "Tecno Camon 11/Pro", "Developer": "Tecno Mobile",
"Android 8.0 \"Oreo\"", "SNO": 154 },
{ "Model": "Tecno Camon iACE2/2X", "Developer": "Tecno Mobile",
"Android 8.0 \"Oreo\"", "SNO": 155 },
{ "Model": "Tecno Spark 3/Pro", "Developer": "Tecno Mobile",
"Android 9.0 \"Pie\"", "SNO": 156 },
\"Pie\"", "SNO": 157 },
{ "Model": "Tecno Spark Go", "Developer": "Tecno Mobile", "ReleaseDate":
\"Pie\"", "SNO": 158 },
{ "Model": "Tecno Spark 4/Air/Lite", "Developer": "Tecno Mobile",
"Android 9.0 \"Pie\"", "SNO": 159 },
{ "Model": "Tecno Camon 12", "Developer": "Tecno Mobile", "ReleaseDate":
\"Pie\"", "SNO": 160 },
{ "Model": "Tecno Camon 12 Pro", "Developer": "Tecno Mobile",
"Android 9.0 \"Pie\"", "SNO": 161 },
{ "Model": "Tecno Camon 12 Air", "Developer": "Tecno Mobile",
"Android 9.0 \"Pie\"", "SNO": 162 },
"Android 10", "SNO": 163 },
{ "Model": "Tecno Camon 15 Air/Premier", "Developer": "Tecno Mobile",
"Android 10", "SNO": 164 },
165 },

{ "Model": "Tecno Spark 5 Air", "Developer": "Tecno Mobile",

"Android 10", "SNO": 166 },
{ "Model": "Tecno Spark 5 Pro", "Developer": "Tecno Mobile",
"Android 10", "SNO": 167 },
{ "Model": "Tecno Spark Power 2", "Developer": "Tecno Mobile",
"Android 10", "SNO": 168 },
{ "Model": "Tecno Pouvoir 4/Pro", "Developer": "Tecno Mobile",
"Android 10", "SNO": 169 },
{ "Model": "Tecno Camon 16 Premier", "Developer": "Tecno Mobile",
"Android 10", "SNO": 170 },
"Android 10", "SNO": 171 },
172 },
173 },
{ "Model": "Tecno Pova", "Developer": "Tecno Mobile", "ReleaseDate": new
},
{ "Model": "Vivo X1", "Developer": "Vivo", "ReleaseDate": new Date("2012-
10-31T18:30:00.000Z"), "AndroidVersion": "Android 4.1 \"Jelly Bean\"", "SNO":
175 },
176 },
{ "Model": "Vivo X3S", "Developer": "Vivo", "ReleaseDate": new
Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.1 \"Jelly
Bean\"", "SNO": 177 },
{ "Model": "Vivo X5/Max", "Developer": "Vivo", "ReleaseDate": new
Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"",
"SNO": 178 },
{ "Model": "Vivo X5Max+", "Developer": "Vivo", "ReleaseDate": new
"SNO": 179 },
{ "Model": "Vivo X5Pro", "Developer": "Vivo", "ReleaseDate": new
Date("2015-04-30T18:30:00.000Z"), "AndroidVersion": "Android 5.0
\"Lollipop\"", "SNO": 180 },
{ "Model": "Vivo X5Max Platinum", "Developer": "Vivo", "ReleaseDate": new
"SNO": 181 },
{ "Model": "Vivo V1", "Developer": "Vivo", "ReleaseDate": new Date("2015-
06-30T18:30:00.000Z"), "AndroidVersion": "Android 5.0 \"Lollipop\"", "SNO":
182 },
{ "Model": "Vivo V1 Max", "Developer": "Vivo", "ReleaseDate": new
\"Lollipop\"", "SNO": 183 },
{ "Model": "Vivo X6/Plus", "Developer": "Vivo", "ReleaseDate": new
\"Lollipop\"", "SNO": 184 },

{ "Model": "Vivo X6S/Plus", "Developer": "Vivo", "ReleaseDate": new

\"Lollipop\"", "SNO": 185 },
{ "Model": "Vivo V3/Max", "Developer": "Vivo", "ReleaseDate": new
\"Lollipop\"", "SNO": 186 },
\"Lollipop\"", "SNO": 187 },
10-31T18:30:00.000Z"), "AndroidVersion": "Android 6.0 \"Marshmallow\"",
"SNO": 189 },
{ "Model": "Vivo V5 Plus", "Developer": "Vivo", "ReleaseDate": new
{ "Model": "Vivo V5 Lite/Y66", "Developer": "Vivo", "ReleaseDate": new
{ "Model": "Vivo V5s", "Developer": "Vivo", "ReleaseDate": new
{ "Model": "Vivo X9s/Plus", "Developer": "Vivo", "ReleaseDate": new
"SNO": 193 },
{ "Model": "Vivo V7+", "Developer": "Vivo", "ReleaseDate": new
"SNO": 194 },
"SNO": 195 },
11-30T18:30:00.000Z"), "AndroidVersion": "Android 7.0 \"Nougat\"", "SNO": 196
},
{ "Model": "Vivo X20 Plus UD", "Developer": "Vivo", "ReleaseDate": new
"SNO": 197 },
{ "Model": "Vivo X21/UD", "Developer": "Vivo", "ReleaseDate": new
Date("2018-02-28T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"",
"SNO": 198 },
{ "Model": "Vivo V9/Youth", "Developer": "Vivo", "ReleaseDate": new
"SNO": 199 },
{ "Model": "Vivo X21i", "Developer": "Vivo", "ReleaseDate": new
"SNO": 200 },
{ "Model": "Vivo NEX", "Developer": "Vivo", "ReleaseDate": new
"SNO": 201 },
{ "Model": "Vivo V11", "Developer": "Vivo", "ReleaseDate": new
"SNO": 202 },
{ "Model": "Vivo X23", "Developer": "Vivo", "ReleaseDate": new
"SNO": 203 },

{ "Model": "Vivo V11i", "Developer": "Vivo", "ReleaseDate": new

"SNO": 204 },
{ "Model": "Vivo NEX Dual Display", "Developer": "Vivo", "ReleaseDate":
\"Pie\"", "SNO": 205 },
{ "Model": "Vivo V15/Pro", "Developer": "Vivo", "ReleaseDate": new
Date("2019-02-28T18:30:00.000Z"), "AndroidVersion": "Android 9.0 \"Pie\"",
"SNO": 206 },
{ "Model": "Vivo X27/Pro", "Developer": "Vivo", "ReleaseDate": new
"SNO": 207 },
{ "Model": "Vivo V17 Neo", "Developer": "Vivo", "ReleaseDate": new
"SNO": 208 },
{ "Model": "Vivo NEX 3", "Developer": "Vivo", "ReleaseDate": new
"SNO": 209 },
{ "Model": "Vivo V17 Pro", "Developer": "Vivo", "ReleaseDate": new
"SNO": 210 },
"SNO": 211 },
"SNO": 212 },
{ "Model": "Vivo NEX 3S", "Developer": "Vivo", "ReleaseDate": new
},
},
{ "Model": "Vivo X50 Lite", "Developer": "Vivo", "ReleaseDate": new
},
{ "Model": "Vivo X50/Pro/Pro+", "Developer": "Vivo", "ReleaseDate": new
},
},
},
{ "Model": "Vivo X50e", "Developer": "Vivo", "ReleaseDate": new
},
{ "Model": "Vivo V20 SE", "Developer": "Vivo", "ReleaseDate": new
},
},
},

{ "Model": "Vivo V20 (2021)", "Developer": "Vivo", "ReleaseDate": new

},
},
{ "Model": "Xiaomi Mi 1", "Developer": "Xiaomi", "ReleaseDate": new
\"Gingerbread\"", "SNO": 225 },
{ "Model": "Xiaomi Mi 1S", "Developer": "Xiaomi", "ReleaseDate": new
Date("2012-07-31T18:30:00.000Z"), "AndroidVersion": "Android 4.0 \"Ice Cream
Sandwich\"", "SNO": 226 },
Bean\"", "SNO": 227 },
{ "Model": "Xiaomi Mi 2S/A", "Developer": "Xiaomi", "ReleaseDate": new
Bean\"", "SNO": 228 },
{ "Model": "Xiaomi Mi 3/TD", "Developer": "Xiaomi", "ReleaseDate": new
Bean\"", "SNO": 229 },
"SNO": 230 },
{ "Model": "Xiaomi Mi Note", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 231 },
{ "Model": "Xiaomi Mi Note Pro", "Developer": "Xiaomi", "ReleaseDate":
\"Lollipop\"", "SNO": 232 },
{ "Model": "Xiaomi Mi 4i", "Developer": "Xiaomi", "ReleaseDate": new
\"Lollipop\"", "SNO": 233 },
{ "Model": "Xiaomi Mi 4c", "Developer": "Xiaomi", "ReleaseDate": new
\"Lollipop\"", "SNO": 234 },
\"Lollipop\"", "SNO": 235 },
{ "Model": "Xiaomi Mi Max/Pro", "Developer": "Xiaomi", "ReleaseDate": new
{ "Model": "Xiaomi Mi 5s/Plus", "Developer": "Xiaomi", "ReleaseDate": new
{ "Model": "Xiaomi Mi Note 2", "Developer": "Xiaomi", "ReleaseDate": new
{ "Model": "Xiaomi Mi MIX", "Developer": "Xiaomi", "ReleaseDate": new


"SNO": 242 },
{ "Model": "Xiaomi Mi Max 2", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 243 },
{ "Model": "Xiaomi Mi 5X/Mi A1", "Developer": "Xiaomi", "ReleaseDate":
\"Nougat\"", "SNO": 244 },
"SNO": 245 },
{ "Model": "Xiaomi Mi MIX 2", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 246 },
{ "Model": "Xiaomi Mi MIX 2S", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 247 },
\"Oreo\"", "SNO": 248 },
{ "Model": "Xiaomi Black Shark", "Developer": "Xiaomi", "ReleaseDate":
\"Oreo\"", "SNO": 249 },
{ "Model": "Xiaomi Mi 8/SE/EE", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 250 },
"SNO": 251 },
{ "Model": "Xiaomi Pocophone F1", "Developer": "Xiaomi", "ReleaseDate":
\"Oreo\"", "SNO": 252 },
{ "Model": "Xiaomi Mi 8 Pro/Lite", "Developer": "Xiaomi", "ReleaseDate":
\"Oreo\"", "SNO": 253 },
"SNO": 254 },
{ "Model": "Xiaomi Black Shark Helo", "Developer": "Xiaomi",
"Android 8.0 \"Oreo\"", "SNO": 255 },
{ "Model": "Xiaomi Mi Play", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 256 },
{ "Model": "Xiaomi Mi 9/SE", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 257 },
{ "Model": "Xiaomi Black Shark 2", "Developer": "Xiaomi", "ReleaseDate":
\"Pie\"", "SNO": 258 },
{ "Model": "Xiaomi Mi MIX 3 5G", "Developer": "Xiaomi", "ReleaseDate":
\"Pie\"", "SNO": 259 },
{ "Model": "Xiaomi Mi 9T", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 260 },

{ "Model": "Xiaomi Mi A3", "Developer": "Xiaomi", "ReleaseDate": new

"SNO": 261 },
{ "Model": "Xiaomi Mi 9T Pro", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 262 },
{ "Model": "Xiaomi Black Shark 2 Pro", "Developer": "Xiaomi",
"Android 9.0 \"Pie\"", "SNO": 263 },
{ "Model": "Xiaomi Mi 9 Lite", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 264 },
{ "Model": "Xiaomi Mi 9 Pro/Pro 5G", "Developer": "Xiaomi",
"Android 10", "SNO": 265 },
{ "Model": "Xiaomi Mi Note 10/Pro", "Developer": "Xiaomi", "ReleaseDate":
\"Pie\"", "SNO": 266 },
{ "Model": "Xiaomi Mi 10/Pro", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Xiaomi Black Shark 3/Pro", "Developer": "Xiaomi",
"Android 10", "SNO": 268 },
},
{ "Model": "Xiaomi Mi 10 Youth", "Developer": "Xiaomi", "ReleaseDate":
270 },
{ "Model": "Xiaomi Mi Note 10 Lite", "Developer": "Xiaomi",
"Android 10", "SNO": 271 },
{ "Model": "POCO M2 Pro", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Xiaomi Mi 10 Ultra", "Developer": "Xiaomi", "ReleaseDate":
273 },
{ "Model": "POCO X3 NFC", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "POCO M2", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "POCO X3", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Xiaomi Mi 10T/Pro/Lite", "Developer": "Xiaomi",
"Android 10", "SNO": 277 },
{ "Model": "POCO C3", "Developer": "Xiaomi", "ReleaseDate": new
},
},


},
},
},
{ "Model": "ZTE Racer", "Developer": "ZTE", "ReleaseDate": new
Date("2010-06-30T18:30:00.000Z"), "AndroidVersion": "Android 2.0 \"Eclair\"",
"SNO": 283 },
{ "Model": "ZTE Blade", "Developer": "ZTE", "ReleaseDate": new
"SNO": 284 },
{ "Model": "ZTE Libra", "Developer": "ZTE", "ReleaseDate": new
"SNO": 285 },
{ "Model": "ZTE Racer II", "Developer": "ZTE", "ReleaseDate": new
Date("2011-08-31T18:30:00.000Z"), "AndroidVersion": "Android 2.2 \"Froyo\"",
"SNO": 286 },
{ "Model": "ZTE Skate", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Score", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Warp", "Developer": "ZTE", "ReleaseDate": new Date("2011-
09-30T18:30:00.000Z"), "AndroidVersion": "Android 2.3 \"Gingerbread\"",
"SNO": 289 },
{ "Model": "ZTE Avail", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE FTV Phone", "Developer": "ZTE", "ReleaseDate": new
"SNO": 291 },
{ "Model": "ZTE Blade II V880+", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Score M", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE V880E", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Kis V788", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Grand X", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Grand X IN", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Blade III", "Developer": "ZTE", "ReleaseDate": new

{ "Model": "ZTE Grand Era", "Developer": "ZTE", "ReleaseDate": new

{ "Model": "ZTE Warp Sequent", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Grand X LTE", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Flash", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Groove X501", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Kis III V790", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE N910", "Developer": "ZTE", "ReleaseDate": new Date("2012-
11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.0 \"Ice Cream
{ "Model": "ZTE Era", "Developer": "ZTE", "ReleaseDate": new Date("2012-
{ "Model": "ZTE V887", "Developer": "ZTE", "ReleaseDate": new Date("2012-
{ "Model": "ZTE V889M", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Avid 4G", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Grand S", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 310 },
{ "Model": "ZTE Director", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Blade C V807", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 312 },
{ "Model": "ZTE Blade III Pro", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 313 },
{ "Model": "ZTE Blade G V880G", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 314 },
{ "Model": "ZTE Blade G2", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 315 },
{ "Model": "ZTE Blade V", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 316 },
{ "Model": "ZTE Blade Q/Maxi/Mini", "Developer": "ZTE", "ReleaseDate":
Bean\"", "SNO": 317 },

{ "Model": "ZTE Blade L2", "Developer": "ZTE", "ReleaseDate": new

Bean\"", "SNO": 318 },
{ "Model": "ZTE Blade Vec 3G/4G", "Developer": "ZTE", "ReleaseDate": new
"SNO": 319 },
{ "Model": "ZTE Blade S6", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 320 },
{ "Model": "ZTE Blade G/Lux", "Developer": "ZTE", "ReleaseDate": new
"SNO": 321 },
\"Lollipop\"", "SNO": 322 },
{ "Model": "ZTE Blade L3 Plus", "Developer": "ZTE", "ReleaseDate": new
"SNO": 323 },
{ "Model": "ZTE Blade S6 Plus", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 324 },
{ "Model": "ZTE Blade Qlux 4G", "Developer": "ZTE", "ReleaseDate": new
"SNO": 325 },
{ "Model": "ZTE Blade Q Pro", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 326 },
{ "Model": "ZTE Blade Apex 3", "Developer": "ZTE", "ReleaseDate": new
"SNO": 327 },
{ "Model": "ZTE Blade A410", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 328 },
\"Lollipop\"", "SNO": 329 },
{ "Model": "ZTE Axon Pro/Lux", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 330 },
{ "Model": "ZTE Blade D6", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 331 },
{ "Model": "ZTE Axon Elite", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 332 },
{ "Model": "ZTE Axon mini", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 333 },
\"Lollipop\"", "SNO": 334 },
{ "Model": "ZTE Axon", "Developer": "ZTE", "ReleaseDate": new Date("2015-
335 },
{ "Model": "ZTE Blade X3/5/9", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 336 },

{ "Model": "ZTE Axon Max", "Developer": "ZTE", "ReleaseDate": new

\"Lollipop\"", "SNO": 337 },
{ "Model": "ZTE Blade V7/Lite", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 338 },
{ "Model": "ZTE Axon 7", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Axon 7 mini", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Axon 7 Max", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "ZTE Axon 7s", "Developer": "ZTE", "ReleaseDate": new
"SNO": 342 },
{ "Model": "ZTE Maven 2", "Developer": "ZTE", "ReleaseDate": new
"SNO": 344 },
{ "Model": "ZTE Axon M", "Developer": "ZTE", "ReleaseDate": new
"SNO": 345 },
{ "Model": "ZTE Blade X", "Developer": "ZTE", "ReleaseDate": new
"SNO": 346 },
"SNO": 347 },
{ "Model": "ZTE Tempo Go", "Developer": "ZTE", "ReleaseDate": new
"SNO": 348 },
{ "Model": "ZTE Blade V9/Vita", "Developer": "ZTE", "ReleaseDate": new
"SNO": 349 },
{ "Model": "ZTE Axon 9 Pro", "Developer": "ZTE", "ReleaseDate": new
"SNO": 350 },
{ "Model": "ZTE Blade A7 Vita", "Developer": "ZTE", "ReleaseDate": new
"SNO": 351 },
"SNO": 352 },
{ "Model": "ZTE Axon 10 Pro/5G", "Developer": "ZTE", "ReleaseDate": new
"SNO": 353 },
"SNO": 354 },
{ "Model": "ZTE Blade A3 (2019)", "Developer": "ZTE", "ReleaseDate": new
"SNO": 355 },


"SNO": 356 },
"SNO": 357 },
"SNO": 358 },
{ "Model": "ZTE Blade 10 Prime", "Developer": "ZTE", "ReleaseDate": new
"SNO": 359 },
{ "Model": "ZTE Blade A7 Prime", "Developer": "ZTE", "ReleaseDate": new
"SNO": 360 },
{ "Model": "ZTE Blade Max View", "Developer": "ZTE", "ReleaseDate": new
"SNO": 361 },
{ "Model": "ZTE Axon 10s Pro 5G", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "ZTE Axon 11 4G/5G", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "ZTE Blade V 2020", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "ZTE Axon 11 SE 5G", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "ZTE Axon 20 5G", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "ZTE Blade A7s 2020", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "ZTE Blade 20 5G", "Developer": "ZTE", "ReleaseDate": new
},
},
{ "Model": "Asus PadFone", "Developer": "Asus", "ReleaseDate": new
{ "Model": "Asus PadFone 2", "Developer": "Asus", "ReleaseDate": new
{ "Model": "Asus PadFone Infinity", "Developer": "Asus", "ReleaseDate":
Bean\"", "SNO": 372 },
{ "Model": "Asus PadFone Infinity 2", "Developer": "Asus", "ReleaseDate":
Bean\"", "SNO": 373 },
{ "Model": "Asus PadFone mini", "Developer": "Asus", "ReleaseDate": new
Bean\"", "SNO": 374 },

{ "Model": "Asus PadFone E", "Developer": "Asus", "ReleaseDate": new

Bean\"", "SNO": 375 },
{ "Model": "Asus PadFone Infinity Lite", "Developer": "Asus",
{ "Model": "Asus ZenFone 5 (2014)", "Developer": "Asus", "ReleaseDate":
Bean\"", "SNO": 377 },
Bean\"", "SNO": 378 },
Bean\"", "SNO": 379 },
{ "Model": "Asus PadFone S/X", "Developer": "Asus", "ReleaseDate": new
"SNO": 380 },
{ "Model": "Asus ZenFone 4.5 (2014)", "Developer": "Asus", "ReleaseDate":
\"KitKat\"", "SNO": 381 },
\"KitKat\"", "SNO": 382 },
{ "Model": "Asus PadFone X mini", "Developer": "Asus", "ReleaseDate": new
"SNO": 383 },
{ "Model": "Asus Pegasus (X002)", "Developer": "Asus", "ReleaseDate": new
"SNO": 384 },
Bean\"", "SNO": 385 },
{ "Model": "Asus ZenFone 2", "Developer": "Asus", "ReleaseDate": new
\"Lollipop\"", "SNO": 386 },
"SNO": 388 },
{ "Model": "Asus ZenFone Max Plus M1", "Developer": "Asus",
{ "Model": "Asus ZenFone Max M1", "Developer": "Asus", "ReleaseDate": new
"SNO": 390 },
{ "Model": "Asus ZenFone Max Pro M1", "Developer": "Asus", "ReleaseDate":
\"Oreo\"", "SNO": 391 },
"SNO": 392 },
{ "Model": "Asus ZenFone Live L1", "Developer": "Asus", "ReleaseDate":
\"Oreo\"", "SNO": 393 },

{ "Model": "Asus ROG Phone", "Developer": "Asus", "ReleaseDate": new

"SNO": 394 },
{ "Model": "Asus ZenFone Lite L1", "Developer": "Asus", "ReleaseDate":
\"Oreo\"", "SNO": 395 },
"SNO": 396 },
\"Pie\"", "SNO": 397 },
{ "Model": "Asus ZenFone Max Shot", "Developer": "Asus", "ReleaseDate":
\"Oreo\"", "SNO": 398 },
"Android 8.0 \"Oreo\"", "SNO": 399 },
\"Oreo\"", "SNO": 400 },
"SNO": 401 },
{ "Model": "Asus ROG Phone II", "Developer": "Asus", "ReleaseDate": new
"SNO": 402 },
{ "Model": "Asus ROG Phone 3", "Developer": "Asus", "ReleaseDate": new
},
},
},
{ "Model": "BlackBerry Priv", "Developer": "BlackBerry Limited",
{ "Model": "BlackBerry DTEK50", "Developer": "BlackBerry Limited",
{ "Model": "BlackBerry Aurora", "Developer": "BlackBerry Mobile",
{ "Model": "BlackBerry KeyOne", "Developer": "BlackBerry Mobile",
{ "Model": "BlackBerry Motion", "Developer": "BlackBerry Mobile",
{ "Model": "BlackBerry Key2", "Developer": "BlackBerry Mobile",
"Android 8.0 \"Oreo\"", "SNO": 412 },

{ "Model": "BlackBerry Evolve/X", "Developer": "BlackBerry Mobile",

"Android 8.0 \"Oreo\"", "SNO": 413 },
{ "Model": "BlackBerry Key2 LE", "Developer": "BlackBerry Mobile",
"Android 8.0 \"Oreo\"", "SNO": 414 },
{ "Model": "Essential PH-1", "Developer": "Essential Products",
{ "Model": "HTC Dream", "Developer": "HTC", "ReleaseDate": new
Date("2008-08-31T18:30:00.000Z"), "AndroidVersion": "Android 1.0", "SNO": 416
},
{ "Model": "HTC Magic", "Developer": "HTC", "ReleaseDate": new
Date("2009-04-30T18:30:00.000Z"), "AndroidVersion": "Android 1.6 \"Donut\"",
"SNO": 417 },
{ "Model": "HTC Hero", "Developer": "HTC", "ReleaseDate": new Date("2009-
06-30T18:30:00.000Z"), "AndroidVersion": "Android 1.5 \"Cupcake\"", "SNO":
418 },
{ "Model": "HTC Tattoo", "Developer": "HTC", "ReleaseDate": new
"SNO": 419 },
{ "Model": "HTC Desire", "Developer": "HTC", "ReleaseDate": new
"SNO": 420 },
{ "Model": "HTC Legend", "Developer": "HTC", "ReleaseDate": new
"SNO": 421 },
{ "Model": "HTC Droid Incredible", "Developer": "HTC", "ReleaseDate": new
"SNO": 422 },
{ "Model": "HTC Wildfire", "Developer": "HTC", "ReleaseDate": new
"SNO": 423 },
{ "Model": "HTC Aria", "Developer": "HTC", "ReleaseDate": new Date("2010-
05-31T18:30:00.000Z"), "AndroidVersion": "Android 2.0 \"Eclair\"", "SNO": 424
},
{ "Model": "HTC Evo 4G", "Developer": "HTC", "ReleaseDate": new
"SNO": 425 },
{ "Model": "HTC Evo 4G+", "Developer": "HTC", "ReleaseDate": new
"SNO": 426 },
{ "Model": "HTC Desire HD", "Developer": "HTC", "ReleaseDate": new
"SNO": 427 },
{ "Model": "HTC Desire Z", "Developer": "HTC", "ReleaseDate": new
"SNO": 428 },
{ "Model": "HTC Gratia", "Developer": "HTC", "ReleaseDate": new
"SNO": 429 },
{ "Model": "HTC Evo Shift 4G", "Developer": "HTC", "ReleaseDate": new
"SNO": 430 },
{ "Model": "HTC Inspire 4G", "Developer": "HTC", "ReleaseDate": new
"SNO": 431 },

{ "Model": "HTC Incredible S", "Developer": "HTC", "ReleaseDate": new

"SNO": 432 },
{ "Model": "HTC ThunderBolt", "Developer": "HTC", "ReleaseDate": new
"SNO": 433 },
{ "Model": "HTC Desire S", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Merge", "Developer": "HTC", "ReleaseDate": new
"SNO": 435 },
{ "Model": "HTC Sensation", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Wildfire S", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC ChaCha", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Salsa", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Evo 3D", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Amaze 4G", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Explorer", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Sensation XE", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Rhyme", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Raider 4G", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Evo Design 4G", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Sensation XL", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Rezound", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One S", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One V", "Developer": "HTC", "ReleaseDate": new

{ "Model": "HTC One X/XL", "Developer": "HTC", "ReleaseDate": new

{ "Model": "HTC Evo 4G LTE", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One S C2", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Desire C", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Desire V", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Droid Incredible 4G LTE", "Developer": "HTC",
{ "Model": "HTC Desire VC", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Desire XC", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One XC", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC J", "Developer": "HTC", "ReleaseDate": new Date("2012-07-
31T18:30:00.000Z"), "AndroidVersion": "Android 4.0 \"Ice Cream Sandwich\"",
"SNO": 460 },
{ "Model": "HTC Desire VT", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Desire X", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One VX", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One X+", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 464 },
{ "Model": "HTC Desire SV", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Desire 400", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 466 },
{ "Model": "HTC One SV", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Butterfly", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 468 },
{ "Model": "HTC One (M7)", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 469 },

{ "Model": "HTC First", "Developer": "HTC", "ReleaseDate": new

Bean\"", "SNO": 470 },
{ "Model": "HTC Desire L/P/Q", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 471 },
{ "Model": "HTC Desire U", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 473 },
{ "Model": "HTC Butterfly S", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 475 },
{ "Model": "HTC One Mini", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 476 },
Bean\"", "SNO": 477 },
{ "Model": "HTC One Max", "Developer": "HTC", "ReleaseDate": new
Bean\"", "SNO": 478 },
Bean\"", "SNO": 479 },
Bean\"", "SNO": 480 },
{ "Model": "HTC Desire 601 dual sim", "Developer": "HTC", "ReleaseDate":
Bean\"", "SNO": 481 },
Bean\"", "SNO": 482 },
Bean\"", "SNO": 483 },
"SNO": 484 },
"SNO": 485 },
Bean\"", "SNO": 486 },
"SNO": 487 },
\"KitKat\"", "SNO": 488 },

{ "Model": "HTC One Mini 2", "Developer": "HTC", "ReleaseDate": new

"SNO": 489 },
Bean\"", "SNO": 490 },
Bean\"", "SNO": 491 },
{ "Model": "HTC One (E8)", "Developer": "HTC", "ReleaseDate": new
"SNO": 492 },
Bean\"", "SNO": 493 },
{ "Model": "HTC One Remix", "Developer": "HTC", "ReleaseDate": new
"SNO": 494 },
{ "Model": "HTC Butterfly 2", "Developer": "HTC", "ReleaseDate": new
"SNO": 495 },
"SNO": 496 },
{ "Model": "HTC Desire 820q", "Developer": "HTC", "ReleaseDate": new
"SNO": 497 },
"SNO": 498 },
{ "Model": "HTC One (M8 Eye)", "Developer": "HTC", "ReleaseDate": new
"SNO": 499 },
{ "Model": "HTC Desire 816G", "Developer": "HTC", "ReleaseDate": new
"SNO": 500 },
"SNO": 501 },
{ "Model": "HTC Desire Eye", "Developer": "HTC", "ReleaseDate": new
"SNO": 502 },
{ "Model": "HTC Desire 620/G", "Developer": "HTC", "ReleaseDate": new
"SNO": 503 },
"SNO": 504 },
{ "Model": "HTC Desire 526G+", "Developer": "HTC", "ReleaseDate": new
"SNO": 505 },
\"Lollipop\"", "SNO": 506 },
"SNO": 507 },

{ "Model": "HTC Desire 820s", "Developer": "HTC", "ReleaseDate": new

"SNO": 508 },
"SNO": 509 },
{ "Model": "HTC One M9", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 510 },
{ "Model": "HTC One E9/+", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 511 },
{ "Model": "HTC One M8s", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 512 },
{ "Model": "HTC One M9+", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 513 },
"SNO": 514 },
"SNO": 515 },
{ "Model": "HTC One ME", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 516 },
\"Lollipop\"", "SNO": 517 },
\"Lollipop\"", "SNO": 518 },
{ "Model": "HTC Desire 626 (USA)", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 519 },
{ "Model": "HTC One M9+ Supreme Camera Edition", "Developer": "HTC",
\"Lollipop\"", "SNO": 521 },
{ "Model": "HTC One E9s", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 522 },
{ "Model": "HTC One A9", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 523 },
\"Lollipop\"", "SNO": 524 },
\"Lollipop\"", "SNO": 525 },
\"Lollipop\"", "SNO": 526 },


\"Lollipop\"", "SNO": 527 },
{ "Model": "HTC One X9", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC 10", "Developer": "HTC", "ReleaseDate": new Date("2016-
"SNO": 531 },
{ "Model": "HTC One M9 Prime Camera", "Developer": "HTC", "ReleaseDate":
\"Lollipop\"", "SNO": 533 },
{ "Model": "HTC 10 Lifestyle", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One S9", "Developer": "HTC", "ReleaseDate": new
\"Lollipop\"", "SNO": 537 },
\"Lollipop\"", "SNO": 538 },
{ "Model": "HTC Desire 10 Lifestyle", "Developer": "HTC", "ReleaseDate":
{ "Model": "HTC Desire 728 Ultra", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC One A9s", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC 10 evo", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC Desire 10 Pro", "Developer": "HTC", "ReleaseDate": new
{ "Model": "HTC U Play", "Developer": "HTC", "ReleaseDate": new

{ "Model": "HTC U Ultra", "Developer": "HTC", "ReleaseDate": new

"SNO": 546 },
{ "Model": "HTC U11", "Developer": "HTC", "ReleaseDate": new Date("2017-
},
{ "Model": "HTC U11+/Life", "Developer": "HTC", "ReleaseDate": new
"SNO": 549 },
{ "Model": "HTC U11 EYEs", "Developer": "HTC", "ReleaseDate": new
"SNO": 550 },
{ "Model": "HTC U12+", "Developer": "HTC", "ReleaseDate": new Date("2018-
05-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 551
},
{ "Model": "HTC U12 life", "Developer": "HTC", "ReleaseDate": new
"SNO": 552 },
{ "Model": "HTC Desire 12/12+", "Developer": "HTC", "ReleaseDate": new
"SNO": 553 },
{ "Model": "HTC Exodus 1", "Developer": "HTC", "ReleaseDate": new
"SNO": 554 },
"SNO": 555 },
{ "Model": "HTC Desire 19+", "Developer": "HTC", "ReleaseDate": new
"SNO": 556 },
{ "Model": "HTC U19e", "Developer": "HTC", "ReleaseDate": new Date("2019-
{ "Model": "HTC Wildfire X", "Developer": "HTC", "ReleaseDate": new
"SNO": 558 },
{ "Model": "HTC Exodus 1s", "Developer": "HTC", "ReleaseDate": new
"SNO": 559 },
"SNO": 560 },
{ "Model": "HTC Wildfire R70", "Developer": "HTC", "ReleaseDate": new
"SNO": 561 },
},
{ "Model": "HTC Wildfire E2", "Developer": "HTC", "ReleaseDate": new
},
{ "Model": "HTC U20 5G", "Developer": "HTC", "ReleaseDate": new
},


},
{ "Model": "Honor U8860", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Honor 2", "Developer": "Huawei", "ReleaseDate": new
Bean\"", "SNO": 568 },
{ "Model": "Honor 3C", "Developer": "Huawei", "ReleaseDate": new
Bean\"", "SNO": 569 },
{ "Model": "Honor 3X", "Developer": "Huawei", "ReleaseDate": new
"SNO": 570 },
{ "Model": "Honor 3X Pro", "Developer": "Huawei", "ReleaseDate": new
Bean\"", "SNO": 571 },
{ "Model": "Honor 3C 4G", "Developer": "Huawei", "ReleaseDate": new
"SNO": 572 },
"SNO": 573 },
{ "Model": "Honor 3C Play", "Developer": "Huawei", "ReleaseDate": new
Bean\"", "SNO": 574 },
{ "Model": "Honor 4 Play", "Developer": "Huawei", "ReleaseDate": new
"SNO": 575 },
{ "Model": "Honor Holly", "Developer": "Huawei", "ReleaseDate": new
"SNO": 576 },
"SNO": 577 },
{ "Model": "Honor 6 Plus", "Developer": "Huawei", "ReleaseDate": new
"SNO": 578 },
"SNO": 579 },
{ "Model": "Honor Bee", "Developer": "Huawei", "ReleaseDate": new
"SNO": 580 },
\"Lollipop\"", "SNO": 581 },
{ "Model": "Honor 7i", "Developer": "Huawei", "ReleaseDate": new
\"Lollipop\"", "SNO": 582 },
\"Lollipop\"", "SNO": 583 },

{ "Model": "Honor Holly 2 Plus", "Developer": "Huawei", "ReleaseDate":

\"Lollipop\"", "SNO": 584 },
{ "Model": "Honor 5c", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Honor V8", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Honor 5A", "Developer": "Huawei", "ReleaseDate": new
\"Lollipop\"", "SNO": 587 },
{ "Model": "Honor Note 8", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Honor Holly 3", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Honor Magic", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Honor 8 Pro", "Developer": "Huawei", "ReleaseDate": new
"SNO": 593 },
"SNO": 594 },
"SNO": 595 },
{ "Model": "Honor 6C Pro", "Developer": "Huawei", "ReleaseDate": new
"SNO": 596 },
"SNO": 597 },
"SNO": 598 },
{ "Model": "Honor 9 Lite", "Developer": "Huawei", "ReleaseDate": new
"SNO": 599 },
"SNO": 600 },
"SNO": 601 },
"SNO": 602 },

{ "Model": "Honor 7S", "Developer": "Huawei", "ReleaseDate": new

"SNO": 603 },
{ "Model": "Honor 9N", "Developer": "Huawei", "ReleaseDate": new
"SNO": 604 },
{ "Model": "Honor Play", "Developer": "Huawei", "ReleaseDate": new
"SNO": 605 },
"SNO": 606 },
{ "Model": "Honor 8X/Max", "Developer": "Huawei", "ReleaseDate": new
"SNO": 607 },
"SNO": 608 },
{ "Model": "Honor Magic 2/3D", "Developer": "Huawei", "ReleaseDate": new
"SNO": 609 },
"SNO": 610 },
"SNO": 611 },
{ "Model": "Honor Play 8A", "Developer": "Huawei", "ReleaseDate": new
"SNO": 612 },
{ "Model": "Honor 8A Pro", "Developer": "Huawei", "ReleaseDate": new
"SNO": 613 },
{ "Model": "Honor 20 lite", "Developer": "Huawei", "ReleaseDate": new
"SNO": 614 },
"SNO": 615 },
"SNO": 616 },
"SNO": 617 },
{ "Model": "Honor 9X (China)", "Developer": "Huawei", "ReleaseDate": new
"SNO": 618 },
"SNO": 619 },
{ "Model": "Honor Play 3/3e", "Developer": "Huawei", "ReleaseDate": new
"SNO": 620 },
"SNO": 621 },

{ "Model": "Honor 20 lite (China)", "Developer": "Huawei", "ReleaseDate":

\"Pie\"", "SNO": 622 },
"SNO": 623 },
{ "Model": "Honor V30/30 Pro", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 8A Prime", "Developer": "Huawei", "ReleaseDate": new
},
},
},
{ "Model": "Honor Play 4T/Pro", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 8A 2020", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 20e", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 30/Pro/Pro+", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 9X Lite", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 9C/9S/9A", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor X10", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor 8S 2020", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Honor Play4/Pro", "Developer": "Huawei", "ReleaseDate": new
},
},
{ "Model": "Honor X10 Max", "Developer": "Huawei", "ReleaseDate": new
},
},
},

{ "Model": "Huawei U8230", "Developer": "Huawei", "ReleaseDate": new

"SNO": 641 },
"SNO": 642 },
{ "Model": "Huawei IDEOS", "Developer": "Huawei", "ReleaseDate": new
"SNO": 643 },
{ "Model": "Huawei IDEOS X5", "Developer": "Huawei", "ReleaseDate": new
"SNO": 644 },
{ "Model": "Huawei Sonic", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Huawei Ascend P1", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Huawei STREAM X GL07S", "Developer": "Huawei", "ReleaseDate":
Bean\"", "SNO": 647 },
{ "Model": "Huawei Ascend Mate", "Developer": "Huawei", "ReleaseDate":
Bean\"", "SNO": 648 },
Bean\"", "SNO": 649 },
Bean\"", "SNO": 650 },
{ "Model": "Huawei Ascend Mate 2 4G", "Developer": "Huawei",
"SNO": 652 },
{ "Model": "Huawei Ascend Mate 7", "Developer": "Huawei", "ReleaseDate":
\"KitKat\"", "SNO": 653 },
{ "Model": "Huawei P8", "Developer": "Huawei", "ReleaseDate": new
"SNO": 654 },
{ "Model": "Huawei Mate S", "Developer": "Huawei", "ReleaseDate": new
\"Lollipop\"", "SNO": 655 },
{ "Model": "Huawei Mate 8", "Developer": "Huawei", "ReleaseDate": new
{ "Model": "Huawei Nova/Plus", "Developer": "Huawei", "ReleaseDate": new
"SNO": 659 },


"SNO": 660 },
{ "Model": "Huawei Nova 2/Plus", "Developer": "Huawei", "ReleaseDate":
\"Nougat\"", "SNO": 661 },
{ "Model": "Huawei Mate 10 Lite", "Developer": "Huawei", "ReleaseDate":
\"Nougat\"", "SNO": 662 },
"SNO": 663 },
"SNO": 664 },
{ "Model": "Huawei Nova 3i/P Smart+", "Developer": "Huawei",
"Android 8.0 \"Oreo\"", "SNO": 665 },
{ "Model": "Huawei Nova 3", "Developer": "Huawei", "ReleaseDate": new
"SNO": 666 },
"SNO": 667 },
"SNO": 668 },
{ "Model": "Huawei Nova 4e", "Developer": "Huawei", "ReleaseDate": new
"SNO": 669 },
"SNO": 670 },
{ "Model": "Huawei P30 lite", "Developer": "Huawei", "ReleaseDate": new
"SNO": 671 },
{ "Model": "Huawei Nova 5/5i/Pro", "Developer": "Huawei", "ReleaseDate":
\"Pie\"", "SNO": 672 },
{ "Model": "Huawei Nova 5i Pro", "Developer": "Huawei", "ReleaseDate":
\"Pie\"", "SNO": 673 },
{ "Model": "Huawei Nova 5T", "Developer": "Huawei", "ReleaseDate": new
"SNO": 674 },
},
{ "Model": "Huawei Nova 5z", "Developer": "Huawei", "ReleaseDate": new
"SNO": 676 },
{ "Model": "Huawei Nova 6/5G/SE", "Developer": "Huawei", "ReleaseDate":
677 },
{ "Model": "Huawei Y7p", "Developer": "Huawei", "ReleaseDate": new
},

{ "Model": "Huawei Nova 7i", "Developer": "Huawei", "ReleaseDate": new

"SNO": 679 },
},
{ "Model": "Huawei P40 lite E", "Developer": "Huawei", "ReleaseDate": new
"SNO": 681 },
},
{ "Model": "Huawei Nova 7/Pro/SE", "Developer": "Huawei", "ReleaseDate":
683 },
{ "Model": "Huawei P40 lite 5G", "Developer": "Huawei", "ReleaseDate":
684 },
{ "Model": "Huawei Nova 7 SE 5G Youth", "Developer": "Huawei",
"Android 10", "SNO": 685 },
},
{ "Model": "Huawei Nova 8 SE", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Huawei Nova 8/Pro", "Developer": "Huawei", "ReleaseDate": new
},
{ "Model": "Lenovo P780", "Developer": "Lenovo", "ReleaseDate": new
Bean\"", "SNO": 689 },
{ "Model": "Lenovo Vibe Z", "Developer": "Lenovo", "ReleaseDate": new
Bean\"", "SNO": 690 },
{ "Model": "Lenovo A526", "Developer": "Lenovo", "ReleaseDate": new
Bean\"", "SNO": 691 },
{ "Model": "Lenovo Vibe Z2 Pro", "Developer": "Lenovo", "ReleaseDate":
\"KitKat\"", "SNO": 692 },
{ "Model": "Lenovo Vibe Z2", "Developer": "Lenovo", "ReleaseDate": new
"SNO": 693 },
{ "Model": "ZUK Z1", "Developer": "Lenovo", "ReleaseDate": new
\"Lollipop\"", "SNO": 694 },
{ "Model": "Lenovo Vibe P1", "Developer": "Lenovo", "ReleaseDate": new
\"Lollipop\"", "SNO": 695 },
{ "Model": "Lenovo Vibe K4 Note", "Developer": "Lenovo", "ReleaseDate":
\"Lollipop\"", "SNO": 696 },
{ "Model": "Lenovo K5 Note", "Developer": "Lenovo", "ReleaseDate": new
\"Lollipop\"", "SNO": 697 },

{ "Model": "Lenovo Vibe P1 Turbo", "Developer": "Lenovo", "ReleaseDate":

\"Lollipop\"", "SNO": 698 },
{ "Model": "Lenovo Vibe K5/Plus", "Developer": "Lenovo", "ReleaseDate":
\"Lollipop\"", "SNO": 699 },
{ "Model": "Lenovo Phab 2/Plus/Pro", "Developer": "Lenovo",
{ "Model": "Lenovo K6/Power/Note", "Developer": "Lenovo", "ReleaseDate":
{ "Model": "Lenovo Z2 Plus", "Developer": "Lenovo", "ReleaseDate": new
{ "Model": "Lenovo Legion Pro/Duel", "Developer": "Lenovo",
"Android 10", "SNO": 705 },
{ "Model": "LG GW620", "Developer": "LG Electronics", "ReleaseDate": new
\"Cupcake\"", "SNO": 706 },
{ "Model": "LG Optimus Q", "Developer": "LG Electronics", "ReleaseDate":
\"Eclair\"", "SNO": 707 },
{ "Model": "LG Optimus", "Developer": "LG Electronics", "ReleaseDate":
\"Donut\"", "SNO": 708 },
{ "Model": "LG Optimus One", "Developer": "LG Electronics",
"Android 2.2 \"Froyo\"", "SNO": 709 },
{ "Model": "LG Optimus Chic", "Developer": "LG Electronics",
{ "Model": "LG Optimus 2X", "Developer": "LG Electronics", "ReleaseDate":
\"Froyo\"", "SNO": 711 },
{ "Model": "LG Optimus Black", "Developer": "LG Electronics",
{ "Model": "LG Optimus 3D", "Developer": "LG Electronics", "ReleaseDate":
\"Froyo\"", "SNO": 713 },
{ "Model": "LG Optimus Slider", "Developer": "LG Electronics",
{ "Model": "LG Optimus LTE (LU6200)", "Developer": "LG Electronics",
{ "Model": "LG Optimus 4X HD", "Developer": "LG Electronics",

{ "Model": "LG Optimus LTE (SU640)", "Developer": "LG Electronics",

{ "Model": "LG Optimus L9", "Developer": "LG Electronics", "ReleaseDate":
new Date("2012-10-31T18:30:00.000Z"), "AndroidVersion": "Android 4.0 \"Ice
Cream Sandwich\"", "SNO": 718 },
{ "Model": "LG Optimus Vu", "Developer": "LG Electronics", "ReleaseDate":
{ "Model": "LG Optimus G", "Developer": "LG Electronics", "ReleaseDate":
{ "Model": "LG G2", "Developer": "LG Electronics", "ReleaseDate": new
Bean\"", "SNO": 721 },
{ "Model": "LG G Flex", "Developer": "LG Electronics", "ReleaseDate": new
Bean\"", "SNO": 722 },
{ "Model": "LG G Pro Lite", "Developer": "LG Electronics", "ReleaseDate":
Bean\"", "SNO": 723 },
{ "Model": "LG Gx", "Developer": "LG Electronics", "ReleaseDate": new
Bean\"", "SNO": 724 },
{ "Model": "LG G2 Mini", "Developer": "LG Electronics", "ReleaseDate":
\"KitKat\"", "SNO": 725 },
{ "Model": "LG G Pro 2", "Developer": "LG Electronics", "ReleaseDate":
\"KitKat\"", "SNO": 726 },
"SNO": 727 },
{ "Model": "LG G3 Stylus", "Developer": "LG Electronics", "ReleaseDate":
\"KitKat\"", "SNO": 728 },
{ "Model": "LG G Flex 2", "Developer": "LG Electronics", "ReleaseDate":
\"Lollipop\"", "SNO": 729 },
\"Lollipop\"", "SNO": 730 },
{ "Model": "LG V10", "Developer": "LG Electronics", "ReleaseDate": new
\"Lollipop\"", "SNO": 731 },
{ "Model": "LG K10 (2016)", "Developer": "LG Electronics", "ReleaseDate":
\"Lollipop\"", "SNO": 732 },
"SNO": 734 },
\"Nougat\"", "SNO": 735 },


"SNO": 736 },
"SNO": 737 },
{ "Model": "LG G7 ThinQ", "Developer": "LG Electronics", "ReleaseDate":
\"Oreo\"", "SNO": 738 },
{ "Model": "LG V35 ThinQ", "Developer": "LG Electronics", "ReleaseDate":
\"Oreo\"", "SNO": 739 },
\"Nougat\"", "SNO": 740 },
\"Oreo\"", "SNO": 741 },
\"Pie\"", "SNO": 742 },
\"Pie\"", "SNO": 743 },
744 },
{ "Model": "LG Velvet", "Developer": "LG Electronics", "ReleaseDate": new
},
{ "Model": "LG Wing", "Developer": "LG Electronics", "ReleaseDate": new
},
{ "Model": "Meizu M9", "Developer": "Meizu", "ReleaseDate": new
"SNO": 747 },
{ "Model": "Meizu MX", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu MX 4-core", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu MX2", "Developer": "Meizu", "ReleaseDate": new
Bean\"", "SNO": 750 },
Bean\"", "SNO": 751 },
"SNO": 752 },
{ "Model": "Meizu MX4 Pro", "Developer": "Meizu", "ReleaseDate": new
"SNO": 753 },
{ "Model": "Meizu M1/1 Note", "Developer": "Meizu", "ReleaseDate": new
"SNO": 754 },

{ "Model": "Meizu M2 Note", "Developer": "Meizu", "ReleaseDate": new

\"Lollipop\"", "SNO": 755 },
\"Lollipop\"", "SNO": 756 },
\"Lollipop\"", "SNO": 757 },
{ "Model": "Meizu PRO 5", "Developer": "Meizu", "ReleaseDate": new
\"Lollipop\"", "SNO": 758 },
{ "Model": "Meizu M1 Metal", "Developer": "Meizu", "ReleaseDate": new
\"Lollipop\"", "SNO": 759 },
{ "Model": "Meizu MX5e", "Developer": "Meizu", "ReleaseDate": new
\"Lollipop\"", "SNO": 761 },
\"Lollipop\"", "SNO": 763 },
{ "Model": "Meizu M3s", "Developer": "Meizu", "ReleaseDate": new
\"Lollipop\"", "SNO": 764 },
{ "Model": "Meizu M3E", "Developer": "Meizu", "ReleaseDate": new
\"Lollipop\"", "SNO": 766 },
{ "Model": "Meizu U10/20", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu M3 Max", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu PRO 6s", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu M3x", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu PRO 6 Plus", "Developer": "Meizu", "ReleaseDate": new


{ "Model": "Meizu E2", "Developer": "Meizu", "ReleaseDate": new
"SNO": 775 },
{ "Model": "Meizu M5c", "Developer": "Meizu", "ReleaseDate": new
{ "Model": "Meizu PRO 7/Plus", "Developer": "Meizu", "ReleaseDate": new
"SNO": 777 },
"SNO": 778 },
"SNO": 779 },
"SNO": 780 },
"SNO": 781 },
{ "Model": "Meizu 15/Pro/Lite", "Developer": "Meizu", "ReleaseDate": new
"SNO": 782 },
"SNO": 783 },
{ "Model": "Meizu M6T", "Developer": "Meizu", "ReleaseDate": new
"SNO": 784 },
{ "Model": "Meizu 16th/Plus", "Developer": "Meizu", "ReleaseDate": new
"SNO": 785 },
{ "Model": "Meizu 16X", "Developer": "Meizu", "ReleaseDate": new
"SNO": 786 },
{ "Model": "Meizu V8/Pro", "Developer": "Meizu", "ReleaseDate": new
"SNO": 787 },
{ "Model": "Meizu X8", "Developer": "Meizu", "ReleaseDate": new
"SNO": 788 },
{ "Model": "Meizu Note 8", "Developer": "Meizu", "ReleaseDate": new
"SNO": 789 },
{ "Model": "Meizu C9/Pro", "Developer": "Meizu", "ReleaseDate": new
"SNO": 790 },
"SNO": 791 },
"SNO": 792 },

{ "Model": "Meizu 16s", "Developer": "Meizu", "ReleaseDate": new

"SNO": 793 },
{ "Model": "Meizu 16Xs", "Developer": "Meizu", "ReleaseDate": new
"SNO": 794 },
{ "Model": "Meizu 16s Pro", "Developer": "Meizu", "ReleaseDate": new
"SNO": 795 },
{ "Model": "Meizu 16T", "Developer": "Meizu", "ReleaseDate": new
"SNO": 796 },
{ "Model": "Meizu 17/Pro", "Developer": "Meizu", "ReleaseDate": new
},
{ "Model": "Motorola Cliq", "Developer": "Motorola", "ReleaseDate": new
\"Cupcake\"", "SNO": 798 },
{ "Model": "Motorola Droid", "Developer": "Motorola", "ReleaseDate": new
"SNO": 799 },
{ "Model": "Motorola Backflip", "Developer": "Motorola", "ReleaseDate":
\"Cupcake\"", "SNO": 800 },
{ "Model": "Motorola Flipout", "Developer": "Motorola", "ReleaseDate":
\"Eclair\"", "SNO": 801 },
{ "Model": "Motorola Droid X", "Developer": "Motorola", "ReleaseDate":
\"Eclair\"", "SNO": 802 },
{ "Model": "Motorola Charm", "Developer": "Motorola", "ReleaseDate": new
"SNO": 803 },
{ "Model": "Motorola Droid 2", "Developer": "Motorola", "ReleaseDate":
\"Froyo\"", "SNO": 804 },
{ "Model": "Motorola Defy", "Developer": "Motorola", "ReleaseDate": new
"SNO": 805 },
{ "Model": "Motorola Droid Pro", "Developer": "Motorola", "ReleaseDate":
\"Froyo\"", "SNO": 806 },
{ "Model": "Motorola Atrix 4G", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid 3", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Bionic", "Developer": "Motorola Mobility",
{ "Model": "Motorola Atrix 2", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Razr", "Developer": "Motorola Mobility",


{ "Model": "Motorola Atrix HD", "Developer": "Motorola Mobility",
{ "Model": "Motorola Photon Q", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Razr M", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Razr HD", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Maxx", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Mini", "Developer": "Motorola Mobility",
{ "Model": "Moto X (1st generation)", "Developer": "Motorola Mobility",
{ "Model": "Moto G (1st generation)", "Developer": "Motorola Mobility",
{ "Model": "Moto E (1st generation)", "Developer": "Motorola Mobility",
{ "Model": "Moto G (2nd generation)", "Developer": "Motorola Mobility",
{ "Model": "Moto X (2nd generation)", "Developer": "Motorola Mobility",
{ "Model": "Motorola Droid Turbo", "Developer": "Motorola Mobility",
{ "Model": "Moto E (2nd generation)", "Developer": "Motorola Mobility",
{ "Model": "Moto G (3rd generation)", "Developer": "Motorola Mobility",
{ "Model": "Moto X Play", "Developer": "Motorola Mobility",
{ "Model": "Moto X Style", "Developer": "Motorola Mobility",
{ "Model": "Moto G4", "Developer": "Motorola Mobility", "ReleaseDate":
{ "Model": "Moto E3", "Developer": "Motorola Mobility", "ReleaseDate":

{ "Model": "Moto Z", "Developer": "Motorola Mobility", "ReleaseDate": new

{ "Model": "Moto Z Play", "Developer": "Motorola Mobility",
\"Nougat\"", "SNO": 833 },
{ "Model": "Moto C", "Developer": "Motorola Mobility", "ReleaseDate": new
"SNO": 834 },
\"Nougat\"", "SNO": 835 },
{ "Model": "Moto Z2 Play", "Developer": "Motorola Mobility",
{ "Model": "Moto Z2 Force", "Developer": "Motorola Mobility",
{ "Model": "Moto X4", "Developer": "Motorola Mobility", "ReleaseDate":
\"Nougat\"", "SNO": 838 },
\"Oreo\"", "SNO": 839 },
\"Oreo\"", "SNO": 840 },
"Android 8.0 \"Oreo\"", "SNO": 841 },
{ "Model": "Moto Z3", "Developer": "Motorola Mobility", "ReleaseDate":
\"Oreo\"", "SNO": 842 },
{ "Model": "Motorola One/One Power", "Developer": "Motorola Mobility",
"Android 8.0 \"Oreo\"", "SNO": 843 },
\"Pie\"", "SNO": 844 },
{ "Model": "Motorola One Vision", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 845 },
\"Pie\"", "SNO": 846 },
{ "Model": "Motorola One Zoom", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 847 },
{ "Model": "Moto G8 Plus", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 848 },
{ "Model": "Motorola One Macro", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 849 },

{ "Model": "Motorola One Action", "Developer": "Motorola Mobility",

"Android 9.0 \"Pie\"", "SNO": 850 },
{ "Model": "Motorola Razr (4G)", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 851 },
{ "Model": "Motorola One Hyper", "Developer": "Motorola Mobility",
"Android 10", "SNO": 852 },
{ "Model": "Moto G8 Power", "Developer": "Motorola Mobility",
"Android 10", "SNO": 853 },
{ "Model": "Moto G Power/Stylus", "Developer": "Motorola Mobility",
"Android 10", "SNO": 854 },
855 },
{ "Model": "Moto E6s (2020)", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 856 },
{ "Model": "Moto G8 Power Lite", "Developer": "Motorola Mobility",
"Android 9.0 \"Pie\"", "SNO": 857 },
{ "Model": "Motorola Edge/Edge+", "Developer": "Motorola Mobility",
"Android 10", "SNO": 858 },
{ "Model": "Moto G Pro", "Developer": "Motorola Mobility", "ReleaseDate":
859 },
{ "Model": "Moto E (2020)", "Developer": "Motorola Mobility",
"Android 10", "SNO": 860 },
{ "Model": "Moto G Fast", "Developer": "Motorola Mobility",
"Android 10", "SNO": 861 },
{ "Model": "Motorola One Fusion+", "Developer": "Motorola Mobility",
"Android 10", "SNO": 862 },
{ "Model": "Motorola One Fusion", "Developer": "Motorola Mobility",
"Android 10", "SNO": 863 },
{ "Model": "Moto G 5G Plus", "Developer": "Motorola Mobility",
"Android 10", "SNO": 864 },
{ "Model": "Moto G9 Play", "Developer": "Motorola Mobility",
"Android 10", "SNO": 865 },
"Android 10", "SNO": 866 },
{ "Model": "Moto E7 Plus", "Developer": "Motorola Mobility",
"Android 10", "SNO": 867 },
"Android 10", "SNO": 868 },


"Android 10", "SNO": 869 },
{ "Model": "Moto G 5G", "Developer": "Motorola Mobility", "ReleaseDate":
870 },
871 },
{ "Model": "Moto G Play (2021)", "Developer": "Motorola Mobility",
"Android 10", "SNO": 872 },
{ "Model": "Moto G Power (2021)", "Developer": "Motorola Mobility",
"Android 10", "SNO": 873 },
{ "Model": "Moto G Stylus (2021)", "Developer": "Motorola Mobility",
"Android 10", "SNO": 874 },
{ "Model": "Motorola Edge S", "Developer": "Motorola Mobility",
"Android 11", "SNO": 875 },
{ "Model": "Moto E6i", "Developer": "Motorola Mobility", "ReleaseDate":
876 },
{ "Model": "Moto E7 Power", "Developer": "Motorola Mobility",
"Android 10", "SNO": 877 },
878 },
879 },
{ "Model": "Nextbit Robin", "Developer": "Nextbit", "ReleaseDate": new
\"Lollipop\"", "SNO": 880 },
{ "Model": "Nexus One", "Developer": "HTC/Google", "ReleaseDate": new
"SNO": 881 },
{ "Model": "Nexus S", "Developer": "Samsung Electronics/Google",
{ "Model": "Galaxy Nexus", "Developer": "Samsung Electronics/Google",
{ "Model": "Nexus 4", "Developer": "LG Electronics/Google",
{ "Model": "Nexus 6", "Developer": "Motorola Mobility/Google",
{ "Model": "Nexus 5X", "Developer": "LG Electronics/Google",

{ "Model": "Nexus 6P", "Developer": "Huawei/Google", "ReleaseDate": new

{ "Model": "Nokia X", "Developer": "Nokia", "ReleaseDate": new
Bean\"", "SNO": 889 },
{ "Model": "Nokia XL", "Developer": "Microsoft Mobile", "ReleaseDate":
Bean\"", "SNO": 890 },
{ "Model": "Nokia X2", "Developer": "Microsoft Mobile", "ReleaseDate":
Bean\"", "SNO": 891 },
{ "Model": "Nokia 6", "Developer": "HMD Global", "ReleaseDate": new
"SNO": 892 },
"SNO": 893 },
"SNO": 894 },
"SNO": 895 },
"SNO": 896 },
"SNO": 897 },
{ "Model": "Nokia 7 Plus", "Developer": "HMD Global", "ReleaseDate": new
"SNO": 898 },
"SNO": 899 },
{ "Model": "Nokia 6.1", "Developer": "HMD Global", "ReleaseDate": new
"SNO": 900 },
{ "Model": "Nokia 8 Sirocco", "Developer": "HMD Global", "ReleaseDate":
\"Oreo\"", "SNO": 901 },
"SNO": 902 },
{ "Model": "Nokia 5.1 Plus", "Developer": "HMD Global", "ReleaseDate":
\"Oreo\"", "SNO": 903 },
"SNO": 904 },
"SNO": 905 },
\"Oreo\"", "SNO": 906 },


\"Oreo\"", "SNO": 907 },
"SNO": 908 },
"SNO": 909 },
{ "Model": "Nokia 9 PureView", "Developer": "HMD Global", "ReleaseDate":
\"Pie\"", "SNO": 910 },
"SNO": 911 },
"SNO": 912 },
"SNO": 913 },
"SNO": 914 },
"SNO": 915 },
"SNO": 916 },
"SNO": 917 },
{ "Model": "Nokia C1", "Developer": "HMD Global", "ReleaseDate": new
"SNO": 918 },
"SNO": 919 },
},
},
{ "Model": "Nokia C2 Tava", "Developer": "HMD Global", "ReleaseDate": new
},
{ "Model": "Nokia C5 Endi", "Developer": "HMD Global", "ReleaseDate": new
},
{ "Model": "Nokia C2 Tennen", "Developer": "HMD Global", "ReleaseDate":
924 },
},


},
},
{ "Model": "Nokia C1 Plus", "Developer": "HMD Global", "ReleaseDate": new
},
},
},
{ "Model": "Nubia Z5", "Developer": "ZTE", "ReleaseDate": new Date("2012-
931 },
{ "Model": "Nubia Z5S", "Developer": "ZTE", "ReleaseDate": new
Bean\"", "SNO": 932 },
{ "Model": "Nubia Z5S mini NX403A", "Developer": "ZTE", "ReleaseDate":
Bean\"", "SNO": 933 },
{ "Model": "Nubia X6", "Developer": "ZTE", "ReleaseDate": new Date("2014-
934 },
{ "Model": "Nubia Z7/Max/mini", "Developer": "ZTE", "ReleaseDate": new
"SNO": 935 },
{ "Model": "Nubia Z5S mini NX405H", "Developer": "ZTE", "ReleaseDate":
Bean\"", "SNO": 936 },
{ "Model": "Nubia Z9 Max", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 937 },
{ "Model": "Nubia Z9 mini", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 938 },
939 },
{ "Model": "Nubia My Prague", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 940 },
{ "Model": "Nubia Prague S", "Developer": "ZTE", "ReleaseDate": new
\"Lollipop\"", "SNO": 941 },
\"Lollipop\"", "SNO": 942 },
\"Lollipop\"", "SNO": 943 },
{ "Model": "Nubia Z11", "Developer": "ZTE", "ReleaseDate": new

{ "Model": "Nubia N1", "Developer": "ZTE", "ReleaseDate": new Date("2016-

"SNO": 945 },
{ "Model": "Nubia Z11 mini S", "Developer": "ZTE", "ReleaseDate": new
{ "Model": "Nubia M2/lite", "Developer": "ZTE", "ReleaseDate": new
"SNO": 948 },
{ "Model": "Nubia N1 lite", "Developer": "ZTE", "ReleaseDate": new
"SNO": 951 },
{ "Model": "Nubia Z17 lite", "Developer": "ZTE", "ReleaseDate": new
"SNO": 952 },
{ "Model": "Nubia Z17 miniS", "Developer": "ZTE", "ReleaseDate": new
"SNO": 953 },
{ "Model": "Nubia Z17s", "Developer": "ZTE", "ReleaseDate": new
"SNO": 954 },
},
{ "Model": "Nubia V18", "Developer": "ZTE", "ReleaseDate": new
"SNO": 956 },
"SNO": 957 },
{ "Model": "Nubia Red Magic", "Developer": "ZTE", "ReleaseDate": new
"SNO": 958 },
"SNO": 959 },
{ "Model": "Nubia X", "Developer": "ZTE", "ReleaseDate": new Date("2018-
},
{ "Model": "Nubia Red Magic Mars", "Developer": "ZTE", "ReleaseDate": new
"SNO": 961 },
{ "Model": "Nubia Red Magic 3", "Developer": "ZTE", "ReleaseDate": new
"SNO": 962 },
"SNO": 963 },

{ "Model": "Nubia Red Magic 3s", "Developer": "ZTE", "ReleaseDate": new

"SNO": 964 },
{ "Model": "Nubia Red Magic 5G", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "Nubia Play", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "Nubia Red Magic 5G Lite", "Developer": "ZTE", "ReleaseDate":
967 },
{ "Model": "Nubia Red Magic 5S", "Developer": "ZTE", "ReleaseDate": new
},
{ "Model": "Nubia Red Magic 6/Pro", "Developer": "ZTE", "ReleaseDate":
969 },
{ "Model": "OnePlus One", "Developer": "OnePlus", "ReleaseDate": new
"SNO": 970 },
{ "Model": "OnePlus 2", "Developer": "OnePlus", "ReleaseDate": new
\"Lollipop\"", "SNO": 971 },
{ "Model": "OnePlus X", "Developer": "OnePlus", "ReleaseDate": new
\"Lollipop\"", "SNO": 972 },
{ "Model": "OnePlus 3T", "Developer": "OnePlus", "ReleaseDate": new
"SNO": 975 },
"SNO": 976 },
"SNO": 977 },
"SNO": 978 },
"SNO": 979 },
{ "Model": "OnePlus 7 Pro", "Developer": "OnePlus", "ReleaseDate": new
"SNO": 980 },
},
{ "Model": "OnePlus 7T Pro", "Developer": "OnePlus", "ReleaseDate": new
},


},
},
{ "Model": "OnePlus Nord", "Developer": "OnePlus", "ReleaseDate": new
},
},
{ "Model": "OnePlus Nord N10", "Developer": "OnePlus", "ReleaseDate": new
},
{ "Model": "OnePlus Nord N100", "Developer": "OnePlus", "ReleaseDate":
988 },
{ "Model": "Oppo Find", "Developer": "Oppo", "ReleaseDate": new
{ "Model": "Oppo Find 5", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 990 },
{ "Model": "Oppo N1", "Developer": "Oppo", "ReleaseDate": new Date("2013-
991 },
{ "Model": "Oppo Find 5 Mini", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 992 },
{ "Model": "Oppo Neo", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 993 },
{ "Model": "Oppo Find 7/7a", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 994 },
{ "Model": "Oppo Joy", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 995 },
{ "Model": "Oppo N1 mini", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 996 },
{ "Model": "Oppo Neo 3/5", "Developer": "Oppo", "ReleaseDate": new
Bean\"", "SNO": 997 },
09-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 998
},
{ "Model": "Oppo Joy Plus", "Developer": "Oppo", "ReleaseDate": new
"SNO": 999 },
{ "Model": "Oppo Neo 5s", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1000 },
{ "Model": "Oppo R7", "Developer": "Oppo", "ReleaseDate": new Date("2015-
04-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO":
1001 },

{ "Model": "Oppo Neo 5 (2015)", "Developer": "Oppo", "ReleaseDate": new

"SNO": 1002 },
{ "Model": "Oppo Joy 3", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1003 },
{ "Model": "Oppo Neo 7", "Developer": "Oppo", "ReleaseDate": new
\"Lollipop\"", "SNO": 1004 },
{ "Model": "Oppo F1", "Developer": "Oppo", "ReleaseDate": new Date("2015-
1005 },
{ "Model": "Oppo R11", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1006 },
},
{ "Model": "Oppo R15 Pro", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1008 },
{ "Model": "Oppo Find X", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1009 },
},
"SNO": 1011 },
{ "Model": "Oppo Reno", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1012 },
{ "Model": "Oppo Reno2", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1013 },
{ "Model": "Oppo A9 (2020)", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1014 },
{ "Model": "Oppo Reno3 5G/Pro 5G", "Developer": "Oppo", "ReleaseDate":
1015 },
{ "Model": "Oppo Reno3 Pro", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo Find X2/Pro", "Developer": "Oppo", "ReleaseDate": new
},
},
{ "Model": "Oppo Ace2", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo A12", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1020 },


},
{ "Model": "Oppo A72/A92s", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo Find X2 Lite/Neo", "Developer": "Oppo", "ReleaseDate":
1023 },
},
1025 },
{ "Model": "Oppo A12s", "Developer": "Oppo", "ReleaseDate": new
"SNO": 1026 },
{ "Model": "Oppo A72 5G", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo Reno4/Pro", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo F17/Pro", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo Reno4 SE", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo Reno4 Lite", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo Reno4 Z 5G", "Developer": "Oppo", "ReleaseDate": new
},
{ "Model": "Oppo A93/Reno4 F", "Developer": "Oppo", "ReleaseDate": new
},
},
},
{ "Model": "Oppo Reno5 5G/Pro 5G/Pro+ 5G", "Developer": "Oppo",
"Android 11", "SNO": 1036 },
},
{ "Model": "Palm", "Developer": "Palm, Inc.", "ReleaseDate": new
"SNO": 1038 },
{ "Model": "Panasonic P100", "Developer": "Panasonic", "ReleaseDate": new
"SNO": 1039 },

{ "Model": "Pixel/XL", "Developer": "Google", "ReleaseDate": new

"SNO": 1040 },
{ "Model": "Pixel 2/XL", "Developer": "Google", "ReleaseDate": new
"SNO": 1041 },
"SNO": 1042 },
{ "Model": "Pixel 3a/XL", "Developer": "Google", "ReleaseDate": new
"SNO": 1043 },
},
{ "Model": "Pixel 4a", "Developer": "Google", "ReleaseDate": new
},
{ "Model": "Pixel 4a (5G)", "Developer": "Google", "ReleaseDate": new
},
{ "Model": "Pixel 5", "Developer": "Google", "ReleaseDate": new
},
{ "Model": "Razer Phone", "Developer": "Razer Inc.", "ReleaseDate": new
"SNO": 1048 },
{ "Model": "Razer Phone 2", "Developer": "Razer Inc.", "ReleaseDate": new
"SNO": 1049 },
{ "Model": "Realme 1", "Developer": "Realme", "ReleaseDate": new
"SNO": 1050 },
"SNO": 1051 },
{ "Model": "Realme C1", "Developer": "Realme", "ReleaseDate": new
"SNO": 1052 },
{ "Model": "Realme 2 Pro", "Developer": "Realme", "ReleaseDate": new
"SNO": 1053 },
{ "Model": "Realme U1", "Developer": "Realme", "ReleaseDate": new
"SNO": 1054 },
"SNO": 1055 },
"SNO": 1056 },
"SNO": 1057 },
{ "Model": "Realme X", "Developer": "Realme", "ReleaseDate": new
"SNO": 1058 },

{ "Model": "Realme 3i", "Developer": "Realme", "ReleaseDate": new

"SNO": 1059 },
"SNO": 1060 },
"SNO": 1061 },
{ "Model": "Realme XT", "Developer": "Realme", "ReleaseDate": new
"SNO": 1062 },
{ "Model": "Realme X2", "Developer": "Realme", "ReleaseDate": new
"SNO": 1063 },
{ "Model": "Realme X2 Pro", "Developer": "Realme", "ReleaseDate": new
"SNO": 1064 },
"SNO": 1065 },
},
},
},
},
},
},
{ "Model": "Realme X50 Pro Player", "Developer": "Realme", "ReleaseDate":
1072 },
{ "Model": "Realme X3 SuperZoom", "Developer": "Realme", "ReleaseDate":
1073 },
{ "Model": "Realme Narzo", "Developer": "Realme", "ReleaseDate": new
},
{ "Model": "Realme C3i", "Developer": "Realme", "ReleaseDate": new
},
},
},


},
{ "Model": "Realme V5", "Developer": "Realme", "ReleaseDate": new
},
},
},
{ "Model": "Realme X7/Pro", "Developer": "Realme", "ReleaseDate": new
},
{ "Model": "Realme 7 (Asia)/Pro", "Developer": "Realme", "ReleaseDate":
1083 },
},
},
{ "Model": "Realme Narzo 20/Pro/20A", "Developer": "Realme",
"Android 10", "SNO": 1086 },
{ "Model": "Realme 7 (Global)", "Developer": "Realme", "ReleaseDate": new
},
{ "Model": "Realme Q2/Pro/2i", "Developer": "Realme", "ReleaseDate": new
},
{ "Model": "Realme 7 5G", "Developer": "Realme", "ReleaseDate": new
},
{ "Model": "Redmi 1", "Developer": "Xiaomi", "ReleaseDate": new
Bean\"", "SNO": 1090 },
{ "Model": "Redmi 1S", "Developer": "Xiaomi", "ReleaseDate": new
Bean\"", "SNO": 1091 },
{ "Model": "Redmi Note (3G)", "Developer": "Xiaomi", "ReleaseDate": new
Bean\"", "SNO": 1092 },
{ "Model": "Redmi Note 4G", "Developer": "Xiaomi", "ReleaseDate": new
Bean\"", "SNO": 1093 },
{ "Model": "Redmi Note Prime", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1094 },
"SNO": 1095 },
{ "Model": "Redmi 2A", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1096 },

{ "Model": "Redmi 2 Prime", "Developer": "Xiaomi", "ReleaseDate": new

"SNO": 1097 },
{ "Model": "Redmi Note 2", "Developer": "Xiaomi", "ReleaseDate": new
\"Lollipop\"", "SNO": 1098 },
{ "Model": "Redmi 2 Pro", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1099 },
{ "Model": "Redmi Note 3 (MTK)", "Developer": "Xiaomi", "ReleaseDate":
\"Lollipop\"", "SNO": 1100 },
\"Lollipop\"", "SNO": 1101 },
{ "Model": "Redmi Note 3/Pro", "Developer": "Xiaomi", "ReleaseDate": new
\"Lollipop\"", "SNO": 1102 },
\"Lollipop\"", "SNO": 1103 },
\"Lollipop\"", "SNO": 1104 },
{ "Model": "Redmi 3X", "Developer": "Xiaomi", "ReleaseDate": new
\"Lollipop\"", "SNO": 1105 },
{ "Model": "Redmi 3S Prime", "Developer": "Xiaomi", "ReleaseDate": new
\"Lollipop\"", "SNO": 1106 },
{ "Model": "Redmi Pro", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1107 },
{ "Model": "Redmi 4/Pro/Prime", "Developer": "Xiaomi", "ReleaseDate": new
{ "Model": "Redmi Note 4/4X", "Developer": "Xiaomi", "ReleaseDate": new
{ "Model": "Redmi Note 5A/Prime", "Developer": "Xiaomi", "ReleaseDate":
\"Nougat\"", "SNO": 1113 },
"SNO": 1114 },
{ "Model": "Redmi 5/5 Plus", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1115 },

{ "Model": "Redmi Note 5 Pro", "Developer": "Xiaomi", "ReleaseDate": new

"SNO": 1116 },
"SNO": 1117 },
{ "Model": "Redmi S2/Y2", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1118 },
{ "Model": "Redmi 6/6A/6 Pro", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1119 },
"SNO": 1120 },
"SNO": 1121 },
{ "Model": "Redmi Go", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1122 },
"SNO": 1123 },
"SNO": 1124 },
{ "Model": "Redmi Y3", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1125 },
"SNO": 1126 },
{ "Model": "Redmi K20/Pro", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1127 },
"SNO": 1128 },
"SNO": 1129 },
"SNO": 1130 },
{ "Model": "Redmi Note 8T", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1131 },
{ "Model": "Redmi K30/5G", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Redmi 8A Dual", "Developer": "Xiaomi", "ReleaseDate": new
"SNO": 1133 },
{ "Model": "Redmi Note 9 Pro (India)/Pro Max/9S", "Developer": "Xiaomi",
"Android 10", "SNO": 1134 },

{ "Model": "Redmi K30 Pro/Pro Zoom", "Developer": "Xiaomi",

"Android 10", "SNO": 1135 },
{ "Model": "Redmi Note 9/Pro (Global)", "Developer": "Xiaomi",
"Android 10", "SNO": 1136 },
{ "Model": "Redmi 10X/Pro", "Developer": "Xiaomi", "ReleaseDate": new
},
},
},
{ "Model": "Redmi 9C", "Developer": "Xiaomi", "ReleaseDate": new
},
},
{ "Model": "Redmi K30 Ultra", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Redmi K30S", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Redmi Note 9 4G/5G/Pro 5G", "Developer": "Xiaomi",
"Android 10", "SNO": 1144 },
{ "Model": "Redmi 9 Power", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Redmi 9T/Note 9T", "Developer": "Xiaomi", "ReleaseDate": new
},
{ "Model": "Redmi K40/Pro/Pro+", "Developer": "Xiaomi", "ReleaseDate":
1147 },
{ "Model": "Redmi Note 10/Pro/Pro Max", "Developer": "Xiaomi",
"Android 11", "SNO": 1148 },
{ "Model": "Redmi Note 10S/5G", "Developer": "Xiaomi", "ReleaseDate": new
}
];
DATASOURCE.TSX


"Android 8.0 \"Oreo\"", "SNO": 12 },
"Android 8.0 \"Oreo\"", "SNO": 13 },
"Android 8.0 \"Oreo\"", "SNO": 18 },
"Android 9.0 \"Pie\"", "SNO": 20 },


"Android 9.0 \"Pie\"", "SNO": 24 },
"Android 9.0 \"Pie\"", "SNO": 25 },
"Android 9.0 \"Pie\"", "SNO": 26 },
"Android 10", "SNO": 27 },
"Android 10", "SNO": 28 },
"Android 9.0 \"Pie\"", "SNO": 29 },
"Android 9.0 \"Pie\"", "SNO": 30 },
"Android 9.0 \"Pie\"", "SNO": 31 },
"Android 10", "SNO": 32 },
"Android 10", "SNO": 33 },
"Android 9.0 \"Pie\"", "SNO": 34 },
"Android 10", "SNO": 36 },
"Android 11", "SNO": 37 },
"Android 11", "SNO": 38 },
"Android 10", "SNO": 39 },
"Android 10", "SNO": 40 },


"Android 9.0 \"Pie\"", "SNO": 41 },
"Android 10", "SNO": 44 },
"Android 9.0 \"Pie\"", "SNO": 45 },
"Android 9.0 \"Pie\"", "SNO": 46 },
"Android 9.0 \"Pie\"", "SNO": 47 },
"Android 9.0 \"Pie\"", "SNO": 49 },
"Android 9.0 \"Pie\"", "SNO": 50 },
"Android 10", "SNO": 56 },
"Android 11", "SNO": 57 },
"Android 9.0 \"Pie\"", "SNO": 58 },


"Android 10", "SNO": 60 },
"Android 11", "SNO": 61 },
"Android 10", "SNO": 62 },
"Android 11", "SNO": 63 },
"Android 8.0 \"Oreo\"", "SNO": 72 },


"Android 8.0 \"Oreo\"", "SNO": 87 },
"Android 9.0 \"Pie\"", "SNO": 88 },
"Android 9.0 \"Pie\"", "SNO": 89 },
"Android 10", "SNO": 90 },
"Android 10", "SNO": 93 },
"Android 10", "SNO": 95 },


\"Pie\"", "SNO": 100 },
101 },
\"Pie\"", "SNO": 102 },
103 },
\"Pie\"", "SNO": 104 },
"Android 10", "SNO": 105 },
"Android 9.0 \"Pie\"", "SNO": 106 },
\"Nougat\"", "SNO": 107 },
\"Nougat\"", "SNO": 108 },
\"Oreo\"", "SNO": 109 },
\"Pie\"", "SNO": 110 },
111 },
\"Nougat\"", "SNO": 116 },


"Android 8.0 \"Oreo\"", "SNO": 119 },
"Android 8.0 \"Oreo\"", "SNO": 120 },
"Android 8.0 \"Oreo\"", "SNO": 122 },
"Android 8.0 \"Oreo\"", "SNO": 123 },
"Android 8.0 \"Oreo\"", "SNO": 124 },
\"Pie\"", "SNO": 125 },
Bean\"", "SNO": 127 },
Bean\"", "SNO": 129 },
\"KitKat\"", "SNO": 131 },
\"Lollipop\"", "SNO": 133 },


},
},
},
},
},
\"Nougat\"", "SNO": 144 },
"SNO": 146 },
\"Nougat\"", "SNO": 148 },
\"Nougat\"", "SNO": 149 },
\"Nougat\"", "SNO": 150 },
\"Nougat\"", "SNO": 151 },
"Android 8.0 \"Oreo\"", "SNO": 152 },
\"Oreo\"", "SNO": 153 },
"Android 8.0 \"Oreo\"", "SNO": 154 },


"Android 8.0 \"Oreo\"", "SNO": 155 },
"Android 9.0 \"Pie\"", "SNO": 156 },
\"Pie\"", "SNO": 157 },
\"Pie\"", "SNO": 158 },
"Android 9.0 \"Pie\"", "SNO": 159 },
\"Pie\"", "SNO": 160 },
"Android 9.0 \"Pie\"", "SNO": 161 },
"Android 9.0 \"Pie\"", "SNO": 162 },
"Android 10", "SNO": 163 },
"Android 10", "SNO": 164 },
165 },
"Android 10", "SNO": 166 },
"Android 10", "SNO": 167 },
"Android 10", "SNO": 168 },
"Android 10", "SNO": 169 },
"Android 10", "SNO": 170 },
"Android 10", "SNO": 171 },
172 },
173 },


},
175 },
176 },
Bean\"", "SNO": 177 },
"SNO": 178 },
"SNO": 179 },
\"Lollipop\"", "SNO": 180 },
"SNO": 181 },
182 },
\"Lollipop\"", "SNO": 183 },
\"Lollipop\"", "SNO": 184 },
\"Lollipop\"", "SNO": 185 },
\"Lollipop\"", "SNO": 186 },
\"Lollipop\"", "SNO": 187 },
"SNO": 189 },


"SNO": 193 },
"SNO": 194 },
"SNO": 195 },
},
"SNO": 197 },
"SNO": 198 },
"SNO": 199 },
"SNO": 200 },
"SNO": 201 },
"SNO": 202 },
"SNO": 203 },
"SNO": 204 },
\"Pie\"", "SNO": 205 },
"SNO": 206 },
"SNO": 207 },
"SNO": 208 },
"SNO": 209 },
"SNO": 210 },
"SNO": 211 },


"SNO": 212 },
},
},
},
},
},
},
},
},
},
},
},
},
Bean\"", "SNO": 227 },
Bean\"", "SNO": 228 },
Bean\"", "SNO": 229 },
"SNO": 230 },


"SNO": 231 },
\"Lollipop\"", "SNO": 232 },
\"Lollipop\"", "SNO": 233 },
\"Lollipop\"", "SNO": 234 },
\"Lollipop\"", "SNO": 235 },
"SNO": 242 },
"SNO": 243 },
\"Nougat\"", "SNO": 244 },
"SNO": 245 },
"SNO": 246 },
"SNO": 247 },
\"Oreo\"", "SNO": 248 },
\"Oreo\"", "SNO": 249 },


"SNO": 250 },
"SNO": 251 },
\"Oreo\"", "SNO": 252 },
\"Oreo\"", "SNO": 253 },
"SNO": 254 },
"Android 8.0 \"Oreo\"", "SNO": 255 },
"SNO": 256 },
"SNO": 257 },
\"Pie\"", "SNO": 258 },
\"Pie\"", "SNO": 259 },
"SNO": 260 },
"SNO": 261 },
"SNO": 262 },
"Android 9.0 \"Pie\"", "SNO": 263 },
"SNO": 264 },
"Android 10", "SNO": 265 },
\"Pie\"", "SNO": 266 },
},
"Android 10", "SNO": 268 },


},
270 },
"Android 10", "SNO": 271 },
},
273 },
},
},
},
"Android 10", "SNO": 277 },
},
},
},
},
},
"SNO": 283 },
"SNO": 284 },
"SNO": 285 },
"SNO": 286 },


"SNO": 289 },
"SNO": 291 },


Bean\"", "SNO": 310 },
Bean\"", "SNO": 312 },
Bean\"", "SNO": 313 },
Bean\"", "SNO": 314 },
Bean\"", "SNO": 315 },
Bean\"", "SNO": 316 },
Bean\"", "SNO": 317 },
Bean\"", "SNO": 318 },
"SNO": 319 },
\"Lollipop\"", "SNO": 320 },
"SNO": 321 },
\"Lollipop\"", "SNO": 322 },
"SNO": 323 },
\"Lollipop\"", "SNO": 324 },
"SNO": 325 },


\"Lollipop\"", "SNO": 326 },
"SNO": 327 },
\"Lollipop\"", "SNO": 328 },
\"Lollipop\"", "SNO": 329 },
\"Lollipop\"", "SNO": 330 },
\"Lollipop\"", "SNO": 331 },
\"Lollipop\"", "SNO": 332 },
\"Lollipop\"", "SNO": 333 },
\"Lollipop\"", "SNO": 334 },
335 },
\"Lollipop\"", "SNO": 336 },
\"Lollipop\"", "SNO": 337 },
\"Lollipop\"", "SNO": 338 },
"SNO": 342 },
"SNO": 344 },


"SNO": 345 },
"SNO": 346 },
"SNO": 347 },
"SNO": 348 },
"SNO": 349 },
"SNO": 350 },
"SNO": 351 },
"SNO": 352 },
"SNO": 353 },
"SNO": 354 },
"SNO": 355 },
"SNO": 356 },
"SNO": 357 },
"SNO": 358 },
"SNO": 359 },
"SNO": 360 },
"SNO": 361 },
},
},


},
},
},
},
},
},
Bean\"", "SNO": 372 },
Bean\"", "SNO": 373 },
Bean\"", "SNO": 374 },
Bean\"", "SNO": 375 },
Bean\"", "SNO": 377 },
Bean\"", "SNO": 378 },
Bean\"", "SNO": 379 },
"SNO": 380 },
\"KitKat\"", "SNO": 381 },
\"KitKat\"", "SNO": 382 },


"SNO": 383 },
"SNO": 384 },
Bean\"", "SNO": 385 },
\"Lollipop\"", "SNO": 386 },
"SNO": 388 },
"SNO": 390 },
\"Oreo\"", "SNO": 391 },
"SNO": 392 },
\"Oreo\"", "SNO": 393 },
"SNO": 394 },
\"Oreo\"", "SNO": 395 },
"SNO": 396 },
\"Pie\"", "SNO": 397 },
\"Oreo\"", "SNO": 398 },
"Android 8.0 \"Oreo\"", "SNO": 399 },
\"Oreo\"", "SNO": 400 },
"SNO": 401 },


"SNO": 402 },
},
},
},
"Android 8.0 \"Oreo\"", "SNO": 412 },
"Android 8.0 \"Oreo\"", "SNO": 413 },
"Android 8.0 \"Oreo\"", "SNO": 414 },
},
"SNO": 417 },
418 },
"SNO": 419 },
"SNO": 420 },


"SNO": 421 },
"SNO": 422 },
"SNO": 423 },
},
"SNO": 425 },
"SNO": 426 },
"SNO": 427 },
"SNO": 428 },
"SNO": 429 },
"SNO": 430 },
"SNO": 431 },
"SNO": 432 },
"SNO": 433 },
"SNO": 435 },




"SNO": 460 },
Bean\"", "SNO": 464 },
Bean\"", "SNO": 466 },
Bean\"", "SNO": 468 },
Bean\"", "SNO": 469 },
Bean\"", "SNO": 470 },
Bean\"", "SNO": 471 },
Bean\"", "SNO": 473 },
Bean\"", "SNO": 475 },
Bean\"", "SNO": 476 },
Bean\"", "SNO": 477 },


Bean\"", "SNO": 478 },
Bean\"", "SNO": 479 },
Bean\"", "SNO": 480 },
Bean\"", "SNO": 481 },
Bean\"", "SNO": 482 },
Bean\"", "SNO": 483 },
"SNO": 484 },
"SNO": 485 },
Bean\"", "SNO": 486 },
"SNO": 487 },
\"KitKat\"", "SNO": 488 },
"SNO": 489 },
Bean\"", "SNO": 490 },
Bean\"", "SNO": 491 },
"SNO": 492 },
Bean\"", "SNO": 493 },
"SNO": 494 },
"SNO": 495 },
"SNO": 496 },


"SNO": 497 },
"SNO": 498 },
"SNO": 499 },
"SNO": 500 },
"SNO": 501 },
"SNO": 502 },
"SNO": 503 },
"SNO": 504 },
"SNO": 505 },
\"Lollipop\"", "SNO": 506 },
"SNO": 507 },
"SNO": 508 },
"SNO": 509 },
\"Lollipop\"", "SNO": 510 },
\"Lollipop\"", "SNO": 511 },
\"Lollipop\"", "SNO": 512 },
\"Lollipop\"", "SNO": 513 },
"SNO": 514 },
"SNO": 515 },


\"Lollipop\"", "SNO": 516 },
\"Lollipop\"", "SNO": 517 },
\"Lollipop\"", "SNO": 518 },
\"Lollipop\"", "SNO": 519 },
\"Lollipop\"", "SNO": 521 },
\"Lollipop\"", "SNO": 522 },
\"Lollipop\"", "SNO": 523 },
\"Lollipop\"", "SNO": 524 },
\"Lollipop\"", "SNO": 525 },
\"Lollipop\"", "SNO": 526 },
\"Lollipop\"", "SNO": 527 },
"SNO": 531 },
\"Lollipop\"", "SNO": 533 },


\"Lollipop\"", "SNO": 537 },
\"Lollipop\"", "SNO": 538 },
"SNO": 546 },
},
"SNO": 549 },
"SNO": 550 },
},
"SNO": 552 },
"SNO": 553 },


"SNO": 554 },
"SNO": 555 },
"SNO": 556 },
"SNO": 558 },
"SNO": 559 },
"SNO": 560 },
"SNO": 561 },
},
},
},
},
Bean\"", "SNO": 568 },
Bean\"", "SNO": 569 },
"SNO": 570 },
Bean\"", "SNO": 571 },
"SNO": 572 },


"SNO": 573 },
Bean\"", "SNO": 574 },
"SNO": 575 },
"SNO": 576 },
"SNO": 577 },
"SNO": 578 },
"SNO": 579 },
"SNO": 580 },
\"Lollipop\"", "SNO": 581 },
\"Lollipop\"", "SNO": 582 },
\"Lollipop\"", "SNO": 583 },
\"Lollipop\"", "SNO": 584 },
\"Lollipop\"", "SNO": 587 },


"SNO": 593 },
"SNO": 594 },
"SNO": 595 },
"SNO": 596 },
"SNO": 597 },
"SNO": 598 },
"SNO": 599 },
"SNO": 600 },
"SNO": 601 },
"SNO": 602 },
"SNO": 603 },
"SNO": 604 },
"SNO": 605 },
"SNO": 606 },
"SNO": 607 },
"SNO": 608 },
"SNO": 609 },
"SNO": 610 },


"SNO": 611 },
"SNO": 612 },
"SNO": 613 },
"SNO": 614 },
"SNO": 615 },
"SNO": 616 },
"SNO": 617 },
"SNO": 618 },
"SNO": 619 },
"SNO": 620 },
"SNO": 621 },
\"Pie\"", "SNO": 622 },
"SNO": 623 },
},
},
},
},
},
},


},
},
},
},
},
},
},
},
},
},
},
"SNO": 641 },
"SNO": 642 },
"SNO": 643 },
"SNO": 644 },
Bean\"", "SNO": 647 },
Bean\"", "SNO": 648 },


Bean\"", "SNO": 649 },
Bean\"", "SNO": 650 },
"SNO": 652 },
\"KitKat\"", "SNO": 653 },
"SNO": 654 },
\"Lollipop\"", "SNO": 655 },
"SNO": 659 },
"SNO": 660 },
\"Nougat\"", "SNO": 661 },
\"Nougat\"", "SNO": 662 },
"SNO": 663 },
"SNO": 664 },
"Android 8.0 \"Oreo\"", "SNO": 665 },
"SNO": 666 },
"SNO": 667 },


"SNO": 668 },
"SNO": 669 },
"SNO": 670 },
"SNO": 671 },
\"Pie\"", "SNO": 672 },
\"Pie\"", "SNO": 673 },
"SNO": 674 },
},
"SNO": 676 },
677 },
},
"SNO": 679 },
},
"SNO": 681 },
},
683 },
684 },
"Android 10", "SNO": 685 },
},


},
},
Bean\"", "SNO": 689 },
Bean\"", "SNO": 690 },
Bean\"", "SNO": 691 },
\"KitKat\"", "SNO": 692 },
"SNO": 693 },
\"Lollipop\"", "SNO": 694 },
\"Lollipop\"", "SNO": 695 },
\"Lollipop\"", "SNO": 696 },
\"Lollipop\"", "SNO": 697 },
\"Lollipop\"", "SNO": 698 },
\"Lollipop\"", "SNO": 699 },
"Android 10", "SNO": 705 },


\"Cupcake\"", "SNO": 706 },
\"Eclair\"", "SNO": 707 },
\"Donut\"", "SNO": 708 },
\"Froyo\"", "SNO": 711 },
\"Froyo\"", "SNO": 713 },
Bean\"", "SNO": 721 },
Bean\"", "SNO": 722 },
Bean\"", "SNO": 723 },
Bean\"", "SNO": 724 },


\"KitKat\"", "SNO": 725 },
\"KitKat\"", "SNO": 726 },
"SNO": 727 },
\"KitKat\"", "SNO": 728 },
\"Lollipop\"", "SNO": 729 },
\"Lollipop\"", "SNO": 730 },
\"Lollipop\"", "SNO": 731 },
\"Lollipop\"", "SNO": 732 },
"SNO": 734 },
\"Nougat\"", "SNO": 735 },
"SNO": 736 },
"SNO": 737 },
\"Oreo\"", "SNO": 738 },
\"Oreo\"", "SNO": 739 },
\"Nougat\"", "SNO": 740 },
\"Oreo\"", "SNO": 741 },
\"Pie\"", "SNO": 742 },
\"Pie\"", "SNO": 743 },


744 },
},
},
"SNO": 747 },
Bean\"", "SNO": 750 },
Bean\"", "SNO": 751 },
"SNO": 752 },
"SNO": 753 },
"SNO": 754 },
\"Lollipop\"", "SNO": 755 },
\"Lollipop\"", "SNO": 756 },
\"Lollipop\"", "SNO": 757 },
\"Lollipop\"", "SNO": 758 },
\"Lollipop\"", "SNO": 759 },
\"Lollipop\"", "SNO": 761 },


\"Lollipop\"", "SNO": 763 },
\"Lollipop\"", "SNO": 764 },
\"Lollipop\"", "SNO": 766 },
"SNO": 775 },
"SNO": 777 },
"SNO": 778 },
"SNO": 779 },
"SNO": 780 },
"SNO": 781 },


"SNO": 782 },
"SNO": 783 },
"SNO": 784 },
"SNO": 785 },
"SNO": 786 },
"SNO": 787 },
"SNO": 788 },
"SNO": 789 },
"SNO": 790 },
"SNO": 791 },
"SNO": 792 },
"SNO": 793 },
"SNO": 794 },
"SNO": 795 },
"SNO": 796 },
},
\"Cupcake\"", "SNO": 798 },
"SNO": 799 },
\"Cupcake\"", "SNO": 800 },


\"Eclair\"", "SNO": 801 },
\"Eclair\"", "SNO": 802 },
"SNO": 803 },
\"Froyo\"", "SNO": 804 },
"SNO": 805 },
\"Froyo\"", "SNO": 806 },


\"Nougat\"", "SNO": 833 },
"SNO": 834 },
\"Nougat\"", "SNO": 835 },
\"Nougat\"", "SNO": 838 },


\"Oreo\"", "SNO": 839 },
\"Oreo\"", "SNO": 840 },
"Android 8.0 \"Oreo\"", "SNO": 841 },
\"Oreo\"", "SNO": 842 },
"Android 8.0 \"Oreo\"", "SNO": 843 },
\"Pie\"", "SNO": 844 },
"Android 9.0 \"Pie\"", "SNO": 845 },
\"Pie\"", "SNO": 846 },
"Android 9.0 \"Pie\"", "SNO": 847 },
"Android 9.0 \"Pie\"", "SNO": 848 },
"Android 9.0 \"Pie\"", "SNO": 849 },
"Android 9.0 \"Pie\"", "SNO": 850 },
"Android 9.0 \"Pie\"", "SNO": 851 },
"Android 10", "SNO": 852 },
"Android 10", "SNO": 853 },
"Android 10", "SNO": 854 },
855 },
"Android 9.0 \"Pie\"", "SNO": 856 },
"Android 9.0 \"Pie\"", "SNO": 857 },


"Android 10", "SNO": 858 },
859 },
"Android 10", "SNO": 860 },
"Android 10", "SNO": 861 },
"Android 10", "SNO": 862 },
"Android 10", "SNO": 863 },
"Android 10", "SNO": 864 },
"Android 10", "SNO": 865 },
"Android 10", "SNO": 866 },
"Android 10", "SNO": 867 },
"Android 10", "SNO": 868 },
"Android 10", "SNO": 869 },
870 },
871 },
"Android 10", "SNO": 872 },
"Android 10", "SNO": 873 },
"Android 10", "SNO": 874 },
"Android 11", "SNO": 875 },
876 },


"Android 10", "SNO": 877 },
878 },
879 },
\"Lollipop\"", "SNO": 880 },
"SNO": 881 },
Bean\"", "SNO": 889 },
Bean\"", "SNO": 890 },
Bean\"", "SNO": 891 },
"SNO": 892 },
"SNO": 893 },
"SNO": 894 },
"SNO": 895 },


"SNO": 896 },
"SNO": 897 },
"SNO": 898 },
"SNO": 899 },
"SNO": 900 },
\"Oreo\"", "SNO": 901 },
"SNO": 902 },
\"Oreo\"", "SNO": 903 },
"SNO": 904 },
"SNO": 905 },
\"Oreo\"", "SNO": 906 },
\"Oreo\"", "SNO": 907 },
"SNO": 908 },
"SNO": 909 },
\"Pie\"", "SNO": 910 },
"SNO": 911 },
"SNO": 912 },
"SNO": 913 },
"SNO": 914 },


"SNO": 915 },
"SNO": 916 },
"SNO": 917 },
"SNO": 918 },
"SNO": 919 },
},
},
},
},
924 },
},
},
},
},
},
},
931 },
Bean\"", "SNO": 932 },
Bean\"", "SNO": 933 },


934 },
"SNO": 935 },
Bean\"", "SNO": 936 },
\"Lollipop\"", "SNO": 937 },
\"Lollipop\"", "SNO": 938 },
939 },
\"Lollipop\"", "SNO": 940 },
\"Lollipop\"", "SNO": 941 },
\"Lollipop\"", "SNO": 942 },
\"Lollipop\"", "SNO": 943 },
"SNO": 945 },
"SNO": 948 },
"SNO": 951 },
"SNO": 952 },


"SNO": 953 },
"SNO": 954 },
},
"SNO": 956 },
"SNO": 957 },
"SNO": 958 },
"SNO": 959 },
},
"SNO": 961 },
"SNO": 962 },
"SNO": 963 },
"SNO": 964 },
},
},
967 },
},
969 },
"SNO": 970 },
\"Lollipop\"", "SNO": 971 },


\"Lollipop\"", "SNO": 972 },
"SNO": 975 },
"SNO": 976 },
"SNO": 977 },
"SNO": 978 },
"SNO": 979 },
"SNO": 980 },
},
},
},
},
},
},
},
988 },
Bean\"", "SNO": 990 },


991 },
Bean\"", "SNO": 992 },
Bean\"", "SNO": 993 },
Bean\"", "SNO": 994 },
Bean\"", "SNO": 995 },
Bean\"", "SNO": 996 },
Bean\"", "SNO": 997 },
},
"SNO": 999 },
"SNO": 1000 },
1001 },
"SNO": 1002 },
"SNO": 1003 },
\"Lollipop\"", "SNO": 1004 },
1005 },
"SNO": 1006 },
},
"SNO": 1008 },
"SNO": 1009 },


},
"SNO": 1011 },
"SNO": 1012 },
"SNO": 1013 },
"SNO": 1014 },
1015 },
},
},
},
},
"SNO": 1020 },
},
},
1023 },
},
1025 },
"SNO": 1026 },
},
},


},
},
},
},
},
},
},
"Android 11", "SNO": 1036 },
},
"SNO": 1038 },
"SNO": 1039 },
"SNO": 1040 },
"SNO": 1041 },
"SNO": 1042 },
"SNO": 1043 },
},
},
},
},


"SNO": 1048 },
"SNO": 1049 },
"SNO": 1050 },
"SNO": 1051 },
"SNO": 1052 },
"SNO": 1053 },
"SNO": 1054 },
"SNO": 1055 },
"SNO": 1056 },
"SNO": 1057 },
"SNO": 1058 },
"SNO": 1059 },
"SNO": 1060 },
"SNO": 1061 },
"SNO": 1062 },
"SNO": 1063 },
"SNO": 1064 },
"SNO": 1065 },
},


},
},
},
},
},
1072 },
1073 },
},
},
},
},
},
},
},
},
},
1083 },
},
},


"Android 10", "SNO": 1086 },
},
},
},
Bean\"", "SNO": 1090 },
Bean\"", "SNO": 1091 },
Bean\"", "SNO": 1092 },
Bean\"", "SNO": 1093 },
"SNO": 1094 },
"SNO": 1095 },
"SNO": 1096 },
"SNO": 1097 },
\"Lollipop\"", "SNO": 1098 },
"SNO": 1099 },
\"Lollipop\"", "SNO": 1100 },
\"Lollipop\"", "SNO": 1101 },
\"Lollipop\"", "SNO": 1102 },
\"Lollipop\"", "SNO": 1103 },
\"Lollipop\"", "SNO": 1104 },


\"Lollipop\"", "SNO": 1105 },
\"Lollipop\"", "SNO": 1106 },
"SNO": 1107 },
\"Nougat\"", "SNO": 1113 },
"SNO": 1114 },
"SNO": 1115 },
"SNO": 1116 },
"SNO": 1117 },
"SNO": 1118 },
"SNO": 1119 },
"SNO": 1120 },
"SNO": 1121 },
"SNO": 1122 },
"SNO": 1123 },


"SNO": 1124 },
"SNO": 1125 },
"SNO": 1126 },
"SNO": 1127 },
"SNO": 1128 },
"SNO": 1129 },
"SNO": 1130 },
"SNO": 1131 },
},
"SNO": 1133 },
"Android 10", "SNO": 1134 },
"Android 10", "SNO": 1135 },
"Android 10", "SNO": 1136 },
},
},
},
},
},
},


},
"Android 10", "SNO": 1144 },
},
},
1147 },
"Android 11", "SNO": 1148 },
}];
Vertical row rendering

The Syncfusion React Grid introduces the feature of vertical row rendering, allowing you to display row
elements in a vertical order. This is particularly useful for scenarios where a vertical presentation
enhances data visibility. This is achieved by setting the rowRenderingMode property to the value
Vertical.
The default row rendering mode is Horizontal.
The following sample demonstrates how to dynamically change the row rendering mode between
Vertical and Horizontal based on a DropDownList selection:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, } from
import { AggregateColumnsDirective, AggregateColumnDirective,
AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Aggregate, Page } from
function App() {
const editSettings = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog' };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel',
'Search'];
const validationRule = { required: true };
const orderidRules = { required: true, number: true };
const filterOptions = { type: 'Excel' };
const renderingMode = 'Vertical';
const dropDownData = [
{ text: 'Vertical', value: 'Vertical' },
{ text: 'Horizontal', value: 'Horizontal' },

];
let grid;
const created = () => {
content')[0];
}
const changeAlignment = (args) => {
grid.rowRenderingMode = args.value
}
const footerSum = (props) => {
return (<span>Total Models: {props.Count}</span>);
};
return (<div>
<div>
<label style={{ padding: "30px 17px 0 0" }}> Select row rendering mode
:</label>
<DropDownListComponent index={0} width={150} dataSource={dropDownData}
change={changeAlignment}></DropDownListComponent>
</div>
<div className="e-adaptive-demo e-bigger">
<GridComponent id="adaptivebrowser" dataSource={data} height='100%'
ref={g => grid = g} enableAdaptiveUI={true} rowRenderingMode={renderingMode}
editSettings={editSettings} created={created}>
<ColumnsDirective>
<ColumnDirective field='SNO' headerText='S NO' width='150'
isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
<ColumnDirective field='Model' headerText='Model Name'
width='200' editType='dropdownedit' validationRules={validationRule} />
<ColumnDirective field='Developer' headerText='Developer'
width='200' filter={menuFilter}
<ColumnDirective field='ReleaseDate' headerText='Released Date'
editType='datepickeredit' type='date' format='yMMM'
<ColumnDirective field='AndroidVersion' headerText='Android
Version' width='200' filter={checkboxFilter}
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Aggregate, Page]}
/>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Model' type='Count'
footerTemplate={footerSum}> </AggregateColumnDirective>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
</GridComponent>
</div>
</div>

<br></br>
<a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
</div>
</div></div>
)
}
export default App;
APP.TSX
react-dropdowns';
FilterSettingsModel, EditSettingsModel, ToolbarItems, RowRenderingDirection }
import { AggregateColumnsDirective, AggregateColumnDirective,
AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Aggregate, Page } from
function App() {
const editSettings: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Dialog' };
'Cancel', 'Search'];
const validationRule: Object = { required: true };
const orderidRules: Object = { required: true, number: true };
const filterOptions: FilterSettingsModel = { type: 'Excel' };
const renderingMode: string = 'Vertical';
const dropDownData: Object[] = [
];
const created = (): void => {
(grid as GridComponent).adaptiveDlgTarget =
document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
}
const changeAlignment = (args: ChangeEventArgs) => {
(grid as GridComponent).rowRenderingMode = (args.value as
RowRenderingDirection)
}
return (<span>Total Models: {props.Count}</span>);
};
return (<div>
<div>
<label style={{ padding: "30px 17px 0 0" }}> Select row rendering mode
:</label>

</div>
<div className="e-adaptive-demo e-bigger">
<GridComponent id="adaptivebrowser" dataSource={data} height='100%'
ref={g => grid = g} enableAdaptiveUI={true} rowRenderingMode={renderingMode}
editSettings={editSettings} created={created}>
<ColumnsDirective>
<ColumnDirective field='SNO' headerText='S NO' width='150'
isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
<ColumnDirective field='Model' headerText='Model Name'
width='200' editType='dropdownedit' validationRules={validationRule} />
<ColumnDirective field='Developer' headerText='Developer'
width='200' filter={menuFilter}
<ColumnDirective field='ReleaseDate' headerText='Released Date'
editType='datepickeredit' type='date' format='yMMM'
<ColumnDirective field='AndroidVersion' headerText='Android
Version' width='200' filter={checkboxFilter}
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Aggregate, Page]}
/>
<AggregateColumnDirective field='Model' type='Count'
footerTemplate={footerSum}> </AggregateColumnDirective>
</GridComponent>
</div>
</div>
<br></br>
<a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
</div>
</div></div>
)
}
export default App;
DATASOURCE.JSX
export let data = [


"Android 8.0 \"Oreo\"", "SNO": 12 },
"Android 8.0 \"Oreo\"", "SNO": 13 },
"Android 8.0 \"Oreo\"", "SNO": 18 },
"Android 9.0 \"Pie\"", "SNO": 20 },


"Android 9.0 \"Pie\"", "SNO": 24 },
"Android 9.0 \"Pie\"", "SNO": 25 },
"Android 9.0 \"Pie\"", "SNO": 26 },
"Android 10", "SNO": 27 },
"Android 10", "SNO": 28 },
"Android 9.0 \"Pie\"", "SNO": 29 },
"Android 9.0 \"Pie\"", "SNO": 30 },
"Android 9.0 \"Pie\"", "SNO": 31 },
"Android 10", "SNO": 32 },
"Android 10", "SNO": 33 },
"Android 9.0 \"Pie\"", "SNO": 34 },
"Android 10", "SNO": 36 },
"Android 11", "SNO": 37 },
"Android 11", "SNO": 38 },
"Android 10", "SNO": 39 },
"Android 10", "SNO": 40 },


"Android 9.0 \"Pie\"", "SNO": 41 },
"Android 10", "SNO": 44 },
"Android 9.0 \"Pie\"", "SNO": 45 },
"Android 9.0 \"Pie\"", "SNO": 46 },
"Android 9.0 \"Pie\"", "SNO": 47 },
"Android 9.0 \"Pie\"", "SNO": 49 },
"Android 9.0 \"Pie\"", "SNO": 50 },
"Android 10", "SNO": 56 },
"Android 11", "SNO": 57 },
"Android 9.0 \"Pie\"", "SNO": 58 },


"Android 10", "SNO": 60 },
"Android 11", "SNO": 61 },
"Android 10", "SNO": 62 },
"Android 11", "SNO": 63 },
"Android 8.0 \"Oreo\"", "SNO": 72 },


"Android 8.0 \"Oreo\"", "SNO": 87 },
"Android 9.0 \"Pie\"", "SNO": 88 },
"Android 9.0 \"Pie\"", "SNO": 89 },
"Android 10", "SNO": 90 },
"Android 10", "SNO": 93 },
"Android 10", "SNO": 95 },


\"Pie\"", "SNO": 100 },
101 },
\"Pie\"", "SNO": 102 },
103 },
\"Pie\"", "SNO": 104 },
"Android 10", "SNO": 105 },
"Android 9.0 \"Pie\"", "SNO": 106 },
\"Nougat\"", "SNO": 107 },
\"Nougat\"", "SNO": 108 },
\"Oreo\"", "SNO": 109 },
\"Pie\"", "SNO": 110 },
111 },
\"Nougat\"", "SNO": 116 },


"Android 8.0 \"Oreo\"", "SNO": 119 },
"Android 8.0 \"Oreo\"", "SNO": 120 },
"Android 8.0 \"Oreo\"", "SNO": 122 },
"Android 8.0 \"Oreo\"", "SNO": 123 },
"Android 8.0 \"Oreo\"", "SNO": 124 },
\"Pie\"", "SNO": 125 },
Bean\"", "SNO": 127 },
Bean\"", "SNO": 129 },
\"KitKat\"", "SNO": 131 },
\"Lollipop\"", "SNO": 133 },


},
},
},
},
},
\"Nougat\"", "SNO": 144 },
"SNO": 146 },
\"Nougat\"", "SNO": 148 },
\"Nougat\"", "SNO": 149 },
\"Nougat\"", "SNO": 150 },
\"Nougat\"", "SNO": 151 },
"Android 8.0 \"Oreo\"", "SNO": 152 },
\"Oreo\"", "SNO": 153 },
"Android 8.0 \"Oreo\"", "SNO": 154 },


"Android 8.0 \"Oreo\"", "SNO": 155 },
"Android 9.0 \"Pie\"", "SNO": 156 },
\"Pie\"", "SNO": 157 },
\"Pie\"", "SNO": 158 },
"Android 9.0 \"Pie\"", "SNO": 159 },
\"Pie\"", "SNO": 160 },
"Android 9.0 \"Pie\"", "SNO": 161 },
"Android 9.0 \"Pie\"", "SNO": 162 },
"Android 10", "SNO": 163 },
"Android 10", "SNO": 164 },
165 },
"Android 10", "SNO": 166 },
"Android 10", "SNO": 167 },
"Android 10", "SNO": 168 },
"Android 10", "SNO": 169 },
"Android 10", "SNO": 170 },
"Android 10", "SNO": 171 },
172 },
173 },


},
175 },
176 },
Bean\"", "SNO": 177 },
"SNO": 178 },
"SNO": 179 },
\"Lollipop\"", "SNO": 180 },
"SNO": 181 },
182 },
\"Lollipop\"", "SNO": 183 },
\"Lollipop\"", "SNO": 184 },
\"Lollipop\"", "SNO": 185 },
\"Lollipop\"", "SNO": 186 },
\"Lollipop\"", "SNO": 187 },
"SNO": 189 },


"SNO": 193 },
"SNO": 194 },
"SNO": 195 },
},
"SNO": 197 },
"SNO": 198 },
"SNO": 199 },
"SNO": 200 },
"SNO": 201 },
"SNO": 202 },
"SNO": 203 },
"SNO": 204 },
\"Pie\"", "SNO": 205 },
"SNO": 206 },
"SNO": 207 },
"SNO": 208 },
"SNO": 209 },
"SNO": 210 },
"SNO": 211 },


"SNO": 212 },
},
},
},
},
},
},
},
},
},
},
},
},
Bean\"", "SNO": 227 },
Bean\"", "SNO": 228 },
Bean\"", "SNO": 229 },
"SNO": 230 },


"SNO": 231 },
\"Lollipop\"", "SNO": 232 },
\"Lollipop\"", "SNO": 233 },
\"Lollipop\"", "SNO": 234 },
\"Lollipop\"", "SNO": 235 },
"SNO": 242 },
"SNO": 243 },
\"Nougat\"", "SNO": 244 },
"SNO": 245 },
"SNO": 246 },
"SNO": 247 },
\"Oreo\"", "SNO": 248 },
\"Oreo\"", "SNO": 249 },


"SNO": 250 },
"SNO": 251 },
\"Oreo\"", "SNO": 252 },
\"Oreo\"", "SNO": 253 },
"SNO": 254 },
"Android 8.0 \"Oreo\"", "SNO": 255 },
"SNO": 256 },
"SNO": 257 },
\"Pie\"", "SNO": 258 },
\"Pie\"", "SNO": 259 },
"SNO": 260 },
"SNO": 261 },
"SNO": 262 },
"Android 9.0 \"Pie\"", "SNO": 263 },
"SNO": 264 },
"Android 10", "SNO": 265 },
\"Pie\"", "SNO": 266 },
},
"Android 10", "SNO": 268 },


},
270 },
"Android 10", "SNO": 271 },
},
273 },
},
},
},
"Android 10", "SNO": 277 },
},
},
},
},
},
"SNO": 283 },
"SNO": 284 },
"SNO": 285 },
"SNO": 286 },


"SNO": 289 },
"SNO": 291 },


Bean\"", "SNO": 310 },
Bean\"", "SNO": 312 },
Bean\"", "SNO": 313 },
Bean\"", "SNO": 314 },
Bean\"", "SNO": 315 },
Bean\"", "SNO": 316 },
Bean\"", "SNO": 317 },
Bean\"", "SNO": 318 },
"SNO": 319 },
\"Lollipop\"", "SNO": 320 },
"SNO": 321 },
\"Lollipop\"", "SNO": 322 },
"SNO": 323 },
\"Lollipop\"", "SNO": 324 },
"SNO": 325 },


\"Lollipop\"", "SNO": 326 },
"SNO": 327 },
\"Lollipop\"", "SNO": 328 },
\"Lollipop\"", "SNO": 329 },
\"Lollipop\"", "SNO": 330 },
\"Lollipop\"", "SNO": 331 },
\"Lollipop\"", "SNO": 332 },
\"Lollipop\"", "SNO": 333 },
\"Lollipop\"", "SNO": 334 },
335 },
\"Lollipop\"", "SNO": 336 },
\"Lollipop\"", "SNO": 337 },
\"Lollipop\"", "SNO": 338 },
"SNO": 342 },
"SNO": 344 },


"SNO": 345 },
"SNO": 346 },
"SNO": 347 },
"SNO": 348 },
"SNO": 349 },
"SNO": 350 },
"SNO": 351 },
"SNO": 352 },
"SNO": 353 },
"SNO": 354 },
"SNO": 355 },
"SNO": 356 },
"SNO": 357 },
"SNO": 358 },
"SNO": 359 },
"SNO": 360 },
"SNO": 361 },
},
},


},
},
},
},
},
},
Bean\"", "SNO": 372 },
Bean\"", "SNO": 373 },
Bean\"", "SNO": 374 },
Bean\"", "SNO": 375 },
Bean\"", "SNO": 377 },
Bean\"", "SNO": 378 },
Bean\"", "SNO": 379 },
"SNO": 380 },
\"KitKat\"", "SNO": 381 },
\"KitKat\"", "SNO": 382 },


"SNO": 383 },
"SNO": 384 },
Bean\"", "SNO": 385 },
\"Lollipop\"", "SNO": 386 },
"SNO": 388 },
"SNO": 390 },
\"Oreo\"", "SNO": 391 },
"SNO": 392 },
\"Oreo\"", "SNO": 393 },
"SNO": 394 },
\"Oreo\"", "SNO": 395 },
"SNO": 396 },
\"Pie\"", "SNO": 397 },
\"Oreo\"", "SNO": 398 },
"Android 8.0 \"Oreo\"", "SNO": 399 },
\"Oreo\"", "SNO": 400 },
"SNO": 401 },


"SNO": 402 },
},
},
},
"Android 8.0 \"Oreo\"", "SNO": 412 },
"Android 8.0 \"Oreo\"", "SNO": 413 },
"Android 8.0 \"Oreo\"", "SNO": 414 },
},
"SNO": 417 },
418 },
"SNO": 419 },
"SNO": 420 },


"SNO": 421 },
"SNO": 422 },
"SNO": 423 },
},
"SNO": 425 },
"SNO": 426 },
"SNO": 427 },
"SNO": 428 },
"SNO": 429 },
"SNO": 430 },
"SNO": 431 },
"SNO": 432 },
"SNO": 433 },
"SNO": 435 },




"SNO": 460 },
Bean\"", "SNO": 464 },
Bean\"", "SNO": 466 },
Bean\"", "SNO": 468 },
Bean\"", "SNO": 469 },
Bean\"", "SNO": 470 },
Bean\"", "SNO": 471 },
Bean\"", "SNO": 473 },
Bean\"", "SNO": 475 },
Bean\"", "SNO": 476 },
Bean\"", "SNO": 477 },


Bean\"", "SNO": 478 },
Bean\"", "SNO": 479 },
Bean\"", "SNO": 480 },
Bean\"", "SNO": 481 },
Bean\"", "SNO": 482 },
Bean\"", "SNO": 483 },
"SNO": 484 },
"SNO": 485 },
Bean\"", "SNO": 486 },
"SNO": 487 },
\"KitKat\"", "SNO": 488 },
"SNO": 489 },
Bean\"", "SNO": 490 },
Bean\"", "SNO": 491 },
"SNO": 492 },
Bean\"", "SNO": 493 },
"SNO": 494 },
"SNO": 495 },
"SNO": 496 },


"SNO": 497 },
"SNO": 498 },
"SNO": 499 },
"SNO": 500 },
"SNO": 501 },
"SNO": 502 },
"SNO": 503 },
"SNO": 504 },
"SNO": 505 },
\"Lollipop\"", "SNO": 506 },
"SNO": 507 },
"SNO": 508 },
"SNO": 509 },
\"Lollipop\"", "SNO": 510 },
\"Lollipop\"", "SNO": 511 },
\"Lollipop\"", "SNO": 512 },
\"Lollipop\"", "SNO": 513 },
"SNO": 514 },
"SNO": 515 },


\"Lollipop\"", "SNO": 516 },
\"Lollipop\"", "SNO": 517 },
\"Lollipop\"", "SNO": 518 },
\"Lollipop\"", "SNO": 519 },
\"Lollipop\"", "SNO": 521 },
\"Lollipop\"", "SNO": 522 },
\"Lollipop\"", "SNO": 523 },
\"Lollipop\"", "SNO": 524 },
\"Lollipop\"", "SNO": 525 },
\"Lollipop\"", "SNO": 526 },
\"Lollipop\"", "SNO": 527 },
"SNO": 531 },
\"Lollipop\"", "SNO": 533 },


\"Lollipop\"", "SNO": 537 },
\"Lollipop\"", "SNO": 538 },
"SNO": 546 },
},
"SNO": 549 },
"SNO": 550 },
},
"SNO": 552 },
"SNO": 553 },


"SNO": 554 },
"SNO": 555 },
"SNO": 556 },
"SNO": 558 },
"SNO": 559 },
"SNO": 560 },
"SNO": 561 },
},
},
},
},
Bean\"", "SNO": 568 },
Bean\"", "SNO": 569 },
"SNO": 570 },
Bean\"", "SNO": 571 },
"SNO": 572 },


"SNO": 573 },
Bean\"", "SNO": 574 },
"SNO": 575 },
"SNO": 576 },
"SNO": 577 },
"SNO": 578 },
"SNO": 579 },
"SNO": 580 },
\"Lollipop\"", "SNO": 581 },
\"Lollipop\"", "SNO": 582 },
\"Lollipop\"", "SNO": 583 },
\"Lollipop\"", "SNO": 584 },
\"Lollipop\"", "SNO": 587 },


"SNO": 593 },
"SNO": 594 },
"SNO": 595 },
"SNO": 596 },
"SNO": 597 },
"SNO": 598 },
"SNO": 599 },
"SNO": 600 },
"SNO": 601 },
"SNO": 602 },
"SNO": 603 },
"SNO": 604 },
"SNO": 605 },
"SNO": 606 },
"SNO": 607 },
"SNO": 608 },
"SNO": 609 },
"SNO": 610 },


"SNO": 611 },
"SNO": 612 },
"SNO": 613 },
"SNO": 614 },
"SNO": 615 },
"SNO": 616 },
"SNO": 617 },
"SNO": 618 },
"SNO": 619 },
"SNO": 620 },
"SNO": 621 },
\"Pie\"", "SNO": 622 },
"SNO": 623 },
},
},
},
},
},
},


},
},
},
},
},
},
},
},
},
},
},
"SNO": 641 },
"SNO": 642 },
"SNO": 643 },
"SNO": 644 },
Bean\"", "SNO": 647 },
Bean\"", "SNO": 648 },


Bean\"", "SNO": 649 },
Bean\"", "SNO": 650 },
"SNO": 652 },
\"KitKat\"", "SNO": 653 },
"SNO": 654 },
\"Lollipop\"", "SNO": 655 },
"SNO": 659 },
"SNO": 660 },
\"Nougat\"", "SNO": 661 },
\"Nougat\"", "SNO": 662 },
"SNO": 663 },
"SNO": 664 },
"Android 8.0 \"Oreo\"", "SNO": 665 },
"SNO": 666 },
"SNO": 667 },


"SNO": 668 },
"SNO": 669 },
"SNO": 670 },
"SNO": 671 },
\"Pie\"", "SNO": 672 },
\"Pie\"", "SNO": 673 },
"SNO": 674 },
},
"SNO": 676 },
677 },
},
"SNO": 679 },
},
"SNO": 681 },
},
683 },
684 },
"Android 10", "SNO": 685 },
},


},
},
Bean\"", "SNO": 689 },
Bean\"", "SNO": 690 },
Bean\"", "SNO": 691 },
\"KitKat\"", "SNO": 692 },
"SNO": 693 },
\"Lollipop\"", "SNO": 694 },
\"Lollipop\"", "SNO": 695 },
\"Lollipop\"", "SNO": 696 },
\"Lollipop\"", "SNO": 697 },
\"Lollipop\"", "SNO": 698 },
\"Lollipop\"", "SNO": 699 },
"Android 10", "SNO": 705 },


\"Cupcake\"", "SNO": 706 },
\"Eclair\"", "SNO": 707 },
\"Donut\"", "SNO": 708 },
\"Froyo\"", "SNO": 711 },
\"Froyo\"", "SNO": 713 },
Bean\"", "SNO": 721 },
Bean\"", "SNO": 722 },
Bean\"", "SNO": 723 },
Bean\"", "SNO": 724 },


\"KitKat\"", "SNO": 725 },
\"KitKat\"", "SNO": 726 },
"SNO": 727 },
\"KitKat\"", "SNO": 728 },
\"Lollipop\"", "SNO": 729 },
\"Lollipop\"", "SNO": 730 },
\"Lollipop\"", "SNO": 731 },
\"Lollipop\"", "SNO": 732 },
"SNO": 734 },
\"Nougat\"", "SNO": 735 },
"SNO": 736 },
"SNO": 737 },
\"Oreo\"", "SNO": 738 },
\"Oreo\"", "SNO": 739 },
\"Nougat\"", "SNO": 740 },
\"Oreo\"", "SNO": 741 },
\"Pie\"", "SNO": 742 },
\"Pie\"", "SNO": 743 },


744 },
},
},
"SNO": 747 },
Bean\"", "SNO": 750 },
Bean\"", "SNO": 751 },
"SNO": 752 },
"SNO": 753 },
"SNO": 754 },
\"Lollipop\"", "SNO": 755 },
\"Lollipop\"", "SNO": 756 },
\"Lollipop\"", "SNO": 757 },
\"Lollipop\"", "SNO": 758 },
\"Lollipop\"", "SNO": 759 },
\"Lollipop\"", "SNO": 761 },


\"Lollipop\"", "SNO": 763 },
\"Lollipop\"", "SNO": 764 },
\"Lollipop\"", "SNO": 766 },
"SNO": 775 },
"SNO": 777 },
"SNO": 778 },
"SNO": 779 },
"SNO": 780 },
"SNO": 781 },


"SNO": 782 },
"SNO": 783 },
"SNO": 784 },
"SNO": 785 },
"SNO": 786 },
"SNO": 787 },
"SNO": 788 },
"SNO": 789 },
"SNO": 790 },
"SNO": 791 },
"SNO": 792 },
"SNO": 793 },
"SNO": 794 },
"SNO": 795 },
"SNO": 796 },
},
\"Cupcake\"", "SNO": 798 },
"SNO": 799 },
\"Cupcake\"", "SNO": 800 },


\"Eclair\"", "SNO": 801 },
\"Eclair\"", "SNO": 802 },
"SNO": 803 },
\"Froyo\"", "SNO": 804 },
"SNO": 805 },
\"Froyo\"", "SNO": 806 },


\"Nougat\"", "SNO": 833 },
"SNO": 834 },
\"Nougat\"", "SNO": 835 },
\"Nougat\"", "SNO": 838 },


\"Oreo\"", "SNO": 839 },
\"Oreo\"", "SNO": 840 },
"Android 8.0 \"Oreo\"", "SNO": 841 },
\"Oreo\"", "SNO": 842 },
"Android 8.0 \"Oreo\"", "SNO": 843 },
\"Pie\"", "SNO": 844 },
"Android 9.0 \"Pie\"", "SNO": 845 },
\"Pie\"", "SNO": 846 },
"Android 9.0 \"Pie\"", "SNO": 847 },
"Android 9.0 \"Pie\"", "SNO": 848 },
"Android 9.0 \"Pie\"", "SNO": 849 },
"Android 9.0 \"Pie\"", "SNO": 850 },
"Android 9.0 \"Pie\"", "SNO": 851 },
"Android 10", "SNO": 852 },
"Android 10", "SNO": 853 },
"Android 10", "SNO": 854 },
855 },
"Android 9.0 \"Pie\"", "SNO": 856 },
"Android 9.0 \"Pie\"", "SNO": 857 },


"Android 10", "SNO": 858 },
859 },
"Android 10", "SNO": 860 },
"Android 10", "SNO": 861 },
"Android 10", "SNO": 862 },
"Android 10", "SNO": 863 },
"Android 10", "SNO": 864 },
"Android 10", "SNO": 865 },
"Android 10", "SNO": 866 },
"Android 10", "SNO": 867 },
"Android 10", "SNO": 868 },
"Android 10", "SNO": 869 },
870 },
871 },
"Android 10", "SNO": 872 },
"Android 10", "SNO": 873 },
"Android 10", "SNO": 874 },
"Android 11", "SNO": 875 },
876 },


"Android 10", "SNO": 877 },
878 },
879 },
\"Lollipop\"", "SNO": 880 },
"SNO": 881 },
Bean\"", "SNO": 889 },
Bean\"", "SNO": 890 },
Bean\"", "SNO": 891 },
"SNO": 892 },
"SNO": 893 },
"SNO": 894 },
"SNO": 895 },


"SNO": 896 },
"SNO": 897 },
"SNO": 898 },
"SNO": 899 },
"SNO": 900 },
\"Oreo\"", "SNO": 901 },
"SNO": 902 },
\"Oreo\"", "SNO": 903 },
"SNO": 904 },
"SNO": 905 },
\"Oreo\"", "SNO": 906 },
\"Oreo\"", "SNO": 907 },
"SNO": 908 },
"SNO": 909 },
\"Pie\"", "SNO": 910 },
"SNO": 911 },
"SNO": 912 },
"SNO": 913 },
"SNO": 914 },


"SNO": 915 },
"SNO": 916 },
"SNO": 917 },
"SNO": 918 },
"SNO": 919 },
},
},
},
},
924 },
},
},
},
},
},
},
931 },
Bean\"", "SNO": 932 },
Bean\"", "SNO": 933 },


934 },
"SNO": 935 },
Bean\"", "SNO": 936 },
\"Lollipop\"", "SNO": 937 },
\"Lollipop\"", "SNO": 938 },
939 },
\"Lollipop\"", "SNO": 940 },
\"Lollipop\"", "SNO": 941 },
\"Lollipop\"", "SNO": 942 },
\"Lollipop\"", "SNO": 943 },
"SNO": 945 },
"SNO": 948 },
"SNO": 951 },
"SNO": 952 },


"SNO": 953 },
"SNO": 954 },
},
"SNO": 956 },
"SNO": 957 },
"SNO": 958 },
"SNO": 959 },
},
"SNO": 961 },
"SNO": 962 },
"SNO": 963 },
"SNO": 964 },
},
},
967 },
},
969 },
"SNO": 970 },
\"Lollipop\"", "SNO": 971 },


\"Lollipop\"", "SNO": 972 },
"SNO": 975 },
"SNO": 976 },
"SNO": 977 },
"SNO": 978 },
"SNO": 979 },
"SNO": 980 },
},
},
},
},
},
},
},
988 },
Bean\"", "SNO": 990 },


991 },
Bean\"", "SNO": 992 },
Bean\"", "SNO": 993 },
Bean\"", "SNO": 994 },
Bean\"", "SNO": 995 },
Bean\"", "SNO": 996 },
Bean\"", "SNO": 997 },
},
"SNO": 999 },
"SNO": 1000 },
1001 },
"SNO": 1002 },
"SNO": 1003 },
\"Lollipop\"", "SNO": 1004 },
1005 },
"SNO": 1006 },
},
"SNO": 1008 },
"SNO": 1009 },


},
"SNO": 1011 },
"SNO": 1012 },
"SNO": 1013 },
"SNO": 1014 },
1015 },
},
},
},
},
"SNO": 1020 },
},
},
1023 },
},
1025 },
"SNO": 1026 },
},
},


},
},
},
},
},
},
},
"Android 11", "SNO": 1036 },
},
"SNO": 1038 },
"SNO": 1039 },
"SNO": 1040 },
"SNO": 1041 },
"SNO": 1042 },
"SNO": 1043 },
},
},
},
},


"SNO": 1048 },
"SNO": 1049 },
"SNO": 1050 },
"SNO": 1051 },
"SNO": 1052 },
"SNO": 1053 },
"SNO": 1054 },
"SNO": 1055 },
"SNO": 1056 },
"SNO": 1057 },
"SNO": 1058 },
"SNO": 1059 },
"SNO": 1060 },
"SNO": 1061 },
"SNO": 1062 },
"SNO": 1063 },
"SNO": 1064 },
"SNO": 1065 },
},


},
},
},
},
},
1072 },
1073 },
},
},
},
},
},
},
},
},
},
1083 },
},
},


"Android 10", "SNO": 1086 },
},
},
},
Bean\"", "SNO": 1090 },
Bean\"", "SNO": 1091 },
Bean\"", "SNO": 1092 },
Bean\"", "SNO": 1093 },
"SNO": 1094 },
"SNO": 1095 },
"SNO": 1096 },
"SNO": 1097 },
\"Lollipop\"", "SNO": 1098 },
"SNO": 1099 },
\"Lollipop\"", "SNO": 1100 },
\"Lollipop\"", "SNO": 1101 },
\"Lollipop\"", "SNO": 1102 },
\"Lollipop\"", "SNO": 1103 },
\"Lollipop\"", "SNO": 1104 },


\"Lollipop\"", "SNO": 1105 },
\"Lollipop\"", "SNO": 1106 },
"SNO": 1107 },
\"Nougat\"", "SNO": 1113 },
"SNO": 1114 },
"SNO": 1115 },
"SNO": 1116 },
"SNO": 1117 },
"SNO": 1118 },
"SNO": 1119 },
"SNO": 1120 },
"SNO": 1121 },
"SNO": 1122 },
"SNO": 1123 },


"SNO": 1124 },
"SNO": 1125 },
"SNO": 1126 },
"SNO": 1127 },
"SNO": 1128 },
"SNO": 1129 },
"SNO": 1130 },
"SNO": 1131 },
},
"SNO": 1133 },
"Android 10", "SNO": 1134 },
"Android 10", "SNO": 1135 },
"Android 10", "SNO": 1136 },
},
},
},
},
},
},


},
"Android 10", "SNO": 1144 },
},
},
1147 },
"Android 11", "SNO": 1148 },
}
];
DATASOURCE.TSX


"Android 8.0 \"Oreo\"", "SNO": 12 },
"Android 8.0 \"Oreo\"", "SNO": 13 },
"Android 8.0 \"Oreo\"", "SNO": 18 },
"Android 9.0 \"Pie\"", "SNO": 20 },
"Android 9.0 \"Pie\"", "SNO": 24 },
"Android 9.0 \"Pie\"", "SNO": 25 },
"Android 9.0 \"Pie\"", "SNO": 26 },
"Android 10", "SNO": 27 },
"Android 10", "SNO": 28 },
"Android 9.0 \"Pie\"", "SNO": 29 },


"Android 9.0 \"Pie\"", "SNO": 30 },
"Android 9.0 \"Pie\"", "SNO": 31 },
"Android 10", "SNO": 32 },
"Android 10", "SNO": 33 },
"Android 9.0 \"Pie\"", "SNO": 34 },
"Android 10", "SNO": 36 },
"Android 11", "SNO": 37 },
"Android 11", "SNO": 38 },
"Android 10", "SNO": 39 },
"Android 10", "SNO": 40 },
"Android 9.0 \"Pie\"", "SNO": 41 },
"Android 10", "SNO": 44 },
"Android 9.0 \"Pie\"", "SNO": 45 },
"Android 9.0 \"Pie\"", "SNO": 46 },
"Android 9.0 \"Pie\"", "SNO": 47 },


"Android 9.0 \"Pie\"", "SNO": 49 },
"Android 9.0 \"Pie\"", "SNO": 50 },
"Android 10", "SNO": 56 },
"Android 11", "SNO": 57 },
"Android 9.0 \"Pie\"", "SNO": 58 },
"Android 10", "SNO": 60 },
"Android 11", "SNO": 61 },
"Android 10", "SNO": 62 },
"Android 11", "SNO": 63 },


"Android 8.0 \"Oreo\"", "SNO": 72 },


"Android 8.0 \"Oreo\"", "SNO": 87 },
"Android 9.0 \"Pie\"", "SNO": 88 },
"Android 9.0 \"Pie\"", "SNO": 89 },
"Android 10", "SNO": 90 },
"Android 10", "SNO": 93 },
"Android 10", "SNO": 95 },
\"Pie\"", "SNO": 100 },
101 },
\"Pie\"", "SNO": 102 },
103 },
\"Pie\"", "SNO": 104 },
"Android 10", "SNO": 105 },


"Android 9.0 \"Pie\"", "SNO": 106 },
\"Nougat\"", "SNO": 107 },
\"Nougat\"", "SNO": 108 },
\"Oreo\"", "SNO": 109 },
\"Pie\"", "SNO": 110 },
111 },
\"Nougat\"", "SNO": 116 },
"Android 8.0 \"Oreo\"", "SNO": 119 },
"Android 8.0 \"Oreo\"", "SNO": 120 },
"Android 8.0 \"Oreo\"", "SNO": 122 },
"Android 8.0 \"Oreo\"", "SNO": 123 },
"Android 8.0 \"Oreo\"", "SNO": 124 },


\"Pie\"", "SNO": 125 },
Bean\"", "SNO": 127 },
Bean\"", "SNO": 129 },
\"KitKat\"", "SNO": 131 },
\"Lollipop\"", "SNO": 133 },
},
},
},
},
},


\"Nougat\"", "SNO": 144 },
"SNO": 146 },
\"Nougat\"", "SNO": 148 },
\"Nougat\"", "SNO": 149 },
\"Nougat\"", "SNO": 150 },
\"Nougat\"", "SNO": 151 },
"Android 8.0 \"Oreo\"", "SNO": 152 },
\"Oreo\"", "SNO": 153 },
"Android 8.0 \"Oreo\"", "SNO": 154 },
"Android 8.0 \"Oreo\"", "SNO": 155 },
"Android 9.0 \"Pie\"", "SNO": 156 },
\"Pie\"", "SNO": 157 },
\"Pie\"", "SNO": 158 },
"Android 9.0 \"Pie\"", "SNO": 159 },
\"Pie\"", "SNO": 160 },
"Android 9.0 \"Pie\"", "SNO": 161 },
"Android 9.0 \"Pie\"", "SNO": 162 },


"Android 10", "SNO": 163 },
"Android 10", "SNO": 164 },
165 },
"Android 10", "SNO": 166 },
"Android 10", "SNO": 167 },
"Android 10", "SNO": 168 },
"Android 10", "SNO": 169 },
"Android 10", "SNO": 170 },
"Android 10", "SNO": 171 },
172 },
173 },
},
175 },
176 },
Bean\"", "SNO": 177 },
"SNO": 178 },
"SNO": 179 },
\"Lollipop\"", "SNO": 180 },
"SNO": 181 },


182 },
\"Lollipop\"", "SNO": 183 },
\"Lollipop\"", "SNO": 184 },
\"Lollipop\"", "SNO": 185 },
\"Lollipop\"", "SNO": 186 },
\"Lollipop\"", "SNO": 187 },
"SNO": 189 },
"SNO": 193 },
"SNO": 194 },
"SNO": 195 },
},
"SNO": 197 },
"SNO": 198 },
"SNO": 199 },
"SNO": 200 },


"SNO": 201 },
"SNO": 202 },
"SNO": 203 },
"SNO": 204 },
\"Pie\"", "SNO": 205 },
"SNO": 206 },
"SNO": 207 },
"SNO": 208 },
"SNO": 209 },
"SNO": 210 },
"SNO": 211 },
"SNO": 212 },
},
},
},
},
},
},
},


},
},
},
},
},
Bean\"", "SNO": 227 },
Bean\"", "SNO": 228 },
Bean\"", "SNO": 229 },
"SNO": 230 },
"SNO": 231 },
\"Lollipop\"", "SNO": 232 },
\"Lollipop\"", "SNO": 233 },
\"Lollipop\"", "SNO": 234 },
\"Lollipop\"", "SNO": 235 },


"SNO": 242 },
"SNO": 243 },
\"Nougat\"", "SNO": 244 },
"SNO": 245 },
"SNO": 246 },
"SNO": 247 },
\"Oreo\"", "SNO": 248 },
\"Oreo\"", "SNO": 249 },
"SNO": 250 },
"SNO": 251 },
\"Oreo\"", "SNO": 252 },
\"Oreo\"", "SNO": 253 },
"SNO": 254 },
"Android 8.0 \"Oreo\"", "SNO": 255 },
"SNO": 256 },
"SNO": 257 },


\"Pie\"", "SNO": 258 },
\"Pie\"", "SNO": 259 },
"SNO": 260 },
"SNO": 261 },
"SNO": 262 },
"Android 9.0 \"Pie\"", "SNO": 263 },
"SNO": 264 },
"Android 10", "SNO": 265 },
\"Pie\"", "SNO": 266 },
},
"Android 10", "SNO": 268 },
},
270 },
"Android 10", "SNO": 271 },
},
273 },
},
},
},


"Android 10", "SNO": 277 },
},
},
},
},
},
"SNO": 283 },
"SNO": 284 },
"SNO": 285 },
"SNO": 286 },
"SNO": 289 },
"SNO": 291 },


Bean\"", "SNO": 310 },
Bean\"", "SNO": 312 },
Bean\"", "SNO": 313 },
Bean\"", "SNO": 314 },


Bean\"", "SNO": 315 },
Bean\"", "SNO": 316 },
Bean\"", "SNO": 317 },
Bean\"", "SNO": 318 },
"SNO": 319 },
\"Lollipop\"", "SNO": 320 },
"SNO": 321 },
\"Lollipop\"", "SNO": 322 },
"SNO": 323 },
\"Lollipop\"", "SNO": 324 },
"SNO": 325 },
\"Lollipop\"", "SNO": 326 },
"SNO": 327 },
\"Lollipop\"", "SNO": 328 },
\"Lollipop\"", "SNO": 329 },
\"Lollipop\"", "SNO": 330 },
\"Lollipop\"", "SNO": 331 },
\"Lollipop\"", "SNO": 332 },
\"Lollipop\"", "SNO": 333 },


\"Lollipop\"", "SNO": 334 },
335 },
\"Lollipop\"", "SNO": 336 },
\"Lollipop\"", "SNO": 337 },
\"Lollipop\"", "SNO": 338 },
"SNO": 342 },
"SNO": 344 },
"SNO": 345 },
"SNO": 346 },
"SNO": 347 },
"SNO": 348 },
"SNO": 349 },
"SNO": 350 },
"SNO": 351 },
"SNO": 352 },


"SNO": 353 },
"SNO": 354 },
"SNO": 355 },
"SNO": 356 },
"SNO": 357 },
"SNO": 358 },
"SNO": 359 },
"SNO": 360 },
"SNO": 361 },
},
},
},
},
},
},
},
},


Bean\"", "SNO": 372 },
Bean\"", "SNO": 373 },
Bean\"", "SNO": 374 },
Bean\"", "SNO": 375 },
Bean\"", "SNO": 377 },
Bean\"", "SNO": 378 },
Bean\"", "SNO": 379 },
"SNO": 380 },
\"KitKat\"", "SNO": 381 },
\"KitKat\"", "SNO": 382 },
"SNO": 383 },
"SNO": 384 },
Bean\"", "SNO": 385 },
\"Lollipop\"", "SNO": 386 },
"SNO": 388 },
"SNO": 390 },


\"Oreo\"", "SNO": 391 },
"SNO": 392 },
\"Oreo\"", "SNO": 393 },
"SNO": 394 },
\"Oreo\"", "SNO": 395 },
"SNO": 396 },
\"Pie\"", "SNO": 397 },
\"Oreo\"", "SNO": 398 },
"Android 8.0 \"Oreo\"", "SNO": 399 },
\"Oreo\"", "SNO": 400 },
"SNO": 401 },
"SNO": 402 },
},
},
},


"Android 8.0 \"Oreo\"", "SNO": 412 },
"Android 8.0 \"Oreo\"", "SNO": 413 },
"Android 8.0 \"Oreo\"", "SNO": 414 },
},
"SNO": 417 },
418 },
"SNO": 419 },
"SNO": 420 },
"SNO": 421 },
"SNO": 422 },
"SNO": 423 },
},
"SNO": 425 },
"SNO": 426 },
"SNO": 427 },
"SNO": 428 },


"SNO": 429 },
"SNO": 430 },
"SNO": 431 },
"SNO": 432 },
"SNO": 433 },
"SNO": 435 },


"SNO": 460 },
Bean\"", "SNO": 464 },
Bean\"", "SNO": 466 },


Bean\"", "SNO": 468 },
Bean\"", "SNO": 469 },
Bean\"", "SNO": 470 },
Bean\"", "SNO": 471 },
Bean\"", "SNO": 473 },
Bean\"", "SNO": 475 },
Bean\"", "SNO": 476 },
Bean\"", "SNO": 477 },
Bean\"", "SNO": 478 },
Bean\"", "SNO": 479 },
Bean\"", "SNO": 480 },
Bean\"", "SNO": 481 },
Bean\"", "SNO": 482 },
Bean\"", "SNO": 483 },
"SNO": 484 },
"SNO": 485 },


Bean\"", "SNO": 486 },
"SNO": 487 },
\"KitKat\"", "SNO": 488 },
"SNO": 489 },
Bean\"", "SNO": 490 },
Bean\"", "SNO": 491 },
"SNO": 492 },
Bean\"", "SNO": 493 },
"SNO": 494 },
"SNO": 495 },
"SNO": 496 },
"SNO": 497 },
"SNO": 498 },
"SNO": 499 },
"SNO": 500 },
"SNO": 501 },
"SNO": 502 },
"SNO": 503 },
"SNO": 504 },


"SNO": 505 },
\"Lollipop\"", "SNO": 506 },
"SNO": 507 },
"SNO": 508 },
"SNO": 509 },
\"Lollipop\"", "SNO": 510 },
\"Lollipop\"", "SNO": 511 },
\"Lollipop\"", "SNO": 512 },
\"Lollipop\"", "SNO": 513 },
"SNO": 514 },
"SNO": 515 },
\"Lollipop\"", "SNO": 516 },
\"Lollipop\"", "SNO": 517 },
\"Lollipop\"", "SNO": 518 },
\"Lollipop\"", "SNO": 519 },
\"Lollipop\"", "SNO": 521 },
\"Lollipop\"", "SNO": 522 },
\"Lollipop\"", "SNO": 523 },


\"Lollipop\"", "SNO": 524 },
\"Lollipop\"", "SNO": 525 },
\"Lollipop\"", "SNO": 526 },
\"Lollipop\"", "SNO": 527 },
"SNO": 531 },
\"Lollipop\"", "SNO": 533 },
\"Lollipop\"", "SNO": 537 },
\"Lollipop\"", "SNO": 538 },


"SNO": 546 },
},
"SNO": 549 },
"SNO": 550 },
},
"SNO": 552 },
"SNO": 553 },
"SNO": 554 },
"SNO": 555 },
"SNO": 556 },
"SNO": 558 },
"SNO": 559 },
"SNO": 560 },
"SNO": 561 },


},
},
},
},
Bean\"", "SNO": 568 },
Bean\"", "SNO": 569 },
"SNO": 570 },
Bean\"", "SNO": 571 },
"SNO": 572 },
"SNO": 573 },
Bean\"", "SNO": 574 },
"SNO": 575 },
"SNO": 576 },
"SNO": 577 },
"SNO": 578 },
"SNO": 579 },
"SNO": 580 },


\"Lollipop\"", "SNO": 581 },
\"Lollipop\"", "SNO": 582 },
\"Lollipop\"", "SNO": 583 },
\"Lollipop\"", "SNO": 584 },
\"Lollipop\"", "SNO": 587 },
"SNO": 593 },
"SNO": 594 },
"SNO": 595 },
"SNO": 596 },
"SNO": 597 },
"SNO": 598 },
"SNO": 599 },


"SNO": 600 },
"SNO": 601 },
"SNO": 602 },
"SNO": 603 },
"SNO": 604 },
"SNO": 605 },
"SNO": 606 },
"SNO": 607 },
"SNO": 608 },
"SNO": 609 },
"SNO": 610 },
"SNO": 611 },
"SNO": 612 },
"SNO": 613 },
"SNO": 614 },
"SNO": 615 },
"SNO": 616 },
"SNO": 617 },
"SNO": 618 },


"SNO": 619 },
"SNO": 620 },
"SNO": 621 },
\"Pie\"", "SNO": 622 },
"SNO": 623 },
},
},
},
},
},
},
},
},
},
},
},
},
},
},


},
},
},
"SNO": 641 },
"SNO": 642 },
"SNO": 643 },
"SNO": 644 },
Bean\"", "SNO": 647 },
Bean\"", "SNO": 648 },
Bean\"", "SNO": 649 },
Bean\"", "SNO": 650 },
"SNO": 652 },
\"KitKat\"", "SNO": 653 },
"SNO": 654 },
\"Lollipop\"", "SNO": 655 },


"SNO": 659 },
"SNO": 660 },
\"Nougat\"", "SNO": 661 },
\"Nougat\"", "SNO": 662 },
"SNO": 663 },
"SNO": 664 },
"Android 8.0 \"Oreo\"", "SNO": 665 },
"SNO": 666 },
"SNO": 667 },
"SNO": 668 },
"SNO": 669 },
"SNO": 670 },
"SNO": 671 },
\"Pie\"", "SNO": 672 },
\"Pie\"", "SNO": 673 },
"SNO": 674 },
},


"SNO": 676 },
677 },
},
"SNO": 679 },
},
"SNO": 681 },
},
683 },
684 },
"Android 10", "SNO": 685 },
},
},
},
Bean\"", "SNO": 689 },
Bean\"", "SNO": 690 },
Bean\"", "SNO": 691 },
\"KitKat\"", "SNO": 692 },
"SNO": 693 },
\"Lollipop\"", "SNO": 694 },


\"Lollipop\"", "SNO": 695 },
\"Lollipop\"", "SNO": 696 },
\"Lollipop\"", "SNO": 697 },
\"Lollipop\"", "SNO": 698 },
\"Lollipop\"", "SNO": 699 },
"Android 10", "SNO": 705 },
\"Cupcake\"", "SNO": 706 },
\"Eclair\"", "SNO": 707 },
\"Donut\"", "SNO": 708 },
\"Froyo\"", "SNO": 711 },
\"Froyo\"", "SNO": 713 },


Bean\"", "SNO": 721 },
Bean\"", "SNO": 722 },
Bean\"", "SNO": 723 },
Bean\"", "SNO": 724 },
\"KitKat\"", "SNO": 725 },
\"KitKat\"", "SNO": 726 },
"SNO": 727 },
\"KitKat\"", "SNO": 728 },
\"Lollipop\"", "SNO": 729 },
\"Lollipop\"", "SNO": 730 },
\"Lollipop\"", "SNO": 731 },
\"Lollipop\"", "SNO": 732 },


"SNO": 734 },
\"Nougat\"", "SNO": 735 },
"SNO": 736 },
"SNO": 737 },
\"Oreo\"", "SNO": 738 },
\"Oreo\"", "SNO": 739 },
\"Nougat\"", "SNO": 740 },
\"Oreo\"", "SNO": 741 },
\"Pie\"", "SNO": 742 },
\"Pie\"", "SNO": 743 },
744 },
},
},
"SNO": 747 },
Bean\"", "SNO": 750 },
Bean\"", "SNO": 751 },


"SNO": 752 },
"SNO": 753 },
"SNO": 754 },
\"Lollipop\"", "SNO": 755 },
\"Lollipop\"", "SNO": 756 },
\"Lollipop\"", "SNO": 757 },
\"Lollipop\"", "SNO": 758 },
\"Lollipop\"", "SNO": 759 },
\"Lollipop\"", "SNO": 761 },
\"Lollipop\"", "SNO": 763 },
\"Lollipop\"", "SNO": 764 },
\"Lollipop\"", "SNO": 766 },


"SNO": 775 },
"SNO": 777 },
"SNO": 778 },
"SNO": 779 },
"SNO": 780 },
"SNO": 781 },
"SNO": 782 },
"SNO": 783 },
"SNO": 784 },
"SNO": 785 },
"SNO": 786 },
"SNO": 787 },
"SNO": 788 },
"SNO": 789 },


"SNO": 790 },
"SNO": 791 },
"SNO": 792 },
"SNO": 793 },
"SNO": 794 },
"SNO": 795 },
"SNO": 796 },
},
\"Cupcake\"", "SNO": 798 },
"SNO": 799 },
\"Cupcake\"", "SNO": 800 },
\"Eclair\"", "SNO": 801 },
\"Eclair\"", "SNO": 802 },
"SNO": 803 },
\"Froyo\"", "SNO": 804 },
"SNO": 805 },
\"Froyo\"", "SNO": 806 },




\"Nougat\"", "SNO": 833 },
"SNO": 834 },
\"Nougat\"", "SNO": 835 },
\"Nougat\"", "SNO": 838 },
\"Oreo\"", "SNO": 839 },
\"Oreo\"", "SNO": 840 },
"Android 8.0 \"Oreo\"", "SNO": 841 },
\"Oreo\"", "SNO": 842 },
"Android 8.0 \"Oreo\"", "SNO": 843 },
\"Pie\"", "SNO": 844 },
"Android 9.0 \"Pie\"", "SNO": 845 },
\"Pie\"", "SNO": 846 },


"Android 9.0 \"Pie\"", "SNO": 847 },
"Android 9.0 \"Pie\"", "SNO": 848 },
"Android 9.0 \"Pie\"", "SNO": 849 },
"Android 9.0 \"Pie\"", "SNO": 850 },
"Android 9.0 \"Pie\"", "SNO": 851 },
"Android 10", "SNO": 852 },
"Android 10", "SNO": 853 },
"Android 10", "SNO": 854 },
855 },
"Android 9.0 \"Pie\"", "SNO": 856 },
"Android 9.0 \"Pie\"", "SNO": 857 },
"Android 10", "SNO": 858 },
859 },
"Android 10", "SNO": 860 },
"Android 10", "SNO": 861 },
"Android 10", "SNO": 862 },
"Android 10", "SNO": 863 },
"Android 10", "SNO": 864 },
"Android 10", "SNO": 865 },


"Android 10", "SNO": 866 },
"Android 10", "SNO": 867 },
"Android 10", "SNO": 868 },
"Android 10", "SNO": 869 },
870 },
871 },
"Android 10", "SNO": 872 },
"Android 10", "SNO": 873 },
"Android 10", "SNO": 874 },
"Android 11", "SNO": 875 },
876 },
"Android 10", "SNO": 877 },
878 },
879 },
\"Lollipop\"", "SNO": 880 },
"SNO": 881 },


Bean\"", "SNO": 889 },
Bean\"", "SNO": 890 },
Bean\"", "SNO": 891 },
"SNO": 892 },
"SNO": 893 },
"SNO": 894 },
"SNO": 895 },
"SNO": 896 },
"SNO": 897 },
"SNO": 898 },
"SNO": 899 },
"SNO": 900 },
\"Oreo\"", "SNO": 901 },
"SNO": 902 },
\"Oreo\"", "SNO": 903 },


"SNO": 904 },
"SNO": 905 },
\"Oreo\"", "SNO": 906 },
\"Oreo\"", "SNO": 907 },
"SNO": 908 },
"SNO": 909 },
\"Pie\"", "SNO": 910 },
"SNO": 911 },
"SNO": 912 },
"SNO": 913 },
"SNO": 914 },
"SNO": 915 },
"SNO": 916 },
"SNO": 917 },
"SNO": 918 },
"SNO": 919 },
},
},
},


},
924 },
},
},
},
},
},
},
931 },
Bean\"", "SNO": 932 },
Bean\"", "SNO": 933 },
934 },
"SNO": 935 },
Bean\"", "SNO": 936 },
\"Lollipop\"", "SNO": 937 },
\"Lollipop\"", "SNO": 938 },
939 },
\"Lollipop\"", "SNO": 940 },
\"Lollipop\"", "SNO": 941 },


\"Lollipop\"", "SNO": 942 },
\"Lollipop\"", "SNO": 943 },
"SNO": 945 },
"SNO": 948 },
"SNO": 951 },
"SNO": 952 },
"SNO": 953 },
"SNO": 954 },
},
"SNO": 956 },
"SNO": 957 },
"SNO": 958 },
"SNO": 959 },
},


"SNO": 961 },
"SNO": 962 },
"SNO": 963 },
"SNO": 964 },
},
},
967 },
},
969 },
"SNO": 970 },
\"Lollipop\"", "SNO": 971 },
\"Lollipop\"", "SNO": 972 },
"SNO": 975 },
"SNO": 976 },
"SNO": 977 },
"SNO": 978 },
"SNO": 979 },


"SNO": 980 },
},
},
},
},
},
},
},
988 },
Bean\"", "SNO": 990 },
991 },
Bean\"", "SNO": 992 },
Bean\"", "SNO": 993 },
Bean\"", "SNO": 994 },
Bean\"", "SNO": 995 },
Bean\"", "SNO": 996 },
Bean\"", "SNO": 997 },
},


"SNO": 999 },
"SNO": 1000 },
1001 },
"SNO": 1002 },
"SNO": 1003 },
\"Lollipop\"", "SNO": 1004 },
1005 },
"SNO": 1006 },
},
"SNO": 1008 },
"SNO": 1009 },
},
"SNO": 1011 },
"SNO": 1012 },
"SNO": 1013 },
"SNO": 1014 },
1015 },
},
},


},
},
"SNO": 1020 },
},
},
1023 },
},
1025 },
"SNO": 1026 },
},
},
},
},
},
},
},
},
},
"Android 11", "SNO": 1036 },


},
"SNO": 1038 },
"SNO": 1039 },
"SNO": 1040 },
"SNO": 1041 },
"SNO": 1042 },
"SNO": 1043 },
},
},
},
},
"SNO": 1048 },
"SNO": 1049 },
"SNO": 1050 },
"SNO": 1051 },
"SNO": 1052 },
"SNO": 1053 },
"SNO": 1054 },
"SNO": 1055 },


"SNO": 1056 },
"SNO": 1057 },
"SNO": 1058 },
"SNO": 1059 },
"SNO": 1060 },
"SNO": 1061 },
"SNO": 1062 },
"SNO": 1063 },
"SNO": 1064 },
"SNO": 1065 },
},
},
},
},
},
},
1072 },
1073 },
},


},
},
},
},
},
},
},
},
1083 },
},
},
"Android 10", "SNO": 1086 },
},
},
},
Bean\"", "SNO": 1090 },
Bean\"", "SNO": 1091 },
Bean\"", "SNO": 1092 },
Bean\"", "SNO": 1093 },


"SNO": 1094 },
"SNO": 1095 },
"SNO": 1096 },
"SNO": 1097 },
\"Lollipop\"", "SNO": 1098 },
"SNO": 1099 },
\"Lollipop\"", "SNO": 1100 },
\"Lollipop\"", "SNO": 1101 },
\"Lollipop\"", "SNO": 1102 },
\"Lollipop\"", "SNO": 1103 },
\"Lollipop\"", "SNO": 1104 },
\"Lollipop\"", "SNO": 1105 },
\"Lollipop\"", "SNO": 1106 },
"SNO": 1107 },


\"Nougat\"", "SNO": 1113 },
"SNO": 1114 },
"SNO": 1115 },
"SNO": 1116 },
"SNO": 1117 },
"SNO": 1118 },
"SNO": 1119 },
"SNO": 1120 },
"SNO": 1121 },
"SNO": 1122 },
"SNO": 1123 },
"SNO": 1124 },
"SNO": 1125 },
"SNO": 1126 },
"SNO": 1127 },
"SNO": 1128 },
"SNO": 1129 },
"SNO": 1130 },
"SNO": 1131 },


},
"SNO": 1133 },
"Android 10", "SNO": 1134 },
"Android 10", "SNO": 1135 },
"Android 10", "SNO": 1136 },
},
},
},
},
},
},
},
"Android 10", "SNO": 1144 },
},
},
1147 },
"Android 11", "SNO": 1148 },
}];
* enableAdaptiveUI property must be enabled for vertical row rendering.

Supported features by vertical row rendering

The following features are only supported in vertical row rendering:
• Paging, including Page size dropdown

• Sorting
• Filtering
• Selection
• Dialog Editing
• Aggregate
• Infinite scroll
• Toolbar - Options like Add, Filter, Sort, Edit, Delete, Search, and Toolbar template are available
when their respective features are enabled. The toolbar dynamically includes a three-dotted
icon, containing additional features like ColumnChooser, Print, PdfExport, ExcelExport, or
CsvExport, once these features are enabled. Please refer to the following snapshot.
A snapshot of the adaptive grid displaying enabled paging along with a pager dropdown.

Link to the VideoGrid Performance tips for React DataGrid Component
The Column Menu feature, which includes grouping, sorting, autofit, filter, and column chooser, is
exclusively supported for the Grid in Horizontal rowRenderingMode.
Performance tips for React DataGrid Component
This article is a comprehensive guide on improving the loading performance of the React DataGrid,
especially when dealing with large datasets along with large number of columns. It provides valuable
insights into the steps that need to be followed to bind a large data source without experiencing any
performance degradations. By offering detailed explanations and actionable tips, this resource aims to
empower readers with the knowledge and best practices necessary to optimize the performance of the
React DataGrid during data binding, ensuring a smooth and efficient user experience.
How to improve loading performance by binding large dataset
As you all know, a grid is made up of rows and columns. For instance, when you bind 10 rows and 10
columns, it means 100 elements will be rendered in the DOM (Document Object Model). So, it is
recommended to render only a limited number of rows and columns to guarantee the best loading
performance for the component.
Optimizing performance with paging
To boost the performance efficiency of your application, especially when dealing with large datasets, it
is advised to implement paging. Paging allows you to display grid data in segmented pages, facilitating
easier navigation through substantial datasets. This feature proves particularly beneficial in enhancing

the overall performance of your application. For more information on implementing paging, you can
refer to the documentation section dedicated to this feature.
Optimizing performance with row virtualization or infinite scrolling
To enhance your application's efficiency, especially when dealing with substantial datasets, it is
recommended to either using virtualization or infinite scrolling. Implementing these techniques can
significantly reduce the load on your application and elevate its overall performance.
1. Virtualization: The Virtual scrolling feature in the React Data Grid enables the efficient handling
and display of large volumes of data without compromising performance. This approach
optimizes the rendering process by loading only the visible rows within the Grid viewport, rather
than rendering the entire dataset simultaneously. For more information on implementing row
virtualization , you can refer to the documentation section dedicated to this feature.
2. Infinite scrolling: The Infinite Scrolling feature in the React Data Grid is a powerful tool for
seamlessly handling extensive data sets without compromising grid performance. It operates on
a "load-on-demand" concept, ensuring that data is fetched only when needed. In the default
infinite scrolling mode, a new block of data is loaded each time the scrollbar reaches the end of
the vertical scroller. For more information on implementing infinite scrolling , you can refer to
the documentation section dedicated to this feature.
Optimizing performance with column virtualization in large no of columns

Column virtualization feature in the React Data Grid that allows you to optimize the rendering of
columns by displaying only the columns that are currently within the viewport. It allows horizontal
scrolling to view additional columns. This feature is particularly useful when dealing with grids that have
a large number of columns, as it helps to improve the performance and reduce the initial loading time.
It is possible to enable both row and column virtualization. This feature allows for efficient handling of
large datasets by dynamically loading only the visible rows and columns, optimizing performance and
enhancing the overall responsiveness of the grid. For more information on implementing column
virtualization , you can refer to the documentation section dedicated to this feature.
How to overcome browser height limitation in virtual scrolling
Documentation link
Optimizing react component rendering by mitigating unnecessary re-renders during state
updates
In React, when employing useState to update the state of a component while executing actions in a
Grid, the default behavior is to trigger a re-render of the component. This behavior, while standard in
React, can pose challenges, particularly when essential Grid actions such as selection are affected by the
re-render.
To tackle this and maintain the integrity of Grid actions despite state updates, it is advisable to leverage
the useMemo hook provided by React. This strategic use of useMemo prevents unnecessary re-
renders of the component, ensuring that crucial aspects like grid selection remain unaffected.
By incorporating useMemo, developers can optimize the rendering process, enhancing the
performance of React components. For a more detailed understanding and practical implementation,
refer to the documentation link.

How to improve loading performance by binding large data by showing custom text or element
When integrating image or template elements into a column, it's recommended to utilize the Column
Template feature rather than customizing the data through rowDataBound or queryCellInfo events.
These events are triggered for each row and cell rendering, introducing delays in the component's
rendering process. Moreover, rendering custom elements using these events may result in the
persistence of rendered elements, potentially causing longer rendering times over time. By opting for
the column template feature, you can efficiently meet this requirement without experiencing rendering
delays and ensure a more streamlined rendering process.
How to improve loading performance by referring individual script and CSS
To improve the performance of Syncfusion Grid component during the initial render as well as certain
actions, suggested you to download the specific component scripts using CRG (Custom Resource
Generator) to speed up the project. By default, the ej2.min.js script file contains all the Syncfusion
component scripts. So, it will take some time to load the scripts to the project. Using CRG, you can select
the components which you want to use, and the modules for those components, then you can
download the scripts and CSS for the selected components and use them as per your need.
CRG website link
So to improve the performance of grid during the initial rendering, suggested you to refer individual
script and CSS.
How to update cell values without frequent server calls
Efficiently update cell values without the need for frequent server calls, especially beneficial for live
update scenarios. Even when the data is initially bound from the server, performing edit operations can
be done without triggering a database refresh. Utilize the setCellValue method to update the DataGrid
without affecting the database and only refresh the UI.
How to optimize server-side data operations with adaptors
The React DataGrid provides support for various adaptors (OData, ODataV4, WebAPI, URL, etc.) to
facilitate server-side data operations and CRUD functionalities. By leveraging these adaptors along with
the DataManager component, you can seamlessly bind remote data sources to the grid and execute
actions. During data operations like filtering, sorting, and paging, the corresponding action queries are
generated as per the adaptor's requirements. It is crucial to handle these actions on the application end
and return the processed data back to the grid. Refer to the documentation for comprehensive details.
It's worth noting that for efficient data processing, the suggested order for returning processed data to
the grid is as follows
• Filtering
• Sorting
• Aggregates
• Paging
• Grouping
How to avoid MaxJsonLength error while passing large amount of records

The React Grid component is client-server based. So, we send the data as JSON object between client
and server. The reported issue occurs due to the serialization of the large-sized JSON object. We need to
increase the maximum length for serializing the large-sized JSON object. You have to alter the
MaxJsonLength property on your web.config file or in the place of deserialization.

Link to the VideoGrid Columns in React Grid Component
Solution: 1
`csharp
<configuration>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000"/>
</webServices>
</scripting>
</system.web.extensions>
</configuration>
`
Solution : 2
`csharp
var serializer = new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue };
`
Microsoft excel limitation while exporting millions of records to excel file format
By default, Microsoft Excel supports only 1,048,576 records in an excel sheet. Hence it is not possible to
export millions of records to excel. You can refer the documentation link for more details on Microsoft
excel specifications and limits. So suggest to export the data in CSV (Comma-Separated Values) or other
formats that can handle large datasets more efficiently than Excel.
Columns in React Grid Component
In Syncfusion React Grid, Columns are fundamental elements that play a pivotal role in rendering
column values in the required format within your application. The field property of the ColumnDirective
is necessary to map the data source values in Grid columns. To rendering the columns, you need to
import the ColumnDirective, ColumnsDirective and GridComponent in the grid.
`ts
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
`
Column types
The Syncfusion Grid component allows you to specify the type of data that a column binds using the
type property. The type property is used to determine the appropriate format, such as number or date,
for displaying the column data.
Grid supports the following column types:
• string: Represents a column that binds to string data. This is the default type if the type property
is not defined.

• number: Represents a column that binds to numeric data. It supports formatting options for
displaying numbers.
• boolean: Represents a column that binds to boolean data. It displays checkboxes for boolean
values.
• date: Represents a column that binds to date data. It supports formatting options for displaying
dates.
• datetime: Represents a column that binds to date and time data. It supports formatting options
for displaying date and time values.
• checkbox: Represents a column that displays checkboxes.
Here is an example of how to specify column types in a grid using the types mentioned above.
APP.JSX
function App() {
<ColumnsDirective>
<ColumnDirective type='checkbox' width='90' />
width='100' textAlign="Right" type='number' />
width='100' type='string' />
<ColumnDirective field='Freight' headerText='Freight' width='100'
format="C2" textAlign="Right" type='number' />
<ColumnDirective field='OrderDate' headerText='Order Date'
width='100' format="yMd" textAlign="Right" type='date' />
<ColumnDirective field='ShippedDate' headerText='Shipped Date'
width='100' format="dd/MM/yyyy hh:mm" textAlign="Right" type='dateTime' />
<ColumnDirective field='Verified' headerText='Verified'
width='100' type='boolean' displayAsCheckBox={true} />
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
function App() {
<ColumnsDirective>
<ColumnDirective type='checkbox' width='90' />
width='100' textAlign="Right" type='number' />
width='100' type='string' />
format="C2" textAlign="Right" type='number' />


width='100' format="yMd" textAlign="Right" type='date' />
<ColumnDirective field='ShippedDate' headerText='Shipped Date'
width='100' format="dd/MM/yyyy hh:mm" textAlign="Right" type='dateTime' />
width='100' type='boolean' displayAsCheckBox={true} />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),ShippedDate: new Date(8367642e5),
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{


'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{


},
{
},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{


rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{


6',
},
{
},
{
},
{
},
{
}
];
* If the type is not defined, then it will be determined from the first record of the dataSource.
* Incase if the first record of the dataSource is null/blank value for a column then it is necessary to
define the type for that column.
Difference between boolean type and checkbox type column
1. Use the boolean column type when you want to bind boolean values from your datasource
and/or edit boolean property values from your type.
2. Use the checkbox column type when you want to enable selection/deselection of the whole
row.
3. When the grid column type is a checkbox, the selection type of the grid selectionSettings will
be multiple. This is the default behavior.
4. If you have more than one column with the column type as a checkbox, the grid will
automatically enable the other column’s checkbox when selecting one column checkbox.

To learn more about how to render boolean values as checkboxes in a Syncfusion GridColumn, please
refer to the Render Boolean Values as Checkbox section.
Column width
To adjust the column width in a Grid, you can use the width property within the columns property of the
Grid configuration. This property enables you to define the column width in pixels or as a percentage.
You can set the width to a specific value, like 100 for 100 pixels, or as a percentage value, such as 25%
for 25% of the available width.
1. Grid column width is calculated based on the sum of column widths. For example, a grid
container with 4 columns and a width of 800 pixels will have columns with a default width of
200 pixels each.
2. If you specify widths for some columns but not others, the Grid will distribute the available
width equally among the columns without explicit widths. For example, if you have 3 columns
with widths of 100px, 200px, and no width specified for the third column, the third column will
occupy the remaining width after accounting for the first two columns.
3. Columns with percentage widths are responsive and adjust their width based on the size of the
grid container. For example, a column with a width of 50% will occupy 50% of the grid width and
will adjust proportionally when the grid container is resized to a smaller size.
4. When you manually resize columns in Syncfusion Grid, a minimum width is set to ensure that
the content within the cells remains readable. By default, the minimum width is set to 10 pixels
if not explicitly specified for a column.
5. If the total width of all columns exceeds the width of the grid container, a horizontal scrollbar
will automatically appear to allow horizontal scrolling within the grid.
6. When the columns is hide using the column chooser, the width of the hidden columns is
removed from the total grid width, and the remaining columns will be resized to fill the available
space.
7. If the parent element has a fixed width, the grid component will inherit that width and occupy
the available space. However, if the parent element does not have a fixed width, the grid
component will adjust its width dynamically based on the available space.
Supported types for column width

Syncfusion Grid supports the following three types of column width:
1. Auto
The column width is automatically calculated based on the content within the column cells. If the
content exceeds the width of the ColumnDirective, it will be truncated with an ellipsis (…) at the end.
You can set the width for ColumnDirective as auto in your Grid configuration as shown below:
`ts
<ColumnDirective field="OrderID" headerText="Order ID" width="auto" textAlign="Right" />
`
2. Percentage
The column width is specified as a percentage value relative to the width of the grid container. For
example, a column width of 25% will occupy 25% of the total grid width. You can set the width for
ColumnDirective as percentage in your Grid configuration as shown below:

`ts
<ColumnDirective field="OrderID" headerText="Order ID" width="25%" textAlign="Right" />
`
3. Pixel
The column width is specified as an absolute pixel value. For example, a column width of 100px will have
a fixed width of 100 pixels regardless of the grid container size. You can set the width for
ColumnDirective as pixel in your Grid configuration as shown below:
`ts
<ColumnDirective field="OrderID" headerText="Order ID" width="100" textAlign="Right" />
`
APP.JSX
function App() {
return <GridComponent dataSource={data} width='auto'>
<ColumnsDirective>
width='auto' textAlign="Right" />
width='120' />
format="C2" textAlign="Right" />
width='40%' format="yMd" textAlign="Right" />
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
function App() {
return <GridComponent dataSource={data} width='auto'>
<ColumnsDirective>
width='auto' textAlign="Right" />
width='120' />
width='40%' format="yMd" textAlign="Right" />
</ColumnsDirective>

</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{


'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{


},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{


},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{


},
{
},
{
},
{
}
];
Column formatting
Column formatting is a powerful feature in Syncfusion Grid that allows you to customize the display of
data in grid columns. You can apply different formatting options to columns based on your
requirements, such as displaying numbers with specific formats, formatting dates according to a specific
locale, and using templates to format column values.
You can use the format property to specify the format for column values.
APP.JSX
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
textAlign="Right"/>
<ColumnDirective field='OrderDate' width='140' format="yMd"
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>;

}
;
export default App;
APP.TSX
function App() {
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' width='100' />
textAlign="Right" />
<ColumnDirective field='OrderDate' width='140' format="yMd"
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* The grid uses the Internalization library to format values based on the specified format and culture.
* By default, the number and date values are formatted in en-US locale. You can localize the currency
and date in different locale as explained here.
* The available format codes may vary depending on the data type of the column.

* You can also customize the formatting further by providing a custom function to the format property,
instead of a format string.
* Make sure that the format string is valid and compatible with the data type of the column, to avoid
unexpected results.
Number formatting
Number formatting allows you to customize the display of numeric values in grid columns. You can use
standard numeric format strings or custom numeric format strings to specify the desired format. The
format property can be used to specify the number format for numeric columns. For example, you can
use the following format strings to format numbers:
Format |Description |Remarks
{ type:'date', format:'dd/MM/yyyy' } | 04/07/1996
{ type:'date', format:'dd.MM.yyyy' } | 04.07.1996
{ type:'date', skeleton:'short' } | 7/4/96
{ type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' } | 04/07/1996 12:00 AM
{ type: 'dateTime', format: 'MM/dd/yyyy hh:mm:ss a' } | 07/04/1996 12:00:00 AM
APP.JSX
function App() {
const formatOption = { type: 'date', format: 'dd/MM/yyyy' };
const shipFormat = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' };
<ColumnsDirective>
textAlign="Right"/>
<ColumnDirective field='OrderDate' width='140' textAlign="Right"
format={formatOption}/>
<ColumnDirective field='OrderDate' headerText='Ship Date' width='180'
textAlign="Right" format={shipFormat}/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
function App() {
const formatOption: object = { type: 'date', format: 'dd/MM/yyyy' };
const shipFormat: object = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a'
};


<ColumnsDirective>
format={formatOption} />
<ColumnDirective field='OrderDate' headerText='Ship Date' width='180'
textAlign="Right" format={shipFormat} />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),

},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},

{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Format the date column based on localization

You can also format the date column based on the localization settings of the user’s browser. You can
use the format property of the Grid columns along with the locale property to specify the desired date
format based on the locale.
In this example, the format property specifies the date format as “yyyy-MMM-dd”, and the locale
property specifies the locale as “es-AR” for Spanish (Argentina).
APP.JSX
import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as cagregorian from './ca-gregorian.json';
import * as currencies from './currencies.json';
import * as numbers from './numbers.json';

import * as timeZoneNames from './timeZoneNames.json';

function App() {
var formatOption= { type: 'date', format: 'yyyy-MMM-dd' };
var locale = 'es-AR';
setCulture('es-AR');
setCurrencyCode('ARS');
loadCldr(
cagregorian,
currencies,
numbers,
timeZoneNames
);
return <GridComponent dataSource={data} height={315} locale={locale}>
<ColumnsDirective>
</ColumnsDirective>
</GridComponent>
}
export default App;
APP.TSX
import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
function App() {
const formatOption: object = { type: 'date', format: 'yyyy-MMM-dd' };
const locale: any = 'es-AR';
setCulture('es-AR');
setCurrencyCode('ARS');
loadCldr(
cagregorian,
currencies,
numbers,
timeZoneNames
);
return <GridComponent dataSource={data} height={315} locale={locale}>
<ColumnsDirective>
</ColumnsDirective>
</GridComponent>
}

export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{


'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{


},
{
}];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{

},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},

{
},
{
},
{
}];
Format template column value

Template columns in Grid provide a way to customize the appearance of column values using HTML
templates. In addition to HTML markup, you can also use number formatting to format the value
displayed in a template column. To format values in a column template, you can use React pipes and the
format property. In this example, we are using the date pipe to format the OrderDate value as a date in
the format ‘dd/MMM/yyyy’.
APP.JSX
function App() {
const dateTemplate = ((props: any) => {
const date: Date = new Date(props.OrderDate);
const day = date.getDate();
const month = date.toLocaleDateString('default', { month: 'short' });
const year = date.getFullYear();
return `${day}/${month}/${year}`;
})
return (
<div>
<GridComponent dataSource={data} height={315} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' />
format='C2' />
<ColumnDirective field='OrderDate' headerText='Order
Date' template={dateTemplate} />

<ColumnDirective field='ShipCountry' headerText='Ship

Country' />
</ColumnsDirective>
</GridComponent>
</div>
)
}
export default App;
APP.TSX
function App() {
const dateTemplate = ((props: any) => {
const date: Date = new Date(props.OrderDate);
const day = date.getDate();
const month = date.toLocaleDateString('default', { month: 'short' });
const year = date.getFullYear();
return `${day}/${month}/${year}`;
})
return (
<div>
<ColumnsDirective>
format='C2' />
Date' template={dateTemplate} />
Country' />
</ColumnsDirective>
</GridComponent>
</div>
)
}
export default App;
DATASOURCE.JSX
export let data = [
{
},
{


'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{


},
{
},
{
6',
},
{
},
{
},
{
},
{
}];
DATASOURCE.TSX


{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},

{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{
},
{


}];
You can use other React pipes, such as currency, decimal, percent, etc., to format other types of values
in the column template based on your requirements.
Custom formatting
Syncfusion Grid allows you to customize the formatting of data in the grid columns. You can apply
custom formats to numeric or date columns to display data in a specific way according to the
requirements. To apply custom formatting to grid columns in Syncfusion Grid, you can use the format
property. Here’s an example of how you can use custom formatting for numeric and date columns:
In the below example, the numberFormatOptions object is used as the format property for the
‘Freight’ column to apply a custom numeric format with four decimal places. Similarly, the
dateFormatOptions object is used as the format property for the ‘OrderDate’ column to apply a custom
date format displaying the date in the format of day-of-the-week, month abbreviation, day, and 2-digit
year (e.g. Sun, May 8, ‘23).
APP.JSX
function App() {
var numberFormatOptions = {
// Custom format for numeric columns
format: '##.0000'
}
var dateFormatOptions = {
// Custom format for date columns
type: 'Date',
format: "EEE, MMM d, ''yy",
}
<ColumnsDirective>
format={numberFormatOptions} textAlign="Right" />
width='140' textAlign="Right" format={dateFormatOptions} />
</ColumnsDirective>
</GridComponent>
}
export default App;

APP.TSX
function App() {
const numberFormatOptions: Object = {
// Custom format for numeric columns
format: '##.0000'
}
const dateFormatOptions: Object = {
// Custom format for date columns
type: 'Date',
format: "EEE, MMM d, ''yy",
}
<ColumnsDirective>
format={numberFormatOptions} textAlign="Right" />
width='140' textAlign="Right" format={dateFormatOptions} />
</ColumnsDirective>
</GridComponent>
}
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',


},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{


},
{
6',
},
{
},
{
},
{
},
{
}];
DATASOURCE.TSX
{
},
{


'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{


},
{
},
{
6',
},
{
},
{
},
{
},
{
}];

To learn more about custom formatting, you can refer to Custom Date formatting and Custom Number
formatting.
Align the text of content
You can align the text in the content of a Grid column using the textAlign property. This property allows
you to specify the alignment of the text within the cells of a particular column in the Grid. By default, the
text is aligned to the left, but you can change the alignment by setting the value of the textAlign
property to one of the following options:
• Left: Aligns the text to the left (default).

• Center: Aligns the text to the center.
• Right: Aligns the text to the right.
• Justify: Align the text to the justify.
Here is an example of using the textAlign property to align the text of a Grid column:
APP.JSX
function App() {
let grid;
const alignmentData = [
{ text: 'Left', value: 'Left' },
{ text: 'Right', value: 'Right' },
{ text: 'Center', value: 'Center' },
{ text: 'Justify', value: 'Justify' }
];
const changeAlignment = ((args) => {
grid.columns.forEach((col) => {
col.textAlign = args.value;
});
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Align the text for columns
:</label>
<DropDownListComponent dataSource={alignmentData} index={0} width="100"
<div style={{ padding: '40px 0 0 0' }}>
<ColumnsDirective>
width='100' />
width='100' />
/>
width='140' />
</ColumnsDirective>

</GridComponent></div></div>)
}
export default App;
APP.TSX
function App() {
let grid: Grid | null;
const alignmentData: any = [
{ text: 'Left', value: 'Left' },
{ text: 'Right', value: 'Right' },
{ text: 'Center', value: 'Center' },
{ text: 'Justify', value: 'Justify' },
];
const changeAlignment = ((args: any) => {
(grid as any).columns.forEach((col: any) => {
col.textAlign = (args as any).value;
});
(grid as any).refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Align the text for columns
:</label>
<DropDownListComponent dataSource={alignmentData} index={0} width="100"
<ColumnsDirective>
width='100' />
width='100' />
/>
width='140' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},

{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}];
The textAlign property only changes the alignment content not the column header. If you want to align
both the column header and content, you can use the headerTextAlign property.
Render boolean value as checkbox
The Grid component allows you to render boolean values as checkboxes in columns. This can be
achieved by using the displayAsCheckBox property, which is available in the ColumnDirective. This
property is useful when you have a boolean column in your Grid and you want to display the values as
checkboxes instead of the default text representation of true or false.
To enable the rendering of boolean values as checkboxes, you need to set the displayAsCheckBox
property of the ColumnDirective to true.
APP.JSX
function App() {
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100'
textAlign="Right"/>
width='120'/>
format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country'
width='150'/>
displayAsCheckBox={true} width='150'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX


function App() {
<ColumnsDirective>
width='120' />
width='150' />
displayAsCheckBox={true} width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',

},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},

{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* The displayAsCheckBox property is only applicable to boolean values in Grid columns.

* When displayAsCheckBox is set to true, the boolean values will be rendered as checkboxes in the
Grid column, with checked state indicating true and unchecked state indicating false.
How to prevent checkbox in the blank row
To prevent the checkbox in the blank row of the Grid, even if the displayAsCheckBox property is set to
true for that column, you can use the rowDataBound event and check for empty or null values in the

row data. If all the values in the row are empty or null, you can set the inner HTML of the corresponding
cell to an empty string to hide the checkbox.
Here is an example of how you can prevent a checkbox from being displayed in a blank row in a Grid:
APP.JSX
function App() {
const rowDataBound = (args) => {
let count = 0;
let keys = Object.keys(args.data);
for (let i = 0; i < keys.length; i++) {
if (
args.data[keys[i]] == null ||
args.data[keys[i]] == '' ||
args.data[keys[i]] == undefined
) {
count++;
}
}
if (count == keys.length) {
for (let i = 0; i < gridInstance.columns.length; i++) {
if (gridInstance.columns[i].displayAsCheckBox) {
args.row.children[i].innerHTML = '';
}
}
}
};
return <GridComponent ref={(grid) => (gridInstance = grid)}
dataSource={data} height={315} rowDataBound={rowDataBound}>
<ColumnsDirective>
<ColumnDirective field='OrderID' type="number" textAlign="Right"
headerTextAlign="Right" width='120' />
<ColumnDirective field='CustomerID' type="string" textAlign="Left"
headerTextAlign="Left" width='90' />
<ColumnDirective field="Freight" headerText="Freight" width="80"
<ColumnDirective field="Verified" headerText="Verified" width="100"
displayAsCheckBox="true" />
</ColumnsDirective>
</GridComponent>;
}
export default App;
APP.TSX
function App() {
let gridInstance: GridComponent;

let count = 0;
let keys = Object.keys(args.data);
for (let i = 0; i < keys.length; i++) {
if (
args.data[keys[i]] == null ||
args.data[keys[i]] == '' ||
args.data[keys[i]] == undefined
) {
count++;
}
}
if (count == keys.length) {
for (let i = 0; i < gridInstance.columns.length; i++) {
if (gridInstance.columns[i].displayAsCheckBox) {
args.row.children[i].innerHTML = '';
}
}
}
};
return <GridComponent id='grid' ref={g => gridInstance = g}
dataSource={data} height={315} rowDataBound={rowDataBound}>
<ColumnsDirective>
<ColumnDirective field='OrderID' type="number" textAlign="Right"
headerTextAlign="Right" width='120' />
<ColumnDirective field='CustomerID' type="string" textAlign="Left"
headerTextAlign="Left" width='90' />
<ColumnDirective field="Verified" headerText="Verified" width="100"
displayAsCheckBox="true" />
</ColumnsDirective>
</GridComponent>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
OrderID: null, CustomerID: null, EmployeeID: null, OrderDate: null,
ShipName: null, ShipCity: null, ShipAddress: null,
ShipRegion: null, ShipPostalCode: null, ShipCountry: null, Freight:
null, Verified: null
},
{
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
},
{


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


}];
AutoFit columns
The Grid has a feature that allows to automatically adjust column widths based on the maximum
content width of each column when you double-click on the resizer symbol located in a specific column
header. This feature ensures that all data in the grid rows is displayed without wrapping. To use this
feature, you need to inject the Resize module and enable the resizer symbol in the column header by
setting the allowResizing property to true in the grid.
Resizing a column to fit its content using autoFit method
The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You
can autofit specific columns at initial rendering by invoking the autoFitColumns method in dataBound
event.
To use autoFitColumns method, you need to inject Resize module in the grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Resize }
function App() {
let grid;
const dataBound = () => {
if (grid) {
grid.autoFitColumns(['ShipName', 'ShipAddress']);
}
};
return <GridComponent dataSource={data} height={315}
dataBound={dataBound} ref={g => grid = g}>
<Inject services={[Resize]}/>
<ColumnsDirective>
width='150'/>
width='150'/>
width='150'/>
<ColumnDirective field='ShipAddress' headerText='Ship Address'
width='150' format="yMd"/>
width='150'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Inject,
Resize } from '@syncfusion/ej2-react-grids';


function App() {
if (grid) {
grid.autoFitColumns(['ShipName', 'ShipAddress']);
}
}
dataBound={dataBound} ref={g => grid = g} >
<Inject services={[Resize]} />
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
width='150' format="yMd" />
width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

You can autofit all the columns by invoking the autoFitColumns method without specifying column
names.
AutoFit columns with empty space
The Autofit feature is utilized to display columns in a grid based on the defined width specified in the
columns declaration. If the total width of the columns is less than the width of the grid, this means that
white space will be displayed in the grid instead of the columns auto-adjusting to fill the entire grid
width.
You can enable this feature by setting the autoFit property set to true. This feature ensures that the
column width is rendered only as defined in the Grid column definition.
APP.JSX
function App() {
return <GridComponent dataSource={data} height={400} width={850}
allowResizing={true} autoFit={true}>
<Inject services={[Resize]}/>
<ColumnsDirective>
minWidth='100' width='150' maxWidth='200'
textAlign='Right'></ColumnDirective>
minWidth='8' width='150'></ColumnDirective>
minWidth='8' width='120' format='C2' textAlign='Right'/>
allowResizing={false} width='150' textAlign='Right'/>
</ColumnsDirective>
</GridComponent>;
};
export default App;
APP.TSX
function App() {
width={850} allowResizing={true} autoFit={true} >
<ColumnsDirective>
minWidth='100' width='150' maxWidth='200'
textAlign='Right'></ColumnDirective>


minWidth='8' width='120' format='C2' textAlign='Right'/>
allowResizing={false} width='150' textAlign='Right'/>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
If any one of the ColumnDirective width is undefined, then the particular column will automatically
adjust to fill the entire width of the grid table, even if you have enabled the autoFit property of grid.
AutoFit columns when changing column visibility using column chooser
In Syncfusion Grid, you can auto-fit columns when the column visibility is changed using the column
chooser. This can be achieved by calling the autoFitColumns method in the actionComplete event. By
using the requestType property in the event arguments, you can differentiate between different actions,
and then call the autoFitColumns method when the request type is columnState.
Here’s an example code snippet in React that demonstrates how to auto fit columns when changing
column visibility using column chooser:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, Inject,
ColumnChooser, Resize } from '@syncfusion/ej2-react-grids';

function App() {
let grid;
const toolbarOptions = ['ColumnChooser'];
const actionComplete = ((args) => {
if (args.requestType === 'columnstate') {
grid.autoFitColumns();
}
})
return (
<div>
allowResizing={true} toolbar={toolbarOptions} showColumnChooser={true}
actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Customer
ID' />
<ColumnDirective field='Freight' headerText='Freight' />
Date' format='yMd' />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser, Resize]} />
</GridComponent></div>
)
}
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, Grid, GridComponent,
ActionEventArgs, Toolbar, Inject, ColumnChooser, Resize } from
function App() {
const toolbarOptions: any = ['ColumnChooser'];
const actionComplete = ((args: ActionEventArgs) => {
if ((args as any).requestType === 'columnstate') {
(grid as any).autoFitColumns();
}
})
return (
<div>
allowResizing={true} toolbar={toolbarOptions} showColumnChooser={true}
<ColumnsDirective>
ID' />
<ColumnDirective field='Freight' headerText='Freight' />
Date' format='yMd' />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser, Resize]} />

)
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},

{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
AutoFit columns with specific rows

To adjust the column widths of a specific range of rows based on their content, you can use the
autoFitColumns method by simply passing the second and third parameters (optional) as the start and
end index for the column you want to fit. You can autofit specific columns at initial rendering by invoking
the autoFitColumns method in dataBound event.
This feature will calculate the appropriate width based on the maximum content width of the specified
range of rows or the header text width. Subsequently, the maximum width of the content of the
specified rows or header text will be applied to the entire column of the grid.
Here is an example of how to autofit columns with specific rows. The first parameter is an array
containing the specific column field names, such as Inventor, Number of INPADOC patents and Main
fields of invention is passed to apply the autofit functionality to these columns. After, the second
parameter are start index is set to 1 and third parameter are end index is set to 3. When specifying
these start and end index, the autofit operation is applied only to the range of rows from 1 to 3 for
column width adjustment.
APP.JSX
import { inventoryData } from './datasource';
function App() {
let grid;

const dataBound = (() => {

grid.autoFitColumns(['Inventor', 'Number of INPADOC patents',
'Mainfieldsofinvention'], 1, 3);
})
return (
<div>
<GridComponent dataSource={inventoryData} height={315} ref={g =>
grid = g} allowResizing={true} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor'
width='120' clipMode= 'EllipsisWithTooltip' textAlign='Right' />
<ColumnDirective field='NumberofPatentFamilies'
headerText='Number of Patent Families' width='150' />
<ColumnDirective field='Country' headerText='Country'
width='130' />
<ColumnDirective field='Number of INPADOC patents'
headerText='Number of INPADOC patents'width='150'/>
<ColumnDirective field='Active' headerText='Active'
width='250' />
<ColumnDirective field='Mainfieldsofinvention'
headerText='Main fields of invention' width='120'/>
</ColumnsDirective>
)
}
export default App;
APP.TSX
function App() {
grid.autoFitColumns(['Inventor', 'Number of INPADOC patents',
'Mainfieldsofinvention'], 1, 3);
})
return (
<div>
<GridComponent dataSource={inventoryData} height={315} ref={g =>
grid = g} allowResizing={true} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor'
width='120' clipMode= 'EllipsisWithTooltip' textAlign='Right' />
<ColumnDirective field='NumberofPatentFamilies'
headerText='Number of Patent Families' width='150' />
width='130' />
<ColumnDirective field='Number of INPADOC patents'
headerText='Number of INPADOC patents'width='150'/>
<ColumnDirective field='Active' headerText='Active'
width='250' />

<ColumnDirective field='Mainfieldsofinvention'
headerText='Main fields of invention' width='120'/>
</ColumnsDirective>
)
}
export default App;
DATASOURCE.JSX
export const inventoryData = [
{
'Inventor': 'Kia Silverbrook',
'NumberofPatentFamilies': 4737,
'Country': 'Australia',
'Number of INPADOC patents': 9839,
'Active': '1994-2016',
'Mainfieldsofinvention': 'Printing, Digital paper, Internet,
Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',
},
{
'Inventor': 'Shunpei Yamazaki',
'Country': 'Japan',
'Number of INPADOC patents': '10000+',
'Active': '1976-2016',
'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal
displays, Solar cells, Flash memory, OLED',
},
{
'Inventor': 'Lowell L. Wood, Jr.',
'Country': 'USA',
'Active': '1977-2016',
'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',
},
{
'Inventor': 'Paul Lapstun',
'Active': '2000-2016',
Electronics, CGI, VLSI',
},
{
'Inventor': 'Gurtej Sandhu',
'Country': 'India',
'Active': '1991-2016',
'Mainfieldsofinvention': 'Thin film processes and materials, VLSI,
Semiconductor device fabrication',
},

{
'Inventor': 'Jun Koyama',
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Inventor': 'Roderick A. Hyde',
'Country': 'USA',
'Active': '2001-2016',
'Mainfieldsofinvention': 'Various',
},
{
'Inventor': 'Leonard Forbes',
'Country': 'Canada',
'Active': '1991-2016',
'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film
processes and materials, VLSI',
},
{
'Inventor': 'Thomas Edison',
'Country': 'USA',
'Active': '1847(b)-1931(d)',
'Mainfieldsofinvention': 'Electric power, Lighting, Batteries,
Phonograph, Cement, Telegraphy, Mining',
},
{
'Inventor': 'Donald E. Weder',
'Country': 'USA',
'Active': '1976-2015',
'Mainfieldsofinvention': 'Florist supplies',
},
{
'Inventor': 'George Albert Lyon',
'Number of INPADOC patents': 'NA',
'Active': '1882(b)-1961(d)',
'Mainfieldsofinvention': 'Automotive, Stainless steel products',
},
{
'Inventor': 'John F. O\'Connor',
'Country': 'USA',
'Active': '1864(b)-1938(d)',

'Mainfieldsofinvention': 'Railway draft gearing',

},
{
'Inventor': 'Melvin De Groote',
'Country': 'USA',
'Active': '1895(b)-1963(d)',
'Mainfieldsofinvention': 'Chemical de-emulsifiers',
},
{
'Inventor': 'Jay S. Walker',
'Country': 'USA',
'Active': '1998-2016',
'Mainfieldsofinvention': 'Gaming machines',
},
{
'Inventor': 'Edward K. Y. Jung',
'Country': 'USA',
'Active': '1996-2016',
},
{
'Inventor': 'Francis H. Richards',
'Country': 'USA',
'Active': '1850(b)-19??(d)',
'Mainfieldsofinvention': 'Mechanical, automation',
},
{
'Inventor': 'Kangguo Cheng',
'Country': 'USA',
'Active': '2004-2016',
'Mainfieldsofinvention': 'Semiconductor device fabrication,
Semiconductor memory, Semiconductor device',
}
];
DATASOURCE.TSX
export const inventoryData: Object[] = [
{
'Active': '1994-2016',

},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{
'Country': 'USA',
'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',
'Active': '1991-2016',
},
{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',
'Active': '2001-2016',
},
{


'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',
},
{
'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{
'Country': 'USA',
'Active': '1864(b)-1938(d)',
},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',
'Active': '1998-2016',
},
{

'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',
},
{
'Country': 'USA',
'Active': '2004-2016',
}
];
Lock columns
The Syncfusion Grid allows you to lock columns, which prevents them from being reordered and moves
them to the first position. This functionality can be achieved by setting the lockColumn property to true,
which locks the column and moves it to the first position in the grid.
Here’s an example of how you can use the lockColumn property to lock a ColumnDirective in the
Syncfusion Grid:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Reorder }
function App() {
const customAttributes = { class: 'customcss' };
return <GridComponent dataSource={data} allowReordering={true}
allowSelection={false} height={315}>
<Inject services={[Reorder]}/>
<ColumnsDirective>
<ColumnDirective field='ShipCity' width='100' lockColumn={true}
customAttributes={{ class: 'customcss' }}/>
<ColumnDirective field='ShipName' width='100'/>
<ColumnDirective field='ShipPostalCode' width='120'/>
<ColumnDirective field='ShipRegion' width='140'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Reorder }
function App() {
const customAttributes: any = { class: 'customcss' };
return <GridComponent dataSource={data} allowReordering={true}
allowSelection={false} height={315}>
<Inject services={[Reorder]} />
<ColumnsDirective>
<ColumnDirective field='ShipCity' width='100' lockColumn={true}
customAttributes={{ class: 'customcss' }} />
<ColumnDirective field='ShipName' width='100' />
<ColumnDirective field='ShipPostalCode' width='120' />
<ColumnDirective field='ShipRegion' width='140' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Show or hide columns

The Syncfusion Grid control allows you to show or hide columns dynamically by using property or
methods available in the grid. This feature can be useful when you want to customize the visibility of
columns in the Grid based on the requirements.
Using property
You can show or hide columns in the React Grid using the visible property of each column. By setting the
visible property to true or false, you can control whether the column should be visible or hidden in the
grid. Here’s an example of how to show or hide a column in the React Grid using the visible property:
In the below example, the ShipCity column is defined with visible property set to false, which will hide
the column in the rendered grid.
APP.JSX
function App() {
return (
<div>
<ColumnsDirective>
width='100' />
ID' width='100' />
textAlign='Right' format='C' width='100' />
Date' textAlign='Right' format='yMd' width='140' />
visible={false} width='140' />
</ColumnsDirective>
</GridComponent>
</div>
)
}
export default App;
APP.TSX
function App() {
return (
<div>
<ColumnsDirective>
width='100' />
ID' width='100' />


textAlign='Right' format='C' width='100' />
Date' textAlign='Right' format='yMd' width='140' />
visible={false} width='140' />
</ColumnsDirective>
)
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* Hiding a column using the visible property only affects the UI representation of the grid. The data for
the hidden column will still be available in the underlying data source, and can be accessed or modified
programmatically.
* When a column is hidden, its width is not included in the calculation of the total grid width.
* To hide a column permanently, you can set its visible property to false in the column definition, or
remove the column definition altogether.
Using method
You can also show or hide columns in the React Grid using the showColumns and hideColumns methods
of the grid component. These methods allow you to show or hide columns based on either the
headerText or the field of the column.
Based on header text

You can dynamically show or hide columns in the Grid based on the header text by invoking the
showColumns or hideColumns methods. These methods take an array of ColumnDirective header
texts as the first parameter, and the value headerText as the second parameter to specify that you are
showing or hiding columns based on the header text.
Here’s an example of how to show or hide a ColumnDirective based on the headerText in the React
Grid:
APP.JSX
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
function App() {
let grid;
const show = () => {
if (grid) {
grid.showColumns('Customer ID', 'headerText'); //show by HeaderText
}
}
const hide = () => {
if (grid) {
grid.hideColumns('Customer ID', 'headerText'); //hide by HeaderText
}
}
return (<div>
<ButtonComponent cssClass='e-info' onClick={show}>Show</ButtonComponent>
<ButtonComponent style={{marginLeft:'20px'}} cssClass='e-info'
onClick={hide}>Hide</ButtonComponent>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
APP.TSX

function App() {
if (grid) {
grid.showColumns('Customer ID', 'headerText'); //show by HeaderText
}
}
if (grid) {
grid.hideColumns('Customer ID', 'headerText'); //hide by HeaderText
}
}
return (<div>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Based on field
You can dynamically show or hide columns in the Grid using external buttons based on the field by
invoking the showColumns or hideColumns methods. These methods take an array of
ColumnDirective fields as the first parameter, and the value field as the second parameter to specify
that you are showing or hiding columns based on the field.
Here’s an example of how to show or hide a ColumnDirective based on the field in the React Grid:
APP.JSX
function App() {
let grid;
if (grid) {
grid.showColumns('CustomerID', 'field'); //show by field
}
}
if (grid) {
grid.hideColumns('CustomerID', 'field'); //hide by field
}
}
return (<div>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
APP.TSX


function App() {
if (grid) {
grid.showColumns('CustomerID', 'field'); //show by field
}
}
if (grid) {
grid.hideColumns('CustomerID', 'field'); //hide by field
}
}
return (<div>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX

{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}];
Controlling grid actions

You can control various actions such as filtering, grouping, sorting, resizing, reordering, editing, and
searching for specific columns in the Syncfusion React Grid using the following properties:
• allowEditing: Enables or disables editing for a column.

• allowFiltering: Enables or disables filtering for a column.
• allowGrouping: Enables or disables grouping for a column.
• allowSorting: Enables or disables sorting for a column.
• allowReordering: Enables or disables reordering for a column.
• allowResizing: Enables or disables resizing for a column.
• allowSearching: Enables or disables searching for a column.
Here is an example code that demonstrates how to control grid actions for specific columns:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Sort, Filter,
Group, Reorder, Inject, Toolbar, Page, Resize } from '@syncfusion/ej2-react-
grids';
function App() {
const toolbarOptions = ['Search'];
return <GridComponent dataSource={data} allowSorting={true}
allowPaging={true} allowResizing={true} toolbar={toolbarOptions}
allowFiltering={true} allowReordering={true} allowGrouping={true}
height={230}>
<ColumnsDirective>
textAlign="Right" isPrimaryKey={true} allowGrouping={false}
allowResizing={false}/>
width='100' allowSorting={false}/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='100'
allowReordering={false}/>
width='100' allowSearching={false}/>
format="C2" textAlign="Right" allowFiltering={false}/>
</ColumnsDirective>
<Inject services={[Sort, Filter, Group, Reorder, Toolbar, Page, Resize]}
/>
</GridComponent>
};
export default App;

APP.TSX
Group, Reorder, Inject, Toolbar, Page, Resize } from '@syncfusion/ej2-react-
grids';
function App() {
const toolbarOptions: any = ['Search'];
allowPaging={true} allowResizing={true} toolbar={toolbarOptions}
allowFiltering={true} allowReordering={true} allowGrouping={true}
height={230}>
<ColumnsDirective>
allowResizing={false}/>
allowReordering={false}/>
width='100' allowSearching={false}/>
format="C2" textAlign="Right" allowFiltering={false}/>
</ColumnsDirective>
<Inject services={[Sort, Filter, Group, Reorder, Toolbar, Page, Resize]}
/>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},

{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{


Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Customize column styles

Customizing the grid column styles allows you to modify the appearance of columns in the Grid control
to meet your design requirements. You can customize the font, background color, and other styles of
the columns. To customize the columns styles in the grid, you can use grid event, css, property or
method support.
For more information check on this documentation.
Manipulating columns
The Syncfusion Grid for React provides powerful features for manipulating columns in a grid. This
section explains how to access columns, update column definitions, and add/remove columns using
Syncfusion Grid properties, methods, and events.
Accessing columns
To access columns in the Syncfusion Grid, you can use the following methods in the grid.
• getColumns:
This method returns the array of columns defined in the grid.

`
let columns = grid.getColumns();
`
• getColumnByField:
This method returns the column object that matches the specified field name.
`
let column = grid.getColumnByField('ProductName');
`
• getColumnByUid:
This method returns the column object that matches the specified UID.
`
let column = grid.getColumnByUid();
`
• getVisibleColumns:
This method returns the array of visible columns.

`
let visibleColumns = grid.getVisibleColumns();
`

• getForeignKeyColumns:
This method returns the array of foreignkey columns.

`
let foreignKeyColumns = grid.getForeignKeyColumns();
`
• getColumnFieldNames:
This method returns an array of field names of all the columns in the Grid.
`
let fieldNames = grid.getColumnFieldNames()
`
For a complete list of column methods and properties, refer to this section.
Updating column definitions
You can update the column definitions in the Grid using the columns property. You can modify the
properties of the column objects in the columns array to update the columns dynamically. For example,
you can change the headerText, width, visible, and other properties of a column to update its
appearance and behavior in the grid and then call the refreshColumns method to apply the changes to
the grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Sort,
Filter, Group, Reorder, Inject, Toolbar, Page } from '@syncfusion/ej2-react-
grids';
function App() {
let grid;
const updateColumn = (() => {
// Modifying column properties
grid.columns[0].textAlign = 'Center';
grid.columns[0].width = '100';
grid.columns[2].visible = false;
grid.columns[1].customAttributes = { class: 'customcss' };
// Applying changes to the grid
})
return (<div>
<ButtonComponent id='btnId' cssClass='e-info'
onClick={updateColumn}>Update Columns</ButtonComponent>
<GridComponent dataSource={data} ref={g => grid = g} height={230}>
<ColumnsDirective>
width='100' textAlign="Right" isPrimaryKey={true} allowGrouping={false}
allowResizing={false} />


width='100' allowSorting={false} />
width='100' allowReordering={false} />
Country' width='100' allowSearching={false} />
width='100' format="C2" textAlign="Right" allowFiltering={false} />
</ColumnsDirective>
<Inject services={[Sort, Filter, Group, Reorder, Toolbar, Page]}
/>
</GridComponent>
</div>)
};
export default App;
APP.TSX
Filter, Group, Reorder, Inject } from '@syncfusion/ej2-react-grids';
function App() {
const updateColumn = (() => {
// Modifying column properties
(grid as any).columns[0].textAlign = 'Center';
(grid as any).columns[0].width = '100';
(grid as any).columns[2].visible = false;
(grid as any).columns[1].customAttributes = { class: 'customcss' };
// Applying changes to the grid
})
return (<div>
<ButtonComponent id='btnId' cssClass='e-info'
onClick={updateColumn}>Update Columns</ButtonComponent>
<ColumnsDirective>
width='100' textAlign="Right" isPrimaryKey={true} allowGrouping={false}
width='100' allowReordering={false} />
Country' width='100' allowSearching={false} />
width='100' format="C2" textAlign="Right" allowFiltering={false} />
</ColumnsDirective>
<Inject services={[Sort, Filter, Group, Reorder]} />
</GridComponent>
</div>)
};
export default App;

DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Adding/Removing Columns
The Grid component allows you to dynamically add or remove columns to and from the grid using the
[columns]https://helpej2.syncfusion.com/react/documentation/api/grid/column/#columns) property,
which can be accessed through the instance of the Grid.
To add a new column to the Grid, you can directly push the new column object to the columns
property.To remove a column from the Grid, you can use the pop method, which removes the last
element from the columns array of the Grid. Alternatively, you can use the splice method to remove a
specific column from the columns array.
Here's an example of how you can add and remove a column from the grid:
APP.JSX
Group, Reorder, Inject, Toolbar, Page, ColumnModel } from '@syncfusion/ej2-
react-grids';
function App() {
let grid;
const addColumn = (() => {
const newColumns = [
{ field: 'EmployeeID', headerText: 'EmployeeID', width: 120 },
'yMd' },
];

for (const col of newColumns) {

grid.columns.push(col);
}
});
const deleteColumn = (() => {
grid.columns.pop();
});
return (<div>
<ButtonComponent id='btnAdd' cssClass='e-info' onClick={addColumn}>Add
<ButtonComponent id='btnDel' cssClass='e-info'
onClick={deleteColumn}>Delete Column</ButtonComponent>
<ColumnsDirective>
allowReordering={false} />
width='100' allowSearching={false} />
format="C2" textAlign="Right" allowFiltering={false} />
</ColumnsDirective>
<Inject services={[Sort, Filter, Group, Reorder, Toolbar, Page]} />
</GridComponent>
</div>)
};
export default App;
APP.TSX
Filter, Group, Reorder, Inject, Toolbar, Page, ColumnModel } from
function App() {
const addColumn = (() => {
const newColumns: ColumnModel[] = [
{ field: 'EmployeeID', headerText: 'EmployeeID', width: 120 },
'yMd' },
];
for (const col of newColumns) {
(grid as any).columns.push(col);
}
});
const deleteColumn = (() => {

(grid as any).columns.pop();
});
return (<div>
<ButtonComponent id='btnAdd' cssClass='e-info' onClick={addColumn}>Add
<ButtonComponent id='btnDel' cssClass='e-info'
onClick={deleteColumn}>Delete Column</ButtonComponent>
<ColumnsDirective>
allowReordering={false} />
width='100' allowSearching={false} />
format="C2" textAlign="Right" allowFiltering={false} />
</ColumnsDirective>
<Inject services={[Sort, Filter, Group, Reorder, Toolbar, Page]} />
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

How to refresh columns

You can use the refreshColumns method of the Syncfusion Grid to refresh the columns in the grid. This
method can be used when you need to update the grid columns dynamically based on user actions or
data changes.
`ts
`
Responsive columns
The Syncfusion React Grid provides a built-in feature to toggle the visibility of columns based on media
queries using the hideAtMedia property of the column object. The hideAtMedia accepts valid Media
Queries.
In this example, we have a Grid that displays data with three columns: Order ID, Customer ID, and
Freight. We have set the hideAtMedia property of the OrderID column to (min-width: 700px) which
means that this column will be hidden when the browser screen width is less than or equal to 700px.
APP.JSX
function App() {
<ColumnsDirective>
textAlign="Right"
hideAtMedia='(min-width:700px)' /> // Column visibility hide when
browser screen width lessthan 700px
width='150'
hideAtMedia='(max-width:700px)' /> //Column Visibility show when
browser screen width 500px or less
hideAtMedia='(min-width:500px)' /> //Column visibility hide when
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
//It is always shown
</ColumnsDirective>
</GridComponent>
}
export default App;
APP.TSX
function App() {
<ColumnsDirective>


textAlign="Right"
hideAtMedia='(min-width:700px)' /> // Column visibility hide when
width='150'
hideAtMedia='(max-width:700px)' /> //Column Visibility show when
browser screen width 500px or less
hideAtMedia='(min-width:500px)' /> //Column visibility hide when
//It is always shown
</ColumnsDirective>
</GridComponent>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),

Link to the VideoGrid Row in React Grid component

},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
See also
• Group Column by Format
Row in React Grid component

Each row typically represents a single record or item from a data source. Rows in a grid are used to
present data in a tabular format. Each row displays a set of values representing the fields of an
individual data record. Rows allow users to interact with the data in the grid. Users can select rows, edit
cell values, perform sorting or filtering operations, and trigger events based on actions.

Customize row styles

Customizing the styles of rows in a Syncfusion Grid allows you to modify the appearance of rows to
meet your design requirements. This feature is useful when you want to highlight certain rows or
change the font style, background color, and other properties of the row to enhance the visual appeal of
the grid. To customize the row styles in the grid, you can use CSS, properties, methods, or event support
provided by the Syncfusion React Grid component.
Using event
You can customize the appearance of the rows by using the rowDataBound event. This event triggers for
every row when it is bound to the data source. In the event handler, you can get the
RowDataBoundEventArgs object, which contains details of the row. You can use this object to modify
the row's appearance, add custom elements, or perform any other customization.
Here's an example of how you can use the rowDataBound event to customize the styles of rows based
on the value of the Freight column. This example involves checking the value of the Freight column for
each row and adding a CSS class to the row based on the value. The CSS classes below-30, below-80,
and above-80 can then be defined in your stylesheet to apply the desired styles to the rows.
APP.JSX
import { getValue } from '@syncfusion/ej2-base';
function App() {
if (args.row) {
if (getValue('Freight', args.data) < 30) {
args.row.classList.add('below-30');
}
else if (getValue('Freight', args.data) < 80) {
}
else {
args.row.classList.add('above-80');
}
}
};
return (<div>
<GridComponent dataSource={data} height={315} enableHover={false}
allowSelection={false} rowDataBound={rowDataBound}>
<ColumnsDirective>
textAlign="Right"/>
width='100'/>
width='100' textAlign="Right"/>
textAlign="Right"/>
width='100'/>
</ColumnsDirective>
</GridComponent>

</div>);
}
;
export default App;
APP.TSX
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent,
RowDataBoundEventArgs } from '@syncfusion/ej2-react-grids';
function App() {
const rowDataBound = (args: RowDataBoundEventArgs) => {
if (args.row) {
if (getValue('Freight', args.data) < 30) {
} else if (getValue('Freight', args.data) < 80) {
} else {
args.row.classList.add('above-80');
}
}
}
return (<div>
allowSelection={false}
rowDataBound={rowDataBound}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},

{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{


Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];

DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}];
The queryCellInfo event can also be used to customize cells and is triggered for every cell in the grid. It
can be useful when you need to customize cells based on certain conditions or criteria.
Using CSS
You can apply styles to the rows using CSS selectors. The Grid provides a class name for each row
element, which you can use to apply styles to that specific row.
Customize alternate rows
You can customize the appearance of the alternate rows using CSS. This can be useful for improving the
readability of the data and making it easier to distinguish between rows. By default, Syncfusion Grid
provides the CSS class .e-altrow to style the alternate rows. You can customize this default style by
overriding the .e-altrow class with your custom CSS styles.
To change the background color of the alternate rows, you can add the following CSS code to your
application's stylesheet:
`css
.e-grid .e-altrow {
background-color: #fafafa;
}
`
Here's an example of how to use the .e-altrow class to style alternate rows:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page }
function App() {
<ColumnsDirective>


textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Page]}/>
</GridComponent>;
}
;
export default App;
APP.TSX
PageSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 7 };
<ColumnsDirective>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
<ColumnDirective field='ShipCountry' width='100' />
</ColumnsDirective>
<Inject services={[Page]} />
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
export let sdata = [
{
Date(8364186e5),
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'Brazil',
},
{


Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
}
];

DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}];
Customize selected row

You can customize the appearance of the selected row using CSS. This is useful when you want to
highlight the currently selected row for improve the visual appeal of the Grid. By default, the Grid
provides the CSS class .e-selectionbackground to style the selected row. You can customize this default
style by overriding the .e-selectionbackground class with your own custom CSS styles.
To change the background color of the selected row, you can add the following CSS code to your
application:
`css
.e-grid .e-selectionbackground {
background-color: #f9920b;
}
`
Here's an example of how to use the .e-selectionbackground class to style the selected row:
APP.JSX
function App() {
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>;
}

;
export default App;
APP.TSX
function App() {
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Using method
The Grid provides below methods to customize the appearance of the grid rows :

1. getRowByIndex: This method returns the HTML element of a row at the specified index. You can
use this method to apply custom styles to a specific row.
2. getRowIndexByPrimaryKey: This method returns the index of the row with the specified primary
key. You can use this method to get the index of a specific row and then apply custom styles to
it.
3. getRows: This method returns an array of all the row elements in the Grid. You can use this
method to apply custom styles to all rows or to a specific set of rows based on some condition.
4. getRowInfo: This method returns the data object and index of the row corresponding to the
specified row element. You can use this method to apply custom styles based on the data in a
row.
5. getSelectedRowIndexes: This method returns an array of the indexes of the selected rows in the
Grid. You can use this method to apply custom styles to the selected rows.
6. getSelectedRows:This method returns an array of the HTML elements representing the selected
rows in the grid. You can use this method to directly loop through the selected rows and
customize their styles.
The following example demonstrates how to use getRowByIndex methods to customize the appearance
of the row inside the dataBound event of the grid.
APP.JSX
function App() {
let grid;
const customizeRow = (() => {
(grid.getRowByIndex(2)).style.background = 'rgb(193, 228, 234)';
})
return <GridComponent ref={g => grid = g} dataSource={data}
dataBound={customizeRow}>
<ColumnsDirective>
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
function App() {
const customizeRow = (() => {

((grid as GridComponent).getRowByIndex(2)).style.background = 'rgb(193,

228, 234)';
})
return <GridComponent ref={g => grid = g} dataSource={data}
dataBound={customizeRow}>
<ColumnsDirective>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
export let sdata = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Row height
The Syncfusion Grid allows you to customize the height of rows based on your needs. This feature can
be useful when you need to display more content in a row or when you want to reduce the height of
rows to fit its content. You can achieve this by using the rowHeight property of the Grid component. This
property allows you to change the height of the entire grid row to your desired value.
In the below example, we will demonstrate how to dynamically change the height of the rows using the
rowHeight property.
APP.JSX
function App() {
let grid;
let heightRow = { small: 20, medium: 40, big: 60 };
const changeHeight = ((args) => {
grid.rowHeight = heightRow[args.target.id];
});
return (
<div>
<ButtonComponent id="small" cssClass="e-small"
onClick={changeHeight}>Change height 20px</ButtonComponent>
<ButtonComponent id="medium" cssClass="e-small"
<ButtonComponent id="big" cssClass="e-small"
rowHeight={42}>
<ColumnsDirective>
/>
width='100' />
/>
width='140' format='yMd' />
</ColumnsDirective>
}
export default App;
APP.TSX
function App() {
let heightRow: Object = { small: 20, medium: 40, big: 60 };

const changeHeight = ((args) => {

(grid as GridComponent).rowHeight = heightRow[args.target.id];
});
return (
<div>
<ButtonComponent id="small" cssClass="e-small"
<ButtonComponent id="medium" cssClass="e-small"
<ButtonComponent id="big" cssClass="e-small"
rowHeight={42}>
<ColumnsDirective>
/>
width='100' />
/>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

* The rowHeight property can only be used to set the height of the entire grid row. It cannot be
used to set the height of individual cells within a row.
* The rowHeight property applies the height to all rows in the grid, including the header and footer
rows.
* You can also set the height for a specific row using the rowHeight property of the
corresponding row object in the rowDataBound event.
Customize row height for particular row
Customizing the row height for a particular row can be useful when you want to display more content in
a particular row, reduce the height of a row to fit its content, or make a specific row stand out from the
other rows in the grid. This can be achieved by using the rowHeightproperty of the Grid component
along with the rowDataBound event.
The rowHeight property of the Grid component allows you to set the height of all rows in the grid to a
specific value. However, if you want to customize the row height for a specific row based on the row
data, you can use the rowDataBound event. This event is triggered every time a request is made to
access row information, element, or data, and before the row element is appended to the Grid element.
In the below example, the row height for the row with OrderID as '10249' is set as '90px' using the
rowDataBound event.
APP.JSX
import { DataManager, Query } from '@syncfusion/ej2-data';
function App() {
if (args.data.OrderID === 10249) {
args.rowHeight = 90;
}
};
const gridData = new DataManager(data).executeLocal(new Query().take(8));
return (<div>
<GridComponent dataSource={gridData} height={315}
<ColumnsDirective>
textAlign='Right'/>
width='140'/>
format="C"/>
<ColumnDirective field='OrderDate' headerText='OrderDate' width='140'
format='yMd'/>
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;

APP.TSX
import { DataManager, Query } from '@syncfusion/ej2-data';
interface OrderDetails {
OrderID?: number;
}
function App() {
const rowDataBound = (args: RowDataBoundEventArgs) => {
if ((args.data as OrderDetails).OrderID === 10249) {
args.rowHeight = 90;
}
}
const gridData: Object = new DataManager(data).executeLocal(new
Query().take(8));
return (<div>
<GridComponent dataSource={gridData} height={315}
<ColumnsDirective>
textAlign='Right' />
width='140' />
format="C" />
format='yMd' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
* In virtual scrolling mode, it is not applicable to set different row heights.

* You can customize the row height of multiple rows by checking the relevant criteria in the
rowDataBound event and setting the rowHeight property accordingly.
* In the rowDataBound event handler, you can access the current row using the args.row property and
set the rowHeight property for that row using the setAttribute method.
Row hover
The Row Hover feature in Grid provides a visual effect when the mouse pointer hovers over the rows,
making it easy to highlight and identify the selected row. This feature can also improve the readability of
data in the grid. The row hover effect can be enabled or disabled using the enableHover property of the
Grid component.
By default, the enableHover property is set to true, which means that the row hovering effect is
enabled. To disable the row hover effect, set the enableHover property to false.
Here is an example that demonstrates how to enable/disable the Row Hover feature:
APP.JSX
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import React, { useState } from 'react';
function App() {
const [enableRowHover, setEnableRowHover] = useState(true);
const changeValue = (() => {
setEnableRowHover(!enableRowHover);
});
return (
<div>
<label style={{ padding: "10px 10px" }}>
Enable/Disable Row Hover
</label>
<SwitchComponent id="switch" checked={enableRowHover}
change={changeValue}></SwitchComponent>
<GridComponent dataSource={data} enableHover={enableRowHover}>
<ColumnsDirective>
/>
width='100' />
/>
</ColumnsDirective>

}
export default App;
APP.TSX
function App() {
const [enableRowHover, setEnableRowHover] = useState(true);
const changeValue = (() => {
setEnableRowHover(!enableRowHover);
});
return (
<div>
Enable/Disable Row Hover
</label>
<SwitchComponent id="switch" checked={enableRowHover}
change={changeValue}></SwitchComponent>
<GridComponent dataSource={data} enableHover={enableRowHover}>
<ColumnsDirective>
/>
width='100' />
/>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
The enableHover property applies to the entire grid, not individual rows or columns.
How to get the row information when hovering over the cell
You can retrieve row information when hovering over a specific cell. This can be useful if you want to
display additional details or perform some action based on the data in the row. This can be achieved by
using the rowDataBound event and the getRowInfo method of the Grid.
• The rowDataBound event is triggered every time a request is made to access row information,
element, or data, before the row element is appended to the Grid element.
• The getRowInfo method is used to retrieve the row information when hovering over a specific
cell. This method takes a single parameter, which is the target element that is being hovered
over.
Here's an example that demonstrates how to use the rowDataBound event and getRowInfo method
to retrieve the row information when hovering over a cell in the Syncfusion Grid.
APP.JSX
function App() {
let grid;
const rowDataBound = ((args) => {
args.row.addEventListener('mouseover', (e) => {
const rowInformation = grid.getRowInfo(e.target);
console.log(rowInformation);
document.getElementById('show').innerHTML = `
<table style="border-collapse: collapse; width: 600px;">
<tr style="border: 2px solid;">
<td style="padding: 2px;"><b>Row Information:</b></td>
</tr>
<tr style="border: 2px solid; padding: 8px;">
<th style="border: 2px solid; padding: 8px; width:
120px;"><b>Class Name</b>
</th>
<td style="border: 2px solid; padding:
8px;">${rowInformation.row.className}
</td>
</tr>
<th style="border: 2px solid; padding: 8px;"><b>Row
Index</b>
</th>
8px;">${rowInformation.rowIndex}
</td>

</tr>
</table>`;
});
});
return (
<div>
<div id='show' style={{ padding: "0px 0px 20px 0px" }} ></div>
<GridComponent dataSource={data} ref={g => grid = g}
<ColumnsDirective>
/>
width='100' />
/>
</ColumnsDirective>
}
export default App;
APP.TSX
function App() {
const rowDataBound = ((args:RowDataBoundEventArgs) => {
args.row.addEventListener('mouseover', (e: MouseEvent) => {
const rowInformation = (grid as GridComponent).getRowInfo(e.target as
HTMLElement);
console.log(rowInformation);
(document.getElementById('show') as HTMLElement).innerHTML = `
<table style="border-collapse: collapse; width: 600px;">
<td style="padding: 2px;"><b>Row Information:</b></td>
</tr>
<tr style="border: 2px solid; padding: 8px;">
<th style="border: 2px solid; padding: 8px; width:
120px;"><b>Class Name</b>
</th>
8px;">${rowInformation.row.className}
</td>
</tr>
<th style="border: 2px solid; padding: 8px;"><b>Row
Index</b>
</th>
8px;">${rowInformation.rowIndex}
</td>

</tr>
</table>`;
});
});
return (
<div>
<div id='show' style={{ padding: "0px 0px 20px 0px" }} ></div>
<ColumnsDirective>
/>
width='100' />
/>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
The getRowInfo method can only be used in the rowDataBound event. Attempting to use it elsewhere
will result in an error.
Row pinning (Frozen) in React Grid component
The Syncfusion React Grid allows you to freeze rows to keep them visible while scrolling vertically
through large datasets. This feature enhances the experience by maintaining important information
within view at all times.

In the following example, the frozenRows property is set to 3. This configuration freezes the top three
rows of the grid, and they will remain fixed in their positions while the rest of the grid can be scrolled
vertically.
APP.JSX
import { ColumnDirective, ColumnsDirective, Freeze, GridComponent, Inject }
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid;
let textBox;
const frozenRows = () => {
grid.frozenRows = textBox.value;
}
return (
<div>
<label style={{ padding: "10px 10px 26px 0" }}> Change the frozen rows:
</label>
<NumericTextBoxComponent ref={t => textBox = t} id='frozenrows' min={0}
max={5} validateDecimalOnType={true} decimals={0} value={2} format='n'
width='150'></NumericTextBoxComponent>
<ButtonComponent style={{ marginLeft: "5px" }}
onClick={frozenRows}>UPDATE</ButtonComponent>
<GridComponent ref={g => grid = g} dataSource={data} height={315}
frozenRows={2}>
<ColumnsDirective>
/>
width='180' />
/>
width='200' />
width='150' />
width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region'
width='220' />
width='200' />
</ColumnsDirective>
<Inject services={[Freeze]} />
}
export default App;
APP.TSX


function App() {
let textBox: NumericTextBoxComponent | null;
const frozenRows = () => {
(grid as GridComponent).frozenRows = (textBox as
NumericTextBoxComponent).value;
}
return (
<div>
<label style={{ padding: "10px 10px 26px 0" }}> Change the frozen rows:
</label>
<NumericTextBoxComponent ref={t => textBox = t} id='frozenrows' min={0}
max={5} validateDecimalOnType={true} decimals={0} value={2} format='n'
width='150'></NumericTextBoxComponent>
<ButtonComponent style={{ marginLeft: "5px" }}
onClick={frozenRows}>UPDATE</ButtonComponent>
frozenRows={2}>
<ColumnsDirective>
/>
width='180' />
/>
width='200' />
width='150' />
width='180' />
width='220' />
width='200' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',


},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* Frozen rows should not be set outside the grid view port.
* Frozen Grid will support row virtualization feature, which helps to improve the Grid performance while
loading a large dataset.
* The frozen feature is supported only for the rows that are visible in the current view.
* You can use both frozenColumns property and frozenRows property in the same application.
Change default frozen rows line color
You can easily customize the frozen line background color of frozen rows in the Syncfusion Grid
component by applying custom CSS styles to the specific frozen row. This allows you to change the
background color of frozen rows to match your application's design and theme.
To change the default frozen rows line color, you can use the following CSS class:
`css
.e-grid .e-frozenrow-border {
background-color: rgb(5, 114, 47);
}
`
By applying this CSS class, you can set the background color of frozen rows to the specified RGB color.
The following example demonstrates how to change the default frozen rows line color using CSS.
APP.JSX
function App() {
return (
<div>

<GridComponent dataSource={data} height={315} frozenRows={3}

allowSelection={false} enableHover={false}>
<ColumnsDirective>
/>
width='180' />
/>
width='200' />
width='150' />
width='180' />
width='220' />
width='200' />
</ColumnsDirective>
}
export default App;
APP.TSX
function App() {
return (
<div>
<GridComponent dataSource={data} height={315} frozenRows={3}
allowSelection={false} enableHover={false}>
<ColumnsDirective>
/>
width='180' />
/>
width='200' />
width='150' />
width='180' />
width='220' />
width='200' />


</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',


},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},

{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Deprecated methods
Previous | Current | Explanation
getMovableRows() gridInstance.getMovableRows()[0].querySelectorAll('.e-unfreeze') | getRows()
gridInstance.getRows()[0].querySelectorAll('.e-unfreeze') | The previous architecture used separate
tables for left, right, and movable contents, returning only movable rows when calling the method,
whereas the current architecture combines them into one table, returning all rows and introduces the
e-unfreeze class for selecting movable rows
getFrozenRightRows() gridInstance.getFrozenRightRows()[0].querySelectorAll('.e-rightfreeze') |
getRows() gridInstance.getRows()[0].querySelectorAll('.e-rightfreeze') | In the previous architecture, it
returned only the table rows from the right freeze table, but in the current architecture, all rows of the
entire table are returned, introducing the e-rightfreeze class for selecting right freeze rows.
getMovableRowByIndex() <br> getFrozenRowByIndex() <br> getFrozenRightRowByIndex() |
getRowByIndex() gridInstance.getRowByIndex(1).querySelectorAll('.e-unfreeze') | In the previous
architecture, separate methods were used to select rows from different table sections, while in the
current architecture, the getMovableRowByIndex(), getFrozenRightRowByIndex(), and
getFrozenRowByIndex() methods now return the same table row based on the given index.
Additionally, class names for table cells (td's) have been separated into e-leftfreeze, e-unfreeze, and e-
rightfreeze, making it easier to customize cells within a row.

getMovableCellFromIndex() <br> getFrozenRightCellFromIndex() | getCellFromIndex()

gridInstance.getCellFromIndex(1,1) | In the previous approach, the getMovableCellFromIndex()
method was used to choose a specific cell within the movable table, and the
getFrozenRightCellFromIndex() method was utilized to target a particular cell within the right freeze
table. However, in the current architecture, you have the flexibility to select a specific cell in either the
movable or right freeze table by using both the getFrozenRightCellFromIndex() and
getMovableCellFromIndex() methods. This new method simplifies the process of selecting and
retrieving specific cells within these tables, offering more versatility and convenience.
getMovableDataRows() <br> getFrozenRightDataRows() <br> getFrozenDataRows() |
getDataRows() gridInstance.getDataRows()[0].querySelectorAll('.e-unfreeze') | In the previous
approach, there were separate methods (getMovableDataRows(), getFrozenRightDataRows(), and
getFrozenDataRows()) for obtaining viewport data rows from the freeze, movable, and right tables
individually. However, in the new approach, these methods have been enhanced to return the entire
viewport data rows for all sections together, simplifying data retrieval. You can now extract specific cells
within these rows using selectors such as e-leftfreeze for the left freeze, e-unfreeze for the movable,
and e-rightfreeze for the right freeze tables, providing greater flexibility in working with the data.
getMovableColumnHeaderByIndex() <br> getFrozenRightColumnHeaderByIndex() <br>
getFrozenLeftColumnHeaderByIndex() | getColumnHeaderByIndex()
gridInstance.getColumnHeaderByIndex(1) | In the previous architecture, the methods selected movable,
right freeze, and left freeze headers separately. However, in the new approach, when using the
getMovableColumnHeaderByIndex(), getFrozenRightColumnHeaderByIndex(), and
getFrozenLeftColumnHeaderByIndex() methods, you will still obtain the same results as in the
previous architecture.
When a validation message is displayed in the frozen part (Left, Right, Fixed) of the table, scrolling is
prevented until the validation message is cleared.
Limitations
• Frozen row is not compatible with the following features:

1. Autofill
Adding a new row programmatically

The Syncfusion Grid provides a way to add a new row to the grid programmatically. This feature is useful
when you want to add a new record to the grid without having the manually enter data in the grid. This
can be done using the addRecord method of the Grid.
The addRecord method takes two parameters:
• The data object representing the new row to be added

• The index at which the new row should be inserted. If no index is specified, the new row will be
added at the end of the Grid.
Here's an example of how to add a new row using the addRecord method:
APP.JSX

import { ColumnDirective, ColumnsDirective, Edit, GridComponent, Inject }

function App() {
let grid;
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true };
};
let result = '';
for (let i = 0; i < 5; i++) {
}
return result;
};
};
};
};
const addRow = () => {
const newRecord = {
};
grid.addRecord(newRecord, 0);
}
return (<div><ButtonComponent id='add' onClick={addRow}>Add New
Row</ButtonComponent>
editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100'
textAlign="Right" isPrimaryKey={true} />
<ColumnDirective field='ShipCity' width='100'
</ColumnsDirective>

}
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, Edit, EditSettingsModel,
GridComponent, Inject } from '@syncfusion/ej2-react-grids';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true };
};
let result = '';
for (let i = 0; i < 5; i++) {
}
return result;
};
};
};
};
const addRow = () => {
const newRecord: Object = {
};
(grid as GridComponent).addRecord(newRecord, 0);
}
return (<div><ButtonComponent id='add' onClick={addRow}>Add New
Row</ButtonComponent>
editSettings={editOptions}>
<ColumnsDirective>


</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* When working with remote data, it is impossible to add a new row between the existing rows.
* If you want to add a new record to the beginning of the data source, you can pass 0 as the second
parameter to the addRecord method.
* If you do not specify an index, the new row will be added at the end of the grid.
Show or hide a row using an external actions
In a Syncfusion grid, you can show or hide a particular row based on some external action, such as a
checkbox click. This can be useful in scenarios where you want to hide certain rows from the grid
temporarily, without removing them from the underlying data source. This can be achieved by using the
getRowByIndex and getRowsObject methods of the grid along with the change event of the checkbox.
The getRowsObject method returns an array of row objects that represents all the rows in the grid. You
can use this method to iterate through all the rows and access their data and index.

The getRowByIndex method returns the HTML element of a row at the specified index. You can use this
method to get a specific row and apply changes to it.
In the following example, the onCheckBoxChange method is used to check whether the checkbox is
checked or not. If it is checked, the method iterates through all the rows in the grid using the
getRowsObject method. For each row, it checks whether the value in the CustomerID column is equal
to "VINET". If it is, the index of that row is obtained using the getRowByIndex method and hidden by
setting its display style to "none". The index of the hidden row is also added to an array called
hiddenRows.
If the checkbox is unchecked, the method iterates through the hiddenRows array and shows each row
by setting its display style to an empty string. The hiddenRows array is also cleared.
APP.JSX
let rowIndex;
let hiddenRows = [];
function App() {
let grid;
const [message, setMessage] = useState('');
const onCheckBoxChange = (args) => {
if (args.checked) {
for (let i = 0; i < grid.getRowsObject().length; i++) {
if (grid.getRowsObject()[i].data.CustomerID === 'VINET') {
// check the row value
rowIndex = grid.getRowsObject()[i].index; //get
particular row index
grid.getRowByIndex(rowIndex).style.display = 'none';
//hide row
hiddenRows.push(rowIndex); // add row index to hiddenRows
array
}
}
if (hiddenRows.length > 0) {
setMessage('Rows with a customer name column value of VINET
have been hidden');
}
}
else {
// Show hidden rows
hiddenRows.forEach((rowIndex) => {
grid.getRowByIndex(rowIndex).style.display = '';
});
hiddenRows = [];
setMessage('Show all hidden rows');
}
}
return (<div><CheckBoxComponent label='Show / Hide Row'
change={onCheckBoxChange}></CheckBoxComponent>
<p id='message'>{message}</p>

<GridComponent dataSource={data} ref={g => grid = g} >

<ColumnsDirective>
</ColumnsDirective>
}
export default App;
APP.TSX
let rowIndex: number;
let hiddenRows: number[] = [];
function App() {
const onCheckBoxChange = (args) => {
if (args.checked) {
for (let i = 0; i < (grid as
GridComponent).getRowsObject().length; i++) {
if ((grid as
GridComponent).getRowsObject()[i].data.CustomerID === 'VINET') {
// check the row value
rowIndex = (grid as
GridComponent).getRowsObject()[i].index; //get particular row index
(grid as
GridComponent).getRowByIndex(rowIndex).style.display = 'none'; //hide row
hiddenRows.push(rowIndex); // add row index to hiddenRows
array
}
}
if (hiddenRows.length > 0) {
setMessage('Rows with a customer name column value of VINET
have been hidden');
}
}
else {
// Show hidden rows
hiddenRows.forEach((rowIndex: number) => {
(grid as GridComponent).getRowByIndex(rowIndex).style.display
= '';
});
hiddenRows = [];

setMessage('Show all hidden rows');

}
}
return (<div><CheckBoxComponent label='Show / Hide Row'
change={onCheckBoxChange}></CheckBoxComponent>
<p id='message'>{message}</p>
<GridComponent dataSource={data} ref={g => grid = g} >
<ColumnsDirective>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',

},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},

{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
How to get the row data and element

Grid provides several methods to retrieve row data and elements. This feature is useful when you need
to access specific rows, perform custom operations, or manipulate the data displayed in the grid.
1. getRowByIndex: This method returns the HTML element of a row at the specified index. It can
be used to retrieve the element of a specific row in the grid.
`ts

const rowElement = grid.getRowByIndex(rowIndex);

`
2. getRowByPrimaryKey:The method allows you to retrieve the row index based on a specific
primary key value or row data.
`ts
const rowIndex = grid.getRowByPrimaryKey(primaryKey);
`
3. getRowInfo:This method allows you to retrieve row information based on a cell target element.
`ts
const rowInformation = grid.getRowInfo(targetElement);
`
4. getRows: This method returns an array of all the row elements in the Grid. If you need to
retrieve row data and elements, you can combine the getRows method with the getRowInfo
method.
`ts
const rowElements = grid.getRows();
`
5. getSelectedRowIndexes:This method allows you to retrieve the collection of indexes of the

selected rows. However, it does not directly provide the row elements and associated data. To
access the row elements and data of the selected rows, you can combine the
getSelectedRowIndexes method with getRowByIndex and getRowInfo method.
`ts
const selectedIndexes = grid.getSelectedRowIndexes();
`
6. getSelectedRows:This method returns an array of HTML elements representing the selected

rows in the grid.By iterating over this array, you can access each row element and data using the
getRowInfo method. This way, you can access both the row elements and their associated data
for the selected rows.
`ts
const selectedRowElements = grid.getSelectedRows();
`

Link to the VideoGrid Cell in React Grid component
Cell in React Grid component

Displaying the HTML content
Displaying HTML content in a Grid can be useful in scenarios where you want to display formatted
content, such as images, links, or tables, in a tabular format. Grid component allows you to display
HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential
security vulnerabilities. However, you can enable the disableHtmlEncode property by setting the value
as false to display HTML tags without encoding. This feature is useful when you want to display HTML
content in a grid cell.
In the following example, the EJ2 Toggle Switch Button component is added to enable and disable the
disableHtmlEncode property. When the switch is toggled, the change event is triggered and the
disableHtmlEncode property of the column is updated accordingly. The refresh method is called to
refresh the grid and display the updated content.
APP.JSX
function App() {
let grid;
const change = ((args) => {
if (args.checked) {
grid.getColumnByField('CustomerID').disableHtmlEncode = false;
} else {
grid.getColumnByField('CustomerID').disableHtmlEncode = true;
}
})
return (
<div>
<div>
Enable or disable HTML Encode
</label>
<SwitchComponent id="switch" change={change}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} height={315}>
<ColumnsDirective>
width='100' />
<ColumnDirective field='CustomerID' headerText='<strong> Customer
ID </strong>' width='120' />
textAlign='Right' format='C' />
width='120' />
</ColumnsDirective>
}
export default App;
APP.TSX


import { SwitchComponent, ChangeEventArgs } from '@syncfusion/ej2-react-
buttons';
function App() {
const change = ((args: ChangeEventArgs) => {
if (args.checked) {
(grid as
GridComponent).getColumnByField('CustomerID').disableHtmlEncode = false;
} else {
(grid as
GridComponent).getColumnByField('CustomerID').disableHtmlEncode = true;
}
})
return (
<div>
<div>
Enable or disable HTML Encode
</label>
<SwitchComponent id="switch" change={change}></SwitchComponent>
<ColumnsDirective>
width='100' />
<ColumnDirective field='CustomerID' headerText='<strong> Customer
ID </strong>' width='120' />
textAlign='Right' format='C' />
width='120' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
OrderID: 10248, CustomerID: '<b>VINET</b>', EmployeeID: 5, OrderDate:
new Date(8364186e5),
},
{
OrderID: 10249, CustomerID: '<b>TOMSP</b>', EmployeeID: 6, OrderDate:
new Date(836505e6),
'Luisenstr. 48',


},
{
OrderID: 10250, CustomerID: '<b>HANAR</b>', EmployeeID: 4, OrderDate:
ShipName: '<b>HANAR</b>i Carnes', ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67',
},
{
OrderID: 10251, CustomerID: '<b>VICTE</b>', EmployeeID: 3, OrderDate:
rue du Commerce',
},
{
OrderID: 10252, CustomerID: '<b>SUPRD</b>', EmployeeID: 4, OrderDate:
},
{
new Date(836937e6),
},
{
OrderID: 10254, CustomerID: '<b>CHOPS</b>', EmployeeID: 5, OrderDate:
'Hauptstr. 31',
},
{
OrderID: 10255, CustomerID: '<b>RICSU</b>', EmployeeID: 9, OrderDate:
'Starenweg 5',
},
{
OrderID: 10256, CustomerID: '<b>WELLI</b>', EmployeeID: 3, OrderDate:
new Date(837369e6),


},
{
OrderID: 10257, CustomerID: '<b>HILAA</b>', EmployeeID: 4, OrderDate:
},
{
OrderID: 10258, CustomerID: '<b>ERNSH</b>', EmployeeID: 1, OrderDate:
6',
},
]
DATASOURCE.TSX
{
OrderID: 10248, CustomerID: '<b>VINET</b>', EmployeeID: 5, OrderDate:
},
{
OrderID: 10249, CustomerID: '<b>TOMSP</b>', EmployeeID: 6, OrderDate:
new Date(836505e6),
'Luisenstr. 48',
},
{
},
{
OrderID: 10251, CustomerID: '<b>VICTE</b>', EmployeeID: 3, OrderDate:
rue du Commerce',
},

{
OrderID: 10252, CustomerID: '<b>SUPRD</b>', EmployeeID: 4, OrderDate:
},
{
new Date(836937e6),
},
{
OrderID: 10254, CustomerID: '<b>CHOPS</b>', EmployeeID: 5, OrderDate:
'Hauptstr. 31',
},
{
OrderID: 10255, CustomerID: '<b>RICSU</b>', EmployeeID: 9, OrderDate:
'Starenweg 5',
},
{
OrderID: 10256, CustomerID: '<b>WELLI</b>', EmployeeID: 3, OrderDate:
new Date(837369e6),
},
{
OrderID: 10257, CustomerID: '<b>HILAA</b>', EmployeeID: 4, OrderDate:
},
{
OrderID: 10258, CustomerID: '<b>ERNSH</b>', EmployeeID: 1, OrderDate:
6',
},
]

* The disableHtmlEncode property disables HTML encoding for the corresponding column in the grid.
* If the property is set to true, any HTML tags in the column's data will be displayed.
* If the property is set to false, the HTML tags will be removed and displayed as plain text.
* Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when
enabling this feature.
* If enableHtmlSanitizer property of grid is set to true, then the content is sanitized to prevent any
potential security vulnerabilities.
* You can also disable the disableHtmlEncode property of the column using getColumns method on
change event of Switch component.This is demonstrated in the below code snippet,
`typescript
const change = ((args:ChangeEventArgs) {
if (args.checked) {
grid.getColumns()[1].disableHtmlEncode = false;
} else {
grid.getColumns()[1].disableHtmlEncode = true;
}
grid.refresh();
});
`
Autowrap the grid content
The auto wrap feature allows the cell content in the grid to wrap to the next line when it exceeds the
boundary of the specified cell width. The cell content wrapping works based on the position of white
space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the
appropriate width for the columns. The column width defines the maximum width of a column and
helps to wrap the content automatically.
To enable auto wrap, set the allowTextWrap property to true. You can also configure the wrap mode by
setting the textWrapSettings.wrapMode property.
Grid provides the below three options for configuring:
• Both - This is the default value for wrapMode. With this option, both the grid Header and
Content text is wrapped.
• Header - With this option, only the grid header text is wrapped.
• Content - With this option, only the grid content is wrapped.
* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the
grid's width.
* If a column's header text contains no white space, the text may not be wrapped.

* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In
such cases, you can use the headerTemplate and template properties of the column to customize the
appearance of the header and cell content.
The following example demonstrates how to set the allowTextWrap property to true and specify the
wrap mode as Content by setting the textWrapSettings.wrapMode property. Also change the
textWrapSettings.wrapMode property to Content and Both on changing the dropdown value using
the change event of the DropDownList component.
APP.JSX
function App() {
const [wrapSettings, setWrapSettings] = useState({ wrapMode: 'Content' });
{ text: 'Content', value: 'Content' },
];
const valueChange = ((args) => {
const newWrapValue = { wrapMode: args.value };
setWrapSettings(newWrapValue);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the wrapmode of auto
wrap feature:</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100"
<GridComponent dataSource={inventoryData} height={315}
allowPaging={true} allowTextWrap={true} textWrapSettings={wrapSettings}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor' width='100'
/>
<ColumnDirective field='NumberofPatentFamilies' headerText='Number
of Patent Families' width='100' />
<ColumnDirective field='Country' headerText='Country' width='100'
/>
<ColumnDirective field='Mainfieldsofinvention' headerText='Main
fields of invention' width='140' />
</ColumnsDirective>
}
export default App;
APP.TSX
TextWrapSettingsModel } from '@syncfusion/ej2-react-grids';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-
react-dropdowns';

function App() {
const [wrapSettings, setWrapSettings] = useState<TextWrapSettingsModel>({
wrapMode: 'Content' });
const dropDownData: { [key: string]: Object; }[] = [
{ text: 'Content', value: 'Content' },
];
const valueChange = ((args: ChangeEventArgs) => {
const newWrapValue: TextWrapSettingsModel = { wrapMode: args.value };
setWrapSettings(newWrapValue);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the wrapmode of auto
wrap feature:</label>
allowPaging={true} allowTextWrap={true} textWrapSettings={wrapSettings}>
<ColumnsDirective>
/>
/>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
{
'Active': '1994-2016',
},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{

'Country': 'USA',
'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',
'Active': '1991-2016',
},
{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',
'Active': '2001-2016',
},
{
'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',


},
{
'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{
'Country': 'USA',
'Active': '1864(b)-1938(d)',
},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',
'Active': '1998-2016',
},
{
'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',


},
{
'Country': 'USA',
'Active': '2004-2016',
}
];
DATASOURCE.TSX
{
'Active': '1994-2016',
},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{
'Country': 'USA',
'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',

'Active': '1991-2016',
},
{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',
'Active': '2001-2016',
},
{
'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',
},
{
'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{

'Country': 'USA',
'Active': '1864(b)-1938(d)',
},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',
'Active': '1998-2016',
},
{
'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',
},
{
'Country': 'USA',
'Active': '2004-2016',
}
];
Customize cell styles

Customizing the grid cell styles allows you to modify the appearance of cells in the Grid control to meet
your design requirements. You can customize the font, background color, and other styles of the cells.
To customize the cell styles in the grid, you can use grid event, css, property or method support.

Using event
To customize the appearance of the grid cell, you can use the queryCellInfo event of the grid. This event
is triggered when each header cell is rendered in the grid, and provides an object that contains
information about the header cell. You can use this object to modify the styles of the header cell.
The following example demonstrates how to add a queryCellInfo event handler to the grid. In the event
handler, checked whether the current column is Freight field and then applied the appropriate CSS class
to the cell based on its value.
APP.JSX
function App() {
const customizeCell = (args) => {
if (args.column.field === "Freight") {
if (args.data[args.column.field] <= 30) {
args.cell.classList.add('below-30');
} else if (args.data[args.column.field] > 30 &&
args.data[args.column.field] < 80) {
} else {
args.cell.classList.add('above-80');
}
}
};
return (<div>
allowSelection={false} queryCellInfo={customizeCell}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" width="100"
<ColumnDirective field="CustomerID" headerText="Customer ID"
width="100" />
<ColumnDirective field="EmployeeID" headerText="Employee ID"
width="100" textAlign="Right" />
textAlign="Right" format="C2" />
<ColumnDirective field="ShipCountry" headerText="Ship Country"
width="100" />
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;
APP.TSX
QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
function App() {

const customizeCell = (args: QueryCellInfoEventArgs) => {

if (args.column.field === "Freight") {
if (args.data[args.column.field] <= 30) {
} else if (args.data[args.column.field] > 30 &&
args.data[args.column.field] < 80) {
} else {
args.cell.classList.add('above-80');
}
}
}
return (<div>
allowSelection={false}
queryCellInfo={customizeCell}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" width="100"
width="100" />
width="100" />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
* The queryCellInfo event is triggered for every cell of the grid, so it may impact the performance of the
grid whether used to modify a large number of cells.
Using CSS
You can apply styles to the cells using CSS selectors. The Grid provides a class name for each cell
element, which you can use to apply styles to that specific cell or cells in a particular column. The e-
rowcell class is used to style the row cells, and the e-selectionbackground class is used to change the
background color of the selected row.
`CSS
.e-grid td.e-cellselectionbackground {
background: #9ac5ee;
font-style: italic;
}
`
The following example demonstrates how to customize the appearance of a specific row in the grid on
selection using className.
APP.JSX
function App() {
const selectOptions = {
type: 'Multiple',
mode: 'Cell'
}
return (
<div>
<GridComponent dataSource={data} height={315}
selectionSettings={selectOptions}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100'
/>
<ColumnDirective field='CustomerID' headerText='CustomerID'
width='100' />
/>
<ColumnDirective field='ShipCountry' headerText='ShipCountry'
width='140' />
</ColumnsDirective>
}
export default App;

APP.TSX
SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
const selectOptions: SelectionSettingsModel = {
type: 'Multiple',
mode: 'Cell'
}
return (
<div>
<GridComponent dataSource={data} height={315}
selectionSettings={selectOptions}>
<ColumnsDirective>
/>
width='100' />
/>
width='140' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},

{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{


Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Using property
To customize the style of grid cells, define customAttributes property to the column definition object.
The customAttributes property takes an object with the name-value pair to customize the CSS
properties for grid cells. You can also set multiple CSS properties to the custom class using the
customAttributes property.
`CSS
.custom-css {
background: #d7f0f4;
font-style: italic;
color:navy
}
`
Here, setting the customAttributes property of the ShipCity column to an object that contains the CSS
class 'custom-css'. This CSS class will be applied to all the cells in the ShipCity column of the grid.
`typescript
<ColumnDirective field="OrderID" headerText="Order ID" customAttributes={class: 'custom-css'}
`
The following example demonstrates how to customize the appearance of the OrderID and ShipCity
columns using custom attributes.
APP.JSX
function App() {
return (<div>
allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID"
customAttributes={{class: 'custom-css'}} width="100" textAlign="Right" />
width="100" />
width="100" />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;

APP.TSX
function App() {
return (<div>
allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID"
width="100" />
width="100" />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Custom attributes can be used to customize any cell in the grid, including header and footer cells.

Using methods
The Grid provides below methods to customize the appearance of the grid columns header and cell:
1. getHeaderContent: The getHeaderContent method is used to customize the appearance of the

column header in the grid and accessing the header element using the querySelector method
and applying the style using the style property of the cell element.
2. getCellFromIndex: The getCellFromIndex method is used to customize the appearance of a
specific cell in the grid by specifying the index of the row and column for which you want to
customize the appearance.
The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex

methods to customize the appearance of the CustomerID column header and specific cell inside the
dataBound event of the grid.
APP.JSX
function App() {
let grid;
let header = grid.getHeaderContent().querySelector('.e-headercell');
header.style.backgroundColor = 'red';
header.style.color = 'white';
let cell = grid.getCellFromIndex(1, 2);
cell.style.background = '#f9920b';
cell.style.color = 'white';
});
return (
<div>
dataBound={dataBound}>
<ColumnsDirective>
/>
width='100' />
/>
width='140' />
</ColumnsDirective>
}
export default App;
APP.TSX


function App() {
let header = (grid as
GridComponent).getHeaderContent().querySelector('.e-headercell');
header.style.backgroundColor = 'red';
header.style.color = 'white';
let cell = (grid as GridComponent).getCellFromIndex(1, 2);
cell.style.background = '#f9920b';
cell.style.color = 'white';
});
return (
<div>
dataBound={dataBound}>
<ColumnsDirective>
/>
width='100' />
/>
width='140' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},

{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{


Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Make sure to pass the correct row and column indices to getCellFromIndex method, or else the
appearance of the wrong cell might get customized.
Clip mode
The clip mode feature is useful when you have a long text or content in a grid cell, which overflows the
cell's width or height. It provides options to display the overflow content by either truncating it,
displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting
clipMode property to one of the below available options.
There are three types of clipMode available:
• Clip: Truncates the cell content when it overflows its area.

• Ellipsis: Displays ellipsis when the cell content overflows its area.
• EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display
the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis
is applied.
The following example demonstrates, how to set the clipMode property to Clip for the Name of the
Inventor column, Ellipsis for the Number of Patent Families column, and EllipsisWithTooltip for the
Main Fields of Invention column, on changing the dropdown value using the change event of the
DropDownList component.
APP.JSX
import { ClipMode, ColumnDirective, ColumnsDirective, GridComponent } from
react-dropdowns';
function App() {
let grid;
{ text: 'Ellipsis', value: 'Ellipsis' },
{ text: 'Clip', value: 'Clip' },
{ text: 'EllipsisWithTooltip', value: 'EllipsisWithTooltip' }
];
grid.getColumnByField('Mainfieldsofinvention').clipMode = args.value ;
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}> Change the clip mode:
</label>
<GridComponent dataSource={inventoryData} height={315} ref={g => grid =
g} allowPaging={true}>
<ColumnsDirective>
/>


/>
</ColumnsDirective>
}
export default App;
APP.TSX
import { ClipMode, ColumnDirective, ColumnsDirective, GridComponent } from
react-dropdowns';
function App() {
{ text: 'Ellipsis', value: 'Ellipsis' },
{ text: 'Clip', value: 'Clip' },
{ text: 'EllipsisWithTooltip', value: 'EllipsisWithTooltip' }
];
(grid as
GridComponent).getColumnByField('Mainfieldsofinvention').clipMode =
args.value as ClipMode;
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}> Change the clip mode:
</label>
<GridComponent dataSource={inventoryData} height={315} ref={g => grid =
g} allowPaging={true}>
<ColumnsDirective>
/>
/>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
{


'Active': '1994-2016',
},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{
'Country': 'USA',
'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',
'Active': '1991-2016',
},
{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',

'Active': '2001-2016',
},
{
'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',
},
{
'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{
'Country': 'USA',
'Active': '1864(b)-1938(d)',
},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',


'Active': '1998-2016',
},
{
'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',
},
{
'Country': 'USA',
'Active': '2004-2016',
}
];
DATASOURCE.TSX
{
'Active': '1994-2016',
},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{
'Country': 'USA',


'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',
'Active': '1991-2016',
},
{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',
'Active': '2001-2016',
},
{
'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',
},

{
'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{
'Country': 'USA',
'Active': '1864(b)-1938(d)',
},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',
'Active': '1998-2016',
},
{
'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',
},
{


'Country': 'USA',
'Active': '2004-2016',
}
];
* By default, clipMode value is Ellipsis.

* If you set the width property of a column, the clip mode feature will be automatically applied to that
column if the content exceeds the specified width.
* Be careful when using the Clip mode, as it may result in important information being cut off. It is
generally recommended to use the Ellipsis or EllipsisWithTooltip modes instead.
Tooltip
The Syncfusion Grid allows you to display information about the grid columns to the user when they
hover over them with the mouse.
Render bootstrap tooltip in grid cells
The Grid component allows rendering Bootstrap tooltips in the cells. To enable this feature, you need to
add the Bootstrap link.
This is demonstrated in the sample code below which shows how to enable Bootstrap tooltip for the
CustomerID field using template in grid cells,
Step 1: Run the following command to install the Bootstrap package using npm.
`
npm install react-bootstrap
npm install bootstrap
`
Step 2: You need to import the below required files in your component.
`typescript
import Tooltip from 'react-bootstrap/Tooltip';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import 'bootstrap/dist/css/bootstrap.min.css';
`
Step 3: The following code demonstrates how to render Bootstrap tooltip for the CustomerID field with
template on grid cells,
`typescript
import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';

import Tooltip from 'react-bootstrap/Tooltip';

import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import 'bootstrap/dist/css/bootstrap.min.css';
const customerIDTemplate = (props:any) => {
return (
<div className="tooltip-container">
<div className="col-md-2" style={textAlign:"right"}>
<OverlayTrigger
data-placement="left"
overlay={<Tooltip id={tooltip-${props.CustomerID}}>{props.CustomerID}</Tooltip>}
<div>
<i className="fas fa-pencil-alt"></i>
{props.CustomerID}
</div>
</OverlayTrigger></div>
</div>
);
};
function App() {
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='100'
template={customerIDTemplate} />
<ColumnDirective field='Freight' headerText='Freight' width='100' format='C' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='140' />
</ColumnsDirective>
</GridComponent>
</div>

);
}
export default App;
`
The following screenshot represents the Bootstrap tooltip for the CustomerID field,
* The Bootstrap link must be import to the App.tsx file.

Display custom tooltip for columns
The Grid provides a feature to display custom tooltips for its columns using the EJ2 Tooltip component.
This allows you to provide additional information about the columns when the user hovers over them.
To enable custom tooltips for columns in the Grid, you can render the Grid control inside the Tooltip
component and set the target as .e-rowcell. This will display the tooltip when hovering over the grid
cells.
Change the tooltip content for the grid cells by using the following code in the beforeRender event.
`typescript
const beforeRender = (args: TooltipEventArgs) => {
if (args.target.classList.contains('e-rowcell')) {
// event triggered before render the tooltip on target element.
tooltip.content = 'This is value "' + args.target.innerText + '" ';
}
}
`
The following example demonstrates how to customize the tooltip content for the grid cells by using the
beforeRender event of the EJ2 Tooltip component.
APP.JSX


import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let toolTip;
const beforeRender = ((args) => {
toolTip.content = 'This is value "' + args.target.innerText + '" ';
}
});
return (
<div>
<TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender}
target=".e-rowcell">
<ColumnsDirective>
/>
width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C'
width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity'
width='120' />
</ColumnsDirective>
</GridComponent></TooltipComponent></div>)
}
export default App;
APP.TSX
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-
popups';
function App() {
let toolTip: TooltipComponent | null;
const beforeRender = ((args: TooltipEventArgs) => {
(toolTip as TooltipComponent).content = 'This is value "' +
args.target.innerText + '" ';
}
});
return (
<div>
<TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender}
target=".e-rowcell">
<ColumnsDirective>
/>


width='120' />
width='80' />
width='120' />
</ColumnsDirective>
</GridComponent></TooltipComponent></div>)
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Grid lines
The gridLines in a grid are used to separate the cells with horizontal and vertical lines for better
readability. You can enable the grid lines by setting the gridLines property to one of the following values:
| Modes | Actions |
|-------|---------|
| Both | Displays both the horizontal and vertical grid lines.|
| None | No grid lines are displayed.|
| Horizontal | Displays the horizontal grid lines only.|
| Vertical | Displays the vertical grid lines only.|
| Default | Displays grid lines based on the theme.|

The following example demonstrates how to set the gridLines property based on changing the
dropdown value using the change event of the DropDownList component.
APP.JSX
function App() {
const [gridLine, setGridLine] = useState('Default');
{ text: 'Default', value: 'Default' },
{ text: 'None', value: 'None' }
];
setGridLine(args.value);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the grid
lines:</label>
gridLines={gridLine}>
<ColumnsDirective>
/>
/>
</ColumnsDirective>
}
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, GridLine } from
react-dropdowns';
function App() {
const [gridLine, setGridLine] = useState<GridLine>('Default');
const dropDownData: any = [
{ text: 'Default', value: 'Default' },


{ text: 'None', value: 'None' }
];
setGridLine(args.value);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the grid
lines:</label>
gridLines={gridLine}>
<ColumnsDirective>
/>
/>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
{
'Active': '1994-2016',
},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{
'Country': 'USA',

'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',
'Active': '1991-2016',
},
{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',
'Active': '2001-2016',
},
{
'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',
},
{


'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{
'Country': 'USA',
'Active': '1864(b)-1938(d)',
},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',
'Active': '1998-2016',
},
{
'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',
},
{

'Country': 'USA',
'Active': '2004-2016',
}
];
DATASOURCE.TSX
{
'Active': '1994-2016',
},
{
'Country': 'Japan',
'Active': '1976-2016',
},
{
'Country': 'USA',
'Active': '1977-2016',
},
{
'Active': '2000-2016',
},
{
'Country': 'India',
'Active': '1991-2016',
},

{
'Country': 'Japan',
'Active': '1991-2016',
displays, OLED',
},
{
'Country': 'USA',
'Active': '2001-2016',
},
{
'Active': '1991-2016',
},
{
'Country': 'USA',
'Active': '1847(b)-1931(d)',
},
{
'Country': 'USA',
'Active': '1976-2015',
},
{
'Active': '1882(b)-1961(d)',
},
{
'Country': 'USA',
'Active': '1864(b)-1938(d)',


},
{
'Country': 'USA',
'Active': '1895(b)-1963(d)',
},
{
'Country': 'USA',
'Active': '1998-2016',
},
{
'Country': 'USA',
'Active': '1996-2016',
},
{
'Country': 'USA',
'Active': '1850(b)-19??(d)',
},
{
'Country': 'USA',
'Active': '2004-2016',
}
];
By default, the grid renders with Default mode.

See also
• How to customize the header cell styles using methods

Link to the VideoGrid Edit in React Grid component
Edit in React Grid component

The Grid component provides powerful options for dynamically inserting, deleting, and updating
records, enabling you to modify data directly within the grid. This feature is useful when you want to
enable you to perform CRUD (Create, Read, Update, Delete) operations seamlessly.
To enable editing functionality directly within the grid, you need to configure the allowEditing,
allowAdding, and allowDeleting properties within the editSettings to true.
Editing feature requires a primary key column for CRUD operations. To define the primary key, set
isPrimaryKey to true in particular column.
You can start the edit action either by double clicking the particular row or by selecting the required row
and click on Edit button in the toolbar. Similarly, you can add a new record to grid either by clicking on
Add button in the toolbar or on an external button which is bound to invoke the addRecord method of
the grid, Save and Cancel while in edit mode is possible using respective toolbar icon in grid. Deletion of
the record is possible by selecting the required row and click on Delete button in the toolbar.
To use CRUD, inject the EditLink to the Video module into the grid.
To learn about what are all the edit modes and edit types are available in React Grid, you can check on
this video
APP.JSX
import { Edit, Inject } from '@syncfusion/ej2-react-grids';
function App() {
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting:
true };
const orderIDRules = { required: true, number: true };
const customerIDRules = { required: true };
const freightRules = { required: true, min: 1, max: 1000 };
return <GridComponent dataSource={data} editSettings={editOptions}
height={315}>
<ColumnsDirective>
textAlign="Right" isPrimaryKey={true} validationRules={orderIDRules} />
width='120' validationRules={customerIDRules} />
format="C2" textAlign="Right" validationRules={freightRules} />
width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX

import { Edit, EditSettingsModel, Inject } from '@syncfusion/ej2-react-

grids';
function App() {
const orderIDRules: Object = { required: true, number: true };
const customerIDRules: Object = { required: true };
const freightRules: Object = { required: true, min: 1, max: 1000 };
height={315}>
<ColumnsDirective>
width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{


rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{


6',
},
{
},
{
},
{
},
{
}
];
DATASOURCE.TSX
{
},
{


'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{


},
{
},
{
6',
},
{
},
{
},
{
},
{
}];

* If isIdentity is enabled, then it will be considered as a read-only column when editing and adding a
record.
* You can disable editing for a particular column, by specifying allowEditing to false.
* You can use the Insert key to add a new row to the grid and use the Delete key to delete the selected
row from the grid.
Toolbar with edit option
The toolbar with edit option feature in the Grid component provides a built-in toolbar that includes
various items for executing editing actions. This feature allows you to easily perform edit operations on
the grid data, such as modifying cell values, updating changes, and canceling edits.
To enable this feature, you need to configure the toolbar property of the Grid component. This property
allows you to define the items that will be displayed in the grid toolbar. By including the relevant items
like Edit, Add, Delete, Update, and Cancel within the toolbar property, you can enable the edit options
in the toolbar.
Here's an example of how to enable the toolbar with edit option in the Grid:
APP.JSX
import { Edit, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
function App() {
true };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const freightRules = { required: true, number: true };
const shipCountryrules = { required: true };
toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
width='150' validationRules={shipCountryrules} />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GridComponent>;
};
export default App;
APP.TSX

import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems } from

function App() {
'Cancel'];
const freightRules: Object = { required: true, number: true };
const shipCountryrules: Object = { required: true };
<ColumnsDirective>
width='150' validationRules={shipCountryrules} />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',

},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},

{
6',
},
{
},
{
},
{
},
{
}
];
DATASOURCE.TSX
{
},
{


'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{


},
{
},
{
6',
},
{
},
{
},
{
},
{
}];

Disable editing for particular column

In Grid component, you have an option to disable editing for a specific column. This feature is useful
when you want to prevent editing certain columns, such as columns that contain calculated values or
read-only data.
To disable editing for a particular column, you can use the allowEditing property of the columns object.
By setting this property to false, you can prevent editing for that specific column.
Here's an example that demonstrates how to disable editing for the column in the Grid:
APP.JSX
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'
import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, Page }
function App() {
let grid;
let currentColumn;
true };
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const editparams = { params: { popupHeight: '300px' } };
const alignmentData = [
{ text: 'Order ID', value: 'OrderID' },
{ text: 'Customer ID', value: 'CustomerID' },
{ text: 'Freight', value: 'Freight' },
{ text: 'Order Date', value: 'OrderDate' },
{ text: 'Ship Country', value: 'ShipCountry' },
];
const dropdownFields = { text: 'text', value: 'value' };
const changeAlignment = (args) => {
// Reset the allowEditing property of the previously selected column
if (currentColumn) {
currentColumn.allowEditing = true;
}
// Update the 'allowEditing' property for the selected column
currentColumn = grid.getColumnByField(args.value);
currentColumn.allowEditing = false;
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}> Select column to disable
editing:</label>
<DropDownListComponent index={0} width={150} dataSource={alignmentData}
fields={dropdownFields} change={changeAlignment}></DropDownListComponent>
<GridComponent ref={g => grid = g} dataSource={data}
editSettings={editOptions} toolbar={toolbar} height={315} allowPaging={true}
<ColumnsDirective>


format="C2" textAlign="Right" validationRules={freightRules}
editType='numericedit' />
format='yMd' editType='datepickeredit' />
width='150' editType='dropdownedit' edit={editparams} />
</ColumnsDirective>
<Inject services={[Edit, Page, Toolbar]} />
};
export default App;
APP.TSX
react-dropdowns'
import { Column, ColumnDirective, ColumnsDirective, GridComponent,
PageSettingsModel, Toolbar, ToolbarItems, Page } from '@syncfusion/ej2-react-
grids';
grids';
function App() {
let currentColumn: Column;
const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update',
'Cancel'];
const alignmentData: { [key: string]: Object; }[] = [
{ text: 'Order Date', value: 'OrderDate' },
{ text: 'Ship Country', value: 'ShipCountry' },
];
const dropdownFields: Object = { text: 'text', value: 'value' };
const changeAlignment = (args: ChangeEventArgs) => {
// Reset the allowEditing property of the previously selected column
if (currentColumn) {
currentColumn.allowEditing = true;
}
// Update the 'allowEditing' property for the selected column
currentColumn = (grid as GridComponent).getColumnByField(args.value) as
Column;
currentColumn.allowEditing = false;
}

return (<div>
<label style={{ padding: "30px 17px 0 0" }}> Select column to disable
editing:</label>
<DropDownListComponent index={0} width={150} dataSource={alignmentData}
fields={dropdownFields} change={changeAlignment}></DropDownListComponent>
editSettings={editOptions} toolbar={toolbar} height={315} allowPaging={true}
<ColumnsDirective>
format='yMd' editType='datepickeredit' />
width='150' editType='dropdownedit' edit={editparams} />
</ColumnsDirective>
<Inject services={[Edit, Page, Toolbar]} />
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{


rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{


6',
},
{
},
{
},
{
},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',


},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{


},
{
},
{
6',
},
{
},
{
},
{
},
{
}];
* If you have set the isPrimaryKey property to true for a column, editing will be automatically disabled
for that column.
* You can disble the particular row using actionBegin event.please refer this link.

* You can disble the particular cell using cellEdit event.please refer this link.
Editing template column
The editing template column feature in the Grid allows you to create custom editing templates for
specific columns in the grid. This feature is particularly useful when you need to customize the editing
experience for certain columns, such as using custom input controls or displaying additional information
during editing.
To enable the editing template column feature, you need to define the field property for the specific
column in the grid's configuration. The field property maps the column to the corresponding field name
in the data source, allowing you to edit the value of that field.
In the below demo, the ShipCountry column is rendered with the template.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar,
ToolbarItems } from '@syncfusion/ej2-react-grids';
grids';
function App() {
true };
const template = (props) => {
return (
<a href='#'>{props.ShipCountry}</a>
)
}
return (<div>
<GridComponent dataSource={data} editSettings={editOptions}
toolbar={toolbar} height={315}>
<ColumnsDirective>
width='150' editType='dropdownedit' template={template} />
</ColumnsDirective>
};
export default App;
APP.TSX


grids';
function App() {
'Cancel'];
const template = (props: any) => {
return (
<a href='#'>{props.ShipCountry}</a>
)
}
return (<div>
<GridComponent dataSource={data} editSettings={editOptions}
toolbar={toolbar} height={315}>
<ColumnsDirective>
width='150' editType='dropdownedit' template={template} />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',

},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},

{
},
{
6',
},
{
},
{
},
{
},
{
}
];
DATASOURCE.TSX
{


},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{


'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{
},
{


}];
Customize delete confirmation dialog

Customizing the delete confirmation dialog in Grid allows you to personalize the appearance, content,
and behavior of the dialog that appears when you attempts to delete an item. You can modify
properties like header, showCloseIcon, and height to tailor the edit dialog to your specific requirements.
Additionally, you can override default localization strings to provide custom text for buttons or other
elements within the dialog.
To customize the delete confirmation dialog, you can utilize the toolbarClick event. This event is
triggered when a toolbar item, such as the delete button, is clicked.
* To enable the confirmation dialog for the delete operation in the Grid, you can set the
showDeleteConfirmDialog property of the editSettings configuration to true.
* You can refer the Grid Default text list for more localization.
The following example that demonstrates how to customize the delete confirmation dialog using the
toolbarClick event:
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar } from
L10n.load({
'en-US': {
grid: {
'OKButton': 'YES',
'CancelButton': 'Discard',
'ConfirmDelete': 'Are you sure you want to delete the selected Record?'
}
}
});
function App() {
let grid;
true, showDeleteConfirmDialog: true };
const toolbarClick = (args) => {
if (args.item.properties.text === 'Delete') {
const dialogObj = grid.editModule.dialogObj;
dialogObj.header = 'Delete Confirmation Dialog';
dialogObj.showCloseIcon = true;
}
}
return (<div>


editSettings={editOptions} toolbar={toolbar} height={315}
toolbarClick={toolbarClick}>
<ColumnsDirective>
width='120' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-react-navigations'
grids';
L10n.load({
'en-US': {
grid: {
'OKButton': 'YES',
'CancelButton': 'Discard',
'ConfirmDelete': 'Are you sure you want to delete the selected Record?'
}
}
});
function App() {
true, allowDeleting: true, showDeleteConfirmDialog: true };
'Cancel'];
const toolbarClick = (args: ClickEventArgs) => {
if (args.item.properties.text === 'Delete') {
const dialogObj = (grid as GridComponent).editModule.dialogObj;
dialogObj.header = 'Delete Confirmation Dialog';
dialogObj.showCloseIcon = true;
}
}
return (<div>
editSettings={editOptions} toolbar={toolbar} height={315}
toolbarClick={toolbarClick}>
<ColumnsDirective>


width='120' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{

},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},

{
},
{
},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{


rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{


6',
},
{
},
{
},
{
},
{
}];
Update boolean column value with a single click

The Syncfusion Grid allows you to update a boolean column value with a single click in the normal mode
of editing. This feature streamlines the process of toggling boolean values within the grid, enhancing
interaction and efficiency. This can be achieved through the use of the column template feature.
In the following sample, the CheckBox component is rendered as a template in the Verified column to
make it editable with a single click.
APP.JSX
function App() {


true };
const verifiedRules = { required: true };
const dateRules = { required: true };
return (<div>
<CheckBoxComponent checked={props.Verified}></CheckBoxComponent>
</div>)
}
return (<div>
<GridComponent id='Grid' dataSource={data} editSettings={editOptions}
<ColumnsDirective>
validationRules={orderIDRules} width='100' textAlign="Right"
isPrimaryKey={true} />
format='yMd' editType='datepickeredit' validationRules={dateRules} />
format="C2" editType='numericedit' textAlign="Right"
validationRules={freightRules} />
width='150'validationRules={verifiedRules} template={template} />
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {
'Cancel'];
const orderIDRules: object = { required: true, number: true };
const customerIDRules: object = { required: true };
const freightRules: object = { required: true, min: 1, max: 1000 };
const verifiedRules: object = { required: true };
const dateRules: object = { required: true };
return (<div>

<CheckBoxComponent checked={props.Verified}></CheckBoxComponent>
</div>)
}
return (<div>
<ColumnsDirective>
format='yMd' editType='datepickeredit' validationRules={dateRules} />
format="C2" editType='numericedit' textAlign="Right"
validationRules={freightRules} />
<ColumnDirective field='Verified' headerText='Verified' width='150'
validationRules={verifiedRules} template={template} />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{


rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{


6',
},
{
},
{
},
{
},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',


},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{


},
{
},
{
6',
},
{
},
{
},
{
},
{
}];
Edit enum column

The Syncfusion Grid provides a feature that allows you to edit enum type data in a grid column. This is
particularly useful when you need to edit enumerated list data efficiently.

In the following example, the DropDownList component is rendered within the editTemplate for the
Employee Feedback column using template. The enumerated list data can be bound to the Employee
Feedback column using the two-way binding (@bind-Value).
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, SaveEventArgs }
function App() {
let details = data;
let orderData;
true };
const dropdownFields = { text: 'FeedbackDetails', value: 'FeedbackDetails'
};
const dropDownEnumValue = Object.keys(Feedback).filter((key) =>
!isNaN(Number((Feedback)[key])));
const actionBegin = (args) => {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
orderData = Object.assign({}, args.rowData);
}
if (args.requestType === 'save') {
orderData['FeedbackDetails'] = args.data['FeedbackDetails'];
}
}
const editTemplate = () => {
return (
<div>
<DropDownListComponent id='FeedbackDetails'
dataSource={dropDownEnumValue} fields={dropdownFields}
value={orderData.FeedbackDetails} popupHeight={150}></DropDownListComponent>
</div>
)
}
return (<div>
<GridComponent id='Grid' dataSource={details} editSettings={editOptions}
toolbar={toolbarOptions} height={315} actionBegin={actionBegin}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Employee Name'
width='120' />
<ColumnDirective field='FeedbackDetails' headerText='Employee
Feedback' width='150' editTemplate={editTemplate} />
</ColumnsDirective>
};
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, SaveEventArgs }
export interface EmployeeDetails {
OrderID: number;
CustomerID: string;
FeedbackDetails: Feedback;
}
export enum Feedback {
Positive = 0,
Negative = 1,
}
function App() {
let details: EmployeeDetails[] = data as EmployeeDetails[];
let orderData: EmployeeDetails;
'Cancel'];
const orderIDRules: object = { required: true, number: true };
const dropdownFields: Object = { text: 'FeedbackDetails', value:
'FeedbackDetails' };
const dropDownEnumValue: string[] = Object.keys(Feedback).filter((key:
string) => !isNaN(Number((Feedback)[key])));
const actionBegin = (args: SaveEventArgs) => {
}
orderData['FeedbackDetails'] = (args.data as
EmployeeDetails)['FeedbackDetails'];
}
}
return (
<div>
<DropDownListComponent id='FeedbackDetails'
dataSource={dropDownEnumValue} fields={dropdownFields}
value={orderData.FeedbackDetails} popupHeight={150}></DropDownListComponent>
</div>
)
}
return (<div>
<GridComponent id='Grid' dataSource={details} editSettings={editOptions}
<ColumnsDirective>

<ColumnDirective field='CustomerID' headerText='Employee Name'

width='120' />
<ColumnDirective field='FeedbackDetails' headerText='Employee
Feedback' width='150' editTemplate={editTemplate} />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Freight: 32.38, FeedbackDetails: "Negative"
},
{
'Luisenstr. 48',
Freight: 11.61, FeedbackDetails: "Positive"
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{


'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
OrderID: 10255, CustomerID: 'RICSU ', Role: 'Admin', EmployeeID: 9,
'Starenweg 5',
},
{
},
{
'Venezuela', Freight: 81.91, FeedbackDetails: "Negative"
},
{
6',
},
{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Manager', EmployeeID: 4,
},
{


},
{
},
{
}];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',

},
{
},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
OrderID: 10255, CustomerID: 'RICSU ', Role: 'Admin', EmployeeID: 9,
'Starenweg 5',
},
{
},
{
'Venezuela', Freight: 81.91, FeedbackDetails: "Negative"
},
{
6',
},

{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Manager', EmployeeID: 4,
},
{
},
{
},
{
}];
Edit complex column

The edit template for complex column in Grid is used to customize the editing experience when dealing
with complex data structures. This capability is particularly useful for handling nested data objects
within grid columns. By default, the grid binds complex data to column fields using the dot (.) operator.
However, when you render custom elements, such as input fields, in the edit template for a complex
column, you must use the (_) underscore operator instead of the dot (.) operator to bind the complex
object.
In the following sample, the input element is rendered in the edit template of the FirstName and
LastName column. The edited changes can be saved using the name property of the input element.
Since the complex data is bound to the FirstName and LastName column, The name property should be
defined as NameFirstName and NameLastName, respectively, instead of using the dot notation
(Name.FirstName and Name.LastName).
APP.JSX
import { complexData } from './datasource';

function App() {
true };
const firstNameTemplate = (props) => {
return (
<div>
<input className='e-input' name='Name___FirstName' type='text'
id='Name___FirstName' defaultValue={props.Name.FirstName} />
</div>
)
}
const lastNameTemplate = (props) => {
return (
<div>
<input className='e-input' name='Name___LastName' type='text'
id='Name___LastName' defaultValue={props.Name.LastName} />
</div>
)
}
return (<div>
<GridComponent id='Grid' dataSource={complexData}
editSettings={editOptions}
toolbar={toolbarOptions} height={315} >
<ColumnsDirective>
width='100' textAlign="Right" isPrimaryKey={true} />
<ColumnDirective field='Name.FirstName' headerText='First Name'
width='120' editTemplate={firstNameTemplate} />
<ColumnDirective field='Name.LastName' headerText='Last Name'
width='150' editTemplate={lastNameTemplate} />
<ColumnDirective field='Title' headerText='Title' width='120' />
</ColumnsDirective>
};
export default App;
APP.TSX
import { complexData } from './datasource';
function App() {
true, allowDeleting: true};
'Cancel'];
const firstNameTemplate =(props) =>{
return(
<div>
<input className='e-input' name='Name___FirstName' type='text'
id='Name___FirstName' defaultValue={props.Name.FirstName} />

</div>
)
}
const lastNameTemplate = (props) =>{
return(
<div>
<input className='e-input' name='Name___LastName' type='text'
id='Name___LastName' defaultValue={props.Name.LastName} />
</div>
)
}
return (<div>
<GridComponent id='Grid' dataSource={complexData}
toolbar={toolbarOptions} height={315} >
<ColumnsDirective>
<ColumnDirective field='Name.FirstName' headerText='First Name'
width='120' editTemplate={firstNameTemplate} />
<ColumnDirective field='Name.LastName' headerText='Last Name'
width='150' editTemplate={lastNameTemplate}/>
<ColumnDirective field='Title' headerText='Title' width='120' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let complexData = [{
'EmployeeID': 1,
'Name': {
'LastName': 'Davolio',
'FirstName': 'Nancy'
},
'Names': [{
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State
University in 1970. She also completed\

\'The Art of the Cold Call.\' Nancy is a member of Toastmasters

International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name': {
'LastName': 'Fuller',
'FirstName': 'Andrew'
},
'Names': [{
}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in
international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He
joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of
sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the
Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name': {
'LastName': 'Leverling',
'FirstName': 'Janet'
},
'Names': [{
}],
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',

'HomePhone': '(206) 555-3412',

'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984).
\
She has also completed a certificate program in food retailing
management.\
Janet was hired as a sales associate in 1991 and promoted to sales
representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name': {
'LastName': 'Peacock',
'FirstName': 'Margaret'
},
'Names': [{
}],
'TitleOfCourtesy': 'Mrs.',
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia
College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office
temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name': {
'LastName': 'Buchanan',
'FirstName': 'Steven'
},
'Names': [{
}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'Address': '14 Garrett Hill',
'City': 'London',

'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University,
Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation
program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr.
Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in
French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name': {
'LastName': 'Suyama',
'FirstName': 'Michael'
},
'Names': [{
}],
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics,
1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural
Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'Name': {
'LastName': 'King',
'FirstName': 'Robert'
},
'Names': [{

}],
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively
before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After
completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'Name': {
'LastName': 'Callahan',
'FirstName': 'Laura'
},
'Names': [{
}],
'Title': 'Inside Sales Coordinator',
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of
Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'Name': {
'LastName': 'Dodsworth',
'FirstName': 'Anne'
},
'Names': [{

}],
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She
is fluent in French and German.',
'ReportsTo': 5,
}];
DATASOURCE.TSX
export let complexData: Object[] = [{
'EmployeeID': 1,
'Name': {
},
'Names': [{
}],
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'Name': {

},
'Names': [{
}],
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'Name': {
},
'Names': [{
}],
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
\
management.\
'ReportsTo': 2,

},
{
'EmployeeID': 4,
'Name': {
},
'Names': [{
}],
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 5,
'Name': {
},
'Names': [{
}],
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },


French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'Name': {
'FirstName': 'Michael'
},
'Names': [{
}],
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'Name': {
'LastName': 'King',
'FirstName': 'Robert'
},
'Names': [{
}],
'City': 'London',
'Region': null,
'Country': 'UK',

'HomePhone': '(71) 555-5598',

'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'Name': {
'FirstName': 'Laura'
},
'Names': [{
}],
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'Name': {
'FirstName': 'Anne'
},
'Names': [{
}],
'City': 'London',
'Region': null,

'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
Edit foreign key column

The Syncfusion Grid offers a powerful editing feature for foreign key columns, enhancing the default
rendering of the DropDownList component during editing. This flexibility is particularly useful when you
need to customize the editor for foreign key columns. By default, the Syncfusion Grid renders the
DropDownList component as the editor for foreign key columns during editing. However, you can
enhance and customize this behavior by leveraging the editTemplate property for the column using
template. The editTemplate property allows you to specify a cell edit template that serves as an editor
for a particular column, accepting either a template string or an HTML element ID.
In the following code example, the Employee Name is a foreign key column. When editing, the
ComboBox component is rendered instead of DropDownList.
APP.JSX
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent } from
import { data, employeeData } from './datasource';
function App() {
let orderData;
true };
const orderIDRules = { required: true };
const comboFields = { text: 'FirstName', value: 'EmployeeID' };
{ FirstName: 'Nancy', EmployeeID: 1 },
{ FirstName: 'Andrew', EmployeeID: 6 },
{ FirstName: 'Janet', EmployeeID: 3 },
{ FirstName: 'Margaret', EmployeeID: 4 },
{ FirstName: 'Steven', EmployeeID: 5 },
{ FirstName: 'Laura', EmployeeID: 8 }
];
}
orderData['EmployeeID'] = args.data['EmployeeID'];
}
}
return (

<div>
<ComboBoxComponent id='EmployeeID' dataSource={dropDownData}
fields={comboFields} value={orderData.EmployeeID}></ComboBoxComponent>
</div>
)
}
return (<div>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee Name'
width='120' foreignKeyValue='FirstName' dataSource={employeeData}
editTemplate={editTemplate} />
width='150' format='yMd' editType='datepickeredit' />
format='C2' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, ForeignKey]} />
};
export default App;
APP.TSX
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent,
SaveEventArgs } from '@syncfusion/ej2-react-grids';
export interface columnDataType {
OrderID: number,
Freight: number,
ShipCity: string,
EmployeeID: number,
ShipCountry: string,
ShipAddress: string,
OrderDate: Date
}
function App() {
let orderData: Object | any;
'Cancel'];
const orderIDRules: object = { required: true };
const comboFields: Object = { text: 'FirstName', value: 'EmployeeID' };
{ FirstName: 'Nancy', EmployeeID: 1 },
{ FirstName: 'Andrew', EmployeeID: 6 },
{ FirstName: 'Janet', EmployeeID: 3 },

{ FirstName: 'Margaret', EmployeeID: 4 },

{ FirstName: 'Steven', EmployeeID: 5 },
{ FirstName: 'Laura', EmployeeID: 8 }
];
const actionBegin = (args: SaveEventArgs) => {
}
orderData['EmployeeID'] = (args.data as columnDataType)['EmployeeID'];
}
}
return (
<div>
<ComboBoxComponent id='EmployeeID' dataSource={dropDownData}
fields={comboFields} value={orderData.EmployeeID}></ComboBoxComponent>
</div>
)
}
return (<div>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee Name'
width='120' foreignKeyValue='FirstName' dataSource={employeeData}
editTemplate={editTemplate} />
format='C2' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004',
ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
export let employeeData = [{
'EmployeeID': 1,
'FirstName': 'Nancy',


'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },

International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'FirstName': 'Andrew',
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },

Dallas in 1981. He is fluent in French and Italian and reads German.
He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president
of sales in March 1993. Andrew is a member of the \
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'FirstName': 'Janet',
'City': 'Kirkland',
'Region': 'WA',

'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College

(1984). \
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,
'FirstName': 'Margaret',
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },

Institute of Culinary Arts (1966). She was assigned to the London
office temporarily from July through November 1992.',
'ReportsTo': 2,
},
{
'EmployeeID': 5,
'FirstName': 'Steven',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },


Telemarketing\' and \'International Sales Management.\' He is fluent
in French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'FirstName': 'Michael',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },

(MBA, marketing, 1986). He has also taken the courses \'Multi-
Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese,
and Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled

extensively before completing his degree in English at the \

University of Michigan in 1992, the year he joined the company.

After completing a course entitled \'Selling in Europe,\' \
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'FirstName': 'Laura',
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },

'ReportsTo': 2,
},
{
'EmployeeID': 9,
'FirstName': 'Anne',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College.

She is fluent in French and German.',
'ReportsTo': 5,
}];
DATASOURCE.TSX
{


Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },

International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },

Dallas in 1981. He is fluent in French and Italian and reads German.
He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president
of sales in March 1993. Andrew is a member of the \
'ReportsTo': 0,

},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },

(1984). \
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },

Institute of Culinary Arts (1966). She was assigned to the London
office temporarily from July through November 1992.',
'ReportsTo': 2,
},
{
'EmployeeID': 5,

'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },

Telemarketing\' and \'International Sales Management.\' He is fluent
in French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },

(MBA, marketing, 1986). He has also taken the courses \'Multi-
Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese,
and Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',


'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },

University of Michigan in 1992, the year he joined the company.
After completing a course entitled \'Selling in Europe,\' \
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },

'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },


'ReportsTo': 5,
}];
How to perform CRUD action externally

Performing CRUD (Create, Read, Update, Delete) actions externally in the Syncfusion Grid allows you to
manipulate grid data outside the grid itself. This can be useful in scenarios where you want to manage
data operations programmatically.
Using separate toolbar
The Syncfusion Grid enables external CRUD operations, allowing you to efficiently manage data
manipulation within the grid. This capability is particularly useful when you need to manage data
operations using a separate toolbar.
To perform CRUD operations externally, the following methods are available:
addRecord - To add a new record. If no data is passed then add form will be shown.
startEdit - To edit the selected row.
deleteRecord - To delete a selected row.
endEdit - If the grid is in editable state, then you can save a record by invoking this method.
closeEdit - To cancel the edited state.
The following example demonstrates the integration of the Syncfusion Grid with a separate toolbar for
external CRUD operations. The toolbar contains buttons for Add, Edit, Delete, Update, and Cancel.
APP.JSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
function App() {
let grid;
true };
const orderIDRules = { required: true, };
const freightRules = { required: true };
const ontoolbarClick = (args) => {
switch (args.item.id) {
case 'add':
grid.addRecord();
break;
case 'edit':
grid.startEdit();

break;
case 'delete':
grid.deleteRecord();
break;
case 'update':
grid.endEdit();
break;
case 'cancel':
grid.closeEdit();
break;
}
}
return (<div>
<div>
<ToolbarComponent clicked={ontoolbarClick}>
<ItemsDirective>
<ItemDirective text="Add" id="add"></ItemDirective>
<ItemDirective text="Edit" id="edit"></ItemDirective>
<ItemDirective text="Delete" id="delete"></ItemDirective>
<ItemDirective text="Update" id="update"></ItemDirective>
<ItemDirective text="Cancel" id="cancel"></ItemDirective>
</ItemsDirective>
</ToolbarComponent>
</div>
<GridComponent id='Grid' ref={g => grid = g} dataSource={data}
height={315} allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
format='C2' editType='numericedit' validationRules={freightRules} />
<ColumnDirective field='ShipCountry' headerText='Order Date'
width='150' format='yMd' editType='dropdownedit' edit={editparams} />
</ColumnsDirective>
};
export default App;
APP.TSX
import { ClickEventArgs, ItemDirective, ItemsDirective, ToolbarComponent }
from '@syncfusion/ej2-react-navigations';
import { Edit, EditSettingsModel, Inject, Toolbar } from '@syncfusion/ej2-
react-grids';
function App() {


const orderIDRules: object = { required: true, };
const customerIDRules: object = { required: true };
const freightRules: object = { required: true };
const editparams: object = { params: { popupHeight: '300px' } };
const ontoolbarClick = (args: ClickEventArgs) => {
switch (args.item.id) {
case 'add':
(grid as GridComponent).addRecord();
break;
case 'edit':
(grid as GridComponent).startEdit();
break;
case 'delete':
(grid as GridComponent).deleteRecord();
break;
case 'update':
(grid as GridComponent).endEdit();
break;
case 'cancel':
(grid as GridComponent).closeEdit();
break;
}
}
return (<div>
<div>
<ToolbarComponent clicked={ontoolbarClick}>
<ItemsDirective>
<ItemDirective text="Add" id="add"></ItemDirective>
<ItemDirective text="Edit" id="edit"></ItemDirective>
<ItemDirective text="Delete" id="delete"></ItemDirective>
<ItemDirective text="Update" id="update"></ItemDirective>
<ItemDirective text="Cancel" id="cancel"></ItemDirective>
</ItemsDirective>
</ToolbarComponent>
</div>
height={315} allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
format='C2' editType='numericedit' validationRules={freightRules} />
width='150' format='yMd' editType='dropdownedit' edit={editparams} />
</ColumnsDirective>

};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{


Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Using external form

Performing the edit operation in a custom external form in the Syncfusion Grid is a valuable feature
when you need to customize the edit operation within a separate form rather than the default in-grid
editing.
To enable the use of an external form for editing in Syncfusion Grid, you can make use of the
RowSelected property. This property specifies whether the edit operation should be triggered when a
row is selected.
In the following example, it demonstrates how to edit the form using an external form by utilizing the
RowSelected property:
APP.JSX
import { NumericTextBoxComponent, TextBoxComponent } from '@syncfusion/ej2-
react-inputs';
RowSelectEventArgs } from '@syncfusion/ej2-react-grids';
react-grids';
function App() {
let grid;
const editOptions = { allowEditing: true };
const [selectedProduct, setSelectedProduct] = useState(new Order());

const dropdown= [
{ shipCountry: 'Germany' },
{ shipCountry: 'Brazil' },
{ shipCountry: 'France' },
{ shipCountry: 'Belgium' },
{ shipCountry: 'Switzerland' },
{ shipCountry: 'Venezuela' },
{ shipCountry: 'USA' },
{ shipCountry: 'Mexico' },
{ shipCountry: 'Italy' },
{ shipCountry: 'Sweden' },
{ shipCountry: 'Finland' },
{ shipCountry: 'Spain' },
{ shipCountry: 'Canada' },
{ shipCountry: 'Portugal' },
{ shipCountry: 'Denmark' },
{ shipCountry: 'Austria' },
{ shipCountry: 'UK' },
{ shipCountry: 'Ireland' },
{ shipCountry: 'Norway' },
{ shipCountry: 'Argentina' },
];
const dropdownFields = { text: 'shipCountry', value: 'shipCountry' };
const handleInputChange = (field, value) => {
setSelectedProduct((prevProduct) => ({ ...prevProduct, [field]: value
}));
};
const save = () => {
const index = grid.getSelectedRowIndexes()[0];
grid.updateRow(index, selectedProduct);
}
const rowSelected = (args) => {
setSelectedProduct(args.data);
}
return (<div className='row'>
<div className="col-xs-6 col-md-3">
<div>
<div className="form-row">
<div className="form-group col-md-12">
<label >OrderID</label>
<input className="form-control"
defaultValue={selectedProduct.OrderID || '' } type="number" onChange={(e) =>
handleInputChange('OrderID', e.target.value)}/>
</div>
</div>
<label >CustomerID</label>
<TextBoxComponent value={selectedProduct.CustomerID || ''}
change={(e) => handleInputChange('CustomerID', e.value)}></TextBoxComponent>
</div>
</div>
<label >Frieght</label>

<NumericTextBoxComponent value={selectedProduct.Freight || '' }

change={(e) => handleInputChange('Freight',
e.value)}></NumericTextBoxComponent>
</div>
</div>
<label >ShipCountry</label>
<DropDownListComponent value={selectedProduct.ShipCountry || '' }
dataSource={dropdown} fields={dropdownFields} change={(e) =>
handleInputChange('ShipCountry', e.value)}></DropDownListComponent>
</div>
</div>
</div>
<ButtonComponent id='btn' onClick={save}>Save</ButtonComponent>
</div>
height={315} rowSelected={rowSelected}>
<ColumnsDirective>
width='120' />
format='C2' />
width='150' />
</ColumnsDirective>
</GridComponent></div ></div>)
};
export default App;
APP.TSX
react-inputs';
RowSelectEventArgs } from '@syncfusion/ej2-react-grids';
react-grids';
// export class Order {
// OrderID: number;
// CustomerID: string;
// Freight: number;
// ShipCountry: string;
// }
function App() {
const editOptions: EditSettingsModel = { allowEditing: true };

const [selectedProduct, setSelectedProduct] = useState([]);

const dropdown: { [key: string]: Object; }[] = [
{ shipCountry: 'Germany' },
{ shipCountry: 'Brazil' },
{ shipCountry: 'France' },
{ shipCountry: 'Belgium' },
{ shipCountry: 'Switzerland' },
{ shipCountry: 'Venezuela' },
{ shipCountry: 'USA' },
{ shipCountry: 'Mexico' },
{ shipCountry: 'Italy' },
{ shipCountry: 'Sweden' },
{ shipCountry: 'Finland' },
{ shipCountry: 'Spain' },
{ shipCountry: 'Canada' },
{ shipCountry: 'Portugal' },
{ shipCountry: 'Denmark' },
{ shipCountry: 'Austria' },
{ shipCountry: 'UK' },
{ shipCountry: 'Ireland' },
{ shipCountry: 'Norway' },
{ shipCountry: 'Argentina' },
];
const dropdownFields: Object = { text: 'shipCountry', value: 'shipCountry'
};
const handleInputChange = (field: string, value: string | number) => {
setSelectedProduct((prevProduct) => ({ ...prevProduct, [field]: value
}));
};
const save = () => {
const index = (grid as GridComponent).getSelectedRowIndexes()[0];
(grid as GridComponent).updateRow(index, selectedProduct);
}
const rowSelected = (args: RowSelectEventArgs) => {
setSelectedProduct(args.data);
}
return (<div className='row'>
<div>
<label >OrderID</label>
<input className="form-control"
defaultValue={selectedProduct.OrderID || '' } type="number" onChange={(e) =>
handleInputChange('OrderID', e.target.value)}/>
</div>
</div>
<label >CustomerID</label>
<TextBoxComponent value={selectedProduct.CustomerID || ''}
change={(e) => handleInputChange('CustomerID', e.value)}></TextBoxComponent>
</div>
</div>
<label >Frieght</label>

<NumericTextBoxComponent value={selectedProduct.Freight || '' }

change={(e) => handleInputChange('Freight',
e.value)}></NumericTextBoxComponent>
</div>
</div>
<label >ShipCountry</label>
<DropDownListComponent value={(selectedProduct as
any).ShipCountry || '' } dataSource={dropdown} fields={dropdownFields}
change={(e) => handleInputChange('ShipCountry',
e.value)}></DropDownListComponent>
</div>
</div>
</div>
<ButtonComponent id='btn' onClick={save}>Save</ButtonComponent>
</div>
height={315} rowSelected={rowSelected}>
<ColumnsDirective>
width='120' />
format='C2' />
width='150' />
</ColumnsDirective>
</GridComponent></div ></div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Troubleshoot editing works only for first row

The Editing functionalities can be performed based upon the primary key value of the selected row. If
isPrimaryKey property is not defined in the grid, then edit or delete action take places the first row. To
overcome this, ensure that you establish the isPrimaryKey property as true for the relevant column
responsible for holding the unique identifier for each row.
How to make a Grid column always editable
To make a Grid column always editable, you can utilize the column template feature of the Grid. This
feature is useful when you want to edit a particular column's values directly within the grid.
In the following example, the textbox is rendered in the Freight column using a column template. The
keyup event for the Grid is bound using the created event of the Grid, and the edited changes are saved
in the data source using the updateRow method of the Grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, parentsUntil }
function App() {
let grid;
const gridTemplate = (props) => {
return (<div>
<input id={props.OrderID} defaultValue={props.Freight}
className='custemp' type='text'/>
</div>);
};
const created = (args) => {
grid.element.addEventListener('keyup', function (e) {
if (e.target.classList.contains('custemp')) { // Based on
condition, you can find whether the target is an input element or not.
let row = parentsUntil(e.target, 'e-row');
let rowIndex = row.rowIndex; // Get the row index.
let uid = row.getAttribute('data-uid');
let grid = document.getElementsByClassName('e-
grid')[0].ej2_instances[0];
let rowData = grid.getRowObjectFromUID(uid).data; // Get the
row data.
rowData.Freight = e.target.value; // Update the new value for
the corresponding column.
grid.updateRow(rowIndex, rowData); // Update the modified
value in the row data.
}
});
};
return <GridComponent dataSource={data} ref={g => grid = g} height={315}
created={created}>
<ColumnsDirective>
textAlign="Right" isPrimaryKey={true}/>

<ColumnDirective field='OrderDate' headerText='Order Date' width='130'

textAlign="Right" format='yMd'/>
width='140'/>
<ColumnDirective field='Freight' headerText='Receipt Amount'
width='140' template={gridTemplate}/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, parentsUntil }
function App() {
const gridTemplate = (props: any): any => {
return (<div>
<input id={props.OrderID} defaultValue={props.Freight}
className='custemp' type='text' />
</div>);
}
const created = (args): void => {
grid.element.addEventListener('keyup', function (e) { // Bind the keyup
event for the grid.
if ((e.target as any).classList.contains('custemp')) { // Based on
condition, you can find whether the target is an input element or not.
let row = parentsUntil(e.target as any, 'e-row');
let rowIndex = (row as any).rowIndex; // Get the row index.
let uid = row.getAttribute('data-uid');
let grid = (document.getElementsByClassName('e-grid')[0] as
any).ej2_instances[0];
let rowData = grid.getRowObjectFromUID(uid).data; // Get the row
data.
(rowData as any).Freight = (e.target as any).value; // Update the new
value for the corresponding column.
grid.updateRow(rowIndex, rowData); // Update the modified value in
the row data.
}
});
}
return <GridComponent dataSource={data} ref={g => grid = g} height={315}
created={created}>
<ColumnsDirective>
textAlign="Right" format='yMd' />
width='140' />
<ColumnDirective field='Freight' headerText='Receipt Amount'
width='140' template={gridTemplate} />

</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{
},
{
'Rua do Paço, 67',
},

{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{
},
{
},
{


},
{
}
];
DATASOURCE.TSX
{
},
{
'Luisenstr. 48',
},
{
'Rua do Paço, 67',
},
{
rue du Commerce',
},
{


},
{
'Rua do Paço, 67',
},
{
'Hauptstr. 31',
},
{
'Starenweg 5',
},
{
},
{
},
{
6',
},
{

Link to the VideoGrid Sorting in React Grid component

},
{
},
{
},
{
}];
* If a template column has a corresponding field property defined, the value entered in the template
column's input field will be stored in the associated edit column of the row's data object.
See also
• Cascading DropDownList with Grid Editing

• Tab Inside the Dialog Editing
Sorting in React Grid component

The Grid component provides built-in support for sorting data-bound columns in ascending or
descending order. To enable sorting in the grid, set the allowSorting property to true.
To sort a particular column in the grid, click on its column header. Each time you click the header, the
order of the column will switch between Ascending and Descending.
To use the sorting feature, you need to inject the Sort module in the grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Sort }
function App() {
return <GridComponent dataSource={data} allowSorting={true} height={315}>

<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>;
};
export default App;
APP.TSX
function App() {
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
* Grid column sorted in Ascending order. If you click on an already sorted column, then toggles the sort
direction.
* You can apply and clear sorting by using the sortColumn and clearSorting methods.
* To disable sorting for a specific column, set the allowSorting property to false.
Initial sorting
By default, the grid component does not apply any sorting to its records at initial rendering. However,
you can apply initial sorting by setting the sortSettings.columns property to the desired field and sort
direction. This feature is helpful when you want to display your data in a specific order when the grid is
first loaded.
The following example demonstrates how to set sortSettings.columns for OrderID and ShipCity columns
with a specified direction.
APP.JSX
function App() {
const sortingOptions = {
columns: [{ field: 'OrderID', direction: 'Ascending' }, { field:
'ShipCity', direction: 'Descending' }]
};
sortSettings={sortingOptions} height={315}>
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Sort,
SortSettingsModel } from '@syncfusion/ej2-react-grids';

function App() {
const sortingOptions: SortSettingsModel = {
columns: [{ field: 'OrderID', direction: 'Ascending' }, { field:
'ShipCity', direction: 'Descending' }]
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},

{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
The initial sorting defined in sortSettings.columns will override any sorting applied through user
interaction.
Multi-column sorting
The Grid component allows to sort more than one column at a time using multi-column sorting. To
enable multi-column sorting in the grid, set the allowSorting property to true, and set the
allowMultiSorting property to true which enable the user to sort multiple columns by hold the CTRL key
and click on the column headers. This feature is useful when you want to sort your data based on
multiple criteria to analyze it in various ways.

To clear multi-column sorting for a particular column, press the "Shift + mouse left click".
* The allowSorting must be true while enabling multi-column sort.
* Set allowMultiSorting property as false to disable multi-column sorting.
APP.JSX
function App() {
allowMultiSorting={true} height={315}>
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
function App() {
allowMultiSorting={true} height={315}>
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{


Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Prevent sorting for particular column

The Grid component provides the ability to prevent sorting for a particular column. This can be useful
when you have certain columns that you do not want to be included in the sorting process.
It can be achieved by setting the allowSorting property of the particular column to false.
The following example demonstrates, how to disable sorting for CustomerID column.
APP.JSX
function App() {
<ColumnsDirective>
</ColumnsDirective>
</GridComponent>;
};
export default App;
APP.TSX


function App() {
<ColumnsDirective>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Sort order
By default, the sorting order will be as ascending -> descending -> none.
When you click on a column header for the first time, it sorts the column in ascending order. Clicking the
same column header again will sort the column in descending order. A repetitive third click on the same
column header will clear the sorting.
Custom sorting
The Grid component provides a way to customize the default sort action for a column by defining the
sortComparer property. The sort comparer function works similar to the Array.sort comparer function,
and allows to define custom sorting logic for a specific column.

The following example demonstrates how to define custom sort comparer function for the Customer ID
column.
APP.JSX
function App() {
const sortComparer = (reference, comparer) => {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;
}
return 0;
};
return <GridComponent dataSource={data} height={315} allowSorting={true}>
<ColumnsDirective>
textAlign="Right"/>
<ColumnDirective field='CustomerID' sortComparer={sortComparer}
headerText='Customer ID' width='150'/>
textAlign="Right" format='C2'/>
width='100'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
function App() {
const sortComparer = (reference: string, comparer: string) => {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;
}
return 0;
};
return <GridComponent dataSource={data} height={315} allowSorting={true}>
<ColumnsDirective>

<ColumnDirective field='CustomerID' sortComparer={sortComparer}

headerText='Customer ID' width='150' />
textAlign="Right" format='C2' />
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
The customSortComparer function takes two parameters: a and b. The a and b parameters are the
values to be compared. The function returns -1, 0, or 1, depending on the comparison result.

Touch interaction
When you tap grid header on touch screen devices, then the selected column header is sorted and
display a popup for multi-

column sorting, tap on the popup to sort multiple columns

and then tap the desired

grid headers.
The allowMultiSorting and allowSorting should be true then only the popup will be shown.
The following screenshot represents a grid touch sorting in the device.

Sort foreign key column based on text

To perform sorting based on foreign key column, the foreign key column can be enabled by using
dataSource, foreignKeyField and foreignKeyValue properties.
Sort foreign key column based on text for local data
In the case of local data in the grid, the sorting operation will be performed based on the
foreignKeyValue property of the column. The foreignKeyValue property should be defined in the
column definition with the corresponding foreign key value for each row. The grid will sort the foreign
key column based on the text representation of the foreignKeyValue property.
The following example demonstrates how to perform sorting by enabling a foreign key column, where
the CustomerID column acts as a foreign column displaying the ContactName column from foreign data.
APP.JSX
ForeignKey } from '@syncfusion/ej2-react-grids';
import { data, customerData } from './datasource';

function App() {
<ColumnsDirective>
foreignKeyValue='ContactName' foreignKeyField='CustomerID'
dataSource={customerData} width='100' />
</ColumnsDirective>
<Inject services={[Sort, ForeignKey]} />
</GridComponent>
};
export default App;
APP.TSX
ForeignKey } from '@syncfusion/ej2-react-grids';
import { data, customerData } from './datasource';
function App() {
<ColumnsDirective>
foreignKeyValue='ContactName' foreignKeyField='CustomerID'
dataSource={customerData} width='100' />
</ColumnsDirective>
<Inject services={[Sort, ForeignKey]} />
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
export const customerData = [
{
"CustomerID": "ALFKI",
"ContactName": "Maria ",
"CompanyName": "Alfreds Futterkiste",

"Address": "Obere Str. 57",

"Country": "Germany"
},
{
"CustomerID": "ANATR",
"ContactName": "Ana Trujillo",
"CompanyName": "Ana Trujillo Emparedados y helados",
"Address": "Avda. de la Constitución 2222",
"Country": "Mexico"
},
{
"CustomerID": "ANTON",
"ContactName": "Antonio Moreno",
"CompanyName": "Antonio Moreno Taquería",
"Address": "Mataderos 2312",
"Country": "Mexico"
},
{
"CustomerID": "AROUT",
"ContactName": "Thomas Hardy",
"CompanyName": "Around the Horn",
"Address": "120 Hanover Sq.",
"Country": "UK"
},
{
"CustomerID": "BERGS",
"ContactName": "Christina Berglund",
"CompanyName": "Berglunds snabbköp",
"Address": "Berguvsvägen 8",
"Country": "Sweden"
},
{
"CustomerID": "BLAUS",
"ContactName": "Hanna Moos",
"CompanyName": "Blauer See Delikatessen",
"Address": "Forsterstr. 57",
},
{
"CustomerID": "BLONP",
"ContactName": "Frédérique Citeaux",
"CompanyName": "Blondesddsl père et fils",
"Address": "24, place Kléber",
"Country": "France"
},
{
"CustomerID": "BOLID",
"ContactName": "Martín Sommer",
"CompanyName": "Bólido Comidas preparadas",
"Address": "C/ Araquil, 67",
"Country": "Spain"
},
{
"CustomerID": "BONAP",
"ContactName": "Laurence Lebihan",
"CompanyName": "Bon app'",
"Address": "12, rue des Bouchers",

"Country": "France"
},
{
"CustomerID": "BOTTM",
"ContactName": "Elizabeth Lincoln",
"CompanyName": "Bottom-Dollar Markets",
"Address": "23 Tsawassen Blvd.",
"Country": "Canada"
},
{
"CustomerID": "BSBEV",
"ContactName": "Victoria Ashworth",
"CompanyName": "B's Beverages",
"Address": "Fauntleroy Circus",
"Country": "UK"
},
{
"CustomerID": "CACTU",
"ContactName": "Patricio Simpson",
"CompanyName": "Cactus Comidas para llevar",
"Address": "Cerrito 333",
"Country": "Argentina"
},
{
"CustomerID": "CENTC",
"ContactName": "Francisco Chang",
"CompanyName": "Centro comercial Moctezuma",
"Address": "Sierras de Granada 9993",
"Country": "Mexico"
},
{
"CustomerID": "CHOPS",
"ContactName": "Yang Wang",
"CompanyName": "Chop-suey Chinese",
"Address": "Hauptstr. 29",
"Country": "Switzerland"
},
{
"CustomerID": "COMMI",
"ContactName": "Pedro Afonso",
"CompanyName": "Comércio Mineiro",
"Address": "Av. dos Lusíadas, 23",
"Country": "Brazil"
},
{
"CustomerID": "CONSH",
"ContactName": "Elizabeth Brown",
"CompanyName": "Consolidated Holdings",
"Address": "Berkeley Gardens 12 Brewery",
"Country": "UK"
},
{
"CustomerID": "DRACD",
"ContactName": "Sven Ottlieb",
"CompanyName": "Drachenblut Delikatessen",
"Address": "Walserweg 21",

},
{
"CustomerID": "DUMON",
"ContactName": "Janine Labrune",
"CompanyName": "Du monde entier",
"Address": "67, rue des Cinquante Otages",
"Country": "France"
},
{
"CustomerID": "EASTC",
"ContactName": "Ann Devon",
"CompanyName": "Eastern Connection",
"Address": "35 King George",
"Country": "UK"
},
{
"CustomerID": "ERNSH",
"ContactName": "Roland Mendel",
"CompanyName": "Ernst Handel",
"Address": "Kirchgasse 6",
"Country": "Austria"
},
{
"CustomerID": "FAMIA",
"ContactName": "Aria Cruz",
"CompanyName": "Familia Arquibaldo",
"Address": "Rua Orós, 92",
"Country": "Brazil"
},
{
"CustomerID": "FISSA",
"ContactName": "Diego Roel",
"CompanyName": "FISSA Fabrica Inter. Salchichas S.A.",
"Address": "C/ Moralzarzal, 86",
"Country": "Spain"
},
{
"CustomerID": "FOLIG",
"ContactName": "Martine Rancé",
"CompanyName": "Folies gourmandes",
"Address": "184, chaussée de Tournai",
"Country": "France"
},
{
"CustomerID": "FOLKO",
"ContactName": "Maria Larsson",
"CompanyName": "Folk och fä HB",
"Address": "Åkergatan 24",
"Country": "Sweden"
},
{
"CustomerID": "FRANK",
"ContactName": "Peter Franken",
"CompanyName": "Frankenversand",
"Address": "Berliner Platz 43",
},

{
"CustomerID": "FRANR",
"ContactName": "Carine Schmitt",
"CompanyName": "France restauration",
"Address": "54, rue Royale",
"Country": "France"
},
{
"CustomerID": "FRANS",
"ContactName": "Paolo Accorti",
"CompanyName": "Franchi S.p.A.",
"Address": "Via Monte Bianco 34",
"Country": "Italy"
},
{
"CustomerID": "FURIB",
"ContactName": "Lino Rodriguez",
"CompanyName": "Furia Bacalhau e Frutos do Mar",
"Address": "Jardim das rosas n. 32",
"Country": "Portugal"
},
{
"CustomerID": "GALED",
"ContactName": "Eduardo Saavedra",
"CompanyName": "Galería del gastrónomo",
"Address": "Rambla de Cataluña, 23",
"Country": "Spain"
},
{
"CustomerID": "GODOS",
"ContactName": "José Pedro Freyre",
"CompanyName": "Godos Cocina Típica",
"Address": "C/ Romero, 33",
"Country": "Spain"
},
{
"CustomerID": "GOURL",
"ContactName": "André Fonseca",
"CompanyName": "Gourmet Lanchonetes",
"Address": "Av. Brasil, 442",
"Country": "Brazil"
},
{
"CustomerID": "GREAL",
"ContactName": "Howard Snyder",
"CompanyName": "Great Lakes Food Market",
"Address": "2732 Baker Blvd.",
"Country": "USA"
},
{
"CustomerID": "GROSR",
"ContactName": "Manuel Pereira",
"CompanyName": "GROSELLA-Restaurante",
"Address": "5ª Ave. Los Palos Grandes",
"Country": "Venezuela"
},
{

"CustomerID": "HANAR",
"ContactName": "Mario Pontes",
"CompanyName": "Hanari Carnes",
"Address": "Rua do Paço, 67",
"Country": "Brazil"
},
{
"CustomerID": "HILAA",
"ContactName": "Carlos Hernández",
"CompanyName": "HILARION-Abastos",
"Address": "Carrera 22 con Ave. Carlos Soublette #8-35",
},
{
"CustomerID": "HUNGC",
"ContactName": "Yoshi Latimer",
"CompanyName": "Hungry Coyote Import Store",
"Address": "City Center Plaza 516 Main St.",
"Country": "USA"
},
{
"CustomerID": "HUNGO",
"ContactName": "Patricia McKenna",
"CompanyName": "Hungry Owl All-Night Grocers",
"Address": "8 Johnstown Road",
"Country": "Ireland"
},
{
"CustomerID": "ISLAT",
"ContactName": "Helen Bennett",
"CompanyName": "Island Trading",
"Address": "Garden House Crowther Way",
"Country": "UK"
},
{
"CustomerID": "KOENE",
"ContactName": "Philip Cramer",
"CompanyName": "Königlich Essen",
"Address": "Maubelstr. 90",
},
{
"CustomerID": "LACOR",
"ContactName": "Daniel Tonini",
"CompanyName": "La corne d'abondance",
"Address": "67, avenue de l'Europe",
"Country": "France"
},
{
"CustomerID": "LAMAI",
"ContactName": "Annette Roulet",
"CompanyName": "La maison d'Asie",
"Address": "1 rue Alsace-Lorraine",
"Country": "France"
},
{
"CustomerID": "LAUGB",

"ContactName": "Yoshi Tannamuri",

"CompanyName": "Laughing Bacchus Wine Cellars",
"Address": "1900 Oak St.",
"Country": "Canada"
},
{
"CustomerID": "LAZYK",
"ContactName": "John Steel",
"CompanyName": "Lazy K Kountry Store",
"Address": "12 Orchestra Terrace",
"Country": "USA"
},
{
"CustomerID": "LEHMS",
"ContactName": "Renate Messner",
"CompanyName": "Lehmanns Marktstand",
"Address": "Magazinweg 7",
},
{
"CustomerID": "LETSS",
"ContactName": "Jaime Yorres",
"CompanyName": "Let's Stop N Shop",
"Address": "87 Polk St. Suite 5",
"Country": "USA"
},
{
"CustomerID": "LILAS",
"ContactName": "Carlos González",
"CompanyName": "LILA-Supermercado",
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
},
{
"CustomerID": "LINOD",
"ContactName": "Felipe Izquierdo",
"CompanyName": "LINO-Delicateses",
"Address": "Ave. 5 de Mayo Porlamar",
},
{
"CustomerID": "LONEP",
"ContactName": "Fran Wilson",
"CompanyName": "Lonesome Pine Restaurant",
"Address": "89 Chiaroscuro Rd.",
"Country": "USA"
},
{
"CustomerID": "MAGAA",
"ContactName": "Giovanni Rovelli",
"CompanyName": "Magazzini Alimentari Riuniti",
"Address": "Via Ludovico il Moro 22",
"Country": "Italy"
},
{
"CustomerID": "MAISD",
"ContactName": "Catherine Dewey",

"CompanyName": "Maison Dewey",

"Address": "Rue Joseph-Bens 532",
"Country": "Belgium"
},
{
"CustomerID": "MEREP",
"ContactName": "Jean Fresnière",
"CompanyName": "Mère Paillarde",
"Address": "43 rue St. Laurent",
"Country": "Canada"
},
{
"CustomerID": "MORGK",
"ContactName": "Alexander Feuer",
"CompanyName": "Morgenstern Gesundkost",
"Address": "Heerstr. 22",
},
{
"CustomerID": "NORTS",
"ContactName": "Simon Crowther",
"CompanyName": "North/South",
"Address": "South House 300 Queensbridge",
"Country": "UK"
},
{
"CustomerID": "OCEAN",
"ContactName": "Yvonne Moncada",
"CompanyName": "Océano Atlántico Ltda.",
"Address": "Ing. Gustavo Moncada 8585 Piso 20-A",
},
{
"CustomerID": "OLDWO",
"ContactName": "Rene Phillips",
"CompanyName": "Old World Delicatessen",
"Address": "2743 Bering St.",
"Country": "USA"
},
{
"CustomerID": "OTTIK",
"ContactName": "Henriette Pfalzheim",
"CompanyName": "Ottilies Käseladen",
"Address": "Mehrheimerstr. 369",
},
{
"CustomerID": "PARIS",
"ContactName": "Marie Bertrand",
"CompanyName": "Paris spécialités",
"Address": "265, boulevard Charonne",
"Country": "France"
},
{
"CustomerID": "PERIC",
"ContactName": "Guillermo Fernández",
"CompanyName": "Pericles Comidas clásicas",

"Address": "Calle Dr. Jorge Cash 321",

"Country": "Mexico"
},
{
"CustomerID": "PICCO",
"ContactName": "Georg Pipps",
"CompanyName": "Piccolo und mehr",
"Address": "Geislweg 14",
},
{
"CustomerID": "PRINI",
"ContactName": "Isabel de Castro",
"CompanyName": "Princesa Isabel Vinhos",
"Address": "Estrada da saúde n. 58",
},
{
"CustomerID": "QUEDE",
"ContactName": "Bernardo Batista",
"CompanyName": "Que Delícia",
"Address": "Rua da Panificadora, 12",
"Country": "Brazil"
},
{
"CustomerID": "QUEEN",
"ContactName": "Lúcia Carvalho",
"CompanyName": "Queen Cozinha",
"Address": "Alameda dos Canàrios, 891",
"Country": "Brazil"
},
{
"CustomerID": "QUICK",
"ContactName": "Horst Kloss",
"CompanyName": "QUICK-Stop",
"Address": "Taucherstraße 10",
},
{
"CustomerID": "RANCH",
"ContactName": "Sergio Gutiérrez",
"CompanyName": "Rancho grande",
"Address": "Av. del Libertador 900",
},
{
"CustomerID": "RATTC",
"ContactName": "Paula Wilson",
"CompanyName": "Rattlesnake Canyon Grocery",
"Address": "2817 Milton Dr.",
"Country": "USA"
},
{
"CustomerID": "REGGC",
"ContactName": "Maurizio Moroni",
"CompanyName": "Reggiani Caseifici",
"Address": "Strada Provinciale 124",

"Country": "Italy"
},
{
"CustomerID": "RICAR",
"ContactName": "Janete Limeira",
"CompanyName": "Ricardo Adocicados",
"Address": "Av. Copacabana, 267",
"Country": "Brazil"
},
{
"CustomerID": "RICSU",
"ContactName": "Michael Holz",
"CompanyName": "Richter Supermarkt",
"Address": "Grenzacherweg 237",
},
{
"CustomerID": "ROMEY",
"ContactName": "Alejandra Camino",
"CompanyName": "Romero y tomillo",
"Address": "Gran Vía, 1",
"Country": "Spain"
},
{
"CustomerID": "SANTG",
"ContactName": "Jonas Bergulfsen",
"CompanyName": "Santé Gourmet",
"Address": "Erling Skakkes gate 78",
"Country": "Norway"
},
{
"CustomerID": "SAVEA",
"ContactName": "Jose Pavarotti",
"CompanyName": "Save-a-lot Markets",
"Address": "187 Suffolk Ln.",
"Country": "USA"
},
{
"CustomerID": "SEVES",
"ContactName": "Hari Kumar",
"CompanyName": "Seven Seas Imports",
"Address": "90 Wadhurst Rd.",
"Country": "UK"
},
{
"CustomerID": "SIMOB",
"ContactName": "Jytte Petersen",
"CompanyName": "Simons bistro",
"Address": "Vinbæltet 34",
"Country": "Denmark"
},
{
"CustomerID": "SPECD",
"ContactName": "Dominique Perrier",
"CompanyName": "Spécialités du monde",
"Address": "25, rue Lauriston",
"Country": "France"

},
{
"CustomerID": "SPLIR",
"ContactName": "Art Braunschweiger",
"CompanyName": "Split Rail Beer & Ale",
"Address": "P.O. Box 555",
"Country": "USA"
},
{
"CustomerID": "SUPRD",
"ContactName": "Pascale Cartrain",
"CompanyName": "Suprêmes délices",
"Address": "Boulevard Tirou, 255",
},
{
"CustomerID": "THEBI",
"ContactName": "Liz Nixon",
"CompanyName": "The Big Cheese",
"Address": "89 Jefferson Way Suite 2",
"Country": "USA"
},
{
"CustomerID": "THECR",
"ContactName": "Liu Wong",
"CompanyName": "The Cracker Box",
"Address": "55 Grizzly Peak Rd.",
"Country": "USA"
},
{
"CustomerID": "TOMSP",
"ContactName": "Karin Josephs",
"CompanyName": "Toms Spezialitäten",
"Address": "Luisenstr. 48",
},
{
"CustomerID": "TORTU",
"ContactName": "Miguel Angel Paolino",
"CompanyName": "Tortuga Restaurante",
"Address": "Avda. Azteca 123",
"Country": "Mexico"
},
{
"CustomerID": "TRADH",
"ContactName": "Anabela Domingues",
"CompanyName": "Tradição Hipermercados",
"Address": "Av. Inês de Castro, 414",
"Country": "Brazil"
},
{
"CustomerID": "TRAIH",
"ContactName": "Helvetius Nagy",
"CompanyName": "Trail's Head Gourmet Provisioners",
"Address": "722 DaVinci Blvd.",
"Country": "USA"
},

{
"CustomerID": "VAFFE",
"ContactName": "Palle Ibsen",
"CompanyName": "Vaffeljernet",
"Address": "Smagsloget 45",
},
{
"CustomerID": "VICTE",
"ContactName": "Mary Saveley",
"CompanyName": "Victuailles en stock",
"Address": "2, rue du Commerce",
"Country": "France"
},
{
"CustomerID": "VINET",
"ContactName": "Paul Henriot",
"CompanyName": "Vins et alcools Chevalier",
"Address": "59 rue de l'Abbaye",
"Country": "France"
},
{
"CustomerID": "WANDK",
"ContactName": "Rita Müller",
"CompanyName": "Die Wandernde Kuh",
"Address": "Adenauerallee 900",
},
{
"CustomerID": "WARTH",
"ContactName": "Pirkko Koskitalo",
"CompanyName": "Wartian Herkku",
"Address": "Torikatu 38",
"Country": "Finland"
},
{
"CustomerID": "WELLI",
"ContactName": "Paula Parente",
"CompanyName": "Wellington Importadora",
"Address": "Rua do Mercado, 12",
"Country": "Brazil"
},
{
"CustomerID": "WHITC",
"ContactName": "Karl Jablonski",
"CompanyName": "White Clover Markets",
"Address": "305 - 14th Ave. S. Suite 3B",
"Country": "USA"
},
{
"CustomerID": "WILMK",
"ContactName": "Matti Karttunen",
"CompanyName": "Wilman Kala",
"Address": "Keskuskatu 45",
},
{

"CustomerID": "WOLZA",
"ContactName": "Zbyszek Piestrzeniewicz",
"CompanyName": "Wolski Zajazd",
"Address": "ul. Filtrowa 68",
"Country": "Poland"
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',


},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
export const customerData: Object[] = [
{
"CustomerID": "ALFKI",
"ContactName": "Maria ",
"CompanyName": "Alfreds Futterkiste",
"Address": "Obere Str. 57",
},
{
"CustomerID": "ANATR",
"ContactName": "Ana Trujillo",
"CompanyName": "Ana Trujillo Emparedados y helados",
"Address": "Avda. de la Constitución 2222",
"Country": "Mexico"
},
{
"CustomerID": "ANTON",
"ContactName": "Antonio Moreno",
"CompanyName": "Antonio Moreno Taquería",
"Address": "Mataderos 2312",
"Country": "Mexico"
},
{
"CustomerID": "AROUT",
"ContactName": "Thomas Hardy",
"CompanyName": "Around the Horn",
"Address": "120 Hanover Sq.",
"Country": "UK"
},
{
"CustomerID": "BERGS",
"ContactName": "Christina Berglund",
"CompanyName": "Berglunds snabbköp",
"Address": "Berguvsvägen 8",
"Country": "Sweden"
},
{
"CustomerID": "BLAUS",

"ContactName": "Hanna Moos",

"CompanyName": "Blauer See Delikatessen",
"Address": "Forsterstr. 57",
},
{
"CustomerID": "BLONP",
"ContactName": "Frédérique Citeaux",
"CompanyName": "Blondesddsl père et fils",
"Address": "24, place Kléber",
"Country": "France"
},
{
"CustomerID": "BOLID",
"ContactName": "Martín Sommer",
"CompanyName": "Bólido Comidas preparadas",
"Address": "C/ Araquil, 67",
"Country": "Spain"
},
{
"CustomerID": "BONAP",
"ContactName": "Laurence Lebihan",
"CompanyName": "Bon app'",
"Address": "12, rue des Bouchers",
"Country": "France"
},
{
"CustomerID": "BOTTM",
"ContactName": "Elizabeth Lincoln",
"CompanyName": "Bottom-Dollar Markets",
"Address": "23 Tsawassen Blvd.",
"Country": "Canada"
},
{
"CustomerID": "BSBEV",
"ContactName": "Victoria Ashworth",
"CompanyName": "B's Beverages",
"Address": "Fauntleroy Circus",
"Country": "UK"
},
{
"CustomerID": "CACTU",
"ContactName": "Patricio Simpson",
"CompanyName": "Cactus Comidas para llevar",
"Address": "Cerrito 333",
},
{
"CustomerID": "CENTC",
"ContactName": "Francisco Chang",
"CompanyName": "Centro comercial Moctezuma",
"Address": "Sierras de Granada 9993",
"Country": "Mexico"
},
{
"CustomerID": "CHOPS",
"ContactName": "Yang Wang",

"CompanyName": "Chop-suey Chinese",

"Address": "Hauptstr. 29",
},
{
"CustomerID": "COMMI",
"ContactName": "Pedro Afonso",
"CompanyName": "Comércio Mineiro",
"Address": "Av. dos Lusíadas, 23",
"Country": "Brazil"
},
{
"CustomerID": "CONSH",
"ContactName": "Elizabeth Brown",
"CompanyName": "Consolidated Holdings",
"Address": "Berkeley Gardens 12 Brewery",
"Country": "UK"
},
{
"CustomerID": "DRACD",
"ContactName": "Sven Ottlieb",
"CompanyName": "Drachenblut Delikatessen",
"Address": "Walserweg 21",
},
{
"CustomerID": "DUMON",
"ContactName": "Janine Labrune",
"CompanyName": "Du monde entier",
"Address": "67, rue des Cinquante Otages",
"Country": "France"
},
{
"CustomerID": "EASTC",
"ContactName": "Ann Devon",
"CompanyName": "Eastern Connection",
"Address": "35 King George",
"Country": "UK"
},
{
"CustomerID": "ERNSH",
"ContactName": "Roland Mendel",
"CompanyName": "Ernst Handel",
"Address": "Kirchgasse 6",
},
{
"CustomerID": "FAMIA",
"ContactName": "Aria Cruz",
"CompanyName": "Familia Arquibaldo",
"Address": "Rua Orós, 92",
"Country": "Brazil"
},
{
"CustomerID": "FISSA",
"ContactName": "Diego Roel",
"CompanyName": "FISSA Fabrica Inter. Salchichas S.A.",

"Address": "C/ Moralzarzal, 86",

"Country": "Spain"
},
{
"CustomerID": "FOLIG",
"ContactName": "Martine Rancé",
"CompanyName": "Folies gourmandes",
"Address": "184, chaussée de Tournai",
"Country": "France"
},
{
"CustomerID": "FOLKO",
"ContactName": "Maria Larsson",
"CompanyName": "Folk och fä HB",
"Address": "Åkergatan 24",
"Country": "Sweden"
},
{
"CustomerID": "FRANK",
"ContactName": "Peter Franken",
"CompanyName": "Frankenversand",
"Address": "Berliner Platz 43",
},
{
"CustomerID": "FRANR",
"ContactName": "Carine Schmitt",
"CompanyName": "France restauration",
"Address": "54, rue Royale",
"Country": "France"
},
{
"CustomerID": "FRANS",
"ContactName": "Paolo Accorti",
"CompanyName": "Franchi S.p.A.",
"Address": "Via Monte Bianco 34",
"Country": "Italy"
},
{
"CustomerID": "FURIB",
"ContactName": "Lino Rodriguez",
"CompanyName": "Furia Bacalhau e Frutos do Mar",
"Address": "Jardim das rosas n. 32",
},
{
"CustomerID": "GALED",
"ContactName": "Eduardo Saavedra",
"CompanyName": "Galería del gastrónomo",
"Address": "Rambla de Cataluña, 23",
"Country": "Spain"
},
{
"CustomerID": "GODOS",
"ContactName": "José Pedro Freyre",
"CompanyName": "Godos Cocina Típica",
"Address": "C/ Romero, 33",

"Country": "Spain"
},
{
"CustomerID": "GOURL",
"ContactName": "André Fonseca",
"CompanyName": "Gourmet Lanchonetes",
"Address": "Av. Brasil, 442",
"Country": "Brazil"
},
{
"CustomerID": "GREAL",
"ContactName": "Howard Snyder",
"CompanyName": "Great Lakes Food Market",
"Address": "2732 Baker Blvd.",
"Country": "USA"
},
{
"CustomerID": "GROSR",
"ContactName": "Manuel Pereira",
"CompanyName": "GROSELLA-Restaurante",
"Address": "5ª Ave. Los Palos Grandes",
},
{
"CustomerID": "HANAR",
"ContactName": "Mario Pontes",
"CompanyName": "Hanari Carnes",
"Address": "Rua do Paço, 67",
"Country": "Brazil"
},
{
"CustomerID": "HILAA",
"ContactName": "Carlos Hernández",
"CompanyName": "HILARION-Abastos",
"Address": "Carrera 22 con Ave. Carlos Soublette #8-35",
},
{
"CustomerID": "HUNGC",
"ContactName": "Yoshi Latimer",
"CompanyName": "Hungry Coyote Import Store",
"Address": "City Center Plaza 516 Main St.",
"Country": "USA"
},
{
"CustomerID": "HUNGO",
"ContactName": "Patricia McKenna",
"CompanyName": "Hungry Owl All-Night Grocers",
"Address": "8 Johnstown Road",
"Country": "Ireland"
},
{
"CustomerID": "ISLAT",
"ContactName": "Helen Bennett",
"CompanyName": "Island Trading",
"Address": "Garden House Crowther Way",
"Country": "UK"

},
{
"CustomerID": "KOENE",
"ContactName": "Philip Cramer",
"CompanyName": "Königlich Essen",
"Address": "Maubelstr. 90",
},
{
"CustomerID": "LACOR",
"ContactName": "Daniel Tonini",
"CompanyName": "La corne d'abondance",
"Address": "67, avenue de l'Europe",
"Country": "France"
},
{
"CustomerID": "LAMAI",
"ContactName": "Annette Roulet",
"CompanyName": "La maison d'Asie",
"Address": "1 rue Alsace-Lorraine",
"Country": "France"
},
{
"CustomerID": "LAUGB",
"ContactName": "Yoshi Tannamuri",
"CompanyName": "Laughing Bacchus Wine Cellars",
"Address": "1900 Oak St.",
"Country": "Canada"
},
{
"CustomerID": "LAZYK",
"ContactName": "John Steel",
"CompanyName": "Lazy K Kountry Store",
"Address": "12 Orchestra Terrace",
"Country": "USA"
},
{
"CustomerID": "LEHMS",
"ContactName": "Renate Messner",
"CompanyName": "Lehmanns Marktstand",
"Address": "Magazinweg 7",
},
{
"CustomerID": "LETSS",
"ContactName": "Jaime Yorres",
"CompanyName": "Let's Stop N Shop",
"Address": "87 Polk St. Suite 5",
"Country": "USA"
},
{
"CustomerID": "LILAS",
"ContactName": "Carlos González",
"CompanyName": "LILA-Supermercado",
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
},

{
"CustomerID": "LINOD",
"ContactName": "Felipe Izquierdo",
"CompanyName": "LINO-Delicateses",
"Address": "Ave. 5 de Mayo Porlamar",
},
{
"CustomerID": "LONEP",
"ContactName": "Fran Wilson",
"CompanyName": "Lonesome Pine Restaurant",
"Address": "89 Chiaroscuro Rd.",
"Country": "USA"
},
{
"CustomerID": "MAGAA",
"ContactName": "Giovanni Rovelli",
"CompanyName": "Magazzini Alimentari Riuniti",
"Address": "Via Ludovico il Moro 22",
"Country": "Italy"
},
{
"CustomerID": "MAISD",
"ContactName": "Catherine Dewey",
"CompanyName": "Maison Dewey",
"Address": "Rue Joseph-Bens 532",
},
{
"CustomerID": "MEREP",
"ContactName": "Jean Fresnière",
"CompanyName": "Mère Paillarde",
"Address": "43 rue St. Laurent",
"Country": "Canada"
},
{
"CustomerID": "MORGK",
"ContactName": "Alexander Feuer",
"CompanyName": "Morgenstern Gesundkost",
"Address": "Heerstr. 22",
},
{
"CustomerID": "NORTS",
"ContactName": "Simon Crowther",
"CompanyName": "North/South",
"Address": "South House 300 Queensbridge",
"Country": "UK"
},
{
"CustomerID": "OCEAN",
"ContactName": "Yvonne Moncada",
"CompanyName": "Océano Atlántico Ltda.",
"Address": "Ing. Gustavo Moncada 8585 Piso 20-A",
},
{

"CustomerID": "OLDWO",
"ContactName": "Rene Phillips",
"CompanyName": "Old World Delicatessen",
"Address": "2743 Bering St.",
"Country": "USA"
},
{
"CustomerID": "OTTIK",
"ContactName": "Henriette Pfalzheim",
"CompanyName": "Ottilies Käseladen",
"Address": "Mehrheimerstr. 369",
},
{
"CustomerID": "PARIS",
"ContactName": "Marie Bertrand",
"CompanyName": "Paris spécialités",
"Address": "265, boulevard Charonne",
"Country": "France"
},
{
"CustomerID": "PERIC",
"ContactName": "Guillermo Fernández",
"CompanyName": "Pericles Comidas clásicas",
"Address": "Calle Dr. Jorge Cash 321",
"Country": "Mexico"
},
{
"CustomerID": "PICCO",
"ContactName": "Georg Pipps",
"CompanyName": "Piccolo und mehr",
"Address": "Geislweg 14",
},
{
"CustomerID": "PRINI",
"ContactName": "Isabel de Castro",
"CompanyName": "Princesa Isabel Vinhos",
"Address": "Estrada da saúde n. 58",
},
{
"CustomerID": "QUEDE",
"ContactName": "Bernardo Batista",
"CompanyName": "Que Delícia",
"Address": "Rua da Panificadora, 12",
"Country": "Brazil"
},
{
"CustomerID": "QUEEN",
"ContactName": "Lúcia Carvalho",
"CompanyName": "Queen Cozinha",
"Address": "Alameda dos Canàrios, 891",
"Country": "Brazil"
},
{
"CustomerID": "QUICK",

"ContactName": "Horst Kloss",

"CompanyName": "QUICK-Stop",
"Address": "Taucherstraße 10",
},
{
"CustomerID": "RANCH",
"ContactName": "Sergio Gutiérrez",
"CompanyName": "Rancho grande",
"Address": "Av. del Libertador 900",
},
{
"CustomerID": "RATTC",
"ContactName": "Paula Wilson",
"CompanyName": "Rattlesnake Canyon Grocery",
"Address": "2817 Milton Dr.",
"Country": "USA"
},
{
"CustomerID": "REGGC",
"ContactName": "Maurizio Moroni",
"CompanyName": "Reggiani Caseifici",
"Address": "Strada Provinciale 124",
"Country": "Italy"
},
{
"CustomerID": "RICAR",
"ContactName": "Janete Limeira",
"CompanyName": "Ricardo Adocicados",
"Address": "Av. Copacabana, 267",
"Country": "Brazil"
},
{
"CustomerID": "RICSU",
"ContactName": "Michael Holz",
"CompanyName": "Richter Supermarkt",
"Address": "Grenzacherweg 237",
},
{
"CustomerID": "ROMEY",
"ContactName": "Alejandra Camino",
"CompanyName": "Romero y tomillo",
"Address": "Gran Vía, 1",
"Country": "Spain"
},
{
"CustomerID": "SANTG",
"ContactName": "Jonas Bergulfsen",
"CompanyName": "Santé Gourmet",
"Address": "Erling Skakkes gate 78",
"Country": "Norway"
},
{
"CustomerID": "SAVEA",
"ContactName": "Jose Pavarotti",

"CompanyName": "Save-a-lot Markets",

"Address": "187 Suffolk Ln.",
"Country": "USA"
},
{
"CustomerID": "SEVES",
"ContactName": "Hari Kumar",
"CompanyName": "Seven Seas Imports",
"Address": "90 Wadhurst Rd.",
"Country": "UK"
},
{
"CustomerID": "SIMOB",
"ContactName": "Jytte Petersen",
"CompanyName": "Simons bistro",
"Address": "Vinbæltet 34",
},
{
"CustomerID": "SPECD",
"ContactName": "Dominique Perrier",
"CompanyName": "Spécialités du monde",
"Address": "25, rue Lauriston",
"Country": "France"
},
{
"CustomerID": "SPLIR",
"ContactName": "Art Braunschweiger",
"CompanyName": "Split Rail Beer & Ale",
"Address": "P.O. Box 555",
"Country": "USA"
},
{
"CustomerID": "SUPRD",
"ContactName": "Pascale Cartrain",
"CompanyName": "Suprêmes délices",
"Address": "Boulevard Tirou, 255",
},
{
"CustomerID": "THEBI",
"ContactName": "Liz Nixon",
"CompanyName": "The Big Cheese",
"Address": "89 Jefferson Way Suite 2",
"Country": "USA"
},
{
"CustomerID": "THECR",
"ContactName": "Liu Wong",
"CompanyName": "The Cracker Box",
"Address": "55 Grizzly Peak Rd.",
"Country": "USA"
},
{
"CustomerID": "TOMSP",
"ContactName": "Karin Josephs",
"CompanyName": "Toms Spezialitäten",

"Address": "Luisenstr. 48",

},
{
"CustomerID": "TORTU",
"ContactName": "Miguel Angel Paolino",
"CompanyName": "Tortuga Restaurante",
"Address": "Avda. Azteca 123",
"Country": "Mexico"
},
{
"CustomerID": "TRADH",
"ContactName": "Anabela Domingues",
"CompanyName": "Tradição Hipermercados",
"Address": "Av. Inês de Castro, 414",
"Country": "Brazil"
},
{
"CustomerID": "TRAIH",
"ContactName": "Helvetius Nagy",
"CompanyName": "Trail's Head Gourmet Provisioners",
"Address": "722 DaVinci Blvd.",
"Country": "USA"
},
{
"CustomerID": "VAFFE",
"ContactName": "Palle Ibsen",
"CompanyName": "Vaffeljernet",
"Address": "Smagsloget 45",
},
{
"CustomerID": "VICTE",
"ContactName": "Mary Saveley",
"CompanyName": "Victuailles en stock",
"Address": "2, rue du Commerce",
"Country": "France"
},
{
"CustomerID": "VINET",
"ContactName": "Paul Henriot",
"CompanyName": "Vins et alcools Chevalier",
"Address": "59 rue de l'Abbaye",
"Country": "France"
},
{
"CustomerID": "WANDK",
"ContactName": "Rita Müller",
"CompanyName": "Die Wandernde Kuh",
"Address": "Adenauerallee 900",
},
{
"CustomerID": "WARTH",
"ContactName": "Pirkko Koskitalo",
"CompanyName": "Wartian Herkku",
"Address": "Torikatu 38",

},
{
"CustomerID": "WELLI",
"ContactName": "Paula Parente",
"CompanyName": "Wellington Importadora",
"Address": "Rua do Mercado, 12",
"Country": "Brazil"
},
{
"CustomerID": "WHITC",
"ContactName": "Karl Jablonski",
"CompanyName": "White Clover Markets",
"Address": "305 - 14th Ave. S. Suite 3B",
"Country": "USA"
},
{
"CustomerID": "WILMK",
"ContactName": "Matti Karttunen",
"CompanyName": "Wilman Kala",
"Address": "Keskuskatu 45",
},
{
"CustomerID": "WOLZA",
"ContactName": "Zbyszek Piestrzeniewicz",
"CompanyName": "Wolski Zajazd",
"Address": "ul. Filtrowa 68",
"Country": "Poland"
}
];
Make sure to inject the ForeignKey module in the grid to ensure its availability throughout your
application.
Sort foreign key column based on text for remote data
In the case of remote data in the grid, the sorting operation will be performed based on the
foreignKeyField property of the column. The foreignKeyField property should be defined in the column
definition with the corresponding foreign key field name for each row. The grid will send a request to
the server-side with the foreignKeyField name, and the server-side should handle the sorting operation
and return the sorted data to the grid.
`typescript
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject, Sort } from
function App() {
const data = new DataManager({
adaptor: new ODataV4Adaptor,

url: '/OData/Items'
});
const employeeData = new DataManager({
adaptor: new ODataV4Adaptor,
url: '/OData/Brands'
});
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
dataSource={employeeData} headerText='Employee Name' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey, Sort]} />
</GridComponent>
};
export default App;
`
The following code example describes the handling of sorting operation at the server side.
`cs
public class ItemsController : ODataController
{
[EnableQuery]
public IQueryable<Item> Get()
{
List<Item> GridData =
JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
List<Brand> empData =
JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
let queryString = HttpContext.Current.Request.QueryString;
let allUrlKeyValues = ControllerContext.Request.GetQueryNameValuePairs();
string key = allUrlKeyValues.LastOrDefault(x => x.Key == "$orderby").Value;
if (key != null)

{
if (key == "EmployeeID") {
GridData = SortFor(key); //Only for foreignKey Column ascending
}
else if(key == "EmployeeID desc") {
GridData = SortFor(key); //Only for foreignKey Column descending
}
}
let count = GridData.Count();
let data = GridData.AsQueryable();
return data;
}
public List<Item> SortFor(String Sorted)
{
List<Item> GridData =
JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
List<Brand> empData =
JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
if (Sorted == "EmployeeID") //check whether ascending or descending
empData = empData.OrderBy(e => e.FirstName).ToList();
else if(Sorted == "EmployeeID desc")
empData = empData.OrderByDescending(e => e.FirstName).ToList();
List<Item> or = new List<Item>();
for (int i = 0; i < empData.Count(); i++) {
//Select the Field matching records
IEnumerable<Item> list = GridData.Where(pred => pred.EmployeeID ==
empData[i].EmployeeID).ToList();
or.AddRange(list);
}
return or;
}
}
`

Perform sorting based on its culture

Perform sorting based on culture in the Grid can be achieved by utilizing the locale property. By setting
the locale property to the desired culture code, you enable sorting based on that specific culture. This
allows you to apply locale-specific sorting rules and ensure accurate ordering for different languages and
regions.
In the following example, sorting is performed based on the “ar” locale using the sortComparer
property.
APP.JSX
import {loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as numberingSystems from './numberingSystems.json'
function App() {
const formatOption = { type: 'date', format: 'yyyy-MMM-dd' };
const locale = 'ar';
setCulture('ar');
setCurrencyCode('QAR');
loadCldr(
cagregorian,
currencies,
numbers,
timeZoneNames,
numberingSystems
);
const sortComparer = (reference, comparer, sortOrder) => {
const referenceDate = new Date(reference);
const comparerDate = new Date(comparer);
if (typeof reference === 'number' && typeof comparer === 'number') {
// Numeric column sorting
return sortOrder === 'Ascending' ? comparer - reference : reference -
comparer;
} else if (!isNaN(referenceDate.getTime()) &&
!isNaN(comparerDate.getTime())) {
// Date column sorting
return sortOrder === 'Ascending' ? comparerDate.getTime() -
referenceDate.getTime() : referenceDate.getTime() - comparerDate.getTime();
}
else {
// Default sorting for other types
const intlCollator = new Intl.Collator(undefined, { sensitivity:
'variant', usage: 'sort' });
const comparisonResult = intlCollator.compare(reference, comparer);
return sortOrder === 'Ascending' ? -comparisonResult :
comparisonResult;
}
};

return <GridComponent dataSource={data} allowSorting={true} locale={locale}

height={300}>
<ColumnsDirective>
textAlign="Right" sortComparer={sortComparer}/>
width='100' sortComparer={sortComparer}/>
textAlign="Right" format='C2' sortComparer={sortComparer}/>
format={formatOption} sortComparer={sortComparer}/>
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
import {loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as numberingSystems from './numberingSystems.json'
function App() {
const formatOption: object = { type: 'date', format: 'yyyy-MMM-dd' };
const locale: string = 'ar';
setCulture('ar');
setCurrencyCode('QAR');
loadCldr(
cagregorian,
currencies,
numbers,
timeZoneNames,
numberingSystems
);
const sortComparer = (reference: string, comparer: string, sortOrder:
string) => {
const referenceDate = new Date(reference);
const comparerDate = new Date(comparer);
if (typeof reference === 'number' && typeof comparer === 'number') {
// Numeric column sorting
return sortOrder === 'Ascending' ? comparer - reference : reference -
comparer;
} else if (!isNaN(referenceDate.getTime()) &&
!isNaN(comparerDate.getTime())) {
// Date column sorting
return sortOrder === 'Ascending' ? comparerDate.getTime() -
referenceDate.getTime() : referenceDate.getTime() - comparerDate.getTime();
}
else {

// Default sorting for other types

const intlCollator = new Intl.Collator(undefined, { sensitivity:
'variant', usage: 'sort' });
const comparisonResult = intlCollator.compare(reference, comparer);
return sortOrder === 'Ascending' ? -comparisonResult :
comparisonResult;
}
};
return <GridComponent dataSource={data} allowSorting={true} locale={locale}
height={300}>
<ColumnsDirective>
textAlign="Right" sortComparer={sortComparer}/>
width='100' sortComparer={sortComparer}/>
textAlign="Right" format='C2' sortComparer={sortComparer}/>
format={formatOption} sortComparer={sortComparer}/>
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

How to customize sort icon

To customize the sort icon in the Grid, you can override the default grid classes .e-icon-ascending and
.e-icon-descending with custom content using CSS. Simply specify the desired icons or symbols using the
content property as mentioned below
`css
.e-grid .e-icon-ascending::before {
content: '\e306';
}
.e-grid .e-icon-descending::before {
content: '\e304';
}
`
In the below sample, grid is rendered with a customized sort icon.
APP.JSX
function App() {
columns: [{ field: 'CustomerID', direction: 'Descending' }, { field:
'ShipCity', direction: 'Ascending' }]
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
function App() {

columns: [{ field: 'CustomerID', direction: 'Descending' }, { field:

'ShipCity', direction: 'Ascending' }]
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{


Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Sort columns externally

The Grid component in Syncfusion's React suite allows you to customize the sorting of columns and
provides flexibility in sorting based on external interactions. You can sort columns, remove a sort
column, and clear sorting using an external button click.
Add sort columns
To sort a column externally, you can utilize the sortColumn method with parameters columnName,
direction and isMultiSort provided by the Grid component. This method allows you to programmatically
sort a specific column based on your requirements.

The following example demonstrates how to add sort columns to a grid. It utilizes the DropDownList
component to select the column and sort direction. When an external button is clicked, the sortColumn
method is called with the specified columnName, direction, and isMultiSort parameters.
APP.JSX
SortDirection, SortSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
let grid;
let dropColumn;
let dropdirection;
const columns = [
];
const direction = [
{ text: 'Ascending', value: 'Ascending' },
{ text: 'Descending', value: 'Descending' },
];
const field = { text: 'text', value: 'value' };
columns: [{ field: 'ShipName', direction: 'Ascending' }]
};
const addSortColumn = () => {
grid.sortColumn(dropColumn.value, dropdirection.value, true);
}
return (<div>
<div>
<label style={{ padding: "30px 20px 0 0" }}> Column name :</label>
<DropDownListComponent ref={dc => dropColumn = dc} index={0}
width='120' dataSource={columns}
fields={field}></DropDownListComponent></div>
<div>
<label style={{ padding: "30px 20px 0 0" }}> Sort direction :</label>
<DropDownListComponent ref={dd => dropdirection = dd} index={0}
width='120' dataSource={direction}
<ButtonComponent style={{ marginTop: "10px" }} cssClass='e-outline'
onClick={addSortColumn}>Add Sort Column</ButtonComponent>
<GridComponent ref={g => grid = g} dataSource={data} allowSorting={true}
<ColumnsDirective>
width='100' />
textAlign="Right" format='C'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='100'
/>
</ColumnsDirective>


};
export default App;
APP.TSX
SortDirection, SortSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
let dropColumn: DropDownListComponent | null;
let dropdirection: DropDownListComponent | null;
const columns: { [key: string]: Object; }[] = [
];
const direction: { [key: string]: Object; }[] = [
{ text: 'Ascending', value: 'Ascending' },
{ text: 'Descending', value: 'Descending' },
];
const field: Object = { text: 'text', value: 'value' };
columns: [{ field: 'ShipName', direction: 'Ascending' }]
};
(grid as GridComponent).sortColumn(((dropColumn as
DropDownListComponent).value as string), ((dropdirection as
DropDownListComponent).value as SortDirection), true);
}
return (<div>
<div>
<div>
<label style={{ padding: "30px 20px 0 0" }}> Sort direction :</label>
<DropDownListComponent ref={dd => dropdirection = dd} index={0}
width='120' dataSource={direction}
onClick={addSortColumn}>Add Sort Column</ButtonComponent>
<ColumnsDirective>
width='100' />


format='C' textAlign="Right" />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Remove sort columns

To remove a sort column externally, you can use the removeSortColumn method provided by the Grid
component. This method allows you to remove the sorting applied to a specific column.
The following example demonstrates how to remove sort columns. It utilizes the DropDownList
component to select the column. When an external button is clicked, the removeSortColumn method
is called to remove the selected sort column.
APP.JSX
function App() {
let grid;
let dropColumn;
const columns = [


{ text: 'ShipCity', value: 'ShipCity' },
{ text: 'ShipName', value: 'ShipName' }
];
columns: [{ field: 'CustomerID', direction: 'Ascending' }, { field:
'ShipName', direction: 'Descending' }]
};
grid.removeSortColumn(dropColumn.value);
}
return (<div>
<div>
onClick={addSortColumn}>Remove Sort Column</ButtonComponent>
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {
{ text: 'ShipCity', value: 'ShipCity' },
{ text: 'ShipName', value: 'ShipName' }
];
const field: Object = { text: 'text', value: 'value' };


};
const removeSortColumn = () => {
(grid as GridComponent).removeSortColumn(((dropColumn as
DropDownListComponent).value as string));
}
return (<div>
<div>
onClick={removeSortColumn}>Remove Sort Column</ButtonComponent>
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Clear sorting
To clear the sorting on an external button click, you can use the clearSorting method provided by the
Grid component. This method clears the sorting applied to all columns in the grid.
The following example demonstrates how to clear the sorting using clearSorting method in the external
button click.
APP.JSX
function App() {
let grid;
};
const clearSorting = () => {
grid.clearSorting();
}
return (<div>
onClick={clearSorting}>Clear Sorting</ButtonComponent>
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {


};
const clearSorting = () => {
(grid as GridComponent).clearSorting();
}
return (<div>
onClick={clearSorting}>Clear Sorting</ButtonComponent>
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Sorting events
The Grid component provides two events that are triggered during the sorting action such as
actionBegin and actionComplete. These events can be used to perform any custom actions before and
after the sorting action is completed.
1. actionBegin: actionBegin event is triggered before the sorting action begins. It provides a way to
perform any necessary operations before the sorting action takes place. This event provides a
parameter that contains the current grid state, including the current sorting column, direction,
and data.
2. actionComplete: actionComplete event is triggered after the sorting action is completed. It
provides a way to perform any necessary operations after the sorting action has taken place.
This event provides a parameter that contains the current grid state, including the sorted data
and column information.
The following example demonstrates how the actionBegin and actionComplete events work when
sorting is performed. The actionBegin event event is used to cancel the sorting of the OrderID column.
The actionComplete event is used to display a message.
APP.JSX
function App() {
if (args.requestType === 'sorting' && args.columnName === 'OrderID') {
args.cancel = true;
}
}
const actionComplete = (args) => {
setMessage(args.requestType + ' action completed for ' + args.columnName
+ ' column');
}
return (<div>
<div style={{ marginLeft: "100px" }}><p style={{ color: "red" }}
id="message">{message}</p></div>
<GridComponent dataSource={data} allowSorting={true} height={315}
actionBegin={actionBegin} actionComplete={actionComplete}>
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
};

export default App;
APP.TSX
SortEventArgs } from '@syncfusion/ej2-react-grids';
function App() {
const actionBegin = (args: SortEventArgs) => {
if (args.requestType === 'sorting' && args.columnName === 'OrderID') {
args.cancel = true;
}
}
const actionComplete = (args: SortEventArgs) => {
+ ' column');
}
return (<div>
<GridComponent dataSource={data} allowSorting={true} height={315}
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX

{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{

Link to the VideoGrid Grouping in React Grid component

Date(8379738e5),
}];
args.requestType refers to the current action being performed. For example in sorting, the
args.requestType value is sorting.
See also
• How to change loading indicator in React Grid
Grouping in React Grid component

The grouping feature in the Syncfusion React Grid allows you to organize data into a hierarchical
structure, making it easier to expand and collapse records. You can group the columns by simply
dragging and dropping the column header to the group drop area. To enable grouping in the grid, you
need to set the allowGrouping property to true. Additionally, you can customize the grouping options
using the groupSettings property.
To use the Grouping feature, need to inject Group module in the grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Group, Inject }
function App() {
return <GridComponent dataSource={data} allowGrouping={true}
height={267}>
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
</ColumnsDirective>
<Inject services={[Group]}/>
</GridComponent>;
}
;
export default App;
APP.TSX
function App() {

return <GridComponent dataSource={data} allowGrouping={true} height={267}>

<ColumnsDirective>
width='150' />
</ColumnsDirective>
<Inject services={[Group]} />
</GridComponent >
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),

},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},

{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* You can group and ungroup columns in the Grid by using the groupColumn and ungroupColumn
methods respectively.
* To disable grouping for a specific column, set the allowGrouping to false.
Initial group
To enable initial grouping in the Grid, you can use the groupSettings property and set the
groupSettings.columns property to an array of column names(field of the column) that you want to
group by. This feature is particularly useful when working with large datasets, as it allows you to quickly
organize and analyze the data based on specific criteria.
The following example demonstrates how to set an initial grouping for the CustomerID and ShipCity
columns during the initial rendering grid, by using the groupSettings.columns property.
APP.JSX


function App() {
const groupOptions = {
columns: ['CustomerID', 'ShipCity']
};
groupSettings={groupOptions} height={267}>
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Group,
GroupSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
function App() {
const groupOptions: GroupSettingsModel = {
columns: ['CustomerID', 'ShipCity']
};
<ColumnsDirective>
width='150' />
</ColumnsDirective>
</GridComponent >
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},

{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}];
You can group by multiple columns by specifying an array of column names in the columns property of
the groupSettings.
Prevent grouping for particular column
The Grid component provides the ability to prevent grouping for a particular column. This can be useful
when you have certain columns that you do not want to be included in the grouping process. It can be
achieved by setting the allowGrouping property of the particular ColumnDirective to false. The
following example demonstrates, how to disable grouping for CustomerID column.
APP.JSX
function App() {
height={267}>
<ColumnsDirective>
textAlign="Right"/>
width='150' allowGrouping={false}/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
function App() {

return <GridComponent dataSource={data} allowGrouping={true} height={267}>

<ColumnsDirective>
width='150' allowGrouping={false}/>
</ColumnsDirective>
</GridComponent >
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),

},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},

{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Hide drop area

By default, the Grid provides a drop area for grouping columns. This drop area allows you to drag and
drop columns to group and ungroup them. However, in some cases, you may want to prevent
ungrouping or further grouping a column after initial grouping.
To hide the drop area in the Syncfusion React Grid, you can set the groupSettings.showDropArea
property to false.
In the following example, the EJ2 Toggle Switch Button component is added to hide or show the drop
area. When the switch is toggled, the change event is triggered and the groupSettings.showDropArea
property of the grid is updated accordingly.
APP.JSX
import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-
buttons';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Group,
GroupSettingsModel } from '@syncfusion/ej2-react-grids';


function App() {
let grid;
columns: ['CustomerID', 'ShipCity'],
showDropArea: false
};
const onSwitchChange = (args) => {
if (args.checked) {
grid.groupSettings.showDropArea = true;
}
else {
grid.groupSettings.showDropArea = false;
}
}
return (
<div><label style={{ padding: "10px 10px" }}>Hide or show drop
area</label>
<SwitchComponent change={onSwitchChange}></SwitchComponent>
allowGrouping={true} groupSettings={groupOptions} height={315}>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
</GridComponent ></div>)
};
export default App;
APP.TSX
buttons';
function App() {
showDropArea: false
};
const onSwitchChange = (args: ChangeEventArgs) => {
if (args.checked) {
(grid as GridComponent).groupSettings.showDropArea = true;
}
else {

(grid as GridComponent).groupSettings.showDropArea = false;

}
}
return (
<div><label style={{ padding: "10px 10px" }}>Hide or show drop
area</label>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
By default, the group drop area will be shown only if there is at least one column available to group.
Show the grouped column
The Syncfusion React Grid has a default behavior where the grouped column is hidden, to provide a
cleaner and more focused view of your data. However, if you prefer to show the grouped column in the
grid, you can achieve this by setting the groupSettings.showGroupedColumn property to true.

In the following example, the EJ2 Toggle Switch Button component is added to hide or show the
grouped columns. When the switch is toggled, the change event is triggered and the
groupSettings.showGroupedColumn property of the grid is updated accordingly.
APP.JSX
buttons';
function App() {
let grid;
showGroupedColumn: true
};
if (args.checked) {
grid.groupSettings.showGroupedColumn = false;
}
else {
grid.groupSettings.showGroupedColumn = true;
}
}
return (
<div><label style={{ padding: "10px 10px" }}>Hide or show grouped
columns</label>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
buttons';
function App() {


showGroupedColumn: true
};
if (args.checked) {
(grid as GridComponent).groupSettings.showGroupedColumn = false;
}
else {
(grid as GridComponent).groupSettings.showGroupedColumn = true;
}
}
return (
<div><label style={{ padding: "10px 10px" }}>Hide or show grouped
column</label>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Reordering on grouped columns

The Syncfusion React Grid allows you to easily reorder the grouped columns by dragging and dropping
the grouped header cells in the group drag area. By changing the order of the grouped columns, the
corresponding changes are automatically reflected in the grouping hierarchy of the grid. The grid
dynamically adjusts the grouping based on the reordered columns in the group drag area. Additionally,
you can also drop new columns into specific positions within the group drag area.
To enable this feature, you have to set the groupSettings.allowReordering property as true. This is
demonstrated in the sample below.
APP.JSX
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-
grids';
import { GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids';
function App() {
let grid;
columns: ['CustomerID'],
allowReordering: true
};
return (<div>
<GridComponent dataSource={data} allowGrouping={true}
groupSettings={groupOptions} height={240} ref={g => grid = g}>
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
width='150'/>
width='150'/>
</ColumnsDirective>
</GridComponent></div>);
}
;
export default App;
APP.TSX
grids';
import { Grid, GridComponent, Group, GroupSettingsModel, Inject } from
'@syncfusion/ej2-react-grids'
function App() {


allowReordering: true
};
return (<div>
<GridComponent dataSource={data} allowGrouping={true}
groupSettings={groupOptions}
height={240} ref={g => grid = g}>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Sort grouped columns in descending order during initial grouping

By default, grouped columns are sorted in ascending order. However, you can sort them in descending
order during initial grouping by setting the field and direction in the sortSettings.columns property.
The following example demonstrates how to sort the CustomerID column by setting the
sortSettings.columns property to Descending during the initial grouping of the grid.
APP.JSX

import { ColumnDirective, ColumnsDirective, GridComponent, Group, Inject,

Sort } from '@syncfusion/ej2-react-grids';
function App() {
columns: [{ field: 'CustomerID', direction: 'Descending' }]
};
columns: ['CustomerID']
};
allowSorting={true} height={267} sortSettings={sortingOptions}
groupSettings={groupOptions}>
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
</ColumnsDirective>
<Inject services={[Group, Sort]}/>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Group, Inject,
Sort } from '@syncfusion/ej2-react-grids';
function App() {
columns: [{ field: 'CustomerID', direction: 'Descending' }]
};
columns: ['CustomerID']
};
allowSorting={true} height={267} sortSettings={sortingOptions}
groupSettings={groupOptions}>
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
</ColumnsDirective>
<Inject services={[Group, Sort]}/>
</GridComponent >
};
export default App;

DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Group with paging

The Grid component supports grouping columns with paging feature. When grouping is applied, the grid
displays aggregated information and total items based on the current page. However, by default, the
group footer and group caption footer does not consider the aggregated information and total items
from other pages. To get additional details from other pages, set the
groupSettings.disablePageWiseAggregates property to false.
If remote data is bound to grid dataSource, two requests will be sent when performing grouping action
one for getting the grouped data and another for getting aggregate details and total items count.
Group by format
By default, columns are grouped by the data or value present for the particular row. However, you can
also group numeric or datetime columns based on the specified format. To enable this feature, you need
to set the enableGroupByFormat property of the corresponding grid column. This feature allows you to
group numeric or datetime columns based on a specific format.
The following example demonstrates how to perform a group action using the enableGroupByFormat
property for the OrderDate and Freight columns of the grid.
APP.JSX
function App() {

columns: ['OrderDate', 'Freight'],

showDropArea: false
};
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
format='yMMM' enableGroupByFormat={true} width='150'/>
<ColumnDirective field='Freight' headerText='Freight' format='C2'
enableGroupByFormat={true} width='150'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Group,
GroupSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
function App() {
columns: ['OrderDate', 'Freight'],
showDropArea: false
};
<ColumnsDirective>
width='150' />
format='yMMM' enableGroupByFormat={true} width='150' />
enableGroupByFormat={true} width='150' />
</ColumnsDirective>
</GridComponent >
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',


},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Numeric columns can be grouped based on formats such as currency or percentage, while datetime
columns can be grouped based on specific date or time formats.
Show grouped rows based on page size
Showing grouped column rows based on the page size in Syncfusion React Grid is useful when you have
grouped data and want to control the number of grouped rows displayed per page.
The Grid component allows you to display the number of records based on the pageSize. However, by
default, the pageSize applies to individual grid rows, not to grouped rows. If you want to show grouped
column rows based on the pageSize, you can achieve it by using a custom implementation.
Customizing the generateQuery method of the Data prototype allows you to modify the query used
for data retrieval. By doing so, you can achieve the display of grouped rows based on the page size
according to your specific requirements. This can be achieved in the below example.
APP.JSX
import { Data, Group, Page } from '@syncfusion/ej2-react-grids';
const oldGenerateQuery = Data.prototype.generateQuery;
Data.prototype.generateQuery = function() {
const query = oldGenerateQuery.call(this, true);
// Check if 'pageQuery' is available in the prototype chain
if (Data.prototype.hasOwnProperty('pageQuery')) {
const pageQueryFn = Data.prototype['pageQuery'];
pageQueryFn.call(this, query);
}
return query;
};
function App() {
let grid;

const groupOptions = { showGroupedColumn: false, columns: ['ShipCountry']

};
return <GridComponent ref={g => grid = g} allowGrouping={true}
groupSettings={groupOptions} allowPaging={true}
dataSource={data}>
<ColumnsDirective>
width='100' />
width='100' />
format="C2" />
</ColumnsDirective>
<Inject services={[Group, Page]} />
</GridComponent>
};
export default App;
APP.TSX
GroupSettingsModel, PageSettingsModel } from '@syncfusion/ej2-react-grids';
import { Data, Group, Page } from '@syncfusion/ej2-react-grids';
import { Query } from '@syncfusion/ej2-data';
const oldGenerateQuery = Data.prototype.generateQuery;
Data.prototype.generateQuery = function() {
const query = oldGenerateQuery.call(this, true);
// Check if 'pageQuery' is available in the prototype chain
if (Data.prototype.hasOwnProperty('pageQuery')) {
const pageQueryFn = Data.prototype['pageQuery'] as (query: Query) =>
void;
pageQueryFn.call(this, query);
}
return query;
};
function App() {
const groupOptions: GroupSettingsModel = { showGroupedColumn: false,
columns: ['ShipCountry'] };
return <GridComponent ref={g => grid = g} allowGrouping={true}
groupSettings={groupOptions} allowPaging={true}
dataSource={data}>
<ColumnsDirective>
width='100' />


width='100' />
format="C2" />
</ColumnsDirective>
<Inject services={[Group, Page]} />
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Collapse all grouped rows at initial rendering

The Syncfusion React Grid offers a convenient feature to expand or collapse grouped rows, allowing you
to control the visibility of grouped data. The option is useful when dealing with a large dataset that
contains many groups, and there is a need to provide a summarized view by initially hiding the details.
To collapse all grouped rows at the initial rendering of the Grid using the dataBound event along with
the collapseAll method.
The following example demonstrates how to collapse all grouped rows at the initial rendering.
APP.JSX
import { Group } from '@syncfusion/ej2-react-grids';
function App() {

let initial = true;

const groupOptions = { columns: ['ShipCity'] };
let gridObj;
if (gridObj && initial === true) {
gridObj.groupModule.collapseAll();
initial = false;
}
};
return <GridComponent dataSource={data} ref={grid => gridObj = grid}
dataBound={dataBound} allowGrouping={true} groupSettings={groupOptions}
height={267}>
<ColumnsDirective>
textAlign="Right"/>
width='150'/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
import { Grid, Group, GroupSettingsModel } from '@syncfusion/ej2-react-
grids';
function App() {
let initial = true;
const groupOptions: GroupSettingsModel = { columns: ['ShipCity'] };
let gridObj: Grid | null;
const dataBound = (): void => {
if (gridObj && initial === true) {
gridObj.groupModule.collapseAll();
initial = false;
}
}
return <GridComponent dataSource={data} ref={grid => gridObj = grid}
<ColumnsDirective>
width='150' />
</ColumnsDirective>

</GridComponent >
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{


Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
You can also collapse all the grouped rows at the initial rendering using the groupCollapseAll method
inside the dataBound event. This is demonstrated in the below code snippet,
`typescript
if (initial === true) {
(grid as GridComponent).groupCollapseAll();
initial = false;
}
}
`
The collapse all approach is suggested for a limited number of records since collapsing every grouped
record takes some time. If you have a large dataset, it is recommended to use lazy-load grouping. This
approach is also applicable for the groupExpandAll method.
Group or ungroup column externally
By default, the Syncfusion Grid supports interaction-oriented column grouping, where users manually
group columns by dragging and dropping them into the grouping area of the grid. Grid provides an

ability to group and ungroup a column using groupColumn and ungroupColumn methods. These
methods provide a programmatic approach to perform column grouping and ungrouping.
The following example demonstrates how to group and upgroup the columns in a grid. It utilizes the
DropDownList component to select the column. When an external button is clicked, the groupColumn
and ungroupColumn methods are called to group or ungroup the selected column.
APP.JSX
function App() {
let grid;
let dropColumn;
const columns = [
{ text: 'CustomerID', value: 'CustomerID' },
{ text: 'OrderID', value: 'OrderID' },
{ text: 'Ship City', value: 'ShipCity' },
{ text: 'Ship Name', value: 'ShipName' },
];
showDropArea: false
};
const groupColumn = () => {
grid.groupColumn(dropColumn.value);
}
const unGroupColumn = () => {
grid.ungroupColumn(dropColumn.valu);
}
return (
<div>
<DropDownListComponent ref={drop => dropColumn = drop} index={0}
width={120} dataSource={columns} fields={field}></DropDownListComponent><br
/>
<ButtonComponent style={{ marginTop: "10px" }} id="group" cssClass="e-
outline" onClick={groupColumn}>GroupColumn</ButtonComponent>
<ButtonComponent style={{ marginTop: "10px" }} id="ungroup"
cssClass="e-outline" onClick={unGroupColumn}>UnGroupColumn</ButtonComponent>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>


};
export default App;
APP.TSX
function App() {
{ text: 'CustomerID', value: 'CustomerID' },
{ text: 'OrderID', value: 'OrderID' },
{ text: 'Ship City', value: 'ShipCity' },
{ text: 'Ship Name', value: 'ShipName' },
];
const field: object = { text: 'text', value: 'value' };
showDropArea: false
};
const groupColumn = () => {
(grid as GridComponent).groupColumn(((dropColumn as
}
const unGroupColumn = () => {
(grid as GridComponent).ungroupColumn(((dropColumn as
}
return (
<div>
<DropDownListComponent ref={drop => dropColumn = drop} index={0}
width={120} dataSource={columns} fields={field}></DropDownListComponent><br
/>
<ButtonComponent style={{ marginTop: "10px" }} id="group" cssClass="e-
outline" onClick={groupColumn}>GroupColumn</ButtonComponent>
<ButtonComponent style={{ marginTop: "10px" }} id="ungroup"
cssClass="e-outline" onClick={unGroupColumn}>UnGroupColumn</ButtonComponent>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />

</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',

},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},

{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Expand or collapse externally

The Syncfusion React Grid offers a convenient feature to expand or collapse grouped rows, allowing you
to control the visibility of grouped data. This section will provide guidance on enabling this functionality
and integrating it into your application using the Grid properties and methods.
Expand or collapse all grouped rows
Grid provides an ability to expand or collapse grouped rows using groupExpandAll and groupCollapseAll
methods respectively.
In the following example, the EJ2 Toggle Switch Button component is added to expand or collapse
grouped rows. When the switch is toggled, the change event is triggered and the groupExpandAll and
groupCollapseAll methods are called to expand or collapse grouped rows.
APP.JSX
buttons';
function App() {
let grid;

showDropArea: false
};
if (args.checked) {
grid.groupCollapseAll();
}
else {
grid.groupExpandAll();
}
}
return (
<div><label style={{ padding: "10px 10px" }}>Expand or collapse
rows</label>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
buttons';
function App() {
showDropArea: false
};
if (args.checked) {
(grid as GridComponent).groupCollapseAll();
}
else {
(grid as GridComponent).groupExpandAll();
}
}
return (
<div><label style={{ padding: "10px 10px" }}>Expand or collapse
rows</label>

<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Expand or collapse selected grouped row

Expanding or collapsing selected grouped rows in a Syncfusion React Grid involves implementing the
functionality to expand or collapse grouped records programatically.
To enable the expand and collapse functionality for grouped rows in a grid, you can utilize the
expandCollapseRows method. This method is designed to handle two scenarios such as expanding
collapsed grouped records and collapsing expanded grouped records.
To implement this functionality, follow these steps:
1. Include an input element to capture the grouped row index.

2. Add a button element with a click event binding to trigger the onExpandCollapseButtonClick
method. This method retrieve the grouped rows from the grid's content table using the
querySelectorAll method.
3. Check if there are any grouped rows available.
4. If grouped rows exist, locate the group caption element based on the entered row index.
5. Call the expandCollapseRows method of the grid's group module, passing the group caption
element to toggle its expand/collapse state.
The following example demonstrates the function that collapses the selected row using an external
button click.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Group }
function App() {
let grid;
let textbox;
showDropArea: false
};
const onExpandCollapseButtonClick = () => {
const groupedRows =
Array.from(grid.getContentTable().querySelectorAll('.e-recordplusexpand, .e-
recordpluscollapse'));
const groupedRowIndex = parseInt(textbox.value);
if (groupedRows.length >= 0 && groupedRowIndex < groupedRows.length) {
setMessage('');
const groupCaptionElement = groupedRows[groupedRowIndex];
grid.groupModule.expandCollapseRows(groupCaptionElement);
} else {
setMessage('The entered index exceeds the total number of grouped rows.
Please enter a valid grouped index.');
}
}
return (
<div><TextBoxComponent ref={t => textbox = t} type='number'
placeholder="Enter Grouped Row Index" width={200} ></TextBoxComponent>
<ButtonComponent onClick={onExpandCollapseButtonClick}>Collapse or
Expand Row</ButtonComponent>
<p style={{ color: "red" }}>{message}</p>
<ColumnsDirective>
width='150' />


width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {
let textbox: TextBoxComponent | null;
showDropArea: false
};
const onExpandCollapseButtonClick = () => {
const groupedRows = Array.from((grid as
GridComponent).getContentTable().querySelectorAll('.e-recordplusexpand, .e-
recordpluscollapse'));
const groupedRowIndex: number = parseInt((textbox as
TextBoxComponent).value);
if (groupedRows.length >= 0 && groupedRowIndex < groupedRows.length) {
setMessage('');
const groupCaptionElement = groupedRows[groupedRowIndex];
(grid as
GridComponent).groupModule.expandCollapseRows(groupCaptionElement);
} else {
setMessage('The entered index exceeds the total number of grouped rows.
Please enter a valid grouped index.');
}
}
return (<div>
<TextBoxComponent ref={t => textbox = t} type='number'
placeholder="Enter Grouped Row Index" width={200}></TextBoxComponent>
<ButtonComponent onClick={onExpandCollapseButtonClick}>Collapse or
Expand Row</ButtonComponent>
<p style={{ color: "red" }}>{message}</p>
<ColumnsDirective>
width='150' />


width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Clear grouping
The clear grouping feature in the Syncfusion React Grid allows you to removing all the grouped columns
from the grid. This feature provides a convenient way to clear the grouping of columns in your
application.
To clear all the grouped columns in the Grid, you can utilize the clearGrouping method of the grid.
The following example demonstrates how to clear the grouping using clearGroup method in the
external button click.
APP.JSX
function App() {
let grid;


};
const clearGroup = () => {
grid.clearGrouping();
}
return (
<div>
<ButtonComponent onClick={clearGroup}>Clear Grouping</ButtonComponent>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {
};
const clearGroup = () => {
(grid as GridComponent).clearGrouping();
}
return (
<div>
<ButtonComponent onClick={clearGroup}>Clear Grouping</ButtonComponent>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>

};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{


Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Grouping events
The Grid component provides two events that are triggered during the group action such as actionBegin
and actionComplete. The actionBegin event is triggered before the group action starts, and the
actionComplete event is triggered after the group action is completed. You can use these events to
perform any custom action based on the grouping.
1. actionBegin event: actionBegin event is triggered before the group action begins. It provides a
way to perform any necessary operations before the group action takes place. This event
provides a parameter that contains the current grid state, including the current group field
name, requestType information and etc.
2. actionComplete event: actionComplete event is triggered after the group action is completed.
It provides a way to perform any necessary operations after the group action has taken place.
This event provides a parameter that contains the current grid state, including the grouped data
and column information and etc.
The following example demonstrates how the actionBegin and actionComplete events work when
grouping is performed. The actionBegin event event is used to cancel the grouping of the OrderID
column. The actionComplete event is used to display a message.
APP.JSX

import { ColumnDirective, ColumnsDirective, GridComponent, GroupEventArgs,

Inject, Group } from '@syncfusion/ej2-react-grids';
function App() {
if (args.requestType === 'grouping' && args.columnName === 'OrderID') {
args.cancel = true;
}
}
if (args.requestType === 'grouping') {
+ ' column');
}
else{
setMessage('');
}
}
return (<div>
<GridComponent dataSource={data} allowGrouping={true} height={315}
<ColumnsDirective>
width='100' />
/>
/>
</ColumnsDirective>
};
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, GroupEventArgs,
Inject, Group } from '@syncfusion/ej2-react-grids';
function App() {
const actionBegin = (args: GroupEventArgs) => {
if (args.requestType === 'grouping' && args.columnName === 'OrderID') {
args.cancel = true;
}
}
const actionComplete = (args: GroupEventArgs) => {

if (args.requestType === 'grouping') {

+ ' column');
}
else{
setMessage('');
}
}
return (<div>
<GridComponent dataSource={data} allowGrouping={true} height={315}
<ColumnsDirective>
width='100' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',

'HomePhone': '(206) 555-9857',

'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
\
management.\


'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 5,
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{

'EmployeeID': 6,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,

'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
export let sdata: Object[] = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
}];
The args.requestType property represents the name of the current action being performed. For
instance, during grouping, the args.requestType value will be grouping.

Link to the VideoGrid Filtering in React Grid component
Limitations
• Grouping is not compatible with the following features:

1. Autofill
See also
• Exporting grouped records
Filtering in React Grid component

Filtering is a powerful feature in the Syncfusion Grid component that enables you to selectively view
data based on specific criteria. It allows you to narrow down large datasets and focus on the information
you need, thereby enhancing data analysis and decision-making.
To use filter, inject Filter module in the grid.
To enable filtering in the Grid, you need to set the allowFiltering property of the Grid component to
true. Once filtering is enabled, you can configure various filtering options through the filterSettings
property of the Grid component. This property allows you to define the behavior and appearance of the
filter.
Here is an example that demonstrates the default filtering feature of the grid:
APP.JSX
grids';
import { Filter, GridComponent, Inject, Page, Sort } from '@syncfusion/ej2-
react-grids'
function App() {
return <GridComponent dataSource={data} allowFiltering={true}
allowPaging={true} pageSettings={pageSettings} allowSorting={true}>
<ColumnsDirective>
width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd'
width='100' />
</ColumnsDirective>
<Inject services={[Filter, Page, Sort]} />
</GridComponent>
}
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, PageSettingsModel } from


react-grids'
function App() {
allowPaging={true} pageSettings={pageSettings} allowSorting={true}>
<ColumnsDirective>
width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd'
width='100' />
</ColumnsDirective>
</GridComponent>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* You can apply and clear filtering, by using filterByColumn and clearFiltering methods.
* To disable Filtering for a particular column, by specifying allowFiltering to false.

Initial filter
To apply an initial filter, you need to specify the filter criteria using the predicate object in
filterSettings.columns. The predicate object represents the filtering condition and contains properties
such as field, operator, and value.
Here is an example of how to configure the initial filter using the predicate object:
APP.JSX
grids';
import { Filter, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
function App() {
const filterOptions = {
columns: [
{
field: 'ShipCity', matchCase: false,
operator: 'startswith', predicate: 'and', value: 'reims'
},
{
field: 'ShipName', matchCase: false, operator: 'startswith',
predicate: 'and', value: 'Vins et alcools Chevalier'
}
]
};
filterSettings={filterOptions} height={273}>
<ColumnsDirective>
width='100' />
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>;
}
;
export default App;
APP.TSX
grids';
import { Filter, FilterSettingsModel, GridComponent, Inject } from
function App() {
const filterOptions: FilterSettingsModel = {
columns: [

{
field: 'ShipCity', matchCase: false,
operator: 'startswith', predicate: 'and', value: 'reims'
},
{
field: 'ShipName', matchCase: false, operator: 'startswith',
predicate: 'and', value: 'Vins et alcools Chevalier'
}
]
};
filterSettings={filterOptions}
height={273}>
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Initial filter with multiple values for same column

In the Syncfusion React Grid, you can establish an initial filter containing multiple values for a particular
column, which helps you to preset filter conditions for a specific column using multiple values. This
functionality allows you to display a filtered records in the grid right after the grid is initially loaded.
To apply the filter with multiple values for same column at initial rendering, set the filter predicate
object in filterSettings.columns.
The following example demonstrates, how to perform an initial filter with multiple values for same
CustomerID column using filterSettings.columns and predicate.
APP.JSX
grids';
import { Filter, GridComponent, Inject } from '@syncfusion/ej2-react-grids'
function App() {
type: 'Excel',
columns: [{
field: 'CustomerID',
matchCase: false,
operator: 'startswith',
predicate: 'or',
value: 'VINET',
},
{
matchCase: false,
predicate: 'or',
value: 'HANAR',
}]
};
return <GridComponent dataSource={data} filterSettings={filterOptions}
allowFiltering={true} height={315} >
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
grids';


function App() {
type: 'Excel',
columns: [{
matchCase: false,
predicate: 'or',
value: 'VINET',
},
{
matchCase: false,
predicate: 'or',
value: 'HANAR',
}]
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Initial filter with multiple values for different columns

By applying an initial filter with multiple values for different columns in the Syncfusion React Grid, you
have the flexibility to set predefined filter settings for each column. This results in a filtered records of
the grid right after the grid is initially loaded.
To apply the filter with multiple values for different column at initial rendering, set the filter predicate
object in filterSettings.columns.
The following example demonstrates how to perform an initial filter with multiple values for different
Order ID and Customer ID columns using filterSettings.columns and predicate.
APP.JSX
grids';
function App() {
type: 'Excel',
columns: [
{
matchCase: false,
predicate: 'or',
value: 'VINET',
},
{
matchCase: false,
predicate: 'or',
value: 'HANAR',
},
{
field: 'OrderID',
matchCase: false,
operator: 'lessThan',
predicate: 'or',
value: 10250,
},
{
field: 'OrderID',
matchCase: false,
operator: 'notEqual',
predicate: 'or',
value: 10262,
},

]
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
APP.TSX
grids';
function App() {
type: 'Excel',
columns: [
{
matchCase: false,
predicate: 'or',
value: 'VINET',
},
{
matchCase: false,
predicate: 'or',
value: 'HANAR',
},
{
field: 'OrderID',
matchCase: false,
operator: 'lessThan',
predicate: 'or',
value: 10250,
},
{
field: 'OrderID',
matchCase: false,
operator: 'notEqual',
predicate: 'or',
value: 10262,

},
]
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Filter operators
The Syncfusion Grid component provides various filter operators that can be used to define filter
conditions for columns. The filter operator for a column can be defined using the operator property in
the filterSettings.columns object.
The available operators and its supported data types are,
Operator |Description |Supported Types
a*b |Everything that starts with "a" and ends with "b".
a* |Everything that starts with "a".

*b |Everything that ends with "b".

a |Everything that has an "a" in it.
ab* |Everything that has an "a" in it, followed by anything, followed by a "b", followed by anything.
LIKE filtering
The LIKE filter can process single search patterns using the "%" symbol, retrieving values matching the
specified patterns. The following Grid features support LIKE filtering on string-type columns:
• Filter Menu
• Filter Bar with the filterSettings.showFilterBarOperator property enabled on the Grid
filterSettings.
• Custom Filter of Excel filter type.
For example:
Operator |Description
%ab% |Returns all the value that are contains "ab" character.
ab% |Returns all the value that are ends with "ab" character.
%ab |Returns all the value that are starts with "ab" character.

By default, the Syncfusion React Grid uses different filter operators for different column types. The
default filter operator for string type columns is startsWith, for numerical type columns is equal, and for
boolean type columns is also equal.
Diacritics filter
The diacritics filter feature in the Syncfusion React Grid is useful when working with text data that
includes accented characters (diacritic characters). By default, the grid ignores these characters during
filtering. However, if you need to consider diacritic characters in your filtering process, you can enable
this feature by setting the filterSettings.ignoreAccent property to true using the filterSettings.
Consider the following sample where the ignoreAccent property is set to true in order to include
diacritic characters in the filtering process:
APP.JSX
grids';
import { Filter, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
function App() {
ignoreAccent: true
};


<ColumnsDirective>
<ColumnDirective field='Name' headerText='Name' width='140' />
</ColumnsDirective>
</GridComponent>;
};
export default App;
APP.TSX
grids';
function App() {
ignoreAccent: true
};
<ColumnsDirective>
<ColumnDirective field='Name' headerText='Name' width='140' />
</ColumnsDirective>
</GridComponent>
};
export default App;
DATASOURCE.JSX
export let data = [
{
'EmployeeID': 1,
'Name': 'Aeróbics',
'id': 'list-01',
'CustomerID': 'VINET',
'ShipName': 'Vins et alcools Chevalier',
},
{
'EmployeeID': 2,

'Name': 'Aerógrafía en Agua',

'id': 'list-02',
'CustomerID': 'TOMSP',
'ShipName': 'Toms SpezialitAiten',
},
{
'EmployeeID': 3,
'Name': 'AerografÃa',
'id': 'list-03',
'CustomerID': 'TAMSP',
'ShipName': 'Suprames dalices',
},
{
'EmployeeID': 4,
'Name': 'Aeromodelaje',
'id': 'list-04',
'CustomerID': 'HANAA',
'ShipName': 'Ottilies Kaseladen'
},
{
'EmployeeID': 5,
'Name': 'Águilas',
'id': 'list-05',
'CustomerID': 'VICTE',
'ShipName': 'Centro comercial Moctezuma',
},
{
'EmployeeID': 6,
'Name': 'Álbumes de Delta',
'id': 'list-06',
'CustomerID': 'HANAR',
'ShipName': 'Que Delacia',
},
{
'EmployeeID': 7,
'Name': 'ÃÂ•lbumes de Música',
'id': 'list-07',
'CustomerID': 'SUPRD',
'ShipName': 'Ernst Handel'
},
{
'EmployeeID': 8,
'Name': 'Alusivos',
'id': 'list-08',
'CustomerID': 'CHOPS',
'ShipName': 'Richter Supermarkt'
},
{
'EmployeeID': 9,
'Name': 'Ãerografía',
'id': 'list-09',
'CustomerID': 'RICSU',
'ShipName': 'Wellington'
},
{
'EmployeeID': 10,
'Name': 'Análisis de Escritura a Mano',

'id': 'list-10',
'CustomerID': 'WELLI',
'ShipName': 'Victuailles'
}
];
DATASOURCE.TSX
export let data: { [key: string]: Object }[] = [
{
'EmployeeID': 1,
'Name': 'Aeróbics',
'id': 'list-01',
'CustomerID': 'VINET',
'ShipName': 'Vins et alcools Chevalier',
},
{
'EmployeeID': 2,
'Name': 'Aerógrafía en Agua',
'id': 'list-02',
'CustomerID': 'TOMSP',
'ShipName': 'Toms SpezialitAiten',
},
{
'EmployeeID': 3,
'Name': 'AerografÃa',
'id': 'list-03',
'CustomerID': 'TAMSP',
'ShipName': 'Suprames dalices',
},
{
'EmployeeID': 4,
'Name': 'Aeromodelaje',
'id': 'list-04',
'CustomerID': 'HANAA',
'ShipName': 'Ottilies Kaseladen'
},
{
'EmployeeID': 5,
'Name': 'Águilas',
'id': 'list-05',
'CustomerID': 'VICTE',
'ShipName': 'Centro comercial Moctezuma',
},
{
'EmployeeID': 6,
'Name': 'Álbumes de Delta',
'id': 'list-06',
'CustomerID': 'HANAR',
'ShipName': 'Que Delacia',
},
{
'EmployeeID': 7,
'Name': 'ÃÂ•lbumes de Música',
'id': 'list-07',
'CustomerID': 'SUPRD',

'ShipName': 'Ernst Handel'

},
{
'EmployeeID': 8,
'Name': 'Alusivos',
'id': 'list-08',
'CustomerID': 'CHOPS',
'ShipName': 'Richter Supermarkt'
},
{
'EmployeeID': 9,
'Name': 'Ãerografía',
'id': 'list-09',
'CustomerID': 'RICSU',
'ShipName': 'Wellington'
},
{
'EmployeeID': 10,
'Name': 'Análisis de Escritura a Mano',
'id': 'list-10',
'CustomerID': 'WELLI',
'ShipName': 'Victuailles'
}
];
Filtering with case sensitivity

The Syncfusion React Grid provides the flexibility to enable or disable case sensitivity during filtering.
This feature is useful when you want to control whether filtering operations should consider the case of
characters. It can be achieved by using the enableCaseSensitivity property within the filterSettings of
the grid.
Below is an example code demonstrating how to enable or disable case sensitivity while filtering:
APP.JSX
buttons';
import { ColumnDirective, ColumnsDirective, FilterSettingsModel } from
function App() {
let grid;
const filterSettings = { enableCaseSensitivity: false };
const onToggleCaseSensitive = (args) => {
if (args.checked) {
grid.filterSettings.enableCaseSensitivity = true;
}
else {
grid.filterSettings.enableCaseSensitivity = false;
}
}
return (<div>
<label style={{marginTop:'20px'}}> Enable Case Sensitivity </label>
<SwitchComponent change={onToggleCaseSensitive}></SwitchComponent>


allowFiltering={true} filterSettings={filterSettings} >
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
};
export default App;
APP.TSX
buttons';
import { ColumnDirective, ColumnsDirective, FilterSettingsModel } from
function App() {
const filterSettings: FilterSettingsModel = { enableCaseSensitivity: false
};
const onToggleCaseSensitive = (args: ChangeEventArgs) => {
if (args.checked) {
(grid as GridComponent).filterSettings.enableCaseSensitivity = true;
}
else {
(grid as GridComponent).filterSettings.enableCaseSensitivity = false;
}
}
return (<div>
<label style={{marginTop:'20px'}}> Enable Case Sensitivity </label>
<SwitchComponent change={onToggleCaseSensitive}></SwitchComponent>
allowFiltering={true} filterSettings={filterSettings} >
<ColumnsDirective>
width='100' />
width='100' />

</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',

},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},

{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Enable different filter for a column

The Syncfusion React Grid offers the flexibility to customize filtering behavior for different columns by
enabling various types of filters such as Menu, Excel, Checkbox. This feature allows you to tailor the
filtering experience to suit the specific needs of each column in your grid. For example, you might prefer
a menu-based filter for a category column, an Excel-like filter for a date column, and a checkbox filter for
a status column.
It can be achieved by adjusting the filter.type property based on your requirements.
Here's an example where the menu filter is enabled by default for all columns, but you can dynamically
modify the filter types through a dropdown:
APP.JSX
react-dropdowns';
import { Column, ColumnDirective, ColumnsDirective, FilterSettingsModel }
function App() {
let grid;
let typeDrop;
let fieldDrop;
const filterSettings = { type: 'Menu' };

let columnFilterSettings;
let fieldData = [];
let column;
fieldData = grid.getColumnFieldNames();
fieldDrop.dataSource = fieldData
}
const onFieldChange = (args) => {
typeDrop.enabled = true;
typeDrop.dataSource = ['Menu', 'CheckBox', 'Excel'];
column = grid.getColumnByField(args.value);
}
const onTypeChange = (args) => {
columnFilterSettings = { type: args.value };
column.filter = columnFilterSettings;
}
return (<div><div className="input-container">
<label><b>Select Column</b> </label>
<DropDownListComponent ref={field => fieldDrop = field} width={120}
onChange={onFieldChange} placeholder="Eg: OrderID"></DropDownListComponent>
<label><b>Select Filter Type</b> </label>
<DropDownListComponent ref={type => typeDrop = type} width={120}
onChange={onTypeChange} placeholder="Eg: Excel"
enabled={false}></DropDownListComponent></div>
allowFiltering={true} filterSettings={filterSettings} dataBound={dataBound} >
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
}
export default App;
APP.TSX
react-dropdowns';
import { Column, ColumnDirective, ColumnsDirective, FilterSettingsModel }
function App() {
let typeDrop: DropDownListComponent | null;

let fieldDrop: DropDownListComponent | null;

const filterSettings: FilterSettingsModel = { type: 'Menu' };
let columnFilterSettings: FilterSettingsModel;
let fieldData: string[] = [];
let column: Column;
fieldData = (grid as GridComponent).getColumnFieldNames();
(fieldDrop as DropDownListComponent).dataSource = fieldData
}
const onFieldChange = (args: ChangeEventArgs) => {
(typeDrop as DropDownListComponent).enabled = true;
(typeDrop as DropDownListComponent).dataSource = ['Menu', 'CheckBox',
'Excel'];
column = (grid as GridComponent).getColumnByField(args.value);
}
const onTypeChange = (args: ChangeEventArgs) => {
columnFilterSettings = { type: args.value };
column.filter = columnFilterSettings;
}
<label><b>Select Filter Type</b> </label>
<DropDownListComponent ref={type => typeDrop = type} width={120}
onChange={onTypeChange} placeholder="Eg: Excel"
allowFiltering={true} filterSettings={filterSettings} dataBound={dataBound} >
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},

{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{


Date(8377146e5),
},
{
Date(8379738e5),
}];
Change default filter operator for particular column

The Syncfusion Grid component provides the flexibility to change the default filter operator for a
particular column. By default, the filter operator for string-type columns is startsWith, for numerical-
type columns is equal, and for boolean-type columns is also equal. However, you may need to
customize the filter operator to better match the nature of the data in a specific column. This can be
achieved using the operator property within the filterSettings configuration.
Here's an example that demonstrates how to change the default filter operator column :
APP.JSX
react-dropdowns';
import { Column, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-
react-grids';
import { Filter, GridComponent, Inject, Page } from '@syncfusion/ej2-react-
grids'
import { data, stringOperatorsData, numericOperatorsData } from
'./datasource';
function App() {
let grid;
let operatorDrop;
let fieldDrop;
let availableOperator;
let fieldData = [];
let column;
fieldData = grid.getColumnFieldNames();
fieldDrop.dataSource = fieldData
}
const onFieldChange = (args) => {
operatorDrop.enabled = true;
column = grid.getColumnByField(args.value);
if(column) {
availableOperator = column.type === 'string' ? stringOperatorsData :
numericOperatorsData;
operatorDrop.dataSource = availableOperator;
}
}

const onOperatorChange = (args) => {

let filterOptions = { operator: args.value, showFilterBarStatus: true };
column.filter = filterOptions;
}
<label><b>Select Operator</b> </label>
<DropDownListComponent ref={operator => operatorDrop = operator}
width={120} onChange={onOperatorChange} placeholder="Eg: Excel"
allowFiltering={true} allowPaging={true} dataBound={dataBound} >
<ColumnsDirective>
width='100' />
<ColumnDirective field='Freight' headerText='Freight' format ='C'
width='100' />
</ColumnsDirective>
<Inject services={[Filter, Page]} />
}
export default App;
APP.TSX
react-dropdowns';
import { Column, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-
react-grids';
import { Filter, GridComponent, Inject, Page } from '@syncfusion/ej2-react-
grids'
import { data, stringOperatorsData, numericOperatorsData } from
'./datasource';
function App() {
let operatorDrop: DropDownListComponent | null;
let fieldDrop: DropDownListComponent | null;
let availableOperator:Object;
let fieldData: string[] = [];
let column: Column;
fieldData = (grid as GridComponent).getColumnFieldNames();
(fieldDrop as DropDownListComponent).dataSource = fieldData
}
const onFieldChange = (args: ChangeEventArgs) => {
(operatorDrop as DropDownListComponent).enabled = true;
column = (grid as GridComponent).getColumnByField(args.value);

console.log(args.value);
console.log(column);
if(column) {
availableOperator = column.type === 'string' ? stringOperatorsData :
numericOperatorsData;
(operatorDrop as DropDownListComponent).dataSource = availableOperator;
}
}
const onOperatorChange = (args: ChangeEventArgs) => {
let filterOptions = { operator: args.value, showFilterBarStatus: true };
column.filter = filterOptions;
}
<label><b>Select Operator</b> </label>
<DropDownListComponent ref={operator => operatorDrop = operator}
width={120} onChange={onOperatorChange} placeholder="Eg: Excel"
allowFiltering={true} allowPaging={true} dataBound={dataBound} >
<ColumnsDirective>
width='100' />
<ColumnDirective field='Freight' headerText='Freight' format ='C'
width='100' />
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
export let stringOperatorsData = [
'startsWith',
'endsWith',
'contains',
'isnotempty',

'isempty',
'isnotnull',
'isnull',
'notEqual',
'equal',
'doesnotcontain',
'doesnotendwith',
'doesnotstartwith',
];
export let numericOperatorsData = [
'equal',
'notEqual',
'greaterThan',
'greaterThanOrEqual',
'lessThan',
'lessThanOrEqual',
'isnull',
'isnotnull',
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{


Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
export let stringOperatorsData: Object[] = [
'startsWith',
'endsWith',
'contains',
'isnotempty',
'isempty',
'isnotnull',
'isnull',
'notEqual',
'equal',
'doesnotcontain',
'doesnotendwith',
'doesnotstartwith',
];
export let numericOperatorsData: Object[] = [
'equal',
'notEqual',
'greaterThan',
'greaterThanOrEqual',
'lessThan',
'lessThanOrEqual',
'isnull',
'isnotnull',
];

Filter grid programmatically with single and multiple values using method
Programmatic filtering in the Syncfusion React Grid with single and multiple values allows you to apply
filters to specific columns in the grid without relying on interactions through the interface.
This can be achieved by utilizing the filterByColumn method of the Grid.
The following example demostrates, how to programmatically filter the Grid using single and multiple
values for the OrderID and CustomerID columns. This is accomplished by calling the filterByColumn
method within an external button click function.
APP.JSX
grids';
function App() {
let grid;
type: 'Excel',
};
const onSingleValueFilter = () => {
grid.clearFiltering();
// filter OrderID column with single value
grid.filterByColumn('OrderID', 'equal', 10248);
}
const onMultipleValueFilter = () => {
// filter CustomerID column with multiple values
grid.filterByColumn('CustomerID', 'equal', [
'VINET',
'TOMSP',
'ERNSH',
]);
}
return (<div>
<ButtonComponent cssClass="e-outline"
onClick={onSingleValueFilter}>Filter with single value</ButtonComponent>
onClick={onMultipleValueFilter}>Filter with multiple values</ButtonComponent>
filterSettings={filterOptions} allowFiltering={true} height={315} >
<ColumnsDirective>
width='100' />
/>
/>
</ColumnsDirective>
};

export default App;
APP.TSX
grids';
function App() {
type: 'Excel',
};
const onSingleValueFilter = () => {
(grid as GridComponent).clearFiltering();
// filter OrderID column with single value
(grid as GridComponent).filterByColumn('OrderID', 'equal', 10248);
}
const onMultipleValueFilter = () => {
// filter CustomerID column with multiple values
(grid as GridComponent).filterByColumn('CustomerID', 'equal', [
'VINET',
'TOMSP',
'ERNSH',
]);
}
return (<div>
onClick={onSingleValueFilter}>Filter with single value</ButtonComponent>
onClick={onMultipleValueFilter}>Filter with multiple values</ButtonComponent>
filterSettings={filterOptions} allowFiltering={true} height={315} >
<ColumnsDirective>
width='100' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{


Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
How to get filtered records

Retrieving filtered records in the Syncfusion React Grid is essential when you want to work with data
that matches the currently applied filters. You can achieve this using available methods and properties
in the grid component.
1.Using the getFilteredRecords() method
The getFilteredRecords method is used to obtain an array of records that match the currently applied
filters on the grid.
This method retrieves an array of records that match the currently applied filters on the grid.
Here's an example of how to get the filtering data in a Syncfusion grid using the getFilteredRecords
method:
APP.JSX
grids';
import { Filter, GridComponent, Inject, Page, PageSettingsModel } from
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
let grid;
let filteredGrid;
const pageSettings = { pageSize: 10, pageCount: 5 };
let filteredData;
let showRecords;
let showWarning;
const [isFilteredGridVisible, setIsFilteredGridVisible] = useState(false);
const [isMsgWarningVisible, setIsMsgWarningVisible] = useState(false);

const getFilter = () => {

filteredData = grid.getFilteredRecords();
showRecords = filteredData.length > 0 ? true : false;
showWarning = !showRecords;
if (showRecords) {
filteredGrid.dataSource = filteredData;
}
setIsMsgWarningVisible(showWarning);
setIsFilteredGridVisible(showRecords);
}
const clear = () => {
showRecords = false;
showWarning = false;
setIsMsgWarningVisible(false);
setIsFilteredGridVisible(false);
}
return (<div><div id='msgWarning' style={{ display: isMsgWarningVisible ?
'block' : 'none' }}>
<MessageComponent content="No Records" cssClass="e-content-center"
severity="Warning"></MessageComponent></div>
<ButtonComponent cssClass="e-success" onClick={getFilter}>Get Filtered
<ButtonComponent cssClass='e-danger'
onClick={clear}>Clear</ButtonComponent>
allowFiltering={true} pageSettings={pageSettings} allowPaging={true}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
<div id='filteredGrid' style={{ display: isFilteredGridVisible ? 'block'
: 'none' }}>
<h3>Filtered Records</h3>
<GridComponent ref={fg => filteredGrid = fg} allowPaging={true}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>


</GridComponent>
</div></div>)
}
export default App;
APP.TSX
grids';
import { Filter, GridComponent, Inject, Page, PageSettingsModel } from
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
let filteredGrid: GridComponent | null;
const pageSettings: PageSettingsModel = { pageSize: 10, pageCount: 5 };
let filteredData;
let showRecords;
let showWarning;
const [isFilteredGridVisible, setIsFilteredGridVisible] = useState(false);
const [isMsgWarningVisible, setIsMsgWarningVisible] = useState(false);
const getFilter = () => {
filteredData = (grid as GridComponent).getFilteredRecords();
showRecords = filteredData.length > 0 ? true : false;
showWarning = !showRecords;
if (showRecords) {
(filteredGrid as GridComponent).dataSource = filteredData;
}
setIsMsgWarningVisible(showWarning);
setIsFilteredGridVisible(showRecords);
}
const clear = () => {
showRecords = false;
showWarning = false;
setIsMsgWarningVisible(false);
setIsFilteredGridVisible(false);
}
return (<div><div id='msgWarning' style={{ display: isMsgWarningVisible ?
'block' : 'none' }}>
<MessageComponent content="No Records" cssClass="e-content-center"
severity="Warning"></MessageComponent></div>
<ButtonComponent cssClass="e-success" onClick={getFilter}>Get Filtered
<ButtonComponent cssClass='e-danger'
onClick={clear}>Clear</ButtonComponent>
allowFiltering={true} pageSettings={pageSettings} allowPaging={true}>
<ColumnsDirective>


width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
<div id='filteredGrid' style={{ display: isFilteredGridVisible ? 'block'
: 'none' }}>
<h3>Filtered Records</h3>
<GridComponent ref={fg => filteredGrid = fg} allowPaging={true}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div></div>)
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
2.Using the properties in the FilterEventArgs object

Alternatively, you can use the properties available in the FilterEventArgs object to obtain the filter
record details.
• columns: This property returns the collection of filtered columns.

• currentFilterObject: This property returns the object that is currently filtered.
• currentFilteringColumn: This property returns the column name that is currently filtered.
To access these properties, you can use the actionComplete event handler as shown below:
`typescript
actionComplete(args: FilterEventArgs) {
let column = args.columns;
let object = args.currentFilterObject;
let name = args.currentFilteringColumn;
}
`
Clear filtering using methods
The Syncfusion Grid provides a method called clearFiltering to clear the filtering applied to the grid. This
method is used to remove the filter conditions and reset the grid to its original state.
Here's an example of how to clear the filtering in a Syncfusion grid using the clearFiltering method:
APP.JSX
grids';
import { Filter, GridComponent, Inject, Page, Sort, PageSettingsModel } from
function App() {
let grid;
const clearFilter = () => {
}
return (<div>
<ButtonComponent cssClass='e-primary' onClick={clearFilter}>Clear
allowFiltering={true} pageSettings={pageSettings} allowSorting={true}
allowPaging={true}>
<ColumnsDirective>


width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
}
export default App;
APP.TSX
grids';
import { Filter, GridComponent, Inject, Page, Sort, PageSettingsModel } from
function App() {
const clearFilter = () => {
}
return (<div>
<ButtonComponent cssClass='e-primary' onClick={clearFilter}>Clear
allowFiltering={true} pageSettings={pageSettings} allowSorting={true}
allowPaging={true}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
}
export default App;

DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',


},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},

{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Filtering events
Filtering events allow you to customize the behavior of the grid when filtering is applied. You can
prevent filtering for specific columns, show messages to users, or perform other actions to suit your
application's needs.
To implement filtering events in the Syncfusion React Grid, you can utilize the available events such as
actionBegin and actionComplete. These events allow you to intervene in the filtering process and
customize it as needed.
In the given example, the filtering is prevented for ShipCity column during actionBegin event.
APP.JSX
grids';
react-grids'
function App() {
if (args.requestType === 'filtering' && args.currentFilteringColumn ===
'ShipCity') {
args.cancel = true;
setMessage('The ' + args.type + ' event has been triggered and the ' +
args.requestType + ' action is cancelled for ' +
args.currentFilteringColumn);
}
}
if (args.requestType === 'filtering' && args.currentFilteringColumn) {

args.requestType + ' action for the ' + args.currentFilteringColumn + '
column has been successfully executed');
} else {
setMessage('');
}
}
return (<div>
<div id='message'>{message}</div>
<GridComponent dataSource={data} allowFiltering={true}
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
</GridComponent>
</div>)
}
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, FilterEventArgs } from
react-grids'
function App() {
const actionBegin = (args: FilterEventArgs) => {
if (args.requestType === 'filtering' && args.currentFilteringColumn ===
'ShipCity') {
args.cancel = true;
args.requestType + ' action is cancelled for ' +
args.currentFilteringColumn);
}
}
const actionComplete = (args: FilterEventArgs) => {
if (args.requestType === 'filtering' && args.currentFilteringColumn) {
args.requestType + ' action for the ' + args.currentFilteringColumn + '
column has been successfully executed');
} else {
setMessage('');
}
}
return (<div>

<div id='message'>{message}</div>
<GridComponent dataSource={data} allowFiltering={true}
<ColumnsDirective>
width='100' />
/>
</ColumnsDirective>
</GridComponent>
</div>)
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{


Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
See also
• Customizing Filter Dialog by using an additional parameter

• Hide sorting options on Excel filter dialog

Link to the VideoGrid Scrolling in React Grid component
Scrolling in React Grid component

The scrolling feature in the React Grid component allows you to navigate through the content that
extends beyond the visible area of the grid . It provides scrollbars that are automatically displayed when
the content exceeds the specified width or height of the grid element. This feature is useful when you
have a large amount of data or when the content needs to be displayed within a limited space. The
vertical and horizontal scrollbars will be displayed based on the following criteria:
• The vertical scrollbar appears when the total height of rows present in the grid exceeds its
element height.
• The horizontal scrollbar appears when the sum of columns width exceeds the grid element
width.
• The height and width are used to set the grid height and width, respectively.
The default value for heightand width is auto.

Set width and height
The React Grid component offers a straightforward method to tailor the width and height of the scroller
to meet your specific requirements. This is particularly useful when you want precise control over the
dimensions of the scroller. To achieve this, you can use pixel values as numbers for the width and height
properties of the Grid.
In the following example, the scrollbar is enabled, and the grid's height is set to 315 pixels, while the
width is set to 400 pixels:
APP.JSX
function App() {
return (<GridComponent dataSource={data} height={315} width={400}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='EmployeeID' headerText='EmployeeID'
width='120' textAlign='Right' />
width='150' />
width='150' />
<ColumnDirective field='ShipName' headerText='ShipName'
width='150' />
</ColumnsDirective>
</GridComponent>);
}
;
export default App;
APP.TSX


function App() {
return (<GridComponent dataSource={data} height={315} width={400}>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
<ColumnDirective field='ShipName' headerText='ShipName'
width='150' />
</ColumnsDirective>
</GridComponent>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Responsive with parent container

The Grid component allows you to create a responsive layout by making it fill its parent container and
automatically adjust its size based on the available space and changes in the container's dimensions.
This capability is particularly useful for building applications that need to adapt to various screen sizes
and devices.

To achieve this, you need to specify the width and height properties of the Grid as 100%. However, keep
in mind that setting the height property to 100% requires the Grid's parent element to have an explicit
height defined.
In the following example, the parent container has explicit height and width set, and the Grid container's
height and width are both set to 100%. This ensures that the Grid adjusts its size responsively based on
the dimensions of the parent container:
APP.JSX
function App() {
return (<div style={{ height: '500px', width: '600px' }}>
<GridComponent dataSource={data} height='100%' width='100%'>
<ColumnsDirective>
width='150' />
format='C2' />
<ColumnDirective field='ShipAddress' headerText='ShipAddress'
width='150' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
APP.TSX
function App() {
return (<div style={{ height: '500px', width: '600px' }}>
<GridComponent dataSource={data} height='100%' width='100%'>
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;

DATASOURCE.JSX
export let data = createLazyLoadData();
function createLazyLoadData() {
let lazyLoadData = [];
let customerid = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR',
'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK',
'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY',
'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', 'BLONP',
'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON', 'WANDK',
'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO',
'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK',
'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
let product = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Cajun
Seasoning', 'Chef Anton\'s Gumbo Mix', 'Grandma\'s Boysenberry Spread',
'Uncle Bob\'s Organic Dried Pears', 'Northwoods Cranberry Sauce', 'Mishi
Kobe Niku', 'Ikura', 'Queso Cabrales', 'Queso Manchego La Pastora', 'Konbu',
'Tofu', 'Genen Shouyu', 'Pavlova', 'Alice Mutton', 'Carnarvon Tigers',
'Teatime Chocolate Biscuits', 'Sir Rodney\'s Marmalade', 'Sir Rodney\'s
Scones',
'Gustaf\'s Knäckebröd', 'Tunnbröd', 'Guaraná Fantástica', 'NuNuCa Nuß-
Nougat-Creme', 'Gumbär Gummibärchen', 'Schoggi Schokolade', 'Rössle
Sauerkraut',
'Thüringer Rostbratwurst', 'Nord-Ost Matjeshering', 'Gorgonzola Telino',
'Mascarpone Fabioli', 'Geitost', 'Sasquatch Ale', 'Steeleye Stout', 'Inlagd
Sill',
'Gravad lax', 'Côte de Blaye', 'Chartreuse verte', 'Boston Crab Meat',
'Jack\'s New England Clam Chowder', 'Singaporean Hokkien Fried Mee', 'Ipoh
Coffee',
'Gula Malacca', 'Rogede sild', 'Spegesild', 'Zaanse koeken', 'Chocolade',
'Maxilaku', 'Valkoinen suklaa', 'Manjimup Dried Apples', 'Filo Mix', 'Perth
Pasties',
'Tourtière', 'Pâté chinois', 'Gnocchi di nonna Alice', 'Ravioli Angelo',
'Escargots de Bourgogne', 'Raclette Courdavault', 'Camembert Pierrot', 'Sirop
d\'érable',
'Tarte au sucre', 'Vegie-spread', 'Wimmers gute Semmelknödel', 'Louisiana
Fiery Hot Pepper Sauce', 'Louisiana Hot Spiced Okra', 'Laughing Lumberjack
Lager', 'Scottish Longbreads',
'Gudbrandsdalsost', 'Outback Lager', 'Flotemysost', 'Mozzarella di
Giovanni', 'Röd Kaviar', 'Longlife Tofu', 'Rhönbräu Klosterbier',
'Lakkalikööri', 'Original Frankfurter grüne Soße'];
let customername = ['Maria', 'Ana Trujillo', 'Antonio Moreno', 'Thomas
Hardy', 'Christina Berglund', 'Hanna Moos', 'Frédérique Citeaux', 'Martín
Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln',
'Victoria Ashworth', 'Patricio Simpson', 'Francisco Chang', 'Yang Wang',
'Pedro Afonso', 'Elizabeth Brown', 'Sven Ottlieb', 'Janine Labrune', 'Ann
Devon', 'Roland Mendel', 'Aria Cruz', 'Diego Roel',
'Martine Rancé', 'Maria Larsson', 'Peter Franken', 'Carine Schmitt',
'Paolo Accorti', 'Lino Rodriguez', 'Eduardo Saavedra', 'José Pedro Freyre',
'André Fonseca', 'Howard Snyder', 'Manuel Pereira',

'Mario Pontes', 'Carlos Hernández', 'Yoshi Latimer', 'Patricia McKenna',

'Helen Bennett', 'Philip Cramer', 'Daniel Tonini', 'Annette Roulet', 'Yoshi
Tannamuri', 'John Steel', 'Renate Messner', 'Jaime Yorres',
'Carlos González', 'Felipe Izquierdo', 'Fran Wilson', 'Giovanni Rovelli',
'Catherine Dewey', 'Jean Fresnière', 'Alexander Feuer', 'Simon Crowther',
'Yvonne Moncada', 'Rene Phillips', 'Henriette Pfalzheim',
'Marie Bertrand', 'Guillermo Fernández', 'Georg Pipps', 'Isabel de
Castro', 'Bernardo Batista', 'Lúcia Carvalho', 'Horst Kloss', 'Sergio
Gutiérrez', 'Paula Wilson', 'Maurizio Moroni', 'Janete Limeira', 'Michael
Holz',
'Alejandra Camino', 'Jonas Bergulfsen', 'Jose Pavarotti', 'Hari Kumar',
'Jytte Petersen', 'Dominique Perrier', 'Art Braunschweiger', 'Pascale
Cartrain', 'Liz Nixon', 'Liu Wong', 'Karin Josephs', 'Miguel Angel Paolino',
'Anabela Domingues', 'Helvetius Nagy', 'Palle Ibsen', 'Mary Saveley',
'Paul Henriot', 'Rita Müller', 'Pirkko Koskitalo', 'Paula Parente', 'Karl
Jablonski', 'Matti Karttunen', 'Zbyszek Piestrzeniewicz'];
let shipaddress = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W. Capital Way',
'722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry
House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
'4726 - 11th Ave. N.E.', '7 Houndstooth Rd.', '59 rue de l\'Abbaye',
'Luisenstr. 48', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old
Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham
Hollow\r\nWinchester Way',
'7 Houndstooth Rd.', '2817 Milton Dr.', 'Kirchgasse 6', 'Sierras de
Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton
Dr.', 'Mehrheimerstr. 369'];
let frieght = [10, 24, 12, 48, 36, 12, 102 , 18, 102,
1, 500, 2, 40, 250, 500, 20, 16, 10, 30, 24, 24, 12,
355, 20, 100];
let OrderID = 10248;
for (let i = 0; i < 5000; i++) {
lazyLoadData.push({
'OrderID': OrderID + i,
'CustomerID': customerid[Math.floor(Math.random() *
customerid.length)],
'CustomerName': customername[Math.floor(Math.random() *
customername.length)],
'shipAddress': shipaddress[Math.floor(Math.random() *
shipaddress.length)],
'ProductName': product[Math.floor(Math.random() *
product.length)],
'ProductID': i,
'Frieght': frieght[Math.floor(Math.random() * frieght.length)]
})
}
return lazyLoadData;
}
DATASOURCE.TSX
export let data: Object[] = createLazyLoadData();
function createLazyLoadData(): Object[] {
let lazyLoadData: Object[] = [];
let customerid: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD',
'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',


let product: string[] = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s
Cajun Seasoning', 'Chef Anton\'s Gumbo Mix', 'Grandma\'s Boysenberry Spread',
Scones',
Sauerkraut',
Sill',
Coffee',
Pasties',
d\'érable',
let customername: string[] = ['Maria', 'Ana Trujillo', 'Antonio Moreno',
'Thomas Hardy', 'Christina Berglund', 'Hanna Moos', 'Frédérique Citeaux',
'Martín Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln',


Holz',
let shipaddress: string[] = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W.
Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett
Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
let frieght: number[] = [10, 24, 12, 48, 36, 12, 102 , 18, 102,
1, 500, 2, 40, 250, 500, 20, 16, 10, 30, 24, 24, 12,
355, 20, 100];
let OrderID: number = 10248;
lazyLoadData.push({
product.length)],
'ProductID': i,
})
}
}
Sticky header
The React Grid component provides a feature that allows you to make column headers remain fixed
while scrolling, ensuring they stay visible at all times. To achieve this, you can utilize the
enableStickyHeader property by setting it to true.
In the below demo, the Grid headers will be sticky while scrolling the Grid's parent div element.
APP.JSX
function App() {
let grid;

const onChange = (args) => {

grid.enableStickyHeader = args.checked;
}
return (<div>
<label style={{ padding: "30px 20px 0 0" }}>Enable/Disable Sticky Header
</label>
<SwitchComponent change={onChange}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} >
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
APP.TSX
buttons';
function App() {
const onChange = (args: ChangeEventArgs) => {
(grid as GridComponent).enableStickyHeader = args.checked;
}
return (<div>
<label style={{ padding: "30px 20px 0 0" }}>Enable/Disable Sticky Header
</label>
<SwitchComponent change={onChange}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} >
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;

DATASOURCE.JSX
Scones',
Sauerkraut',
Sill',
Coffee',
Pasties',
d\'érable',


Holz',
let frieght = [10, 24, 12, 48, 36, 12, 102 , 18, 102,
1, 500, 2, 40, 250, 500, 20, 16, 10, 30, 24, 24, 12,
355, 20, 100];
for (let i = 0; i < 5000; i++) {
lazyLoadData.push({
product.length)],
'ProductID': i,
})
}
}
DATASOURCE.TSX


Scones',
Sauerkraut',
Sill',
Coffee',
Pasties',
d\'érable',


Holz',
1, 500, 2, 40, 250, 500, 20, 16, 10, 30, 24, 24, 12,
355, 20, 100];
lazyLoadData.push({
product.length)],
'ProductID': i,
})
}
}
Scroll to selected row

The React Grid component allows you to scroll the grid content to the position of the selected row,
ensuring that the selected row is automatically brought into view. This feature is particularly useful
when dealing with a large dataset and wanting to maintain focus on the selected row. To achieve this,
you can utilize the rowSelected event provided by the Grid.
The following example that demonstrates how to use the rowSelected event to scroll to the selected
row:
APP.JSX

function App() {
let grid;
{ text: 'Select count' },
{ text: '10', value: '10' },
{ text: '20', value: '20' },
{ text: '30', value: '30' },
{ text: '80', value: '80' },
{ text: '100', value: '100' },
{ text: '200', value: '200' },
{ text: '232', value: '232' },
{ text: '300', value: '300' },
{ text: '500', value: '500' },
{ text: '800', value: '800' },
{ text: '820', value: '850' },
{ text: '920', value: '920' },
{ text: '2020', value: '2020' },
{ text: '3000', value: '3000' },
{ text: '4000', value: '4000' },
{ text: '4999', value: '4999' }
];
grid.selectionModule.selectRow(parseInt((args.value), 10));
}
const rowSelected = () => {
const rowHeight =
grid.getRows()[grid.getSelectedRowIndexes()[0]].scrollHeight;
grid.getContent().children[0].scrollTop = rowHeight *
grid.getSelectedRowIndexes()[0];
}
return (<div>
<label style={{ padding: "30px 20px 0 0" }} > Select row index :</label>
change={onChange}></DropDownListComponent>
<GridComponent dataSource={data} height="315" width="100%"
rowSelected={rowSelected} ref={g => grid = g}>
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
react-dropdowns';


function App() {
{ text: 'Select count' },
{ text: '10', value: '10' },
{ text: '20', value: '20' },
{ text: '30', value: '30' },
{ text: '80', value: '80' },
{ text: '100', value: '100' },
{ text: '200', value: '200' },
{ text: '232', value: '232' },
{ text: '300', value: '300' },
{ text: '500', value: '500' },
{ text: '800', value: '800' },
{ text: '820', value: '850' },
{ text: '920', value: '920' },
{ text: '2020', value: '2020' },
{ text: '3000', value: '3000' },
{ text: '4000', value: '4000' },
{ text: '4999', value: '4999' }
];
(grid as GridComponent).selectionModule.selectRow(parseInt((args.value as
string), 10));
}
const rowSelected = () => {
const rowHeight: number = (grid as GridComponent).getRows()[(grid as
GridComponent).getSelectedRowIndexes()[0]].scrollHeight;
(grid as GridComponent).getContent().children[0].scrollTop = rowHeight *
(grid as GridComponent).getSelectedRowIndexes()[0];
}
return (<div>
<label style={{ padding: "30px 20px 0 0" }} > Select row index :</label>
<GridComponent dataSource={data} height="315" width="100%"
rowSelected={rowSelected} ref={g => grid = g}>
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX

Scones',
Sauerkraut',
Sill',
Coffee',
Pasties',
d\'érable',


Holz',
let frieght = [10, 24, 12, 48, 36, 12, 102 , 18, 102,
1, 500, 2, 40, 250, 500, 20, 16, 10, 30, 24, 24, 12,
355, 20, 100];
for (let i = 0; i < 5000; i++) {
lazyLoadData.push({
product.length)],
'ProductID': i,
})
}
}
DATASOURCE.TSX


Scones',
Sauerkraut',
Sill',
Coffee',
Pasties',
d\'érable',
Holz',


1, 500, 2, 40, 250, 500, 20, 16, 10, 30, 24, 24, 12,
355, 20, 100];
lazyLoadData.push({
product.length)],
'ProductID': i,
})
}
}
Hide the empty placehoder of scrollbar

The Syncfusion Grid component provides a feature to hide the empty placeholder of the scrollbar,
offering a cleaner interface without unnecessary scrollbars. To achieve this, you can utilize the hideScroll
method. This method allows you to determine whether the scrollbar should be hidden based on the
content's overflow.
The following example that demonstrates how to use the hideScroll method inside the dataBound
event:
APP.JSX
function App() {
let grid;

grid.hideScroll();
};
return (<div>
<GridComponent dataSource={data.slice(0, 2)} dataBound={dataBound}
height='312' ref={g => grid = g}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='150'
/>
width='150' />
<ColumnDirective field='ShipName' headerText='ShipName' width='150'
/>
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;
APP.TSX
function App() {
(grid as GridComponent).hideScroll();
}
return (<div>
<GridComponent dataSource={data.slice(0, 2)} dataBound={dataBound}
height='312' ref={g => grid = g}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='150'
/>
width='150' />
<ColumnDirective field='ShipName' headerText='ShipName' width='150'
/>
</ColumnsDirective>
</GridComponent>
</div>)
};

export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),

Link to the VideoGrid Searching in React Grid component

},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Searching in React Grid component

The Syncfusion React Grid includes a powerful built-in searching feature that allows users to search for
specific data within the grid. This feature enables efficient filtering of grid records based on user-defined
search criteria, making it easier to locate and display relevant information. Whether you have a large
dataset or simply need to find specific records quickly, the search feature provides a convenient
solution.
To use the searching feature, need to inject Search module in the grid and set the allowSearching
property to true to enable the searching feature in the grid.
To further enhance the search functionality, you can integrate a search text box directly into the grid's
toolbar. This allows users to enter search criteria conveniently within the grid interface. To add the
search item to the grid's toolbar, use the toolbar property and add Search item.
APP.JSX
import { Inject, Search, Toolbar } from '@syncfusion/ej2-react-grids';
function App() {
return (<GridComponent dataSource={data} toolbar={toolbarOptions}
height={272}>
<ColumnsDirective>


textAlign="Right"/>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]}/>
</GridComponent>);
};
export default App;
APP.TSX
import { Inject, Search, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-
grids';
function App() {
const toolbarOptions: ToolbarItems[] = ['Search'];
return (
<GridComponent dataSource={data} toolbar={toolbarOptions}
height={272}>
<ColumnsDirective>
textAlign="Right"/>
textAlign="Right"/>
textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]} />
</GridComponent>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX


{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},

{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}];
The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing
the single character in the search text box. A single click of the clear icon clears the text in the search
box as well as the search results in the Grid.
Initial search
By default, the search operation can be performed on the grid data after the grid renders. However,
there might be scenarios where need to perform a search operation on the grid data during the initial
rendering of the grid. In such cases, you can make use of the initial search feature provided by the grid.
To apply search at initial rendering, need to set the following properties in the searchSettings object.
Property |Description
startswith |Checks whether a value begins with the specified value.
endswith |Checks whether a value ends with the specified value.
contains |Checks whether a value contains with the specified value.
wildcard |Processes one or more search patterns using the “*” symbol, returning values that match the
given patterns.
like |Processes a single search pattern using the “%” symbol, retrieving values that match the specified
pattern.
equal |Checks whether a value equal to the specified value.
notequal |Checks whether a value not equal to the specified value.
These operators provide flexibility in defining the search behavior and allow you to perform different
types of comparisons based on your requirements.
The following example demonstrates how to set the searchSettings.operator property based on
changing the dropdown value using the change event of the DropDownList component.
APP.JSX
SearchSettingsModel } from '@syncfusion/ej2-react-grids';
grids';
react-dropdowns'
function App() {
const [searchOptions, setSearchOptions] = useState({ operator: 'contains'
});
const ddlData = [

{ text: 'startswith', value: 'startswith' },

{ text: 'endswith', value: 'endswith' },
{ text: 'wildcard', value: 'wildcard' },
{ text: 'like', value: 'like' },
{ text: 'equal', value: 'equal' },
{ text: 'notequal', value: 'notequal' },
];
const valueChange = (args) => {
const searchOperator = { operator: args.value };
setSearchOptions(searchOperator);
}
return (<div>
<label style={{ padding: "10px 10px 26px 0" }}>Change the search
operators:</label>
<DropDownListComponent id="value" index={0} width={100}
dataSource={ddlData} change={valueChange}></DropDownListComponent>
searchSettings={searchOptions}
height={272}>
<ColumnsDirective>
</ColumnsDirective>
};
export default App;
APP.TSX
SearchSettingsModel } from '@syncfusion/ej2-react-grids';
grids';
react-dropdowns'
function App() {
const [searchOptions, setSearchOptions] = useState<SearchSettingsModel>({
operator: 'contains' });
const ddlData: { [key: string]: Object; }[] = [
{ text: 'startswith', value: 'startswith' },
{ text: 'endswith', value: 'endswith' },
{ text: 'wildcard', value: 'wildcard' },
{ text: 'like', value: 'like' },
{ text: 'equal', value: 'equal' },
{ text: 'notequal', value: 'notequal' },
];
const searchOperator: SearchSettingsModel = { operator: args.value };

setSearchOptions(searchOperator);
}
return (<div>
<label style={{ padding: "10px 10px 26px 0" }}>Change the search
operators:</label>
<DropDownListComponent id="value" index={0} width={100}
dataSource={ddlData} change={valueChange}></DropDownListComponent>
searchSettings={searchOptions}
height={272}>
<ColumnsDirective>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Search by external button

The Syncfusion Grid component allows you to perform searches programmatically, enabling you to
search for records using an external button instead of relying solely on the built-in search bar. This
feature provides flexibility and allows for custom search implementations within your application. To
search for records using an external button, you can utilize the search method provided by the Grid
component.

The search method allows you to perform a search operation based on a search key or criteria. The
following example demonstatres how to implement search by an external button using the following
steps:
1. Add a button element outside of the grid component.

2. Attach a click event handler to the button.
3. Inside the event handler, get the reference of the grid component.
4. Invoke the search method of the grid by passing the search key as a parameter.
APP.JSX
import { employeeData } from './datasource';
function App() {
let grid;
const inputStyle = { width: '200px', display: 'inline-block' };
const clickHandler = () => {
const searchText =
document.getElementsByClassName('searchtext')[0].value;
if (grid) {
grid.search(searchText);
}
};
return (<div>
<div className="e-float-input" style={inputStyle}>
<input type="text" className="searchtext"/>
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent onClick={clickHandler}>Search</ButtonComponent>
<GridComponent dataSource={employeeData} height={260} ref={g
=> grid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee
ID' width='120' textAlign='Right'/>
<ColumnDirective field='FirstName' headerText='First
Name' width='150'/>
<ColumnDirective field='City' headerText='City'
width='150'/>
width='150'/>
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
APP.TSX


function App() {
const inputStyle: object = { width: '200px', display: 'inline-block' };
const searchText: string =
(document.getElementsByClassName('searchtext')[0] as HTMLFormElement).value;
if (grid) {
(grid as GridComponent).search(searchText);
}
};
return (
<div>
<div className="e-float-input" style={inputStyle}>
<input type="text" className="searchtext" />
<span className="e-float-line" />
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent onClick={clickHandler}>Search</ButtonComponent>
<GridComponent dataSource={employeeData} height={260} ref={g => grid =
g}>
<ColumnsDirective>
<ColumnDirective field='FirstName' headerText='First Name'
width='150' />
<ColumnDirective field='City' headerText='City' width='150' />
/>
</ColumnsDirective>
</GridComponent>
</div>
)
};
export default App;
DATASOURCE.JSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',

'Photo': { 'Length': 21626 },

International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
(1984). \
management.\

'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 5,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,


'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',

'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
DATASOURCE.TSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,

},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
\
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,


'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 5,
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'City': 'London',

'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },


'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
Search specific columns

By default, the search functionality searches all visible columns. However, if you want to search only
specific columns, you can define the specific column's field names in the searchSettings.fields property.
This allows you to narrow down the search to a targeted set of columns, which is particularly useful
when dealing with large datasets or grids with numerous columns.
The following example demonstrates how to search specific columns such as CustomerID, Freight, and
ShipCity by using the searchSettings.fields property.
APP.JSX
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
function App() {
const searchSettings = {
fields: ['CustomerID', 'Freight', 'ShipCountry']
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar={['Search']}
searchSettings={searchSettings}>
<ColumnsDirective>
width='100' />


width='100' format='C' textAlign="Right" />
Country' width='100' />
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
APP.TSX
import { Inject, SearchSettingsModel, Toolbar } from '@syncfusion/ej2-react-
grids';
function App() {
const searchSettings: SearchSettingsModel = {
fields: ['CustomerID', 'Freight', 'ShipCountry']
};
return (<div>
searchSettings={searchSettings}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX


{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},

{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}];
Search on each key stroke

The search on each keystroke feature in Syncfusion Grid enables you to perform real-time searching of
grid data as they type in the search text box. This functionality provides a seamless and interactive
searching experience, allowing you to see the search results dynamically updating in real time as they
enter each keystroke in the search box.
To achieve this, you need to bind the keyup event to the search input element inside the created event
of the grid component.
In the following example, the created event is bound to the grid component, and inside the event
handler, the keyup event is bound to the search input element. Whenever the keyup event is triggered,
the current search string is obtained from the search input element, and the search method is invoked
on the grid instance with the current search string as a parameter. This allows the search results to be
displayed in real-time as you type in the search box.
APP.JSX
function App() {
let grid;
document.getElementById(grid.element.id +
"_searchbar").addEventListener('keyup', () => {
grid.search(event.target.value);
});
};
return (<div>
ref={g => grid = g} created={created}>
<ColumnsDirective>
width='100'/>
width='100'/>
</ColumnsDirective>
</GridComponent>
</div>);
};

export default App;
APP.TSX
function App() {
(document.getElementById((grid as GridComponent).element.id +
"_searchbar") as HTMLElement).addEventListener('keyup', (event) => {
(grid as GridComponent).search((event.target as
HTMLInputElement).value)
});
}
return (<div>
<GridComponent dataSource={data} height={280} toolbar= {['Search']}
ref={g => grid = g} created={created}>
<ColumnsDirective>
width='100'/>
width='100'/>
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Search on each key stroke approach may affect the performance of the application when dealing with a
large number of records.
Perform search based on column formatting
By default, the search operation considers the underlying raw data of each cell for searching. However,
in some cases, you may want to search based on the formatted data visible to the users. To search data
based on column formatting, you can utilize the grid.valueFormatterService.fromView method within
the actionBegin event. This method allows you to retrieve the formatted value of a cell and perform
searching on each column using the OR predicate.
The following example demonstrates how to implement searching based on column formatting in the
Grid. In the actionBegin event, retrieve the search value from the getColumns method. Iterate through
the columns and check whether the column has a format specified. If the column has a format specified,
use the grid.valueFormatterService.fromView method to get the formatted value of the cell. If the
formatted value matches the search value, set the OR predicate that includes the current column filter
and the new filter based on the formatted value.
APP.JSX
import { Predicate, Query } from '@syncfusion/ej2-data';
function App() {
let grid;
if (args.requestType === 'searching') {
args.cancel = true;
setTimeout(() => {
var columns = grid.getColumns();
var predicate = null;
for (var i = 0; i < columns.length; i++) {
var val =
grid.valueFormatterService.fromView(args.searchString,
columns[i].getParser(), columns[i].type);
if (val) {
if (predicate == null) {
predicate = new Predicate(columns[i].field,
'contains', val, true, true);
} else {
predicate = predicate.or(columns[i].field,
'contains', val, true, true);
}
}
}
grid.query = new Query().where(predicate);

}, 200);
}
}
const keyPressed = (args) => {
if (args.key === 'Enter' && args.target && args.target.closest('.e-
search') && args.target.value === '') {
args.cancel = true;
grid.query = new Query();
}
}
return (<div>
toolbar={['Search']} actionBegin={actionBegin} keyPressed={keyPressed}>
<ColumnsDirective>
width='100' />
width='100' format='C' textAlign="Right" />
<ColumnDirective field='OrderDate' headerText='OrderDate'
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, SearchEventArgs }
import { KeyboardEventArgs } from '@syncfusion/ej2-base';
function App() {
const actionBegin = (args: SearchEventArgs) => {
args.cancel = true;
setTimeout(() => {
var columns = (grid as GridComponent).getColumns();
var predicate: Predicate = null;
for (var i = 0; i < columns.length; i++) {
var val = (grid as
GridComponent).valueFormatterService.fromView(args.searchString,
columns[i].getParser(), columns[i].type);
if (val) {
if (predicate == null) {
predicate = new Predicate(columns[i].field, 'contains', val,
true, true);
} else {

predicate = predicate.or(columns[i].field, 'contains', val,

true, true);
}
}
}
(grid as GridComponent).query = new Query().where(predicate as
Predicate);
}, 200);
}
}
const keyPressed = (args: KeyboardEventArgs) => {
if (args.key === 'Enter' && args.target && args.target.closest('.e-
search') && args.target.value === '') {
args.cancel = true;
(grid as GridComponent).query = new Query();
}
}
return (<div>
toolbar={['Search']} actionBegin={actionBegin} keyPressed={keyPressed}>
<ColumnsDirective>
width='100' />
format='yMd' />
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Perform search operation in Grid using multiple keywords

In addition to searching with a single keyword, the Grid component offers the capability to perform a
search operation using multiple keywords. This feature enables you to narrow down your search results
by simultaneously matching multiple keywords. It can be particularly useful when you need to find
records that meet multiple search conditions simultaneously. This can be achieved by the actionBegin
event of the Grid.
The following example demonstrates, how to perform a search with multiple keywords in the grid by
using the query property when the requestType is searching in the actionBegin event. The
searchString is divided into multiple keywords using a comma (,) as the delimiter. Each keyword is then
utilized to create a predicate that checks for a match in the desired columns. If multiple keywords are
present, the predicates are combined using an OR condition. Finally, the Grid's query property is
updated with the constructed predicate, and the Grid is refreshed to update the changes in the UI.
On the other hand, the actionComplete event is used to manage the completion of the search
operation. It ensures that the search input value is updated if necessary and clears the query when the
search input is empty.
APP.JSX
import { Toolbar, GridComponent, ColumnsDirective, ColumnDirective, Inject }
function App() {
let values = '';
const key = '';
let refresh = false;
let removeQuery = false;
let valueAssign = false;
let grid;
const searchOptions = {
fields: ['OrderID', 'CustomerID', 'Freight', 'ShipCountry'],
key: '',
operator:'contains',
ignoreCase: true
};
if (args.requestType == 'searching') {
const keys = args.searchString.split(',');
let flag = true;
let predicate;
if (keys.length > 1) {
if (grid.searchSettings.key !== '') {
values = args.searchString;
keys.forEach((key) => {

grid.getColumns().forEach((col) => {
if (flag) {
predicate = new Predicate(col.field,
'contains', key, true);
flag = false;
}
else {
var predic = new Predicate(col.field,
'contains', key, true);
predicate = predicate.or(predic);
}
});
});
grid.searchSettings.key = '';
refresh = true;
valueAssign = true;
removeQuery = true;
grid.refresh();
}
}
}
};
if (args.requestType === 'refresh' && valueAssign) {
document.getElementById(grid.element.id + '_searchbar').value =
values;
valueAssign = false;
}
else if (document.getElementById(grid.element.id +
'_searchbar').value ===
'' &&
args.requestType === 'refresh' &&
removeQuery) {
removeQuery = false;
grid.refresh();
}
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar={toolbarOptions}
searchSettings={searchOptions} ref={g => grid = g} actionBegin={actionBegin}
<ColumnsDirective>
width='100'/>
format='C' textAlign="Right"/>
width='100'/>
</ColumnsDirective>
</GridComponent>
</div>);
};

export default App;
APP.TSX
import {Toolbar, ToolbarItems, Grid, GridComponent, SearchSettingsModel,
ColumnsDirective,ColumnDirective, Inject, SearchEventArgs} from
function App() {
let values = '';
const key = '';
let refresh = false;
let removeQuery = false;
let valueAssign = false;
const searchOptions: SearchSettingsModel = {
fields: ['OrderID', 'CustomerID', 'Freight', 'ShipCountry'],
key: '',
operator:'contains',
ignoreCase: true
};
const actionBegin = (args: SearchEventArgs): void => {
if (args.requestType == 'searching') {
const keys = args.searchString.split(',');
let flag = true;
let predicate;
if (keys.length > 1) {
if (grid.searchSettings.key !== '') {
values = args.searchString;
keys.forEach((key) => {
grid.getColumns().forEach((col) => {
if (flag) {
predicate = new Predicate(col.field, 'contains', key, true);
flag = false;
} else {
var predic = new Predicate(col.field, 'contains', key, true);
predicate = predicate.or(predic);
}
});
});
refresh = true;
valueAssign = true;
removeQuery = true;
}
}
}
};
const actionComplete = (args: SearchEventArgs): void => {
if (args.requestType === 'refresh' && valueAssign) {
document.getElementById(grid.element.id + '_searchbar').value =

values;
valueAssign = false;
} else if (
document.getElementById(grid.element.id + '_searchbar').value ===
'' &&
args.requestType === 'refresh' &&
removeQuery
) {
removeQuery = false;
}
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar= {toolbarOptions}
searchSettings={searchOptions} ref={g => grid = g}
actionBegin={actionBegin}
<ColumnsDirective>
width='100'/>
format ='C' textAlign="Right"/>
width='100'/>
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
By using this approach, you can perform a search operation in the grid using multiple keywords.
How to ignore accent while searching
By default, the searching operation in the Grid component does not ignore diacritic characters or
accents. However, there are cases where ignoring diacritic characters becomes necessary. This feature
enhances the search experience by enabling data searching without considering accents, ensuring a
more comprehensive and accurate search and it can be achieved by utilizing the
searchSettings.ignoreAccent property of the Grid component as true.
The following example demonstrates how to define the ignoreAccent property within the
searchSettings property of the grid. Additionally, the EJ2 Toggle Switch Button component is included to
modify the value of the searchSettings.ignoreAccent property. When the switch is toggled, the change
event is triggered, and the searchSettings.ignoreAccent property is updated accordingly. This
functionality helps to visualize the impact of the searchSettings.ignoreAccent setting when
performing search operations.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Search } from
function App() {
let grid;
grid.searchSettings.ignoreAccent = args.checked;
}
return (<div>
<label style={{ padding: "10px 10px" }}>Enable or disable
ignoreAccent property</label>
<SwitchComponent id='switch' change={valueChange}></SwitchComponent>
toolbar={['Search']} >
<ColumnsDirective>
<ColumnDirective field='CategoryName' headerText='Category
Name' width='100' textAlign="Right" />
<ColumnDirective field='ProductName' headerText='Product
Name' width='100' />
<ColumnDirective field='QuantityPerUnit' headerText='Quantity
Per Unit' width='100' textAlign="Right" />
<ColumnDirective field='UnitsInStock' headerText='Units In
Stock' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar, Search]} />
</GridComponent>
</div>);
};
export default App;

APP.TSX
import { SwitchComponent, ChangeEventArgs } from '@syncfusion/ej2-react-
buttons';
function App() {
(grid as GridComponent).searchSettings.ignoreAccent = args.checked;
}
return (<div>
<label style={{ padding: "10px 10px" }}>Enable or disable ignoreAccent
property:</label>
<SwitchComponent id='switch' change={valueChange}></SwitchComponent>
toolbar={['Search']} >
<ColumnsDirective>
<ColumnDirective field='CategoryName' headerText='Category Name'
<ColumnDirective field='ProductName' headerText='Product Name'
width='100' />
<ColumnDirective field='QuantityPerUnit' headerText='Quantity Per
Unit' width='100' textAlign="Right" />
<ColumnDirective field='UnitsInStock' headerText='Units In Stock'
width='100' />
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
DATASOURCE.JSX
export let data = [
{
"CategoryName": "Beveräges",
'ProductID': 1,
'ProductName': 'Chäi',
'SupplierID': 1,
'QuantityPerUnit': '10 boxes x 20 bags',
'UnitPrice': 18.00,
'UnitsInStock': 39,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 2,
'ProductName': 'CHANG',
'SupplierID': 1,

'QuantityPerUnit': '24 - 12 oz bottles',

'UnitPrice': 19.00,
'UnitsInStock': 17,
},
{
'ProductID': 3,
'ProductName': 'Aniseed Syrup',
'SupplierID': 1,
'QuantityPerUnit': '12 - 550 ml bottles',
'UnitPrice': 10.00,
'UnitsInStock': 13,
},
{
'ProductID': 4,
'ProductName': 'Chef Anton\'s Cajun Seasoning',
'SupplierID': 2,
'QuantityPerUnit': '48 - 6 oz jars',
'UnitPrice': 22.00,
'UnitsInStock': 53,
},
{
'ProductID': 5,
'ProductName': 'Chef Anton\'s Gumbo Mix',
'SupplierID': 2,
'QuantityPerUnit': '36 boxes',
'UnitPrice': 21.35,
'UnitsInStock': 0,
},
{
'ProductID': 6,
'ProductName': 'Grandma\'s Boysenberry Spread',
'SupplierID': 3,
'UnitPrice': 25.00,
'UnitsInStock': 120,
'Discontinued': false
},
{
'ProductID': 7,
'ProductName': 'Uncle Bob\'s Organic Dried Pears',
'SupplierID': 3,
'QuantityPerUnit': '12 - 1 lb pkgs.',
'UnitPrice': 30.00,

'UnitsInStock': 15,
},
{
'ProductID': 8,
'ProductName': 'Northwoods Cranberry Sauce',
'SupplierID': 3,
'UnitPrice': 40.00,
'UnitsInStock': 6,
},
{
'ProductID': 9,
'ProductName': 'Mishi Kobe Niku',
'SupplierID': 4,
'QuantityPerUnit': '18 - 500 g pkgs.',
'UnitPrice': 97.00,
'UnitsInStock': 29,
},
{
'ProductID': 10,
'ProductName': 'Ikura',
'SupplierID': 4,
'QuantityPerUnit': '12 - 200 ml jars',
'UnitPrice': 31.00,
'UnitsInStock': 31,
},
{
'ProductID': 11,
'ProductName': 'Queso Cabrales',
'SupplierID': 5,
'QuantityPerUnit': '1 kg pkg.',
'UnitPrice': 21.00,
'UnitsInStock': 22,
},
{
"CategoryName": "Condiments",
'ProductID': 12,
'ProductName': 'Queso Manchego La Pastora',
'SupplierID': 5,
'UnitPrice': 38.00,
'UnitsInStock': 86,

},
{
'ProductID': 13,
'ProductName': 'Konbu',
'SupplierID': 6,
'QuantityPerUnit': '2 kg box',
'UnitPrice': 6.00,
'UnitsInStock': 24,
},
{
'ProductID': 14,
'ProductName': 'Tofu',
'SupplierID': 6,
'UnitPrice': 23.25,
'UnitsInStock': 35,
},
{
'ProductID': 15,
'ProductName': 'Genen Shouyu',
'SupplierID': 6,
'UnitPrice': 15.50,
'UnitsInStock': 39,
},
{
'ProductID': 16,
'ProductName': 'Pavlova',
'SupplierID': 7,
'QuantityPerUnit': '32 - 500 g boxes',
'UnitPrice': 17.45,
'UnitsInStock': 29,
},
{
'ProductID': 17,
'ProductName': 'Alice Mutton',
'SupplierID': 7,
'QuantityPerUnit': '20 - 1 kg tins',
'UnitPrice': 39.00,
'UnitsInStock': 0,
},

{
'ProductID': 18,
'ProductName': 'Carnarvon Tigers',
'SupplierID': 7,
'UnitPrice': 62.50,
'UnitsInStock': 42,
},
{
'ProductID': 19,
'ProductName': 'Teatime Chocolate Biscuits',
'SupplierID': 8,
'QuantityPerUnit': '10 boxes x 12 pieces',
'UnitPrice': 9.20,
'UnitsInStock': 25,
},
{
'ProductID': 20,
'ProductName': 'Sir Rodney\'s Marmalade',
'SupplierID': 8,
'QuantityPerUnit': '30 gift boxes',
'UnitPrice': 81.00,
'UnitsInStock': 40,
},
{
'ProductID': 21,
'ProductName': 'Sir Rodney\'s Scones',
'SupplierID': 8,
'QuantityPerUnit': '24 pkgs. x 4 pieces',
'UnitPrice': 10.00,
'UnitsInStock': 3,
},
{
'ProductID': 22,
'ProductName': 'Gustaf\'s Knäckebröd',
'SupplierID': 9,
'UnitPrice': 21.00,
},
{
"CategoryName": "Confections",

'ProductID': 23,
'ProductName': 'Tunnbröd',
'SupplierID': 9,
'UnitPrice': 9.00,
'UnitsInStock': 61,
},
{
'ProductID': 24,
'ProductName': 'Guaraná Fantástica',
'SupplierID': 10,
'QuantityPerUnit': '12 - 355 ml cans',
'UnitPrice': 4.50,
'UnitsInStock': 20,
},
{
'ProductID': 25,
'ProductName': 'NuNuCa Nuß-Nougat-Creme',
'SupplierID': 11,
'QuantityPerUnit': '20 - 450 g glasses',
'UnitPrice': 14.00,
'UnitsInStock': 76,
},
{
'ProductID': 26,
'ProductName': 'Gumbär Gummibärchen',
'SupplierID': 11,
'QuantityPerUnit': '100 - 250 g bags',
'UnitPrice': 31.23,
'UnitsInStock': 15,
},
{
'ProductID': 27,
'ProductName': 'Schoggi Schokolade',
'SupplierID': 11,
'QuantityPerUnit': '100 - 100 g pieces',
'UnitPrice': 43.90,
'UnitsInStock': 49,
},
{
'ProductID': 28,
'ProductName': 'Rössle Sauerkraut',

'SupplierID': 12,
'QuantityPerUnit': '25 - 825 g cans',
'UnitPrice': 45.60,
'UnitsInStock': 26,
},
{
'ProductID': 29,
'ProductName': 'Thüringer Rostbratwurst',
'SupplierID': 12,
'QuantityPerUnit': '50 bags x 30 sausgs.',
'UnitPrice': 123.79,
'UnitsInStock': 0,
},
{
'ProductID': 30,
'ProductName': 'Nord-Ost Matjeshering',
'SupplierID': 13,
'UnitPrice': 25.89,
'UnitsInStock': 10,
},
{
'ProductID': 31,
'ProductName': 'Gorgonzola Telino',
'SupplierID': 14,
'QuantityPerUnit': '12 - 100 g pkgs',
'UnitPrice': 12.50,
'UnitsInStock': 0,
},
{
'ProductID': 32,
'ProductName': 'Mascarpone Fabioli',
'SupplierID': 14,
'UnitPrice': 32.00,
'UnitsInStock': 9,
},
{
'ProductID': 33,
'ProductName': 'Geitost',
'SupplierID': 15,
'QuantityPerUnit': '500 g',

'UnitPrice': 2.50,
},
{
'ProductID': 34,
'ProductName': 'Sasquatch Ale',
'SupplierID': 16,
'UnitPrice': 14.00,
},
{
'ProductID': 35,
'ProductName': 'Steeleye Stout',
'SupplierID': 16,
'UnitPrice': 18.00,
'UnitsInStock': 20,
},
{
"CategoryName": "Dairy Products",
'ProductID': 36,
'ProductName': 'Inlagd Sill',
'SupplierID': 17,
'QuantityPerUnit': '24 - 250 g jars',
'UnitPrice': 19.00,
},
{
'ProductID': 37,
'ProductName': 'Gravad lax',
'SupplierID': 17,
'UnitPrice': 26.00,
'UnitsInStock': 11,
},
{
'ProductID': 38,
'ProductName': 'Côte de Blaye',
'SupplierID': 18,
'QuantityPerUnit': '12 - 75 cl bottles',
'UnitsInStock': 17,

},
{
'ProductID': 39,
'ProductName': 'Chartreuse verte',
'SupplierID': 18,
'QuantityPerUnit': '750 cc per bottle',
'UnitPrice': 18.00,
'UnitsInStock': 69,
},
{
'ProductID': 40,
'ProductName': 'Boston Crab Meat',
'SupplierID': 19,
'QuantityPerUnit': '24 - 4 oz tins',
'UnitPrice': 18.40,
},
{
'ProductID': 41,
'ProductName': 'Jack\'s New England Clam Chowder',
'SupplierID': 19,
'QuantityPerUnit': '12 - 12 oz cans',
'UnitPrice': 9.65,
'UnitsInStock': 85,
},
{
'ProductID': 42,
'ProductName': 'Singaporean Hokkien Fried Mee',
'SupplierID': 20,
'QuantityPerUnit': '32 - 1 kg pkgs.',
'UnitPrice': 14.00,
'UnitsInStock': 26,
},
{
'ProductID': 43,
'ProductName': 'Ipoh Coffee',
'SupplierID': 20,
'QuantityPerUnit': '16 - 500 g tins',
'UnitPrice': 46.00,
'UnitsInStock': 17,
},

{
'ProductID': 44,
'ProductName': 'Gula Malacca',
'SupplierID': 20,
'QuantityPerUnit': '20 - 2 kg bags',
'UnitPrice': 19.45,
'UnitsInStock': 27,
},
{
'ProductID': 45,
'ProductName': 'Rogede sild',
'SupplierID': 21,
'QuantityPerUnit': '1k pkg.',
'UnitPrice': 9.50,
'UnitsInStock': 5,
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 46,
'ProductName': 'Spegesild',
'SupplierID': 21,
'UnitPrice': 12.00,
'UnitsInStock': 95,
},
{
'ProductID': 47,
'ProductName': 'Zaanse koeken',
'SupplierID': 22,
'QuantityPerUnit': '10 - 4 oz boxes',
'UnitPrice': 9.50,
'UnitsInStock': 36,
},
{
'ProductID': 48,
'ProductName': 'Chocolade',
'SupplierID': 22,
'QuantityPerUnit': '10 pkgs.',
'UnitPrice': 12.75,
'UnitsInStock': 15,
},

'ProductID': 49,
'ProductName': 'Maxilaku',
'SupplierID': 23,
'UnitPrice': 20.00,
'UnitsInStock': 10,
},
{
'ProductID': 50,
'ProductName': 'Valkoinen suklaa',
'SupplierID': 23,
'QuantityPerUnit': '12 - 100 g bars',
'UnitPrice': 16.25,
'UnitsInStock': 65,
},
{
'ProductID': 51,
'ProductName': 'Manjimup Dried Apples',
'SupplierID': 24,
'UnitPrice': 53.00,
'UnitsInStock': 20,
},
{
"CategoryName": "Meat/Poultry",
'ProductID': 52,
'ProductName': 'Filo Mix',
'SupplierID': 24,
'QuantityPerUnit': '16 - 2 kg boxes',
'UnitPrice': 7.00,
'UnitsInStock': 38,
},
{
'ProductID': 53,
'ProductName': 'Perth Pasties',
'SupplierID': 24,
'QuantityPerUnit': '48 pieces',
'UnitPrice': 32.80,
'UnitsInStock': 0,
},
{
"CategoryName": "Produce",
'ProductID': 54,

'ProductName': 'Tourtière',
'SupplierID': 25,
'QuantityPerUnit': '16 pies',
'UnitPrice': 7.45,
'UnitsInStock': 21,
},
{
'ProductID': 55,
'ProductName': 'Pâté chinois',
'SupplierID': 25,
'QuantityPerUnit': '24 boxes x 2 pies',
'UnitPrice': 24.00,
},
{
'ProductName': 'Gnocchi di nonna Alice',
'SupplierID': 26,
'UnitPrice': 38.00,
'UnitsInStock': 21,
},
{
'ProductName': 'Ravioli Angelo',
'SupplierID': 26,
'UnitPrice': 19.50,
'UnitsInStock': 36,
},
{
"CategoryName": "Seafood",
'ProductID': 58,
'ProductName': 'Escargots de Bourgogne',
'SupplierID': 27,
'UnitPrice': 13.25,
'UnitsInStock': 62,
},
{
'ProductID': 59,
'ProductName': 'Raclette Courdavault',
'SupplierID': 28,
'UnitPrice': 55.00,

'UnitsInStock': 79,
},
{
'ProductID': 60,
'ProductName': 'Camembert Pierrot',
'SupplierID': 28,
'QuantityPerUnit': '15 - 300 g rounds',
'UnitPrice': 34.00,
'UnitsInStock': 19,
},
{
'ProductID': 61,
'ProductName': 'Sirop d\'érable',
'SupplierID': 29,
'UnitPrice': 28.50,
},
{
'ProductID': 62,
'ProductName': 'Tarte au sucre',
'SupplierID': 29,
'UnitPrice': 49.30,
'UnitsInStock': 17,
},
{
'ProductID': 63,
'ProductName': 'Vegie-spread',
'SupplierID': 7,
'UnitPrice': 43.90,
'UnitsInStock': 24,
},
{
'ProductID': 64,
'ProductName': 'Wimmers gute Semmelknödel',
'SupplierID': 12,
'QuantityPerUnit': '20 bags x 4 pieces',
'UnitPrice': 33.25,
'UnitsInStock': 22,

},
{
'ProductID': 65,
'ProductName': 'Louisiana Fiery Hot Pepper Sauce',
'SupplierID': 2,
'UnitPrice': 21.05,
'UnitsInStock': 76,
},
{
'ProductID': 66,
'ProductName': 'Louisiana Hot Spiced Okra',
'SupplierID': 2,
'UnitPrice': 17.00,
'UnitsInStock': 4,
},
{
'ProductID': 67,
'ProductName': 'Laughing Lumberjack Lager',
'SupplierID': 16,
'UnitPrice': 14.00,
'UnitsInStock': 52,
},
{
'ProductID': 68,
'ProductName': 'Scottish Longbreads',
'SupplierID': 8,
'UnitPrice': 12.50,
'UnitsInStock': 6,
},
{
'ProductID': 69,
'ProductName': 'Gudbrandsdalsost',
'SupplierID': 15,
'UnitPrice': 36.00,
'UnitsInStock': 26,
}
];

DATASOURCE.TSX
export let data: object[] = [
{
'ProductID': 1,
'ProductName': 'Chäi',
'SupplierID': 1,
'QuantityPerUnit': '10 boxes x 20 bags',
'UnitPrice': 18.00,
'UnitsInStock': 39,
},
{
'ProductID': 2,
'ProductName': 'CHANG',
'SupplierID': 1,
'UnitPrice': 19.00,
'UnitsInStock': 17,
},
{
'ProductID': 3,
'ProductName': 'Aniseed Syrup',
'SupplierID': 1,
'UnitPrice': 10.00,
'UnitsInStock': 13,
},
{
'ProductID': 4,
'ProductName': 'Chef Anton\'s Cajun Seasoning',
'SupplierID': 2,
'UnitPrice': 22.00,
'UnitsInStock': 53,
},
{
'ProductID': 5,
'ProductName': 'Chef Anton\'s Gumbo Mix',
'SupplierID': 2,
'QuantityPerUnit': '36 boxes',
'UnitPrice': 21.35,
'UnitsInStock': 0,

},
{
'ProductID': 6,
'ProductName': 'Grandma\'s Boysenberry Spread',
'SupplierID': 3,
'UnitPrice': 25.00,
},
{
'ProductID': 7,
'ProductName': 'Uncle Bob\'s Organic Dried Pears',
'SupplierID': 3,
'QuantityPerUnit': '12 - 1 lb pkgs.',
'UnitPrice': 30.00,
'UnitsInStock': 15,
},
{
'ProductID': 8,
'ProductName': 'Northwoods Cranberry Sauce',
'SupplierID': 3,
'UnitPrice': 40.00,
'UnitsInStock': 6,
},
{
'ProductID': 9,
'ProductName': 'Mishi Kobe Niku',
'SupplierID': 4,
'UnitPrice': 97.00,
'UnitsInStock': 29,
},
{
'ProductID': 10,
'ProductName': 'Ikura',
'SupplierID': 4,
'QuantityPerUnit': '12 - 200 ml jars',
'UnitPrice': 31.00,
'UnitsInStock': 31,
},

{
'ProductID': 11,
'ProductName': 'Queso Cabrales',
'SupplierID': 5,
'UnitPrice': 21.00,
'UnitsInStock': 22,
},
{
'ProductID': 12,
'ProductName': 'Queso Manchego La Pastora',
'SupplierID': 5,
'UnitPrice': 38.00,
'UnitsInStock': 86,
},
{
'ProductID': 13,
'ProductName': 'Konbu',
'SupplierID': 6,
'QuantityPerUnit': '2 kg box',
'UnitPrice': 6.00,
'UnitsInStock': 24,
},
{
'ProductID': 14,
'ProductName': 'Tofu',
'SupplierID': 6,
'UnitPrice': 23.25,
'UnitsInStock': 35,
},
{
'ProductID': 15,
'ProductName': 'Genen Shouyu',
'SupplierID': 6,
'UnitPrice': 15.50,
'UnitsInStock': 39,
},

'ProductID': 16,
'ProductName': 'Pavlova',
'SupplierID': 7,
'QuantityPerUnit': '32 - 500 g boxes',
'UnitPrice': 17.45,
'UnitsInStock': 29,
},
{
'ProductID': 17,
'ProductName': 'Alice Mutton',
'SupplierID': 7,
'QuantityPerUnit': '20 - 1 kg tins',
'UnitPrice': 39.00,
'UnitsInStock': 0,
},
{
'ProductID': 18,
'ProductName': 'Carnarvon Tigers',
'SupplierID': 7,
'UnitPrice': 62.50,
'UnitsInStock': 42,
},
{
'ProductID': 19,
'ProductName': 'Teatime Chocolate Biscuits',
'SupplierID': 8,
'UnitPrice': 9.20,
'UnitsInStock': 25,
},
{
'ProductID': 20,
'ProductName': 'Sir Rodney\'s Marmalade',
'SupplierID': 8,
'QuantityPerUnit': '30 gift boxes',
'UnitPrice': 81.00,
'UnitsInStock': 40,
},
{
'ProductID': 21,

'ProductName': 'Sir Rodney\'s Scones',

'SupplierID': 8,
'QuantityPerUnit': '24 pkgs. x 4 pieces',
'UnitPrice': 10.00,
'UnitsInStock': 3,
},
{
'ProductID': 22,
'ProductName': 'Gustaf\'s Knäckebröd',
'SupplierID': 9,
'UnitPrice': 21.00,
},
{
'ProductID': 23,
'ProductName': 'Tunnbröd',
'SupplierID': 9,
'UnitPrice': 9.00,
'UnitsInStock': 61,
},
{
'ProductID': 24,
'ProductName': 'Guaraná Fantástica',
'SupplierID': 10,
'QuantityPerUnit': '12 - 355 ml cans',
'UnitPrice': 4.50,
'UnitsInStock': 20,
},
{
'ProductID': 25,
'ProductName': 'NuNuCa Nuß-Nougat-Creme',
'SupplierID': 11,
'UnitPrice': 14.00,
'UnitsInStock': 76,
},
{
'ProductID': 26,
'ProductName': 'Gumbär Gummibärchen',
'SupplierID': 11,

'QuantityPerUnit': '100 - 250 g bags',

'UnitPrice': 31.23,
'UnitsInStock': 15,
},
{
'ProductID': 27,
'ProductName': 'Schoggi Schokolade',
'SupplierID': 11,
'QuantityPerUnit': '100 - 100 g pieces',
'UnitPrice': 43.90,
'UnitsInStock': 49,
},
{
'ProductID': 28,
'ProductName': 'Rössle Sauerkraut',
'SupplierID': 12,
'QuantityPerUnit': '25 - 825 g cans',
'UnitPrice': 45.60,
'UnitsInStock': 26,
},
{
'ProductID': 29,
'ProductName': 'Thüringer Rostbratwurst',
'SupplierID': 12,
'QuantityPerUnit': '50 bags x 30 sausgs.',
'UnitsInStock': 0,
},
{
'ProductID': 30,
'ProductName': 'Nord-Ost Matjeshering',
'SupplierID': 13,
'UnitPrice': 25.89,
'UnitsInStock': 10,
},
{
'ProductID': 31,
'ProductName': 'Gorgonzola Telino',
'SupplierID': 14,
'QuantityPerUnit': '12 - 100 g pkgs',
'UnitPrice': 12.50,

'UnitsInStock': 0,
},
{
'ProductID': 32,
'ProductName': 'Mascarpone Fabioli',
'SupplierID': 14,
'UnitPrice': 32.00,
'UnitsInStock': 9,
},
{
'ProductID': 33,
'ProductName': 'Geitost',
'SupplierID': 15,
'QuantityPerUnit': '500 g',
'UnitPrice': 2.50,
},
{
'ProductID': 34,
'ProductName': 'Sasquatch Ale',
'SupplierID': 16,
'UnitPrice': 14.00,
},
{
'ProductID': 35,
'ProductName': 'Steeleye Stout',
'SupplierID': 16,
'UnitPrice': 18.00,
'UnitsInStock': 20,
},
{
'ProductID': 36,
'ProductName': 'Inlagd Sill',
'SupplierID': 17,
'UnitPrice': 19.00,

},
{
'ProductID': 37,
'ProductName': 'Gravad lax',
'SupplierID': 17,
'UnitPrice': 26.00,
'UnitsInStock': 11,
},
{
'ProductID': 38,
'ProductName': 'Côte de Blaye',
'SupplierID': 18,
'QuantityPerUnit': '12 - 75 cl bottles',
'UnitsInStock': 17,
},
{
'ProductID': 39,
'ProductName': 'Chartreuse verte',
'SupplierID': 18,
'QuantityPerUnit': '750 cc per bottle',
'UnitPrice': 18.00,
'UnitsInStock': 69,
},
{
'ProductID': 40,
'ProductName': 'Boston Crab Meat',
'SupplierID': 19,
'QuantityPerUnit': '24 - 4 oz tins',
'UnitPrice': 18.40,
},
{
'ProductID': 41,
'ProductName': 'Jack\'s New England Clam Chowder',
'SupplierID': 19,
'QuantityPerUnit': '12 - 12 oz cans',
'UnitPrice': 9.65,
'UnitsInStock': 85,
},

{
'ProductID': 42,
'ProductName': 'Singaporean Hokkien Fried Mee',
'SupplierID': 20,
'QuantityPerUnit': '32 - 1 kg pkgs.',
'UnitPrice': 14.00,
'UnitsInStock': 26,
},
{
'ProductID': 43,
'ProductName': 'Ipoh Coffee',
'SupplierID': 20,
'QuantityPerUnit': '16 - 500 g tins',
'UnitPrice': 46.00,
'UnitsInStock': 17,
},
{
'ProductID': 44,
'ProductName': 'Gula Malacca',
'SupplierID': 20,
'QuantityPerUnit': '20 - 2 kg bags',
'UnitPrice': 19.45,
'UnitsInStock': 27,
},
{
'ProductID': 45,
'ProductName': 'Rogede sild',
'SupplierID': 21,
'QuantityPerUnit': '1k pkg.',
'UnitPrice': 9.50,
'UnitsInStock': 5,
},
{
'ProductID': 46,
'ProductName': 'Spegesild',
'SupplierID': 21,
'UnitPrice': 12.00,
'UnitsInStock': 95,
},
{

'ProductID': 47,
'ProductName': 'Zaanse koeken',
'SupplierID': 22,
'QuantityPerUnit': '10 - 4 oz boxes',
'UnitPrice': 9.50,
'UnitsInStock': 36,
},
{
'ProductID': 48,
'ProductName': 'Chocolade',
'SupplierID': 22,
'QuantityPerUnit': '10 pkgs.',
'UnitPrice': 12.75,
'UnitsInStock': 15,
},
{
'ProductID': 49,
'ProductName': 'Maxilaku',
'SupplierID': 23,
'UnitPrice': 20.00,
'UnitsInStock': 10,
},
{
'ProductID': 50,
'ProductName': 'Valkoinen suklaa',
'SupplierID': 23,
'QuantityPerUnit': '12 - 100 g bars',
'UnitPrice': 16.25,
'UnitsInStock': 65,
},
{
'ProductID': 51,
'ProductName': 'Manjimup Dried Apples',
'SupplierID': 24,
'UnitPrice': 53.00,
'UnitsInStock': 20,
},
{
'ProductID': 52,
'ProductName': 'Filo Mix',

'SupplierID': 24,
'QuantityPerUnit': '16 - 2 kg boxes',
'UnitPrice': 7.00,
'UnitsInStock': 38,
},
{
'ProductID': 53,
'ProductName': 'Perth Pasties',
'SupplierID': 24,
'UnitPrice': 32.80,
'UnitsInStock': 0,
},
{
'ProductID': 54,
'ProductName': 'Tourtière',
'SupplierID': 25,
'UnitPrice': 7.45,
'UnitsInStock': 21,
},
{
'ProductID': 55,
'ProductName': 'Pâté chinois',
'SupplierID': 25,
'QuantityPerUnit': '24 boxes x 2 pies',
'UnitPrice': 24.00,
},
{
'ProductName': 'Gnocchi di nonna Alice',
'SupplierID': 26,
'UnitPrice': 38.00,
'UnitsInStock': 21,
},
{
'ProductName': 'Ravioli Angelo',
'SupplierID': 26,
'UnitPrice': 19.50,
'UnitsInStock': 36,

},
{
'ProductID': 58,
'ProductName': 'Escargots de Bourgogne',
'SupplierID': 27,
'UnitPrice': 13.25,
'UnitsInStock': 62,
},
{
'ProductID': 59,
'ProductName': 'Raclette Courdavault',
'SupplierID': 28,
'UnitPrice': 55.00,
'UnitsInStock': 79,
},
{
'ProductID': 60,
'ProductName': 'Camembert Pierrot',
'SupplierID': 28,
'QuantityPerUnit': '15 - 300 g rounds',
'UnitPrice': 34.00,
'UnitsInStock': 19,
},
{
'ProductID': 61,
'ProductName': 'Sirop d\'érable',
'SupplierID': 29,
'UnitPrice': 28.50,
},
{
'ProductID': 62,
'ProductName': 'Tarte au sucre',
'SupplierID': 29,
'UnitPrice': 49.30,
'UnitsInStock': 17,
},

{
'ProductID': 63,
'ProductName': 'Vegie-spread',
'SupplierID': 7,
'UnitPrice': 43.90,
'UnitsInStock': 24,
},
{
'ProductID': 64,
'ProductName': 'Wimmers gute Semmelknödel',
'SupplierID': 12,
'QuantityPerUnit': '20 bags x 4 pieces',
'UnitPrice': 33.25,
'UnitsInStock': 22,
},
{
'ProductID': 65,
'ProductName': 'Louisiana Fiery Hot Pepper Sauce',
'SupplierID': 2,
'UnitPrice': 21.05,
'UnitsInStock': 76,
},
{
'ProductID': 66,
'ProductName': 'Louisiana Hot Spiced Okra',
'SupplierID': 2,
'UnitPrice': 17.00,
'UnitsInStock': 4,
},
{
'ProductID': 67,
'ProductName': 'Laughing Lumberjack Lager',
'SupplierID': 16,
'UnitPrice': 14.00,
'UnitsInStock': 52,
},

'ProductID': 68,
'ProductName': 'Scottish Longbreads',
'SupplierID': 8,
'UnitPrice': 12.50,
'UnitsInStock': 6,
},
{
'ProductID': 69,
'ProductName': 'Gudbrandsdalsost',
'SupplierID': 15,
'UnitPrice': 36.00,
'UnitsInStock': 26,
}
];
* You can set searchSettings.ignoreAccent property along with other search settings such as fields,
operator, and ignoreCase to achieve the desired search behavior.
* This feature works only for the characters that are not in the ASCII range.
* This feature may have a slight impact on search performance.
Highlight the search text
The Syncfusion Grid component allows you to visually highlight search results within the displayed data.
This feature helps you to quickly identify where the search items are found within the displayed data. By
adding a style to the matched text, you can quickly identify where the search items are present in the
grid.
To achieve search text highlighting in the Grid, you can utilize the queryCellInfo event. This event is
triggered for each cell during the Grid rendering process, allowing you to customize the cell content
based on your requirements.
The following example demonstrates how to highlight search text in grid using the queryCellInfo event.
The queryCellInfo event checks if the current cell is in the desired search column, retrieves the cell
value, search keyword and uses the includes method to check if the cell value contains the search
keyword. If it does, the matched text is replaced with the same text wrapped in a span tag with a
customcss class. You can then use CSS to define the customcss class and style to easily identify where
the search keywords are present in the grid.
APP.JSX
function App() {
let key = '';


key = args.searchString.toLowerCase();
}
}
const queryCellInfo = (args) => {
if (key !== '') {
let cellContent = args.data[args.column.field];
let parsedContent = cellContent.toString().toLowerCase();
if (parsedContent.includes(key.toLowerCase())) {
let i = 0;
let searchStr = '';
while (i < key.length) {
let index = parsedContent.indexOf(key[i]);
searchStr = searchStr + cellContent.toString()[index];
i++;
}
args.cell.innerHTML = args.cell.innerText.replaceAll(searchStr,
"<span class='customcss'>" + searchStr + '</span>');
}
}
}
return (<div>
actionBegin={actionBegin} queryCellInfo={queryCellInfo}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
APP.TSX
QueryCellInfoEventArgs, Search, SearchEventArgs } from '@syncfusion/ej2-
react-grids';
function App() {
let key: string = '';
const actionBegin = (args: SearchEventArgs) => {
key = args.searchString.toLowerCase();
}
}

const queryCellInfo = (args: QueryCellInfoEventArgs) => {

if (key !== '') {
let cellContent = args.data[args.column.field];
let parsedContent = cellContent.toString().toLowerCase();
if (parsedContent.includes(key.toLowerCase())) {
let i = 0;
let searchStr = '';
while (i < key.length) {
let index = parsedContent.indexOf(key [i]);
searchStr = searchStr + cellContent.toString()[index];
i++;
}
args.cell.innerHTML = args.cell.innerText.replaceAll(searchStr,
"<span class='customcss'>" + searchStr + '</span>');
}
}
}
return (<div>
actionBegin={actionBegin} queryCellInfo={queryCellInfo}>
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',


},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Clear search by external button

The Syncfusion Grid component provides a capability to clear searched data in the grid. This
functionality offers the ability to reset or clear any active search filters that have been applied to the
grid's data.
To clear the searched grid records from an external button, you can set the searchSettings.key property
to an empty string to clear the search text. This property represents the current search text in the
search box.
The following example demonstrates how to clear the searched records using an external button.
APP.JSX
import { Inject, Search, Toolbar } from '@syncfusion/ej2-react-grids';
function App() {
let grid;
const searchOptions = {
fields: ['CustomerID'],
ignoreCase: true,
key: 'Ha',
operator: 'contains',
};
if (grid) {
}
};
return (<div>
<ButtonComponent onClick={clickHandler}>Clear Search</ButtonComponent>
searchSettings={searchOptions} height={260} ref={g => grid = g}>
<ColumnsDirective>
textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]}/>
};
export default App;
APP.TSX


import { Inject, Search, SearchSettingsModel, Toolbar, ToolbarItems } from
function App() {
const searchOptions: SearchSettingsModel = {
fields: ['CustomerID'],
ignoreCase: true,
key: 'Ha',
operator: 'contains',
};
if (grid) {
}
};
return (<div>
<ButtonComponent onClick={clickHandler}>Clear Search</ButtonComponent>
searchSettings={searchOptions} height={260} ref={g => grid = g}>
<ColumnsDirective>
</ColumnsDirective>
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{


Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),

Link to the VideoGrid Paging in React Grid component

}];
You can also clear the searched records by using the clear icon within the search input field.
See also
• How to perform search by using Wildcard and LIKE operator filter
Paging in React Grid component

Paging provides an option to display grid data in segmented pages, making it easier to navigate through
large datasets. This feature is particularly useful when dealing with extensive data sets.
To enable paging, you need to set the allowPaging property to true. This property determines whether
paging is enabled or disabled for the grid. When paging is enabled, a pager component rendered at the
bottom of the grid, allowing you to navigate through different pages of data.
To use paging, you need to inject the Page module into the grid. This service provides the necessary
methods and events to handle paging functionality.
Paging options can be configured through the pageSettings property. The pageSettings object allows
you to control various aspects of paging, such as the page size, current page, and total number of
records.
You can achieve better performance by using grid paging to fetch only a pre-defined number of records
from the data source.
Customize the pager options
Customizing the pager options in the Syncfusion Grid allows you to tailor the pagination control
according to your specific requirements. You can customize the pager to display the number of pages
using the pageCount property, change the current page using currentPage property, display the
number of records in the grid using the pageSize property, and even adjust the page sizes in a
dropdown using the pageSizes property. Additionally, you can include the current page as a query
string in the URL for convenient navigation.
Change the page size
The Syncfusion Grid allows you to control the number of records displayed per page, providing you with
flexibility in managing your data. This feature is particularly useful when you want to adjust the amount
of data visible to you at any given time. To achieve this, you can utilize the pageSettings.pageSize
property. This property is used to specify the initial number of records to display on each page. The
default value of pageSize property is 12.
The following example demonstrates how to change the page size of a Grid using an external button
click based on TextBox input.
APP.JSX


function App() {
const [pageSettings, setPageSettings] = useState();
let textbox;
const click = () => {
const pageSize = { pageSize: textbox.value };
setPageSettings(pageSize);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enter page size:</label>
<TextBoxComponent ref={t => textbox = t} width={120}></TextBoxComponent>
<ButtonComponent onClick={click}>Click button</ButtonComponent>
<GridComponent dataSource={data} height={265} allowPaging={true}
<ColumnsDirective>
width='140' />
format="C" textAlign="Right" />
width='150' />
/>
displayAsCheckBox={true} />
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {
const [pageSettings, setPageSettings] = useState<PageSettingsModel>();
const pageSize: PageSettingsModel = { pageSize: (textbox as
TextBoxComponent).value };
setPageSettings(pageSize);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enter page size:</label>


<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},

{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Change the page count

The Syncfusion Grid allows you to adjust the number of pages displayed in the pager container. This is
useful when you want to manage the number of pages you see while navigating through extensive
datasets. The default value of pageCount property is 8.
To change the page count in the Syncfusion Grid, you can utilize the pageSettings.pageCount property,
which defines the number of pages displayed in the pager container.

The following example demonstrates how to change the page count of a Grid using an external button
click based on TextBox input.
APP.JSX
function App() {
let textbox;
const pageCount = { pageCount: textbox.value };
setPageSettings(pageCount);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enter page count:</label>
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
APP.TSX
function App() {

const pageCount: PageSettingsModel = { pageCount: (textbox as

setPageSettings(pageCount);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enter page count:</label>
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},

{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Change the current page

The Syncfusion Grid allows you to change the currently displayed page, which can be particularly useful
when you need to navigate through different pages of data either upon the initial rendering of the grid
or update the displayed page based on interactions or specific conditions. The default value of
currentPage property is 1.
To change the current page in the Syncfusion Grid, you can utilize the pageSettings.currentPage
property, which defines the current page number of the pager.
The following example demonstrates how to dynamically change the current page using an external
button click based on TextBox input:
APP.JSX
function App() {
let textbox;
const currentPage = { currentPage: textbox.value };
setPageSettings(currentPage);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enter current page:</label>
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
APP.TSX


function App() {
const currentPage: PageSettingsModel = { currentPage: (textbox as
setPageSettings(currentPage);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enter current page:</label>
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
Add current page in URL as a query string

The Syncfusion Grid allows you to include the current page information as a query string in the URL. This
feature is particularly useful for scenarios where you need to maintain and share the state of the grid's
pagination.
To add the current page detail to the URL as a query string in the Syncfusion Grid, you can enable the
enableQueryString property. When this property is set to true, it will automatically pass the current
page information as a query string parameter along with the URL when navigating to other pages within
the grid.
By enabling the enableQueryString property, you can easily copy the URL of the current page and
share it with others. When the shared URL is opened, it will load the grid with the exact page that was
originally shared.
In the following example, the EJ2 Toggle Switch Button component is added to enable or disable the
addition of the current page to the URL as a query string. When the switch is toggled, the change event
is triggered and the enableQueryString property of the grid is updated accordingly.
APP.JSX
buttons';
function App() {
let grid;
const toggleQueryString = (args) => {
grid.pageSettings.enableQueryString = args.checked;
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enable/Disable Query
String</label>
<SwitchComponent change={toggleQueryString}></SwitchComponent>
allowPaging={true} >
<ColumnsDirective>
width='140' />
width='150' />
/>


</ColumnsDirective>
};
export default App;
APP.TSX
buttons';
function App() {
const toggleQueryString = (args: ChangeEventArgs) => {
(grid as GridComponent).pageSettings.enableQueryString = args.checked;
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Enable/Disable Query
String</label>
<SwitchComponent change={toggleQueryString}></SwitchComponent>
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),

},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},

{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];

DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}];
Pager template
The pager template in Syncfusion Grid allows you to customize the appearance and behavior of the
pager element, which is used for navigation through different pages of grid data. This feature is
particularly useful when you want to use custom elements inside the pager instead of the default
elements.
To use the pager template, you need to specify the pagerTemplate property in your Syncfusion Grid
configuration. The pagerTemplate property allows you to define a custom template for the pager.
Within the template, you can access the currentPage, pageSize, pageCount, totalPage and
totalRecordCount values.
The following example demonstrates how to render a NumericTextBox component in the pager using
the pagerTemplate property:
APP.JSX
import { NumericTextBoxComponent } from "@syncfusion/ej2-react-inputs";
grids';
import { GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
function App() {
let grid;
const change = (args) => {
grid.pageSettings.currentPage = args.value;
};
const template = (pagerData) => {
return (<div className="e-pagertemplate">
<div className="col-lg-12 control-section">
<div className="content-wrapper">
<NumericTextBoxComponent min={1} max={3}
value={pagerData.currentPage} format='###.##'
change={change}></NumericTextBoxComponent>
</div>
</div>
<div id="totalPages" className="e-pagertemplatemessage" style={{
marginTop: 8, marginLeft: 30, border: "none", display: "inline-block" }}>
<span className="e-pagenomsg">
{pagerData.currentPage} of {pagerData.totalPages} pages
({pagerData.totalRecordsCount} items)

</span>
</div>
</div>);
};
return (<GridComponent dataSource={data} allowPaging={true}
pageSettings={{ template: template, pageSize: 5 }} ref={g => grid = g}>
<ColumnsDirective>
width='100'/>
width='100'/>
</ColumnsDirective>
</GridComponent>);
}
;
export default App;
APP.TSX
import { NumericTextBoxComponent } from "@syncfusion/ej2-react-inputs";
grids';
import { GridComponent, Inject, Grid, Page, PageSettingsModel } from
function App() {
const change = (args) => {
grid.pageSettings.currentPage = args.value;
}
const template = (pagerData) => {
return (
<div className="e-pagertemplate">
<div className="col-lg-12 control-section">
<div className="content-wrapper">
<NumericTextBoxComponent min={1} max={3}
value={pagerData.currentPage} format='###.##'
change={change}></NumericTextBoxComponent>
</div>
</div>
<div
id="totalPages"
className="e-pagertemplatemessage" style={{ marginTop: 8,
marginLeft: 30, border: "none", display: "inline-block"}}>
<span className="e-pagenomsg">
{pagerData.currentPage} of {pagerData.totalPages} pages
({pagerData.totalRecordsCount} items)
</span>
</div>
</div>
);
}


pageSettings={{ template: template, pageSize: 5 }} ref={g=> grid = g}>
<ColumnsDirective>
width='100'/>
width='100'/>
</ColumnsDirective>
</GridComponent>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},

{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Pager with page size dropdown

The pager with a page size dropdown in Syncfusion Grid allows you to dynamically change the number
of records displayed in the grid. This feature is useful when you want to easily customize the number of
records to be shown per page.
To enable the page size Dropdown feature in the Syncfusion Grid, you need to set the
pageSettings.pageSizes property to true in the grid configuration. This property configuration triggers
the rendering of a dropdown list within the pager, allowing you to select the desired page size. The
selected page size determines the number of records displayed on each page of the grid.
The following example that demonstrates how to integrate the page size Dropdown feature by
configuring the pageSizes property:
APP.JSX


grids';
function App() {
const pageOptions = {
pageSize: 8, pageSizes: true
};
return (<GridComponent dataSource={data} allowPaging={true} height={268}
pageSettings={pageOptions}>
<ColumnsDirective>
width='100'/>
width='100'/>
</ColumnsDirective>
</GridComponent>);
}
;
export default App;
APP.TSX
grids';
import { GridComponent, Inject, Page, PageSettingsModel } from
function App() {
const pageOptions: PageSettingsModel = {
};
<ColumnsDirective>
width='100'/>
width='100'/>
</ColumnsDirective>
</GridComponent>)
};
export default App;
DATASOURCE.JSX
export let data = [
{


Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
If the pageSizes property is set to a boolean value like 'true' or 'false,' the page size dropdown defaults
to an array of strings containing options such as ['All', '5', '10', '15', '20'].
Customize page size dropdown
The Syncfusion Grid allows you to customize the default values of the page size dropdown in the pager,
allowing you to change the number of records displayed per page. To achieve this, you can define the
pageSizes property as an array of string instead of boolean value.
The following example demonstrate how to customize the default values of the pager dropdown using
the pageSizes property:
APP.JSX
grids';
function App() {
pageSizes: ['5', '10', '15', '20', 'All']
};
<ColumnsDirective>
width='100' />
width='100' />
</ColumnsDirective>
</GridComponent>);

}
;
export default App;
APP.TSX
grids';
import { GridComponent, Inject, Page, PageSettingsModel } from
function App() {
pageSizes: ['5', '10', '15', '20', 'All']
};
<ColumnsDirective>
width='100' />
</ColumnsDirective>
</GridComponent>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',

},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},

{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
The pageSizes property can be configured with either an array of strings or a boolean value.

How to navigate to particular page

Navigating to a particular page in the Syncfusion Grid is particularly useful when dealing with large
datasets. It provides a quick and efficient way to jump to a specific page within the grid.
To achieve page navigation, you can use the goToPage method provided by Syncfusion Grid. This
method allows you to programmatically navigate to a specific page within the grid.
The following example demonstrates how to dynamically navigate to a particular page using the
goToPage method triggered by an external button click based on TextBox input:
APP.JSX
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Inject, Page
react-inputs';
import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-
buttons';
import { FormsModule } from '@angular/forms';
function App() {
let grid;
let textbox;
(grid.pagerModule).goToPage(textbox.value);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Select page
index:</label>
<TextBoxComponent ref={t => textbox = t}
width={120}></TextBoxComponent>
<ColumnsDirective>
width='140' />
width='120' format="C" textAlign="Right" />
width='150' />
width='150' displayAsCheckBox={true} />
</ColumnsDirective>
};
export default App;
APP.TSX


function App() {
(grid as GridComponent).pagerModule.goToPage((textbox as
TextBoxComponent).value);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Select page index:</label>
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',

},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},

{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),


},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),


'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),


}];
How to get the pager element

You can get pager element in the Syncfusion Grid. This allows you to customize the pager's appearance
or behavior to meet the requirements of your application.
getPager- This method allows you to obtain a reference to the pager element within the Syncfusion
Grid. It returns an HTML element representing the pager.
`ts
grid.getPager()
`
Dynamically calculate page size based on element height
You have an option to dynamically calculate the page size of a grid by considering the height of its
parent element. This functionality proves invaluable in ensuring that the grid's content remains within
the available space, preventing the need for excessive scrolling. It primarily serves the purpose of
automatically adjusting the pageSize when the height of the grid's parent element changes dynamically.
Upon each alteration in the parent element's height, invoking this method will compute the grid's
pageSize and present the current page records accordingly. This feature effectively addresses situations
where a static pageSize value does not cater to the varying heights of different parent elements,
preventing any unwanted empty spaces within the grid.
To achieve page size calculation based on an element's height in the Grid, you can utilize the
calculatePageSizeByParentHeight method. This method calculates the page size based on the height of
the parent element.
The following example demonstrates how to calculate the page size based on element height using the
calculatePageSizeByParentHeight method triggered by a change event based on the NumericTextBox
input:
APP.JSX
function App() {
let grid;
const [pageSize, setPageSize] = useState()
const calculatePageSize = ({ value }) => {
const newValue = { pageSize:
grid.calculatePageSizeByParentHeight(value.toString()) };
setPageSize(newValue);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Select page size:</label>

<NumericTextBoxComponent placeholder='select container height'

format='####.##' min={150} step={50} width={200}
change={calculatePageSize}></NumericTextBoxComponent>
allowPaging={true} pageSettings={pageSize}>
<ColumnsDirective>
width='140' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
import { NumericTextBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-
react-inputs';
function App() {
const [pageSize, setPageSize] = useState<PageSettingsModel>()
const calculatePageSize = ({ value }: ChangeEventArgs) => {
const newValue: PageSettingsModel = { pageSize: (grid as
GridComponent).calculatePageSizeByParentHeight((value as number).toString())
};
setPageSize(newValue);
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Select page size:</label>
<NumericTextBoxComponent placeholder='select container height'
format='####.##' min={150} step={50} width={200}
change={calculatePageSize}></NumericTextBoxComponent>
<GridComponent dataSource={data} ref={g => grid = g} allowPaging={true}
pageSettings={pageSize}>
<ColumnsDirective>
width='140' />


width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Render pager at the top of the grid

The Grid component provides built-in support for rendering a pager at the bottom of the grid by default.
However, in certain scenarios, you might want to display the pager at the top of the grid. This can be
achieved by utilizing the dataBound event. This event is triggered when the Grid completes rendering its
data. By handling this event, you can customize the rendering of the pager and move it to the top of the
Grid.
Here's an example that demonstrates how to render the pager at the top of the grid using the
dataBound event:
APP.JSX
import { ColumnDirective, ColumnsDirective, Toolbar } from '@syncfusion/ej2-
react-grids';

function App() {
let gridInstance;
let initialGridLoad = true;
};
if (initialGridLoad && gridInstance) {
initialGridLoad = false;
const pager = document.getElementsByClassName('e-gridpager');
let topElement = document.getElementsByClassName('e-gridheader');
gridInstance.element.insertBefore(pager[0], topElement[0]);
}
};
return (<GridComponent dataSource={data} ref={grid => gridInstance =
grid} toolbar={toolbarOptions} allowPaging={true} height={268}
pageSettings={pageOptions} dataBound={dataBound}>
<ColumnsDirective>
width='150'/>
width='150'/>
width='150'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar]}/>
</GridComponent>);
}
;
export default App;
APP.TSX
grids';
import { Grid, GridComponent, Inject, Page, PageSettingsModel } from
function App() {
let gridInstance: Grid | null;
let initialGridLoad: boolean = true;
};
if (initialGridLoad && gridInstance) {
initialGridLoad = false;
const pager = document.getElementsByClassName('e-gridpager');
let topElement = document.getElementsByClassName('e-gridheader');
gridInstance.element.insertBefore(pager[0], topElement[0]);
}
}

return (<GridComponent dataSource={data} ref={grid => gridInstance =

grid} allowPaging={true} height={300}
pageSettings={pageOptions} dataBound={dataBound}>
<ColumnsDirective>
width='150'/>
width='150'/>
width='150'/>
</ColumnsDirective>
</GridComponent>)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),


},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),


},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',


},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),


},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
During the paging action, the pager component triggers the below three events.
* The created event triggers when Pager is created.
* The click event triggers when the numeric items in the pager is clicked.
* The dropDownChanged event triggers when pageSize DropDownList value is selected.
Pager events
The Syncfusion Grid component triggers two pager events during paging actions:

actionBegin- This event triggered before any paging action (such as changing the page, changing the
page size and etc) is initiated. You can use this event to customize or control the behavior of paging
actions.
actionComplete- This event triggered after a pager action is completed. It provides information about
the action, such as the new page number, page size, and the total number of records. You can use this
event to perform actions or update the UI after the operation has been executed.
The following example that example demonstrates how to use these events to display notification
messages to indicate the current and next page during paging actions in the Syncfusion React Grid:
APP.JSX
Page, PageEventArgs, PageSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
const [currentMessage, setCurrentMessage] = React.useState('');
const [nextMessage, setNextMessage] = React.useState('');
if (args.requestType === 'paging') {
const pageMessage = (args.currentPage) > (args.previousPage)
? `You are going to switch to page
${parseInt((args.currentPage), 10) + 1}`
: `You are going to switch to page ${args.previousPage}`;
setNextMessage(pageMessage);
}
}
setCurrentMessage('Now you are in page ' + args.currentPage);
}
}
return (<div>
<p id='message1' className='message'>{currentMessage}</p>
<p id='message2' className='message'>{nextMessage}</p>
<GridComponent dataSource={data} allowPaging={true}
pageSettings={pageSettings} actionBegin={actionBegin}
<ColumnsDirective>
width='140' />
width='150' />
</ColumnsDirective>

};
export default App;
APP.TSX
Page, PageEventArgs, PageSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
const [currentMessage, setCurrentMessage] = React.useState('');
const [nextMessage, setNextMessage] = React.useState('');
const actionBegin = (args: PageEventArgs) => {
const pageMessage = (args.currentPage as string) > (args.previousPage
as string)
? `You are going to switch to page ${parseInt((args.currentPage as
string), 10) + 1}`
: `You are going to switch to page ${args.previousPage}`;
setNextMessage(pageMessage);
}
}
const actionComplete = (args: PageEventArgs) => {
setCurrentMessage('Now you are in page ' + args.currentPage);
}
}
return (<div>
<p id='message1' className='message'>{currentMessage}</p>
<p id='message2' className='message'>{nextMessage}</p>
<GridComponent dataSource={data} allowPaging={true}
pageSettings={pageSettings} actionBegin={actionBegin}
<ColumnsDirective>
width='140' />
width='150' />
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [

{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{


Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),

Link to the VideoGrid Selection in React Grid component

},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
See also
• Group with Paging

Selection in React Grid component

Selection in the Grid component allows you to interactively select specific cells, rows, or columns within
the grid. This selection can be done through mouse clicks or arrow keys (up, down, left, and right) or
touch. This feature is useful when you want to highlight, manipulate, or perform actions on specific
cells, rows, or columns within the Grid.
To disable selection in the Grid, set the allowSelection to false.
The grid supports two types of selection that can be set by using the selectionSettings.type.They are:
• Single - The Single value is set by default. Allows you to select only a single row or cell or
column.
• Multiple - Allows you to select multiple rows or cells or columns.
To perform the multi-selection, press and hold CTRL key and click the desired rows or cells or columns.
To select range of rows or cells or columns, press and hold the SHIFT key and click the rows or cells or
columns.
APP.JSX
function App() {

let grid;
const dropdownData = [
{ text: 'Single', value: 'Single' },
{ text: 'Multiple', value: 'Multiple' }
];
grid.selectionSettings.type = args.value;
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Choose selection
type:</label>
<DropDownListComponent index={0} width={150} dataSource={dropdownData}
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
APP.TSX
react-dropdowns';
function App() {
const dropdownData: { [key: string]: Object; }[] = [
{ text: 'Single', value: 'Single' },
{ text: 'Multiple', value: 'Multiple' }
];
(grid as GridComponent).selectionSettings.type = args.value;
}
return (<div>
type:</label>
<ColumnsDirective>
width='150' />


/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
By default, the Grid will be rendered with only the basic features such as Grid rendering and selection.
The default module, including the Selection, is automatically loaded. Therefore, there is no need to
inject the Selection module separately as it will be injected by default.
Selection mode
The selection mode feature allows you to choose between different modes for selecting rows or cells or
both within the Grid based on your specific requirements. This feature is particularly useful when you
want to highlight and manipulate specific rows or cells in the Grid.
To enable selection mode, you can set the selectionSettings.mode property. The Grid component
supports three types of selection modes:
• Row - The row value is set by default. Allows you to select rows only.
• Cell - Allows you to select cells only.
• Both - Allows you to select rows and cells at the same time.

The following example, demonstrates how to dynamically enable and change the
selectionSettings.mode using the DropDownList component:
APP.JSX
react-dropdowns';
function App() {
let grid;
{ text: 'Row', value: 'Row' },
{ text: 'Cell', value: 'Cell' },
{ text: 'Both', value: 'Both' }
];
grid.selectionSettings.mode = args.value;
}
return (<div>
mode:</label>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
APP.TSX
react-dropdowns';
function App() {
];


(grid as GridComponent).selectionSettings.mode = args.value;
}
return (<div>
mode:</label>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Touch interaction
The touch interaction feature in Grid allows you to easily interact with the grid on touch screen devices.
This feature is particularly useful for improving the user experience on mobile devices and tablets,
making it easier to navigate and interact with the grid's content using touch gestures.
Single Row Selection

When you tap on a grid row using a touch screen, the tapped row is automatically selected. This
provides a straightforward way to select single rows with a touch interface.
Multi-Row Selection
To select multiple rows in the grid, you can utilize the multi-row selection feature. When you tap on a
row, a popup is displayed, indicating the option for multi-row selection. You can tap on the popup, and
then proceed to tap on the desired rows that you want to select. This allows you to select and interact
with multiple rows simultaneously, as shown in the following image:
Multi-Row or Cell Selection

In addition to selecting multiple rows, you can also perform multi-row or cell selection in the grid. By
tapping on the popup, you can choose the option for multi-row or cell selection. Once selected, you can
then tap on the desired rows or cells to make the selection, as shown in the following image:
For multi-selection, it requires the selection type to be Multiple.

The following screenshot represents a Grid touch selection in the device.

Toggle selection
The toggle selection feature in the Grid component allows you to easily select and unselect specific
rows, cells, or columns. With toggle selection enabled, you can easily switch the selection state of an
item by clicking on it. This means that if you click on a selected row, cell, or column, it will become
unselected, and vice versa.
To enable the toggle selection feature, you need to set the selectionSettings.enableToggle property to
true.
The following example demonstrates how to enable the toggle selection for both cells and rows in a Grid
using the selectionSettings.enableToggle property.
APP.JSX
import { SwitchComponent } from '@syncfusion/ej2-react-buttons'


function App() {
let grid;
const selectionSettings = { type: 'Multiple' };
];
grid.selectionSettings.mode = args.value;
}
const toggleColumnSelection = (args) => {
grid.selectionSettings.enableToggle = args.checked;
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Choose cell selection
mode:</label>
<DropDownListComponent index={0} width={150}
dataSource={dropdownData} change={valueChange}></DropDownListComponent><br />
<label style={{ padding: "30px 17px 0 0" }}>Enable/Disable Toggle
selection</label>
<SwitchComponent change={toggleColumnSelection}></SwitchComponent>
selectionSettings={selectionSettings}>
<ColumnsDirective>
<ColumnDirective field='ShipCity' width='100' />
</ColumnsDirective>
};
export default App;
APP.TSX
react-dropdowns';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons'
function App() {
const selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
];
(grid as GridComponent).selectionSettings.mode = args.value;
}

const toggleColumnSelection = (args: ChangeEventArgs) => {

(grid as GridComponent).selectionSettings.enableToggle = args.checked;
}
return (<div>
<label style={{ padding: "30px 17px 0 0" }}>Choose cell selection
mode:</label>
change={valueChange}></DropDownListComponent><br />
<label style={{ padding: "30px 17px 0 0" }}>Enable/Disable Toggle
selection</label>
<SwitchComponent change={toggleColumnSelection}></SwitchComponent>
selectionSettings={selectionSettings}>
<ColumnsDirective>
<ColumnDirective field='ShipCity' width='100' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* If multi selection is enabled, then first click on any selected row (without pressing Ctrl key), it will clear
the multi selection and in second click on the same row, it will be unselected.
* Toggle selection is a feature that can be applied to all types of selections. When the checkboxOnly
property is set to true, it restricts the ability to select or deselect rows or cells by clicking on them.

Clear all selection programmatically

The clear selection programmatically feature is particularly useful when you need to remove the
selected rows or cells or columns from the Grid component.
To clear the selection in the component programmatically, you can use the clearSelection method.
In the following example, it demonstrates how to clear all selection by calling the clearSelection method
in the button click event.
APP.JSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons'
import { ColumnDirective, ColumnsDirective, GridComponent, Page, Inject }
function App() {
let grid;
const selectionSettings = { mode: 'Both', allowColumnSelection: true, type:
'Multiple' };
const pageOptions = { pageSize: 5 };
const clearSelection = () => {
grid.clearSelection();
}
return (<div>
<ButtonComponent onClick={clearSelection}>Clear
selectionSettings={selectionSettings} allowPaging={true}
<ColumnsDirective>
width='150' />
width='100' />
format='C2'/>
</ColumnsDirective>
};
export default App;
APP.TSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons'
import { ColumnDirective, ColumnsDirective, GridComponent, Page,
PageSettingsModel, SelectionSettingsModel, Inject } from '@syncfusion/ej2-
react-grids';
function App() {
const selectionSettings: SelectionSettingsModel = { mode: 'Both',
allowColumnSelection: true, type: 'Multiple' };

const pageOptions: PageSettingsModel = { pageSize: 5 };

const clearSelection = () => {
(grid as GridComponent).clearSelection();
}
return (<div>
<ButtonComponent onClick={clearSelection}>Clear
selectionSettings={selectionSettings} allowPaging={true}
<ColumnsDirective>
width='150' />
width='100' />
format='C2' />
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',


},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
In Both mode, if you call clearCellSelection first, it will clear cell selections, and then if you call
clearRowSelection, it will clear row selections. The order of method calls determines which type of
selection is cleared first.

To remove a specific selection in a row, cell, or column, utilize the following methods: clearRowSelection
for clearing row selections, clearCellSelection for clearing cell selections, and clearColumnSelection for
clearing column selections.
Persist selection
Persist selection feature in the Grid allows you to retain the selected items even after data manipulation
or refreshing the grid. This feature is useful when you want to keep track of the selected items across
different grid operations.
To enable persist selection, set the selectionSettings.persistSelection property to true.
* While using persist selection feature, at least one column in your grid should be enabled as a primary
key. This ensures that the grid can identify and persist the selected items correctly.
* The persistSelection feature is not supported for cell selections in the Syncfusion React Grid
component
In the following example, it demonstrates how to enable the persist selection feature for both rows and
columns using the selectionSettings.persistSelection property :
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Page, Inject }
function App() {
const selectionSettings = { mode: 'Both', allowColumnSelection: true, type:
'Multiple', persistSelection: true };
return (<div>
<GridComponent dataSource={data} selectionSettings={selectionSettings}
allowPaging={true} pageSettings={pageOptions}>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Page,
PageSettingsModel, SelectionSettingsModel, Inject } from '@syncfusion/ej2-
react-grids';
function App() {

const selectionSettings: SelectionSettingsModel = { mode: 'Both',

allowColumnSelection: true, type: 'Multiple', persistSelection: true };
return (<div>
<GridComponent dataSource={data} selectionSettings={selectionSettings}
allowPaging={true} pageSettings={pageOptions}>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},

{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{


Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),


'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),

Link to the VideoGrid Aggregates in React Grid component

},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Aggregates in React Grid component

The Aggregates feature in the Syncfusion React Grid component allows you to display aggregate values
in the footer, group footer, and group caption of the grid. With this feature, you can easily perform
calculations on specific columns and show summary information. This feature can be configured using
the e-aggregates directive. To represent an aggregate column, you need to specify the minimum
required properties, such as field and type.
To use aggregate feature, you need to inject the Aggregate module into the grid.

Displaying aggregate values

By default, the aggregate values are displayed in the footer, group, and caption cells of the grid.
However, you can choose to display the aggregate value in any of these cells by using the following
properties:
• footerTemplate: Use this property to display the aggregate value in the footer cell. You can
define a custom template to format the aggregate value as per your requirements.
• groupFooterTemplate: Use this property to display the aggregate value in the group footer
cell. Similar to the footerTemplate, you can provide a custom template to format the
aggregate value.
• groupCaptionTemplate: Use this property to display the aggregate value in the group caption
cell. You can define a custom template to format the aggregate value.
APP.JSX
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective,
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective }
import { Aggregate, Group, Page } from '@syncfusion/ej2-react-grids';
function App() {
columns: ['ShipCountry'],
showDropArea: false
};
return (<span>Sum: {props.Sum}</span>);
};
const footerMax = (props) => {
return (<span>Max: {props.Max}</span>);
};
<ColumnsDirective>
width='150' />
<ColumnDirective field='OrderDate' headerText='OrderDate' format='yMd'
width='150' />
textAlign='Right' width='150' />
width='150' />
</ColumnsDirective>
<AggregateColumnDirective field='Freight' type='Sum' format='C2'
groupFooterTemplate={footerSum} />

<AggregateColumnDirective field='Freight' type='Max' format='C2'
groupCaptionTemplate={footerMax} />
<Inject services={[Page, Aggregate, Group]} />
</GridComponent>);
}
export default App;
APP.TSX
import { Aggregate, Group, GroupSettingsModel, Page } from '@syncfusion/ej2-
react-grids';
function App() {
columns: ['ShipCountry'],
showDropArea: false
};
return (<span>Sum: {props.Sum}</span>)
}
const footerMax = (props) => {
return (<span>Max: {props.Max}</span>)
}
allowGrouping={true}
<ColumnsDirective>
width='150' />
<ColumnDirective field='OrderDate' headerText='OrderDate' format='yMd'
width='150' />
textAlign='Right' width='150' />
width='150' />
</ColumnsDirective>
<AggregateColumnDirective field='Freight' type='Sum' format='C2'
groupFooterTemplate={footerSum} />

groupCaptionTemplate={footerMax} />
<Inject services={[Page, Aggregate, Group]} />
</GridComponent>)
}
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),


rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),


6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
* When using local data, the total summary is calculated based on the entire dataset available in the
grid. The aggregate values will reflect calculations across all the rows in the grid.
* When working with remote data, the total summary is calculated based on the current page records.
This means that if you have enabled pagination and are displaying data in pages, the aggregate values in
the footer will represent calculations only for the visible page.
Built-in aggregate types
The Syncfusion React Grid component provides several built-in aggregate types that can be specified in
the type property to configure an aggregate column.
The available built-in aggregate types are:
• Sum: Calculates the sum of the values in the column.

• Average: Calculates the average of the values in the column.
• Min: Finds the minimum value in the column.

• Max: Finds the maximum value in the column.

• Count: Counts the number of values in the column.
• TrueCount: Counts the number of true values in the column.
• FalseCount: Counts the number of false values in the column.
Here is an example that demonstrates how to use built-in aggregates types in the Syncfusion Grid:
APP.JSX
GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate } from '@syncfusion/ej2-react-grids';
function App() {
const groupSettings = { showDropArea: false, columns: ['ShipCountry'] };
const freightTemplate = (props) => {
}
const shippedDateTemplate = (props) => {
return (<span>Max: {(new Date(props.Max)).toLocaleDateString()}</span>)
}
const orderDateTemplate = (props) => {
return (<span>Min:{(new Date(props.Min)).toLocaleDateString()}</span>)
}
const verifiedTemplate = (props) => {
return (<span>TrueCount: {props.TrueCount}</span>)
}
return (<GridComponent dataSource={data} height={315} allowGrouping={true}
groupSettings={groupSettings}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='OrderDate' headerText='Order Date' type='date'
<ColumnDirective field='ShippedDate' headerText='ShippedDate'
type='date' width='150' format='yMd' />
format='C2' />
<ColumnDirective field='isVerified' headerText='Verified' width='150'
type='boolean' />
width='150' />
</ColumnsDirective>
footerTemplate={freightTemplate} />
<AggregateColumnDirective field='ShippedDate' type='Max'
footerTemplate={shippedDateTemplate} />

<AggregateColumnDirective field='OrderDate' type='Min'

footerTemplate={orderDateTemplate} />
<AggregateColumnDirective field='isVerified' type='TrueCount'
footerTemplate={verifiedTemplate} />
<Inject services={[Aggregate, Group]} />
</GridComponent>)
}
export default App;
APP.TSX
GridComponent, Group, GroupSettingsModel, Inject } from '@syncfusion/ej2-
react-grids';
import { Aggregate } from '@syncfusion/ej2-react-grids';
function App() {
const groupSettings: GroupSettingsModel = { showDropArea: false, columns:
['ShipCountry'] };
const freightTemplate = (props) => {
}
const shippedDateTemplate = (props) => {
return (<span>Max: {(new Date(props.Max)).toLocaleDateString()}</span>)
}
const orderDateTemplate = (props) => {
return (<span>Min:{(new Date(props.Min)).toLocaleDateString()}</span>)
}
const verifiedTemplate = (props) => {
return (<span>TrueCount: {props.TrueCount}</span>)
}
return (<GridComponent dataSource={data} height={315} allowGrouping={true}
groupSettings={groupSettings}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='OrderDate' headerText='Order Date' type='date'
<ColumnDirective field='ShippedDate' headerText='ShippedDate'
type='date' width='150' format='yMd' />
format='C2' />
<ColumnDirective field='isVerified' headerText='Verified' width='150'
type='boolean' />
width='150' />
</ColumnsDirective>

footerTemplate={freightTemplate} />
<AggregateColumnDirective field='ShippedDate' type='Max'
footerTemplate={shippedDateTemplate} />
<AggregateColumnDirective field='OrderDate' type='Min'
footerTemplate={orderDateTemplate} />
<AggregateColumnDirective field='isVerified' type='TrueCount'
footerTemplate={verifiedTemplate} />
<Inject services={[Aggregate, Group]} />
</GridComponent>)
}
export default App;
DATASOURCE.JSX
export let data = [
{
OrderID: 10248,
CustomerID: 'VINET',
OrderDate: '1996-07-04T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 32.38,
ShipName: 'Vins et alcools Chevalier',
ShipAddress: "59 rue de l'Abbaye",
ShipCity: 'Reims',
ShipRegion: null,
isVerified:true,
ShipCountry: 'France',
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
OrderDate: '1996-07-05T00:00:00.000Z',
ShippedDate: '1996-07-10T00:00:00.000Z',
Freight: 11.61,
ShipName: 'Toms Spezialitäten',
ShipAddress: 'Luisenstr. 48',
ShipCity: 'Münster',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Germany',
},
{
OrderID: 10250,
CustomerID: 'HANAR',
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-12T00:00:00.000Z',
Freight: 65.83,
ShipName: 'Hanari Carnes',

ShipCity: 'Rio de Janeiro',

ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10251,
CustomerID: 'VICTE',
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 41.34,
ShipName: 'Victuailles en stock',
ShipAddress: '2, rue du Commerce',
ShipCity: 'Lyon',
ShipRegion: null,
isVerified:true,
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
OrderDate: '1996-07-09T00:00:00.000Z',
ShippedDate: '1996-07-11T00:00:00.000Z',
Freight: 51.3,
ShipName: 'Suprêmes délices',
ShipAddress: 'Boulevard Tirou, 255',
ShipCity: 'Charleroi',
isVerified:true,
ShipRegion: null,
ShipCountry: 'Belgium',
},
{
OrderID: 10253,
OrderDate: '1996-07-10T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 58.17,
ShipRegion: 'RJ',
isVerified:true,
},
{
OrderID: 10254,
CustomerID: 'CHOPS',
OrderDate: '1996-07-11T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 22.98,
ShipName: 'Chop-suey Chinese',
ShipAddress: 'Hauptstr. 31',
ShipCity: 'Bern',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Switzerland',
},

{
OrderID: 10255,
CustomerID: 'RICSU',
OrderDate: '1996-07-12T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 148.33,
ShipName: 'Richter Supermarkt',
ShipAddress: 'Starenweg 5',
ShipCity: 'Genève',
ShipRegion: null,
isVerified:true,
},
{
OrderID: 10256,
CustomerID: 'WELLI',
OrderDate: '1996-07-15T00:00:00.000Z',
ShippedDate: '1996-07-17T00:00:00.000Z',
Freight: 13.97,
ShipName: 'Wellington Importadora',
ShipAddress: 'Rua do Mercado, 12',
ShipCity: 'Resende',
ShipRegion: 'SP',
isVerified:true,
},
{
OrderID: 10257,
CustomerID: 'HILAA',
OrderDate: '1996-07-16T00:00:00.000Z',
ShippedDate: '1996-07-22T00:00:00.000Z',
Freight: 81.91,
isVerified:true,
ShipName: 'HILARION-Abastos',
ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipCity: 'San Cristóbal',
ShipRegion: 'Táchira',
ShipCountry: 'Venezuela',
},
{
OrderID: 10258,
CustomerID: 'ERNSH',
OrderDate: '1996-07-17T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 140.51,
ShipName: 'Ernst Handel',
ShipAddress: 'Kirchgasse 6',
ShipCity: 'Graz',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Austria',
},
{
OrderID: 10259,
CustomerID: 'CENTC',
OrderDate: '1996-07-18T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',

Freight: 3.25,
ShipName: 'Centro comercial Moctezuma',
ShipCity: 'México D.F.',
ShipRegion: null,
isVerified:true,
ShipCountry: 'Mexico',
},
{
OrderID: 10260,
CustomerID: 'OTTIK',
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-29T00:00:00.000Z',
Freight: 55.09,
ShipName: 'Ottilies Käseladen',
ShipAddress: 'Mehrheimerstr. 369',
ShipCity: 'Köln',
ShipRegion: null,
isVerified:false,
},
{
OrderID: 10261,
CustomerID: 'QUEDE',
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-30T00:00:00.000Z',
Freight: 3.05,
ShipName: 'Que Delícia',
ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ',
isVerified:true,
},
{
OrderID: 10262,
CustomerID: 'RATTC',
OrderDate: '1996-07-22T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 48.29,
isVerified:true,
ShipName: 'Rattlesnake Canyon Grocery',
ShipCity: 'Albuquerque',
ShipRegion: 'NM',
ShipCountry: 'USA',
},
];
DATASOURCE.TSX
{
OrderID: 10248,
OrderDate: '1996-07-04T00:00:00.000Z',

ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 32.38,
ShipCity: 'Reims',
ShipRegion: null,
isVerified:true,
},
{
OrderID: 10249,
OrderDate: '1996-07-05T00:00:00.000Z',
ShippedDate: '1996-07-10T00:00:00.000Z',
Freight: 11.61,
ShipRegion: null,
isVerified:false,
},
{
OrderID: 10250,
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-12T00:00:00.000Z',
Freight: 65.83,
ShipRegion: 'RJ',
isVerified:true,
},
{
OrderID: 10251,
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 41.34,
ShipCity: 'Lyon',
ShipRegion: null,
isVerified:true,
},
{
OrderID: 10252,
OrderDate: '1996-07-09T00:00:00.000Z',
ShippedDate: '1996-07-11T00:00:00.000Z',
Freight: 51.3,

isVerified:true,
ShipRegion: null,
},
{
OrderID: 10253,
OrderDate: '1996-07-10T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 58.17,
ShipRegion: 'RJ',
isVerified:true,
},
{
OrderID: 10254,
OrderDate: '1996-07-11T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 22.98,
ShipCity: 'Bern',
ShipRegion: null,
isVerified:false,
},
{
OrderID: 10255,
OrderDate: '1996-07-12T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 148.33,
ShipRegion: null,
isVerified:true,
},
{
OrderID: 10256,
OrderDate: '1996-07-15T00:00:00.000Z',
ShippedDate: '1996-07-17T00:00:00.000Z',
Freight: 13.97,
ShipRegion: 'SP',
isVerified:true,
},
{

OrderID: 10257,
OrderDate: '1996-07-16T00:00:00.000Z',
ShippedDate: '1996-07-22T00:00:00.000Z',
Freight: 81.91,
isVerified:true,
},
{
OrderID: 10258,
OrderDate: '1996-07-17T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 140.51,
ShipCity: 'Graz',
ShipRegion: null,
isVerified:false,
},
{
OrderID: 10259,
OrderDate: '1996-07-18T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 3.25,
ShipRegion: null,
isVerified:true,
},
{
OrderID: 10260,
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-29T00:00:00.000Z',
Freight: 55.09,
ShipCity: 'Köln',
ShipRegion: null,
isVerified:false,
},
{
OrderID: 10261,
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-30T00:00:00.000Z',
Freight: 3.05,


ShipRegion: 'RJ',
isVerified:true,
},
{
OrderID: 10262,
OrderDate: '1996-07-22T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 48.29,
isVerified:true,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
];
Multiple aggregates for a column

Multiple aggregates for a column allows you to calculate and display different summary values
simultaneously for a single column in a grid. Normally, a column is associated with a single aggregate
function, such as sum, average, count and etc., which provides a single summary value for the entire
column.
However, in scenarios where you need to display multiple summary values for the same column,
multiple aggregates come into play. This feature enables you to calculate and display various aggregate
values, such as sum, average, minimum, maximum, or custom calculations, concurrently for a specific
column.
You can use multiple aggregates for a single column in the Syncfusion React Grid by specifying the
aggregate type as an array.
Here's an example of how to use multiple aggregates in the Syncfusion React Grid:
APP.JSX
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
function App() {
const aggregate = [{
columns: [
{
type: ['Sum', 'Max', 'Min'],
field: 'Freight',
columnName: 'Freight',
format: 'C2',
footerTemplate: 'Sum: ${Sum}, Min:${Min}, Max:${Max}',
},
],

},]
aggregates={aggregate}>
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
<Inject services={[Page, Aggregate]} />
</GridComponent>)
}
export default App;
APP.TSX
import { AggregateRowModel, ColumnDirective, ColumnsDirective, GridComponent,
Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
function App() {
const aggregate: AggregateRowModel[] = [{
columns: [
{
type: ['Sum', 'Max', 'Min'],
field: 'Freight',
columnName: 'Freight',
format: 'C2',
footerTemplate: 'Sum: ${Sum}, Min:${Min}, Max:${Max}',
},
],
},]
aggregates={aggregate}>
<ColumnsDirective>
width='150' />
format='C2' />
width='150' />
</ColumnsDirective>
<Inject services={[Page, Aggregate]} />
</GridComponent>)
}
export default App;
DATASOURCE.JSX

export let data = [

{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},

{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{


Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),


'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),

Link to the VideoGrid Print in React Grid component

},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Print in React Grid component

The printing feature in Syncfusion Grid allows you to easily generate and print a representation of the
grid's content for better offline accessibility and documentation. You can enable this feature using either
the grid's toolbar or the programmatically available print method.
To add the printing option to the grid's toolbar, simply include the toolbar property in your grid
configuration and add the Print as toolbar item. This will allow you to directly initiate the printing
process while click on the Print item from the toolbar.
APP.JSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Toolbar }
function App() {
return (<GridComponent dataSource={data} toolbar={['Print']}
height={272}>
<ColumnsDirective>
width='120' textAlign='Right'/>
width='150'/>
width='150'/>
width='150'/>
</ColumnsDirective>
</GridComponent>);
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Toolbar}
function App() {
return (<GridComponent dataSource={data} toolbar={['Print']} height={272}>
<ColumnsDirective>
width='120' textAlign='Right'/>
width='150'/>
width='150'/>
width='150'/>
</ColumnsDirective>
</GridComponent >)
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',


},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',


},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},

{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{


Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Page setup
When printing a webpage, some print options, such as layout, paper size, and margin settings, cannot be
configured through JavaScript code. Instead, you need to customize these settings using the browser's
page setup dialog. Below are links to the page setup guides for popular web browsers:
• Chrome

• Firefox
• Safari
• IE
Print by external button

You can print the grid's content using an external button by utilizing the print method. This method
allows you to trigger the printing process programmatically.
APP.JSX
function App() {
let grid;
if (grid) {
grid.print();
}
};
return (<div>
<ButtonComponent onClick={clickHandler}>Print</ButtonComponent>
g}>
<ColumnsDirective>
width='150'/>
<ColumnDirective field='City' headerText='City' width='150'/>
<ColumnDirective field='Country' headerText='Country' width='150'/>
</ColumnsDirective>
}
;
export default App;
APP.TSX
function App() {
if (grid) {
grid.print();
}
}
return (<div>
<ButtonComponent onClick= { clickHandler }>Print</ButtonComponent>


g}>
<ColumnsDirective>
width='150'/>
<ColumnDirective field='City' headerText='City' width='150'/>
<ColumnDirective field='Country' headerText='Country' width='150'/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },


'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
(1984). \
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,

},
{
'EmployeeID': 5,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',

'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',

'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
DATASOURCE.TSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },


'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
\
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 5,


'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',


'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,

}];
Print visible Page

By default, the Syncfusion React Grid prints all the pages of the grid. The printMode property within the
grid grants you control over the printing process. However, if you want to print only the current visible
page, you can achieve this by setting the printMode property to CurrentPage.
APP.JSX
import { Inject, Page, Toolbar } from '@syncfusion/ej2-react-grids';
function App() {
const [printMode, setPrintMode] = useState();
const dropdownlist = ['AllPages', 'CurrentPage'];
setPrintMode(args.value);
}
return ((<div>
<label style={{ padding: "10px 10px 26px 0" }}><b>Select Print Mode
</b></label>
<DropDownListComponent index={0} width={200} dataSource={dropdownlist}
<GridComponent dataSource={data} printMode={printMode}
toolbar={['Print']} allowPaging={true} pageSettings={pageOptions}>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
<Inject services={[Toolbar, Page]} />
</GridComponent ></div>))
};
export default App;
APP.TSX
react-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, PageSettingsModel,
PrintMode } from '@syncfusion/ej2-react-grids';
function App() {


const [printMode, setPrintMode] = useState<PrintMode>();
const dropdownlist: string[] = ['AllPages', 'CurrentPage'];
setPrintMode(args.value);
}
return ((<div>
<label style={{ padding: "10px 10px 26px 0" }}><b>Select Print Mode
</b></label>
<DropDownListComponent index={0} width={200} dataSource={dropdownlist}
<GridComponent dataSource={data} printMode={printMode}
toolbar={['Print']} allowPaging={true} pageSettings={pageOptions}>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{


Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{


Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),


'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),


},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];

Print only selected records

By default, the Syncfusion React Grid prints all the data bound to its dataSource. However, there might
be cases where you want to print only the selected records from the grid. The React Grid provides an
option to achieve this by binding to the beforePrint event, where you can replace the rows of the
printing grid with the selected rows.
Below is an example code that demonstrates how to print only the selected records from the React Grid:
APP.JSX
SelectionSettingsModel, PrintEventArgs } from '@syncfusion/ej2-react-grids';
function App() {
let grid;
const selectionSettings = { type: 'Multiple' };
const beforePrint = (e) => {
var rows = grid.getSelectedRows();
if (rows.length) {
e.element.ej2_instances[0].getContent().querySelector('tbody').remove();
var tbody = createElement('tbody');
rows = [...rows];
for (var r = 0; r < rows.length; r++) {
tbody.appendChild(rows[r].cloneNode(true));
}
e.elemen.ej2_instances[0].getContentTable().appendChild(tbody);
}
}
return ((<div>
toolbar={['Print']} allowPaging={true} pageSettings={pageOptions}
selectionSettings={selectionSettings} beforePrint={beforePrint}>
<ColumnsDirective>
width='150' />
width='150' />
width='150' />
</ColumnsDirective>
};
export default App;
APP.TSX
SelectionSettingsModel, PrintEventArgs } from '@syncfusion/ej2-react-grids';


interface CustomElement extends Element {
ej2_instances: any[];
}
function App() {
const selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
const beforePrint = (e: PrintEventArgs) => {
var rows = (grid as GridComponent).getSelectedRows();
if (rows.length) {
(e.element as
CustomElement).ej2_instances[0].getContent().querySelector('tbody').remove();
var tbody = createElement('tbody');
rows = [...rows];
for (var r = 0; r < rows.length; r++) {
tbody.appendChild(rows[r].cloneNode(true));
}
(e.element as
CustomElement).ej2_instances[0].getContentTable().appendChild(tbody);
}
}
return ((<div>
<GridComponent ref={g => grid = g} dataSource={data} toolbar={['Print']}
allowPaging={true} pageSettings={pageOptions}
selectionSettings={selectionSettings} beforePrint={beforePrint}>
<ColumnsDirective>
width='150' />
/>
/>
</ColumnsDirective>
};
export default App;
DATASOURCE.JSX
export let data = [
{
Date(8364186e5),
},
{


Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{


Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];

DATASOURCE.TSX
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),


'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),
},
{
Date(8377146e5),


},
{
Date(8379738e5),
}];
Print the hierarchy grid

The Syncfusion React Grid allows you to print hierarchy grids, which consist of a parent grid and its child
grids. By default, when you print a hierarchy grid, it includes the parent grid and expanded child grids
only. However, you can customize the print behavior using the hierarchyPrintMode property.
The hierarchyPrintMode property in the React Grid lets you control the printing behavior for hierarchy
grids. You can choose from three options:
| Mode | Behavior |
| -------- | ------------------------------------------------------------------------------- |
| Expanded | Prints the parent grid with expanded child grids. |
| All | Prints the parent grid with all the child grids, whether expanded or collapsed. |
| None | Prints the parent grid alone. |
APP.JSX
react-dropdowns';
HierarchyGridPrintMode } from '@syncfusion/ej2-react-grids';
import { DetailRow, GridModel, Inject, Toolbar, ToolbarItems } from
function App() {
const dropdownData = ['All', 'Expanded', 'None'];
const [hierarchyPrintMode, setHierarchyPrintMode] = useState('All');
const onModeChange = (args) => {
setHierarchyPrintMode(args.value);
}
const childGridOptions = {
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width:
120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
dataSource: data,

queryString: 'EmployeeID'
};
const toolbaroptions = ['Print'];
return (<div>
<label style={{ padding: "10px 10px 26px 0" }}><b>Select Mode
</b></label>
change={onModeChange}></DropDownListComponent>
<GridComponent toolbar={toolbaroptions}
hierarchyPrintMode={hierarchyPrintMode} dataSource={employeeData}
childGrid={childGridOptions}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='Country' headerText='Country' width='150' />
</ColumnsDirective>
<Inject services={[DetailRow, Toolbar]} />
};
export default App;
APP.TSX
react-dropdowns';
HierarchyGridPrintMode } from '@syncfusion/ej2-react-grids';
import { DetailRow, GridModel, Inject, Toolbar, ToolbarItems } from
function App() {
const dropdownData: string[] = ['All', 'Expanded', 'None'];
const [hierarchyPrintMode, setHierarchyPrintMode] =
useState<HierarchyGridPrintMode>('All');
const onModeChange = (args: ChangeEventArgs) => {
setHierarchyPrintMode(args.value);
}
const childGridOptions: GridModel = {
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width:
120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
dataSource: data,
queryString: 'EmployeeID'
};
const toolbaroptions: ToolbarItems[] = ['Print'];
return (<div>
<label style={{ padding: "10px 10px 26px 0" }}><b>Select Mode
</b></label>


change={onModeChange}></DropDownListComponent>
<GridComponent toolbar={toolbaroptions}
hierarchyPrintMode={hierarchyPrintMode} dataSource={employeeData}
childGrid={childGridOptions}>
<ColumnsDirective>
width='150' />
<ColumnDirective field='Country' headerText='Country' width='150' />
</ColumnsDirective>
<Inject services={[DetailRow, Toolbar]} />
};
export default App;
DATASOURCE.JSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',
'Region': 'WA',
'Country': 'USA',

'HomePhone': '(206) 555-9482',

'Photo': { 'Length': 21626 },
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
(1984). \
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Photo': { 'Length': 21626 },

'ReportsTo': 2,
},
{
'EmployeeID': 5,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
Spanish.',
'ReportsTo': 5,
},

{
'EmployeeID': 7,
'LastName': 'King',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,
'City': 'London',
'Region': null,


'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
export let data = [
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{
Date(836937e6),
'Rua do Paço, 67',


},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{
Date(8377146e5),


},
{
Date(8377146e5),
},
{
Date(8379738e5),
}
];
DATASOURCE.TSX
'EmployeeID': 1,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Photo': { 'Length': 21626 },
International.',
'ReportsTo': 2,
},
{
'EmployeeID': 2,
'City': 'Tacoma',

'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Photo': { 'Length': 21626 },
'ReportsTo': 0,
},
{
'EmployeeID': 3,
'City': 'Kirkland',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Photo': { 'Length': 21722 },
\
management.\
'ReportsTo': 2,
},
{
'EmployeeID': 4,
'City': 'Redmond',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-8122',

'Photo': { 'Length': 21626 },

'ReportsTo': 2,
},
{
'EmployeeID': 5,
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Photo': { 'Length': 21626 },
French.',
'ReportsTo': 2,
},
{
'EmployeeID': 6,
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },

Spanish.',
'ReportsTo': 5,
},
{
'EmployeeID': 7,
'LastName': 'King',
'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
},
{
'EmployeeID': 8,
'City': 'Seattle',
'Region': 'WA',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Photo': { 'Length': 21626 },
'ReportsTo': 2,
},
{
'EmployeeID': 9,


'City': 'London',
'Region': null,
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'ReportsTo': 5,
}];
{
Date(8364186e5),
},
{
Date(836505e6),
'Luisenstr. 48',
},
{
Date(8367642e5),
'Rua do Paço, 67',
},
{
Date(8367642e5),
rue du Commerce',
},
{
Date(8368506e5),
},
{


Date(836937e6),
'Rua do Paço, 67',
},
{
Date(8370234e5),
'Hauptstr. 31',
},
{
Date(8371098e5),
'Starenweg 5',
},
{
Date(837369e6),
},
{
Date(8374554e5),
},
{
Date(8375418e5),
6',
},
{
Date(8376282e5),
},
{


Date(8377146e5),
},
{
Date(8377146e5),
},
{
Date(8379738e5),
}];
Print the master detail grid

The Syncfusion React Grid provides the option to visualize details of a record in another grid in a master-
detail manner. By default, when you print a master-detail grid, only the master grid is included in the
print output. However, you can customize the print behavior to include both the master and detail grids
using the beforePrint event of the grid.
The beforePrint event in the React Grid is triggered before the actual printing process begins. You can
handle this event to customize the print output. By adding the detail grid to the element argument of
the beforePrint event, you can ensure that both the master and detail grids are printed on the page.
APP.JSX
import { GridComponent, ColumnsDirective, ColumnDirective,
RowSelectEventArgs, Selection, Inject, Toolbar, PrintEventArgs, Print } from
import { customerData, data } from './datasource';
function MasterDetail() {
let detailGrid;
const names = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH'];
const master = customerData.filter((e) => names.indexOf(e.CustomerID) !==
-1);;
const rowselect = (args) => {
let selRecord = args.data;
let selecteMessage = document.getElementsByClassName('e-
statustext')[0];
let message = selecteMessage.querySelector('b')
message.textContent = selRecord.ContactName;
detailGrid.dataSource = data.filter((record) => record.CustomerName
=== selRecord.ContactName).slice(0, 5);
}

const beforePrint = (args) => {

let customElement = document.createElement('div');
customElement.innerHTML = document.getElementsByClassName('e-
statustext')[0].innerHTML + (detailGrid).element.innerHTML;
customElement.appendChild(document.createElement('br'));
args.element.append(customElement);
}
return (
<GridComponent dataSource={master} selectedRowIndex={2}
rowSelected={rowselect} toolbar={['Print']} beforePrint={beforePrint}>
<ColumnsDirective>
<ColumnDirective field='ContactName'
headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='CompanyName'
headerText='Company Name' width='150'></ColumnDirective>
<ColumnDirective field='Address' headerText='Address'
width='150' />
width='130' />
</ColumnsDirective>
<Inject services={[Selection, Toolbar, Print]} />
</GridComponent>
<div className='e-statustext'> Showing orders of Customer:
<b></b></div>
<GridComponent allowSelection={false} ref={grid => detailGrid
= grid}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order
ID' width='100' ></ColumnDirective>
width='100' format='C2' type='number' />
<ColumnDirective field='ShipName' headerText='Ship
Name' width='150'></ColumnDirective>
Country' width='150'></ColumnDirective>
<ColumnDirective field='ShipAddress' headerText='Ship
Address' width='150'></ColumnDirective>
</ColumnsDirective>
</GridComponent>
</div>
</div>
)
}
export default MasterDetail;
APP.TSX
import { GridComponent, ColumnsDirective, ColumnDirective,
RowSelectEventArgs, Selection, Inject, Toolbar, PrintEventArgs, Print } from
import { customerData, data } from './datasource';
function MasterDetail() {
let detailGrid: GridComponent | null;

const names: string[] = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH'];

const master: Object = customerData.filter((e:any) =>
names.indexOf(e.CustomerID) !== -1);;
const rowselect = (args: RowSelectEventArgs) => {
let selRecord = args.data;
let selecteMessage:any = document.getElementsByClassName('e-
statustext')[0];
let message: HTMLElement = selecteMessage.querySelector('b')
message.textContent = selRecord.ContactName;
(detailGrid as GridComponent).dataSource = data.filter((record: any)
=> record.CustomerName === selRecord.ContactName).slice(0, 5);
}
const beforePrint = (args: PrintEventArgs) => {
let customElement = document.createElement('div');
customElement.innerHTML = document.getElementsByClassName('e-
statustext')[0].innerHTML + (detailGrid).element.innerHTML;
customElement.appendChild(document.createElement('br'));
args.element.append(customElement);
}
return (
<GridComponent dataSource={master} selectedRowIndex={2}
rowSelected={rowselect} toolbar={['Print']} beforePrint={beforePrint}>
<ColumnsDirective>
<ColumnDirective field='ContactName'
headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='CompanyName'
headerText='Company Name' width='150'></ColumnDirective>
<ColumnDirective field='Address' headerText='Address'
width='150' />
width='130' />
</ColumnsDirective>
<Inject services={[Selection, Toolbar, Print]} />
</GridComponent>
<div className='e-statustext'> Showing orders of Customer:
<b></b></div>
<GridComponent allowSelection={false} ref={grid => detailGrid
= grid}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order
ID' width='100' ></ColumnDirective>
width='100' format='C2' type='number' />
<ColumnDirective field='ShipName' headerText='Ship
Name' width='150'></ColumnDirective>
Country' width='150'></ColumnDirective>
<ColumnDirective field='ShipAddress' headerText='Ship
Address' width='150'></ColumnDirective>
</ColumnsDirective>
</GridComponent>
</div>
</div>
)
}

export default MasterDetail;
DATASOURCE.JSX
let stringData = JSON.stringify([
{
OrderID: 10248,
OrderDate: '1996-07-04T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 32.38,
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10249,
OrderDate: '1996-07-05T00:00:00.000Z',
ShippedDate: '1996-07-10T00:00:00.000Z',
Freight: 11.61,
ShipRegion: null,
},
{
OrderID: 10250,
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-12T00:00:00.000Z',
Freight: 65.83,
ShipRegion: 'RJ',
},
{
OrderID: 10251,
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 41.34,
ShipCity: 'Lyon',
ShipRegion: null,
},

{
OrderID: 10252,
OrderDate: '1996-07-09T00:00:00.000Z',
ShippedDate: '1996-07-11T00:00:00.000Z',
Freight: 51.3,
ShipRegion: null,
},
{
OrderID: 10253,
OrderDate: '1996-07-10T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 58.17,
ShipRegion: 'RJ',
},
{
OrderID: 10254,
OrderDate: '1996-07-11T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 22.98,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10255,
OrderDate: '1996-07-12T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 148.33,
ShipRegion: null,
},
{
OrderID: 10256,
OrderDate: '1996-07-15T00:00:00.000Z',

ShippedDate: '1996-07-17T00:00:00.000Z',
Freight: 13.97,
ShipRegion: 'SP',
},
{
OrderID: 10257,
OrderDate: '1996-07-16T00:00:00.000Z',
ShippedDate: '1996-07-22T00:00:00.000Z',
Freight: 81.91,
},
{
OrderID: 10258,
OrderDate: '1996-07-17T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 140.51,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10259,
OrderDate: '1996-07-18T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 3.25,
ShipRegion: null,
},
{
OrderID: 10260,
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-29T00:00:00.000Z',
Freight: 55.09,
ShipCity: 'Köln',

ShipRegion: null,
},
{
OrderID: 10261,
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-30T00:00:00.000Z',
Freight: 3.05,
ShipRegion: 'RJ',
},
{
OrderID: 10262,
OrderDate: '1996-07-22T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 48.29,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10263,
OrderDate: '1996-07-23T00:00:00.000Z',
ShippedDate: '1996-07-31T00:00:00.000Z',
Freight: 146.06,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10264,
CustomerID: 'FOLKO',
OrderDate: '1996-07-24T00:00:00.000Z',
ShippedDate: '1996-08-23T00:00:00.000Z',
Freight: 3.67,
ShipName: 'Folk och fä HB',
ShipAddress: 'Åkergatan 24',
ShipCity: 'Bräcke',
ShipRegion: null,
ShipCountry: 'Sweden',
},

OrderID: 10265,
CustomerID: 'BLONP',
OrderDate: '1996-07-25T00:00:00.000Z',
ShippedDate: '1996-08-12T00:00:00.000Z',
Freight: 55.28,
ShipName: 'Blondel père et fils',
ShipAddress: '24, place Kléber',
ShipCity: 'Strasbourg',
ShipRegion: null,
},
{
OrderID: 10266,
CustomerID: 'WARTH',
OrderDate: '1996-07-26T00:00:00.000Z',
ShippedDate: '1996-07-31T00:00:00.000Z',
Freight: 25.73,
ShipName: 'Wartian Herkku',
ShipAddress: 'Torikatu 38',
ShipCity: 'Oulu',
ShipRegion: null,
ShipCountry: 'Finland',
},
{
OrderID: 10267,
CustomerID: 'FRANK',
OrderDate: '1996-07-29T00:00:00.000Z',
ShippedDate: '1996-08-06T00:00:00.000Z',
Freight: 208.58,
ShipName: 'Frankenversand',
ShipAddress: 'Berliner Platz 43',
ShipCity: 'München',
ShipRegion: null,
},
{
OrderID: 10268,
CustomerID: 'GROSR',
OrderDate: '1996-07-30T00:00:00.000Z',
ShippedDate: '1996-08-02T00:00:00.000Z',
Freight: 66.29,
ShipName: 'GROSELLA-Restaurante',
ShipAddress: '5ª Ave. Los Palos Grandes',
ShipCity: 'Caracas',
ShipRegion: 'DF',
},
{
OrderID: 10269,
CustomerID: 'WHITC',
OrderDate: '1996-07-31T00:00:00.000Z',
ShippedDate: '1996-08-09T00:00:00.000Z',
Freight: 4.56,

ShipName: 'White Clover Markets',

ShipAddress: '1029 - 12th Ave. S.',
ShipCity: 'Seattle',
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10270,
OrderDate: '1996-08-01T00:00:00.000Z',
ShippedDate: '1996-08-02T00:00:00.000Z',
Freight: 136.54,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10271,
CustomerID: 'SPLIR',
OrderDate: '1996-08-01T00:00:00.000Z',
ShippedDate: '1996-08-30T00:00:00.000Z',
Freight: 4.54,
ShipName: 'Split Rail Beer & Ale',
ShipAddress: 'P.O. Box 555',
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10272,
OrderDate: '1996-08-02T00:00:00.000Z',
ShippedDate: '1996-08-06T00:00:00.000Z',
Freight: 98.03,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10273,
CustomerID: 'QUICK',
OrderDate: '1996-08-05T00:00:00.000Z',
ShippedDate: '1996-08-12T00:00:00.000Z',
Freight: 76.07,
ShipName: 'QUICK-Stop',
ShipAddress: 'Taucherstraße 10',
ShipCity: 'Cunewalde',
ShipRegion: null,

},
{
OrderID: 10274,
OrderDate: '1996-08-06T00:00:00.000Z',
ShippedDate: '1996-08-16T00:00:00.000Z',
Freight: 6.01,
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10275,
CustomerID: 'MAGAA',
OrderDate: '1996-08-07T00:00:00.000Z',
ShippedDate: '1996-08-09T00:00:00.000Z',
Freight: 26.93,
ShipName: 'Magazzini Alimentari Riuniti',
ShipAddress: 'Via Ludovico il Moro 22',
ShipCity: 'Bergamo',
ShipRegion: null,
ShipCountry: 'Italy',
},
{
OrderID: 10276,
CustomerID: 'TORTU',
OrderDate: '1996-08-08T00:00:00.000Z',
ShippedDate: '1996-08-14T00:00:00.000Z',
Freight: 13.84,
ShipName: 'Tortuga Restaurante',
ShipAddress: 'Avda. Azteca 123',
ShipRegion: null,
},
{
OrderID: 10277,
CustomerID: 'MORGK',
OrderDate: '1996-08-09T00:00:00.000Z',
ShippedDate: '1996-08-13T00:00:00.000Z',
Freight: 125.77,
ShipName: 'Morgenstern Gesundkost',
ShipAddress: 'Heerstr. 22',
ShipCity: 'Leipzig',
ShipRegion: null,
},
{
OrderID: 10278,
CustomerID: 'BERGS',

OrderDate: '1996-08-12T00:00:00.000Z',
ShippedDate: '1996-08-16T00:00:00.000Z',
Freight: 92.69,
ShipName: 'Berglunds snabbköp',
ShipAddress: 'Berguvsvägen 8',
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10279,
CustomerID: 'LEHMS',
OrderDate: '1996-08-13T00:00:00.000Z',
ShippedDate: '1996-08-16T00:00:00.000Z',
Freight: 25.83,
ShipName: 'Lehmanns Marktstand',
ShipAddress: 'Magazinweg 7',
ShipCity: 'Frankfurt a.M.',
ShipRegion: null,
},
{
OrderID: 10280,
OrderDate: '1996-08-14T00:00:00.000Z',
ShippedDate: '1996-09-12T00:00:00.000Z',
Freight: 8.98,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10281,
CustomerID: 'ROMEY',
OrderDate: '1996-08-14T00:00:00.000Z',
ShippedDate: '1996-08-21T00:00:00.000Z',
Freight: 2.94,
ShipName: 'Romero y tomillo',
ShipAddress: 'Gran Vía, 1',
ShipCity: 'Madrid',
ShipRegion: null,
ShipCountry: 'Spain',
},
{
OrderID: 10282,
OrderDate: '1996-08-15T00:00:00.000Z',
ShippedDate: '1996-08-21T00:00:00.000Z',
Freight: 12.69,

ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10283,
CustomerID: 'LILAS',
OrderDate: '1996-08-16T00:00:00.000Z',
ShippedDate: '1996-08-23T00:00:00.000Z',
Freight: 84.81,
ShipName: 'LILA-Supermercado',
ShipAddress: 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
ShipCity: 'Barquisimeto',
ShipRegion: 'Lara',
},
{
OrderID: 10284,
OrderDate: '1996-08-19T00:00:00.000Z',
ShippedDate: '1996-08-27T00:00:00.000Z',
Freight: 76.56,
ShipRegion: null,
},
{
OrderID: 10285,
OrderDate: '1996-08-20T00:00:00.000Z',
ShippedDate: '1996-08-26T00:00:00.000Z',
Freight: 76.83,
ShipRegion: null,
},
{
OrderID: 10286,
OrderDate: '1996-08-21T00:00:00.000Z',
ShippedDate: '1996-08-30T00:00:00.000Z',
Freight: 229.24,
ShipRegion: null,
},

{
OrderID: 10287,
CustomerID: 'RICAR',
OrderDate: '1996-08-22T00:00:00.000Z',
ShippedDate: '1996-08-28T00:00:00.000Z',
Freight: 12.76,
ShipName: 'Ricardo Adocicados',
ShipAddress: 'Av. Copacabana, 267',
ShipRegion: 'RJ',
},
{
OrderID: 10288,
CustomerID: 'REGGC',
OrderDate: '1996-08-23T00:00:00.000Z',
ShippedDate: '1996-09-03T00:00:00.000Z',
Freight: 7.45,
ShipName: 'Reggiani Caseifici',
ShipAddress: 'Strada Provinciale 124',
ShipCity: 'Reggio Emilia',
ShipRegion: null,
},
{
OrderID: 10289,
CustomerID: 'BSBEV',
OrderDate: '1996-08-26T00:00:00.000Z',
ShippedDate: '1996-08-28T00:00:00.000Z',
Freight: 22.77,
ShipName: "B' Beverages",
ShipAddress: 'Fauntleroy Circus',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10290,
CustomerID: 'COMMI',
OrderDate: '1996-08-27T00:00:00.000Z',
ShippedDate: '1996-09-03T00:00:00.000Z',
Freight: 79.7,
ShipName: 'Comércio Mineiro',
ShipAddress: 'Av. dos Lusíadas, 23',
ShipCity: 'Sao Paulo',
ShipRegion: 'SP',
},
{
OrderID: 10291,
OrderDate: '1996-08-27T00:00:00.000Z',
ShippedDate: '1996-09-04T00:00:00.000Z',

Freight: 6.4,
ShipRegion: 'RJ',
},
{
OrderID: 10292,
CustomerID: 'TRADH',
OrderDate: '1996-08-28T00:00:00.000Z',
ShippedDate: '1996-09-02T00:00:00.000Z',
Freight: 1.35,
ShipName: 'Tradiçao Hipermercados',
ShipAddress: 'Av. Inês de Castro, 414',
ShipRegion: 'SP',
},
{
OrderID: 10293,
OrderDate: '1996-08-29T00:00:00.000Z',
ShippedDate: '1996-09-11T00:00:00.000Z',
Freight: 21.18,
ShipRegion: null,
},
{
OrderID: 10294,
OrderDate: '1996-08-30T00:00:00.000Z',
ShippedDate: '1996-09-05T00:00:00.000Z',
Freight: 147.26,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10295,
OrderDate: '1996-09-02T00:00:00.000Z',
ShippedDate: '1996-09-10T00:00:00.000Z',
Freight: 1.15,
ShipCity: 'Reims',
ShipRegion: null,

},
{
OrderID: 10296,
OrderDate: '1996-09-03T00:00:00.000Z',
ShippedDate: '1996-09-11T00:00:00.000Z',
Freight: 0.12,
ShipRegion: 'Lara',
},
{
OrderID: 10297,
OrderDate: '1996-09-04T00:00:00.000Z',
ShippedDate: '1996-09-10T00:00:00.000Z',
Freight: 5.74,
ShipRegion: null,
},
{
OrderID: 10298,
CustomerID: 'HUNGO',
OrderDate: '1996-09-05T00:00:00.000Z',
ShippedDate: '1996-09-11T00:00:00.000Z',
Freight: 168.22,
ShipName: 'Hungry Owl All-Night Grocers',
ShipAddress: '8 Johnstown Road',
ShipCity: 'Cork',
ShipRegion: 'Co. Cork',
ShipCountry: 'Ireland',
},
{
OrderID: 10299,
OrderDate: '1996-09-06T00:00:00.000Z',
ShippedDate: '1996-09-13T00:00:00.000Z',
Freight: 29.76,
ShipRegion: 'RJ',
},
{
OrderID: 10300,

OrderDate: '1996-09-09T00:00:00.000Z',
ShippedDate: '1996-09-18T00:00:00.000Z',
Freight: 17.68,
ShipRegion: null,
},
{
OrderID: 10301,
CustomerID: 'WANDK',
OrderDate: '1996-09-09T00:00:00.000Z',
ShippedDate: '1996-09-17T00:00:00.000Z',
Freight: 45.08,
ShipName: 'Die Wandernde Kuh',
ShipAddress: 'Adenauerallee 900',
ShipCity: 'Stuttgart',
ShipRegion: null,
},
{
OrderID: 10302,
OrderDate: '1996-09-10T00:00:00.000Z',
ShippedDate: '1996-10-09T00:00:00.000Z',
Freight: 6.27,
ShipRegion: null,
},
{
OrderID: 10303,
CustomerID: 'GODOS',
OrderDate: '1996-09-11T00:00:00.000Z',
ShippedDate: '1996-09-18T00:00:00.000Z',
Freight: 107.83,
ShipName: 'Godos Cocina Típica',
ShipAddress: 'C/ Romero, 33',
ShipCity: 'Sevilla',
ShipRegion: null,
},
{
OrderID: 10304,
OrderDate: '1996-09-12T00:00:00.000Z',
ShippedDate: '1996-09-17T00:00:00.000Z',
Freight: 63.79,


ShipRegion: null,
},
{
OrderID: 10305,
CustomerID: 'OLDWO',
OrderDate: '1996-09-13T00:00:00.000Z',
ShippedDate: '1996-10-09T00:00:00.000Z',
Freight: 257.62,
ShipName: 'Old World Delicatessen',
ShipAddress: '2743 Bering St.',
ShipCity: 'Anchorage',
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10306,
OrderDate: '1996-09-16T00:00:00.000Z',
ShippedDate: '1996-09-23T00:00:00.000Z',
Freight: 7.56,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10307,
CustomerID: 'LONEP',
OrderDate: '1996-09-17T00:00:00.000Z',
ShippedDate: '1996-09-25T00:00:00.000Z',
Freight: 0.56,
ShipName: 'Lonesome Pine Restaurant',
ShipAddress: '89 Chiaroscuro Rd.',
ShipCity: 'Portland',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10308,
CustomerID: 'ANATR',
OrderDate: '1996-09-18T00:00:00.000Z',
ShippedDate: '1996-09-24T00:00:00.000Z',
Freight: 1.61,
ShipName: 'Ana Trujillo Emparedados y helados',
ShipAddress: 'Avda. de la Constitución 2222',
ShipRegion: null,
},

{
OrderID: 10309,
OrderDate: '1996-09-19T00:00:00.000Z',
ShippedDate: '1996-10-23T00:00:00.000Z',
Freight: 47.3,
ShipCity: 'Cork',
},
{
OrderID: 10310,
CustomerID: 'THEBI',
OrderDate: '1996-09-20T00:00:00.000Z',
ShippedDate: '1996-09-27T00:00:00.000Z',
Freight: 17.52,
ShipName: 'The Big Cheese',
ShipAddress: '89 Jefferson Way Suite 2',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10311,
CustomerID: 'DUMON',
OrderDate: '1996-09-20T00:00:00.000Z',
ShippedDate: '1996-09-26T00:00:00.000Z',
Freight: 24.69,
ShipName: 'Du monde entier',
ShipAddress: '67, rue des Cinquante Otages',
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10312,
OrderDate: '1996-09-23T00:00:00.000Z',
ShippedDate: '1996-10-03T00:00:00.000Z',
Freight: 40.26,
ShipRegion: null,
},
{
OrderID: 10313,
OrderDate: '1996-09-24T00:00:00.000Z',

ShippedDate: '1996-10-04T00:00:00.000Z',
Freight: 1.96,
ShipRegion: null,
},
{
OrderID: 10314,
OrderDate: '1996-09-25T00:00:00.000Z',
ShippedDate: '1996-10-04T00:00:00.000Z',
Freight: 74.16,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10315,
CustomerID: 'ISLAT',
OrderDate: '1996-09-26T00:00:00.000Z',
ShippedDate: '1996-10-03T00:00:00.000Z',
Freight: 41.76,
ShipName: 'Island Trading',
ShipAddress: 'Garden House Crowther Way',
ShipCity: 'Cowes',
ShipRegion: 'Isle of Wight',
ShipCountry: 'UK',
},
{
OrderID: 10316,
OrderDate: '1996-09-27T00:00:00.000Z',
ShippedDate: '1996-10-08T00:00:00.000Z',
Freight: 150.15,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10317,
OrderDate: '1996-09-30T00:00:00.000Z',
ShippedDate: '1996-10-10T00:00:00.000Z',
Freight: 12.69,

ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10318,
OrderDate: '1996-10-01T00:00:00.000Z',
ShippedDate: '1996-10-04T00:00:00.000Z',
Freight: 4.73,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10319,
OrderDate: '1996-10-02T00:00:00.000Z',
ShippedDate: '1996-10-11T00:00:00.000Z',
Freight: 64.5,
ShipRegion: null,
},
{
OrderID: 10320,
OrderDate: '1996-10-03T00:00:00.000Z',
ShippedDate: '1996-10-18T00:00:00.000Z',
Freight: 34.57,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10321,
OrderDate: '1996-10-03T00:00:00.000Z',
ShippedDate: '1996-10-11T00:00:00.000Z',
Freight: 3.43,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},

OrderID: 10322,
CustomerID: 'PERIC',
OrderDate: '1996-10-04T00:00:00.000Z',
ShippedDate: '1996-10-23T00:00:00.000Z',
Freight: 0.4,
ShipName: 'Pericles Comidas clásicas',
ShipAddress: 'Calle Dr. Jorge Cash 321',
ShipRegion: null,
},
{
OrderID: 10323,
CustomerID: 'KOENE',
OrderDate: '1996-10-07T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 4.88,
ShipName: 'Königlich Essen',
ShipAddress: 'Maubelstr. 90',
ShipCity: 'Brandenburg',
ShipRegion: null,
},
{
OrderID: 10324,
CustomerID: 'SAVEA',
OrderDate: '1996-10-08T00:00:00.000Z',
ShippedDate: '1996-10-10T00:00:00.000Z',
Freight: 214.27,
ShipName: 'Save-a-lot Markets',
ShipAddress: '187 Suffolk Ln.',
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10325,
OrderDate: '1996-10-09T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 64.86,
ShipRegion: null,
},
{
OrderID: 10326,
CustomerID: 'BOLID',
OrderDate: '1996-10-10T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 77.92,

ShipName: 'Bólido Comidas preparadas',

ShipAddress: 'C/ Araquil, 67',
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10327,
OrderDate: '1996-10-11T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 63.36,
ShipRegion: null,
},
{
OrderID: 10328,
CustomerID: 'FURIB',
OrderDate: '1996-10-14T00:00:00.000Z',
ShippedDate: '1996-10-17T00:00:00.000Z',
Freight: 87.03,
ShipName: 'Furia Bacalhau e Frutos do Mar',
ShipAddress: 'Jardim das rosas n. 32',
ShipCity: 'Lisboa',
ShipRegion: null,
ShipCountry: 'Portugal',
},
{
OrderID: 10329,
OrderDate: '1996-10-15T00:00:00.000Z',
ShippedDate: '1996-10-23T00:00:00.000Z',
Freight: 191.67,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10330,
OrderDate: '1996-10-16T00:00:00.000Z',
ShippedDate: '1996-10-28T00:00:00.000Z',
Freight: 12.75,
ShipRegion: 'Lara',

},
{
OrderID: 10331,
CustomerID: 'BONAP',
OrderDate: '1996-10-16T00:00:00.000Z',
ShippedDate: '1996-10-21T00:00:00.000Z',
Freight: 10.19,
ShipName: 'Bon app',
ShipAddress: '12, rue des Bouchers',
ShipCity: 'Marseille',
ShipRegion: null,
},
{
OrderID: 10332,
CustomerID: 'MEREP',
OrderDate: '1996-10-17T00:00:00.000Z',
ShippedDate: '1996-10-21T00:00:00.000Z',
Freight: 52.84,
ShipName: 'Mère Paillarde',
ShipAddress: '43 rue St. Laurent',
ShipCity: 'Montréal',
ShipRegion: 'Québec',
ShipCountry: 'Canada',
},
{
OrderID: 10333,
OrderDate: '1996-10-18T00:00:00.000Z',
ShippedDate: '1996-10-25T00:00:00.000Z',
Freight: 0.59,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10334,
OrderDate: '1996-10-21T00:00:00.000Z',
ShippedDate: '1996-10-28T00:00:00.000Z',
Freight: 8.56,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10335,

OrderDate: '1996-10-22T00:00:00.000Z',
ShippedDate: '1996-10-24T00:00:00.000Z',
Freight: 42.11,
ShipCity: 'Cork',
},
{
OrderID: 10336,
CustomerID: 'PRINI',
OrderDate: '1996-10-23T00:00:00.000Z',
ShippedDate: '1996-10-25T00:00:00.000Z',
Freight: 15.51,
ShipName: 'Princesa Isabel Vinhos',
ShipAddress: 'Estrada da saúde n. 58',
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10337,
OrderDate: '1996-10-24T00:00:00.000Z',
ShippedDate: '1996-10-29T00:00:00.000Z',
Freight: 108.26,
ShipRegion: null,
},
{
OrderID: 10338,
OrderDate: '1996-10-25T00:00:00.000Z',
ShippedDate: '1996-10-29T00:00:00.000Z',
Freight: 84.21,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10339,
OrderDate: '1996-10-28T00:00:00.000Z',
ShippedDate: '1996-11-04T00:00:00.000Z',
Freight: 15.66,

},
{
OrderID: 10340,
OrderDate: '1996-10-29T00:00:00.000Z',
ShippedDate: '1996-11-08T00:00:00.000Z',
Freight: 166.31,
ShipRegion: null,
},
{
OrderID: 10341,
CustomerID: 'SIMOB',
OrderDate: '1996-10-29T00:00:00.000Z',
ShippedDate: '1996-11-05T00:00:00.000Z',
Freight: 26.78,
ShipName: 'Simons bistro',
ShipAddress: 'Vinbæltet 34',
ShipCity: 'Kobenhavn',
ShipRegion: null,
ShipCountry: 'Denmark',
},
{
OrderID: 10342,
OrderDate: '1996-10-30T00:00:00.000Z',
ShippedDate: '1996-11-04T00:00:00.000Z',
Freight: 54.83,
ShipRegion: null,
},
{
OrderID: 10343,
OrderDate: '1996-10-31T00:00:00.000Z',
ShippedDate: '1996-11-06T00:00:00.000Z',
Freight: 110.37,
ShipRegion: null,
},

{
OrderID: 10344,
OrderDate: '1996-11-01T00:00:00.000Z',
ShippedDate: '1996-11-05T00:00:00.000Z',
Freight: 23.29,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10345,
OrderDate: '1996-11-04T00:00:00.000Z',
ShippedDate: '1996-11-11T00:00:00.000Z',
Freight: 249.06,
ShipRegion: null,
},
{
OrderID: 10346,
OrderDate: '1996-11-05T00:00:00.000Z',
ShippedDate: '1996-11-08T00:00:00.000Z',
Freight: 142.08,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10347,
CustomerID: 'FAMIA',
OrderDate: '1996-11-06T00:00:00.000Z',
ShippedDate: '1996-11-08T00:00:00.000Z',
Freight: 3.1,
ShipName: 'Familia Arquibaldo',
ShipAddress: 'Rua Orós, 92',
ShipRegion: 'SP',
},
{
OrderID: 10348,
OrderDate: '1996-11-07T00:00:00.000Z',
ShippedDate: '1996-11-15T00:00:00.000Z',

Freight: 0.78,
ShipRegion: null,
},
{
OrderID: 10349,
OrderDate: '1996-11-08T00:00:00.000Z',
ShippedDate: '1996-11-15T00:00:00.000Z',
Freight: 8.63,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10350,
CustomerID: 'LAMAI',
OrderDate: '1996-11-11T00:00:00.000Z',
ShippedDate: '1996-12-03T00:00:00.000Z',
Freight: 64.19,
ShipName: "La maison d'Asie",
ShipAddress: '1 rue Alsace-Lorraine',
ShipCity: 'Toulouse',
ShipRegion: null,
},
{
OrderID: 10351,
OrderDate: '1996-11-11T00:00:00.000Z',
ShippedDate: '1996-11-20T00:00:00.000Z',
Freight: 162.33,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10352,
OrderDate: '1996-11-12T00:00:00.000Z',
ShippedDate: '1996-11-18T00:00:00.000Z',
Freight: 1.3,
ShipCity: 'Lisboa',
ShipRegion: null,

},
{
OrderID: 10353,
CustomerID: 'PICCO',
OrderDate: '1996-11-13T00:00:00.000Z',
ShippedDate: '1996-11-25T00:00:00.000Z',
Freight: 360.63,
ShipName: 'Piccolo und mehr',
ShipAddress: 'Geislweg 14',
ShipCity: 'Salzburg',
ShipRegion: null,
},
{
OrderID: 10354,
OrderDate: '1996-11-14T00:00:00.000Z',
ShippedDate: '1996-11-20T00:00:00.000Z',
Freight: 53.8,
ShipRegion: null,
},
{
OrderID: 10355,
CustomerID: 'AROUT',
OrderDate: '1996-11-15T00:00:00.000Z',
ShippedDate: '1996-11-20T00:00:00.000Z',
Freight: 41.95,
ShipName: 'Around the Horn',
ShipAddress: 'Brook Farm Stratford St. Mary',
ShipCity: 'Colchester',
ShipRegion: 'Essex',
ShipCountry: 'UK',
},
{
OrderID: 10356,
OrderDate: '1996-11-18T00:00:00.000Z',
ShippedDate: '1996-11-27T00:00:00.000Z',
Freight: 36.71,
ShipRegion: null,
},
{
OrderID: 10357,

OrderDate: '1996-11-19T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 34.88,
ShipRegion: 'Lara',
},
{
OrderID: 10358,
OrderDate: '1996-11-20T00:00:00.000Z',
ShippedDate: '1996-11-27T00:00:00.000Z',
Freight: 19.64,
ShipRegion: null,
},
{
OrderID: 10359,
CustomerID: 'SEVES',
OrderDate: '1996-11-21T00:00:00.000Z',
ShippedDate: '1996-11-26T00:00:00.000Z',
Freight: 288.43,
ShipName: 'Seven Seas Imports',
ShipAddress: '90 Wadhurst Rd.',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10360,
OrderDate: '1996-11-22T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 131.7,
ShipRegion: null,
},
{
OrderID: 10361,
OrderDate: '1996-11-22T00:00:00.000Z',
ShippedDate: '1996-12-03T00:00:00.000Z',
Freight: 183.17,


ShipRegion: null,
},
{
OrderID: 10362,
OrderDate: '1996-11-25T00:00:00.000Z',
ShippedDate: '1996-11-28T00:00:00.000Z',
Freight: 96.04,
ShipRegion: null,
},
{
OrderID: 10363,
CustomerID: 'DRACD',
OrderDate: '1996-11-26T00:00:00.000Z',
ShippedDate: '1996-12-04T00:00:00.000Z',
Freight: 30.54,
ShipName: 'Drachenblut Delikatessen',
ShipAddress: 'Walserweg 21',
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10364,
CustomerID: 'EASTC',
OrderDate: '1996-11-26T00:00:00.000Z',
ShippedDate: '1996-12-04T00:00:00.000Z',
Freight: 71.97,
ShipName: 'Eastern Connection',
ShipAddress: '35 King George',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10365,
CustomerID: 'ANTON',
OrderDate: '1996-11-27T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 22,
ShipName: 'Antonio Moreno Taquería',
ShipAddress: 'Mataderos 2312',
ShipRegion: null,
},

{
OrderID: 10366,
CustomerID: 'GALED',
OrderDate: '1996-11-28T00:00:00.000Z',
ShippedDate: '1996-12-30T00:00:00.000Z',
Freight: 10.14,
ShipName: 'Galería del gastronómo',
ShipAddress: 'Rambla de Cataluña, 23',
ShipCity: 'Barcelona',
ShipRegion: null,
},
{
OrderID: 10367,
CustomerID: 'VAFFE',
OrderDate: '1996-11-28T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 13.55,
ShipName: 'Vaffeljernet',
ShipAddress: 'Smagsloget 45',
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10368,
OrderDate: '1996-11-29T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 101.95,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10369,
OrderDate: '1996-12-02T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 195.68,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10370,
OrderDate: '1996-12-03T00:00:00.000Z',

ShippedDate: '1996-12-27T00:00:00.000Z',
Freight: 1.17,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10371,
OrderDate: '1996-12-03T00:00:00.000Z',
ShippedDate: '1996-12-24T00:00:00.000Z',
Freight: 0.45,
ShipRegion: null,
},
{
OrderID: 10372,
CustomerID: 'QUEEN',
OrderDate: '1996-12-04T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 890.78,
ShipName: 'Queen Cozinha',
ShipAddress: 'Alameda dos Canàrios, 891',
ShipRegion: 'SP',
},
{
OrderID: 10373,
OrderDate: '1996-12-05T00:00:00.000Z',
ShippedDate: '1996-12-11T00:00:00.000Z',
Freight: 124.12,
ShipCity: 'Cork',
},
{
OrderID: 10374,
CustomerID: 'WOLZA',
OrderDate: '1996-12-05T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 3.94,
ShipName: 'Wolski Zajazd',
ShipAddress: 'ul. Filtrowa 68',
ShipCity: 'Warszawa',

ShipRegion: null,
ShipCountry: 'Poland',
},
{
OrderID: 10375,
CustomerID: 'HUNGC',
OrderDate: '1996-12-06T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 20.12,
ShipName: 'Hungry Coyote Import Store',
ShipAddress: 'City Center Plaza 516 Main St.',
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10376,
OrderDate: '1996-12-09T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 20.39,
},
{
OrderID: 10377,
OrderDate: '1996-12-09T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 22.21,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10378,
OrderDate: '1996-12-10T00:00:00.000Z',
ShippedDate: '1996-12-19T00:00:00.000Z',
Freight: 5.44,
ShipRegion: null,
},

OrderID: 10379,
OrderDate: '1996-12-11T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 45.03,
ShipRegion: 'RJ',
},
{
OrderID: 10380,
OrderDate: '1996-12-12T00:00:00.000Z',
ShippedDate: '1997-01-16T00:00:00.000Z',
Freight: 35.03,
ShipCity: 'Cork',
},
{
OrderID: 10381,
OrderDate: '1996-12-12T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 7.99,
ShipRegion: 'Lara',
},
{
OrderID: 10382,
OrderDate: '1996-12-13T00:00:00.000Z',
ShippedDate: '1996-12-16T00:00:00.000Z',
Freight: 94.77,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10383,
OrderDate: '1996-12-16T00:00:00.000Z',
ShippedDate: '1996-12-18T00:00:00.000Z',
Freight: 34.24,


ShipCountry: 'UK',
},
{
OrderID: 10384,
OrderDate: '1996-12-16T00:00:00.000Z',
ShippedDate: '1996-12-20T00:00:00.000Z',
Freight: 168.64,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10385,
OrderDate: '1996-12-17T00:00:00.000Z',
ShippedDate: '1996-12-23T00:00:00.000Z',
Freight: 30.96,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10386,
OrderDate: '1996-12-18T00:00:00.000Z',
ShippedDate: '1996-12-25T00:00:00.000Z',
Freight: 13.99,
ShipRegion: 'SP',
},
{
OrderID: 10387,
CustomerID: 'SANTG',
OrderDate: '1996-12-18T00:00:00.000Z',
ShippedDate: '1996-12-20T00:00:00.000Z',
Freight: 93.63,
ShipName: 'Santé Gourmet',
ShipAddress: 'Erling Skakkes gate 78',
ShipCity: 'Stavern',
ShipRegion: null,
ShipCountry: 'Norway',

},
{
OrderID: 10388,
OrderDate: '1996-12-19T00:00:00.000Z',
ShippedDate: '1996-12-20T00:00:00.000Z',
Freight: 34.86,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10389,
CustomerID: 'BOTTM',
OrderDate: '1996-12-20T00:00:00.000Z',
ShippedDate: '1996-12-24T00:00:00.000Z',
Freight: 47.42,
ShipName: 'Bottom-Dollar Markets',
ShipAddress: '23 Tsawassen Blvd.',
ShipCity: 'Tsawassen',
ShipRegion: 'BC',
},
{
OrderID: 10390,
OrderDate: '1996-12-23T00:00:00.000Z',
ShippedDate: '1996-12-26T00:00:00.000Z',
Freight: 126.38,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10391,
OrderDate: '1996-12-23T00:00:00.000Z',
ShippedDate: '1996-12-31T00:00:00.000Z',
Freight: 5.45,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10392,

OrderDate: '1996-12-24T00:00:00.000Z',
ShippedDate: '1997-01-01T00:00:00.000Z',
Freight: 122.46,
ShipRegion: null,
},
{
OrderID: 10393,
OrderDate: '1996-12-25T00:00:00.000Z',
ShippedDate: '1997-01-03T00:00:00.000Z',
Freight: 126.56,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10394,
OrderDate: '1996-12-25T00:00:00.000Z',
ShippedDate: '1997-01-03T00:00:00.000Z',
Freight: 30.34,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10395,
OrderDate: '1996-12-26T00:00:00.000Z',
ShippedDate: '1997-01-03T00:00:00.000Z',
Freight: 184.41,
},
{
OrderID: 10396,
OrderDate: '1996-12-27T00:00:00.000Z',
ShippedDate: '1997-01-06T00:00:00.000Z',
Freight: 135.35,

ShipRegion: null,
},
{
OrderID: 10397,
OrderDate: '1996-12-27T00:00:00.000Z',
ShippedDate: '1997-01-02T00:00:00.000Z',
Freight: 60.26,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10398,
OrderDate: '1996-12-30T00:00:00.000Z',
ShippedDate: '1997-01-09T00:00:00.000Z',
Freight: 89.16,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10399,
OrderDate: '1996-12-31T00:00:00.000Z',
ShippedDate: '1997-01-08T00:00:00.000Z',
Freight: 27.36,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10400,
OrderDate: '1997-01-01T00:00:00.000Z',
ShippedDate: '1997-01-16T00:00:00.000Z',
Freight: 83.93,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},

{
OrderID: 10401,
OrderDate: '1997-01-01T00:00:00.000Z',
ShippedDate: '1997-01-10T00:00:00.000Z',
Freight: 12.51,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10402,
OrderDate: '1997-01-02T00:00:00.000Z',
ShippedDate: '1997-01-10T00:00:00.000Z',
Freight: 67.88,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10403,
OrderDate: '1997-01-03T00:00:00.000Z',
ShippedDate: '1997-01-09T00:00:00.000Z',
Freight: 73.79,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10404,
OrderDate: '1997-01-03T00:00:00.000Z',
ShippedDate: '1997-01-08T00:00:00.000Z',
Freight: 155.97,
ShipRegion: null,
},
{
OrderID: 10405,
CustomerID: 'LINOD',
OrderDate: '1997-01-06T00:00:00.000Z',
ShippedDate: '1997-01-22T00:00:00.000Z',

Freight: 34.82,
ShipName: 'LINO-Delicateses',
ShipAddress: 'Ave. 5 de Mayo Porlamar',
ShipCity: 'I. de Margarita',
ShipRegion: 'Nueva Esparta',
},
{
OrderID: 10406,
OrderDate: '1997-01-07T00:00:00.000Z',
ShippedDate: '1997-01-13T00:00:00.000Z',
Freight: 108.04,
ShipRegion: 'SP',
},
{
OrderID: 10407,
OrderDate: '1997-01-07T00:00:00.000Z',
ShippedDate: '1997-01-30T00:00:00.000Z',
Freight: 91.48,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10408,
CustomerID: 'FOLIG',
OrderDate: '1997-01-08T00:00:00.000Z',
ShippedDate: '1997-01-14T00:00:00.000Z',
Freight: 11.26,
ShipName: 'Folies gourmandes',
ShipAddress: '184, chaussée de Tournai',
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10409,
CustomerID: 'OCEAN',
OrderDate: '1997-01-09T00:00:00.000Z',
ShippedDate: '1997-01-14T00:00:00.000Z',
Freight: 29.83,
ShipName: 'Océano Atlántico Ltda.',
ShipAddress: 'Ing. Gustavo Moncada 8585 Piso 20-A',
ShipCity: 'Buenos Aires',
ShipRegion: null,

ShipCountry: 'Argentina',
},
{
OrderID: 10410,
OrderDate: '1997-01-10T00:00:00.000Z',
ShippedDate: '1997-01-15T00:00:00.000Z',
Freight: 2.4,
ShipRegion: 'BC',
},
{
OrderID: 10411,
OrderDate: '1997-01-10T00:00:00.000Z',
ShippedDate: '1997-01-21T00:00:00.000Z',
Freight: 23.65,
ShipRegion: 'BC',
},
{
OrderID: 10412,
OrderDate: '1997-01-13T00:00:00.000Z',
ShippedDate: '1997-01-15T00:00:00.000Z',
Freight: 3.77,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10413,
OrderDate: '1997-01-14T00:00:00.000Z',
ShippedDate: '1997-01-16T00:00:00.000Z',
Freight: 95.66,
ShipRegion: null,
},
{
OrderID: 10414,

OrderDate: '1997-01-14T00:00:00.000Z',
ShippedDate: '1997-01-17T00:00:00.000Z',
Freight: 21.48,
ShipRegion: 'SP',
},
{
OrderID: 10415,
OrderDate: '1997-01-15T00:00:00.000Z',
ShippedDate: '1997-01-24T00:00:00.000Z',
Freight: 0.2,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10416,
OrderDate: '1997-01-16T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 22.72,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10417,
OrderDate: '1997-01-16T00:00:00.000Z',
ShippedDate: '1997-01-28T00:00:00.000Z',
Freight: 70.29,
ShipRegion: null,
},
{
OrderID: 10418,
OrderDate: '1997-01-17T00:00:00.000Z',
ShippedDate: '1997-01-24T00:00:00.000Z',
Freight: 17.55,


ShipRegion: null,
},
{
OrderID: 10419,
OrderDate: '1997-01-20T00:00:00.000Z',
ShippedDate: '1997-01-30T00:00:00.000Z',
Freight: 137.35,
ShipRegion: null,
},
{
OrderID: 10420,
OrderDate: '1997-01-21T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 44.12,
ShipRegion: 'SP',
},
{
OrderID: 10421,
OrderDate: '1997-01-21T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 99.23,
ShipRegion: 'RJ',
},
{
OrderID: 10422,
CustomerID: 'FRANS',
OrderDate: '1997-01-22T00:00:00.000Z',
ShippedDate: '1997-01-31T00:00:00.000Z',
Freight: 3.02,
ShipName: 'Franchi S.p.A.',
ShipAddress: 'Via Monte Bianco 34',
ShipCity: 'Torino',
ShipRegion: null,
},

{
OrderID: 10423,
CustomerID: 'GOURL',
OrderDate: '1997-01-23T00:00:00.000Z',
ShippedDate: '1997-02-24T00:00:00.000Z',
Freight: 24.5,
ShipName: 'Gourmet Lanchonetes',
ShipAddress: 'Av. Brasil, 442',
ShipCity: 'Campinas',
ShipRegion: 'SP',
},
{
OrderID: 10424,
OrderDate: '1997-01-23T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 370.61,
},
{
OrderID: 10425,
OrderDate: '1997-01-24T00:00:00.000Z',
ShippedDate: '1997-02-14T00:00:00.000Z',
Freight: 7.93,
ShipRegion: null,
},
{
OrderID: 10426,
OrderDate: '1997-01-27T00:00:00.000Z',
ShippedDate: '1997-02-06T00:00:00.000Z',
Freight: 18.69,
ShipRegion: null,
},
{
OrderID: 10427,
OrderDate: '1997-01-27T00:00:00.000Z',

ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 31.29,
ShipRegion: null,
},
{
OrderID: 10428,
OrderDate: '1997-01-28T00:00:00.000Z',
ShippedDate: '1997-02-04T00:00:00.000Z',
Freight: 11.09,
ShipRegion: null,
},
{
OrderID: 10429,
OrderDate: '1997-01-29T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 56.63,
ShipCity: 'Cork',
},
{
OrderID: 10430,
OrderDate: '1997-01-30T00:00:00.000Z',
ShippedDate: '1997-02-03T00:00:00.000Z',
Freight: 458.78,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10431,
OrderDate: '1997-01-30T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 44.17,

ShipRegion: 'BC',
},
{
OrderID: 10432,
OrderDate: '1997-01-31T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 4.34,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10433,
OrderDate: '1997-02-03T00:00:00.000Z',
ShippedDate: '1997-03-04T00:00:00.000Z',
Freight: 73.83,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10434,
OrderDate: '1997-02-03T00:00:00.000Z',
ShippedDate: '1997-02-13T00:00:00.000Z',
Freight: 17.92,
ShipRegion: null,
},
{
OrderID: 10435,
CustomerID: 'CONSH',
OrderDate: '1997-02-04T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 9.21,
ShipName: 'Consolidated Holdings',
ShipAddress: 'Berkeley Gardens 12 Brewery',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},

OrderID: 10436,
OrderDate: '1997-02-05T00:00:00.000Z',
ShippedDate: '1997-02-11T00:00:00.000Z',
Freight: 156.66,
ShipRegion: null,
},
{
OrderID: 10437,
OrderDate: '1997-02-05T00:00:00.000Z',
ShippedDate: '1997-02-12T00:00:00.000Z',
Freight: 19.97,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10438,
OrderDate: '1997-02-06T00:00:00.000Z',
ShippedDate: '1997-02-14T00:00:00.000Z',
Freight: 8.24,
ShipRegion: null,
},
{
OrderID: 10439,
OrderDate: '1997-02-07T00:00:00.000Z',
ShippedDate: '1997-02-10T00:00:00.000Z',
Freight: 4.07,
},
{
OrderID: 10440,
OrderDate: '1997-02-10T00:00:00.000Z',
ShippedDate: '1997-02-28T00:00:00.000Z',
Freight: 86.53,


ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10441,
OrderDate: '1997-02-10T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 73.02,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10442,
OrderDate: '1997-02-11T00:00:00.000Z',
ShippedDate: '1997-02-18T00:00:00.000Z',
Freight: 47.94,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10443,
OrderDate: '1997-02-12T00:00:00.000Z',
ShippedDate: '1997-02-14T00:00:00.000Z',
Freight: 13.95,
ShipRegion: null,
},
{
OrderID: 10444,
OrderDate: '1997-02-12T00:00:00.000Z',
ShippedDate: '1997-02-21T00:00:00.000Z',
Freight: 3.5,
ShipCity: 'Luleå',
ShipRegion: null,

},
{
OrderID: 10445,
OrderDate: '1997-02-13T00:00:00.000Z',
ShippedDate: '1997-02-20T00:00:00.000Z',
Freight: 9.3,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10446,
OrderDate: '1997-02-14T00:00:00.000Z',
ShippedDate: '1997-02-19T00:00:00.000Z',
Freight: 14.68,
ShipRegion: null,
},
{
OrderID: 10447,
OrderDate: '1997-02-14T00:00:00.000Z',
ShippedDate: '1997-03-07T00:00:00.000Z',
Freight: 68.66,
ShipRegion: 'RJ',
},
{
OrderID: 10448,
CustomerID: 'RANCH',
OrderDate: '1997-02-17T00:00:00.000Z',
ShippedDate: '1997-02-24T00:00:00.000Z',
Freight: 38.82,
ShipName: 'Rancho grande',
ShipAddress: 'Av. del Libertador 900',
ShipRegion: null,
},
{
OrderID: 10449,

OrderDate: '1997-02-18T00:00:00.000Z',
ShippedDate: '1997-02-27T00:00:00.000Z',
Freight: 53.3,
ShipRegion: null,
},
{
OrderID: 10450,
OrderDate: '1997-02-19T00:00:00.000Z',
ShippedDate: '1997-03-11T00:00:00.000Z',
Freight: 7.23,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10451,
OrderDate: '1997-02-19T00:00:00.000Z',
ShippedDate: '1997-03-12T00:00:00.000Z',
Freight: 189.09,
ShipRegion: null,
},
{
OrderID: 10452,
OrderDate: '1997-02-20T00:00:00.000Z',
ShippedDate: '1997-02-26T00:00:00.000Z',
Freight: 140.26,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10453,
OrderDate: '1997-02-21T00:00:00.000Z',
ShippedDate: '1997-02-26T00:00:00.000Z',
Freight: 25.36,

ShipCountry: 'UK',
},
{
OrderID: 10454,
OrderDate: '1997-02-21T00:00:00.000Z',
ShippedDate: '1997-02-25T00:00:00.000Z',
Freight: 2.74,
ShipRegion: null,
},
{
OrderID: 10455,
OrderDate: '1997-02-24T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 180.45,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10456,
OrderDate: '1997-02-25T00:00:00.000Z',
ShippedDate: '1997-02-28T00:00:00.000Z',
Freight: 8.12,
ShipRegion: null,
},
{
OrderID: 10457,
OrderDate: '1997-02-25T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 11.57,
ShipRegion: null,
},

{
OrderID: 10458,
OrderDate: '1997-02-26T00:00:00.000Z',
ShippedDate: '1997-03-04T00:00:00.000Z',
Freight: 147.06,
ShipRegion: null,
},
{
OrderID: 10459,
OrderDate: '1997-02-27T00:00:00.000Z',
ShippedDate: '1997-02-28T00:00:00.000Z',
Freight: 25.09,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10460,
OrderDate: '1997-02-28T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 16.27,
ShipRegion: null,
},
{
OrderID: 10461,
OrderDate: '1997-02-28T00:00:00.000Z',
ShippedDate: '1997-03-05T00:00:00.000Z',
Freight: 148.61,
ShipRegion: 'Lara',
},
{
OrderID: 10462,
OrderDate: '1997-03-03T00:00:00.000Z',
ShippedDate: '1997-03-18T00:00:00.000Z',

Freight: 6.17,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10463,
OrderDate: '1997-03-04T00:00:00.000Z',
ShippedDate: '1997-03-06T00:00:00.000Z',
Freight: 14.78,
ShipRegion: null,
},
{
OrderID: 10464,
OrderDate: '1997-03-04T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 89,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10465,
OrderDate: '1997-03-05T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 145.04,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10466,
OrderDate: '1997-03-06T00:00:00.000Z',
ShippedDate: '1997-03-13T00:00:00.000Z',
Freight: 11.93,
ShipRegion: 'SP',

},
{
OrderID: 10467,
OrderDate: '1997-03-06T00:00:00.000Z',
ShippedDate: '1997-03-11T00:00:00.000Z',
Freight: 4.93,
ShipRegion: null,
},
{
OrderID: 10468,
OrderDate: '1997-03-07T00:00:00.000Z',
ShippedDate: '1997-03-12T00:00:00.000Z',
Freight: 44.12,
ShipRegion: null,
},
{
OrderID: 10469,
OrderDate: '1997-03-10T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 60.18,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10470,
OrderDate: '1997-03-11T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 64.56,
ShipRegion: null,
},
{
OrderID: 10471,

OrderDate: '1997-03-11T00:00:00.000Z',
ShippedDate: '1997-03-18T00:00:00.000Z',
Freight: 45.59,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10472,
OrderDate: '1997-03-12T00:00:00.000Z',
ShippedDate: '1997-03-19T00:00:00.000Z',
Freight: 4.2,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10473,
OrderDate: '1997-03-13T00:00:00.000Z',
ShippedDate: '1997-03-21T00:00:00.000Z',
Freight: 16.37,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10474,
OrderDate: '1997-03-13T00:00:00.000Z',
ShippedDate: '1997-03-21T00:00:00.000Z',
Freight: 83.49,
ShipRegion: null,
},
{
OrderID: 10475,
OrderDate: '1997-03-14T00:00:00.000Z',
ShippedDate: '1997-04-04T00:00:00.000Z',
Freight: 68.52,


ShipRegion: null,
},
{
OrderID: 10476,
OrderDate: '1997-03-17T00:00:00.000Z',
ShippedDate: '1997-03-24T00:00:00.000Z',
Freight: 4.41,
},
{
OrderID: 10477,
OrderDate: '1997-03-17T00:00:00.000Z',
ShippedDate: '1997-03-25T00:00:00.000Z',
Freight: 13.02,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10478,
OrderDate: '1997-03-18T00:00:00.000Z',
ShippedDate: '1997-03-26T00:00:00.000Z',
Freight: 4.81,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10479,
OrderDate: '1997-03-19T00:00:00.000Z',
ShippedDate: '1997-03-21T00:00:00.000Z',
Freight: 708.95,
ShipRegion: 'NM',
ShipCountry: 'USA',
},

{
OrderID: 10480,
OrderDate: '1997-03-20T00:00:00.000Z',
ShippedDate: '1997-03-24T00:00:00.000Z',
Freight: 1.35,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10481,
OrderDate: '1997-03-20T00:00:00.000Z',
ShippedDate: '1997-03-25T00:00:00.000Z',
Freight: 64.33,
ShipRegion: 'RJ',
},
{
OrderID: 10482,
CustomerID: 'LAZYK',
OrderDate: '1997-03-21T00:00:00.000Z',
ShippedDate: '1997-04-10T00:00:00.000Z',
Freight: 7.48,
ShipName: 'Lazy K Kountry Store',
ShipAddress: '12 Orchestra Terrace',
ShipCity: 'Walla Walla',
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10483,
OrderDate: '1997-03-24T00:00:00.000Z',
ShippedDate: '1997-04-25T00:00:00.000Z',
Freight: 15.28,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10484,
OrderDate: '1997-03-24T00:00:00.000Z',

ShippedDate: '1997-04-01T00:00:00.000Z',
Freight: 6.88,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10485,
OrderDate: '1997-03-25T00:00:00.000Z',
ShippedDate: '1997-03-31T00:00:00.000Z',
Freight: 64.45,
},
{
OrderID: 10486,
OrderDate: '1997-03-26T00:00:00.000Z',
ShippedDate: '1997-04-02T00:00:00.000Z',
Freight: 30.53,
},
{
OrderID: 10487,
OrderDate: '1997-03-26T00:00:00.000Z',
ShippedDate: '1997-03-28T00:00:00.000Z',
Freight: 71.07,
ShipRegion: 'SP',
},
{
OrderID: 10488,
OrderDate: '1997-03-27T00:00:00.000Z',
ShippedDate: '1997-04-02T00:00:00.000Z',
Freight: 4.93,

ShipRegion: null,
},
{
OrderID: 10489,
OrderDate: '1997-03-28T00:00:00.000Z',
ShippedDate: '1997-04-09T00:00:00.000Z',
Freight: 5.29,
ShipRegion: null,
},
{
OrderID: 10490,
OrderDate: '1997-03-31T00:00:00.000Z',
ShippedDate: '1997-04-03T00:00:00.000Z',
Freight: 210.19,
},
{
OrderID: 10491,
OrderDate: '1997-03-31T00:00:00.000Z',
ShippedDate: '1997-04-08T00:00:00.000Z',
Freight: 16.96,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10492,
OrderDate: '1997-04-01T00:00:00.000Z',
ShippedDate: '1997-04-11T00:00:00.000Z',
Freight: 62.89,
ShipRegion: 'BC',
},

OrderID: 10493,
OrderDate: '1997-04-02T00:00:00.000Z',
ShippedDate: '1997-04-10T00:00:00.000Z',
Freight: 10.64,
ShipRegion: null,
},
{
OrderID: 10494,
OrderDate: '1997-04-02T00:00:00.000Z',
ShippedDate: '1997-04-09T00:00:00.000Z',
Freight: 65.99,
ShipRegion: 'SP',
},
{
OrderID: 10495,
CustomerID: 'LAUGB',
OrderDate: '1997-04-03T00:00:00.000Z',
ShippedDate: '1997-04-11T00:00:00.000Z',
Freight: 4.65,
ShipName: 'Laughing Bacchus Wine Cellars',
ShipAddress: '2319 Elm St.',
ShipCity: 'Vancouver',
ShipRegion: 'BC',
},
{
OrderID: 10496,
OrderDate: '1997-04-04T00:00:00.000Z',
ShippedDate: '1997-04-07T00:00:00.000Z',
Freight: 46.77,
ShipRegion: 'SP',
},
{
OrderID: 10497,
OrderDate: '1997-04-04T00:00:00.000Z',
ShippedDate: '1997-04-07T00:00:00.000Z',
Freight: 36.21,


ShipRegion: null,
},
{
OrderID: 10498,
OrderDate: '1997-04-07T00:00:00.000Z',
ShippedDate: '1997-04-11T00:00:00.000Z',
Freight: 29.75,
},
{
OrderID: 10499,
OrderDate: '1997-04-08T00:00:00.000Z',
ShippedDate: '1997-04-16T00:00:00.000Z',
Freight: 102.02,
ShipRegion: 'Lara',
},
{
OrderID: 10500,
OrderDate: '1997-04-09T00:00:00.000Z',
ShippedDate: '1997-04-17T00:00:00.000Z',
Freight: 42.68,
ShipRegion: null,
},
{
OrderID: 10501,
CustomerID: 'BLAUS',
OrderDate: '1997-04-09T00:00:00.000Z',
ShippedDate: '1997-04-16T00:00:00.000Z',
Freight: 8.85,
ShipName: 'Blauer See Delikatessen',
ShipAddress: 'Forsterstr. 57',
ShipCity: 'Mannheim',
ShipRegion: null,

},
{
OrderID: 10502,
OrderDate: '1997-04-10T00:00:00.000Z',
ShippedDate: '1997-04-29T00:00:00.000Z',
Freight: 69.32,
ShipRegion: null,
},
{
OrderID: 10503,
OrderDate: '1997-04-11T00:00:00.000Z',
ShippedDate: '1997-04-16T00:00:00.000Z',
Freight: 16.74,
ShipCity: 'Cork',
},
{
OrderID: 10504,
OrderDate: '1997-04-11T00:00:00.000Z',
ShippedDate: '1997-04-18T00:00:00.000Z',
Freight: 59.13,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10505,
OrderDate: '1997-04-14T00:00:00.000Z',
ShippedDate: '1997-04-21T00:00:00.000Z',
Freight: 7.13,
},
{
OrderID: 10506,

OrderDate: '1997-04-15T00:00:00.000Z',
ShippedDate: '1997-05-02T00:00:00.000Z',
Freight: 21.19,
ShipRegion: null,
},
{
OrderID: 10507,
OrderDate: '1997-04-15T00:00:00.000Z',
ShippedDate: '1997-04-22T00:00:00.000Z',
Freight: 47.45,
ShipRegion: null,
},
{
OrderID: 10508,
OrderDate: '1997-04-16T00:00:00.000Z',
ShippedDate: '1997-05-13T00:00:00.000Z',
Freight: 4.99,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10509,
OrderDate: '1997-04-17T00:00:00.000Z',
ShippedDate: '1997-04-29T00:00:00.000Z',
Freight: 0.15,
ShipRegion: null,
},
{
OrderID: 10510,
OrderDate: '1997-04-18T00:00:00.000Z',
ShippedDate: '1997-04-28T00:00:00.000Z',
Freight: 367.63,

ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10511,
OrderDate: '1997-04-18T00:00:00.000Z',
ShippedDate: '1997-04-21T00:00:00.000Z',
Freight: 350.64,
ShipRegion: null,
},
{
OrderID: 10512,
OrderDate: '1997-04-21T00:00:00.000Z',
ShippedDate: '1997-04-24T00:00:00.000Z',
Freight: 3.53,
ShipRegion: 'SP',
},
{
OrderID: 10513,
OrderDate: '1997-04-22T00:00:00.000Z',
ShippedDate: '1997-04-28T00:00:00.000Z',
Freight: 105.65,
ShipRegion: null,
},
{
OrderID: 10514,
OrderDate: '1997-04-22T00:00:00.000Z',
ShippedDate: '1997-05-16T00:00:00.000Z',
Freight: 789.95,
ShipCity: 'Graz',
ShipRegion: null,
},

{
OrderID: 10515,
OrderDate: '1997-04-23T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 204.47,
ShipRegion: null,
},
{
OrderID: 10516,
OrderDate: '1997-04-24T00:00:00.000Z',
ShippedDate: '1997-05-01T00:00:00.000Z',
Freight: 62.78,
ShipCity: 'Cork',
},
{
OrderID: 10517,
CustomerID: 'NORTS',
OrderDate: '1997-04-24T00:00:00.000Z',
ShippedDate: '1997-04-29T00:00:00.000Z',
Freight: 32.07,
ShipName: 'North/South',
ShipAddress: 'South House 300 Queensbridge',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10518,
OrderDate: '1997-04-25T00:00:00.000Z',
ShippedDate: '1997-05-05T00:00:00.000Z',
Freight: 218.15,
ShipRegion: null,
},
{
OrderID: 10519,
OrderDate: '1997-04-28T00:00:00.000Z',
ShippedDate: '1997-05-01T00:00:00.000Z',

Freight: 91.76,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10520,
OrderDate: '1997-04-29T00:00:00.000Z',
ShippedDate: '1997-05-01T00:00:00.000Z',
Freight: 13.37,
ShipRegion: null,
},
{
OrderID: 10521,
CustomerID: 'CACTU',
OrderDate: '1997-04-29T00:00:00.000Z',
ShippedDate: '1997-05-02T00:00:00.000Z',
Freight: 17.22,
ShipName: 'Cactus Comidas para llevar',
ShipAddress: 'Cerrito 333',
ShipRegion: null,
},
{
OrderID: 10522,
OrderDate: '1997-04-30T00:00:00.000Z',
ShippedDate: '1997-05-06T00:00:00.000Z',
Freight: 45.33,
ShipRegion: null,
},
{
OrderID: 10523,
OrderDate: '1997-05-01T00:00:00.000Z',
ShippedDate: '1997-05-30T00:00:00.000Z',
Freight: 77.63,
ShipCity: 'London',
ShipRegion: null,

ShipCountry: 'UK',
},
{
OrderID: 10524,
OrderDate: '1997-05-01T00:00:00.000Z',
ShippedDate: '1997-05-07T00:00:00.000Z',
Freight: 244.79,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10525,
OrderDate: '1997-05-02T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 11.06,
ShipRegion: null,
},
{
OrderID: 10526,
OrderDate: '1997-05-05T00:00:00.000Z',
ShippedDate: '1997-05-15T00:00:00.000Z',
Freight: 58.59,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10527,
OrderDate: '1997-05-05T00:00:00.000Z',
ShippedDate: '1997-05-07T00:00:00.000Z',
Freight: 41.9,
ShipRegion: null,
},
{
OrderID: 10528,

CustomerID: 'GREAL',
OrderDate: '1997-05-06T00:00:00.000Z',
ShippedDate: '1997-05-09T00:00:00.000Z',
Freight: 3.35,
ShipName: 'Great Lakes Food Market',
ShipAddress: '2732 Baker Blvd.',
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10529,
CustomerID: 'MAISD',
OrderDate: '1997-05-07T00:00:00.000Z',
ShippedDate: '1997-05-09T00:00:00.000Z',
Freight: 66.69,
ShipName: 'Maison Dewey',
ShipAddress: 'Rue Joseph-Bens 532',
ShipCity: 'Bruxelles',
ShipRegion: null,
},
{
OrderID: 10530,
OrderDate: '1997-05-08T00:00:00.000Z',
ShippedDate: '1997-05-12T00:00:00.000Z',
Freight: 339.22,
ShipRegion: null,
},
{
OrderID: 10531,
OrderDate: '1997-05-08T00:00:00.000Z',
ShippedDate: '1997-05-19T00:00:00.000Z',
Freight: 8.12,
ShipRegion: null,
},
{
OrderID: 10532,
OrderDate: '1997-05-09T00:00:00.000Z',
ShippedDate: '1997-05-12T00:00:00.000Z',
Freight: 74.46,


ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10533,
OrderDate: '1997-05-12T00:00:00.000Z',
ShippedDate: '1997-05-22T00:00:00.000Z',
Freight: 188.04,
ShipRegion: null,
},
{
OrderID: 10534,
OrderDate: '1997-05-12T00:00:00.000Z',
ShippedDate: '1997-05-14T00:00:00.000Z',
Freight: 27.94,
ShipRegion: null,
},
{
OrderID: 10535,
OrderDate: '1997-05-13T00:00:00.000Z',
ShippedDate: '1997-05-21T00:00:00.000Z',
Freight: 15.64,
ShipRegion: null,
},
{
OrderID: 10536,
OrderDate: '1997-05-14T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 58.88,
ShipRegion: null,
},

{
OrderID: 10537,
OrderDate: '1997-05-14T00:00:00.000Z',
ShippedDate: '1997-05-19T00:00:00.000Z',
Freight: 78.85,
ShipRegion: null,
},
{
OrderID: 10538,
OrderDate: '1997-05-15T00:00:00.000Z',
ShippedDate: '1997-05-16T00:00:00.000Z',
Freight: 4.87,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10539,
OrderDate: '1997-05-16T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 12.36,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10540,
OrderDate: '1997-05-19T00:00:00.000Z',
ShippedDate: '1997-06-13T00:00:00.000Z',
Freight: 1007.64,
ShipRegion: null,
},
{
OrderID: 10541,
OrderDate: '1997-05-19T00:00:00.000Z',

ShippedDate: '1997-05-29T00:00:00.000Z',
Freight: 68.65,
ShipRegion: 'RJ',
},
{
OrderID: 10542,
OrderDate: '1997-05-20T00:00:00.000Z',
ShippedDate: '1997-05-26T00:00:00.000Z',
Freight: 10.95,
ShipRegion: null,
},
{
OrderID: 10543,
OrderDate: '1997-05-21T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 48.17,
ShipRegion: 'Lara',
},
{
OrderID: 10544,
OrderDate: '1997-05-21T00:00:00.000Z',
ShippedDate: '1997-05-30T00:00:00.000Z',
Freight: 24.91,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10545,
OrderDate: '1997-05-22T00:00:00.000Z',
ShippedDate: '1997-06-26T00:00:00.000Z',
Freight: 11.92,

ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10546,
OrderDate: '1997-05-23T00:00:00.000Z',
ShippedDate: '1997-05-27T00:00:00.000Z',
Freight: 194.72,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10547,
OrderDate: '1997-05-23T00:00:00.000Z',
ShippedDate: '1997-06-02T00:00:00.000Z',
Freight: 178.43,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10548,
OrderDate: '1997-05-26T00:00:00.000Z',
ShippedDate: '1997-06-02T00:00:00.000Z',
Freight: 1.43,
ShipRegion: null,
},
{
OrderID: 10549,
OrderDate: '1997-05-27T00:00:00.000Z',
ShippedDate: '1997-05-30T00:00:00.000Z',
Freight: 171.24,
ShipRegion: null,
},

OrderID: 10550,
OrderDate: '1997-05-28T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 4.32,
ShipRegion: null,
},
{
OrderID: 10551,
OrderDate: '1997-05-28T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 72.95,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10552,
OrderDate: '1997-05-29T00:00:00.000Z',
ShippedDate: '1997-06-05T00:00:00.000Z',
Freight: 83.22,
},
{
OrderID: 10553,
OrderDate: '1997-05-30T00:00:00.000Z',
ShippedDate: '1997-06-03T00:00:00.000Z',
Freight: 149.49,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10554,
OrderDate: '1997-05-30T00:00:00.000Z',
ShippedDate: '1997-06-05T00:00:00.000Z',
Freight: 120.97,


ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10555,
OrderDate: '1997-06-02T00:00:00.000Z',
ShippedDate: '1997-06-04T00:00:00.000Z',
Freight: 252.49,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10556,
OrderDate: '1997-06-03T00:00:00.000Z',
ShippedDate: '1997-06-13T00:00:00.000Z',
Freight: 9.8,
ShipRegion: null,
},
{
OrderID: 10557,
OrderDate: '1997-06-03T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 96.72,
ShipRegion: null,
},
{
OrderID: 10558,
OrderDate: '1997-06-04T00:00:00.000Z',
ShippedDate: '1997-06-10T00:00:00.000Z',
Freight: 72.97,
ShipCountry: 'UK',

},
{
OrderID: 10559,
OrderDate: '1997-06-05T00:00:00.000Z',
ShippedDate: '1997-06-13T00:00:00.000Z',
Freight: 8.05,
ShipRegion: null,
},
{
OrderID: 10560,
OrderDate: '1997-06-06T00:00:00.000Z',
ShippedDate: '1997-06-09T00:00:00.000Z',
Freight: 36.65,
ShipRegion: null,
},
{
OrderID: 10561,
OrderDate: '1997-06-06T00:00:00.000Z',
ShippedDate: '1997-06-09T00:00:00.000Z',
Freight: 242.21,
ShipRegion: null,
},
{
OrderID: 10562,
OrderDate: '1997-06-09T00:00:00.000Z',
ShippedDate: '1997-06-12T00:00:00.000Z',
Freight: 22.95,
ShipRegion: null,
},
{
OrderID: 10563,

OrderDate: '1997-06-10T00:00:00.000Z',
ShippedDate: '1997-06-24T00:00:00.000Z',
Freight: 60.43,
ShipRegion: 'RJ',
},
{
OrderID: 10564,
OrderDate: '1997-06-10T00:00:00.000Z',
ShippedDate: '1997-06-16T00:00:00.000Z',
Freight: 13.75,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10565,
OrderDate: '1997-06-11T00:00:00.000Z',
ShippedDate: '1997-06-18T00:00:00.000Z',
Freight: 7.15,
},
{
OrderID: 10566,
OrderDate: '1997-06-12T00:00:00.000Z',
ShippedDate: '1997-06-18T00:00:00.000Z',
Freight: 88.4,
ShipRegion: null,
},
{
OrderID: 10567,
OrderDate: '1997-06-12T00:00:00.000Z',
ShippedDate: '1997-06-17T00:00:00.000Z',
Freight: 33.97,

ShipCity: 'Cork',
},
{
OrderID: 10568,
OrderDate: '1997-06-13T00:00:00.000Z',
ShippedDate: '1997-07-09T00:00:00.000Z',
Freight: 6.54,
ShipRegion: null,
},
{
OrderID: 10569,
OrderDate: '1997-06-16T00:00:00.000Z',
ShippedDate: '1997-07-11T00:00:00.000Z',
Freight: 58.98,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10570,
OrderDate: '1997-06-17T00:00:00.000Z',
ShippedDate: '1997-06-19T00:00:00.000Z',
Freight: 188.99,
},
{
OrderID: 10571,
OrderDate: '1997-06-17T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 26.06,
ShipCity: 'Graz',
ShipRegion: null,
},

{
OrderID: 10572,
OrderDate: '1997-06-18T00:00:00.000Z',
ShippedDate: '1997-06-25T00:00:00.000Z',
Freight: 116.43,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10573,
OrderDate: '1997-06-19T00:00:00.000Z',
ShippedDate: '1997-06-20T00:00:00.000Z',
Freight: 84.84,
ShipRegion: null,
},
{
OrderID: 10574,
CustomerID: 'TRAIH',
OrderDate: '1997-06-19T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 37.6,
ShipName: "Trail' Head Gourmet Provisioners",
ShipAddress: '722 DaVinci Blvd.',
ShipCity: 'Kirkland',
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10575,
OrderDate: '1997-06-20T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 127.34,
ShipRegion: null,
},
{
OrderID: 10576,
OrderDate: '1997-06-23T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',

Freight: 18.56,
ShipRegion: null,
},
{
OrderID: 10577,
OrderDate: '1997-06-23T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 25.41,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10578,
OrderDate: '1997-06-24T00:00:00.000Z',
ShippedDate: '1997-07-25T00:00:00.000Z',
Freight: 29.6,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10579,
CustomerID: 'LETSS',
OrderDate: '1997-06-25T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 13.73,
ShipName: "Let' Stop N Shop",
ShipAddress: '87 Polk St. Suite 5',
ShipCity: 'San Francisco',
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10580,
OrderDate: '1997-06-26T00:00:00.000Z',
ShippedDate: '1997-07-01T00:00:00.000Z',
Freight: 75.89,
ShipCity: 'Köln',
ShipRegion: null,

},
{
OrderID: 10581,
OrderDate: '1997-06-26T00:00:00.000Z',
ShippedDate: '1997-07-02T00:00:00.000Z',
Freight: 3.01,
ShipRegion: 'SP',
},
{
OrderID: 10582,
OrderDate: '1997-06-27T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 27.71,
ShipRegion: null,
},
{
OrderID: 10583,
OrderDate: '1997-06-30T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 7.28,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10584,
OrderDate: '1997-06-30T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 59.14,
ShipRegion: null,
},
{
OrderID: 10585,

OrderDate: '1997-07-01T00:00:00.000Z',
ShippedDate: '1997-07-10T00:00:00.000Z',
Freight: 13.41,
ShipRegion: 'SP',
},
{
OrderID: 10586,
OrderDate: '1997-07-02T00:00:00.000Z',
ShippedDate: '1997-07-09T00:00:00.000Z',
Freight: 0.48,
ShipRegion: null,
},
{
OrderID: 10587,
OrderDate: '1997-07-02T00:00:00.000Z',
ShippedDate: '1997-07-09T00:00:00.000Z',
Freight: 62.52,
ShipRegion: 'RJ',
},
{
OrderID: 10588,
OrderDate: '1997-07-03T00:00:00.000Z',
ShippedDate: '1997-07-10T00:00:00.000Z',
Freight: 194.67,
ShipRegion: null,
},
{
OrderID: 10589,
OrderDate: '1997-07-04T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 4.42,


ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10590,
OrderDate: '1997-07-07T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 44.77,
},
{
OrderID: 10591,
OrderDate: '1997-07-07T00:00:00.000Z',
ShippedDate: '1997-07-16T00:00:00.000Z',
Freight: 55.92,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10592,
OrderDate: '1997-07-08T00:00:00.000Z',
ShippedDate: '1997-07-16T00:00:00.000Z',
Freight: 32.1,
ShipRegion: null,
},
{
OrderID: 10593,
OrderDate: '1997-07-09T00:00:00.000Z',
ShippedDate: '1997-08-13T00:00:00.000Z',
Freight: 174.2,
ShipRegion: null,
},

{
OrderID: 10594,
OrderDate: '1997-07-09T00:00:00.000Z',
ShippedDate: '1997-07-16T00:00:00.000Z',
Freight: 5.24,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10595,
OrderDate: '1997-07-10T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 96.78,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10596,
OrderDate: '1997-07-11T00:00:00.000Z',
ShippedDate: '1997-08-12T00:00:00.000Z',
Freight: 16.34,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10597,
OrderDate: '1997-07-11T00:00:00.000Z',
ShippedDate: '1997-07-18T00:00:00.000Z',
Freight: 35.12,
ShipRegion: null,
},
{
OrderID: 10598,
OrderDate: '1997-07-14T00:00:00.000Z',

ShippedDate: '1997-07-18T00:00:00.000Z',
Freight: 44.42,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10599,
OrderDate: '1997-07-15T00:00:00.000Z',
ShippedDate: '1997-07-21T00:00:00.000Z',
Freight: 29.98,
ShipName: 'B Beverages',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10600,
OrderDate: '1997-07-16T00:00:00.000Z',
ShippedDate: '1997-07-21T00:00:00.000Z',
Freight: 45.13,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10601,
OrderDate: '1997-07-16T00:00:00.000Z',
ShippedDate: '1997-07-22T00:00:00.000Z',
Freight: 58.3,
},
{
OrderID: 10602,
OrderDate: '1997-07-17T00:00:00.000Z',
ShippedDate: '1997-07-22T00:00:00.000Z',
Freight: 2.92,
ShipCity: 'Århus',

ShipRegion: null,
},
{
OrderID: 10603,
OrderDate: '1997-07-18T00:00:00.000Z',
ShippedDate: '1997-08-08T00:00:00.000Z',
Freight: 48.77,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10604,
OrderDate: '1997-07-18T00:00:00.000Z',
ShippedDate: '1997-07-29T00:00:00.000Z',
Freight: 7.46,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10605,
OrderDate: '1997-07-21T00:00:00.000Z',
ShippedDate: '1997-07-29T00:00:00.000Z',
Freight: 379.13,
},
{
OrderID: 10606,
OrderDate: '1997-07-22T00:00:00.000Z',
ShippedDate: '1997-07-31T00:00:00.000Z',
Freight: 79.4,
ShipRegion: 'SP',
},

OrderID: 10607,
OrderDate: '1997-07-22T00:00:00.000Z',
ShippedDate: '1997-07-25T00:00:00.000Z',
Freight: 200.24,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10608,
OrderDate: '1997-07-23T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 27.79,
ShipRegion: null,
},
{
OrderID: 10609,
OrderDate: '1997-07-24T00:00:00.000Z',
ShippedDate: '1997-07-30T00:00:00.000Z',
Freight: 1.85,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10610,
OrderDate: '1997-07-25T00:00:00.000Z',
ShippedDate: '1997-08-06T00:00:00.000Z',
Freight: 26.78,
ShipRegion: null,
},
{
OrderID: 10611,
OrderDate: '1997-07-25T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 80.65,


ShipRegion: null,
},
{
OrderID: 10612,
OrderDate: '1997-07-28T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 544.08,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10613,
OrderDate: '1997-07-29T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 8.11,
},
{
OrderID: 10614,
OrderDate: '1997-07-29T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 1.93,
ShipRegion: null,
},
{
OrderID: 10615,
CustomerID: 'WILMK',
OrderDate: '1997-07-30T00:00:00.000Z',
ShippedDate: '1997-08-06T00:00:00.000Z',
Freight: 0.75,
ShipName: 'Wilman Kala',
ShipAddress: 'Keskuskatu 45',
ShipCity: 'Helsinki',
ShipRegion: null,

},
{
OrderID: 10616,
OrderDate: '1997-07-31T00:00:00.000Z',
ShippedDate: '1997-08-05T00:00:00.000Z',
Freight: 116.53,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10617,
OrderDate: '1997-07-31T00:00:00.000Z',
ShippedDate: '1997-08-04T00:00:00.000Z',
Freight: 18.53,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10618,
OrderDate: '1997-08-01T00:00:00.000Z',
ShippedDate: '1997-08-08T00:00:00.000Z',
Freight: 154.68,
},
{
OrderID: 10619,
OrderDate: '1997-08-04T00:00:00.000Z',
ShippedDate: '1997-08-07T00:00:00.000Z',
Freight: 91.05,
},
{
OrderID: 10620,

OrderDate: '1997-08-05T00:00:00.000Z',
ShippedDate: '1997-08-14T00:00:00.000Z',
Freight: 0.94,
ShipRegion: 'BC',
},
{
OrderID: 10621,
OrderDate: '1997-08-05T00:00:00.000Z',
ShippedDate: '1997-08-11T00:00:00.000Z',
Freight: 23.73,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10622,
OrderDate: '1997-08-06T00:00:00.000Z',
ShippedDate: '1997-08-11T00:00:00.000Z',
Freight: 50.97,
ShipRegion: 'RJ',
},
{
OrderID: 10623,
OrderDate: '1997-08-07T00:00:00.000Z',
ShippedDate: '1997-08-12T00:00:00.000Z',
Freight: 97.18,
ShipRegion: null,
},
{
OrderID: 10624,
CustomerID: 'THECR',
OrderDate: '1997-08-07T00:00:00.000Z',
ShippedDate: '1997-08-19T00:00:00.000Z',
Freight: 94.8,
ShipName: 'The Cracker Box',
ShipAddress: '55 Grizzly Peak Rd.',

ShipCity: 'Butte',
ShipRegion: 'MT',
ShipCountry: 'USA',
},
{
OrderID: 10625,
OrderDate: '1997-08-08T00:00:00.000Z',
ShippedDate: '1997-08-14T00:00:00.000Z',
Freight: 43.9,
ShipRegion: null,
},
{
OrderID: 10626,
OrderDate: '1997-08-11T00:00:00.000Z',
ShippedDate: '1997-08-20T00:00:00.000Z',
Freight: 138.69,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10627,
OrderDate: '1997-08-11T00:00:00.000Z',
ShippedDate: '1997-08-21T00:00:00.000Z',
Freight: 107.46,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10628,
OrderDate: '1997-08-12T00:00:00.000Z',
ShippedDate: '1997-08-20T00:00:00.000Z',
Freight: 30.36,
ShipRegion: null,
},

{
OrderID: 10629,
OrderDate: '1997-08-12T00:00:00.000Z',
ShippedDate: '1997-08-20T00:00:00.000Z',
Freight: 85.46,
ShipRegion: null,
},
{
OrderID: 10630,
OrderDate: '1997-08-13T00:00:00.000Z',
ShippedDate: '1997-08-19T00:00:00.000Z',
Freight: 32.35,
ShipRegion: null,
},
{
OrderID: 10631,
OrderDate: '1997-08-14T00:00:00.000Z',
ShippedDate: '1997-08-15T00:00:00.000Z',
Freight: 0.87,
ShipRegion: null,
},
{
OrderID: 10632,
OrderDate: '1997-08-14T00:00:00.000Z',
ShippedDate: '1997-08-19T00:00:00.000Z',
Freight: 41.38,
ShipRegion: null,
},
{
OrderID: 10633,
OrderDate: '1997-08-15T00:00:00.000Z',
ShippedDate: '1997-08-18T00:00:00.000Z',

Freight: 477.9,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10634,
OrderDate: '1997-08-15T00:00:00.000Z',
ShippedDate: '1997-08-21T00:00:00.000Z',
Freight: 487.38,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10635,
OrderDate: '1997-08-18T00:00:00.000Z',
ShippedDate: '1997-08-21T00:00:00.000Z',
Freight: 47.46,
ShipRegion: null,
},
{
OrderID: 10636,
OrderDate: '1997-08-19T00:00:00.000Z',
ShippedDate: '1997-08-26T00:00:00.000Z',
Freight: 1.15,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10637,
OrderDate: '1997-08-19T00:00:00.000Z',
ShippedDate: '1997-08-26T00:00:00.000Z',
Freight: 201.29,
ShipRegion: 'SP',

},
{
OrderID: 10638,
OrderDate: '1997-08-20T00:00:00.000Z',
ShippedDate: '1997-09-01T00:00:00.000Z',
Freight: 158.44,
},
{
OrderID: 10639,
OrderDate: '1997-08-20T00:00:00.000Z',
ShippedDate: '1997-08-27T00:00:00.000Z',
Freight: 38.64,
ShipRegion: null,
},
{
OrderID: 10640,
OrderDate: '1997-08-21T00:00:00.000Z',
ShippedDate: '1997-08-28T00:00:00.000Z',
Freight: 23.55,
ShipRegion: null,
},
{
OrderID: 10641,
OrderDate: '1997-08-22T00:00:00.000Z',
ShippedDate: '1997-08-26T00:00:00.000Z',
Freight: 179.61,
},
{
OrderID: 10642,

OrderDate: '1997-08-22T00:00:00.000Z',
ShippedDate: '1997-09-05T00:00:00.000Z',
Freight: 41.89,
ShipRegion: null,
},
{
OrderID: 10643,
CustomerID: 'ALFKI',
OrderDate: '1997-08-25T00:00:00.000Z',
ShippedDate: '1997-09-02T00:00:00.000Z',
Freight: 29.46,
ShipName: 'Alfreds Futterkiste',
ShipAddress: 'Obere Str. 57',
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10644,
OrderDate: '1997-08-25T00:00:00.000Z',
ShippedDate: '1997-09-01T00:00:00.000Z',
Freight: 0.14,
ShipRegion: 'SP',
},
{
OrderID: 10645,
OrderDate: '1997-08-26T00:00:00.000Z',
ShippedDate: '1997-09-02T00:00:00.000Z',
Freight: 12.41,
ShipRegion: 'RJ',
},
{
OrderID: 10646,
OrderDate: '1997-08-27T00:00:00.000Z',
ShippedDate: '1997-09-03T00:00:00.000Z',
Freight: 142.33,


ShipCity: 'Cork',
},
{
OrderID: 10647,
OrderDate: '1997-08-27T00:00:00.000Z',
ShippedDate: '1997-09-03T00:00:00.000Z',
Freight: 45.54,
ShipRegion: 'RJ',
},
{
OrderID: 10648,
OrderDate: '1997-08-28T00:00:00.000Z',
ShippedDate: '1997-09-09T00:00:00.000Z',
Freight: 14.25,
ShipRegion: 'RJ',
},
{
OrderID: 10649,
OrderDate: '1997-08-28T00:00:00.000Z',
ShippedDate: '1997-08-29T00:00:00.000Z',
Freight: 6.2,
ShipRegion: null,
},
{
OrderID: 10650,
OrderDate: '1997-08-29T00:00:00.000Z',
ShippedDate: '1997-09-03T00:00:00.000Z',
Freight: 176.81,
ShipRegion: 'SP',
},

{
OrderID: 10651,
OrderDate: '1997-09-01T00:00:00.000Z',
ShippedDate: '1997-09-11T00:00:00.000Z',
Freight: 20.6,
ShipRegion: null,
},
{
OrderID: 10652,
OrderDate: '1997-09-01T00:00:00.000Z',
ShippedDate: '1997-09-08T00:00:00.000Z',
Freight: 7.14,
ShipRegion: 'SP',
},
{
OrderID: 10653,
OrderDate: '1997-09-02T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 93.25,
ShipRegion: null,
},
{
OrderID: 10654,
OrderDate: '1997-09-02T00:00:00.000Z',
ShippedDate: '1997-09-11T00:00:00.000Z',
Freight: 55.26,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10655,
OrderDate: '1997-09-03T00:00:00.000Z',

ShippedDate: '1997-09-11T00:00:00.000Z',
Freight: 4.41,
ShipRegion: null,
},
{
OrderID: 10656,
OrderDate: '1997-09-04T00:00:00.000Z',
ShippedDate: '1997-09-10T00:00:00.000Z',
Freight: 57.15,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10657,
OrderDate: '1997-09-04T00:00:00.000Z',
ShippedDate: '1997-09-15T00:00:00.000Z',
Freight: 352.69,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10658,
OrderDate: '1997-09-05T00:00:00.000Z',
ShippedDate: '1997-09-08T00:00:00.000Z',
Freight: 364.15,
ShipRegion: null,
},
{
OrderID: 10659,
OrderDate: '1997-09-05T00:00:00.000Z',
ShippedDate: '1997-09-10T00:00:00.000Z',
Freight: 105.81,

ShipRegion: 'SP',
},
{
OrderID: 10660,
OrderDate: '1997-09-08T00:00:00.000Z',
ShippedDate: '1997-10-15T00:00:00.000Z',
Freight: 111.29,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10661,
OrderDate: '1997-09-09T00:00:00.000Z',
ShippedDate: '1997-09-15T00:00:00.000Z',
Freight: 17.55,
ShipCity: 'Cork',
},
{
OrderID: 10662,
OrderDate: '1997-09-09T00:00:00.000Z',
ShippedDate: '1997-09-18T00:00:00.000Z',
Freight: 1.28,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10663,
OrderDate: '1997-09-10T00:00:00.000Z',
ShippedDate: '1997-10-03T00:00:00.000Z',
Freight: 113.15,
ShipRegion: null,
},

OrderID: 10664,
OrderDate: '1997-09-10T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 1.27,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10665,
OrderDate: '1997-09-11T00:00:00.000Z',
ShippedDate: '1997-09-17T00:00:00.000Z',
Freight: 26.31,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10666,
OrderDate: '1997-09-12T00:00:00.000Z',
ShippedDate: '1997-09-22T00:00:00.000Z',
Freight: 232.42,
ShipRegion: null,
},
{
OrderID: 10667,
OrderDate: '1997-09-12T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 78.09,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10668,
OrderDate: '1997-09-15T00:00:00.000Z',
ShippedDate: '1997-09-23T00:00:00.000Z',
Freight: 47.22,


ShipRegion: null,
},
{
OrderID: 10669,
OrderDate: '1997-09-15T00:00:00.000Z',
ShippedDate: '1997-09-22T00:00:00.000Z',
Freight: 24.39,
ShipRegion: null,
},
{
OrderID: 10670,
OrderDate: '1997-09-16T00:00:00.000Z',
ShippedDate: '1997-09-18T00:00:00.000Z',
Freight: 203.48,
ShipRegion: null,
},
{
OrderID: 10671,
CustomerID: 'FRANR',
OrderDate: '1997-09-17T00:00:00.000Z',
ShippedDate: '1997-09-24T00:00:00.000Z',
Freight: 30.34,
ShipName: 'France restauration',
ShipAddress: '54, rue Royale',
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10672,
OrderDate: '1997-09-17T00:00:00.000Z',
ShippedDate: '1997-09-26T00:00:00.000Z',
Freight: 95.75,
ShipCity: 'Luleå',
ShipRegion: null,

},
{
OrderID: 10673,
OrderDate: '1997-09-18T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 22.76,
ShipRegion: null,
},
{
OrderID: 10674,
OrderDate: '1997-09-18T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 0.9,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10675,
OrderDate: '1997-09-19T00:00:00.000Z',
ShippedDate: '1997-09-23T00:00:00.000Z',
Freight: 31.85,
ShipRegion: null,
},
{
OrderID: 10676,
OrderDate: '1997-09-22T00:00:00.000Z',
ShippedDate: '1997-09-29T00:00:00.000Z',
Freight: 2.01,
ShipRegion: null,
},
{
OrderID: 10677,

OrderDate: '1997-09-22T00:00:00.000Z',
ShippedDate: '1997-09-26T00:00:00.000Z',
Freight: 4.03,
ShipRegion: null,
},
{
OrderID: 10678,
OrderDate: '1997-09-23T00:00:00.000Z',
ShippedDate: '1997-10-16T00:00:00.000Z',
Freight: 388.98,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10679,
OrderDate: '1997-09-23T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 27.94,
ShipRegion: null,
},
{
OrderID: 10680,
OrderDate: '1997-09-24T00:00:00.000Z',
ShippedDate: '1997-09-26T00:00:00.000Z',
Freight: 26.61,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10681,
OrderDate: '1997-09-25T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 76.13,

ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10682,
OrderDate: '1997-09-25T00:00:00.000Z',
ShippedDate: '1997-10-01T00:00:00.000Z',
Freight: 36.13,
ShipRegion: null,
},
{
OrderID: 10683,
OrderDate: '1997-09-26T00:00:00.000Z',
ShippedDate: '1997-10-01T00:00:00.000Z',
Freight: 4.4,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10684,
OrderDate: '1997-09-26T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 145.63,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10685,
OrderDate: '1997-09-29T00:00:00.000Z',
ShippedDate: '1997-10-03T00:00:00.000Z',
Freight: 33.75,
ShipRegion: 'SP',
},

{
OrderID: 10686,
OrderDate: '1997-09-30T00:00:00.000Z',
ShippedDate: '1997-10-08T00:00:00.000Z',
Freight: 96.5,
ShipRegion: null,
},
{
OrderID: 10687,
OrderDate: '1997-09-30T00:00:00.000Z',
ShippedDate: '1997-10-30T00:00:00.000Z',
Freight: 296.43,
ShipCity: 'Cork',
},
{
OrderID: 10688,
OrderDate: '1997-10-01T00:00:00.000Z',
ShippedDate: '1997-10-07T00:00:00.000Z',
Freight: 299.09,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10689,
OrderDate: '1997-10-01T00:00:00.000Z',
ShippedDate: '1997-10-07T00:00:00.000Z',
Freight: 13.42,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10690,
OrderDate: '1997-10-02T00:00:00.000Z',
ShippedDate: '1997-10-03T00:00:00.000Z',

Freight: 15.8,
ShipRegion: 'RJ',
},
{
OrderID: 10691,
OrderDate: '1997-10-03T00:00:00.000Z',
ShippedDate: '1997-10-22T00:00:00.000Z',
Freight: 810.05,
ShipRegion: null,
},
{
OrderID: 10692,
OrderDate: '1997-10-03T00:00:00.000Z',
ShippedDate: '1997-10-13T00:00:00.000Z',
Freight: 61.02,
ShipName: "Alfred' Futterkiste",
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10693,
OrderDate: '1997-10-06T00:00:00.000Z',
ShippedDate: '1997-10-10T00:00:00.000Z',
Freight: 139.34,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10694,
OrderDate: '1997-10-06T00:00:00.000Z',
ShippedDate: '1997-10-09T00:00:00.000Z',
Freight: 398.36,
ShipRegion: null,

},
{
OrderID: 10695,
OrderDate: '1997-10-07T00:00:00.000Z',
ShippedDate: '1997-10-14T00:00:00.000Z',
Freight: 16.72,
ShipRegion: null,
},
{
OrderID: 10696,
OrderDate: '1997-10-08T00:00:00.000Z',
ShippedDate: '1997-10-14T00:00:00.000Z',
Freight: 102.55,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10697,
OrderDate: '1997-10-08T00:00:00.000Z',
ShippedDate: '1997-10-14T00:00:00.000Z',
Freight: 45.52,
},
{
OrderID: 10698,
OrderDate: '1997-10-09T00:00:00.000Z',
ShippedDate: '1997-10-17T00:00:00.000Z',
Freight: 272.47,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10699,

OrderDate: '1997-10-09T00:00:00.000Z',
ShippedDate: '1997-10-13T00:00:00.000Z',
Freight: 0.58,
ShipRegion: null,
},
{
OrderID: 10700,
OrderDate: '1997-10-10T00:00:00.000Z',
ShippedDate: '1997-10-16T00:00:00.000Z',
Freight: 65.1,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10701,
OrderDate: '1997-10-13T00:00:00.000Z',
ShippedDate: '1997-10-15T00:00:00.000Z',
Freight: 220.31,
ShipCity: 'Cork',
},
{
OrderID: 10702,
OrderDate: '1997-10-13T00:00:00.000Z',
ShippedDate: '1997-10-21T00:00:00.000Z',
Freight: 23.94,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10703,
OrderDate: '1997-10-14T00:00:00.000Z',
ShippedDate: '1997-10-20T00:00:00.000Z',
Freight: 152.3,


ShipRegion: null,
},
{
OrderID: 10704,
OrderDate: '1997-10-14T00:00:00.000Z',
ShippedDate: '1997-11-07T00:00:00.000Z',
Freight: 4.78,
ShipRegion: 'SP',
},
{
OrderID: 10705,
OrderDate: '1997-10-15T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 3.52,
},
{
OrderID: 10706,
OrderDate: '1997-10-16T00:00:00.000Z',
ShippedDate: '1997-10-21T00:00:00.000Z',
Freight: 135.63,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10707,
OrderDate: '1997-10-16T00:00:00.000Z',
ShippedDate: '1997-10-23T00:00:00.000Z',
Freight: 21.74,
ShipCountry: 'UK',
},

{
OrderID: 10708,
OrderDate: '1997-10-17T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 2.96,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10709,
OrderDate: '1997-10-17T00:00:00.000Z',
ShippedDate: '1997-11-20T00:00:00.000Z',
Freight: 210.8,
ShipRegion: 'SP',
},
{
OrderID: 10710,
OrderDate: '1997-10-20T00:00:00.000Z',
ShippedDate: '1997-10-23T00:00:00.000Z',
Freight: 4.98,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10711,
OrderDate: '1997-10-21T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 52.41,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10712,
OrderDate: '1997-10-21T00:00:00.000Z',

ShippedDate: '1997-10-31T00:00:00.000Z',
Freight: 89.93,
ShipCity: 'Cork',
},
{
OrderID: 10713,
OrderDate: '1997-10-22T00:00:00.000Z',
ShippedDate: '1997-10-24T00:00:00.000Z',
Freight: 167.05,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10714,
OrderDate: '1997-10-22T00:00:00.000Z',
ShippedDate: '1997-10-27T00:00:00.000Z',
Freight: 24.49,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10715,
OrderDate: '1997-10-23T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 63.2,
ShipRegion: null,
},
{
OrderID: 10716,
OrderDate: '1997-10-24T00:00:00.000Z',
ShippedDate: '1997-10-27T00:00:00.000Z',
Freight: 22.57,

ShipRegion: null,
},
{
OrderID: 10717,
OrderDate: '1997-10-24T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 59.25,
ShipRegion: null,
},
{
OrderID: 10718,
OrderDate: '1997-10-27T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 170.88,
ShipRegion: null,
},
{
OrderID: 10719,
OrderDate: '1997-10-27T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 51.44,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10720,
OrderDate: '1997-10-28T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 9.53,
ShipRegion: 'RJ',
},

OrderID: 10721,
OrderDate: '1997-10-29T00:00:00.000Z',
ShippedDate: '1997-10-31T00:00:00.000Z',
Freight: 48.92,
ShipRegion: null,
},
{
OrderID: 10722,
OrderDate: '1997-10-29T00:00:00.000Z',
ShippedDate: '1997-11-04T00:00:00.000Z',
Freight: 74.58,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10723,
OrderDate: '1997-10-30T00:00:00.000Z',
ShippedDate: '1997-11-25T00:00:00.000Z',
Freight: 21.72,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10724,
OrderDate: '1997-10-30T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 57.75,
},
{
OrderID: 10725,
OrderDate: '1997-10-31T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 10.83,


ShipRegion: 'SP',
},
{
OrderID: 10726,
OrderDate: '1997-11-03T00:00:00.000Z',
ShippedDate: '1997-12-05T00:00:00.000Z',
Freight: 16.56,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10727,
OrderDate: '1997-11-03T00:00:00.000Z',
ShippedDate: '1997-12-05T00:00:00.000Z',
Freight: 89.9,
ShipRegion: null,
},
{
OrderID: 10728,
OrderDate: '1997-11-04T00:00:00.000Z',
ShippedDate: '1997-11-11T00:00:00.000Z',
Freight: 58.33,
ShipRegion: 'SP',
},
{
OrderID: 10729,
OrderDate: '1997-11-04T00:00:00.000Z',
ShippedDate: '1997-11-14T00:00:00.000Z',
Freight: 141.06,

},
{
OrderID: 10730,
OrderDate: '1997-11-05T00:00:00.000Z',
ShippedDate: '1997-11-14T00:00:00.000Z',
Freight: 20.12,
ShipRegion: null,
},
{
OrderID: 10731,
OrderDate: '1997-11-06T00:00:00.000Z',
ShippedDate: '1997-11-14T00:00:00.000Z',
Freight: 96.65,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10732,
OrderDate: '1997-11-06T00:00:00.000Z',
ShippedDate: '1997-11-07T00:00:00.000Z',
Freight: 16.97,
ShipRegion: null,
},
{
OrderID: 10733,
OrderDate: '1997-11-07T00:00:00.000Z',
ShippedDate: '1997-11-10T00:00:00.000Z',
Freight: 110.11,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10734,

OrderDate: '1997-11-07T00:00:00.000Z',
ShippedDate: '1997-11-12T00:00:00.000Z',
Freight: 1.63,
ShipRegion: 'SP',
},
{
OrderID: 10735,
OrderDate: '1997-11-10T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 45.97,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10736,
OrderDate: '1997-11-11T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 44.1,
ShipCity: 'Cork',
},
{
OrderID: 10737,
OrderDate: '1997-11-11T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 7.79,
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10738,
CustomerID: 'SPECD',
OrderDate: '1997-11-12T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 2.91,
ShipName: 'Spécialités du monde',
ShipAddress: '25, rue Lauriston',

ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 10739,
OrderDate: '1997-11-12T00:00:00.000Z',
ShippedDate: '1997-11-17T00:00:00.000Z',
Freight: 11.08,
ShipAddress: '59 rue de lAbbaye',
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10740,
OrderDate: '1997-11-13T00:00:00.000Z',
ShippedDate: '1997-11-25T00:00:00.000Z',
Freight: 81.88,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10741,
OrderDate: '1997-11-14T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 10.96,
ShipCountry: 'UK',
},
{
OrderID: 10742,
OrderDate: '1997-11-14T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 243.73,
ShipRegion: 'BC',
},

{
OrderID: 10743,
OrderDate: '1997-11-17T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 23.72,
ShipCountry: 'UK',
},
{
OrderID: 10744,
OrderDate: '1997-11-17T00:00:00.000Z',
ShippedDate: '1997-11-24T00:00:00.000Z',
Freight: 69.19,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10745,
OrderDate: '1997-11-18T00:00:00.000Z',
ShippedDate: '1997-11-27T00:00:00.000Z',
Freight: 3.52,
ShipRegion: null,
},
{
OrderID: 10746,
OrderDate: '1997-11-19T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 31.43,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10747,
OrderDate: '1997-11-19T00:00:00.000Z',
ShippedDate: '1997-11-26T00:00:00.000Z',

Freight: 117.33,
ShipRegion: null,
},
{
OrderID: 10748,
OrderDate: '1997-11-20T00:00:00.000Z',
ShippedDate: '1997-11-28T00:00:00.000Z',
Freight: 232.55,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10749,
OrderDate: '1997-11-20T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 61.53,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10750,
OrderDate: '1997-11-21T00:00:00.000Z',
ShippedDate: '1997-11-24T00:00:00.000Z',
Freight: 79.3,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10751,
OrderDate: '1997-11-24T00:00:00.000Z',
ShippedDate: '1997-12-03T00:00:00.000Z',
Freight: 130.79,
ShipRegion: null,

},
{
OrderID: 10752,
OrderDate: '1997-11-24T00:00:00.000Z',
ShippedDate: '1997-11-28T00:00:00.000Z',
Freight: 1.39,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10753,
OrderDate: '1997-11-25T00:00:00.000Z',
ShippedDate: '1997-11-27T00:00:00.000Z',
Freight: 7.7,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10754,
OrderDate: '1997-11-25T00:00:00.000Z',
ShippedDate: '1997-11-27T00:00:00.000Z',
Freight: 2.38,
ShipRegion: null,
},
{
OrderID: 10755,
OrderDate: '1997-11-26T00:00:00.000Z',
ShippedDate: '1997-11-28T00:00:00.000Z',
Freight: 16.71,
ShipRegion: null,
},
{
OrderID: 10756,

OrderDate: '1997-11-27T00:00:00.000Z',
ShippedDate: '1997-12-02T00:00:00.000Z',
Freight: 73.21,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10757,
OrderDate: '1997-11-27T00:00:00.000Z',
ShippedDate: '1997-12-15T00:00:00.000Z',
Freight: 8.19,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10758,
OrderDate: '1997-11-28T00:00:00.000Z',
ShippedDate: '1997-12-04T00:00:00.000Z',
Freight: 138.17,
ShipRegion: null,
},
{
OrderID: 10759,
OrderDate: '1997-11-28T00:00:00.000Z',
ShippedDate: '1997-12-12T00:00:00.000Z',
Freight: 11.99,
ShipRegion: null,
},
{
OrderID: 10760,
OrderDate: '1997-12-01T00:00:00.000Z',
ShippedDate: '1997-12-10T00:00:00.000Z',
Freight: 155.64,


ShipRegion: null,
},
{
OrderID: 10761,
OrderDate: '1997-12-02T00:00:00.000Z',
ShippedDate: '1997-12-08T00:00:00.000Z',
Freight: 18.66,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10762,
OrderDate: '1997-12-02T00:00:00.000Z',
ShippedDate: '1997-12-09T00:00:00.000Z',
Freight: 328.74,
ShipRegion: null,
},
{
OrderID: 10763,
OrderDate: '1997-12-03T00:00:00.000Z',
ShippedDate: '1997-12-08T00:00:00.000Z',
Freight: 37.35,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10764,
OrderDate: '1997-12-03T00:00:00.000Z',
ShippedDate: '1997-12-08T00:00:00.000Z',
Freight: 145.45,
ShipCity: 'Graz',
ShipRegion: null,
},

{
OrderID: 10765,
OrderDate: '1997-12-04T00:00:00.000Z',
ShippedDate: '1997-12-09T00:00:00.000Z',
Freight: 42.74,
ShipRegion: null,
},
{
OrderID: 10766,
OrderDate: '1997-12-05T00:00:00.000Z',
ShippedDate: '1997-12-09T00:00:00.000Z',
Freight: 157.55,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10767,
OrderDate: '1997-12-05T00:00:00.000Z',
ShippedDate: '1997-12-15T00:00:00.000Z',
Freight: 1.59,
ShipRegion: null,
},
{
OrderID: 10768,
OrderDate: '1997-12-08T00:00:00.000Z',
ShippedDate: '1997-12-15T00:00:00.000Z',
Freight: 146.32,
ShipCountry: 'UK',
},
{
OrderID: 10769,
OrderDate: '1997-12-08T00:00:00.000Z',

ShippedDate: '1997-12-12T00:00:00.000Z',
Freight: 65.06,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10770,
OrderDate: '1997-12-09T00:00:00.000Z',
ShippedDate: '1997-12-17T00:00:00.000Z',
Freight: 5.32,
ShipRegion: 'RJ',
},
{
OrderID: 10771,
OrderDate: '1997-12-10T00:00:00.000Z',
ShippedDate: '1998-01-02T00:00:00.000Z',
Freight: 11.19,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10772,
OrderDate: '1997-12-10T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 91.28,
ShipRegion: null,
},
{
OrderID: 10773,
OrderDate: '1997-12-11T00:00:00.000Z',
ShippedDate: '1997-12-16T00:00:00.000Z',
Freight: 96.43,
ShipCity: 'Graz',

ShipRegion: null,
},
{
OrderID: 10774,
OrderDate: '1997-12-11T00:00:00.000Z',
ShippedDate: '1997-12-12T00:00:00.000Z',
Freight: 48.2,
ShipRegion: null,
},
{
OrderID: 10775,
OrderDate: '1997-12-12T00:00:00.000Z',
ShippedDate: '1997-12-26T00:00:00.000Z',
Freight: 20.25,
ShipCity: 'Butte',
ShipRegion: 'MT',
ShipCountry: 'USA',
},
{
OrderID: 10776,
OrderDate: '1997-12-15T00:00:00.000Z',
ShippedDate: '1997-12-18T00:00:00.000Z',
Freight: 351.53,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10777,
OrderDate: '1997-12-15T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 3.01,
ShipRegion: 'SP',
},

OrderID: 10778,
OrderDate: '1997-12-16T00:00:00.000Z',
ShippedDate: '1997-12-24T00:00:00.000Z',
Freight: 6.79,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10779,
OrderDate: '1997-12-16T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 58.13,
ShipRegion: null,
},
{
OrderID: 10780,
OrderDate: '1997-12-16T00:00:00.000Z',
ShippedDate: '1997-12-25T00:00:00.000Z',
Freight: 42.13,
ShipRegion: 'Lara',
},
{
OrderID: 10781,
OrderDate: '1997-12-17T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 73.16,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10782,
OrderDate: '1997-12-17T00:00:00.000Z',
ShippedDate: '1997-12-22T00:00:00.000Z',
Freight: 1.1,


ShipRegion: null,
},
{
OrderID: 10783,
OrderDate: '1997-12-18T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 124.98,
ShipRegion: 'RJ',
},
{
OrderID: 10784,
OrderDate: '1997-12-18T00:00:00.000Z',
ShippedDate: '1997-12-22T00:00:00.000Z',
Freight: 70.09,
ShipRegion: null,
},
{
OrderID: 10785,
OrderDate: '1997-12-18T00:00:00.000Z',
ShippedDate: '1997-12-24T00:00:00.000Z',
Freight: 1.51,
ShipRegion: 'DF',
},
{
OrderID: 10786,
OrderDate: '1997-12-19T00:00:00.000Z',
ShippedDate: '1997-12-23T00:00:00.000Z',
Freight: 110.87,
ShipRegion: 'SP',

},
{
OrderID: 10787,
OrderDate: '1997-12-19T00:00:00.000Z',
ShippedDate: '1997-12-26T00:00:00.000Z',
Freight: 249.93,
ShipRegion: null,
},
{
OrderID: 10788,
OrderDate: '1997-12-22T00:00:00.000Z',
ShippedDate: '1998-01-19T00:00:00.000Z',
Freight: 42.7,
ShipRegion: null,
},
{
OrderID: 10789,
OrderDate: '1997-12-22T00:00:00.000Z',
ShippedDate: '1997-12-31T00:00:00.000Z',
Freight: 100.6,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10790,
OrderDate: '1997-12-22T00:00:00.000Z',
ShippedDate: '1997-12-26T00:00:00.000Z',
Freight: 28.23,
ShipRegion: 'SP',
},
{
OrderID: 10791,

OrderDate: '1997-12-23T00:00:00.000Z',
ShippedDate: '1998-01-01T00:00:00.000Z',
Freight: 16.85,
ShipRegion: null,
},
{
OrderID: 10792,
OrderDate: '1997-12-23T00:00:00.000Z',
ShippedDate: '1997-12-31T00:00:00.000Z',
Freight: 23.79,
ShipRegion: null,
},
{
OrderID: 10793,
OrderDate: '1997-12-24T00:00:00.000Z',
ShippedDate: '1998-01-08T00:00:00.000Z',
Freight: 4.52,
ShipCountry: 'UK',
},
{
OrderID: 10794,
OrderDate: '1997-12-24T00:00:00.000Z',
ShippedDate: '1998-01-02T00:00:00.000Z',
Freight: 21.49,
ShipRegion: 'RJ',
},
{
OrderID: 10795,
OrderDate: '1997-12-24T00:00:00.000Z',
ShippedDate: '1998-01-20T00:00:00.000Z',
Freight: 126.66,

ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10796,
OrderDate: '1997-12-25T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 26.52,
},
{
OrderID: 10797,
OrderDate: '1997-12-25T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 33.35,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10798,
OrderDate: '1997-12-26T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 2.33,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10799,
OrderDate: '1997-12-26T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 30.76,
ShipRegion: null,
},

{
OrderID: 10800,
OrderDate: '1997-12-26T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 137.44,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10801,
OrderDate: '1997-12-29T00:00:00.000Z',
ShippedDate: '1997-12-31T00:00:00.000Z',
Freight: 97.09,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10802,
OrderDate: '1997-12-29T00:00:00.000Z',
ShippedDate: '1998-01-02T00:00:00.000Z',
Freight: 257.26,
ShipRegion: null,
},
{
OrderID: 10803,
OrderDate: '1997-12-30T00:00:00.000Z',
ShippedDate: '1998-01-06T00:00:00.000Z',
Freight: 55.23,
ShipRegion: 'SP',
},
{
OrderID: 10804,
OrderDate: '1997-12-30T00:00:00.000Z',
ShippedDate: '1998-01-07T00:00:00.000Z',

Freight: 27.33,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10805,
OrderDate: '1997-12-30T00:00:00.000Z',
ShippedDate: '1998-01-09T00:00:00.000Z',
Freight: 237.34,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10806,
OrderDate: '1997-12-31T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 22.11,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10807,
OrderDate: '1997-12-31T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 1.36,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10808,
OrderDate: '1998-01-01T00:00:00.000Z',
ShippedDate: '1998-01-09T00:00:00.000Z',
Freight: 45.53,
ShipRegion: 'AK',

ShipCountry: 'USA',
},
{
OrderID: 10809,
OrderDate: '1998-01-01T00:00:00.000Z',
ShippedDate: '1998-01-07T00:00:00.000Z',
Freight: 4.87,
ShipRegion: 'SP',
},
{
OrderID: 10810,
OrderDate: '1998-01-01T00:00:00.000Z',
ShippedDate: '1998-01-07T00:00:00.000Z',
Freight: 4.33,
ShipRegion: 'BC',
},
{
OrderID: 10811,
OrderDate: '1998-01-02T00:00:00.000Z',
ShippedDate: '1998-01-08T00:00:00.000Z',
Freight: 31.22,
},
{
OrderID: 10812,
OrderDate: '1998-01-02T00:00:00.000Z',
ShippedDate: '1998-01-12T00:00:00.000Z',
Freight: 59.78,
ShipRegion: null,
},
{
OrderID: 10813,

OrderDate: '1998-01-05T00:00:00.000Z',
ShippedDate: '1998-01-09T00:00:00.000Z',
Freight: 47.38,
ShipRegion: 'RJ',
},
{
OrderID: 10814,
OrderDate: '1998-01-05T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 130.94,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10815,
OrderDate: '1998-01-05T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 14.62,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10816,
OrderDate: '1998-01-06T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 719.78,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10817,
OrderDate: '1998-01-06T00:00:00.000Z',
ShippedDate: '1998-01-13T00:00:00.000Z',
Freight: 306.07,


ShipRegion: null,
},
{
OrderID: 10818,
OrderDate: '1998-01-07T00:00:00.000Z',
ShippedDate: '1998-01-12T00:00:00.000Z',
Freight: 65.48,
ShipRegion: null,
},
{
OrderID: 10819,
OrderDate: '1998-01-07T00:00:00.000Z',
ShippedDate: '1998-01-16T00:00:00.000Z',
Freight: 19.76,
ShipRegion: null,
},
{
OrderID: 10820,
OrderDate: '1998-01-07T00:00:00.000Z',
ShippedDate: '1998-01-13T00:00:00.000Z',
Freight: 37.52,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10821,
OrderDate: '1998-01-08T00:00:00.000Z',
ShippedDate: '1998-01-15T00:00:00.000Z',
Freight: 36.68,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},

{
OrderID: 10822,
OrderDate: '1998-01-08T00:00:00.000Z',
ShippedDate: '1998-01-16T00:00:00.000Z',
Freight: 7,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10823,
OrderDate: '1998-01-09T00:00:00.000Z',
ShippedDate: '1998-01-13T00:00:00.000Z',
Freight: 163.97,
ShipRegion: 'Lara',
},
{
OrderID: 10824,
OrderDate: '1998-01-09T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 1.23,
ShipRegion: null,
},
{
OrderID: 10825,
OrderDate: '1998-01-09T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 79.25,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10826,
OrderDate: '1998-01-12T00:00:00.000Z',

ShippedDate: '1998-02-06T00:00:00.000Z',
Freight: 7.09,
ShipRegion: null,
},
{
OrderID: 10827,
OrderDate: '1998-01-12T00:00:00.000Z',
ShippedDate: '1998-02-06T00:00:00.000Z',
Freight: 63.54,
ShipRegion: null,
},
{
OrderID: 10828,
OrderDate: '1998-01-13T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 90.85,
ShipRegion: null,
},
{
OrderID: 10829,
OrderDate: '1998-01-13T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 154.72,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10830,
OrderDate: '1998-01-13T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 81.83,

ShipRegion: 'SP',
},
{
OrderID: 10831,
OrderDate: '1998-01-14T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 72.19,
ShipRegion: null,
},
{
OrderID: 10832,
OrderDate: '1998-01-14T00:00:00.000Z',
ShippedDate: '1998-01-19T00:00:00.000Z',
Freight: 43.26,
ShipRegion: null,
},
{
OrderID: 10833,
OrderDate: '1998-01-15T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 71.49,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10834,
OrderDate: '1998-01-15T00:00:00.000Z',
ShippedDate: '1998-01-19T00:00:00.000Z',
Freight: 29.78,
ShipRegion: 'SP',
},

OrderID: 10835,
OrderDate: '1998-01-15T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 69.53,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10836,
OrderDate: '1998-01-16T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 411.88,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10837,
OrderDate: '1998-01-16T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 13.32,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10838,
OrderDate: '1998-01-19T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 59.28,
},
{
OrderID: 10839,
OrderDate: '1998-01-19T00:00:00.000Z',
ShippedDate: '1998-01-22T00:00:00.000Z',
Freight: 35.43,


ShipRegion: 'SP',
},
{
OrderID: 10840,
OrderDate: '1998-01-19T00:00:00.000Z',
ShippedDate: '1998-02-16T00:00:00.000Z',
Freight: 2.71,
},
{
OrderID: 10841,
OrderDate: '1998-01-20T00:00:00.000Z',
ShippedDate: '1998-01-29T00:00:00.000Z',
Freight: 424.3,
ShipRegion: null,
},
{
OrderID: 10842,
OrderDate: '1998-01-20T00:00:00.000Z',
ShippedDate: '1998-01-29T00:00:00.000Z',
Freight: 54.42,
ShipRegion: null,
},
{
OrderID: 10843,
OrderDate: '1998-01-21T00:00:00.000Z',
ShippedDate: '1998-01-26T00:00:00.000Z',
Freight: 9.26,
ShipCity: 'Lyon',
ShipRegion: null,

},
{
OrderID: 10844,
OrderDate: '1998-01-21T00:00:00.000Z',
ShippedDate: '1998-01-26T00:00:00.000Z',
Freight: 25.22,
ShipRegion: null,
},
{
OrderID: 10845,
OrderDate: '1998-01-21T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 212.98,
ShipRegion: null,
},
{
OrderID: 10846,
OrderDate: '1998-01-22T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 56.46,
ShipRegion: null,
},
{
OrderID: 10847,
OrderDate: '1998-01-22T00:00:00.000Z',
ShippedDate: '1998-02-10T00:00:00.000Z',
Freight: 487.57,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10848,

OrderDate: '1998-01-23T00:00:00.000Z',
ShippedDate: '1998-01-29T00:00:00.000Z',
Freight: 38.24,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10849,
OrderDate: '1998-01-23T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 0.56,
ShipRegion: null,
},
{
OrderID: 10850,
OrderDate: '1998-01-23T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 49.19,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10851,
OrderDate: '1998-01-26T00:00:00.000Z',
ShippedDate: '1998-02-02T00:00:00.000Z',
Freight: 160.55,
ShipRegion: 'RJ',
},
{
OrderID: 10852,
OrderDate: '1998-01-26T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 174.05,

ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10853,
OrderDate: '1998-01-27T00:00:00.000Z',
ShippedDate: '1998-02-03T00:00:00.000Z',
Freight: 53.83,
ShipRegion: null,
},
{
OrderID: 10854,
OrderDate: '1998-01-27T00:00:00.000Z',
ShippedDate: '1998-02-05T00:00:00.000Z',
Freight: 100.22,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10855,
OrderDate: '1998-01-27T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 170.97,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10856,
OrderDate: '1998-01-28T00:00:00.000Z',
ShippedDate: '1998-02-10T00:00:00.000Z',
Freight: 58.43,
ShipRegion: null,
},

{
OrderID: 10857,
OrderDate: '1998-01-28T00:00:00.000Z',
ShippedDate: '1998-02-06T00:00:00.000Z',
Freight: 188.85,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10858,
CustomerID: 'LACOR',
OrderDate: '1998-01-29T00:00:00.000Z',
ShippedDate: '1998-02-03T00:00:00.000Z',
Freight: 52.51,
ShipName: "La corne d'abondance",
ShipAddress: "67, avenue de l'Europe",
ShipCity: 'Versailles',
ShipRegion: null,
},
{
OrderID: 10859,
OrderDate: '1998-01-29T00:00:00.000Z',
ShippedDate: '1998-02-02T00:00:00.000Z',
Freight: 76.1,
ShipRegion: null,
},
{
OrderID: 10860,
OrderDate: '1998-01-29T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 19.26,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10861,
OrderDate: '1998-01-30T00:00:00.000Z',
ShippedDate: '1998-02-17T00:00:00.000Z',

Freight: 14.93,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10862,
OrderDate: '1998-01-30T00:00:00.000Z',
ShippedDate: '1998-02-02T00:00:00.000Z',
Freight: 53.23,
ShipRegion: null,
},
{
OrderID: 10863,
OrderDate: '1998-02-02T00:00:00.000Z',
ShippedDate: '1998-02-17T00:00:00.000Z',
Freight: 30.26,
},
{
OrderID: 10864,
OrderDate: '1998-02-02T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 3.04,
ShipCountry: 'UK',
},
{
OrderID: 10865,
OrderDate: '1998-02-02T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 348.14,
ShipRegion: null,

},
{
OrderID: 10866,
OrderDate: '1998-02-03T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 109.11,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10867,
OrderDate: '1998-02-03T00:00:00.000Z',
ShippedDate: '1998-02-11T00:00:00.000Z',
Freight: 1.93,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10868,
OrderDate: '1998-02-04T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 191.27,
ShipRegion: 'SP',
},
{
OrderID: 10869,
OrderDate: '1998-02-04T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 143.28,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10870,

OrderDate: '1998-02-04T00:00:00.000Z',
ShippedDate: '1998-02-13T00:00:00.000Z',
Freight: 12.04,
ShipRegion: null,
},
{
OrderID: 10871,
OrderDate: '1998-02-05T00:00:00.000Z',
ShippedDate: '1998-02-10T00:00:00.000Z',
Freight: 112.27,
ShipRegion: null,
},
{
OrderID: 10872,
OrderDate: '1998-02-05T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 175.32,
ShipRegion: null,
},
{
OrderID: 10873,
OrderDate: '1998-02-06T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 0.82,
ShipRegion: null,
},
{
OrderID: 10874,
OrderDate: '1998-02-06T00:00:00.000Z',
ShippedDate: '1998-02-11T00:00:00.000Z',
Freight: 19.58,


ShipRegion: null,
},
{
OrderID: 10875,
OrderDate: '1998-02-06T00:00:00.000Z',
ShippedDate: '1998-03-03T00:00:00.000Z',
Freight: 32.37,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10876,
OrderDate: '1998-02-09T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 60.42,
ShipRegion: null,
},
{
OrderID: 10877,
OrderDate: '1998-02-09T00:00:00.000Z',
ShippedDate: '1998-02-19T00:00:00.000Z',
Freight: 38.06,
ShipRegion: 'RJ',
},
{
OrderID: 10878,
OrderDate: '1998-02-10T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 46.69,
ShipRegion: null,
},

{
OrderID: 10879,
OrderDate: '1998-02-10T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 8.5,
ShipRegion: null,
},
{
OrderID: 10880,
OrderDate: '1998-02-10T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 88.01,
ShipRegion: null,
},
{
OrderID: 10881,
OrderDate: '1998-02-11T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 2.84,
ShipRegion: null,
},
{
OrderID: 10882,
OrderDate: '1998-02-11T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 23.1,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10883,
OrderDate: '1998-02-12T00:00:00.000Z',

ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 0.53,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10884,
OrderDate: '1998-02-12T00:00:00.000Z',
ShippedDate: '1998-02-13T00:00:00.000Z',
Freight: 90.97,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10885,
OrderDate: '1998-02-12T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 5.64,
ShipRegion: null,
},
{
OrderID: 10886,
OrderDate: '1998-02-13T00:00:00.000Z',
ShippedDate: '1998-03-02T00:00:00.000Z',
Freight: 4.99,
ShipRegion: 'RJ',
},
{
OrderID: 10887,
OrderDate: '1998-02-13T00:00:00.000Z',
ShippedDate: '1998-02-16T00:00:00.000Z',
Freight: 1.25,

ShipRegion: null,
},
{
OrderID: 10888,
OrderDate: '1998-02-16T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 51.87,
ShipRegion: null,
},
{
OrderID: 10889,
OrderDate: '1998-02-16T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 280.61,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10890,
OrderDate: '1998-02-16T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 32.76,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10891,
OrderDate: '1998-02-17T00:00:00.000Z',
ShippedDate: '1998-02-19T00:00:00.000Z',
Freight: 20.37,
ShipRegion: null,
},

OrderID: 10892,
OrderDate: '1998-02-17T00:00:00.000Z',
ShippedDate: '1998-02-19T00:00:00.000Z',
Freight: 120.27,
ShipRegion: null,
},
{
OrderID: 10893,
OrderDate: '1998-02-18T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 77.78,
ShipRegion: null,
},
{
OrderID: 10894,
OrderDate: '1998-02-18T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 116.13,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10895,
OrderDate: '1998-02-18T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 162.75,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10896,
OrderDate: '1998-02-19T00:00:00.000Z',
ShippedDate: '1998-02-27T00:00:00.000Z',
Freight: 32.45,


ShipRegion: null,
},
{
OrderID: 10897,
OrderDate: '1998-02-19T00:00:00.000Z',
ShippedDate: '1998-02-25T00:00:00.000Z',
Freight: 603.54,
ShipCity: 'Cork',
},
{
OrderID: 10898,
OrderDate: '1998-02-20T00:00:00.000Z',
ShippedDate: '1998-03-06T00:00:00.000Z',
Freight: 1.27,
ShipRegion: null,
},
{
OrderID: 10899,
OrderDate: '1998-02-20T00:00:00.000Z',
ShippedDate: '1998-02-26T00:00:00.000Z',
Freight: 1.21,
ShipRegion: 'Lara',
},
{
OrderID: 10900,
OrderDate: '1998-02-20T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 1.66,
ShipRegion: 'SP',

},
{
OrderID: 10901,
OrderDate: '1998-02-23T00:00:00.000Z',
ShippedDate: '1998-02-26T00:00:00.000Z',
Freight: 62.09,
},
{
OrderID: 10902,
OrderDate: '1998-02-23T00:00:00.000Z',
ShippedDate: '1998-03-03T00:00:00.000Z',
Freight: 44.15,
ShipRegion: null,
},
{
OrderID: 10903,
OrderDate: '1998-02-24T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 36.71,
ShipRegion: 'RJ',
},
{
OrderID: 10904,
OrderDate: '1998-02-24T00:00:00.000Z',
ShippedDate: '1998-02-27T00:00:00.000Z',
Freight: 162.95,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10905,

OrderDate: '1998-02-24T00:00:00.000Z',
ShippedDate: '1998-03-06T00:00:00.000Z',
Freight: 13.72,
ShipRegion: 'SP',
},
{
OrderID: 10906,
OrderDate: '1998-02-25T00:00:00.000Z',
ShippedDate: '1998-03-03T00:00:00.000Z',
Freight: 26.29,
ShipRegion: null,
},
{
OrderID: 10907,
OrderDate: '1998-02-25T00:00:00.000Z',
ShippedDate: '1998-02-27T00:00:00.000Z',
Freight: 9.19,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 10908,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-06T00:00:00.000Z',
Freight: 32.96,
ShipRegion: null,
},
{
OrderID: 10909,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-10T00:00:00.000Z',
Freight: 53.05,

ShipRegion: null,
},
{
OrderID: 10910,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 38.11,
ShipRegion: null,
},
{
OrderID: 10911,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-05T00:00:00.000Z',
Freight: 38.19,
ShipRegion: null,
},
{
OrderID: 10912,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 580.91,
ShipCity: 'Cork',
},
{
OrderID: 10913,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 33.05,
ShipRegion: 'SP',
},

{
OrderID: 10914,
OrderDate: '1998-02-27T00:00:00.000Z',
ShippedDate: '1998-03-02T00:00:00.000Z',
Freight: 21.19,
ShipRegion: 'SP',
},
{
OrderID: 10915,
OrderDate: '1998-02-27T00:00:00.000Z',
ShippedDate: '1998-03-02T00:00:00.000Z',
Freight: 3.51,
ShipRegion: null,
},
{
OrderID: 10916,
OrderDate: '1998-02-27T00:00:00.000Z',
ShippedDate: '1998-03-09T00:00:00.000Z',
Freight: 63.77,
ShipRegion: null,
},
{
OrderID: 10917,
OrderDate: '1998-03-02T00:00:00.000Z',
ShippedDate: '1998-03-11T00:00:00.000Z',
Freight: 8.29,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10918,
OrderDate: '1998-03-02T00:00:00.000Z',
ShippedDate: '1998-03-11T00:00:00.000Z',

Freight: 48.83,
ShipRegion: 'BC',
},
{
OrderID: 10919,
OrderDate: '1998-03-02T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 19.8,
},
{
OrderID: 10920,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-09T00:00:00.000Z',
Freight: 29.61,
ShipCountry: 'UK',
},
{
OrderID: 10921,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-09T00:00:00.000Z',
Freight: 176.48,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10922,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-05T00:00:00.000Z',
Freight: 62.74,
ShipRegion: 'RJ',

},
{
OrderID: 10923,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 68.26,
ShipRegion: null,
},
{
OrderID: 10924,
OrderDate: '1998-03-04T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 151.52,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10925,
OrderDate: '1998-03-04T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 2.27,
ShipRegion: 'RJ',
},
{
OrderID: 10926,
OrderDate: '1998-03-04T00:00:00.000Z',
ShippedDate: '1998-03-11T00:00:00.000Z',
Freight: 39.92,
ShipRegion: null,
},
{
OrderID: 10927,

OrderDate: '1998-03-05T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 19.79,
ShipRegion: null,
},
{
OrderID: 10928,
OrderDate: '1998-03-05T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 1.36,
ShipRegion: null,
},
{
OrderID: 10929,
OrderDate: '1998-03-05T00:00:00.000Z',
ShippedDate: '1998-03-12T00:00:00.000Z',
Freight: 33.93,
ShipRegion: null,
},
{
OrderID: 10930,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 15.55,
ShipRegion: null,
},
{
OrderID: 10931,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 13.6,


ShipRegion: null,
},
{
OrderID: 10932,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-24T00:00:00.000Z',
Freight: 134.64,
ShipRegion: null,
},
{
OrderID: 10933,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-16T00:00:00.000Z',
Freight: 54.15,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10934,
OrderDate: '1998-03-09T00:00:00.000Z',
ShippedDate: '1998-03-12T00:00:00.000Z',
Freight: 32.01,
ShipRegion: null,
},
{
OrderID: 10935,
OrderDate: '1998-03-09T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 47.59,
ShipRegion: 'SP',
},

{
OrderID: 10936,
OrderDate: '1998-03-09T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 33.68,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10937,
OrderDate: '1998-03-10T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 31.51,
ShipRegion: null,
},
{
OrderID: 10938,
OrderDate: '1998-03-10T00:00:00.000Z',
ShippedDate: '1998-03-16T00:00:00.000Z',
Freight: 31.89,
ShipRegion: null,
},
{
OrderID: 10939,
OrderDate: '1998-03-10T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 76.33,
ShipRegion: null,
},
{
OrderID: 10940,
OrderDate: '1998-03-11T00:00:00.000Z',

ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 19.77,
ShipRegion: null,
},
{
OrderID: 10941,
OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 400.81,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10942,
OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 17.95,
ShipRegion: null,
},
{
OrderID: 10943,
OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 2.17,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10944,
OrderDate: '1998-03-12T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 52.92,

ShipRegion: 'BC',
},
{
OrderID: 10945,
OrderDate: '1998-03-12T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 10.22,
ShipRegion: null,
},
{
OrderID: 10946,
OrderDate: '1998-03-12T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 27.2,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10947,
OrderDate: '1998-03-13T00:00:00.000Z',
ShippedDate: '1998-03-16T00:00:00.000Z',
Freight: 3.26,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10948,
OrderDate: '1998-03-13T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 23.39,
ShipRegion: null,
},

OrderID: 10949,
OrderDate: '1998-03-13T00:00:00.000Z',
ShippedDate: '1998-03-17T00:00:00.000Z',
Freight: 74.44,
ShipRegion: 'BC',
},
{
OrderID: 10950,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 2.5,
ShipRegion: null,
},
{
OrderID: 10951,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-04-07T00:00:00.000Z',
Freight: 30.85,
ShipRegion: null,
},
{
OrderID: 10952,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-03-24T00:00:00.000Z',
Freight: 40.42,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10953,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-03-25T00:00:00.000Z',
Freight: 23.72,


ShipCountry: 'UK',
},
{
OrderID: 10954,
OrderDate: '1998-03-17T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 27.91,
},
{
OrderID: 10955,
OrderDate: '1998-03-17T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 3.26,
ShipRegion: null,
},
{
OrderID: 10956,
OrderDate: '1998-03-17T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 44.65,
ShipRegion: null,
},
{
OrderID: 10957,
OrderDate: '1998-03-18T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 105.36,

},
{
OrderID: 10958,
OrderDate: '1998-03-18T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 49.56,
ShipRegion: null,
},
{
OrderID: 10959,
OrderDate: '1998-03-18T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 4.98,
ShipRegion: 'SP',
},
{
OrderID: 10960,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 2.08,
},
{
OrderID: 10961,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-03-30T00:00:00.000Z',
Freight: 104.47,
ShipRegion: 'SP',
},
{
OrderID: 10962,

OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 275.79,
ShipRegion: null,
},
{
OrderID: 10963,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-03-26T00:00:00.000Z',
Freight: 2.7,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10964,
OrderDate: '1998-03-20T00:00:00.000Z',
ShippedDate: '1998-03-24T00:00:00.000Z',
Freight: 87.38,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 10965,
OrderDate: '1998-03-20T00:00:00.000Z',
ShippedDate: '1998-03-30T00:00:00.000Z',
Freight: 144.38,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10966,
OrderDate: '1998-03-20T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 27.19,

ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10967,
OrderDate: '1998-03-23T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 62.22,
ShipRegion: null,
},
{
OrderID: 10968,
OrderDate: '1998-03-23T00:00:00.000Z',
ShippedDate: '1998-04-01T00:00:00.000Z',
Freight: 74.6,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10969,
OrderDate: '1998-03-23T00:00:00.000Z',
ShippedDate: '1998-03-30T00:00:00.000Z',
Freight: 0.21,
ShipRegion: 'SP',
},
{
OrderID: 10970,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 16.16,
ShipCity: 'Madrid',
ShipRegion: null,
},

{
OrderID: 10971,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 121.82,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10972,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-03-26T00:00:00.000Z',
Freight: 0.02,
ShipRegion: null,
},
{
OrderID: 10973,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 15.17,
ShipRegion: null,
},
{
OrderID: 10974,
OrderDate: '1998-03-25T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 12.96,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10975,
OrderDate: '1998-03-25T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',

Freight: 32.27,
ShipRegion: 'BC',
},
{
OrderID: 10976,
OrderDate: '1998-03-25T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 37.97,
},
{
OrderID: 10977,
OrderDate: '1998-03-26T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 208.5,
ShipRegion: null,
},
{
OrderID: 10978,
OrderDate: '1998-03-26T00:00:00.000Z',
ShippedDate: '1998-04-23T00:00:00.000Z',
Freight: 32.82,
ShipRegion: null,
},
{
OrderID: 10979,
OrderDate: '1998-03-26T00:00:00.000Z',
ShippedDate: '1998-03-31T00:00:00.000Z',
Freight: 353.07,
ShipCity: 'Graz',
ShipRegion: null,

},
{
OrderID: 10980,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-17T00:00:00.000Z',
Freight: 1.26,
ShipRegion: null,
},
{
OrderID: 10981,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 193.37,
ShipRegion: 'RJ',
},
{
OrderID: 10982,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 14.01,
ShipRegion: 'BC',
},
{
OrderID: 10983,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-06T00:00:00.000Z',
Freight: 657.54,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10984,

OrderDate: '1998-03-30T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 211.22,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10985,
OrderDate: '1998-03-30T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 91.51,
ShipCity: 'Cork',
},
{
OrderID: 10986,
OrderDate: '1998-03-30T00:00:00.000Z',
ShippedDate: '1998-04-21T00:00:00.000Z',
Freight: 217.86,
ShipRegion: null,
},
{
OrderID: 10987,
OrderDate: '1998-03-31T00:00:00.000Z',
ShippedDate: '1998-04-06T00:00:00.000Z',
Freight: 185.48,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10988,
OrderDate: '1998-03-31T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 61.14,


ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10989,
OrderDate: '1998-03-31T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 34.76,
ShipRegion: 'RJ',
},
{
OrderID: 10990,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-07T00:00:00.000Z',
Freight: 117.61,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10991,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-07T00:00:00.000Z',
Freight: 38.51,
ShipRegion: null,
},
{
OrderID: 10992,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 4.27,
ShipRegion: 'OR',
ShipCountry: 'USA',
},

{
OrderID: 10993,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 8.81,
ShipRegion: null,
},
{
OrderID: 10994,
OrderDate: '1998-04-02T00:00:00.000Z',
ShippedDate: '1998-04-09T00:00:00.000Z',
Freight: 65.53,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10995,
OrderDate: '1998-04-02T00:00:00.000Z',
ShippedDate: '1998-04-06T00:00:00.000Z',
Freight: 46,
ShipRegion: null,
},
{
OrderID: 10996,
OrderDate: '1998-04-02T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 1.12,
ShipRegion: null,
},
{
OrderID: 10997,
OrderDate: '1998-04-03T00:00:00.000Z',

ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 73.91,
ShipRegion: 'Lara',
},
{
OrderID: 10998,
OrderDate: '1998-04-03T00:00:00.000Z',
ShippedDate: '1998-04-17T00:00:00.000Z',
Freight: 20.31,
ShipRegion: null,
},
{
OrderID: 10999,
OrderDate: '1998-04-03T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 96.35,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 11000,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-14T00:00:00.000Z',
Freight: 55.12,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 11001,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-14T00:00:00.000Z',
Freight: 197.3,

ShipRegion: null,
},
{
OrderID: 11002,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-16T00:00:00.000Z',
Freight: 141.16,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11003,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 14.91,
ShipCity: 'Butte',
ShipRegion: 'MT',
ShipCountry: 'USA',
},
{
OrderID: 11004,
OrderDate: '1998-04-07T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 44.84,
ShipRegion: null,
},
{
OrderID: 11005,
OrderDate: '1998-04-07T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 0.75,
ShipRegion: null,
},

OrderID: 11006,
OrderDate: '1998-04-07T00:00:00.000Z',
ShippedDate: '1998-04-15T00:00:00.000Z',
Freight: 25.19,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11007,
OrderDate: '1998-04-08T00:00:00.000Z',
ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 202.24,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 11008,
OrderDate: '1998-04-08T00:00:00.000Z',
ShippedDate: null,
Freight: 79.46,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 11009,
OrderDate: '1998-04-08T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 59.11,
ShipRegion: null,
},
{
OrderID: 11010,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-21T00:00:00.000Z',
Freight: 28.71,


ShipRegion: null,
},
{
OrderID: 11011,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 1.21,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 11012,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-17T00:00:00.000Z',
Freight: 242.95,
ShipRegion: null,
},
{
OrderID: 11013,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 32.99,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 11014,
OrderDate: '1998-04-10T00:00:00.000Z',
ShippedDate: '1998-04-15T00:00:00.000Z',
Freight: 23.6,

},
{
OrderID: 11015,
OrderDate: '1998-04-10T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 4.62,
ShipRegion: null,
},
{
OrderID: 11016,
OrderDate: '1998-04-10T00:00:00.000Z',
ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 33.8,
ShipCountry: 'UK',
},
{
OrderID: 11017,
OrderDate: '1998-04-13T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 754.26,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 11018,
OrderDate: '1998-04-13T00:00:00.000Z',
ShippedDate: '1998-04-16T00:00:00.000Z',
Freight: 11.65,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11019,

OrderDate: '1998-04-13T00:00:00.000Z',
ShippedDate: null,
Freight: 3.17,
ShipRegion: null,
},
{
OrderID: 11020,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-04-16T00:00:00.000Z',
Freight: 43.3,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 11021,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-04-21T00:00:00.000Z',
Freight: 297.18,
ShipRegion: null,
},
{
OrderID: 11022,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 6.27,
ShipRegion: 'RJ',
},
{
OrderID: 11023,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 123.83,

ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11024,
OrderDate: '1998-04-15T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 74.36,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11025,
OrderDate: '1998-04-15T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 29.17,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 11026,
OrderDate: '1998-04-15T00:00:00.000Z',
ShippedDate: '1998-04-28T00:00:00.000Z',
Freight: 47.09,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 11027,
OrderDate: '1998-04-16T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 52.52,
ShipRegion: 'BC',
},

{
OrderID: 11028,
OrderDate: '1998-04-16T00:00:00.000Z',
ShippedDate: '1998-04-22T00:00:00.000Z',
Freight: 29.59,
ShipRegion: null,
},
{
OrderID: 11029,
OrderDate: '1998-04-16T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 47.84,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 11030,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 830.75,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11031,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 227.22,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11032,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-23T00:00:00.000Z',

Freight: 606.19,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 11033,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-23T00:00:00.000Z',
Freight: 84.74,
ShipRegion: null,
},
{
OrderID: 11034,
OrderDate: '1998-04-20T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 40.32,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 11035,
OrderDate: '1998-04-20T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 0.17,
ShipRegion: null,
},
{
OrderID: 11036,
OrderDate: '1998-04-20T00:00:00.000Z',
ShippedDate: '1998-04-22T00:00:00.000Z',
Freight: 149.47,
ShipCity: 'Aachen',
ShipRegion: null,

},
{
OrderID: 11037,
OrderDate: '1998-04-21T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 3.2,
ShipRegion: null,
},
{
OrderID: 11038,
OrderDate: '1998-04-21T00:00:00.000Z',
ShippedDate: '1998-04-30T00:00:00.000Z',
Freight: 29.59,
ShipRegion: null,
},
{
OrderID: 11039,
OrderDate: '1998-04-21T00:00:00.000Z',
ShippedDate: null,
Freight: 65,
},
{
OrderID: 11040,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: null,
Freight: 18.84,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11041,

OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: '1998-04-28T00:00:00.000Z',
Freight: 48.22,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 11042,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 29.99,
ShipRegion: 'SP',
},
{
OrderID: 11043,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: '1998-04-29T00:00:00.000Z',
Freight: 8.8,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 11044,
OrderDate: '1998-04-23T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 8.72,
ShipRegion: null,
},
{
OrderID: 11045,
OrderDate: '1998-04-23T00:00:00.000Z',
ShippedDate: null,
Freight: 70.58,


ShipRegion: 'BC',
},
{
OrderID: 11046,
OrderDate: '1998-04-23T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 71.64,
ShipRegion: null,
},
{
OrderID: 11047,
OrderDate: '1998-04-24T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 46.62,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11048,
OrderDate: '1998-04-24T00:00:00.000Z',
ShippedDate: '1998-04-30T00:00:00.000Z',
Freight: 24.12,
ShipRegion: 'BC',
},
{
OrderID: 11049,
OrderDate: '1998-04-24T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 8.34,
ShipRegion: 'SP',
},

{
OrderID: 11050,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: '1998-05-05T00:00:00.000Z',
Freight: 59.41,
ShipRegion: null,
},
{
OrderID: 11051,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: null,
Freight: 2.79,
ShipRegion: null,
},
{
OrderID: 11052,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 67.26,
ShipRegion: 'RJ',
},
{
OrderID: 11053,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: '1998-04-29T00:00:00.000Z',
Freight: 53.05,
ShipRegion: null,
},
{
OrderID: 11054,
OrderDate: '1998-04-28T00:00:00.000Z',

ShippedDate: null,
Freight: 0.33,
ShipRegion: null,
},
{
OrderID: 11055,
OrderDate: '1998-04-28T00:00:00.000Z',
ShippedDate: '1998-05-05T00:00:00.000Z',
Freight: 120.92,
},
{
OrderID: 11056,
OrderDate: '1998-04-28T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 278.96,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11057,
OrderDate: '1998-04-29T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 4.13,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11058,
OrderDate: '1998-04-29T00:00:00.000Z',
ShippedDate: null,
Freight: 31.14,

ShipRegion: null,
},
{
OrderID: 11059,
OrderDate: '1998-04-29T00:00:00.000Z',
ShippedDate: null,
Freight: 85.8,
ShipRegion: 'RJ',
},
{
OrderID: 11060,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 10.98,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 11061,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: null,
Freight: 14.01,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11062,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: null,
Freight: 29.93,
ShipRegion: null,
},

OrderID: 11063,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: '1998-05-06T00:00:00.000Z',
Freight: 81.73,
ShipCity: 'Cork',
},
{
OrderID: 11064,
OrderDate: '1998-05-01T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 30.09,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11065,
OrderDate: '1998-05-01T00:00:00.000Z',
ShippedDate: null,
Freight: 12.91,
ShipRegion: 'Lara',
},
{
OrderID: 11066,
OrderDate: '1998-05-01T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 44.72,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 11067,
OrderDate: '1998-05-04T00:00:00.000Z',
ShippedDate: '1998-05-06T00:00:00.000Z',
Freight: 7.98,


ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 11068,
OrderDate: '1998-05-04T00:00:00.000Z',
ShippedDate: null,
Freight: 81.75,
ShipRegion: 'SP',
},
{
OrderID: 11069,
OrderDate: '1998-05-04T00:00:00.000Z',
ShippedDate: '1998-05-06T00:00:00.000Z',
Freight: 15.67,
ShipRegion: null,
},
{
OrderID: 11070,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 136,
ShipRegion: null,
},
{
OrderID: 11071,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 0.93,
ShipRegion: 'Lara',

},
{
OrderID: 11072,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 258.64,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 11073,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 24.95,
ShipRegion: null,
},
{
OrderID: 11074,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 18.44,
ShipRegion: null,
},
{
OrderID: 11075,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 6.19,
ShipRegion: null,
},
{
OrderID: 11076,

OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 38.28,
ShipRegion: null,
},
{
OrderID: 11077,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 8.53,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
]);
export const orderData = JSON.parse(

stringData,
(field, value) => {
let dupValue = value;
if (
typeof value === 'string' &&
/^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-
])(\d\d):?(\d\d))?$/.test(
value
)
) {
let arr = dupValue.split(/[^0-9]/);
let arg = parseInt(arr[4], 10);
let arg1 = parseInt(arr[5], 10);
value = new Date(

parseInt(arr[0], 10),
parseInt(arr[1], 10) - 1,
arg,
arg1
);
}
return value;
}
);
export const customerData = [
{
ContactName: 'Maria ',
CompanyName: 'Alfreds Futterkiste',
Address: 'Obere Str. 57',

Country: 'Germany',
},
{
ContactName: 'Ana Trujillo',
CompanyName: 'Ana Trujillo Emparedados y helados',
Address: 'Avda. de la Constitución 2222',
Country: 'Mexico',
},
{
ContactName: 'Antonio Moreno',
CompanyName: 'Antonio Moreno Taquería',
Address: 'Mataderos 2312',
Country: 'Mexico',
},
{
ContactName: 'Thomas Hardy',
CompanyName: 'Around the Horn',
Address: '120 Hanover Sq.',
Country: 'UK',
},
{
ContactName: 'Christina Berglund',
CompanyName: 'Berglunds snabbköp',
Address: 'Berguvsvägen 8',
Country: 'Sweden',
},
{
ContactName: 'Hanna Moos',
CompanyName: 'Blauer See Delikatessen',
Address: 'Forsterstr. 57',
Country: 'Germany',
},
{
ContactName: 'Frédérique Citeaux',
CompanyName: 'Blondesddsl père et fils',
Address: '24, place Kléber',
Country: 'France',
},
{
ContactName: 'Martín Sommer',
CompanyName: 'Bólido Comidas preparadas',
Address: 'C/ Araquil, 67',
Country: 'Spain',

},
{
ContactName: 'Laurence Lebihan',
CompanyName: 'Bon app',
Address: '12, rue des Bouchers',
Country: 'France',
},
{
ContactName: 'Elizabeth Lincoln',
CompanyName: 'Bottom-Dollar Markets',
Address: '23 Tsawassen Blvd.',
Country: 'Canada',
},
{
ContactName: 'Victoria Ashworth',
CompanyName: "B's Beverages",
Address: 'Fauntleroy Circus',
Country: 'UK',
},
{
ContactName: 'Patricio Simpson',
CompanyName: 'Cactus Comidas para llevar',
Address: 'Cerrito 333',
Country: 'Argentina',
},
{
ContactName: 'Francisco Chang',
CompanyName: 'Centro comercial Moctezuma',
Address: 'Sierras de Granada 9993',
Country: 'Mexico',
},
{
ContactName: 'Yang Wang',
CompanyName: 'Chop-suey Chinese',
Address: 'Hauptstr. 29',
Country: 'Switzerland',
},
{
ContactName: 'Pedro Afonso',
CompanyName: 'Comércio Mineiro',
Address: 'Av. dos Lusíadas, 23',
Country: 'Brazil',
},

{
ContactName: 'Elizabeth Brown',
CompanyName: 'Consolidated Holdings',
Address: 'Berkeley Gardens 12 Brewery',
Country: 'UK',
},
{
ContactName: 'Sven Ottlieb',
CompanyName: 'Drachenblut Delikatessen',
Address: 'Walserweg 21',
Country: 'Germany',
},
{
ContactName: 'Janine Labrune',
CompanyName: 'Du monde entier',
Address: '67, rue des Cinquante Otages',
Country: 'France',
},
{
ContactName: 'Ann Devon',
CompanyName: 'Eastern Connection',
Address: '35 King George',
Country: 'UK',
},
{
ContactName: 'Roland Mendel',
CompanyName: 'Ernst Handel',
Address: 'Kirchgasse 6',
Country: 'Austria',
},
{
ContactName: 'Aria Cruz',
CompanyName: 'Familia Arquibaldo',
Address: 'Rua Orós, 92',
Country: 'Brazil',
},
{
CustomerID: 'FISSA',
ContactName: 'Diego Roel',
CompanyName: 'FISSA Fabrica Inter. Salchichas S.A.',
Address: 'C/ Moralzarzal, 86',
Country: 'Spain',
},

{
ContactName: 'Martine Rancé',
CompanyName: 'Folies gourmandes',
Address: '184, chaussée de Tournai',
Country: 'France',
},
{
ContactName: 'Maria Larsson',
CompanyName: 'Folk och fä HB',
Address: 'Åkergatan 24',
Country: 'Sweden',
},
{
ContactName: 'Peter Franken',
CompanyName: 'Frankenversand',
Address: 'Berliner Platz 43',
Country: 'Germany',
},
{
ContactName: 'Carine Schmitt',
CompanyName: 'France restauration',
Address: '54, rue Royale',
Country: 'France',
},
{
ContactName: 'Paolo Accorti',
CompanyName: 'Franchi S.p.A.',
Address: 'Via Monte Bianco 34',
Country: 'Italy',
},
{
ContactName: 'Lino Rodriguez',
CompanyName: 'Furia Bacalhau e Frutos do Mar',
Address: 'Jardim das rosas n. 32',
Country: 'Portugal',
},
{
ContactName: 'Eduardo Saavedra',
CompanyName: 'Galería del gastrónomo',
Address: 'Rambla de Cataluña, 23',
Country: 'Spain',
},

ContactName: 'José Pedro Freyre',
CompanyName: 'Godos Cocina Típica',
Address: 'C/ Romero, 33',
Country: 'Spain',
},
{
ContactName: 'André Fonseca',
CompanyName: 'Gourmet Lanchonetes',
Address: 'Av. Brasil, 442',
Country: 'Brazil',
},
{
ContactName: 'Howard Snyder',
CompanyName: 'Great Lakes Food Market',
Address: '2732 Baker Blvd.',
Country: 'USA',
},
{
ContactName: 'Manuel Pereira',
CompanyName: 'GROSELLA-Restaurante',
Address: '5ª Ave. Los Palos Grandes',
Country: 'Venezuela',
},
{
ContactName: 'Mario Pontes',
CompanyName: 'Hanari Carnes',
Address: 'Rua do Paço, 67',
Country: 'Brazil',
},
{
ContactName: 'Carlos Hernández',
CompanyName: 'HILARION-Abastos',
Address: 'Carrera 22 con Ave. Carlos Soublette #8-35',
},
{
ContactName: 'Yoshi Latimer',
CompanyName: 'Hungry Coyote Import Store',
Address: 'City Center Plaza 516 Main St.',
Country: 'USA',
},
{

ContactName: 'Patricia McKenna',

CompanyName: 'Hungry Owl All-Night Grocers',
Address: '8 Johnstown Road',
Country: 'Ireland',
},
{
ContactName: 'Helen Bennett',
CompanyName: 'Island Trading',
Address: 'Garden House Crowther Way',
Country: 'UK',
},
{
ContactName: 'Philip Cramer',
CompanyName: 'Königlich Essen',
Address: 'Maubelstr. 90',
Country: 'Germany',
},
{
ContactName: 'Daniel Tonini',
CompanyName: "La corne d'abondance",
Address: "67, avenue de l'Europe",
Country: 'France',
},
{
ContactName: 'Annette Roulet',
CompanyName: "La maison d'Asie",
Address: '1 rue Alsace-Lorraine',
Country: 'France',
},
{
ContactName: 'Yoshi Tannamuri',
CompanyName: 'Laughing Bacchus Wine Cellars',
Address: '1900 Oak St.',
Country: 'Canada',
},
{
ContactName: 'John Steel',
CompanyName: 'Lazy K Kountry Store',
Address: '12 Orchestra Terrace',
Country: 'USA',
},
{
ContactName: 'Renate Messner',

CompanyName: 'Lehmanns Marktstand',

Address: 'Magazinweg 7',
Country: 'Germany',
},
{
ContactName: 'Jaime Yorres',
CompanyName: "Let's Stop N Shop",
Address: '87 Polk St. Suite 5',
Country: 'USA',
},
{
ContactName: 'Carlos González',
CompanyName: 'LILA-Supermercado',
Address: 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
},
{
ContactName: 'Felipe Izquierdo',
CompanyName: 'LINO-Delicateses',
Address: 'Ave. 5 de Mayo Porlamar',
},
{
ContactName: 'Fran Wilson',
CompanyName: 'Lonesome Pine Restaurant',
Address: '89 Chiaroscuro Rd.',
Country: 'USA',
},
{
ContactName: 'Giovanni Rovelli',
CompanyName: 'Magazzini Alimentari Riuniti',
Address: 'Via Ludovico il Moro 22',
Country: 'Italy',
},
{
ContactName: 'Catherine Dewey',
CompanyName: 'Maison Dewey',
Address: 'Rue Joseph-Bens 532',
Country: 'Belgium',
},
{
ContactName: 'Jean Fresnière',
CompanyName: 'Mère Paillarde',

Address: '43 rue St. Laurent',

Country: 'Canada',
},
{
ContactName: 'Alexander Feuer',
CompanyName: 'Morgenstern Gesundkost',
Address: 'Heerstr. 22',
Country: 'Germany',
},
{
ContactName: 'Simon Crowther',
CompanyName: 'North/South',
Address: 'South House 300 Queensbridge',
Country: 'UK',
},
{
ContactName: 'Yvonne Moncada',
CompanyName: 'Océano Atlántico Ltda.',
Address: 'Ing. Gustavo Moncada 8585 Piso 20-A',
},
{
ContactName: 'Rene Phillips',
CompanyName: 'Old World Delicatessen',
Address: '2743 Bering St.',
Country: 'USA',
},
{
ContactName: 'Henriette Pfalzheim',
CompanyName: 'Ottilies Käseladen',
Address: 'Mehrheimerstr. 369',
Country: 'Germany',
},
{
CustomerID: 'PARIS',
ContactName: 'Marie Bertrand',
CompanyName: 'Paris spécialités',
Address: '265, boulevard Charonne',
Country: 'France',
},
{
ContactName: 'Guillermo Fernández',
CompanyName: 'Pericles Comidas clásicas',
Address: 'Calle Dr. Jorge Cash 321',

Country: 'Mexico',
},
{
ContactName: 'Georg Pipps',
CompanyName: 'Piccolo und mehr',
Address: 'Geislweg 14',
Country: 'Austria',
},
{
ContactName: 'Isabel de Castro',
CompanyName: 'Princesa Isabel Vinhos',
Address: 'Estrada da saúde n. 58',
Country: 'Portugal',
},
{
ContactName: 'Bernardo Batista',
CompanyName: 'Que Delícia',
Address: 'Rua da Panificadora, 12',
Country: 'Brazil',
},
{
ContactName: 'Lúcia Carvalho',
CompanyName: 'Queen Cozinha',
Address: 'Alameda dos Canàrios, 891',
Country: 'Brazil',
},
{
ContactName: 'Horst Kloss',
CompanyName: 'QUICK-Stop',
Address: 'Taucherstraße 10',
Country: 'Germany',
},
{
ContactName: 'Sergio Gutiérrez',
CompanyName: 'Rancho grande',
Address: 'Av. del Libertador 900',
},
{
ContactName: 'Paula Wilson',
CompanyName: 'Rattlesnake Canyon Grocery',
Address: '2817 Milton Dr.',
Country: 'USA',

},
{
ContactName: 'Maurizio Moroni',
CompanyName: 'Reggiani Caseifici',
Address: 'Strada Provinciale 124',
Country: 'Italy',
},
{
ContactName: 'Janete Limeira',
CompanyName: 'Ricardo Adocicados',
Address: 'Av. Copacabana, 267',
Country: 'Brazil',
},
{
ContactName: 'Michael Holz',
CompanyName: 'Richter Supermarkt',
Address: 'Grenzacherweg 237',
Country: 'Switzerland',
},
{
ContactName: 'Alejandra Camino',
CompanyName: 'Romero y tomillo',
Address: 'Gran Vía, 1',
Country: 'Spain',
},
{
ContactName: 'Jonas Bergulfsen',
CompanyName: 'Santé Gourmet',
Address: 'Erling Skakkes gate 78',
Country: 'Norway',
},
{
ContactName: 'Jose Pavarotti',
CompanyName: 'Save-a-lot Markets',
Address: '187 Suffolk Ln.',
Country: 'USA',
},
{
ContactName: 'Hari Kumar',
CompanyName: 'Seven Seas Imports',
Address: '90 Wadhurst Rd.',
Country: 'UK',
},

{
ContactName: 'Jytte Petersen',
CompanyName: 'Simons bistro',
Address: 'Vinbæltet 34',
Country: 'Denmark',
},
{
ContactName: 'Dominique Perrier',
CompanyName: 'Spécialités du monde',
Address: '25, rue Lauriston',
Country: 'France',
},
{
ContactName: 'Art Braunschweiger',
CompanyName: 'Split Rail Beer & Ale',
Address: 'P.O. Box 555',
Country: 'USA',
},
{
ContactName: 'Pascale Cartrain',
CompanyName: 'Suprêmes délices',
Address: 'Boulevard Tirou, 255',
Country: 'Belgium',
},
{
ContactName: 'Liz Nixon',
CompanyName: 'The Big Cheese',
Address: '89 Jefferson Way Suite 2',
Country: 'USA',
},
{
ContactName: 'Liu Wong',
CompanyName: 'The Cracker Box',
Address: '55 Grizzly Peak Rd.',
Country: 'USA',
},
{
ContactName: 'Karin Josephs',
CompanyName: 'Toms Spezialitäten',
Address: 'Luisenstr. 48',
Country: 'Germany',
},

{
ContactName: 'Miguel Angel Paolino',
CompanyName: 'Tortuga Restaurante',
Address: 'Avda. Azteca 123',
Country: 'Mexico',
},
{
ContactName: 'Anabela Domingues',
CompanyName: 'Tradição Hipermercados',
Address: 'Av. Inês de Castro, 414',
Country: 'Brazil',
},
{
ContactName: 'Helvetius Nagy',
CompanyName: "Trail's Head Gourmet Provisioners",
Address: '722 DaVinci Blvd.',
Country: 'USA',
},
{
ContactName: 'Palle Ibsen',
CompanyName: 'Vaffeljernet',
Address: 'Smagsloget 45',
Country: 'Denmark',
},
{
ContactName: 'Mary Saveley',
CompanyName: 'Victuailles en stock',
Address: '2, rue du Commerce',
Country: 'France',
},
{
ContactName: 'Paul Henriot',
CompanyName: 'Vins et alcools Chevalier',
Address: "59 rue de l'Abbaye",
Country: 'France',
},
{
ContactName: 'Rita Müller',
CompanyName: 'Die Wandernde Kuh',
Address: 'Adenauerallee 900',
Country: 'Germany',
},

ContactName: 'Pirkko Koskitalo',
CompanyName: 'Wartian Herkku',
Address: 'Torikatu 38',
Country: 'Finland',
},
{
ContactName: 'Paula Parente',
CompanyName: 'Wellington Importadora',
Address: 'Rua do Mercado, 12',
Country: 'Brazil',
},
{
ContactName: 'Karl Jablonski',
CompanyName: 'White Clover Markets',
Address: '305 - 14th Ave. S. Suite 3B',
Country: 'USA',
},
{
ContactName: 'Matti Karttunen',
CompanyName: 'Wilman Kala',
Address: 'Keskuskatu 45',
Country: 'Finland',
},
{
ContactName: 'Zbyszek Piestrzeniewicz',
CompanyName: 'Wolski Zajazd',
Address: 'ul. Filtrowa 68',
Country: 'Poland',
},
];
export const data = orderData.map((item) => {

let name = (customerData).filter((cItem) => {
return cItem.CustomerID === item.CustomerID;
})[0];
item.CustomerName = (name || {}).ContactName;
return item;
});
DATASOURCE.TSX
let stringData: string = JSON.stringify([
{
OrderID: 10248,
OrderDate: '1996-07-04T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',

Freight: 32.38,
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10249,
OrderDate: '1996-07-05T00:00:00.000Z',
ShippedDate: '1996-07-10T00:00:00.000Z',
Freight: 11.61,
ShipRegion: null,
},
{
OrderID: 10250,
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-12T00:00:00.000Z',
Freight: 65.83,
ShipRegion: 'RJ',
},
{
OrderID: 10251,
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 41.34,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10252,
OrderDate: '1996-07-09T00:00:00.000Z',
ShippedDate: '1996-07-11T00:00:00.000Z',
Freight: 51.3,
ShipRegion: null,

},
{
OrderID: 10253,
OrderDate: '1996-07-10T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 58.17,
ShipRegion: 'RJ',
},
{
OrderID: 10254,
OrderDate: '1996-07-11T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 22.98,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10255,
OrderDate: '1996-07-12T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 148.33,
ShipRegion: null,
},
{
OrderID: 10256,
OrderDate: '1996-07-15T00:00:00.000Z',
ShippedDate: '1996-07-17T00:00:00.000Z',
Freight: 13.97,
ShipRegion: 'SP',
},
{
OrderID: 10257,

OrderDate: '1996-07-16T00:00:00.000Z',
ShippedDate: '1996-07-22T00:00:00.000Z',
Freight: 81.91,
},
{
OrderID: 10258,
OrderDate: '1996-07-17T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 140.51,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10259,
OrderDate: '1996-07-18T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 3.25,
ShipRegion: null,
},
{
OrderID: 10260,
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-29T00:00:00.000Z',
Freight: 55.09,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10261,
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-30T00:00:00.000Z',
Freight: 3.05,


ShipRegion: 'RJ',
},
{
OrderID: 10262,
OrderDate: '1996-07-22T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 48.29,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10263,
OrderDate: '1996-07-23T00:00:00.000Z',
ShippedDate: '1996-07-31T00:00:00.000Z',
Freight: 146.06,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10264,
OrderDate: '1996-07-24T00:00:00.000Z',
ShippedDate: '1996-08-23T00:00:00.000Z',
Freight: 3.67,
ShipRegion: null,
},
{
OrderID: 10265,
OrderDate: '1996-07-25T00:00:00.000Z',
ShippedDate: '1996-08-12T00:00:00.000Z',
Freight: 55.28,
ShipRegion: null,
},

{
OrderID: 10266,
OrderDate: '1996-07-26T00:00:00.000Z',
ShippedDate: '1996-07-31T00:00:00.000Z',
Freight: 25.73,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10267,
OrderDate: '1996-07-29T00:00:00.000Z',
ShippedDate: '1996-08-06T00:00:00.000Z',
Freight: 208.58,
ShipRegion: null,
},
{
OrderID: 10268,
OrderDate: '1996-07-30T00:00:00.000Z',
ShippedDate: '1996-08-02T00:00:00.000Z',
Freight: 66.29,
ShipRegion: 'DF',
},
{
OrderID: 10269,
OrderDate: '1996-07-31T00:00:00.000Z',
ShippedDate: '1996-08-09T00:00:00.000Z',
Freight: 4.56,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10270,
OrderDate: '1996-08-01T00:00:00.000Z',

ShippedDate: '1996-08-02T00:00:00.000Z',
Freight: 136.54,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10271,
OrderDate: '1996-08-01T00:00:00.000Z',
ShippedDate: '1996-08-30T00:00:00.000Z',
Freight: 4.54,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10272,
OrderDate: '1996-08-02T00:00:00.000Z',
ShippedDate: '1996-08-06T00:00:00.000Z',
Freight: 98.03,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10273,
OrderDate: '1996-08-05T00:00:00.000Z',
ShippedDate: '1996-08-12T00:00:00.000Z',
Freight: 76.07,
ShipRegion: null,
},
{
OrderID: 10274,
OrderDate: '1996-08-06T00:00:00.000Z',
ShippedDate: '1996-08-16T00:00:00.000Z',
Freight: 6.01,
ShipCity: 'Reims',

ShipRegion: null,
},
{
OrderID: 10275,
OrderDate: '1996-08-07T00:00:00.000Z',
ShippedDate: '1996-08-09T00:00:00.000Z',
Freight: 26.93,
ShipRegion: null,
},
{
OrderID: 10276,
OrderDate: '1996-08-08T00:00:00.000Z',
ShippedDate: '1996-08-14T00:00:00.000Z',
Freight: 13.84,
ShipRegion: null,
},
{
OrderID: 10277,
OrderDate: '1996-08-09T00:00:00.000Z',
ShippedDate: '1996-08-13T00:00:00.000Z',
Freight: 125.77,
ShipRegion: null,
},
{
OrderID: 10278,
OrderDate: '1996-08-12T00:00:00.000Z',
ShippedDate: '1996-08-16T00:00:00.000Z',
Freight: 92.69,
ShipCity: 'Luleå',
ShipRegion: null,
},

OrderID: 10279,
OrderDate: '1996-08-13T00:00:00.000Z',
ShippedDate: '1996-08-16T00:00:00.000Z',
Freight: 25.83,
ShipRegion: null,
},
{
OrderID: 10280,
OrderDate: '1996-08-14T00:00:00.000Z',
ShippedDate: '1996-09-12T00:00:00.000Z',
Freight: 8.98,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10281,
OrderDate: '1996-08-14T00:00:00.000Z',
ShippedDate: '1996-08-21T00:00:00.000Z',
Freight: 2.94,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10282,
OrderDate: '1996-08-15T00:00:00.000Z',
ShippedDate: '1996-08-21T00:00:00.000Z',
Freight: 12.69,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10283,
OrderDate: '1996-08-16T00:00:00.000Z',
ShippedDate: '1996-08-23T00:00:00.000Z',
Freight: 84.81,

ShipRegion: 'Lara',
},
{
OrderID: 10284,
OrderDate: '1996-08-19T00:00:00.000Z',
ShippedDate: '1996-08-27T00:00:00.000Z',
Freight: 76.56,
ShipRegion: null,
},
{
OrderID: 10285,
OrderDate: '1996-08-20T00:00:00.000Z',
ShippedDate: '1996-08-26T00:00:00.000Z',
Freight: 76.83,
ShipRegion: null,
},
{
OrderID: 10286,
OrderDate: '1996-08-21T00:00:00.000Z',
ShippedDate: '1996-08-30T00:00:00.000Z',
Freight: 229.24,
ShipRegion: null,
},
{
OrderID: 10287,
OrderDate: '1996-08-22T00:00:00.000Z',
ShippedDate: '1996-08-28T00:00:00.000Z',
Freight: 12.76,
ShipRegion: 'RJ',

},
{
OrderID: 10288,
OrderDate: '1996-08-23T00:00:00.000Z',
ShippedDate: '1996-09-03T00:00:00.000Z',
Freight: 7.45,
ShipRegion: null,
},
{
OrderID: 10289,
OrderDate: '1996-08-26T00:00:00.000Z',
ShippedDate: '1996-08-28T00:00:00.000Z',
Freight: 22.77,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10290,
OrderDate: '1996-08-27T00:00:00.000Z',
ShippedDate: '1996-09-03T00:00:00.000Z',
Freight: 79.7,
ShipRegion: 'SP',
},
{
OrderID: 10291,
OrderDate: '1996-08-27T00:00:00.000Z',
ShippedDate: '1996-09-04T00:00:00.000Z',
Freight: 6.4,
ShipRegion: 'RJ',
},
{
OrderID: 10292,

OrderDate: '1996-08-28T00:00:00.000Z',
ShippedDate: '1996-09-02T00:00:00.000Z',
Freight: 1.35,
ShipRegion: 'SP',
},
{
OrderID: 10293,
OrderDate: '1996-08-29T00:00:00.000Z',
ShippedDate: '1996-09-11T00:00:00.000Z',
Freight: 21.18,
ShipRegion: null,
},
{
OrderID: 10294,
OrderDate: '1996-08-30T00:00:00.000Z',
ShippedDate: '1996-09-05T00:00:00.000Z',
Freight: 147.26,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10295,
OrderDate: '1996-09-02T00:00:00.000Z',
ShippedDate: '1996-09-10T00:00:00.000Z',
Freight: 1.15,
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10296,
OrderDate: '1996-09-03T00:00:00.000Z',
ShippedDate: '1996-09-11T00:00:00.000Z',
Freight: 0.12,

ShipRegion: 'Lara',
},
{
OrderID: 10297,
OrderDate: '1996-09-04T00:00:00.000Z',
ShippedDate: '1996-09-10T00:00:00.000Z',
Freight: 5.74,
ShipRegion: null,
},
{
OrderID: 10298,
OrderDate: '1996-09-05T00:00:00.000Z',
ShippedDate: '1996-09-11T00:00:00.000Z',
Freight: 168.22,
ShipCity: 'Cork',
},
{
OrderID: 10299,
OrderDate: '1996-09-06T00:00:00.000Z',
ShippedDate: '1996-09-13T00:00:00.000Z',
Freight: 29.76,
ShipRegion: 'RJ',
},
{
OrderID: 10300,
OrderDate: '1996-09-09T00:00:00.000Z',
ShippedDate: '1996-09-18T00:00:00.000Z',
Freight: 17.68,
ShipRegion: null,
},

{
OrderID: 10301,
OrderDate: '1996-09-09T00:00:00.000Z',
ShippedDate: '1996-09-17T00:00:00.000Z',
Freight: 45.08,
ShipRegion: null,
},
{
OrderID: 10302,
OrderDate: '1996-09-10T00:00:00.000Z',
ShippedDate: '1996-10-09T00:00:00.000Z',
Freight: 6.27,
ShipRegion: null,
},
{
OrderID: 10303,
OrderDate: '1996-09-11T00:00:00.000Z',
ShippedDate: '1996-09-18T00:00:00.000Z',
Freight: 107.83,
ShipRegion: null,
},
{
OrderID: 10304,
OrderDate: '1996-09-12T00:00:00.000Z',
ShippedDate: '1996-09-17T00:00:00.000Z',
Freight: 63.79,
ShipRegion: null,
},
{
OrderID: 10305,
OrderDate: '1996-09-13T00:00:00.000Z',
ShippedDate: '1996-10-09T00:00:00.000Z',

Freight: 257.62,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10306,
OrderDate: '1996-09-16T00:00:00.000Z',
ShippedDate: '1996-09-23T00:00:00.000Z',
Freight: 7.56,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10307,
OrderDate: '1996-09-17T00:00:00.000Z',
ShippedDate: '1996-09-25T00:00:00.000Z',
Freight: 0.56,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10308,
OrderDate: '1996-09-18T00:00:00.000Z',
ShippedDate: '1996-09-24T00:00:00.000Z',
Freight: 1.61,
ShipRegion: null,
},
{
OrderID: 10309,
OrderDate: '1996-09-19T00:00:00.000Z',
ShippedDate: '1996-10-23T00:00:00.000Z',
Freight: 47.3,
ShipCity: 'Cork',

},
{
OrderID: 10310,
OrderDate: '1996-09-20T00:00:00.000Z',
ShippedDate: '1996-09-27T00:00:00.000Z',
Freight: 17.52,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10311,
OrderDate: '1996-09-20T00:00:00.000Z',
ShippedDate: '1996-09-26T00:00:00.000Z',
Freight: 24.69,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10312,
OrderDate: '1996-09-23T00:00:00.000Z',
ShippedDate: '1996-10-03T00:00:00.000Z',
Freight: 40.26,
ShipRegion: null,
},
{
OrderID: 10313,
OrderDate: '1996-09-24T00:00:00.000Z',
ShippedDate: '1996-10-04T00:00:00.000Z',
Freight: 1.96,
ShipRegion: null,
},
{
OrderID: 10314,

OrderDate: '1996-09-25T00:00:00.000Z',
ShippedDate: '1996-10-04T00:00:00.000Z',
Freight: 74.16,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10315,
OrderDate: '1996-09-26T00:00:00.000Z',
ShippedDate: '1996-10-03T00:00:00.000Z',
Freight: 41.76,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10316,
OrderDate: '1996-09-27T00:00:00.000Z',
ShippedDate: '1996-10-08T00:00:00.000Z',
Freight: 150.15,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10317,
OrderDate: '1996-09-30T00:00:00.000Z',
ShippedDate: '1996-10-10T00:00:00.000Z',
Freight: 12.69,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10318,
OrderDate: '1996-10-01T00:00:00.000Z',
ShippedDate: '1996-10-04T00:00:00.000Z',
Freight: 4.73,


ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10319,
OrderDate: '1996-10-02T00:00:00.000Z',
ShippedDate: '1996-10-11T00:00:00.000Z',
Freight: 64.5,
ShipRegion: null,
},
{
OrderID: 10320,
OrderDate: '1996-10-03T00:00:00.000Z',
ShippedDate: '1996-10-18T00:00:00.000Z',
Freight: 34.57,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10321,
OrderDate: '1996-10-03T00:00:00.000Z',
ShippedDate: '1996-10-11T00:00:00.000Z',
Freight: 3.43,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10322,
OrderDate: '1996-10-04T00:00:00.000Z',
ShippedDate: '1996-10-23T00:00:00.000Z',
Freight: 0.4,
ShipRegion: null,
},

{
OrderID: 10323,
OrderDate: '1996-10-07T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 4.88,
ShipRegion: null,
},
{
OrderID: 10324,
OrderDate: '1996-10-08T00:00:00.000Z',
ShippedDate: '1996-10-10T00:00:00.000Z',
Freight: 214.27,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10325,
OrderDate: '1996-10-09T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 64.86,
ShipRegion: null,
},
{
OrderID: 10326,
OrderDate: '1996-10-10T00:00:00.000Z',
ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 77.92,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10327,
OrderDate: '1996-10-11T00:00:00.000Z',

ShippedDate: '1996-10-14T00:00:00.000Z',
Freight: 63.36,
ShipRegion: null,
},
{
OrderID: 10328,
OrderDate: '1996-10-14T00:00:00.000Z',
ShippedDate: '1996-10-17T00:00:00.000Z',
Freight: 87.03,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10329,
OrderDate: '1996-10-15T00:00:00.000Z',
ShippedDate: '1996-10-23T00:00:00.000Z',
Freight: 191.67,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10330,
OrderDate: '1996-10-16T00:00:00.000Z',
ShippedDate: '1996-10-28T00:00:00.000Z',
Freight: 12.75,
ShipRegion: 'Lara',
},
{
OrderID: 10331,
OrderDate: '1996-10-16T00:00:00.000Z',
ShippedDate: '1996-10-21T00:00:00.000Z',
Freight: 10.19,

ShipRegion: null,
},
{
OrderID: 10332,
OrderDate: '1996-10-17T00:00:00.000Z',
ShippedDate: '1996-10-21T00:00:00.000Z',
Freight: 52.84,
},
{
OrderID: 10333,
OrderDate: '1996-10-18T00:00:00.000Z',
ShippedDate: '1996-10-25T00:00:00.000Z',
Freight: 0.59,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10334,
OrderDate: '1996-10-21T00:00:00.000Z',
ShippedDate: '1996-10-28T00:00:00.000Z',
Freight: 8.56,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10335,
OrderDate: '1996-10-22T00:00:00.000Z',
ShippedDate: '1996-10-24T00:00:00.000Z',
Freight: 42.11,
ShipCity: 'Cork',
},

OrderID: 10336,
OrderDate: '1996-10-23T00:00:00.000Z',
ShippedDate: '1996-10-25T00:00:00.000Z',
Freight: 15.51,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10337,
OrderDate: '1996-10-24T00:00:00.000Z',
ShippedDate: '1996-10-29T00:00:00.000Z',
Freight: 108.26,
ShipRegion: null,
},
{
OrderID: 10338,
OrderDate: '1996-10-25T00:00:00.000Z',
ShippedDate: '1996-10-29T00:00:00.000Z',
Freight: 84.21,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10339,
OrderDate: '1996-10-28T00:00:00.000Z',
ShippedDate: '1996-11-04T00:00:00.000Z',
Freight: 15.66,
},
{
OrderID: 10340,
OrderDate: '1996-10-29T00:00:00.000Z',
ShippedDate: '1996-11-08T00:00:00.000Z',
Freight: 166.31,


ShipRegion: null,
},
{
OrderID: 10341,
OrderDate: '1996-10-29T00:00:00.000Z',
ShippedDate: '1996-11-05T00:00:00.000Z',
Freight: 26.78,
ShipRegion: null,
},
{
OrderID: 10342,
OrderDate: '1996-10-30T00:00:00.000Z',
ShippedDate: '1996-11-04T00:00:00.000Z',
Freight: 54.83,
ShipRegion: null,
},
{
OrderID: 10343,
OrderDate: '1996-10-31T00:00:00.000Z',
ShippedDate: '1996-11-06T00:00:00.000Z',
Freight: 110.37,
ShipRegion: null,
},
{
OrderID: 10344,
OrderDate: '1996-11-01T00:00:00.000Z',
ShippedDate: '1996-11-05T00:00:00.000Z',
Freight: 23.29,
ShipRegion: 'WA',
ShipCountry: 'USA',

},
{
OrderID: 10345,
OrderDate: '1996-11-04T00:00:00.000Z',
ShippedDate: '1996-11-11T00:00:00.000Z',
Freight: 249.06,
ShipRegion: null,
},
{
OrderID: 10346,
OrderDate: '1996-11-05T00:00:00.000Z',
ShippedDate: '1996-11-08T00:00:00.000Z',
Freight: 142.08,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10347,
OrderDate: '1996-11-06T00:00:00.000Z',
ShippedDate: '1996-11-08T00:00:00.000Z',
Freight: 3.1,
ShipRegion: 'SP',
},
{
OrderID: 10348,
OrderDate: '1996-11-07T00:00:00.000Z',
ShippedDate: '1996-11-15T00:00:00.000Z',
Freight: 0.78,
ShipRegion: null,
},
{
OrderID: 10349,

OrderDate: '1996-11-08T00:00:00.000Z',
ShippedDate: '1996-11-15T00:00:00.000Z',
Freight: 8.63,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10350,
OrderDate: '1996-11-11T00:00:00.000Z',
ShippedDate: '1996-12-03T00:00:00.000Z',
Freight: 64.19,
ShipRegion: null,
},
{
OrderID: 10351,
OrderDate: '1996-11-11T00:00:00.000Z',
ShippedDate: '1996-11-20T00:00:00.000Z',
Freight: 162.33,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10352,
OrderDate: '1996-11-12T00:00:00.000Z',
ShippedDate: '1996-11-18T00:00:00.000Z',
Freight: 1.3,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10353,
OrderDate: '1996-11-13T00:00:00.000Z',
ShippedDate: '1996-11-25T00:00:00.000Z',
Freight: 360.63,

ShipRegion: null,
},
{
OrderID: 10354,
OrderDate: '1996-11-14T00:00:00.000Z',
ShippedDate: '1996-11-20T00:00:00.000Z',
Freight: 53.8,
ShipRegion: null,
},
{
OrderID: 10355,
OrderDate: '1996-11-15T00:00:00.000Z',
ShippedDate: '1996-11-20T00:00:00.000Z',
Freight: 41.95,
ShipCountry: 'UK',
},
{
OrderID: 10356,
OrderDate: '1996-11-18T00:00:00.000Z',
ShippedDate: '1996-11-27T00:00:00.000Z',
Freight: 36.71,
ShipRegion: null,
},
{
OrderID: 10357,
OrderDate: '1996-11-19T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 34.88,
ShipRegion: 'Lara',
},

{
OrderID: 10358,
OrderDate: '1996-11-20T00:00:00.000Z',
ShippedDate: '1996-11-27T00:00:00.000Z',
Freight: 19.64,
ShipRegion: null,
},
{
OrderID: 10359,
OrderDate: '1996-11-21T00:00:00.000Z',
ShippedDate: '1996-11-26T00:00:00.000Z',
Freight: 288.43,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10360,
OrderDate: '1996-11-22T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 131.7,
ShipRegion: null,
},
{
OrderID: 10361,
OrderDate: '1996-11-22T00:00:00.000Z',
ShippedDate: '1996-12-03T00:00:00.000Z',
Freight: 183.17,
ShipRegion: null,
},
{
OrderID: 10362,
OrderDate: '1996-11-25T00:00:00.000Z',
ShippedDate: '1996-11-28T00:00:00.000Z',

Freight: 96.04,
ShipRegion: null,
},
{
OrderID: 10363,
OrderDate: '1996-11-26T00:00:00.000Z',
ShippedDate: '1996-12-04T00:00:00.000Z',
Freight: 30.54,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10364,
OrderDate: '1996-11-26T00:00:00.000Z',
ShippedDate: '1996-12-04T00:00:00.000Z',
Freight: 71.97,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10365,
OrderDate: '1996-11-27T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 22,
ShipRegion: null,
},
{
OrderID: 10366,
OrderDate: '1996-11-28T00:00:00.000Z',
ShippedDate: '1996-12-30T00:00:00.000Z',
Freight: 10.14,
ShipRegion: null,

},
{
OrderID: 10367,
OrderDate: '1996-11-28T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 13.55,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10368,
OrderDate: '1996-11-29T00:00:00.000Z',
ShippedDate: '1996-12-02T00:00:00.000Z',
Freight: 101.95,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10369,
OrderDate: '1996-12-02T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 195.68,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10370,
OrderDate: '1996-12-03T00:00:00.000Z',
ShippedDate: '1996-12-27T00:00:00.000Z',
Freight: 1.17,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10371,

OrderDate: '1996-12-03T00:00:00.000Z',
ShippedDate: '1996-12-24T00:00:00.000Z',
Freight: 0.45,
ShipRegion: null,
},
{
OrderID: 10372,
OrderDate: '1996-12-04T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 890.78,
ShipRegion: 'SP',
},
{
OrderID: 10373,
OrderDate: '1996-12-05T00:00:00.000Z',
ShippedDate: '1996-12-11T00:00:00.000Z',
Freight: 124.12,
ShipCity: 'Cork',
},
{
OrderID: 10374,
OrderDate: '1996-12-05T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 3.94,
ShipRegion: null,
},
{
OrderID: 10375,
OrderDate: '1996-12-06T00:00:00.000Z',
ShippedDate: '1996-12-09T00:00:00.000Z',
Freight: 20.12,


ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10376,
OrderDate: '1996-12-09T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 20.39,
},
{
OrderID: 10377,
OrderDate: '1996-12-09T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 22.21,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10378,
OrderDate: '1996-12-10T00:00:00.000Z',
ShippedDate: '1996-12-19T00:00:00.000Z',
Freight: 5.44,
ShipRegion: null,
},
{
OrderID: 10379,
OrderDate: '1996-12-11T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 45.03,
ShipRegion: 'RJ',
},

{
OrderID: 10380,
OrderDate: '1996-12-12T00:00:00.000Z',
ShippedDate: '1997-01-16T00:00:00.000Z',
Freight: 35.03,
ShipCity: 'Cork',
},
{
OrderID: 10381,
OrderDate: '1996-12-12T00:00:00.000Z',
ShippedDate: '1996-12-13T00:00:00.000Z',
Freight: 7.99,
ShipRegion: 'Lara',
},
{
OrderID: 10382,
OrderDate: '1996-12-13T00:00:00.000Z',
ShippedDate: '1996-12-16T00:00:00.000Z',
Freight: 94.77,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10383,
OrderDate: '1996-12-16T00:00:00.000Z',
ShippedDate: '1996-12-18T00:00:00.000Z',
Freight: 34.24,
ShipCountry: 'UK',
},
{
OrderID: 10384,
OrderDate: '1996-12-16T00:00:00.000Z',

ShippedDate: '1996-12-20T00:00:00.000Z',
Freight: 168.64,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10385,
OrderDate: '1996-12-17T00:00:00.000Z',
ShippedDate: '1996-12-23T00:00:00.000Z',
Freight: 30.96,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10386,
OrderDate: '1996-12-18T00:00:00.000Z',
ShippedDate: '1996-12-25T00:00:00.000Z',
Freight: 13.99,
ShipRegion: 'SP',
},
{
OrderID: 10387,
OrderDate: '1996-12-18T00:00:00.000Z',
ShippedDate: '1996-12-20T00:00:00.000Z',
Freight: 93.63,
ShipRegion: null,
},
{
OrderID: 10388,
OrderDate: '1996-12-19T00:00:00.000Z',
ShippedDate: '1996-12-20T00:00:00.000Z',
Freight: 34.86,
ShipCity: 'London',

ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10389,
OrderDate: '1996-12-20T00:00:00.000Z',
ShippedDate: '1996-12-24T00:00:00.000Z',
Freight: 47.42,
ShipRegion: 'BC',
},
{
OrderID: 10390,
OrderDate: '1996-12-23T00:00:00.000Z',
ShippedDate: '1996-12-26T00:00:00.000Z',
Freight: 126.38,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10391,
OrderDate: '1996-12-23T00:00:00.000Z',
ShippedDate: '1996-12-31T00:00:00.000Z',
Freight: 5.45,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10392,
OrderDate: '1996-12-24T00:00:00.000Z',
ShippedDate: '1997-01-01T00:00:00.000Z',
Freight: 122.46,
ShipRegion: null,
},

OrderID: 10393,
OrderDate: '1996-12-25T00:00:00.000Z',
ShippedDate: '1997-01-03T00:00:00.000Z',
Freight: 126.56,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10394,
OrderDate: '1996-12-25T00:00:00.000Z',
ShippedDate: '1997-01-03T00:00:00.000Z',
Freight: 30.34,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10395,
OrderDate: '1996-12-26T00:00:00.000Z',
ShippedDate: '1997-01-03T00:00:00.000Z',
Freight: 184.41,
},
{
OrderID: 10396,
OrderDate: '1996-12-27T00:00:00.000Z',
ShippedDate: '1997-01-06T00:00:00.000Z',
Freight: 135.35,
ShipRegion: null,
},
{
OrderID: 10397,
OrderDate: '1996-12-27T00:00:00.000Z',
ShippedDate: '1997-01-02T00:00:00.000Z',
Freight: 60.26,


ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10398,
OrderDate: '1996-12-30T00:00:00.000Z',
ShippedDate: '1997-01-09T00:00:00.000Z',
Freight: 89.16,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10399,
OrderDate: '1996-12-31T00:00:00.000Z',
ShippedDate: '1997-01-08T00:00:00.000Z',
Freight: 27.36,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10400,
OrderDate: '1997-01-01T00:00:00.000Z',
ShippedDate: '1997-01-16T00:00:00.000Z',
Freight: 83.93,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10401,
OrderDate: '1997-01-01T00:00:00.000Z',
ShippedDate: '1997-01-10T00:00:00.000Z',
Freight: 12.51,
ShipRegion: 'NM',
ShipCountry: 'USA',

},
{
OrderID: 10402,
OrderDate: '1997-01-02T00:00:00.000Z',
ShippedDate: '1997-01-10T00:00:00.000Z',
Freight: 67.88,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10403,
OrderDate: '1997-01-03T00:00:00.000Z',
ShippedDate: '1997-01-09T00:00:00.000Z',
Freight: 73.79,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10404,
OrderDate: '1997-01-03T00:00:00.000Z',
ShippedDate: '1997-01-08T00:00:00.000Z',
Freight: 155.97,
ShipRegion: null,
},
{
OrderID: 10405,
OrderDate: '1997-01-06T00:00:00.000Z',
ShippedDate: '1997-01-22T00:00:00.000Z',
Freight: 34.82,
},
{
OrderID: 10406,

OrderDate: '1997-01-07T00:00:00.000Z',
ShippedDate: '1997-01-13T00:00:00.000Z',
Freight: 108.04,
ShipRegion: 'SP',
},
{
OrderID: 10407,
OrderDate: '1997-01-07T00:00:00.000Z',
ShippedDate: '1997-01-30T00:00:00.000Z',
Freight: 91.48,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10408,
OrderDate: '1997-01-08T00:00:00.000Z',
ShippedDate: '1997-01-14T00:00:00.000Z',
Freight: 11.26,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10409,
OrderDate: '1997-01-09T00:00:00.000Z',
ShippedDate: '1997-01-14T00:00:00.000Z',
Freight: 29.83,
ShipRegion: null,
},
{
OrderID: 10410,
OrderDate: '1997-01-10T00:00:00.000Z',
ShippedDate: '1997-01-15T00:00:00.000Z',
Freight: 2.4,

ShipRegion: 'BC',
},
{
OrderID: 10411,
OrderDate: '1997-01-10T00:00:00.000Z',
ShippedDate: '1997-01-21T00:00:00.000Z',
Freight: 23.65,
ShipRegion: 'BC',
},
{
OrderID: 10412,
OrderDate: '1997-01-13T00:00:00.000Z',
ShippedDate: '1997-01-15T00:00:00.000Z',
Freight: 3.77,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10413,
OrderDate: '1997-01-14T00:00:00.000Z',
ShippedDate: '1997-01-16T00:00:00.000Z',
Freight: 95.66,
ShipRegion: null,
},
{
OrderID: 10414,
OrderDate: '1997-01-14T00:00:00.000Z',
ShippedDate: '1997-01-17T00:00:00.000Z',
Freight: 21.48,
ShipRegion: 'SP',
},

{
OrderID: 10415,
OrderDate: '1997-01-15T00:00:00.000Z',
ShippedDate: '1997-01-24T00:00:00.000Z',
Freight: 0.2,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10416,
OrderDate: '1997-01-16T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 22.72,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10417,
OrderDate: '1997-01-16T00:00:00.000Z',
ShippedDate: '1997-01-28T00:00:00.000Z',
Freight: 70.29,
ShipRegion: null,
},
{
OrderID: 10418,
OrderDate: '1997-01-17T00:00:00.000Z',
ShippedDate: '1997-01-24T00:00:00.000Z',
Freight: 17.55,
ShipRegion: null,
},
{
OrderID: 10419,
OrderDate: '1997-01-20T00:00:00.000Z',
ShippedDate: '1997-01-30T00:00:00.000Z',

Freight: 137.35,
ShipRegion: null,
},
{
OrderID: 10420,
OrderDate: '1997-01-21T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 44.12,
ShipRegion: 'SP',
},
{
OrderID: 10421,
OrderDate: '1997-01-21T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 99.23,
ShipRegion: 'RJ',
},
{
OrderID: 10422,
OrderDate: '1997-01-22T00:00:00.000Z',
ShippedDate: '1997-01-31T00:00:00.000Z',
Freight: 3.02,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10423,
OrderDate: '1997-01-23T00:00:00.000Z',
ShippedDate: '1997-02-24T00:00:00.000Z',
Freight: 24.5,
ShipRegion: 'SP',

},
{
OrderID: 10424,
OrderDate: '1997-01-23T00:00:00.000Z',
ShippedDate: '1997-01-27T00:00:00.000Z',
Freight: 370.61,
},
{
OrderID: 10425,
OrderDate: '1997-01-24T00:00:00.000Z',
ShippedDate: '1997-02-14T00:00:00.000Z',
Freight: 7.93,
ShipRegion: null,
},
{
OrderID: 10426,
OrderDate: '1997-01-27T00:00:00.000Z',
ShippedDate: '1997-02-06T00:00:00.000Z',
Freight: 18.69,
ShipRegion: null,
},
{
OrderID: 10427,
OrderDate: '1997-01-27T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 31.29,
ShipRegion: null,
},
{
OrderID: 10428,

OrderDate: '1997-01-28T00:00:00.000Z',
ShippedDate: '1997-02-04T00:00:00.000Z',
Freight: 11.09,
ShipRegion: null,
},
{
OrderID: 10429,
OrderDate: '1997-01-29T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 56.63,
ShipCity: 'Cork',
},
{
OrderID: 10430,
OrderDate: '1997-01-30T00:00:00.000Z',
ShippedDate: '1997-02-03T00:00:00.000Z',
Freight: 458.78,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10431,
OrderDate: '1997-01-30T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 44.17,
ShipRegion: 'BC',
},
{
OrderID: 10432,
OrderDate: '1997-01-31T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 4.34,


ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10433,
OrderDate: '1997-02-03T00:00:00.000Z',
ShippedDate: '1997-03-04T00:00:00.000Z',
Freight: 73.83,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10434,
OrderDate: '1997-02-03T00:00:00.000Z',
ShippedDate: '1997-02-13T00:00:00.000Z',
Freight: 17.92,
ShipRegion: null,
},
{
OrderID: 10435,
OrderDate: '1997-02-04T00:00:00.000Z',
ShippedDate: '1997-02-07T00:00:00.000Z',
Freight: 9.21,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10436,
OrderDate: '1997-02-05T00:00:00.000Z',
ShippedDate: '1997-02-11T00:00:00.000Z',
Freight: 156.66,
ShipRegion: null,
},

{
OrderID: 10437,
OrderDate: '1997-02-05T00:00:00.000Z',
ShippedDate: '1997-02-12T00:00:00.000Z',
Freight: 19.97,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10438,
OrderDate: '1997-02-06T00:00:00.000Z',
ShippedDate: '1997-02-14T00:00:00.000Z',
Freight: 8.24,
ShipRegion: null,
},
{
OrderID: 10439,
OrderDate: '1997-02-07T00:00:00.000Z',
ShippedDate: '1997-02-10T00:00:00.000Z',
Freight: 4.07,
},
{
OrderID: 10440,
OrderDate: '1997-02-10T00:00:00.000Z',
ShippedDate: '1997-02-28T00:00:00.000Z',
Freight: 86.53,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10441,
OrderDate: '1997-02-10T00:00:00.000Z',

ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 73.02,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10442,
OrderDate: '1997-02-11T00:00:00.000Z',
ShippedDate: '1997-02-18T00:00:00.000Z',
Freight: 47.94,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10443,
OrderDate: '1997-02-12T00:00:00.000Z',
ShippedDate: '1997-02-14T00:00:00.000Z',
Freight: 13.95,
ShipRegion: null,
},
{
OrderID: 10444,
OrderDate: '1997-02-12T00:00:00.000Z',
ShippedDate: '1997-02-21T00:00:00.000Z',
Freight: 3.5,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10445,
OrderDate: '1997-02-13T00:00:00.000Z',
ShippedDate: '1997-02-20T00:00:00.000Z',
Freight: 9.3,
ShipCity: 'Luleå',

ShipRegion: null,
},
{
OrderID: 10446,
OrderDate: '1997-02-14T00:00:00.000Z',
ShippedDate: '1997-02-19T00:00:00.000Z',
Freight: 14.68,
ShipRegion: null,
},
{
OrderID: 10447,
OrderDate: '1997-02-14T00:00:00.000Z',
ShippedDate: '1997-03-07T00:00:00.000Z',
Freight: 68.66,
ShipRegion: 'RJ',
},
{
OrderID: 10448,
OrderDate: '1997-02-17T00:00:00.000Z',
ShippedDate: '1997-02-24T00:00:00.000Z',
Freight: 38.82,
ShipRegion: null,
},
{
OrderID: 10449,
OrderDate: '1997-02-18T00:00:00.000Z',
ShippedDate: '1997-02-27T00:00:00.000Z',
Freight: 53.3,
ShipRegion: null,
},

OrderID: 10450,
OrderDate: '1997-02-19T00:00:00.000Z',
ShippedDate: '1997-03-11T00:00:00.000Z',
Freight: 7.23,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10451,
OrderDate: '1997-02-19T00:00:00.000Z',
ShippedDate: '1997-03-12T00:00:00.000Z',
Freight: 189.09,
ShipRegion: null,
},
{
OrderID: 10452,
OrderDate: '1997-02-20T00:00:00.000Z',
ShippedDate: '1997-02-26T00:00:00.000Z',
Freight: 140.26,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10453,
OrderDate: '1997-02-21T00:00:00.000Z',
ShippedDate: '1997-02-26T00:00:00.000Z',
Freight: 25.36,
ShipCountry: 'UK',
},
{
OrderID: 10454,
OrderDate: '1997-02-21T00:00:00.000Z',
ShippedDate: '1997-02-25T00:00:00.000Z',
Freight: 2.74,


ShipRegion: null,
},
{
OrderID: 10455,
OrderDate: '1997-02-24T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 180.45,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10456,
OrderDate: '1997-02-25T00:00:00.000Z',
ShippedDate: '1997-02-28T00:00:00.000Z',
Freight: 8.12,
ShipRegion: null,
},
{
OrderID: 10457,
OrderDate: '1997-02-25T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 11.57,
ShipRegion: null,
},
{
OrderID: 10458,
OrderDate: '1997-02-26T00:00:00.000Z',
ShippedDate: '1997-03-04T00:00:00.000Z',
Freight: 147.06,
ShipRegion: null,

},
{
OrderID: 10459,
OrderDate: '1997-02-27T00:00:00.000Z',
ShippedDate: '1997-02-28T00:00:00.000Z',
Freight: 25.09,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10460,
OrderDate: '1997-02-28T00:00:00.000Z',
ShippedDate: '1997-03-03T00:00:00.000Z',
Freight: 16.27,
ShipRegion: null,
},
{
OrderID: 10461,
OrderDate: '1997-02-28T00:00:00.000Z',
ShippedDate: '1997-03-05T00:00:00.000Z',
Freight: 148.61,
ShipRegion: 'Lara',
},
{
OrderID: 10462,
OrderDate: '1997-03-03T00:00:00.000Z',
ShippedDate: '1997-03-18T00:00:00.000Z',
Freight: 6.17,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10463,

OrderDate: '1997-03-04T00:00:00.000Z',
ShippedDate: '1997-03-06T00:00:00.000Z',
Freight: 14.78,
ShipRegion: null,
},
{
OrderID: 10464,
OrderDate: '1997-03-04T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 89,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10465,
OrderDate: '1997-03-05T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 145.04,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10466,
OrderDate: '1997-03-06T00:00:00.000Z',
ShippedDate: '1997-03-13T00:00:00.000Z',
Freight: 11.93,
ShipRegion: 'SP',
},
{
OrderID: 10467,
OrderDate: '1997-03-06T00:00:00.000Z',
ShippedDate: '1997-03-11T00:00:00.000Z',
Freight: 4.93,

ShipRegion: null,
},
{
OrderID: 10468,
OrderDate: '1997-03-07T00:00:00.000Z',
ShippedDate: '1997-03-12T00:00:00.000Z',
Freight: 44.12,
ShipRegion: null,
},
{
OrderID: 10469,
OrderDate: '1997-03-10T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 60.18,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10470,
OrderDate: '1997-03-11T00:00:00.000Z',
ShippedDate: '1997-03-14T00:00:00.000Z',
Freight: 64.56,
ShipRegion: null,
},
{
OrderID: 10471,
OrderDate: '1997-03-11T00:00:00.000Z',
ShippedDate: '1997-03-18T00:00:00.000Z',
Freight: 45.59,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},

{
OrderID: 10472,
OrderDate: '1997-03-12T00:00:00.000Z',
ShippedDate: '1997-03-19T00:00:00.000Z',
Freight: 4.2,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10473,
OrderDate: '1997-03-13T00:00:00.000Z',
ShippedDate: '1997-03-21T00:00:00.000Z',
Freight: 16.37,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10474,
OrderDate: '1997-03-13T00:00:00.000Z',
ShippedDate: '1997-03-21T00:00:00.000Z',
Freight: 83.49,
ShipRegion: null,
},
{
OrderID: 10475,
OrderDate: '1997-03-14T00:00:00.000Z',
ShippedDate: '1997-04-04T00:00:00.000Z',
Freight: 68.52,
ShipRegion: null,
},
{
OrderID: 10476,
OrderDate: '1997-03-17T00:00:00.000Z',
ShippedDate: '1997-03-24T00:00:00.000Z',

Freight: 4.41,
},
{
OrderID: 10477,
OrderDate: '1997-03-17T00:00:00.000Z',
ShippedDate: '1997-03-25T00:00:00.000Z',
Freight: 13.02,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10478,
OrderDate: '1997-03-18T00:00:00.000Z',
ShippedDate: '1997-03-26T00:00:00.000Z',
Freight: 4.81,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10479,
OrderDate: '1997-03-19T00:00:00.000Z',
ShippedDate: '1997-03-21T00:00:00.000Z',
Freight: 708.95,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10480,
OrderDate: '1997-03-20T00:00:00.000Z',
ShippedDate: '1997-03-24T00:00:00.000Z',
Freight: 1.35,
ShipCity: 'Lille',
ShipRegion: null,

},
{
OrderID: 10481,
OrderDate: '1997-03-20T00:00:00.000Z',
ShippedDate: '1997-03-25T00:00:00.000Z',
Freight: 64.33,
ShipRegion: 'RJ',
},
{
OrderID: 10482,
OrderDate: '1997-03-21T00:00:00.000Z',
ShippedDate: '1997-04-10T00:00:00.000Z',
Freight: 7.48,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10483,
OrderDate: '1997-03-24T00:00:00.000Z',
ShippedDate: '1997-04-25T00:00:00.000Z',
Freight: 15.28,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10484,
OrderDate: '1997-03-24T00:00:00.000Z',
ShippedDate: '1997-04-01T00:00:00.000Z',
Freight: 6.88,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10485,

OrderDate: '1997-03-25T00:00:00.000Z',
ShippedDate: '1997-03-31T00:00:00.000Z',
Freight: 64.45,
},
{
OrderID: 10486,
OrderDate: '1997-03-26T00:00:00.000Z',
ShippedDate: '1997-04-02T00:00:00.000Z',
Freight: 30.53,
},
{
OrderID: 10487,
OrderDate: '1997-03-26T00:00:00.000Z',
ShippedDate: '1997-03-28T00:00:00.000Z',
Freight: 71.07,
ShipRegion: 'SP',
},
{
OrderID: 10488,
OrderDate: '1997-03-27T00:00:00.000Z',
ShippedDate: '1997-04-02T00:00:00.000Z',
Freight: 4.93,
ShipRegion: null,
},
{
OrderID: 10489,
OrderDate: '1997-03-28T00:00:00.000Z',
ShippedDate: '1997-04-09T00:00:00.000Z',
Freight: 5.29,


ShipRegion: null,
},
{
OrderID: 10490,
OrderDate: '1997-03-31T00:00:00.000Z',
ShippedDate: '1997-04-03T00:00:00.000Z',
Freight: 210.19,
},
{
OrderID: 10491,
OrderDate: '1997-03-31T00:00:00.000Z',
ShippedDate: '1997-04-08T00:00:00.000Z',
Freight: 16.96,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10492,
OrderDate: '1997-04-01T00:00:00.000Z',
ShippedDate: '1997-04-11T00:00:00.000Z',
Freight: 62.89,
ShipRegion: 'BC',
},
{
OrderID: 10493,
OrderDate: '1997-04-02T00:00:00.000Z',
ShippedDate: '1997-04-10T00:00:00.000Z',
Freight: 10.64,
ShipRegion: null,
},

{
OrderID: 10494,
OrderDate: '1997-04-02T00:00:00.000Z',
ShippedDate: '1997-04-09T00:00:00.000Z',
Freight: 65.99,
ShipRegion: 'SP',
},
{
OrderID: 10495,
OrderDate: '1997-04-03T00:00:00.000Z',
ShippedDate: '1997-04-11T00:00:00.000Z',
Freight: 4.65,
ShipRegion: 'BC',
},
{
OrderID: 10496,
OrderDate: '1997-04-04T00:00:00.000Z',
ShippedDate: '1997-04-07T00:00:00.000Z',
Freight: 46.77,
ShipRegion: 'SP',
},
{
OrderID: 10497,
OrderDate: '1997-04-04T00:00:00.000Z',
ShippedDate: '1997-04-07T00:00:00.000Z',
Freight: 36.21,
ShipRegion: null,
},
{
OrderID: 10498,
OrderDate: '1997-04-07T00:00:00.000Z',

ShippedDate: '1997-04-11T00:00:00.000Z',
Freight: 29.75,
},
{
OrderID: 10499,
OrderDate: '1997-04-08T00:00:00.000Z',
ShippedDate: '1997-04-16T00:00:00.000Z',
Freight: 102.02,
ShipRegion: 'Lara',
},
{
OrderID: 10500,
OrderDate: '1997-04-09T00:00:00.000Z',
ShippedDate: '1997-04-17T00:00:00.000Z',
Freight: 42.68,
ShipRegion: null,
},
{
OrderID: 10501,
OrderDate: '1997-04-09T00:00:00.000Z',
ShippedDate: '1997-04-16T00:00:00.000Z',
Freight: 8.85,
ShipRegion: null,
},
{
OrderID: 10502,
OrderDate: '1997-04-10T00:00:00.000Z',
ShippedDate: '1997-04-29T00:00:00.000Z',
Freight: 69.32,

ShipRegion: null,
},
{
OrderID: 10503,
OrderDate: '1997-04-11T00:00:00.000Z',
ShippedDate: '1997-04-16T00:00:00.000Z',
Freight: 16.74,
ShipCity: 'Cork',
},
{
OrderID: 10504,
OrderDate: '1997-04-11T00:00:00.000Z',
ShippedDate: '1997-04-18T00:00:00.000Z',
Freight: 59.13,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10505,
OrderDate: '1997-04-14T00:00:00.000Z',
ShippedDate: '1997-04-21T00:00:00.000Z',
Freight: 7.13,
},
{
OrderID: 10506,
OrderDate: '1997-04-15T00:00:00.000Z',
ShippedDate: '1997-05-02T00:00:00.000Z',
Freight: 21.19,
ShipRegion: null,
},

OrderID: 10507,
OrderDate: '1997-04-15T00:00:00.000Z',
ShippedDate: '1997-04-22T00:00:00.000Z',
Freight: 47.45,
ShipRegion: null,
},
{
OrderID: 10508,
OrderDate: '1997-04-16T00:00:00.000Z',
ShippedDate: '1997-05-13T00:00:00.000Z',
Freight: 4.99,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10509,
OrderDate: '1997-04-17T00:00:00.000Z',
ShippedDate: '1997-04-29T00:00:00.000Z',
Freight: 0.15,
ShipRegion: null,
},
{
OrderID: 10510,
OrderDate: '1997-04-18T00:00:00.000Z',
ShippedDate: '1997-04-28T00:00:00.000Z',
Freight: 367.63,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10511,
OrderDate: '1997-04-18T00:00:00.000Z',
ShippedDate: '1997-04-21T00:00:00.000Z',
Freight: 350.64,


ShipRegion: null,
},
{
OrderID: 10512,
OrderDate: '1997-04-21T00:00:00.000Z',
ShippedDate: '1997-04-24T00:00:00.000Z',
Freight: 3.53,
ShipRegion: 'SP',
},
{
OrderID: 10513,
OrderDate: '1997-04-22T00:00:00.000Z',
ShippedDate: '1997-04-28T00:00:00.000Z',
Freight: 105.65,
ShipRegion: null,
},
{
OrderID: 10514,
OrderDate: '1997-04-22T00:00:00.000Z',
ShippedDate: '1997-05-16T00:00:00.000Z',
Freight: 789.95,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10515,
OrderDate: '1997-04-23T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 204.47,
ShipRegion: null,

},
{
OrderID: 10516,
OrderDate: '1997-04-24T00:00:00.000Z',
ShippedDate: '1997-05-01T00:00:00.000Z',
Freight: 62.78,
ShipCity: 'Cork',
},
{
OrderID: 10517,
OrderDate: '1997-04-24T00:00:00.000Z',
ShippedDate: '1997-04-29T00:00:00.000Z',
Freight: 32.07,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10518,
OrderDate: '1997-04-25T00:00:00.000Z',
ShippedDate: '1997-05-05T00:00:00.000Z',
Freight: 218.15,
ShipRegion: null,
},
{
OrderID: 10519,
OrderDate: '1997-04-28T00:00:00.000Z',
ShippedDate: '1997-05-01T00:00:00.000Z',
Freight: 91.76,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10520,

OrderDate: '1997-04-29T00:00:00.000Z',
ShippedDate: '1997-05-01T00:00:00.000Z',
Freight: 13.37,
ShipRegion: null,
},
{
OrderID: 10521,
OrderDate: '1997-04-29T00:00:00.000Z',
ShippedDate: '1997-05-02T00:00:00.000Z',
Freight: 17.22,
ShipRegion: null,
},
{
OrderID: 10522,
OrderDate: '1997-04-30T00:00:00.000Z',
ShippedDate: '1997-05-06T00:00:00.000Z',
Freight: 45.33,
ShipRegion: null,
},
{
OrderID: 10523,
OrderDate: '1997-05-01T00:00:00.000Z',
ShippedDate: '1997-05-30T00:00:00.000Z',
Freight: 77.63,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10524,
OrderDate: '1997-05-01T00:00:00.000Z',
ShippedDate: '1997-05-07T00:00:00.000Z',
Freight: 244.79,

ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10525,
OrderDate: '1997-05-02T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 11.06,
ShipRegion: null,
},
{
OrderID: 10526,
OrderDate: '1997-05-05T00:00:00.000Z',
ShippedDate: '1997-05-15T00:00:00.000Z',
Freight: 58.59,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10527,
OrderDate: '1997-05-05T00:00:00.000Z',
ShippedDate: '1997-05-07T00:00:00.000Z',
Freight: 41.9,
ShipRegion: null,
},
{
OrderID: 10528,
OrderDate: '1997-05-06T00:00:00.000Z',
ShippedDate: '1997-05-09T00:00:00.000Z',
Freight: 3.35,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},

{
OrderID: 10529,
OrderDate: '1997-05-07T00:00:00.000Z',
ShippedDate: '1997-05-09T00:00:00.000Z',
Freight: 66.69,
ShipRegion: null,
},
{
OrderID: 10530,
OrderDate: '1997-05-08T00:00:00.000Z',
ShippedDate: '1997-05-12T00:00:00.000Z',
Freight: 339.22,
ShipRegion: null,
},
{
OrderID: 10531,
OrderDate: '1997-05-08T00:00:00.000Z',
ShippedDate: '1997-05-19T00:00:00.000Z',
Freight: 8.12,
ShipRegion: null,
},
{
OrderID: 10532,
OrderDate: '1997-05-09T00:00:00.000Z',
ShippedDate: '1997-05-12T00:00:00.000Z',
Freight: 74.46,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10533,
OrderDate: '1997-05-12T00:00:00.000Z',
ShippedDate: '1997-05-22T00:00:00.000Z',

Freight: 188.04,
ShipRegion: null,
},
{
OrderID: 10534,
OrderDate: '1997-05-12T00:00:00.000Z',
ShippedDate: '1997-05-14T00:00:00.000Z',
Freight: 27.94,
ShipRegion: null,
},
{
OrderID: 10535,
OrderDate: '1997-05-13T00:00:00.000Z',
ShippedDate: '1997-05-21T00:00:00.000Z',
Freight: 15.64,
ShipRegion: null,
},
{
OrderID: 10536,
OrderDate: '1997-05-14T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 58.88,
ShipRegion: null,
},
{
OrderID: 10537,
OrderDate: '1997-05-14T00:00:00.000Z',
ShippedDate: '1997-05-19T00:00:00.000Z',
Freight: 78.85,
ShipRegion: null,

},
{
OrderID: 10538,
OrderDate: '1997-05-15T00:00:00.000Z',
ShippedDate: '1997-05-16T00:00:00.000Z',
Freight: 4.87,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10539,
OrderDate: '1997-05-16T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 12.36,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10540,
OrderDate: '1997-05-19T00:00:00.000Z',
ShippedDate: '1997-06-13T00:00:00.000Z',
Freight: 1007.64,
ShipRegion: null,
},
{
OrderID: 10541,
OrderDate: '1997-05-19T00:00:00.000Z',
ShippedDate: '1997-05-29T00:00:00.000Z',
Freight: 68.65,
ShipRegion: 'RJ',
},
{
OrderID: 10542,

OrderDate: '1997-05-20T00:00:00.000Z',
ShippedDate: '1997-05-26T00:00:00.000Z',
Freight: 10.95,
ShipRegion: null,
},
{
OrderID: 10543,
OrderDate: '1997-05-21T00:00:00.000Z',
ShippedDate: '1997-05-23T00:00:00.000Z',
Freight: 48.17,
ShipRegion: 'Lara',
},
{
OrderID: 10544,
OrderDate: '1997-05-21T00:00:00.000Z',
ShippedDate: '1997-05-30T00:00:00.000Z',
Freight: 24.91,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10545,
OrderDate: '1997-05-22T00:00:00.000Z',
ShippedDate: '1997-06-26T00:00:00.000Z',
Freight: 11.92,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10546,
OrderDate: '1997-05-23T00:00:00.000Z',
ShippedDate: '1997-05-27T00:00:00.000Z',
Freight: 194.72,


ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10547,
OrderDate: '1997-05-23T00:00:00.000Z',
ShippedDate: '1997-06-02T00:00:00.000Z',
Freight: 178.43,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10548,
OrderDate: '1997-05-26T00:00:00.000Z',
ShippedDate: '1997-06-02T00:00:00.000Z',
Freight: 1.43,
ShipRegion: null,
},
{
OrderID: 10549,
OrderDate: '1997-05-27T00:00:00.000Z',
ShippedDate: '1997-05-30T00:00:00.000Z',
Freight: 171.24,
ShipRegion: null,
},
{
OrderID: 10550,
OrderDate: '1997-05-28T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 4.32,
ShipRegion: null,
},

{
OrderID: 10551,
OrderDate: '1997-05-28T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 72.95,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10552,
OrderDate: '1997-05-29T00:00:00.000Z',
ShippedDate: '1997-06-05T00:00:00.000Z',
Freight: 83.22,
},
{
OrderID: 10553,
OrderDate: '1997-05-30T00:00:00.000Z',
ShippedDate: '1997-06-03T00:00:00.000Z',
Freight: 149.49,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10554,
OrderDate: '1997-05-30T00:00:00.000Z',
ShippedDate: '1997-06-05T00:00:00.000Z',
Freight: 120.97,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10555,
OrderDate: '1997-06-02T00:00:00.000Z',

ShippedDate: '1997-06-04T00:00:00.000Z',
Freight: 252.49,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10556,
OrderDate: '1997-06-03T00:00:00.000Z',
ShippedDate: '1997-06-13T00:00:00.000Z',
Freight: 9.8,
ShipRegion: null,
},
{
OrderID: 10557,
OrderDate: '1997-06-03T00:00:00.000Z',
ShippedDate: '1997-06-06T00:00:00.000Z',
Freight: 96.72,
ShipRegion: null,
},
{
OrderID: 10558,
OrderDate: '1997-06-04T00:00:00.000Z',
ShippedDate: '1997-06-10T00:00:00.000Z',
Freight: 72.97,
ShipCountry: 'UK',
},
{
OrderID: 10559,
OrderDate: '1997-06-05T00:00:00.000Z',
ShippedDate: '1997-06-13T00:00:00.000Z',
Freight: 8.05,

ShipRegion: null,
},
{
OrderID: 10560,
OrderDate: '1997-06-06T00:00:00.000Z',
ShippedDate: '1997-06-09T00:00:00.000Z',
Freight: 36.65,
ShipRegion: null,
},
{
OrderID: 10561,
OrderDate: '1997-06-06T00:00:00.000Z',
ShippedDate: '1997-06-09T00:00:00.000Z',
Freight: 242.21,
ShipRegion: null,
},
{
OrderID: 10562,
OrderDate: '1997-06-09T00:00:00.000Z',
ShippedDate: '1997-06-12T00:00:00.000Z',
Freight: 22.95,
ShipRegion: null,
},
{
OrderID: 10563,
OrderDate: '1997-06-10T00:00:00.000Z',
ShippedDate: '1997-06-24T00:00:00.000Z',
Freight: 60.43,
ShipRegion: 'RJ',
},

OrderID: 10564,
OrderDate: '1997-06-10T00:00:00.000Z',
ShippedDate: '1997-06-16T00:00:00.000Z',
Freight: 13.75,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10565,
OrderDate: '1997-06-11T00:00:00.000Z',
ShippedDate: '1997-06-18T00:00:00.000Z',
Freight: 7.15,
},
{
OrderID: 10566,
OrderDate: '1997-06-12T00:00:00.000Z',
ShippedDate: '1997-06-18T00:00:00.000Z',
Freight: 88.4,
ShipRegion: null,
},
{
OrderID: 10567,
OrderDate: '1997-06-12T00:00:00.000Z',
ShippedDate: '1997-06-17T00:00:00.000Z',
Freight: 33.97,
ShipCity: 'Cork',
},
{
OrderID: 10568,
OrderDate: '1997-06-13T00:00:00.000Z',
ShippedDate: '1997-07-09T00:00:00.000Z',
Freight: 6.54,


ShipRegion: null,
},
{
OrderID: 10569,
OrderDate: '1997-06-16T00:00:00.000Z',
ShippedDate: '1997-07-11T00:00:00.000Z',
Freight: 58.98,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10570,
OrderDate: '1997-06-17T00:00:00.000Z',
ShippedDate: '1997-06-19T00:00:00.000Z',
Freight: 188.99,
},
{
OrderID: 10571,
OrderDate: '1997-06-17T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 26.06,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10572,
OrderDate: '1997-06-18T00:00:00.000Z',
ShippedDate: '1997-06-25T00:00:00.000Z',
Freight: 116.43,
ShipCity: 'Luleå',
ShipRegion: null,

},
{
OrderID: 10573,
OrderDate: '1997-06-19T00:00:00.000Z',
ShippedDate: '1997-06-20T00:00:00.000Z',
Freight: 84.84,
ShipRegion: null,
},
{
OrderID: 10574,
OrderDate: '1997-06-19T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 37.6,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10575,
OrderDate: '1997-06-20T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 127.34,
ShipRegion: null,
},
{
OrderID: 10576,
OrderDate: '1997-06-23T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 18.56,
ShipRegion: null,
},
{
OrderID: 10577,

OrderDate: '1997-06-23T00:00:00.000Z',
ShippedDate: '1997-06-30T00:00:00.000Z',
Freight: 25.41,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10578,
OrderDate: '1997-06-24T00:00:00.000Z',
ShippedDate: '1997-07-25T00:00:00.000Z',
Freight: 29.6,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10579,
OrderDate: '1997-06-25T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 13.73,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10580,
OrderDate: '1997-06-26T00:00:00.000Z',
ShippedDate: '1997-07-01T00:00:00.000Z',
Freight: 75.89,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10581,
OrderDate: '1997-06-26T00:00:00.000Z',
ShippedDate: '1997-07-02T00:00:00.000Z',
Freight: 3.01,


ShipRegion: 'SP',
},
{
OrderID: 10582,
OrderDate: '1997-06-27T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 27.71,
ShipRegion: null,
},
{
OrderID: 10583,
OrderDate: '1997-06-30T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 7.28,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10584,
OrderDate: '1997-06-30T00:00:00.000Z',
ShippedDate: '1997-07-04T00:00:00.000Z',
Freight: 59.14,
ShipRegion: null,
},
{
OrderID: 10585,
OrderDate: '1997-07-01T00:00:00.000Z',
ShippedDate: '1997-07-10T00:00:00.000Z',
Freight: 13.41,
ShipRegion: 'SP',
},

{
OrderID: 10586,
OrderDate: '1997-07-02T00:00:00.000Z',
ShippedDate: '1997-07-09T00:00:00.000Z',
Freight: 0.48,
ShipRegion: null,
},
{
OrderID: 10587,
OrderDate: '1997-07-02T00:00:00.000Z',
ShippedDate: '1997-07-09T00:00:00.000Z',
Freight: 62.52,
ShipRegion: 'RJ',
},
{
OrderID: 10588,
OrderDate: '1997-07-03T00:00:00.000Z',
ShippedDate: '1997-07-10T00:00:00.000Z',
Freight: 194.67,
ShipRegion: null,
},
{
OrderID: 10589,
OrderDate: '1997-07-04T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 4.42,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10590,
OrderDate: '1997-07-07T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',

Freight: 44.77,
},
{
OrderID: 10591,
OrderDate: '1997-07-07T00:00:00.000Z',
ShippedDate: '1997-07-16T00:00:00.000Z',
Freight: 55.92,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10592,
OrderDate: '1997-07-08T00:00:00.000Z',
ShippedDate: '1997-07-16T00:00:00.000Z',
Freight: 32.1,
ShipRegion: null,
},
{
OrderID: 10593,
OrderDate: '1997-07-09T00:00:00.000Z',
ShippedDate: '1997-08-13T00:00:00.000Z',
Freight: 174.2,
ShipRegion: null,
},
{
OrderID: 10594,
OrderDate: '1997-07-09T00:00:00.000Z',
ShippedDate: '1997-07-16T00:00:00.000Z',
Freight: 5.24,
ShipRegion: 'AK',

ShipCountry: 'USA',
},
{
OrderID: 10595,
OrderDate: '1997-07-10T00:00:00.000Z',
ShippedDate: '1997-07-14T00:00:00.000Z',
Freight: 96.78,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10596,
OrderDate: '1997-07-11T00:00:00.000Z',
ShippedDate: '1997-08-12T00:00:00.000Z',
Freight: 16.34,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10597,
OrderDate: '1997-07-11T00:00:00.000Z',
ShippedDate: '1997-07-18T00:00:00.000Z',
Freight: 35.12,
ShipRegion: null,
},
{
OrderID: 10598,
OrderDate: '1997-07-14T00:00:00.000Z',
ShippedDate: '1997-07-18T00:00:00.000Z',
Freight: 44.42,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10599,

OrderDate: '1997-07-15T00:00:00.000Z',
ShippedDate: '1997-07-21T00:00:00.000Z',
Freight: 29.98,
ShipName: 'B Beverages',
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10600,
OrderDate: '1997-07-16T00:00:00.000Z',
ShippedDate: '1997-07-21T00:00:00.000Z',
Freight: 45.13,
ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10601,
OrderDate: '1997-07-16T00:00:00.000Z',
ShippedDate: '1997-07-22T00:00:00.000Z',
Freight: 58.3,
},
{
OrderID: 10602,
OrderDate: '1997-07-17T00:00:00.000Z',
ShippedDate: '1997-07-22T00:00:00.000Z',
Freight: 2.92,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10603,
OrderDate: '1997-07-18T00:00:00.000Z',
ShippedDate: '1997-08-08T00:00:00.000Z',
Freight: 48.77,


ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10604,
OrderDate: '1997-07-18T00:00:00.000Z',
ShippedDate: '1997-07-29T00:00:00.000Z',
Freight: 7.46,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10605,
OrderDate: '1997-07-21T00:00:00.000Z',
ShippedDate: '1997-07-29T00:00:00.000Z',
Freight: 379.13,
},
{
OrderID: 10606,
OrderDate: '1997-07-22T00:00:00.000Z',
ShippedDate: '1997-07-31T00:00:00.000Z',
Freight: 79.4,
ShipRegion: 'SP',
},
{
OrderID: 10607,
OrderDate: '1997-07-22T00:00:00.000Z',
ShippedDate: '1997-07-25T00:00:00.000Z',
Freight: 200.24,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},

{
OrderID: 10608,
OrderDate: '1997-07-23T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 27.79,
ShipRegion: null,
},
{
OrderID: 10609,
OrderDate: '1997-07-24T00:00:00.000Z',
ShippedDate: '1997-07-30T00:00:00.000Z',
Freight: 1.85,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10610,
OrderDate: '1997-07-25T00:00:00.000Z',
ShippedDate: '1997-08-06T00:00:00.000Z',
Freight: 26.78,
ShipRegion: null,
},
{
OrderID: 10611,
OrderDate: '1997-07-25T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 80.65,
ShipRegion: null,
},
{
OrderID: 10612,
OrderDate: '1997-07-28T00:00:00.000Z',

ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 544.08,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10613,
OrderDate: '1997-07-29T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 8.11,
},
{
OrderID: 10614,
OrderDate: '1997-07-29T00:00:00.000Z',
ShippedDate: '1997-08-01T00:00:00.000Z',
Freight: 1.93,
ShipRegion: null,
},
{
OrderID: 10615,
OrderDate: '1997-07-30T00:00:00.000Z',
ShippedDate: '1997-08-06T00:00:00.000Z',
Freight: 0.75,
ShipRegion: null,
},
{
OrderID: 10616,
OrderDate: '1997-07-31T00:00:00.000Z',
ShippedDate: '1997-08-05T00:00:00.000Z',
Freight: 116.53,
ShipCity: 'Eugene',

ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10617,
OrderDate: '1997-07-31T00:00:00.000Z',
ShippedDate: '1997-08-04T00:00:00.000Z',
Freight: 18.53,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10618,
OrderDate: '1997-08-01T00:00:00.000Z',
ShippedDate: '1997-08-08T00:00:00.000Z',
Freight: 154.68,
},
{
OrderID: 10619,
OrderDate: '1997-08-04T00:00:00.000Z',
ShippedDate: '1997-08-07T00:00:00.000Z',
Freight: 91.05,
},
{
OrderID: 10620,
OrderDate: '1997-08-05T00:00:00.000Z',
ShippedDate: '1997-08-14T00:00:00.000Z',
Freight: 0.94,
ShipRegion: 'BC',
},

OrderID: 10621,
OrderDate: '1997-08-05T00:00:00.000Z',
ShippedDate: '1997-08-11T00:00:00.000Z',
Freight: 23.73,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10622,
OrderDate: '1997-08-06T00:00:00.000Z',
ShippedDate: '1997-08-11T00:00:00.000Z',
Freight: 50.97,
ShipRegion: 'RJ',
},
{
OrderID: 10623,
OrderDate: '1997-08-07T00:00:00.000Z',
ShippedDate: '1997-08-12T00:00:00.000Z',
Freight: 97.18,
ShipRegion: null,
},
{
OrderID: 10624,
OrderDate: '1997-08-07T00:00:00.000Z',
ShippedDate: '1997-08-19T00:00:00.000Z',
Freight: 94.8,
ShipCity: 'Butte',
ShipRegion: 'MT',
ShipCountry: 'USA',
},
{
OrderID: 10625,
OrderDate: '1997-08-08T00:00:00.000Z',
ShippedDate: '1997-08-14T00:00:00.000Z',
Freight: 43.9,


ShipRegion: null,
},
{
OrderID: 10626,
OrderDate: '1997-08-11T00:00:00.000Z',
ShippedDate: '1997-08-20T00:00:00.000Z',
Freight: 138.69,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10627,
OrderDate: '1997-08-11T00:00:00.000Z',
ShippedDate: '1997-08-21T00:00:00.000Z',
Freight: 107.46,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10628,
OrderDate: '1997-08-12T00:00:00.000Z',
ShippedDate: '1997-08-20T00:00:00.000Z',
Freight: 30.36,
ShipRegion: null,
},
{
OrderID: 10629,
OrderDate: '1997-08-12T00:00:00.000Z',
ShippedDate: '1997-08-20T00:00:00.000Z',
Freight: 85.46,
ShipRegion: null,

},
{
OrderID: 10630,
OrderDate: '1997-08-13T00:00:00.000Z',
ShippedDate: '1997-08-19T00:00:00.000Z',
Freight: 32.35,
ShipRegion: null,
},
{
OrderID: 10631,
OrderDate: '1997-08-14T00:00:00.000Z',
ShippedDate: '1997-08-15T00:00:00.000Z',
Freight: 0.87,
ShipRegion: null,
},
{
OrderID: 10632,
OrderDate: '1997-08-14T00:00:00.000Z',
ShippedDate: '1997-08-19T00:00:00.000Z',
Freight: 41.38,
ShipRegion: null,
},
{
OrderID: 10633,
OrderDate: '1997-08-15T00:00:00.000Z',
ShippedDate: '1997-08-18T00:00:00.000Z',
Freight: 477.9,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10634,

OrderDate: '1997-08-15T00:00:00.000Z',
ShippedDate: '1997-08-21T00:00:00.000Z',
Freight: 487.38,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10635,
OrderDate: '1997-08-18T00:00:00.000Z',
ShippedDate: '1997-08-21T00:00:00.000Z',
Freight: 47.46,
ShipRegion: null,
},
{
OrderID: 10636,
OrderDate: '1997-08-19T00:00:00.000Z',
ShippedDate: '1997-08-26T00:00:00.000Z',
Freight: 1.15,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10637,
OrderDate: '1997-08-19T00:00:00.000Z',
ShippedDate: '1997-08-26T00:00:00.000Z',
Freight: 201.29,
ShipRegion: 'SP',
},
{
OrderID: 10638,
OrderDate: '1997-08-20T00:00:00.000Z',
ShippedDate: '1997-09-01T00:00:00.000Z',
Freight: 158.44,


},
{
OrderID: 10639,
OrderDate: '1997-08-20T00:00:00.000Z',
ShippedDate: '1997-08-27T00:00:00.000Z',
Freight: 38.64,
ShipRegion: null,
},
{
OrderID: 10640,
OrderDate: '1997-08-21T00:00:00.000Z',
ShippedDate: '1997-08-28T00:00:00.000Z',
Freight: 23.55,
ShipRegion: null,
},
{
OrderID: 10641,
OrderDate: '1997-08-22T00:00:00.000Z',
ShippedDate: '1997-08-26T00:00:00.000Z',
Freight: 179.61,
},
{
OrderID: 10642,
OrderDate: '1997-08-22T00:00:00.000Z',
ShippedDate: '1997-09-05T00:00:00.000Z',
Freight: 41.89,
ShipRegion: null,
},

{
OrderID: 10643,
OrderDate: '1997-08-25T00:00:00.000Z',
ShippedDate: '1997-09-02T00:00:00.000Z',
Freight: 29.46,
ShipName: 'Alfreds Futterkiste',
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10644,
OrderDate: '1997-08-25T00:00:00.000Z',
ShippedDate: '1997-09-01T00:00:00.000Z',
Freight: 0.14,
ShipRegion: 'SP',
},
{
OrderID: 10645,
OrderDate: '1997-08-26T00:00:00.000Z',
ShippedDate: '1997-09-02T00:00:00.000Z',
Freight: 12.41,
ShipRegion: 'RJ',
},
{
OrderID: 10646,
OrderDate: '1997-08-27T00:00:00.000Z',
ShippedDate: '1997-09-03T00:00:00.000Z',
Freight: 142.33,
ShipCity: 'Cork',
},
{
OrderID: 10647,
OrderDate: '1997-08-27T00:00:00.000Z',
ShippedDate: '1997-09-03T00:00:00.000Z',

Freight: 45.54,
ShipRegion: 'RJ',
},
{
OrderID: 10648,
OrderDate: '1997-08-28T00:00:00.000Z',
ShippedDate: '1997-09-09T00:00:00.000Z',
Freight: 14.25,
ShipRegion: 'RJ',
},
{
OrderID: 10649,
OrderDate: '1997-08-28T00:00:00.000Z',
ShippedDate: '1997-08-29T00:00:00.000Z',
Freight: 6.2,
ShipRegion: null,
},
{
OrderID: 10650,
OrderDate: '1997-08-29T00:00:00.000Z',
ShippedDate: '1997-09-03T00:00:00.000Z',
Freight: 176.81,
ShipRegion: 'SP',
},
{
OrderID: 10651,
OrderDate: '1997-09-01T00:00:00.000Z',
ShippedDate: '1997-09-11T00:00:00.000Z',
Freight: 20.6,
ShipRegion: null,

},
{
OrderID: 10652,
OrderDate: '1997-09-01T00:00:00.000Z',
ShippedDate: '1997-09-08T00:00:00.000Z',
Freight: 7.14,
ShipRegion: 'SP',
},
{
OrderID: 10653,
OrderDate: '1997-09-02T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 93.25,
ShipRegion: null,
},
{
OrderID: 10654,
OrderDate: '1997-09-02T00:00:00.000Z',
ShippedDate: '1997-09-11T00:00:00.000Z',
Freight: 55.26,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10655,
OrderDate: '1997-09-03T00:00:00.000Z',
ShippedDate: '1997-09-11T00:00:00.000Z',
Freight: 4.41,
ShipRegion: null,
},
{
OrderID: 10656,

OrderDate: '1997-09-04T00:00:00.000Z',
ShippedDate: '1997-09-10T00:00:00.000Z',
Freight: 57.15,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10657,
OrderDate: '1997-09-04T00:00:00.000Z',
ShippedDate: '1997-09-15T00:00:00.000Z',
Freight: 352.69,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10658,
OrderDate: '1997-09-05T00:00:00.000Z',
ShippedDate: '1997-09-08T00:00:00.000Z',
Freight: 364.15,
ShipRegion: null,
},
{
OrderID: 10659,
OrderDate: '1997-09-05T00:00:00.000Z',
ShippedDate: '1997-09-10T00:00:00.000Z',
Freight: 105.81,
ShipRegion: 'SP',
},
{
OrderID: 10660,
OrderDate: '1997-09-08T00:00:00.000Z',
ShippedDate: '1997-10-15T00:00:00.000Z',
Freight: 111.29,


ShipCity: 'Elgin',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10661,
OrderDate: '1997-09-09T00:00:00.000Z',
ShippedDate: '1997-09-15T00:00:00.000Z',
Freight: 17.55,
ShipCity: 'Cork',
},
{
OrderID: 10662,
OrderDate: '1997-09-09T00:00:00.000Z',
ShippedDate: '1997-09-18T00:00:00.000Z',
Freight: 1.28,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10663,
OrderDate: '1997-09-10T00:00:00.000Z',
ShippedDate: '1997-10-03T00:00:00.000Z',
Freight: 113.15,
ShipRegion: null,
},
{
OrderID: 10664,
OrderDate: '1997-09-10T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 1.27,
ShipCity: 'Lisboa',
ShipRegion: null,
},

{
OrderID: 10665,
OrderDate: '1997-09-11T00:00:00.000Z',
ShippedDate: '1997-09-17T00:00:00.000Z',
Freight: 26.31,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10666,
OrderDate: '1997-09-12T00:00:00.000Z',
ShippedDate: '1997-09-22T00:00:00.000Z',
Freight: 232.42,
ShipRegion: null,
},
{
OrderID: 10667,
OrderDate: '1997-09-12T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 78.09,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10668,
OrderDate: '1997-09-15T00:00:00.000Z',
ShippedDate: '1997-09-23T00:00:00.000Z',
Freight: 47.22,
ShipRegion: null,
},
{
OrderID: 10669,
OrderDate: '1997-09-15T00:00:00.000Z',

ShippedDate: '1997-09-22T00:00:00.000Z',
Freight: 24.39,
ShipRegion: null,
},
{
OrderID: 10670,
OrderDate: '1997-09-16T00:00:00.000Z',
ShippedDate: '1997-09-18T00:00:00.000Z',
Freight: 203.48,
ShipRegion: null,
},
{
OrderID: 10671,
OrderDate: '1997-09-17T00:00:00.000Z',
ShippedDate: '1997-09-24T00:00:00.000Z',
Freight: 30.34,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10672,
OrderDate: '1997-09-17T00:00:00.000Z',
ShippedDate: '1997-09-26T00:00:00.000Z',
Freight: 95.75,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10673,
OrderDate: '1997-09-18T00:00:00.000Z',
ShippedDate: '1997-09-19T00:00:00.000Z',
Freight: 22.76,

ShipRegion: null,
},
{
OrderID: 10674,
OrderDate: '1997-09-18T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 0.9,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10675,
OrderDate: '1997-09-19T00:00:00.000Z',
ShippedDate: '1997-09-23T00:00:00.000Z',
Freight: 31.85,
ShipRegion: null,
},
{
OrderID: 10676,
OrderDate: '1997-09-22T00:00:00.000Z',
ShippedDate: '1997-09-29T00:00:00.000Z',
Freight: 2.01,
ShipRegion: null,
},
{
OrderID: 10677,
OrderDate: '1997-09-22T00:00:00.000Z',
ShippedDate: '1997-09-26T00:00:00.000Z',
Freight: 4.03,
ShipRegion: null,
},

OrderID: 10678,
OrderDate: '1997-09-23T00:00:00.000Z',
ShippedDate: '1997-10-16T00:00:00.000Z',
Freight: 388.98,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10679,
OrderDate: '1997-09-23T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 27.94,
ShipRegion: null,
},
{
OrderID: 10680,
OrderDate: '1997-09-24T00:00:00.000Z',
ShippedDate: '1997-09-26T00:00:00.000Z',
Freight: 26.61,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10681,
OrderDate: '1997-09-25T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 76.13,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10682,
OrderDate: '1997-09-25T00:00:00.000Z',
ShippedDate: '1997-10-01T00:00:00.000Z',
Freight: 36.13,


ShipRegion: null,
},
{
OrderID: 10683,
OrderDate: '1997-09-26T00:00:00.000Z',
ShippedDate: '1997-10-01T00:00:00.000Z',
Freight: 4.4,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10684,
OrderDate: '1997-09-26T00:00:00.000Z',
ShippedDate: '1997-09-30T00:00:00.000Z',
Freight: 145.63,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10685,
OrderDate: '1997-09-29T00:00:00.000Z',
ShippedDate: '1997-10-03T00:00:00.000Z',
Freight: 33.75,
ShipRegion: 'SP',
},
{
OrderID: 10686,
OrderDate: '1997-09-30T00:00:00.000Z',
ShippedDate: '1997-10-08T00:00:00.000Z',
Freight: 96.5,
ShipRegion: null,

},
{
OrderID: 10687,
OrderDate: '1997-09-30T00:00:00.000Z',
ShippedDate: '1997-10-30T00:00:00.000Z',
Freight: 296.43,
ShipCity: 'Cork',
},
{
OrderID: 10688,
OrderDate: '1997-10-01T00:00:00.000Z',
ShippedDate: '1997-10-07T00:00:00.000Z',
Freight: 299.09,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10689,
OrderDate: '1997-10-01T00:00:00.000Z',
ShippedDate: '1997-10-07T00:00:00.000Z',
Freight: 13.42,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10690,
OrderDate: '1997-10-02T00:00:00.000Z',
ShippedDate: '1997-10-03T00:00:00.000Z',
Freight: 15.8,
ShipRegion: 'RJ',
},
{
OrderID: 10691,

OrderDate: '1997-10-03T00:00:00.000Z',
ShippedDate: '1997-10-22T00:00:00.000Z',
Freight: 810.05,
ShipRegion: null,
},
{
OrderID: 10692,
OrderDate: '1997-10-03T00:00:00.000Z',
ShippedDate: '1997-10-13T00:00:00.000Z',
Freight: 61.02,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10693,
OrderDate: '1997-10-06T00:00:00.000Z',
ShippedDate: '1997-10-10T00:00:00.000Z',
Freight: 139.34,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10694,
OrderDate: '1997-10-06T00:00:00.000Z',
ShippedDate: '1997-10-09T00:00:00.000Z',
Freight: 398.36,
ShipRegion: null,
},
{
OrderID: 10695,
OrderDate: '1997-10-07T00:00:00.000Z',
ShippedDate: '1997-10-14T00:00:00.000Z',
Freight: 16.72,

ShipRegion: null,
},
{
OrderID: 10696,
OrderDate: '1997-10-08T00:00:00.000Z',
ShippedDate: '1997-10-14T00:00:00.000Z',
Freight: 102.55,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10697,
OrderDate: '1997-10-08T00:00:00.000Z',
ShippedDate: '1997-10-14T00:00:00.000Z',
Freight: 45.52,
},
{
OrderID: 10698,
OrderDate: '1997-10-09T00:00:00.000Z',
ShippedDate: '1997-10-17T00:00:00.000Z',
Freight: 272.47,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10699,
OrderDate: '1997-10-09T00:00:00.000Z',
ShippedDate: '1997-10-13T00:00:00.000Z',
Freight: 0.58,
ShipRegion: null,
},

{
OrderID: 10700,
OrderDate: '1997-10-10T00:00:00.000Z',
ShippedDate: '1997-10-16T00:00:00.000Z',
Freight: 65.1,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10701,
OrderDate: '1997-10-13T00:00:00.000Z',
ShippedDate: '1997-10-15T00:00:00.000Z',
Freight: 220.31,
ShipCity: 'Cork',
},
{
OrderID: 10702,
OrderDate: '1997-10-13T00:00:00.000Z',
ShippedDate: '1997-10-21T00:00:00.000Z',
Freight: 23.94,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10703,
OrderDate: '1997-10-14T00:00:00.000Z',
ShippedDate: '1997-10-20T00:00:00.000Z',
Freight: 152.3,
ShipRegion: null,
},
{
OrderID: 10704,
OrderDate: '1997-10-14T00:00:00.000Z',
ShippedDate: '1997-11-07T00:00:00.000Z',

Freight: 4.78,
ShipRegion: 'SP',
},
{
OrderID: 10705,
OrderDate: '1997-10-15T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 3.52,
},
{
OrderID: 10706,
OrderDate: '1997-10-16T00:00:00.000Z',
ShippedDate: '1997-10-21T00:00:00.000Z',
Freight: 135.63,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10707,
OrderDate: '1997-10-16T00:00:00.000Z',
ShippedDate: '1997-10-23T00:00:00.000Z',
Freight: 21.74,
ShipCountry: 'UK',
},
{
OrderID: 10708,
OrderDate: '1997-10-17T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 2.96,
ShipRegion: 'OR',

ShipCountry: 'USA',
},
{
OrderID: 10709,
OrderDate: '1997-10-17T00:00:00.000Z',
ShippedDate: '1997-11-20T00:00:00.000Z',
Freight: 210.8,
ShipRegion: 'SP',
},
{
OrderID: 10710,
OrderDate: '1997-10-20T00:00:00.000Z',
ShippedDate: '1997-10-23T00:00:00.000Z',
Freight: 4.98,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10711,
OrderDate: '1997-10-21T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 52.41,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10712,
OrderDate: '1997-10-21T00:00:00.000Z',
ShippedDate: '1997-10-31T00:00:00.000Z',
Freight: 89.93,
ShipCity: 'Cork',
},
{
OrderID: 10713,

OrderDate: '1997-10-22T00:00:00.000Z',
ShippedDate: '1997-10-24T00:00:00.000Z',
Freight: 167.05,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10714,
OrderDate: '1997-10-22T00:00:00.000Z',
ShippedDate: '1997-10-27T00:00:00.000Z',
Freight: 24.49,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10715,
OrderDate: '1997-10-23T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 63.2,
ShipRegion: null,
},
{
OrderID: 10716,
OrderDate: '1997-10-24T00:00:00.000Z',
ShippedDate: '1997-10-27T00:00:00.000Z',
Freight: 22.57,
ShipRegion: null,
},
{
OrderID: 10717,
OrderDate: '1997-10-24T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 59.25,


ShipRegion: null,
},
{
OrderID: 10718,
OrderDate: '1997-10-27T00:00:00.000Z',
ShippedDate: '1997-10-29T00:00:00.000Z',
Freight: 170.88,
ShipRegion: null,
},
{
OrderID: 10719,
OrderDate: '1997-10-27T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 51.44,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10720,
OrderDate: '1997-10-28T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 9.53,
ShipRegion: 'RJ',
},
{
OrderID: 10721,
OrderDate: '1997-10-29T00:00:00.000Z',
ShippedDate: '1997-10-31T00:00:00.000Z',
Freight: 48.92,
ShipRegion: null,
},

{
OrderID: 10722,
OrderDate: '1997-10-29T00:00:00.000Z',
ShippedDate: '1997-11-04T00:00:00.000Z',
Freight: 74.58,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10723,
OrderDate: '1997-10-30T00:00:00.000Z',
ShippedDate: '1997-11-25T00:00:00.000Z',
Freight: 21.72,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10724,
OrderDate: '1997-10-30T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 57.75,
},
{
OrderID: 10725,
OrderDate: '1997-10-31T00:00:00.000Z',
ShippedDate: '1997-11-05T00:00:00.000Z',
Freight: 10.83,
ShipRegion: 'SP',
},
{
OrderID: 10726,
OrderDate: '1997-11-03T00:00:00.000Z',

ShippedDate: '1997-12-05T00:00:00.000Z',
Freight: 16.56,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10727,
OrderDate: '1997-11-03T00:00:00.000Z',
ShippedDate: '1997-12-05T00:00:00.000Z',
Freight: 89.9,
ShipRegion: null,
},
{
OrderID: 10728,
OrderDate: '1997-11-04T00:00:00.000Z',
ShippedDate: '1997-11-11T00:00:00.000Z',
Freight: 58.33,
ShipRegion: 'SP',
},
{
OrderID: 10729,
OrderDate: '1997-11-04T00:00:00.000Z',
ShippedDate: '1997-11-14T00:00:00.000Z',
Freight: 141.06,
},
{
OrderID: 10730,
OrderDate: '1997-11-05T00:00:00.000Z',
ShippedDate: '1997-11-14T00:00:00.000Z',
Freight: 20.12,

ShipRegion: null,
},
{
OrderID: 10731,
OrderDate: '1997-11-06T00:00:00.000Z',
ShippedDate: '1997-11-14T00:00:00.000Z',
Freight: 96.65,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10732,
OrderDate: '1997-11-06T00:00:00.000Z',
ShippedDate: '1997-11-07T00:00:00.000Z',
Freight: 16.97,
ShipRegion: null,
},
{
OrderID: 10733,
OrderDate: '1997-11-07T00:00:00.000Z',
ShippedDate: '1997-11-10T00:00:00.000Z',
Freight: 110.11,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10734,
OrderDate: '1997-11-07T00:00:00.000Z',
ShippedDate: '1997-11-12T00:00:00.000Z',
Freight: 1.63,
ShipRegion: 'SP',
},

OrderID: 10735,
OrderDate: '1997-11-10T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 45.97,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10736,
OrderDate: '1997-11-11T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 44.1,
ShipCity: 'Cork',
},
{
OrderID: 10737,
OrderDate: '1997-11-11T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 7.79,
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10738,
OrderDate: '1997-11-12T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 2.91,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 10739,
OrderDate: '1997-11-12T00:00:00.000Z',
ShippedDate: '1997-11-17T00:00:00.000Z',
Freight: 11.08,


ShipAddress: '59 rue de lAbbaye',
ShipCity: 'Reims',
ShipRegion: null,
},
{
OrderID: 10740,
OrderDate: '1997-11-13T00:00:00.000Z',
ShippedDate: '1997-11-25T00:00:00.000Z',
Freight: 81.88,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10741,
OrderDate: '1997-11-14T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 10.96,
ShipCountry: 'UK',
},
{
OrderID: 10742,
OrderDate: '1997-11-14T00:00:00.000Z',
ShippedDate: '1997-11-18T00:00:00.000Z',
Freight: 243.73,
ShipRegion: 'BC',
},
{
OrderID: 10743,
OrderDate: '1997-11-17T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 23.72,
ShipCountry: 'UK',

},
{
OrderID: 10744,
OrderDate: '1997-11-17T00:00:00.000Z',
ShippedDate: '1997-11-24T00:00:00.000Z',
Freight: 69.19,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10745,
OrderDate: '1997-11-18T00:00:00.000Z',
ShippedDate: '1997-11-27T00:00:00.000Z',
Freight: 3.52,
ShipRegion: null,
},
{
OrderID: 10746,
OrderDate: '1997-11-19T00:00:00.000Z',
ShippedDate: '1997-11-21T00:00:00.000Z',
Freight: 31.43,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10747,
OrderDate: '1997-11-19T00:00:00.000Z',
ShippedDate: '1997-11-26T00:00:00.000Z',
Freight: 117.33,
ShipRegion: null,
},
{
OrderID: 10748,

OrderDate: '1997-11-20T00:00:00.000Z',
ShippedDate: '1997-11-28T00:00:00.000Z',
Freight: 232.55,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10749,
OrderDate: '1997-11-20T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 61.53,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10750,
OrderDate: '1997-11-21T00:00:00.000Z',
ShippedDate: '1997-11-24T00:00:00.000Z',
Freight: 79.3,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10751,
OrderDate: '1997-11-24T00:00:00.000Z',
ShippedDate: '1997-12-03T00:00:00.000Z',
Freight: 130.79,
ShipRegion: null,
},
{
OrderID: 10752,
OrderDate: '1997-11-24T00:00:00.000Z',
ShippedDate: '1997-11-28T00:00:00.000Z',
Freight: 1.39,

ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10753,
OrderDate: '1997-11-25T00:00:00.000Z',
ShippedDate: '1997-11-27T00:00:00.000Z',
Freight: 7.7,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10754,
OrderDate: '1997-11-25T00:00:00.000Z',
ShippedDate: '1997-11-27T00:00:00.000Z',
Freight: 2.38,
ShipRegion: null,
},
{
OrderID: 10755,
OrderDate: '1997-11-26T00:00:00.000Z',
ShippedDate: '1997-11-28T00:00:00.000Z',
Freight: 16.71,
ShipRegion: null,
},
{
OrderID: 10756,
OrderDate: '1997-11-27T00:00:00.000Z',
ShippedDate: '1997-12-02T00:00:00.000Z',
Freight: 73.21,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},

{
OrderID: 10757,
OrderDate: '1997-11-27T00:00:00.000Z',
ShippedDate: '1997-12-15T00:00:00.000Z',
Freight: 8.19,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10758,
OrderDate: '1997-11-28T00:00:00.000Z',
ShippedDate: '1997-12-04T00:00:00.000Z',
Freight: 138.17,
ShipRegion: null,
},
{
OrderID: 10759,
OrderDate: '1997-11-28T00:00:00.000Z',
ShippedDate: '1997-12-12T00:00:00.000Z',
Freight: 11.99,
ShipRegion: null,
},
{
OrderID: 10760,
OrderDate: '1997-12-01T00:00:00.000Z',
ShippedDate: '1997-12-10T00:00:00.000Z',
Freight: 155.64,
ShipRegion: null,
},
{
OrderID: 10761,
OrderDate: '1997-12-02T00:00:00.000Z',
ShippedDate: '1997-12-08T00:00:00.000Z',

Freight: 18.66,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10762,
OrderDate: '1997-12-02T00:00:00.000Z',
ShippedDate: '1997-12-09T00:00:00.000Z',
Freight: 328.74,
ShipRegion: null,
},
{
OrderID: 10763,
OrderDate: '1997-12-03T00:00:00.000Z',
ShippedDate: '1997-12-08T00:00:00.000Z',
Freight: 37.35,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10764,
OrderDate: '1997-12-03T00:00:00.000Z',
ShippedDate: '1997-12-08T00:00:00.000Z',
Freight: 145.45,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10765,
OrderDate: '1997-12-04T00:00:00.000Z',
ShippedDate: '1997-12-09T00:00:00.000Z',
Freight: 42.74,
ShipRegion: null,

},
{
OrderID: 10766,
OrderDate: '1997-12-05T00:00:00.000Z',
ShippedDate: '1997-12-09T00:00:00.000Z',
Freight: 157.55,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10767,
OrderDate: '1997-12-05T00:00:00.000Z',
ShippedDate: '1997-12-15T00:00:00.000Z',
Freight: 1.59,
ShipRegion: null,
},
{
OrderID: 10768,
OrderDate: '1997-12-08T00:00:00.000Z',
ShippedDate: '1997-12-15T00:00:00.000Z',
Freight: 146.32,
ShipCountry: 'UK',
},
{
OrderID: 10769,
OrderDate: '1997-12-08T00:00:00.000Z',
ShippedDate: '1997-12-12T00:00:00.000Z',
Freight: 65.06,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10770,

OrderDate: '1997-12-09T00:00:00.000Z',
ShippedDate: '1997-12-17T00:00:00.000Z',
Freight: 5.32,
ShipRegion: 'RJ',
},
{
OrderID: 10771,
OrderDate: '1997-12-10T00:00:00.000Z',
ShippedDate: '1998-01-02T00:00:00.000Z',
Freight: 11.19,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10772,
OrderDate: '1997-12-10T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 91.28,
ShipRegion: null,
},
{
OrderID: 10773,
OrderDate: '1997-12-11T00:00:00.000Z',
ShippedDate: '1997-12-16T00:00:00.000Z',
Freight: 96.43,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10774,
OrderDate: '1997-12-11T00:00:00.000Z',
ShippedDate: '1997-12-12T00:00:00.000Z',
Freight: 48.2,


ShipRegion: null,
},
{
OrderID: 10775,
OrderDate: '1997-12-12T00:00:00.000Z',
ShippedDate: '1997-12-26T00:00:00.000Z',
Freight: 20.25,
ShipCity: 'Butte',
ShipRegion: 'MT',
ShipCountry: 'USA',
},
{
OrderID: 10776,
OrderDate: '1997-12-15T00:00:00.000Z',
ShippedDate: '1997-12-18T00:00:00.000Z',
Freight: 351.53,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10777,
OrderDate: '1997-12-15T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 3.01,
ShipRegion: 'SP',
},
{
OrderID: 10778,
OrderDate: '1997-12-16T00:00:00.000Z',
ShippedDate: '1997-12-24T00:00:00.000Z',
Freight: 6.79,
ShipCity: 'Luleå',
ShipRegion: null,
},

{
OrderID: 10779,
OrderDate: '1997-12-16T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 58.13,
ShipRegion: null,
},
{
OrderID: 10780,
OrderDate: '1997-12-16T00:00:00.000Z',
ShippedDate: '1997-12-25T00:00:00.000Z',
Freight: 42.13,
ShipRegion: 'Lara',
},
{
OrderID: 10781,
OrderDate: '1997-12-17T00:00:00.000Z',
ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 73.16,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 10782,
OrderDate: '1997-12-17T00:00:00.000Z',
ShippedDate: '1997-12-22T00:00:00.000Z',
Freight: 1.1,
ShipRegion: null,
},
{
OrderID: 10783,
OrderDate: '1997-12-18T00:00:00.000Z',

ShippedDate: '1997-12-19T00:00:00.000Z',
Freight: 124.98,
ShipRegion: 'RJ',
},
{
OrderID: 10784,
OrderDate: '1997-12-18T00:00:00.000Z',
ShippedDate: '1997-12-22T00:00:00.000Z',
Freight: 70.09,
ShipRegion: null,
},
{
OrderID: 10785,
OrderDate: '1997-12-18T00:00:00.000Z',
ShippedDate: '1997-12-24T00:00:00.000Z',
Freight: 1.51,
ShipRegion: 'DF',
},
{
OrderID: 10786,
OrderDate: '1997-12-19T00:00:00.000Z',
ShippedDate: '1997-12-23T00:00:00.000Z',
Freight: 110.87,
ShipRegion: 'SP',
},
{
OrderID: 10787,
OrderDate: '1997-12-19T00:00:00.000Z',
ShippedDate: '1997-12-26T00:00:00.000Z',
Freight: 249.93,

ShipRegion: null,
},
{
OrderID: 10788,
OrderDate: '1997-12-22T00:00:00.000Z',
ShippedDate: '1998-01-19T00:00:00.000Z',
Freight: 42.7,
ShipRegion: null,
},
{
OrderID: 10789,
OrderDate: '1997-12-22T00:00:00.000Z',
ShippedDate: '1997-12-31T00:00:00.000Z',
Freight: 100.6,
ShipCity: 'Lille',
ShipRegion: null,
},
{
OrderID: 10790,
OrderDate: '1997-12-22T00:00:00.000Z',
ShippedDate: '1997-12-26T00:00:00.000Z',
Freight: 28.23,
ShipRegion: 'SP',
},
{
OrderID: 10791,
OrderDate: '1997-12-23T00:00:00.000Z',
ShippedDate: '1998-01-01T00:00:00.000Z',
Freight: 16.85,
ShipRegion: null,
},

OrderID: 10792,
OrderDate: '1997-12-23T00:00:00.000Z',
ShippedDate: '1997-12-31T00:00:00.000Z',
Freight: 23.79,
ShipRegion: null,
},
{
OrderID: 10793,
OrderDate: '1997-12-24T00:00:00.000Z',
ShippedDate: '1998-01-08T00:00:00.000Z',
Freight: 4.52,
ShipCountry: 'UK',
},
{
OrderID: 10794,
OrderDate: '1997-12-24T00:00:00.000Z',
ShippedDate: '1998-01-02T00:00:00.000Z',
Freight: 21.49,
ShipRegion: 'RJ',
},
{
OrderID: 10795,
OrderDate: '1997-12-24T00:00:00.000Z',
ShippedDate: '1998-01-20T00:00:00.000Z',
Freight: 126.66,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10796,
OrderDate: '1997-12-25T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 26.52,

},
{
OrderID: 10797,
OrderDate: '1997-12-25T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 33.35,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10798,
OrderDate: '1997-12-26T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 2.33,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10799,
OrderDate: '1997-12-26T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 30.76,
ShipRegion: null,
},
{
OrderID: 10800,
OrderDate: '1997-12-26T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 137.44,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',

},
{
OrderID: 10801,
OrderDate: '1997-12-29T00:00:00.000Z',
ShippedDate: '1997-12-31T00:00:00.000Z',
Freight: 97.09,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10802,
OrderDate: '1997-12-29T00:00:00.000Z',
ShippedDate: '1998-01-02T00:00:00.000Z',
Freight: 257.26,
ShipRegion: null,
},
{
OrderID: 10803,
OrderDate: '1997-12-30T00:00:00.000Z',
ShippedDate: '1998-01-06T00:00:00.000Z',
Freight: 55.23,
ShipRegion: 'SP',
},
{
OrderID: 10804,
OrderDate: '1997-12-30T00:00:00.000Z',
ShippedDate: '1998-01-07T00:00:00.000Z',
Freight: 27.33,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10805,

OrderDate: '1997-12-30T00:00:00.000Z',
ShippedDate: '1998-01-09T00:00:00.000Z',
Freight: 237.34,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10806,
OrderDate: '1997-12-31T00:00:00.000Z',
ShippedDate: '1998-01-05T00:00:00.000Z',
Freight: 22.11,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10807,
OrderDate: '1997-12-31T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 1.36,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 10808,
OrderDate: '1998-01-01T00:00:00.000Z',
ShippedDate: '1998-01-09T00:00:00.000Z',
Freight: 45.53,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10809,
OrderDate: '1998-01-01T00:00:00.000Z',
ShippedDate: '1998-01-07T00:00:00.000Z',
Freight: 4.87,

ShipRegion: 'SP',
},
{
OrderID: 10810,
OrderDate: '1998-01-01T00:00:00.000Z',
ShippedDate: '1998-01-07T00:00:00.000Z',
Freight: 4.33,
ShipRegion: 'BC',
},
{
OrderID: 10811,
OrderDate: '1998-01-02T00:00:00.000Z',
ShippedDate: '1998-01-08T00:00:00.000Z',
Freight: 31.22,
},
{
OrderID: 10812,
OrderDate: '1998-01-02T00:00:00.000Z',
ShippedDate: '1998-01-12T00:00:00.000Z',
Freight: 59.78,
ShipRegion: null,
},
{
OrderID: 10813,
OrderDate: '1998-01-05T00:00:00.000Z',
ShippedDate: '1998-01-09T00:00:00.000Z',
Freight: 47.38,
ShipRegion: 'RJ',
},

{
OrderID: 10814,
OrderDate: '1998-01-05T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 130.94,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10815,
OrderDate: '1998-01-05T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 14.62,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10816,
OrderDate: '1998-01-06T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 719.78,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10817,
OrderDate: '1998-01-06T00:00:00.000Z',
ShippedDate: '1998-01-13T00:00:00.000Z',
Freight: 306.07,
ShipRegion: null,
},
{
OrderID: 10818,
OrderDate: '1998-01-07T00:00:00.000Z',
ShippedDate: '1998-01-12T00:00:00.000Z',

Freight: 65.48,
ShipRegion: null,
},
{
OrderID: 10819,
OrderDate: '1998-01-07T00:00:00.000Z',
ShippedDate: '1998-01-16T00:00:00.000Z',
Freight: 19.76,
ShipRegion: null,
},
{
OrderID: 10820,
OrderDate: '1998-01-07T00:00:00.000Z',
ShippedDate: '1998-01-13T00:00:00.000Z',
Freight: 37.52,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10821,
OrderDate: '1998-01-08T00:00:00.000Z',
ShippedDate: '1998-01-15T00:00:00.000Z',
Freight: 36.68,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10822,
OrderDate: '1998-01-08T00:00:00.000Z',
ShippedDate: '1998-01-16T00:00:00.000Z',
Freight: 7,
ShipRegion: 'WA',

ShipCountry: 'USA',
},
{
OrderID: 10823,
OrderDate: '1998-01-09T00:00:00.000Z',
ShippedDate: '1998-01-13T00:00:00.000Z',
Freight: 163.97,
ShipRegion: 'Lara',
},
{
OrderID: 10824,
OrderDate: '1998-01-09T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 1.23,
ShipRegion: null,
},
{
OrderID: 10825,
OrderDate: '1998-01-09T00:00:00.000Z',
ShippedDate: '1998-01-14T00:00:00.000Z',
Freight: 79.25,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 10826,
OrderDate: '1998-01-12T00:00:00.000Z',
ShippedDate: '1998-02-06T00:00:00.000Z',
Freight: 7.09,
ShipRegion: null,
},
{
OrderID: 10827,

OrderDate: '1998-01-12T00:00:00.000Z',
ShippedDate: '1998-02-06T00:00:00.000Z',
Freight: 63.54,
ShipRegion: null,
},
{
OrderID: 10828,
OrderDate: '1998-01-13T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 90.85,
ShipRegion: null,
},
{
OrderID: 10829,
OrderDate: '1998-01-13T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 154.72,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10830,
OrderDate: '1998-01-13T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 81.83,
ShipRegion: 'SP',
},
{
OrderID: 10831,
OrderDate: '1998-01-14T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 72.19,


ShipRegion: null,
},
{
OrderID: 10832,
OrderDate: '1998-01-14T00:00:00.000Z',
ShippedDate: '1998-01-19T00:00:00.000Z',
Freight: 43.26,
ShipRegion: null,
},
{
OrderID: 10833,
OrderDate: '1998-01-15T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 71.49,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 10834,
OrderDate: '1998-01-15T00:00:00.000Z',
ShippedDate: '1998-01-19T00:00:00.000Z',
Freight: 29.78,
ShipRegion: 'SP',
},
{
OrderID: 10835,
OrderDate: '1998-01-15T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 69.53,
ShipCity: 'Berlin',
ShipRegion: null,
},

{
OrderID: 10836,
OrderDate: '1998-01-16T00:00:00.000Z',
ShippedDate: '1998-01-21T00:00:00.000Z',
Freight: 411.88,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10837,
OrderDate: '1998-01-16T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 13.32,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10838,
OrderDate: '1998-01-19T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 59.28,
},
{
OrderID: 10839,
OrderDate: '1998-01-19T00:00:00.000Z',
ShippedDate: '1998-01-22T00:00:00.000Z',
Freight: 35.43,
ShipRegion: 'SP',
},
{
OrderID: 10840,
OrderDate: '1998-01-19T00:00:00.000Z',

ShippedDate: '1998-02-16T00:00:00.000Z',
Freight: 2.71,
},
{
OrderID: 10841,
OrderDate: '1998-01-20T00:00:00.000Z',
ShippedDate: '1998-01-29T00:00:00.000Z',
Freight: 424.3,
ShipRegion: null,
},
{
OrderID: 10842,
OrderDate: '1998-01-20T00:00:00.000Z',
ShippedDate: '1998-01-29T00:00:00.000Z',
Freight: 54.42,
ShipRegion: null,
},
{
OrderID: 10843,
OrderDate: '1998-01-21T00:00:00.000Z',
ShippedDate: '1998-01-26T00:00:00.000Z',
Freight: 9.26,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10844,
OrderDate: '1998-01-21T00:00:00.000Z',
ShippedDate: '1998-01-26T00:00:00.000Z',
Freight: 25.22,

ShipRegion: null,
},
{
OrderID: 10845,
OrderDate: '1998-01-21T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 212.98,
ShipRegion: null,
},
{
OrderID: 10846,
OrderDate: '1998-01-22T00:00:00.000Z',
ShippedDate: '1998-01-23T00:00:00.000Z',
Freight: 56.46,
ShipRegion: null,
},
{
OrderID: 10847,
OrderDate: '1998-01-22T00:00:00.000Z',
ShippedDate: '1998-02-10T00:00:00.000Z',
Freight: 487.57,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10848,
OrderDate: '1998-01-23T00:00:00.000Z',
ShippedDate: '1998-01-29T00:00:00.000Z',
Freight: 38.24,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},

OrderID: 10849,
OrderDate: '1998-01-23T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 0.56,
ShipRegion: null,
},
{
OrderID: 10850,
OrderDate: '1998-01-23T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 49.19,
ShipCity: 'Lyon',
ShipRegion: null,
},
{
OrderID: 10851,
OrderDate: '1998-01-26T00:00:00.000Z',
ShippedDate: '1998-02-02T00:00:00.000Z',
Freight: 160.55,
ShipRegion: 'RJ',
},
{
OrderID: 10852,
OrderDate: '1998-01-26T00:00:00.000Z',
ShippedDate: '1998-01-30T00:00:00.000Z',
Freight: 174.05,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10853,
OrderDate: '1998-01-27T00:00:00.000Z',
ShippedDate: '1998-02-03T00:00:00.000Z',
Freight: 53.83,


ShipRegion: null,
},
{
OrderID: 10854,
OrderDate: '1998-01-27T00:00:00.000Z',
ShippedDate: '1998-02-05T00:00:00.000Z',
Freight: 100.22,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10855,
OrderDate: '1998-01-27T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 170.97,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10856,
OrderDate: '1998-01-28T00:00:00.000Z',
ShippedDate: '1998-02-10T00:00:00.000Z',
Freight: 58.43,
ShipRegion: null,
},
{
OrderID: 10857,
OrderDate: '1998-01-28T00:00:00.000Z',
ShippedDate: '1998-02-06T00:00:00.000Z',
Freight: 188.85,
ShipCity: 'Luleå',
ShipRegion: null,

},
{
OrderID: 10858,
OrderDate: '1998-01-29T00:00:00.000Z',
ShippedDate: '1998-02-03T00:00:00.000Z',
Freight: 52.51,
ShipRegion: null,
},
{
OrderID: 10859,
OrderDate: '1998-01-29T00:00:00.000Z',
ShippedDate: '1998-02-02T00:00:00.000Z',
Freight: 76.1,
ShipRegion: null,
},
{
OrderID: 10860,
OrderDate: '1998-01-29T00:00:00.000Z',
ShippedDate: '1998-02-04T00:00:00.000Z',
Freight: 19.26,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10861,
OrderDate: '1998-01-30T00:00:00.000Z',
ShippedDate: '1998-02-17T00:00:00.000Z',
Freight: 14.93,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10862,

OrderDate: '1998-01-30T00:00:00.000Z',
ShippedDate: '1998-02-02T00:00:00.000Z',
Freight: 53.23,
ShipRegion: null,
},
{
OrderID: 10863,
OrderDate: '1998-02-02T00:00:00.000Z',
ShippedDate: '1998-02-17T00:00:00.000Z',
Freight: 30.26,
},
{
OrderID: 10864,
OrderDate: '1998-02-02T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 3.04,
ShipCountry: 'UK',
},
{
OrderID: 10865,
OrderDate: '1998-02-02T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 348.14,
ShipRegion: null,
},
{
OrderID: 10866,
OrderDate: '1998-02-03T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 109.11,

ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10867,
OrderDate: '1998-02-03T00:00:00.000Z',
ShippedDate: '1998-02-11T00:00:00.000Z',
Freight: 1.93,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10868,
OrderDate: '1998-02-04T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 191.27,
ShipRegion: 'SP',
},
{
OrderID: 10869,
OrderDate: '1998-02-04T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 143.28,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10870,
OrderDate: '1998-02-04T00:00:00.000Z',
ShippedDate: '1998-02-13T00:00:00.000Z',
Freight: 12.04,
ShipRegion: null,
},

{
OrderID: 10871,
OrderDate: '1998-02-05T00:00:00.000Z',
ShippedDate: '1998-02-10T00:00:00.000Z',
Freight: 112.27,
ShipRegion: null,
},
{
OrderID: 10872,
OrderDate: '1998-02-05T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 175.32,
ShipRegion: null,
},
{
OrderID: 10873,
OrderDate: '1998-02-06T00:00:00.000Z',
ShippedDate: '1998-02-09T00:00:00.000Z',
Freight: 0.82,
ShipRegion: null,
},
{
OrderID: 10874,
OrderDate: '1998-02-06T00:00:00.000Z',
ShippedDate: '1998-02-11T00:00:00.000Z',
Freight: 19.58,
ShipRegion: null,
},
{
OrderID: 10875,
OrderDate: '1998-02-06T00:00:00.000Z',
ShippedDate: '1998-03-03T00:00:00.000Z',

Freight: 32.37,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10876,
OrderDate: '1998-02-09T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 60.42,
ShipRegion: null,
},
{
OrderID: 10877,
OrderDate: '1998-02-09T00:00:00.000Z',
ShippedDate: '1998-02-19T00:00:00.000Z',
Freight: 38.06,
ShipRegion: 'RJ',
},
{
OrderID: 10878,
OrderDate: '1998-02-10T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 46.69,
ShipRegion: null,
},
{
OrderID: 10879,
OrderDate: '1998-02-10T00:00:00.000Z',
ShippedDate: '1998-02-12T00:00:00.000Z',
Freight: 8.5,
ShipRegion: null,

},
{
OrderID: 10880,
OrderDate: '1998-02-10T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 88.01,
ShipRegion: null,
},
{
OrderID: 10881,
OrderDate: '1998-02-11T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 2.84,
ShipRegion: null,
},
{
OrderID: 10882,
OrderDate: '1998-02-11T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 23.1,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10883,
OrderDate: '1998-02-12T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 0.53,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10884,

OrderDate: '1998-02-12T00:00:00.000Z',
ShippedDate: '1998-02-13T00:00:00.000Z',
Freight: 90.97,
ShipRegion: 'CA',
ShipCountry: 'USA',
},
{
OrderID: 10885,
OrderDate: '1998-02-12T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 5.64,
ShipRegion: null,
},
{
OrderID: 10886,
OrderDate: '1998-02-13T00:00:00.000Z',
ShippedDate: '1998-03-02T00:00:00.000Z',
Freight: 4.99,
ShipRegion: 'RJ',
},
{
OrderID: 10887,
OrderDate: '1998-02-13T00:00:00.000Z',
ShippedDate: '1998-02-16T00:00:00.000Z',
Freight: 1.25,
ShipRegion: null,
},
{
OrderID: 10888,
OrderDate: '1998-02-16T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 51.87,


ShipRegion: null,
},
{
OrderID: 10889,
OrderDate: '1998-02-16T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 280.61,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10890,
OrderDate: '1998-02-16T00:00:00.000Z',
ShippedDate: '1998-02-18T00:00:00.000Z',
Freight: 32.76,
ShipCity: 'Nantes',
ShipRegion: null,
},
{
OrderID: 10891,
OrderDate: '1998-02-17T00:00:00.000Z',
ShippedDate: '1998-02-19T00:00:00.000Z',
Freight: 20.37,
ShipRegion: null,
},
{
OrderID: 10892,
OrderDate: '1998-02-17T00:00:00.000Z',
ShippedDate: '1998-02-19T00:00:00.000Z',
Freight: 120.27,
ShipRegion: null,
},

{
OrderID: 10893,
OrderDate: '1998-02-18T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 77.78,
ShipRegion: null,
},
{
OrderID: 10894,
OrderDate: '1998-02-18T00:00:00.000Z',
ShippedDate: '1998-02-20T00:00:00.000Z',
Freight: 116.13,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10895,
OrderDate: '1998-02-18T00:00:00.000Z',
ShippedDate: '1998-02-23T00:00:00.000Z',
Freight: 162.75,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10896,
OrderDate: '1998-02-19T00:00:00.000Z',
ShippedDate: '1998-02-27T00:00:00.000Z',
Freight: 32.45,
ShipRegion: null,
},
{
OrderID: 10897,
OrderDate: '1998-02-19T00:00:00.000Z',

ShippedDate: '1998-02-25T00:00:00.000Z',
Freight: 603.54,
ShipCity: 'Cork',
},
{
OrderID: 10898,
OrderDate: '1998-02-20T00:00:00.000Z',
ShippedDate: '1998-03-06T00:00:00.000Z',
Freight: 1.27,
ShipRegion: null,
},
{
OrderID: 10899,
OrderDate: '1998-02-20T00:00:00.000Z',
ShippedDate: '1998-02-26T00:00:00.000Z',
Freight: 1.21,
ShipRegion: 'Lara',
},
{
OrderID: 10900,
OrderDate: '1998-02-20T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 1.66,
ShipRegion: 'SP',
},
{
OrderID: 10901,
OrderDate: '1998-02-23T00:00:00.000Z',
ShippedDate: '1998-02-26T00:00:00.000Z',
Freight: 62.09,

},
{
OrderID: 10902,
OrderDate: '1998-02-23T00:00:00.000Z',
ShippedDate: '1998-03-03T00:00:00.000Z',
Freight: 44.15,
ShipRegion: null,
},
{
OrderID: 10903,
OrderDate: '1998-02-24T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 36.71,
ShipRegion: 'RJ',
},
{
OrderID: 10904,
OrderDate: '1998-02-24T00:00:00.000Z',
ShippedDate: '1998-02-27T00:00:00.000Z',
Freight: 162.95,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 10905,
OrderDate: '1998-02-24T00:00:00.000Z',
ShippedDate: '1998-03-06T00:00:00.000Z',
Freight: 13.72,
ShipRegion: 'SP',
},

OrderID: 10906,
OrderDate: '1998-02-25T00:00:00.000Z',
ShippedDate: '1998-03-03T00:00:00.000Z',
Freight: 26.29,
ShipRegion: null,
},
{
OrderID: 10907,
OrderDate: '1998-02-25T00:00:00.000Z',
ShippedDate: '1998-02-27T00:00:00.000Z',
Freight: 9.19,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 10908,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-06T00:00:00.000Z',
Freight: 32.96,
ShipRegion: null,
},
{
OrderID: 10909,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-10T00:00:00.000Z',
Freight: 53.05,
ShipRegion: null,
},
{
OrderID: 10910,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 38.11,


ShipRegion: null,
},
{
OrderID: 10911,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-05T00:00:00.000Z',
Freight: 38.19,
ShipRegion: null,
},
{
OrderID: 10912,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 580.91,
ShipCity: 'Cork',
},
{
OrderID: 10913,
OrderDate: '1998-02-26T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 33.05,
ShipRegion: 'SP',
},
{
OrderID: 10914,
OrderDate: '1998-02-27T00:00:00.000Z',
ShippedDate: '1998-03-02T00:00:00.000Z',
Freight: 21.19,
ShipRegion: 'SP',

},
{
OrderID: 10915,
OrderDate: '1998-02-27T00:00:00.000Z',
ShippedDate: '1998-03-02T00:00:00.000Z',
Freight: 3.51,
ShipRegion: null,
},
{
OrderID: 10916,
OrderDate: '1998-02-27T00:00:00.000Z',
ShippedDate: '1998-03-09T00:00:00.000Z',
Freight: 63.77,
ShipRegion: null,
},
{
OrderID: 10917,
OrderDate: '1998-03-02T00:00:00.000Z',
ShippedDate: '1998-03-11T00:00:00.000Z',
Freight: 8.29,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10918,
OrderDate: '1998-03-02T00:00:00.000Z',
ShippedDate: '1998-03-11T00:00:00.000Z',
Freight: 48.83,
ShipRegion: 'BC',
},
{
OrderID: 10919,

OrderDate: '1998-03-02T00:00:00.000Z',
ShippedDate: '1998-03-04T00:00:00.000Z',
Freight: 19.8,
},
{
OrderID: 10920,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-09T00:00:00.000Z',
Freight: 29.61,
ShipCountry: 'UK',
},
{
OrderID: 10921,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-09T00:00:00.000Z',
Freight: 176.48,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10922,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-05T00:00:00.000Z',
Freight: 62.74,
ShipRegion: 'RJ',
},
{
OrderID: 10923,
OrderDate: '1998-03-03T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 68.26,

ShipRegion: null,
},
{
OrderID: 10924,
OrderDate: '1998-03-04T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 151.52,
ShipCity: 'Luleå',
ShipRegion: null,
},
{
OrderID: 10925,
OrderDate: '1998-03-04T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 2.27,
ShipRegion: 'RJ',
},
{
OrderID: 10926,
OrderDate: '1998-03-04T00:00:00.000Z',
ShippedDate: '1998-03-11T00:00:00.000Z',
Freight: 39.92,
ShipRegion: null,
},
{
OrderID: 10927,
OrderDate: '1998-03-05T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 19.79,
ShipRegion: null,
},

{
OrderID: 10928,
OrderDate: '1998-03-05T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 1.36,
ShipRegion: null,
},
{
OrderID: 10929,
OrderDate: '1998-03-05T00:00:00.000Z',
ShippedDate: '1998-03-12T00:00:00.000Z',
Freight: 33.93,
ShipRegion: null,
},
{
OrderID: 10930,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 15.55,
ShipRegion: null,
},
{
OrderID: 10931,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 13.6,
ShipRegion: null,
},
{
OrderID: 10932,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-24T00:00:00.000Z',

Freight: 134.64,
ShipRegion: null,
},
{
OrderID: 10933,
OrderDate: '1998-03-06T00:00:00.000Z',
ShippedDate: '1998-03-16T00:00:00.000Z',
Freight: 54.15,
ShipCity: 'Cowes',
ShipCountry: 'UK',
},
{
OrderID: 10934,
OrderDate: '1998-03-09T00:00:00.000Z',
ShippedDate: '1998-03-12T00:00:00.000Z',
Freight: 32.01,
ShipRegion: null,
},
{
OrderID: 10935,
OrderDate: '1998-03-09T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 47.59,
ShipRegion: 'SP',
},
{
OrderID: 10936,
OrderDate: '1998-03-09T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 33.68,
ShipCity: 'Eugene',
ShipRegion: 'OR',

ShipCountry: 'USA',
},
{
OrderID: 10937,
OrderDate: '1998-03-10T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 31.51,
ShipRegion: null,
},
{
OrderID: 10938,
OrderDate: '1998-03-10T00:00:00.000Z',
ShippedDate: '1998-03-16T00:00:00.000Z',
Freight: 31.89,
ShipRegion: null,
},
{
OrderID: 10939,
OrderDate: '1998-03-10T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 76.33,
ShipRegion: null,
},
{
OrderID: 10940,
OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 19.77,
ShipRegion: null,
},
{
OrderID: 10941,

OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 400.81,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10942,
OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 17.95,
ShipRegion: null,
},
{
OrderID: 10943,
OrderDate: '1998-03-11T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 2.17,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10944,
OrderDate: '1998-03-12T00:00:00.000Z',
ShippedDate: '1998-03-13T00:00:00.000Z',
Freight: 52.92,
ShipRegion: 'BC',
},
{
OrderID: 10945,
OrderDate: '1998-03-12T00:00:00.000Z',
ShippedDate: '1998-03-18T00:00:00.000Z',
Freight: 10.22,


ShipRegion: null,
},
{
OrderID: 10946,
OrderDate: '1998-03-12T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 27.2,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10947,
OrderDate: '1998-03-13T00:00:00.000Z',
ShippedDate: '1998-03-16T00:00:00.000Z',
Freight: 3.26,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10948,
OrderDate: '1998-03-13T00:00:00.000Z',
ShippedDate: '1998-03-19T00:00:00.000Z',
Freight: 23.39,
ShipRegion: null,
},
{
OrderID: 10949,
OrderDate: '1998-03-13T00:00:00.000Z',
ShippedDate: '1998-03-17T00:00:00.000Z',
Freight: 74.44,
ShipRegion: 'BC',
},

{
OrderID: 10950,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 2.5,
ShipRegion: null,
},
{
OrderID: 10951,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-04-07T00:00:00.000Z',
Freight: 30.85,
ShipRegion: null,
},
{
OrderID: 10952,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-03-24T00:00:00.000Z',
Freight: 40.42,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 10953,
OrderDate: '1998-03-16T00:00:00.000Z',
ShippedDate: '1998-03-25T00:00:00.000Z',
Freight: 23.72,
ShipCountry: 'UK',
},
{
OrderID: 10954,
OrderDate: '1998-03-17T00:00:00.000Z',

ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 27.91,
},
{
OrderID: 10955,
OrderDate: '1998-03-17T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 3.26,
ShipRegion: null,
},
{
OrderID: 10956,
OrderDate: '1998-03-17T00:00:00.000Z',
ShippedDate: '1998-03-20T00:00:00.000Z',
Freight: 44.65,
ShipRegion: null,
},
{
OrderID: 10957,
OrderDate: '1998-03-18T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 105.36,
},
{
OrderID: 10958,
OrderDate: '1998-03-18T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 49.56,

ShipRegion: null,
},
{
OrderID: 10959,
OrderDate: '1998-03-18T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 4.98,
ShipRegion: 'SP',
},
{
OrderID: 10960,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 2.08,
},
{
OrderID: 10961,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-03-30T00:00:00.000Z',
Freight: 104.47,
ShipRegion: 'SP',
},
{
OrderID: 10962,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-03-23T00:00:00.000Z',
Freight: 275.79,
ShipRegion: null,
},

OrderID: 10963,
OrderDate: '1998-03-19T00:00:00.000Z',
ShippedDate: '1998-03-26T00:00:00.000Z',
Freight: 2.7,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 10964,
OrderDate: '1998-03-20T00:00:00.000Z',
ShippedDate: '1998-03-24T00:00:00.000Z',
Freight: 87.38,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 10965,
OrderDate: '1998-03-20T00:00:00.000Z',
ShippedDate: '1998-03-30T00:00:00.000Z',
Freight: 144.38,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 10966,
OrderDate: '1998-03-20T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 27.19,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 10967,
OrderDate: '1998-03-23T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 62.22,


ShipRegion: null,
},
{
OrderID: 10968,
OrderDate: '1998-03-23T00:00:00.000Z',
ShippedDate: '1998-04-01T00:00:00.000Z',
Freight: 74.6,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10969,
OrderDate: '1998-03-23T00:00:00.000Z',
ShippedDate: '1998-03-30T00:00:00.000Z',
Freight: 0.21,
ShipRegion: 'SP',
},
{
OrderID: 10970,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 16.16,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 10971,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 121.82,
ShipCity: 'Nantes',
ShipRegion: null,

},
{
OrderID: 10972,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-03-26T00:00:00.000Z',
Freight: 0.02,
ShipRegion: null,
},
{
OrderID: 10973,
OrderDate: '1998-03-24T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 15.17,
ShipRegion: null,
},
{
OrderID: 10974,
OrderDate: '1998-03-25T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 12.96,
ShipCity: 'Lander',
ShipRegion: 'WY',
ShipCountry: 'USA',
},
{
OrderID: 10975,
OrderDate: '1998-03-25T00:00:00.000Z',
ShippedDate: '1998-03-27T00:00:00.000Z',
Freight: 32.27,
ShipRegion: 'BC',
},
{
OrderID: 10976,

OrderDate: '1998-03-25T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 37.97,
},
{
OrderID: 10977,
OrderDate: '1998-03-26T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 208.5,
ShipRegion: null,
},
{
OrderID: 10978,
OrderDate: '1998-03-26T00:00:00.000Z',
ShippedDate: '1998-04-23T00:00:00.000Z',
Freight: 32.82,
ShipRegion: null,
},
{
OrderID: 10979,
OrderDate: '1998-03-26T00:00:00.000Z',
ShippedDate: '1998-03-31T00:00:00.000Z',
Freight: 353.07,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10980,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-17T00:00:00.000Z',
Freight: 1.26,

ShipRegion: null,
},
{
OrderID: 10981,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 193.37,
ShipRegion: 'RJ',
},
{
OrderID: 10982,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 14.01,
ShipRegion: 'BC',
},
{
OrderID: 10983,
OrderDate: '1998-03-27T00:00:00.000Z',
ShippedDate: '1998-04-06T00:00:00.000Z',
Freight: 657.54,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 10984,
OrderDate: '1998-03-30T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 211.22,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},

{
OrderID: 10985,
OrderDate: '1998-03-30T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',
Freight: 91.51,
ShipCity: 'Cork',
},
{
OrderID: 10986,
OrderDate: '1998-03-30T00:00:00.000Z',
ShippedDate: '1998-04-21T00:00:00.000Z',
Freight: 217.86,
ShipRegion: null,
},
{
OrderID: 10987,
OrderDate: '1998-03-31T00:00:00.000Z',
ShippedDate: '1998-04-06T00:00:00.000Z',
Freight: 185.48,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 10988,
OrderDate: '1998-03-31T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 61.14,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 10989,
OrderDate: '1998-03-31T00:00:00.000Z',
ShippedDate: '1998-04-02T00:00:00.000Z',

Freight: 34.76,
ShipRegion: 'RJ',
},
{
OrderID: 10990,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-07T00:00:00.000Z',
Freight: 117.61,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 10991,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-07T00:00:00.000Z',
Freight: 38.51,
ShipRegion: null,
},
{
OrderID: 10992,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-03T00:00:00.000Z',
Freight: 4.27,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 10993,
OrderDate: '1998-04-01T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 8.81,
ShipRegion: null,

},
{
OrderID: 10994,
OrderDate: '1998-04-02T00:00:00.000Z',
ShippedDate: '1998-04-09T00:00:00.000Z',
Freight: 65.53,
ShipCity: 'Århus',
ShipRegion: null,
},
{
OrderID: 10995,
OrderDate: '1998-04-02T00:00:00.000Z',
ShippedDate: '1998-04-06T00:00:00.000Z',
Freight: 46,
ShipRegion: null,
},
{
OrderID: 10996,
OrderDate: '1998-04-02T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 1.12,
ShipRegion: null,
},
{
OrderID: 10997,
OrderDate: '1998-04-03T00:00:00.000Z',
ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 73.91,
ShipRegion: 'Lara',
},
{
OrderID: 10998,

OrderDate: '1998-04-03T00:00:00.000Z',
ShippedDate: '1998-04-17T00:00:00.000Z',
Freight: 20.31,
ShipRegion: null,
},
{
OrderID: 10999,
OrderDate: '1998-04-03T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 96.35,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 11000,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-14T00:00:00.000Z',
Freight: 55.12,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
{
OrderID: 11001,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-14T00:00:00.000Z',
Freight: 197.3,
ShipRegion: null,
},
{
OrderID: 11002,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-16T00:00:00.000Z',
Freight: 141.16,


ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11003,
OrderDate: '1998-04-06T00:00:00.000Z',
ShippedDate: '1998-04-08T00:00:00.000Z',
Freight: 14.91,
ShipCity: 'Butte',
ShipRegion: 'MT',
ShipCountry: 'USA',
},
{
OrderID: 11004,
OrderDate: '1998-04-07T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 44.84,
ShipRegion: null,
},
{
OrderID: 11005,
OrderDate: '1998-04-07T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 0.75,
ShipRegion: null,
},
{
OrderID: 11006,
OrderDate: '1998-04-07T00:00:00.000Z',
ShippedDate: '1998-04-15T00:00:00.000Z',
Freight: 25.19,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},

{
OrderID: 11007,
OrderDate: '1998-04-08T00:00:00.000Z',
ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 202.24,
ShipCity: 'Lisboa',
ShipRegion: null,
},
{
OrderID: 11008,
OrderDate: '1998-04-08T00:00:00.000Z',
ShippedDate: null,
Freight: 79.46,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 11009,
OrderDate: '1998-04-08T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 59.11,
ShipRegion: null,
},
{
OrderID: 11010,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-21T00:00:00.000Z',
Freight: 28.71,
ShipRegion: null,
},
{
OrderID: 11011,
OrderDate: '1998-04-09T00:00:00.000Z',

ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 1.21,
ShipCity: 'Berlin',
ShipRegion: null,
},
{
OrderID: 11012,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-17T00:00:00.000Z',
Freight: 242.95,
ShipRegion: null,
},
{
OrderID: 11013,
OrderDate: '1998-04-09T00:00:00.000Z',
ShippedDate: '1998-04-10T00:00:00.000Z',
Freight: 32.99,
ShipCity: 'Madrid',
ShipRegion: null,
},
{
OrderID: 11014,
OrderDate: '1998-04-10T00:00:00.000Z',
ShippedDate: '1998-04-15T00:00:00.000Z',
Freight: 23.6,
},
{
OrderID: 11015,
OrderDate: '1998-04-10T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 4.62,

ShipRegion: null,
},
{
OrderID: 11016,
OrderDate: '1998-04-10T00:00:00.000Z',
ShippedDate: '1998-04-13T00:00:00.000Z',
Freight: 33.8,
ShipCountry: 'UK',
},
{
OrderID: 11017,
OrderDate: '1998-04-13T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 754.26,
ShipCity: 'Graz',
ShipRegion: null,
},
{
OrderID: 11018,
OrderDate: '1998-04-13T00:00:00.000Z',
ShippedDate: '1998-04-16T00:00:00.000Z',
Freight: 11.65,
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11019,
OrderDate: '1998-04-13T00:00:00.000Z',
ShippedDate: null,
Freight: 3.17,
ShipRegion: null,
},

OrderID: 11020,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-04-16T00:00:00.000Z',
Freight: 43.3,
ShipCity: 'Köln',
ShipRegion: null,
},
{
OrderID: 11021,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-04-21T00:00:00.000Z',
Freight: 297.18,
ShipRegion: null,
},
{
OrderID: 11022,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 6.27,
ShipRegion: 'RJ',
},
{
OrderID: 11023,
OrderDate: '1998-04-14T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 123.83,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11024,
OrderDate: '1998-04-15T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 74.36,


ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11025,
OrderDate: '1998-04-15T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 29.17,
ShipCity: 'Oulu',
ShipRegion: null,
},
{
OrderID: 11026,
OrderDate: '1998-04-15T00:00:00.000Z',
ShippedDate: '1998-04-28T00:00:00.000Z',
Freight: 47.09,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 11027,
OrderDate: '1998-04-16T00:00:00.000Z',
ShippedDate: '1998-04-20T00:00:00.000Z',
Freight: 52.52,
ShipRegion: 'BC',
},
{
OrderID: 11028,
OrderDate: '1998-04-16T00:00:00.000Z',
ShippedDate: '1998-04-22T00:00:00.000Z',
Freight: 29.59,
ShipRegion: null,

},
{
OrderID: 11029,
OrderDate: '1998-04-16T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 47.84,
ShipCity: 'Bern',
ShipRegion: null,
},
{
OrderID: 11030,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 830.75,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11031,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 227.22,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11032,
OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-23T00:00:00.000Z',
Freight: 606.19,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 11033,

OrderDate: '1998-04-17T00:00:00.000Z',
ShippedDate: '1998-04-23T00:00:00.000Z',
Freight: 84.74,
ShipRegion: null,
},
{
OrderID: 11034,
OrderDate: '1998-04-20T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 40.32,
ShipRegion: 'AK',
ShipCountry: 'USA',
},
{
OrderID: 11035,
OrderDate: '1998-04-20T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',
Freight: 0.17,
ShipRegion: null,
},
{
OrderID: 11036,
OrderDate: '1998-04-20T00:00:00.000Z',
ShippedDate: '1998-04-22T00:00:00.000Z',
Freight: 149.47,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 11037,
OrderDate: '1998-04-21T00:00:00.000Z',
ShippedDate: '1998-04-27T00:00:00.000Z',
Freight: 3.2,

ShipRegion: null,
},
{
OrderID: 11038,
OrderDate: '1998-04-21T00:00:00.000Z',
ShippedDate: '1998-04-30T00:00:00.000Z',
Freight: 29.59,
ShipRegion: null,
},
{
OrderID: 11039,
OrderDate: '1998-04-21T00:00:00.000Z',
ShippedDate: null,
Freight: 65,
},
{
OrderID: 11040,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: null,
Freight: 18.84,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11041,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: '1998-04-28T00:00:00.000Z',
Freight: 48.22,
ShipCity: 'Bern',
ShipRegion: null,
},

{
OrderID: 11042,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 29.99,
ShipRegion: 'SP',
},
{
OrderID: 11043,
OrderDate: '1998-04-22T00:00:00.000Z',
ShippedDate: '1998-04-29T00:00:00.000Z',
Freight: 8.8,
ShipCity: 'Paris',
ShipRegion: null,
},
{
OrderID: 11044,
OrderDate: '1998-04-23T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 8.72,
ShipRegion: null,
},
{
OrderID: 11045,
OrderDate: '1998-04-23T00:00:00.000Z',
ShippedDate: null,
Freight: 70.58,
ShipRegion: 'BC',
},
{
OrderID: 11046,
OrderDate: '1998-04-23T00:00:00.000Z',
ShippedDate: '1998-04-24T00:00:00.000Z',

Freight: 71.64,
ShipRegion: null,
},
{
OrderID: 11047,
OrderDate: '1998-04-24T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 46.62,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11048,
OrderDate: '1998-04-24T00:00:00.000Z',
ShippedDate: '1998-04-30T00:00:00.000Z',
Freight: 24.12,
ShipRegion: 'BC',
},
{
OrderID: 11049,
OrderDate: '1998-04-24T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 8.34,
ShipRegion: 'SP',
},
{
OrderID: 11050,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: '1998-05-05T00:00:00.000Z',
Freight: 59.41,
ShipRegion: null,

},
{
OrderID: 11051,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: null,
Freight: 2.79,
ShipRegion: null,
},
{
OrderID: 11052,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 67.26,
ShipRegion: 'RJ',
},
{
OrderID: 11053,
OrderDate: '1998-04-27T00:00:00.000Z',
ShippedDate: '1998-04-29T00:00:00.000Z',
Freight: 53.05,
ShipRegion: null,
},
{
OrderID: 11054,
OrderDate: '1998-04-28T00:00:00.000Z',
ShippedDate: null,
Freight: 0.33,
ShipRegion: null,
},
{
OrderID: 11055,

OrderDate: '1998-04-28T00:00:00.000Z',
ShippedDate: '1998-05-05T00:00:00.000Z',
Freight: 120.92,
},
{
OrderID: 11056,
OrderDate: '1998-04-28T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 278.96,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11057,
OrderDate: '1998-04-29T00:00:00.000Z',
ShippedDate: '1998-05-01T00:00:00.000Z',
Freight: 4.13,
ShipCity: 'London',
ShipRegion: null,
ShipCountry: 'UK',
},
{
OrderID: 11058,
OrderDate: '1998-04-29T00:00:00.000Z',
ShippedDate: null,
Freight: 31.14,
ShipRegion: null,
},
{
OrderID: 11059,
OrderDate: '1998-04-29T00:00:00.000Z',
ShippedDate: null,
Freight: 85.8,


ShipRegion: 'RJ',
},
{
OrderID: 11060,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 10.98,
ShipCity: 'Torino',
ShipRegion: null,
},
{
OrderID: 11061,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: null,
Freight: 14.01,
ShipCity: 'Eugene',
ShipRegion: 'OR',
ShipCountry: 'USA',
},
{
OrderID: 11062,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: null,
Freight: 29.93,
ShipRegion: null,
},
{
OrderID: 11063,
OrderDate: '1998-04-30T00:00:00.000Z',
ShippedDate: '1998-05-06T00:00:00.000Z',
Freight: 81.73,
ShipCity: 'Cork',
},

{
OrderID: 11064,
OrderDate: '1998-05-01T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 30.09,
ShipCity: 'Boise',
ShipRegion: 'ID',
ShipCountry: 'USA',
},
{
OrderID: 11065,
OrderDate: '1998-05-01T00:00:00.000Z',
ShippedDate: null,
Freight: 12.91,
ShipRegion: 'Lara',
},
{
OrderID: 11066,
OrderDate: '1998-05-01T00:00:00.000Z',
ShippedDate: '1998-05-04T00:00:00.000Z',
Freight: 44.72,
ShipRegion: 'WA',
ShipCountry: 'USA',
},
{
OrderID: 11067,
OrderDate: '1998-05-04T00:00:00.000Z',
ShippedDate: '1998-05-06T00:00:00.000Z',
Freight: 7.98,
ShipCity: 'Aachen',
ShipRegion: null,
},
{
OrderID: 11068,
OrderDate: '1998-05-04T00:00:00.000Z',

ShippedDate: null,
Freight: 81.75,
ShipRegion: 'SP',
},
{
OrderID: 11069,
OrderDate: '1998-05-04T00:00:00.000Z',
ShippedDate: '1998-05-06T00:00:00.000Z',
Freight: 15.67,
ShipRegion: null,
},
{
OrderID: 11070,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 136,
ShipRegion: null,
},
{
OrderID: 11071,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 0.93,
ShipRegion: 'Lara',
},
{
OrderID: 11072,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 258.64,
ShipCity: 'Graz',

ShipRegion: null,
},
{
OrderID: 11073,
OrderDate: '1998-05-05T00:00:00.000Z',
ShippedDate: null,
Freight: 24.95,
ShipRegion: null,
},
{
OrderID: 11074,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 18.44,
ShipRegion: null,
},
{
OrderID: 11075,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 6.19,
ShipRegion: null,
},
{
OrderID: 11076,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 38.28,
ShipRegion: null,
},

OrderID: 11077,
OrderDate: '1998-05-06T00:00:00.000Z',
ShippedDate: null,
Freight: 8.53,
ShipRegion: 'NM',
ShipCountry: 'USA',
},
]);
export const orderData: Object[] = JSON.parse(

stringData,
(field: any, value: any) => {
let dupValue: any = value;
if (
typeof value === 'string' &&
/^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-
])(\d\d):?(\d\d))?$/.test(
value
)
) {
let arr: any = dupValue.split(/[^0-9]/);
let arg: any = parseInt(arr[4], 10);
let arg1: any = parseInt(arr[5], 10);
value = new Date(

parseInt(arr[1], 10) - 1,
arg,
arg1
);
}
return value;
}
);
export const customerData: Object[] = [
{
ContactName: 'Maria ',
CompanyName: 'Alfreds Futterkiste',
Address: 'Obere Str. 57',
Country: 'Germany',
},
{
ContactName: 'Ana Trujillo',
CompanyName: 'Ana Trujillo Emparedados y helados',
Address: 'Avda. de la Constitución 2222',
Country: 'Mexico',
},

{
ContactName: 'Antonio Moreno',
CompanyName: 'Antonio Moreno Taquería',
Address: 'Mataderos 2312',
Country: 'Mexico',
},
{
ContactName: 'Thomas Hardy',
CompanyName: 'Around the Horn',
Address: '120 Hanover Sq.',
Country: 'UK',
},
{
ContactName: 'Christina Berglund',
CompanyName: 'Berglunds snabbköp',
Address: 'Berguvsvägen 8',
Country: 'Sweden',
},
{

Syncfusion Ej2 React Part5

Uploaded by

Copyright:

Available Formats

Syncfusion Ej2 React Part5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Syncfusion Ej2 React Part5

Uploaded by

Copyright:

Available Formats

Essential Studio

for EJ2 React

Copyright © 2001 -2024 Syncfusion Inc. 25

To install File Manager component, use the following command

• To include the File Manager component in application import the FileManagerComponent

Copyright © 2001 -2024 Syncfusion Inc. 26

Copyright © 2001 -2024 Syncfusion Inc. 27

File Download support

Copyright © 2001 -2024 Syncfusion Inc. 28

import * as React from 'react';

Copyright © 2001 -2024 Syncfusion Inc. 29

Copyright © 2001 -2024 Syncfusion Inc. 30

Injecting services for Overview

Copyright © 2001 -2024 Syncfusion Inc. 31

Copyright © 2001 -2024 Syncfusion Inc. 32

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject

Maintaining component state on page reload

• Previous view of the File Manager - View

Copyright © 2001 -2024 Syncfusion Inc. 33

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject

Copyright © 2001 -2024 Syncfusion Inc. 34

Copyright © 2001 -2024 Syncfusion Inc. 35

getImageUrl: hostUrl + "api/FileManager/GetImage",

Specifying the current path of the File Manager

Copyright © 2001 -2024 Syncfusion Inc. 36

• Node.js 18.17 or later.

Create a Next.js application

Copyright © 2001 -2024 Syncfusion Inc. 37

2.Select the required packages.

Copyright © 2001 -2024 Syncfusion Inc. 38

Import Syncfusion CSS styles

Run the application

Copyright © 2001 -2024 Syncfusion Inc. 39

• View (Large Icons view for browsing files and folders),

• View (Large Icons view for browsing files and folders),

Copyright © 2001 -2024 Syncfusion Inc. 40

Files and folders navigation

Copyright © 2001 -2024 Syncfusion Inc. 41

• Large Icons View

Copyright © 2001 -2024 Syncfusion Inc. 42

Copyright © 2001 -2024 Syncfusion Inc. 43

File operations in React File manager component

Copyright © 2001 -2024 Syncfusion Inc. 44

Folder Upload support

• Physical file service provider.

In the following example, directory upload is enabled/disabled on DropDownButton selection.

Copyright © 2001 -2024 Syncfusion Inc. 45

Copyright © 2001 -2024 Syncfusion Inc. 46

Physical file service provider

Copyright © 2001 -2024 Syncfusion Inc. 47

Copyright © 2001 -2024 Syncfusion Inc. 48

var folders = (req.body.filename).split('/');

Copyright © 2001 -2024 Syncfusion Inc. 49

Amazon file service provider

Copyright © 2001 -2024 Syncfusion Inc. 50

Copyright © 2001 -2024 Syncfusion Inc. 51

Copyright © 2001 -2024 Syncfusion Inc. 52

Copyright © 2001 -2024 Syncfusion Inc. 53

Copyright © 2001 -2024 Syncfusion Inc. 54

Copyright © 2001 -2024 Syncfusion Inc. 55