Customize the Spreadsheet like a Grid in React Spreadsheet
18 Jun 202624 minutes to read
The React Spreadsheet Editor component provides extensive customization options to make it behave and appear like a traditional data grid. This guide explains how to configure the Spreadsheet to mimic grid including hiding unnecessary UI elements and rendering checkboxes for a grid-like experience.
Steps to Customize Spreadsheet as a Grid
Step 1: Hide Unnecessary UI Elements
To make the Spreadsheet look and behave like a simple data grid, you can hide default UI elements such as the ribbon, formula bar, sheet tabs, and row and column headers. Assigning false to the following properties will hide the respective elements:
-
showRibbon: Hides the ribbon toolbar. -
showFormulaBar: Hides the formula bar. -
showSheetTabs: Hides the sheet tabs. -
showHeaders: Hides the row and column headers in the sheet.
Example:
<SpreadsheetComponent
showRibbon={false}
showSheetTabs={false}
showFormulaBar={false}
showAggregate={false}
>
<SheetsDirective>
<SheetDirective showHeaders={false}>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>Step 2: Render Checkboxes Like a Grid
Checkboxes can be rendered within cells of the first column using the beforeCellRender event, so that selection behaves like grid selection, allowing row selection based on the checkbox selection state. Additionally, you can bind custom functions to the checkbox click event as needed.
The following code example demonstrates how to customize the Spreadsheet to behave like a grid:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { SpreadsheetComponent, getRangeAddress, setRow, getCellAddress, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';
import { createCheckBox } from '@syncfusion/ej2-react-buttons';
import { select } from '@syncfusion/ej2-base';
/**
* Checkbox selection sample
*/
function Default() {
let spreadsheet;
const spreadsheetRef = React.useRef(null);
const cellStyle = { verticalAlign: 'middle' };
const scrollSettings = { isFinite: true };
const onCreated = () => {
spreadsheet = spreadsheetRef.current;
const usedRange = spreadsheet.getActiveSheet().usedRange;
const lastCell = getCellAddress(0, usedRange.colIndex);
spreadsheet.cellFormat({ fontWeight: 'bold' }, `A1:${lastCell}`);
updateRowCountBasedOnData();
};
// This method handles updating the sheet total row count based on the loaded data (used range).
const updateRowCountBasedOnData = () => {
const sheet = spreadsheet.getActiveSheet();
const usedRange = sheet.usedRange;
// Updating sheet row count based on the loaded data.
spreadsheet.setSheetPropertyOnMute(sheet, 'rowCount', usedRange.rowIndex > 0 ? usedRange.rowIndex + 1 : 2);
spreadsheet.resize();
};
// This method handles updating the selection and the checkbox state.
const updateSelectedState = (selectAllInput, rowCallBack, updateSelectedRange) => {
const sheet = spreadsheet.getActiveSheet();
let selectedCount = 0;
const lastColIdx = sheet.colCount - 1;
const newRangeColl = [];
let selectionStartIdx; let isSelectionStarted;
// Iterating all content rows.
for (let rowIdx = 1; rowIdx < sheet.rowCount; rowIdx++) {
if (rowCallBack) {
rowCallBack(rowIdx); // Invoking the callback for each row, in the callback the selection model and checkbox state updates are handled based on the current interaction.
}
// Updating overall selection count and updated selected range.
if (sheet.rows[rowIdx] && sheet.rows[rowIdx].selected) {
if (updateSelectedRange && !isSelectionStarted) {
isSelectionStarted = true;
selectionStartIdx = rowIdx;
}
selectedCount++;
} else if (isSelectionStarted) {
newRangeColl.push(getRangeAddress([selectionStartIdx, 0, rowIdx - 1, lastColIdx]));
isSelectionStarted = false;
}
}
if (selectAllInput) {
// Updating the current state in the select all checkbox.
if (selectedCount > 0) {
if (selectedCount === sheet.rowCount - 1) {
selectAllInput.classList.remove('e-stop');
// The class 'e-check' will add the checked state in the UI.
selectAllInput.classList.add('e-check');
} else {
// The class 'e-stop' will add the indeterminate state in the UI.
selectAllInput.classList.add('e-stop');
}
} else {
selectAllInput.classList.remove('e-check');
selectAllInput.classList.remove('e-stop');
}
}
if (updateSelectedRange) {
if (isSelectionStarted) {
newRangeColl.push(getRangeAddress([selectionStartIdx, 0, sheet.rowCount - 1, lastColIdx]));
} else if (!newRangeColl.length) {
// If all rows are unselected, we are moving the selection to A1 cell.
newRangeColl.push(getRangeAddress([0, 0, 0, 0]));
}
// Updating the new selected range in the Spreadsheet.
spreadsheet.selectRange(newRangeColl.join(' '));
}
};
// This method handles checkbox rendering in all rows and its interactions.
const renderCheckbox = (args) => {
const sheet = spreadsheet.getActiveSheet();
const rowIdx = args.rowIndex;
// Creating checkbox for all content rows.
const checkbox = createCheckBox(
spreadsheet.createElement,
false,
{
checked: !!(sheet.rows[rowIdx] && sheet.rows[rowIdx].selected)
}
);
// Appending the checkbox in the first column cell element.
args.element.appendChild(checkbox);
// Added click event to handle the checkbox interactions.
checkbox.addEventListener('click', () => {
const updateCheckboxSelection = (curRowIdx) => {
if (curRowIdx === rowIdx) {
const inputEle = select('.e-frame', checkbox);
let checked = !inputEle.classList.contains('e-check');
// Updating the current selection state to the custom selected property in the row model for interal prupose.
setRow(sheet, rowIdx, { selected: checked });
if (checked) {
inputEle.classList.add('e-check');
} else {
inputEle.classList.remove('e-check');
}
}
}
const selectAllCell = spreadsheet.getCell(0, 0);
updateSelectedState(selectAllCell && select('.e-frame', selectAllCell), updateCheckboxSelection, true);
});
};
// This method handles select all checkbox rendering and its interactions.
const renderSelectAllCheckbox = (tdEle) => {
// Creating selectall checkbox.
const checkbox = createCheckBox(spreadsheet.createElement, false);
const inputEle = select('.e-frame', checkbox);
// Updating select all checkbox state on initial rendering.
updateSelectedState(inputEle);
// Appending the selectall checkbox in the A1 cell element.
tdEle.appendChild(checkbox);
// Added click event to handle the select all actions.
checkbox.addEventListener('click', () => {
const sheet = spreadsheet.getActiveSheet();
const checked = !inputEle.classList.contains('e-check');
const rowCallback = (rowIdx) => {
// Updating the current selection state to the custom selected property in the row model for internal purpose.
setRow(sheet, rowIdx, { selected: checked });
// Updating the content checkboxes state based on the selectall checkbox state.
const cell = spreadsheet.getCell(rowIdx, 0);
const checkboxInput = cell && select('.e-frame', cell);
if (checkboxInput) {
if (checked) {
// The class 'e-check' will add the checked state in the UI.
checkboxInput.classList.add('e-check');
} else {
checkboxInput.classList.remove('e-check');
}
}
};
updateSelectedState(inputEle, rowCallback, true);
// If unchecking, also clear the spreadsheet selection highlight
if (!checked) {
spreadsheet.selectRange('A1');
}
});
};
// Triggers before appending the cell (TD) elements in the sheet content (DOM).
const beforeCellRender = (args) => {
// Checking first column to add checkbox only to the first column.
if (args.colIndex === 0 && args.rowIndex !== undefined) {
spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
const sheet = spreadsheet.getActiveSheet();
if (args.rowIndex === 0) { // Rendering select all checkbox in the A1 cell.
renderSelectAllCheckbox(args.element);
} else if (args.rowIndex < sheet.rowCount) { // Rendering checkboxs in the content cell.
renderCheckbox(args);
}
}
}
};
// Triggers before cell selection in spreadsheet
const beforeSelect = (args) => {
const sheet = spreadsheet.getActiveSheet();
const cellRngIdx = getRangeIndexes(args.range);
const startRow = cellRngIdx[0];
const startCol = cellRngIdx[1];
const endRow = cellRngIdx[2];
const endCol = cellRngIdx[3];
const lastColIdx = sheet.colCount - 1;
// Allow single cell selection
if (startRow === endRow && startCol === endCol) {
return;
}
// Allow full row or multiple full rows (from first column to last column)
// This enables checkbox-based single and multiple row selections
if (startCol === 0 && endCol === lastColIdx) {
return;
}
// Cancel all other selections (partial ranges, multi-cell selections, column selections)
args.cancel = true;
}
// Triggers before initiating the editor in the cell.
const beforeEditHandler = (args) => {
args.cancel = true;
};
return (
<div className='control-pane'>
<div className='control-section spreadsheet-control'>
<SpreadsheetComponent
ref={spreadsheetRef}
cellStyle={cellStyle}
scrollSettings={scrollSettings}
showRibbon={false}
allowAutoFill={false}
allowOpen={false}
allowSave={false}
showSheetTabs={false}
showFormulaBar={false}
showAggregate={false}
created={onCreated}
beforeCellRender={beforeCellRender}
cellEdit={beforeEditHandler}
beforeSelect={beforeSelect}
>
<SheetsDirective>
<SheetDirective
name="Car Sales Report"
showHeaders={false}
standardHeight={36}
rowCount={100}
colCount={100}
frozenRows={1}
frozenColumns={1}
>
<RangesDirective>
<RangeDirective dataSource={defaultData} startCell='B1' />
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={40} />
<ColumnDirective width={100} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={100} />
<ColumnDirective width={100} />
<ColumnDirective width={100} />
<ColumnDirective width={100} />
<ColumnDirective width={180} />
<ColumnDirective width={180} />
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
</div>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnDirective, CellStyleModel, UsedRangeModel, SheetModel } from '@syncfusion/ej2-react-spreadsheet';
import { SpreadsheetComponent, getRangeAddress, setRow, getCellAddress, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';
import { createCheckBox } from '@syncfusion/ej2-react-buttons';
import { select } from '@syncfusion/ej2-base';
/**
* Checkbox selection sample
*/
function Default() {
let spreadsheet: SpreadsheetComponent;
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const cellStyle: CellStyleModel = { verticalAlign: 'middle' };
const scrollSettings = { isFinite: true };
const onCreated = (): void => {
if (spreadsheetRef.current) {
spreadsheet = spreadsheetRef.current;
}
const usedRange: UsedRangeModel = spreadsheet.getActiveSheet().usedRange;
const lastCell: string = getCellAddress(0, usedRange.colIndex);
spreadsheet.cellFormat({ fontWeight: 'bold' }, `A1:${lastCell}`);
updateRowCountBasedOnData();
};
// This method handles updating the sheet total row count based on the loaded data (used range).
const updateRowCountBasedOnData = (): void => {
const sheet: SheetModel = spreadsheet.getActiveSheet();
const usedRange: UsedRangeModel = sheet.usedRange;
spreadsheet.setSheetPropertyOnMute(sheet, 'rowCount', usedRange.rowIndex > 0 ? usedRange.rowIndex + 1 : 2);
spreadsheet.resize();
};
// This method handles updating the selection and the checkbox state.
const updateSelectedState = (selectAllInput?: any, rowCallBack?: any, updateSelectedRange?: any): void => {
const sheet: SheetModel = spreadsheet.getActiveSheet();
let selectedCount: number = 0;
const lastColIdx: number = sheet.colCount - 1;
const newRangeColl: string[] = [];
let selectionStartIdx: number | undefined;
let isSelectionStarted: boolean | undefined;
for (let rowIdx: number = 1; rowIdx < sheet.rowCount; rowIdx++) {
if (rowCallBack) {
rowCallBack(rowIdx); // Invoking the callback for each row, in the callback the selection model and checkbox state updates are handled based on the current interaction.
}
// Updating overall selection count and updated selected range.
if (sheet.rows[rowIdx] && sheet.rows[rowIdx].selected) {
if (updateSelectedRange && !isSelectionStarted) {
isSelectionStarted = true;
selectionStartIdx = rowIdx;
}
selectedCount++;
} else if (isSelectionStarted) {
newRangeColl.push(getRangeAddress([selectionStartIdx!, 0, rowIdx - 1, lastColIdx]));
isSelectionStarted = false;
}
}
if (selectAllInput) {
// Updating the current state in the select all checkbox.
if (selectedCount > 0) {
if (selectedCount === sheet.rowCount - 1) {
selectAllInput.classList.remove('e-stop');
// The class 'e-check' will add the checked state in the UI.
selectAllInput.classList.add('e-check');
} else {
// The class 'e-stop' will add the indeterminate state in the UI.
selectAllInput.classList.add('e-stop');
}
} else {
selectAllInput.classList.remove('e-check');
selectAllInput.classList.remove('e-stop');
}
}
if (updateSelectedRange) {
if (isSelectionStarted) {
newRangeColl.push(getRangeAddress([selectionStartIdx!, 0, sheet.rowCount - 1, lastColIdx]));
} else if (!newRangeColl.length) {
// If all rows are unselected, we are moving the selection to A1 cell.
newRangeColl.push(getRangeAddress([0, 0, 0, 0]));
}
// Updating the new selected range in the Spreadsheet.
spreadsheet.selectRange(newRangeColl.join(' '));
}
};
// This method handles checkbox rendering in all rows and its interactions.
const renderCheckbox = (args: any): void => {
const sheet: SheetModel = spreadsheet.getActiveSheet();
const rowIdx: number = args.rowIndex;
// Creating checkbox for all content rows.
const checkbox = createCheckBox(
spreadsheet.createElement,
false,
{
checked: !!(sheet.rows[rowIdx] && sheet.rows[rowIdx].selected)
}
);
// Appending the checkbox in the first column cell element.
args.element.appendChild(checkbox);
// Added click event to handle the checkbox interactions.
checkbox.addEventListener('click', () => {
const updateCheckboxSelection = (curRowIdx: any) => {
if (curRowIdx === rowIdx) {
const inputEle = select('.e-frame', checkbox);
let checked = !inputEle.classList.contains('e-check');
// Updating the current selection state to the custom selected property in the row model for interal prupose.
setRow(sheet, rowIdx, { selected: checked });
if (checked) {
inputEle.classList.add('e-check');
} else {
inputEle.classList.remove('e-check');
}
}
};
const selectAllCell: any = spreadsheet.getCell(0, 0);
updateSelectedState(selectAllCell && select('.e-frame', selectAllCell) as any, updateCheckboxSelection, true);
});
};
// This method handles select all checkbox rendering and its interactions.
const renderSelectAllCheckbox = (tdEle: any): void => {
const checkbox = createCheckBox(spreadsheet.createElement, false);
const inputEle: HTMLElement = select('.e-frame', checkbox);
updateSelectedState(inputEle);
tdEle.appendChild(checkbox);
checkbox.addEventListener('click', () => {
const sheet: SheetModel = spreadsheet.getActiveSheet();
const checked: boolean = !inputEle.classList.contains('e-check');
const rowCallback = (rowIdx: number) => {
setRow(sheet, rowIdx, { selected: checked });
const cell: any = spreadsheet.getCell(rowIdx, 0);
const checkboxInput: HTMLElement = cell && select('.e-frame', cell);
if (checkboxInput) {
if (checked) {
checkboxInput.classList.add('e-check');
} else {
checkboxInput.classList.remove('e-check');
}
}
};
updateSelectedState(inputEle, rowCallback, true);
if (!checked) {
spreadsheet.selectRange('A1');
}
});
};
// Triggers before appending the cell (TD) elements in the sheet content (DOM).
const beforeCellRender = (args: any): void => {
if (args.colIndex === 0 && args.rowIndex !== undefined) {
spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
const sheet: SheetModel = spreadsheet.getActiveSheet();
if (args.rowIndex === 0) {
renderSelectAllCheckbox(args.element);
} else if (args.rowIndex < sheet.rowCount) {
renderCheckbox(args);
}
}
}
};
// Triggers before cell selection in spreadsheet
const beforeSelect = (args: any): void => {
const sheet: SheetModel = spreadsheet.getActiveSheet();
const cellRngIdx: number[] = getRangeIndexes(args.range);
const startRow: number = cellRngIdx[0];
const startCol: number = cellRngIdx[1];
const endRow: number = cellRngIdx[2];
const endCol: number = cellRngIdx[3];
const lastColIdx: number = sheet.colCount - 1;
// Allow single cell selection
if (startRow === endRow && startCol === endCol) {
return;
}
// Allow full row or multiple full rows (from first column to last column)
// This enables checkbox-based single and multiple row selections
if (startCol === 0 && endCol === lastColIdx) {
return;
}
// Cancel all other selections (partial ranges, multi-cell selections, column selections)
args.cancel = true;
};
// Triggers before initiating the editor in the cell.
const beforeEditHandler = (args: any): void => {
args.cancel = true;
};
return (
<div className='control-pane'>
<div className='control-section spreadsheet-control'>
<SpreadsheetComponent
ref={spreadsheetRef}
cellStyle={cellStyle}
scrollSettings={scrollSettings}
showRibbon={false}
allowAutoFill={false}
allowOpen={false}
allowSave={false}
showSheetTabs={false}
showFormulaBar={false}
showAggregate={false}
created={onCreated}
beforeCellRender={beforeCellRender}
cellEdit={beforeEditHandler}
beforeSelect={beforeSelect}
>
<SheetsDirective>
<SheetDirective
name="Car Sales Report"
showHeaders={false}
standardHeight={36}
rowCount={100}
colCount={100}
frozenRows={1}
frozenColumns={1}
>
<RangesDirective>
<RangeDirective dataSource={defaultData} startCell='B1' />
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={40} />
<ColumnDirective width={100} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={150} />
<ColumnDirective width={100} />
<ColumnDirective width={100} />
<ColumnDirective width={100} />
<ColumnDirective width={100} />
<ColumnDirective width={180} />
<ColumnDirective width={180} />
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
</div>
);
}
export default Default;
const root = createRoot(document.getElementById('sample') as HTMLElement);
root.render(<Default />);export let defaultData = [
{
"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]"
}
]export let defaultData: 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]"
}
]