Cell Editing in React Data Grid
05 Sep 202624 minutes to read
Cell editing provides a streamlined way to update individual cell values directly within the grid. It is designed for quick, inline modifications, making data entry and corrections more efficient. This approach ensures that changes are applied seamlessly to large datasets while maintaining consistency with the grid’s overall editing experience.
Enable cell editing
To enable cell editing in the Data Grid, configure the editSettings->mode property to Cell and allow editing through the editSettings->allowEditing property. This setup provides a seamless inline editing experience, letting users quickly update individual cell values directly within the grid.
import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, Edit, EditSettingsModel, Inject, ToolbarItems, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { billingData } from './datasource';
function App() {
let grid;
const filterSettings = { type: 'CheckBox' };
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' };
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const actionComplete = (args) => {
if (args.action === 'edit' && args.requestType === 'save' && (args.columnName === 'Quantity' || args.columnName === 'Price')) {
var total = args.data.Quantity * args.data.Price;
grid.updateCell(args.index, "Total", total);
}
};
const actionBegin = (args) => {
if (args.requestType === 'beginEdit' && args.columnName === 'Total') {
args.cancel = true;
}
}
return (<div>
<GridComponent id="CellEdit" ref={g => grid = g} dataSource={billingData} allowPaging={true} allowSorting={true} allowFiltering={true} filterSettings={filterSettings} editSettings={editSettings} toolbar={toolbarOptions} actionComplete={actionComplete} actionBegin={actionBegin}>
<ColumnsDirective>
<ColumnDirective field="BillID" headerText="Bill ID" width="120" isPrimaryKey={true} validationRules=/>
<ColumnDirective field="BillDate" headerText="Bill Date" width="140" format="yMd" textAlign="Right" editType="datepickeredit" />
<ColumnDirective field="Customer" headerText="Customer Name" width="150" validationRules=/>
<ColumnDirective field="Product" headerText="Product Name" width="150" editType='dropdownedit'/>
<ColumnDirective field="Category" headerText="Category" width="130" editType='dropdownedit'/>
<ColumnDirective field="Quantity" headerText="Quantity" textAlign="Right" width="100" format="N0" />
<ColumnDirective field="Price" headerText="Price" textAlign="Right" width="100" editType="numericedit" format="C2" />
<ColumnDirective field="Total" headerText="Total" textAlign="Right" width="120" format="C2"/>
<ColumnDirective field="PaymentStatus" headerText="Payment Status" width="130" editType='dropdownedit' />
</ColumnsDirective>
<Inject services={[Toolbar, Edit, Page, Sort, Filter]} />
</GridComponent>
</div>);
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, Edit, EditSettingsModel, Inject, ToolbarItems, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { billingData } from './datasource';
function App() {
let grid: GridComponent | null;
const filterSettings = { type: 'CheckBox' };
const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' };
const toolbarOptions: ToolbarItems = ['Add', 'Delete', 'Update', 'Cancel'];
const actionComplete = (args) => {
if (args.action === 'edit' && args.requestType === 'save' && (args.columnName === 'Quantity' || args.columnName === 'Price')) {
const total: number = args.data.Quantity * args.data.Price;
grid.updateCell(args.index, "Total", total);
}
};
const actionBegin = (args) => {
if (args.requestType === 'beginEdit' && args.columnName === 'Total') {
args.cancel = true;
}
}
return (<div>
<GridComponent id="CellEdit" ref={g => grid = g} dataSource={billingData} allowPaging={true} allowSorting={true} allowFiltering={true} filterSettings={filterSettings} editSettings={editSettings} toolbar={toolbarOptions} actionComplete={actionComplete} actionBegin={actionBegin}>
<ColumnsDirective>
<ColumnDirective field="BillID" headerText="Bill ID" width="120" isPrimaryKey={true} validationRules=/>
<ColumnDirective field="BillDate" headerText="Bill Date" width="140" format="yMd" textAlign="Right" editType="datepickeredit" />
<ColumnDirective field="Customer" headerText="Customer Name" width="150" validationRules=/>
<ColumnDirective field="Product" headerText="Product Name" width="150" editType='dropdownedit'/>
<ColumnDirective field="Category" headerText="Category" width="130" editType='dropdownedit'/>
<ColumnDirective field="Quantity" headerText="Quantity" textAlign="Right" width="100" format="N0" />
<ColumnDirective field="Price" headerText="Price" textAlign="Right" width="100" editType="numericedit" format="C2" />
<ColumnDirective field="Total" headerText="Total" textAlign="Right" width="120" format="C2"/>
<ColumnDirective field="PaymentStatus" headerText="Payment Status" width="130" editType='dropdownedit' />
</ColumnsDirective>
<Inject services={[Toolbar, Edit, Page, Sort, Filter]} />
</GridComponent>
</div>);
}
export default App;export let billingData = [
{ BillID: "BILL-1001", BillDate: new Date('2026-06-01T10:30:00'), Customer: "John Miller", Product: "Milk", Category: "Dairy", Quantity: 2, Price: 50, Total: 100, PaymentStatus: "Paid", Notes: "Regular purchase" },
{ BillID: "BILL-1002", BillDate: new Date('2026-06-01T11:00:00'), Customer: "Emma Wilson", Product: "Bread", Category: "Bakery", Quantity: 3, Price: 40, Total: 120, PaymentStatus: "Pending", Notes: "Bulk order" },
{ BillID: "BILL-1003", BillDate: new Date('2026-06-02T12:00:00'), Customer: "Liam Davis", Product: "Rice 5kg", Category: "Groceries", Quantity: 1, Price: 300, Total: 300, PaymentStatus: "Paid", Notes: "Monthly stock" },
{ BillID: "BILL-1004", BillDate: new Date('2026-06-02T13:00:00'), Customer: "Olivia Brown", Product: "Eggs", Category: "Poultry", Quantity: 1, Price: 90, Total: 90, PaymentStatus: "Pending", Notes: "Fresh stock" },
{ BillID: "BILL-1005", BillDate: new Date('2026-06-03T10:00:00'), Customer: "Noah Taylor", Product: "Apple", Category: "Fruits", Quantity: 5, Price: 30, Total: 150, PaymentStatus: "Paid", Notes: "Seasonal fruit" },
{ BillID: "BILL-1006", BillDate: new Date('2026-06-03T11:30:00'), Customer: "Ava Anderson", Product: "Soap", Category: "Personal Care", Quantity: 4, Price: 25, Total: 100, PaymentStatus: "Paid", Notes: "Discount applied" },
{ BillID: "BILL-1007", BillDate: new Date('2026-06-04T12:30:00'), Customer: "James Thomas", Product: "Shampoo", Category: "Personal Care", Quantity: 1, Price: 180, Total: 180, PaymentStatus: "Pending", Notes: "Premium product" },
{ BillID: "BILL-1008", BillDate: new Date('2026-06-04T14:00:00'), Customer: "Sophia Jackson", Product: "Chicken", Category: "Meat", Quantity: 2, Price: 250, Total: 500, PaymentStatus: "Paid", Notes: "Fresh meat" },
{ BillID: "BILL-1009", BillDate: new Date('2026-06-05T09:30:00'), Customer: "Lucas White", Product: "Cheese", Category: "Dairy", Quantity: 1, Price: 200, Total: 200, PaymentStatus: "Paid", Notes: "Imported item" },
{ BillID: "BILL-1010", BillDate: new Date('2026-06-05T10:45:00'), Customer: "Mia Harris", Product: "Tomato", Category: "Vegetables", Quantity: 3, Price: 20, Total: 60, PaymentStatus: "Pending", Notes: "Local farm" },
{ BillID: "BILL-1011", BillDate: new Date('2026-06-06T11:15:00'), Customer: "Ethan Martin", Product: "Onion", Category: "Vegetables", Quantity: 2, Price: 25, Total: 50, PaymentStatus: "Paid", Notes: "Daily use" },
{ BillID: "BILL-1012", BillDate: new Date('2026-06-06T12:45:00'), Customer: "Amelia Thompson", Product: "Cooking Oil", Category: "Groceries", Quantity: 1, Price: 220, Total: 220, PaymentStatus: "Paid", Notes: "Refined oil" },
{ BillID: "BILL-1013", BillDate: new Date('2026-06-07T13:30:00'), Customer: "Daniel Garcia", Product: "Biscuit", Category: "Snacks", Quantity: 5, Price: 10, Total: 50, PaymentStatus: "Pending", Notes: "Kids item" },
{ BillID: "BILL-1014", BillDate: new Date('2026-06-07T15:00:00'), Customer: "Harper Martinez", Product: "Soft Drink", Category: "Beverages", Quantity: 3, Price: 35, Total: 105, PaymentStatus: "Paid", Notes: "Cold drinks" },
{ BillID: "BILL-1015", BillDate: new Date('2026-06-08T10:20:00'), Customer: "Henry Robinson", Product: "Sugar", Category: "Groceries", Quantity: 2, Price: 45, Total: 90, PaymentStatus: "Paid", Notes: "Essential item" },
{ BillID: "BILL-1016", BillDate: new Date('2026-06-08T11:50:00'), Customer: "Ella Clark", Product: "Salt", Category: "Groceries", Quantity: 2, Price: 20, Total: 40, PaymentStatus: "Pending", Notes: "Low stock" },
{ BillID: "BILL-1017", BillDate: new Date('2026-06-09T12:10:00'), Customer: "Alexander Rodriguez", Product: "Butter", Category: "Dairy", Quantity: 1, Price: 120, Total: 120, PaymentStatus: "Paid", Notes: "Branded item" },
{ BillID: "BILL-1018", BillDate: new Date('2026-06-09T13:25:00'), Customer: "Grace Lewis", Product: "Banana", Category: "Fruits", Quantity: 6, Price: 10, Total: 60, PaymentStatus: "Paid", Notes: "Fresh stock" },
{ BillID: "BILL-1019", BillDate: new Date('2026-06-10T14:40:00'), Customer: "Michael Lee", Product: "Fish", Category: "Meat", Quantity: 1, Price: 300, Total: 300, PaymentStatus: "Pending", Notes: "Seafood" },
{ BillID: "BILL-1020", BillDate: new Date('2026-06-10T15:30:00'), Customer: "Chloe Walker", Product: "Ice Cream", Category: "Frozen", Quantity: 2, Price: 80, Total: 160, PaymentStatus: "Paid", Notes: "Frozen item" },
{ BillID: "BILL-1021", BillDate: new Date('2026-06-11T10:10:00'), Customer: "Benjamin Hall", Product: "Notebook", Category: "Stationery", Quantity: 3, Price: 40, Total: 120, PaymentStatus: "Paid", Notes: "School item" },
{ BillID: "BILL-1022", BillDate: new Date('2026-06-11T11:20:00'), Customer: "Zoe Allen", Product: "Pen", Category: "Stationery", Quantity: 10, Price: 10, Total: 100, PaymentStatus: "Pending", Notes: "Bulk buy" },
{ BillID: "BILL-1023", BillDate: new Date('2026-06-12T12:30:00'), Customer: "Jacob Young", Product: "Detergent", Category: "Household", Quantity: 1, Price: 250, Total: 250, PaymentStatus: "Paid", Notes: "Cleaning item" },
{ BillID: "BILL-1024", BillDate: new Date('2026-06-12T13:40:00'), Customer: "Lily King", Product: "Floor Cleaner", Category: "Household", Quantity: 1, Price: 150, Total: 150, PaymentStatus: "Paid", Notes: "Home use" },
{ BillID: "BILL-1025", BillDate: new Date('2026-06-13T14:00:00'), Customer: "Logan Wright", Product: "Chips", Category: "Snacks", Quantity: 4, Price: 20, Total: 80, PaymentStatus: "Pending", Notes: "Snack item" },
{ BillID: "BILL-1026", BillDate: new Date('2026-06-13T15:10:00'), Customer: "Aria Scott", Product: "Juice", Category: "Beverages", Quantity: 2, Price: 60, Total: 120, PaymentStatus: "Paid", Notes: "Fruit juice" },
{ BillID: "BILL-1027", BillDate: new Date('2026-06-14T10:30:00'), Customer: "David Green", Product: "Toothpaste", Category: "Personal Care", Quantity: 2, Price: 90, Total: 180, PaymentStatus: "Paid", Notes: "Daily use" },
{ BillID: "BILL-1028", BillDate: new Date('2026-06-14T11:45:00'), Customer: "Scarlett Adams", Product: "Hair Oil", Category: "Personal Care", Quantity: 1, Price: 140, Total: 140, PaymentStatus: "Pending", Notes: "Herbal oil" },
{ BillID: "BILL-1029", BillDate: new Date('2026-06-15T12:25:00'), Customer: "Joseph Baker", Product: "Mango", Category: "Fruits", Quantity: 3, Price: 50, Total: 150, PaymentStatus: "Paid", Notes: "Seasonal fruit" },
{ BillID: "BILL-1030", BillDate: new Date('2026-06-15T13:50:00'), Customer: "Layla Nelson", Product: "Paneer", Category: "Dairy", Quantity: 1, Price: 220, Total: 220, PaymentStatus: "Paid", Notes: "Fresh dairy" }
];export let billingData: Object[] = [
{ BillID: "BILL-1001", BillDate: new Date('2026-06-01T10:30:00'), Customer: "John Miller", Product: "Milk", Category: "Dairy", Quantity: 2, Price: 50, Total: 100, PaymentStatus: "Paid", Notes: "Regular purchase" },
{ BillID: "BILL-1002", BillDate: new Date('2026-06-01T11:00:00'), Customer: "Emma Wilson", Product: "Bread", Category: "Bakery", Quantity: 3, Price: 40, Total: 120, PaymentStatus: "Pending", Notes: "Bulk order" },
{ BillID: "BILL-1003", BillDate: new Date('2026-06-02T12:00:00'), Customer: "Liam Davis", Product: "Rice 5kg", Category: "Groceries", Quantity: 1, Price: 300, Total: 300, PaymentStatus: "Paid", Notes: "Monthly stock" },
{ BillID: "BILL-1004", BillDate: new Date('2026-06-02T13:00:00'), Customer: "Olivia Brown", Product: "Eggs", Category: "Poultry", Quantity: 1, Price: 90, Total: 90, PaymentStatus: "Pending", Notes: "Fresh stock" },
{ BillID: "BILL-1005", BillDate: new Date('2026-06-03T10:00:00'), Customer: "Noah Taylor", Product: "Apple", Category: "Fruits", Quantity: 5, Price: 30, Total: 150, PaymentStatus: "Paid", Notes: "Seasonal fruit" },
{ BillID: "BILL-1006", BillDate: new Date('2026-06-03T11:30:00'), Customer: "Ava Anderson", Product: "Soap", Category: "Personal Care", Quantity: 4, Price: 25, Total: 100, PaymentStatus: "Paid", Notes: "Discount applied" },
{ BillID: "BILL-1007", BillDate: new Date('2026-06-04T12:30:00'), Customer: "James Thomas", Product: "Shampoo", Category: "Personal Care", Quantity: 1, Price: 180, Total: 180, PaymentStatus: "Pending", Notes: "Premium product" },
{ BillID: "BILL-1008", BillDate: new Date('2026-06-04T14:00:00'), Customer: "Sophia Jackson", Product: "Chicken", Category: "Meat", Quantity: 2, Price: 250, Total: 500, PaymentStatus: "Paid", Notes: "Fresh meat" },
{ BillID: "BILL-1009", BillDate: new Date('2026-06-05T09:30:00'), Customer: "Lucas White", Product: "Cheese", Category: "Dairy", Quantity: 1, Price: 200, Total: 200, PaymentStatus: "Paid", Notes: "Imported item" },
{ BillID: "BILL-1010", BillDate: new Date('2026-06-05T10:45:00'), Customer: "Mia Harris", Product: "Tomato", Category: "Vegetables", Quantity: 3, Price: 20, Total: 60, PaymentStatus: "Pending", Notes: "Local farm" },
{ BillID: "BILL-1011", BillDate: new Date('2026-06-06T11:15:00'), Customer: "Ethan Martin", Product: "Onion", Category: "Vegetables", Quantity: 2, Price: 25, Total: 50, PaymentStatus: "Paid", Notes: "Daily use" },
{ BillID: "BILL-1012", BillDate: new Date('2026-06-06T12:45:00'), Customer: "Amelia Thompson", Product: "Cooking Oil", Category: "Groceries", Quantity: 1, Price: 220, Total: 220, PaymentStatus: "Paid", Notes: "Refined oil" },
{ BillID: "BILL-1013", BillDate: new Date('2026-06-07T13:30:00'), Customer: "Daniel Garcia", Product: "Biscuit", Category: "Snacks", Quantity: 5, Price: 10, Total: 50, PaymentStatus: "Pending", Notes: "Kids item" },
{ BillID: "BILL-1014", BillDate: new Date('2026-06-07T15:00:00'), Customer: "Harper Martinez", Product: "Soft Drink", Category: "Beverages", Quantity: 3, Price: 35, Total: 105, PaymentStatus: "Paid", Notes: "Cold drinks" },
{ BillID: "BILL-1015", BillDate: new Date('2026-06-08T10:20:00'), Customer: "Henry Robinson", Product: "Sugar", Category: "Groceries", Quantity: 2, Price: 45, Total: 90, PaymentStatus: "Paid", Notes: "Essential item" },
{ BillID: "BILL-1016", BillDate: new Date('2026-06-08T11:50:00'), Customer: "Ella Clark", Product: "Salt", Category: "Groceries", Quantity: 2, Price: 20, Total: 40, PaymentStatus: "Pending", Notes: "Low stock" },
{ BillID: "BILL-1017", BillDate: new Date('2026-06-09T12:10:00'), Customer: "Alexander Rodriguez", Product: "Butter", Category: "Dairy", Quantity: 1, Price: 120, Total: 120, PaymentStatus: "Paid", Notes: "Branded item" },
{ BillID: "BILL-1018", BillDate: new Date('2026-06-09T13:25:00'), Customer: "Grace Lewis", Product: "Banana", Category: "Fruits", Quantity: 6, Price: 10, Total: 60, PaymentStatus: "Paid", Notes: "Fresh stock" },
{ BillID: "BILL-1019", BillDate: new Date('2026-06-10T14:40:00'), Customer: "Michael Lee", Product: "Fish", Category: "Meat", Quantity: 1, Price: 300, Total: 300, PaymentStatus: "Pending", Notes: "Seafood" },
{ BillID: "BILL-1020", BillDate: new Date('2026-06-10T15:30:00'), Customer: "Chloe Walker", Product: "Ice Cream", Category: "Frozen", Quantity: 2, Price: 80, Total: 160, PaymentStatus: "Paid", Notes: "Frozen item" },
{ BillID: "BILL-1021", BillDate: new Date('2026-06-11T10:10:00'), Customer: "Benjamin Hall", Product: "Notebook", Category: "Stationery", Quantity: 3, Price: 40, Total: 120, PaymentStatus: "Paid", Notes: "School item" },
{ BillID: "BILL-1022", BillDate: new Date('2026-06-11T11:20:00'), Customer: "Zoe Allen", Product: "Pen", Category: "Stationery", Quantity: 10, Price: 10, Total: 100, PaymentStatus: "Pending", Notes: "Bulk buy" },
{ BillID: "BILL-1023", BillDate: new Date('2026-06-12T12:30:00'), Customer: "Jacob Young", Product: "Detergent", Category: "Household", Quantity: 1, Price: 250, Total: 250, PaymentStatus: "Paid", Notes: "Cleaning item" },
{ BillID: "BILL-1024", BillDate: new Date('2026-06-12T13:40:00'), Customer: "Lily King", Product: "Floor Cleaner", Category: "Household", Quantity: 1, Price: 150, Total: 150, PaymentStatus: "Paid", Notes: "Home use" },
{ BillID: "BILL-1025", BillDate: new Date('2026-06-13T14:00:00'), Customer: "Logan Wright", Product: "Chips", Category: "Snacks", Quantity: 4, Price: 20, Total: 80, PaymentStatus: "Pending", Notes: "Snack item" },
{ BillID: "BILL-1026", BillDate: new Date('2026-06-13T15:10:00'), Customer: "Aria Scott", Product: "Juice", Category: "Beverages", Quantity: 2, Price: 60, Total: 120, PaymentStatus: "Paid", Notes: "Fruit juice" },
{ BillID: "BILL-1027", BillDate: new Date('2026-06-14T10:30:00'), Customer: "David Green", Product: "Toothpaste", Category: "Personal Care", Quantity: 2, Price: 90, Total: 180, PaymentStatus: "Paid", Notes: "Daily use" },
{ BillID: "BILL-1028", BillDate: new Date('2026-06-14T11:45:00'), Customer: "Scarlett Adams", Product: "Hair Oil", Category: "Personal Care", Quantity: 1, Price: 140, Total: 140, PaymentStatus: "Pending", Notes: "Herbal oil" },
{ BillID: "BILL-1029", BillDate: new Date('2026-06-15T12:25:00'), Customer: "Joseph Baker", Product: "Mango", Category: "Fruits", Quantity: 3, Price: 50, Total: 150, PaymentStatus: "Paid", Notes: "Seasonal fruit" },
{ BillID: "BILL-1030", BillDate: new Date('2026-06-15T13:50:00'), Customer: "Layla Nelson", Product: "Paneer", Category: "Dairy", Quantity: 1, Price: 220, Total: 220, PaymentStatus: "Paid", Notes: "Fresh dairy" }
];When editing is enabled, it is necessary to set the isPrimaryKey property value to
truefor the unique column to ensure accurate data updates.
Single-click editing
Enabling single-click editing in the Syncfusion® React Grid’s Cell editing mode is a valuable and intuitive feature that makes a cell editable with just one click. This seamless experience is achieved by using the editCell method for rapid, efficient data modification.
To implement this, bind the onClick event for the grid and, within the event handler, call the editCell method based on the clicked target element. This ensures that the editing mode is triggered when clicking on a specific element within the grid.
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Edit, Inject, Toolbar, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { productDatas } from './datasource';
function App() {
let grid;
const editSettings = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const onClick = (args) => {
if (args.target.classList.contains('e-rowcell')) {
grid.editModule.editCell(parseInt(args.target.getAttribute('data-index')),
grid.getColumnByIndex(parseInt(args.target.getAttribute('aria-colindex')) - 1).field);
}
};
return (
<GridComponent dataSource={productDatas} allowPaging={true} editSettings={editSettings} toolbar={toolbarOptions} height={300} onClick={onClick}>
<ColumnsDirective>
<ColumnDirective field='ProductID' headerText='Product ID' isPrimaryKey={true} textAlign='Right' validationRules= width='120' />
<ColumnDirective field='ProductCategory' headerText='Product Category' validationRules= width='140' />
<ColumnDirective field='ShippingMethod' headerText='Shipping Method' editType='dropdownedit' width='140' />
<ColumnDirective field='StockQuantity' headerText='Stock Quantity' editType='numericedit' format='N0' width='150' />
<ColumnDirective field='Discount' headerText='Discount (%)' editType='numericedit' format='C2' width='170' />
<ColumnDirective field='Revenue' headerText='Revenue' editType='numericedit' format='C2' width='170' />
<ColumnDirective field='TransactionDate' headerText='Transaction Date' editType='datetimepickeredit' format='yMd' width='170' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</GridComponent>
);
}
;
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Edit, Inject, Toolbar, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { productDatas } from './datasource';
function App() {
let grid: GridComponent | null;
const editSettings = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const onClick = (args: React.MouseEvent) => {
if (args.target.classList.contains('e-rowcell')) {
(grid as GridComponent).editModule.editCell(parseInt(args.target.getAttribute('data-index')),
(grid as GridComponent).getColumnByIndex(parseInt(args.target.getAttribute('aria-colindex')) - 1).field);
}
};
return (
<GridComponent dataSource={productDatas} allowPaging={true} editSettings={editSettings} toolbar={toolbarOptions} height={300} onClick={onClick}>
<ColumnsDirective>
<ColumnDirective field='ProductID' headerText='Product ID' isPrimaryKey={true} textAlign='Right' validationRules= width='120' />
<ColumnDirective field='ProductCategory' headerText='Product Category' validationRules= width='140' />
<ColumnDirective field='ShippingMethod' headerText='Shipping Method' editType='dropdownedit' width='140' />
<ColumnDirective field='StockQuantity' headerText='Stock Quantity' editType='numericedit' format='N0' width='150' />
<ColumnDirective field='Discount' headerText='Discount (%)' editType='numericedit' format='C2' width='170' />
<ColumnDirective field='Revenue' headerText='Revenue' editType='numericedit' format='C2' width='170' />
<ColumnDirective field='TransactionDate' headerText='Transaction Date' editType='datetimepickeredit' format='yMd' width='170' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</GridComponent>
);
}
;
export default App;export let productDatas = [
{
"ProductID": "PROD-001",
"ProductCategory": "Electronics",
"Revenue": 447.19,
"Discount": 23.26,
"TransactionDate": new Date(1735689600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 25,
"OrderQuantity": 4
},
{
"ProductID": "PROD-002",
"ProductCategory": "Clothing",
"Revenue": 128.543,
"Discount": 15.7,
"TransactionDate": new Date(1735776000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 60,
"OrderQuantity": 2
},
{
"ProductID": "PROD-003",
"ProductCategory": "Books",
"Revenue": 89.2,
"Discount": 10.45,
"TransactionDate": new Date(1735862400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 85,
"OrderQuantity": 1
},
{
"ProductID": "PROD-004",
"ProductCategory": "Garden",
"Revenue": 675.321,
"Discount": 27.8,
"TransactionDate": new Date(1735948800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 15,
"OrderQuantity": 6
},
{
"ProductID": "PROD-005",
"ProductCategory": "Toys",
"Revenue": 234.67,
"Discount": 19.12,
"TransactionDate": new Date(1736035200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 40,
"OrderQuantity": 3
},
{
"ProductID": "PROD-006",
"ProductCategory": "Electronics",
"Revenue": 512.098,
"Discount": 22.3,
"TransactionDate": new Date(1736121600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 20,
"OrderQuantity": 5
},
{
"ProductID": "PROD-007",
"ProductCategory": "Clothing",
"Revenue": 76.54,
"Discount": 8.9,
"TransactionDate": new Date(1736208000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 90,
"OrderQuantity": 1
},
{
"ProductID": "PROD-008",
"ProductCategory": "Books",
"Revenue": 345.231,
"Discount": 12.67,
"TransactionDate": new Date(1736294400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 35,
"OrderQuantity": 4
},
{
"ProductID": "PROD-009",
"ProductCategory": "Garden",
"Revenue": 987.45,
"Discount": 25.4,
"TransactionDate": new Date(1736380800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 10,
"OrderQuantity": 7
},
{
"ProductID": "PROD-010",
"ProductCategory": "Toys",
"Revenue": 156.789,
"Discount": 17.23,
"TransactionDate": new Date(1736467200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 55,
"OrderQuantity": 2
},
{
"ProductID": "PROD-011",
"ProductCategory": "Electronics",
"Revenue": 623.12,
"Discount": 20.56,
"TransactionDate": new Date(1736553600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 18,
"OrderQuantity": 6
},
{
"ProductID": "PROD-012",
"ProductCategory": "Clothing",
"Revenue": 321.456,
"Discount": 14.89,
"TransactionDate": new Date(1736640000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 45,
"OrderQuantity": 3
},
{
"ProductID": "PROD-013",
"ProductCategory": "Books",
"Revenue": 78.9,
"Discount": 11.34,
"TransactionDate": new Date(1736726400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 80,
"OrderQuantity": 1
},
{
"ProductID": "PROD-014",
"ProductCategory": "Garden",
"Revenue": 456.789,
"Discount": 28.12,
"TransactionDate": new Date(1736812800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 22,
"OrderQuantity": 5
},
{
"ProductID": "PROD-015",
"ProductCategory": "Toys",
"Revenue": 234.56,
"Discount": 16.78,
"TransactionDate": new Date(1736899200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-016",
"ProductCategory": "Electronics",
"Revenue": 789.123,
"Discount": 21.45,
"TransactionDate": new Date(1736985600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-017",
"ProductCategory": "Clothing",
"Revenue": 198.76,
"Discount": 13.21,
"TransactionDate": new Date(1737072000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 65,
"OrderQuantity": 2
},
{
"ProductID": "PROD-018",
"ProductCategory": "Books",
"Revenue": 412.345,
"Discount": 18.9,
"TransactionDate": new Date(1737158400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 30,
"OrderQuantity": 4
},
{
"ProductID": "PROD-019",
"ProductCategory": "Garden",
"Revenue": 567.89,
"Discount": 24.67,
"TransactionDate": new Date(1737244800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 20,
"OrderQuantity": 5
},
{
"ProductID": "PROD-020",
"ProductCategory": "Toys",
"Revenue": 345.12,
"Discount": 15.34,
"TransactionDate": new Date(1737331200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 45,
"OrderQuantity": 3
},
{
"ProductID": "PROD-021",
"ProductCategory": "Electronics",
"Revenue": 678.901,
"Discount": 19.78,
"TransactionDate": new Date(1737417600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 17,
"OrderQuantity": 6
},
{
"ProductID": "PROD-022",
"ProductCategory": "Clothing",
"Revenue": 234.567,
"Discount": 12.45,
"TransactionDate": new Date(1737504000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 55,
"OrderQuantity": 2
},
{
"ProductID": "PROD-023",
"ProductCategory": "Books",
"Revenue": 89.123,
"Discount": 9.8,
"TransactionDate": new Date(1737590400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 75,
"OrderQuantity": 1
},
{
"ProductID": "PROD-024",
"ProductCategory": "Garden",
"Revenue": 456.78,
"Discount": 26.12,
"TransactionDate": new Date(1737676800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 25,
"OrderQuantity": 4
},
{
"ProductID": "PROD-025",
"ProductCategory": "Toys",
"Revenue": 123.456,
"Discount": 14.56,
"TransactionDate": new Date(1737763200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 70,
"OrderQuantity": 2
},
{
"ProductID": "PROD-026",
"ProductCategory": "Electronics",
"Revenue": 789.01,
"Discount": 22.89,
"TransactionDate": new Date(1737849600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 12,
"OrderQuantity": 7
},
{
"ProductID": "PROD-027",
"ProductCategory": "Clothing",
"Revenue": 345.67,
"Discount": 17.23,
"TransactionDate": new Date(1737936000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 40,
"OrderQuantity": 3
},
{
"ProductID": "PROD-028",
"ProductCategory": "Books",
"Revenue": 67.89,
"Discount": 10.12,
"TransactionDate": new Date(1738022400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 80,
"OrderQuantity": 1
},
{
"ProductID": "PROD-029",
"ProductCategory": "Garden",
"Revenue": 543.21,
"Discount": 28.45,
"TransactionDate": new Date(1738108800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 18,
"OrderQuantity": 5
},
{
"ProductID": "PROD-030",
"ProductCategory": "Toys",
"Revenue": 234.789,
"Discount": 16.78,
"TransactionDate": new Date(1738195200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-031",
"ProductCategory": "Electronics",
"Revenue": 678.123,
"Discount": 21.34,
"TransactionDate": new Date(1738281600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 20,
"OrderQuantity": 6
},
{
"ProductID": "PROD-032",
"ProductCategory": "Clothing",
"Revenue": 123.456,
"Discount": 13.89,
"TransactionDate": new Date(1738368000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 65,
"OrderQuantity": 2
},
{
"ProductID": "PROD-033",
"ProductCategory": "Books",
"Revenue": 456.78,
"Discount": 18.23,
"TransactionDate": new Date(1738454400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 30,
"OrderQuantity": 4
},
{
"ProductID": "PROD-034",
"ProductCategory": "Garden",
"Revenue": 789.12,
"Discount": 25.67,
"TransactionDate": new Date(1738540800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-035",
"ProductCategory": "Toys",
"Revenue": 234.56,
"Discount": 15.45,
"TransactionDate": new Date(1738627200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 55,
"OrderQuantity": 3
},
{
"ProductID": "PROD-036",
"ProductCategory": "Electronics",
"Revenue": 567.89,
"Discount": 20.12,
"TransactionDate": new Date(1738713600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 25,
"OrderQuantity": 5
},
{
"ProductID": "PROD-037",
"ProductCategory": "Clothing",
"Revenue": 345.67,
"Discount": 12.78,
"TransactionDate": new Date(1738800000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-038",
"ProductCategory": "Books",
"Revenue": 89.123,
"Discount": 9.34,
"TransactionDate": new Date(1738886400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 70,
"OrderQuantity": 1
},
{
"ProductID": "PROD-039",
"ProductCategory": "Garden",
"Revenue": 456.789,
"Discount": 26.89,
"TransactionDate": new Date(1738972800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 20,
"OrderQuantity": 4
},
{
"ProductID": "PROD-040",
"ProductCategory": "Toys",
"Revenue": 123.456,
"Discount": 14.12,
"TransactionDate": new Date(1739059200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 60,
"OrderQuantity": 2
},
{
"ProductID": "PROD-041",
"ProductCategory": "Electronics",
"Revenue": 789.01,
"Discount": 22.45,
"TransactionDate": new Date(1739145600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-042",
"ProductCategory": "Clothing",
"Revenue": 345.67,
"Discount": 17.89,
"TransactionDate": new Date(1739232000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 45,
"OrderQuantity": 3
},
{
"ProductID": "PROD-043",
"ProductCategory": "Books",
"Revenue": 67.89,
"Discount": 10.56,
"TransactionDate": new Date(1739318400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 75,
"OrderQuantity": 1
},
{
"ProductID": "PROD-044",
"ProductCategory": "Garden",
"Revenue": 543.21,
"Discount": 28.23,
"TransactionDate": new Date(1739404800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 18,
"OrderQuantity": 5
},
{
"ProductID": "PROD-045",
"ProductCategory": "Toys",
"Revenue": 234.789,
"Discount": 16.34,
"TransactionDate": new Date(1739491200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-046",
"ProductCategory": "Electronics",
"Revenue": 678.123,
"Discount": 21.78,
"TransactionDate": new Date(1739577600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 20,
"OrderQuantity": 6
},
{
"ProductID": "PROD-047",
"ProductCategory": "Clothing",
"Revenue": 123.456,
"Discount": 13.45,
"TransactionDate": new Date(1739664000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 70,
"OrderQuantity": 2
},
{
"ProductID": "PROD-048",
"ProductCategory": "Books",
"Revenue": 456.78,
"Discount": 18.67,
"TransactionDate": new Date(1739750400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 35,
"OrderQuantity": 4
},
{
"ProductID": "PROD-049",
"ProductCategory": "Garden",
"Revenue": 789.12,
"Discount": 25.12,
"TransactionDate": new Date(1739836800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-050",
"ProductCategory": "Toys",
"Revenue": 234.56,
"Discount": 15.89,
"TransactionDate": new Date(1739923200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 55,
"OrderQuantity": 3
}
];export let productDatas: object[] = [
{
"ProductID": "PROD-001",
"ProductCategory": "Electronics",
"Revenue": 447.19,
"Discount": 23.26,
"TransactionDate": new Date(1735689600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 25,
"OrderQuantity": 4
},
{
"ProductID": "PROD-002",
"ProductCategory": "Clothing",
"Revenue": 128.543,
"Discount": 15.7,
"TransactionDate": new Date(1735776000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 60,
"OrderQuantity": 2
},
{
"ProductID": "PROD-003",
"ProductCategory": "Books",
"Revenue": 89.2,
"Discount": 10.45,
"TransactionDate": new Date(1735862400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 85,
"OrderQuantity": 1
},
{
"ProductID": "PROD-004",
"ProductCategory": "Garden",
"Revenue": 675.321,
"Discount": 27.8,
"TransactionDate": new Date(1735948800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 15,
"OrderQuantity": 6
},
{
"ProductID": "PROD-005",
"ProductCategory": "Toys",
"Revenue": 234.67,
"Discount": 19.12,
"TransactionDate": new Date(1736035200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 40,
"OrderQuantity": 3
},
{
"ProductID": "PROD-006",
"ProductCategory": "Electronics",
"Revenue": 512.098,
"Discount": 22.3,
"TransactionDate": new Date(1736121600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 20,
"OrderQuantity": 5
},
{
"ProductID": "PROD-007",
"ProductCategory": "Clothing",
"Revenue": 76.54,
"Discount": 8.9,
"TransactionDate": new Date(1736208000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 90,
"OrderQuantity": 1
},
{
"ProductID": "PROD-008",
"ProductCategory": "Books",
"Revenue": 345.231,
"Discount": 12.67,
"TransactionDate": new Date(1736294400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 35,
"OrderQuantity": 4
},
{
"ProductID": "PROD-009",
"ProductCategory": "Garden",
"Revenue": 987.45,
"Discount": 25.4,
"TransactionDate": new Date(1736380800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 10,
"OrderQuantity": 7
},
{
"ProductID": "PROD-010",
"ProductCategory": "Toys",
"Revenue": 156.789,
"Discount": 17.23,
"TransactionDate": new Date(1736467200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 55,
"OrderQuantity": 2
},
{
"ProductID": "PROD-011",
"ProductCategory": "Electronics",
"Revenue": 623.12,
"Discount": 20.56,
"TransactionDate": new Date(1736553600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 18,
"OrderQuantity": 6
},
{
"ProductID": "PROD-012",
"ProductCategory": "Clothing",
"Revenue": 321.456,
"Discount": 14.89,
"TransactionDate": new Date(1736640000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 45,
"OrderQuantity": 3
},
{
"ProductID": "PROD-013",
"ProductCategory": "Books",
"Revenue": 78.9,
"Discount": 11.34,
"TransactionDate": new Date(1736726400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 80,
"OrderQuantity": 1
},
{
"ProductID": "PROD-014",
"ProductCategory": "Garden",
"Revenue": 456.789,
"Discount": 28.12,
"TransactionDate": new Date(1736812800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 22,
"OrderQuantity": 5
},
{
"ProductID": "PROD-015",
"ProductCategory": "Toys",
"Revenue": 234.56,
"Discount": 16.78,
"TransactionDate": new Date(1736899200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-016",
"ProductCategory": "Electronics",
"Revenue": 789.123,
"Discount": 21.45,
"TransactionDate": new Date(1736985600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-017",
"ProductCategory": "Clothing",
"Revenue": 198.76,
"Discount": 13.21,
"TransactionDate": new Date(1737072000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 65,
"OrderQuantity": 2
},
{
"ProductID": "PROD-018",
"ProductCategory": "Books",
"Revenue": 412.345,
"Discount": 18.9,
"TransactionDate": new Date(1737158400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 30,
"OrderQuantity": 4
},
{
"ProductID": "PROD-019",
"ProductCategory": "Garden",
"Revenue": 567.89,
"Discount": 24.67,
"TransactionDate": new Date(1737244800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 20,
"OrderQuantity": 5
},
{
"ProductID": "PROD-020",
"ProductCategory": "Toys",
"Revenue": 345.12,
"Discount": 15.34,
"TransactionDate": new Date(1737331200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 45,
"OrderQuantity": 3
},
{
"ProductID": "PROD-021",
"ProductCategory": "Electronics",
"Revenue": 678.901,
"Discount": 19.78,
"TransactionDate": new Date(1737417600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 17,
"OrderQuantity": 6
},
{
"ProductID": "PROD-022",
"ProductCategory": "Clothing",
"Revenue": 234.567,
"Discount": 12.45,
"TransactionDate": new Date(1737504000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 55,
"OrderQuantity": 2
},
{
"ProductID": "PROD-023",
"ProductCategory": "Books",
"Revenue": 89.123,
"Discount": 9.8,
"TransactionDate": new Date(1737590400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 75,
"OrderQuantity": 1
},
{
"ProductID": "PROD-024",
"ProductCategory": "Garden",
"Revenue": 456.78,
"Discount": 26.12,
"TransactionDate": new Date(1737676800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 25,
"OrderQuantity": 4
},
{
"ProductID": "PROD-025",
"ProductCategory": "Toys",
"Revenue": 123.456,
"Discount": 14.56,
"TransactionDate": new Date(1737763200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 70,
"OrderQuantity": 2
},
{
"ProductID": "PROD-026",
"ProductCategory": "Electronics",
"Revenue": 789.01,
"Discount": 22.89,
"TransactionDate": new Date(1737849600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 12,
"OrderQuantity": 7
},
{
"ProductID": "PROD-027",
"ProductCategory": "Clothing",
"Revenue": 345.67,
"Discount": 17.23,
"TransactionDate": new Date(1737936000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 40,
"OrderQuantity": 3
},
{
"ProductID": "PROD-028",
"ProductCategory": "Books",
"Revenue": 67.89,
"Discount": 10.12,
"TransactionDate": new Date(1738022400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 80,
"OrderQuantity": 1
},
{
"ProductID": "PROD-029",
"ProductCategory": "Garden",
"Revenue": 543.21,
"Discount": 28.45,
"TransactionDate": new Date(1738108800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 18,
"OrderQuantity": 5
},
{
"ProductID": "PROD-030",
"ProductCategory": "Toys",
"Revenue": 234.789,
"Discount": 16.78,
"TransactionDate": new Date(1738195200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-031",
"ProductCategory": "Electronics",
"Revenue": 678.123,
"Discount": 21.34,
"TransactionDate": new Date(1738281600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 20,
"OrderQuantity": 6
},
{
"ProductID": "PROD-032",
"ProductCategory": "Clothing",
"Revenue": 123.456,
"Discount": 13.89,
"TransactionDate": new Date(1738368000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 65,
"OrderQuantity": 2
},
{
"ProductID": "PROD-033",
"ProductCategory": "Books",
"Revenue": 456.78,
"Discount": 18.23,
"TransactionDate": new Date(1738454400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 30,
"OrderQuantity": 4
},
{
"ProductID": "PROD-034",
"ProductCategory": "Garden",
"Revenue": 789.12,
"Discount": 25.67,
"TransactionDate": new Date(1738540800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-035",
"ProductCategory": "Toys",
"Revenue": 234.56,
"Discount": 15.45,
"TransactionDate": new Date(1738627200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 55,
"OrderQuantity": 3
},
{
"ProductID": "PROD-036",
"ProductCategory": "Electronics",
"Revenue": 567.89,
"Discount": 20.12,
"TransactionDate": new Date(1738713600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 25,
"OrderQuantity": 5
},
{
"ProductID": "PROD-037",
"ProductCategory": "Clothing",
"Revenue": 345.67,
"Discount": 12.78,
"TransactionDate": new Date(1738800000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-038",
"ProductCategory": "Books",
"Revenue": 89.123,
"Discount": 9.34,
"TransactionDate": new Date(1738886400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 70,
"OrderQuantity": 1
},
{
"ProductID": "PROD-039",
"ProductCategory": "Garden",
"Revenue": 456.789,
"Discount": 26.89,
"TransactionDate": new Date(1738972800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 20,
"OrderQuantity": 4
},
{
"ProductID": "PROD-040",
"ProductCategory": "Toys",
"Revenue": 123.456,
"Discount": 14.12,
"TransactionDate": new Date(1739059200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 60,
"OrderQuantity": 2
},
{
"ProductID": "PROD-041",
"ProductCategory": "Electronics",
"Revenue": 789.01,
"Discount": 22.45,
"TransactionDate": new Date(1739145600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-042",
"ProductCategory": "Clothing",
"Revenue": 345.67,
"Discount": 17.89,
"TransactionDate": new Date(1739232000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 45,
"OrderQuantity": 3
},
{
"ProductID": "PROD-043",
"ProductCategory": "Books",
"Revenue": 67.89,
"Discount": 10.56,
"TransactionDate": new Date(1739318400000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 75,
"OrderQuantity": 1
},
{
"ProductID": "PROD-044",
"ProductCategory": "Garden",
"Revenue": 543.21,
"Discount": 28.23,
"TransactionDate": new Date(1739404800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 18,
"OrderQuantity": 5
},
{
"ProductID": "PROD-045",
"ProductCategory": "Toys",
"Revenue": 234.789,
"Discount": 16.34,
"TransactionDate": new Date(1739491200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 50,
"OrderQuantity": 3
},
{
"ProductID": "PROD-046",
"ProductCategory": "Electronics",
"Revenue": 678.123,
"Discount": 21.78,
"TransactionDate": new Date(1739577600000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 20,
"OrderQuantity": 6
},
{
"ProductID": "PROD-047",
"ProductCategory": "Clothing",
"Revenue": 123.456,
"Discount": 13.45,
"TransactionDate": new Date(1739664000000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 70,
"OrderQuantity": 2
},
{
"ProductID": "PROD-048",
"ProductCategory": "Books",
"Revenue": 456.78,
"Discount": 18.67,
"TransactionDate": new Date(1739750400000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 35,
"OrderQuantity": 4
},
{
"ProductID": "PROD-049",
"ProductCategory": "Garden",
"Revenue": 789.12,
"Discount": 25.12,
"TransactionDate": new Date(1739836800000),
"ShippingMethod": "Express",
"WarehouseLocation": "Warehouse A",
"StockQuantity": 15,
"OrderQuantity": 7
},
{
"ProductID": "PROD-050",
"ProductCategory": "Toys",
"Revenue": 234.56,
"Discount": 15.89,
"TransactionDate": new Date(1739923200000),
"ShippingMethod": "Standard",
"WarehouseLocation": "Warehouse B",
"StockQuantity": 55,
"OrderQuantity": 3
}
];Cancel edit based on condition
The Grid provides the ability to cancel the edit operations for particular cell based on specific conditions. This feature allows controlling whether editing should be allowed or prevented for certain cells in the grid. This functionality is achieved by leveraging the actionBegin event of the Grid component. This event is triggered when a CRUD (Create, Read, Update, Delete) operation is initiated in the grid.
This customization is useful when restricting editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid.
To cancel the edit operation based on a specific condition, handle the actionBegin event of the Grid component and check the requestType parameter. This parameter indicates the type of action being performed:
| Request Type | Description |
|---|---|
beginEdit |
Editing an existing record |
add |
Creating a new record |
save |
Updating a new or existing record |
delete |
Deleting an existing record |
Apply the desired condition and cancel the operation by setting the args.cancel property to true.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' };
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const orderIDRules = { required: true };
const roleIDRules = { required: true, minLength: 8 };
const customerNameRules={required: true }
let isAddable = true;
const actionBegin = (args) => {
if (args.requestType === 'beginEdit' && args.rowData['Role'] === 'Admin') {
args.cancel = true;
}
if (args.requestType === 'delete' && args.data[0]['Role'] === 'Admin') {
args.cancel = true;
}
if (args.requestType === 'add') {
if (!isAddable) {
args.cancel = true;
}
}
}
const btnClick = (args) => {
args.target.innerText === 'Grid is Addable' ? (args.target.innerText = 'Grid is Not Addable') : (args.target.innerText = 'Grid is Addable');
isAddable = !isAddable;
}
return (<div>
<ButtonComponent id='small' onClick={btnClick}>Grid is Addable</ButtonComponent>
<GridComponent dataSource={data} editSettings={editOptions} toolbar={toolbarOptions} actionBegin={actionBegin} height={240}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right" isPrimaryKey={true} validationRules={orderIDRules}/>
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='120' validationRules={customerNameRules}/>
<ColumnDirective field='Role' headerText='Role' width='120' textAlign="Right" validationRules={roleIDRules}/>
<ColumnDirective field='EmployeeCountry' headerText='EmployeeCountry' editType='dropdownedit' width='150' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GridComponent>
</div>)
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems, EditEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update', 'Cancel'];
const orderIDRules: object = { required: true };
const roleIDRules: object = { required: true, minLength: 8 };
const customerNameRules: object = { required: true }
let isAddable: boolean = true;
const actionBegin = (args: EditEventArgs) => {
if (args.requestType === 'beginEdit' && args.rowData['Role'] === 'Admin') {
args.cancel = true;
}
if (args.requestType === 'delete' && args.data[0]['Role'] === 'Admin') {
args.cancel = true;
}
if (args.requestType === 'add') {
if (!isAddable) {
args.cancel = true;
}
}
}
const btnClick = (args) => {
args.target.innerText === 'Grid is Addable' ? (args.target.innerText = 'Grid is Not Addable') : (args.target.innerText = 'Grid is Addable');
isAddable = !isAddable;
}
return (<div>
<ButtonComponent id='small' onClick={btnClick}>Grid is Addable</ButtonComponent>
<GridComponent dataSource={data} editSettings={editOptions} toolbar={toolbarOptions} actionBegin={actionBegin} height={240}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right" isPrimaryKey={true} validationRules={orderIDRules} />
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='120' validationRules={customerNameRules} />
<ColumnDirective field='Role' headerText='Role' width='120' textAlign="Right" validationRules={roleIDRules} />
<ColumnDirective field='EmployeeCountry' headerText='EmployeeCountry' editType='dropdownedit' width='150' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GridComponent>
</div>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', EmployeeName: 'Davolio',
ShipRegion: 'CJ', ShipPostalCode: '51100', EmployeeCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 2, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',EmployeeName: 'Buchanan',
ShipRegion: 'CJ', ShipPostalCode: '44087', EmployeeCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',EmployeeName: 'Fuller',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', EmployeeCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',EmployeeName: 'Leverling',
ShipRegion: 'CJ', ShipPostalCode: '69004', EmployeeCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 5, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',EmployeeName: 'Peacock',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', EmployeeCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 6, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',EmployeeName: 'Janet',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', EmployeeCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 7, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', EmployeeName: 'Suyama',
ShipRegion: 'CJ', ShipPostalCode: '3012', EmployeeCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 8, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',EmployeeName: 'Robert',
ShipRegion: 'CJ', ShipPostalCode: '1204', EmployeeCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 9, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',EmployeeName: 'Andrew',
ShipRegion: 'SP', ShipPostalCode: '08737-363', EmployeeCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 14, 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', EmployeeCountry: 'Venezuela', Freight: 81.91, Verified: !0, EmployeeName: 'Michael',
},
{
OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 11, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',EmployeeName: "Ana Trujillo",
ShipRegion: 'CJ', ShipPostalCode: '8010', EmployeeCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Manager', EmployeeID: 10, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', EmployeeCountry: 'Mexico', Freight: 3.25, Verified: !1,EmployeeName: "Antonio Moreno",
},
{
OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 12, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', EmployeeName:"VICTE",
ShipRegion: 'CJ', ShipPostalCode: '50739', EmployeeCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 13, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',EmployeeName: "Christina Berglund",
ShipRegion: 'RJ', ShipPostalCode: '02389-673', EmployeeCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 15, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',EmployeeName: "Hanna Moos",
ShipRegion: 'NM', ShipPostalCode: '87110', EmployeeCountry: 'USA', Freight: 48.29, Verified: !0
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', EmployeeName: 'Davolio',
ShipRegion: 'CJ', ShipPostalCode: '51100', EmployeeCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 2, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',EmployeeName: 'Buchanan',
ShipRegion: 'CJ', ShipPostalCode: '44087', EmployeeCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',EmployeeName: 'Fuller',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', EmployeeCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',EmployeeName: 'Leverling',
ShipRegion: 'CJ', ShipPostalCode: '69004', EmployeeCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 5, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',EmployeeName: 'Peacock',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', EmployeeCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 6, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',EmployeeName: 'Janet',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', EmployeeCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 7, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', EmployeeName: 'Suyama',
ShipRegion: 'CJ', ShipPostalCode: '3012', EmployeeCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 8, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',EmployeeName: 'Robert',
ShipRegion: 'CJ', ShipPostalCode: '1204', EmployeeCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 9, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',EmployeeName: 'Andrew',
ShipRegion: 'SP', ShipPostalCode: '08737-363', EmployeeCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 14, 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', EmployeeCountry: 'Venezuela', Freight: 81.91, Verified: !0, EmployeeName: 'Michael',
},
{
OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 11, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',EmployeeName: "Ana Trujillo",
ShipRegion: 'CJ', ShipPostalCode: '8010', EmployeeCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Manager', EmployeeID: 10, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', EmployeeCountry: 'Mexico', Freight: 3.25, Verified: !1,EmployeeName: "Antonio Moreno",
},
{
OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 12, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', EmployeeName:"VICTE",
ShipRegion: 'CJ', ShipPostalCode: '50739', EmployeeCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 13, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',EmployeeName: "Christina Berglund",
ShipRegion: 'RJ', ShipPostalCode: '02389-673', EmployeeCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 15, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',EmployeeName: "Hanna Moos",
ShipRegion: 'NM', ShipPostalCode: '87110', EmployeeCountry: 'USA', Freight: 48.29, Verified: !0
}];## See also