Sort in React Spreadsheet component
1 Jul 202624 minutes to read
Sorting helps arranging the data to a specific order in a selected range of cells. You can use the allowSorting property to enable or disable sorting functionality.
- The default value for
allowSortingproperty istrue.
By default, the sort module is injected internally into Spreadsheet to perform sorting.
Sort by Cell value
In the active Spreadsheet, you can sort a selected range of cells by their values. Sorting can be done in following ways:
- Ribbon Toolbar – Select the sort option under the Ribbon toolbar and choose ascending or descending.
- Context Menu – Right-click the sheet, select the sort option, and choose ascending or descending.
-
Programmatically – Use the
sortmethod.
The cell values can be sorted in the following orders:
- Ascending – Default order for sorting.
-
Descending – Reverse order.
When thesortmethod is called with empty arguments, the selected range is sorted by the active cell’s column in ascending order.
- The
beforeSortevent will be triggered before sorting the specified range.- The
sortCompleteevent will be triggered after the sort action is completed successfully.
The following code example demonstrates the sort functionality in the Spreadsheet control.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, SortEventArgs } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
const onDataBound = () => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet && spreadsheet.activeSheetIndex === 0 && !spreadsheet.isOpen) {
spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:H1');
spreadsheet.sort({ containsHeader: true }, 'A1:H11');
}
};
const onSortComplete = (args) => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.selectRange(args.range);
}
};
return (
<SpreadsheetComponent ref={spreadsheetRef} dataBound={onDataBound} sortComplete={onSortComplete} >
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, SortEventArgs } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const onDataBound = (): void => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet && spreadsheet.activeSheetIndex === 0 && !spreadsheet.isOpen) {
spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:H1');
spreadsheet.sort({ containsHeader: true }, 'A1:H11');
}
};
const onSortComplete = (args: SortEventArgs): void => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.selectRange(args.range as string);
}
};
return (
<SpreadsheetComponent ref={spreadsheetRef} dataBound={onDataBound} sortComplete={onSortComplete} >
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "[email protected]"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "[email protected]"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "[email protected]"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "[email protected]"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "[email protected]"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "[email protected]"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "[email protected]"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "[email protected]"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "[email protected]"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "[email protected]"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "[email protected]"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "[email protected]"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "[email protected]"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "[email protected]"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "[email protected]"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "[email protected]"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
}
]Data contains header
You can specify whether the selected range of cells contains header. To specify, you need to set the containsHeader property to true and pass it as sortOption arguments of the sort method.
- If the
containsHeaderproperty is not set and active cell column’s first cell value type is differed from the second cell value type, the first row data in the range are marked as column headers.
You can also enable or disable this property using beforeSort event arguments,
const beforeSort = (args: BeforeSortEventArgs): void => {
args.sortOptions.containsHeader = true;
}In the custom sort dialog, the Data contains header checkbox is checked on load. Thus, the default value for containsHeader is true in custom sort dialog.
Case Sensitive sort
By default, sorting in the Spreadsheet is case insensitive. To perform sorting with case sensitivity, set the caseSensitive property to true and pass it as part of the sortOption arguments in the sort method.
- Case sensitive sorting applies only to cells containing alphabets.
- In ascending order with case sensitivity enabled, cells with lowercase text appear above cells with uppercase text.
- The default value for the
caseSensitiveproperty isfalse.
- The default value for the
You can also enable or disable this property using beforeSort event arguments,
const beforeSort = (args: BeforeSortEventArgs): void => {
args.sortOptions.caseSensitive = true;
}In the custom sort dialog, the Case sensitive checkbox is unchecked on load as the default value is false.
Sort multiple columns
When you want to perform sorting on multiple columns, it can be done by any of the following ways:
- Select the
Custom sort…menu item from the Ribbon toolbar item or context menu item. - Use the
sortmethod programmatically by providing sort criteria.
- The current sorting functionality supports sorting based on cell values only.
Custom Sort Dialog
The custom sort dialog allows sorting multiple columns in a selected range using a rich UI. This dialog appears when you choose Custom sort… from the Ribbon or context menu.
- By default, the dialog shows sort criteria with the first column name from the selected range. This initial criterion cannot be removed.
- You can add more criteria using the
Add Columnbutton at the bottom of the dialog. Each criterion can have its own sort order. -
Newly added criteria can be removed using the
deleteicon next to each item. - Data contains header – Refer to the Data contains header topic for details about the checkbox.
- Case sensitive – Refer to the Case sensitive sort topic for details about the checkbox.
This dialog makes it easy to sort complex datasets by multiple columns with clear, customizable options.
Passing sort criteria manually
The multi-column sorting can also be performed manually by passing sort options to the sort method programmatically. The sortOption have the following arguments:
-
sortDescriptors– Sort criteria collection that holds the collection of field name, sort order, andsortComparer. -
containsHeader– Boolean argument that specifies whether the range has headers in it. -
caseSensitive– Boolean argument that specifies whether the range needs to consider case.
- All the arguments are optional.
- When a
sortDescriptoris specified without field, the field of the firstsortDescriptorfrom the collection will be assigned from active cell’s column name and others will be ignored. Hence, it will act as single column sorting.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { tradeData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
const onDataBound = () => {
let spreadsheet = spreadsheetRef.current;
let sortDescriptors = [
{ field: 'F', order: 'Ascending' },
{ field: 'E', order: 'Ascending' },
{ field: 'C', order: 'Descending' }
];
if (spreadsheet && spreadsheet.activeSheetIndex === 0) {
spreadsheet.sort({ sortDescriptors: sortDescriptors, containsHeader: true }, 'A1:H30');
}
};
const onSortComplete = (args) => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.selectRange(args.range);
}
};
return (
<SpreadsheetComponent ref={spreadsheetRef} dataBound={onDataBound} sortComplete={onSortComplete}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={tradeData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, SortDescriptor, SortEventArgs } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { tradeData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const onDataBound = (): void => {
let spreadsheet = spreadsheetRef.current;
let sortDescriptors: SortDescriptor[] = [
{ field: 'F', order: 'Ascending' },
{ field: 'E', order: 'Ascending' },
{ field: 'C', order: 'Descending' }
];
if (spreadsheet && spreadsheet.activeSheetIndex === 0) {
spreadsheet.sort({ sortDescriptors: sortDescriptors, containsHeader: true }, 'A1:H30');
}
};
const onSortComplete = (args: SortEventArgs) => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.selectRange(args.range as string);
}
};
return (
<SpreadsheetComponent ref={spreadsheetRef} dataBound={onDataBound} sortComplete={onSortComplete}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={tradeData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "[email protected]"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "[email protected]"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "[email protected]"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "[email protected]"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "[email protected]"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "[email protected]"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "[email protected]"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "[email protected]"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "[email protected]"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "[email protected]"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "[email protected]"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "[email protected]"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "[email protected]"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "[email protected]"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "[email protected]"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "[email protected]"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
}
]Custom sort comparer
The sortDescriptor holds the sortComparer property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each sortDescriptor can be customized using the custom sort comparer function.
By customizing sort comparer, you can define the sort action as desired.
- The
sortCompareris an optional property ofsortDescriptor.
For custom sort comparer example, refer to the [Sort a range by custom list] below.
Sort a range by custom list
You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using custom sort comparer.
For example, in the demo below, the Trustworthinesscolumn is sorted according to the custom list values:
PerfectSufficientInsufficient
This approach lets you control the order of sorting beyond the default ascending or descending options, making it easier to arrange data according to personalized or domain-specific criteria.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { DataUtil } from '@syncfusion/ej2-data';
import { tradeData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
const mySortComparer = (x, y) => {
// custom sort comparer to sort based on the custom list.
let customList = ['Perfect', 'Sufficient', 'Insufficient'];
let comparer = DataUtil.fnSort('Ascending');
return comparer(x ? customList.indexOf(x.value) : x, y ? customList.indexOf(y.value) : y);
};
const onDataBound = () => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet && spreadsheet.activeSheetIndex === 0) {
spreadsheet.sort({ sortDescriptors: { field: 'F', sortComparer: mySortComparer }, containsHeader: true }, 'A1:H20');
}
};
const onSortComplete = (args) => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.selectRange(args.range);
}
};
return (
<SpreadsheetComponent ref={spreadsheetRef} dataBound={onDataBound} sortComplete={onSortComplete}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={tradeData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, CellModel, SortEventArgs } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { DataUtil } from '@syncfusion/ej2-data';
import { tradeData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const mySortComparer = (x: CellModel, y: CellModel): number => {
// custom sort comparer to sort based on the custom list.
let customList: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let comparer: Function = DataUtil.fnSort('Ascending');
return comparer(x ? customList.indexOf(x.value as string) : x, y ? customList.indexOf(y.value as string) : y);
};
const onDataBound = (): void => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet && spreadsheet.activeSheetIndex === 0) {
spreadsheet.sort({ sortDescriptors: { field: 'F', sortComparer: mySortComparer }, containsHeader: true }, 'A1:H20');
}
};
const onSortComplete = (args: SortEventArgs): void => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.selectRange(args.range as string);
}
};
return (
<SpreadsheetComponent ref={spreadsheetRef} dataBound={onDataBound} sortComplete={onSortComplete}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={tradeData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "[email protected]"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "[email protected]"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "[email protected]"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "[email protected]"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "[email protected]"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "[email protected]"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "[email protected]"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "[email protected]"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "[email protected]"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "[email protected]"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "[email protected]"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "[email protected]"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "[email protected]"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "[email protected]"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "[email protected]"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "[email protected]"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "[email protected]"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "[email protected]"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "[email protected]"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "[email protected]"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "[email protected]"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "[email protected]"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "[email protected]"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "[email protected]"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "[email protected]"
}
]Known error validations
The following errors have been handled for sorting,
-
Out of range validation: When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message
Select a cell or range inside the used range and try againwill be displayed. No sort will be performed if the range is invalid. -
Empty field validation: When the sort criteria does not have a column selected (empty) in the custom sort dialog, it will become invalid, and an error message
Sort criteria column should not be emptywill be displayed onOKbutton click. -
Duplicate field validation: When the column names of added sort criteria are repeated more than once in the custom sort dialog, it will become invalid and an error message
<Column name> is mentioned more than once. Duplicate columns must be removedwill be displayed onOKbutton click.
Limitations
- Sorting is not supported with formula contained cells.
- Sort by color is not supported.
Note
You can refer to our React Spreadsheet Editor feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.