¶ 1. Default Editor
This cell editor is built into the control and doesn't require user specification.
¶ 2. Dropdown Selector
This is one of the built-in cell editors that requires you to specify the data source. In the example below, we assign a currency dropdown editor to cells C3 and C6. See section 6 for parameter details.
/**
* Currency dropdown
*/
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get active sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* Step 2: Create currency dropdown and register
*/
const cny = document.createElement('option');
cny.value = 'CNY';
cny.textContent = 'CNY-RMB';
const usd = document.createElement('option');
usd.value = 'USD';
usd.textContent = 'USD-Dollar';
const eur = document.createElement('option');
eur.value = 'EUR';
eur.textContent = 'EUR-Euro';
let optionsBZ = [cny, usd, eur];
activeSheet.setCellEditor('C3', websheet.Model.SelectCell, {data:optionsBZ,bextend:true});
activeSheet.setCellEditor('C6', websheet.Model.SelectCell, {data:optionsBZ,bextend:true});
/**
* Step 3: Redraw sheet
*/
activeSheet.setColWidth(1, 160);
activeSheet.setColWidth(2, 160);
activeSheet.setColWidth(3, 160);
activeSheet.setColWidth(4, 160);
activeSheet.setColWidth(5, 160);
activeSheet.WorkFormula(); // Rebuild formulas
activeSheet.cacl(); // Calculate formulas
wsheet.BuildSheet();
wsheet.Draw();
Result:
¶ 3. Date/Time Editor
Websheet uses the compact flatpickr control (v4.6.13) for date/time editing.
¶ 3.1 Default Date Editor
activeSheet.SetCellValue('B3','2025-02-28');
activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);
¶ 3.2 Month Picker
activeSheet.SetCellValue('B3','2025-02-28');
activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);
¶ 3.3 Multiple Date Selection
activeSheet.SetCellValue('B3','2025-02-28');
activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);
¶ 3.4 DateTime Picker
activeSheet.SetCellValue('B3','2025-02-28');
activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);
¶ 3.5 Time Picker
activeSheet.SetCellValue('B3','2025-02-28');
activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);
Configuration reference: flatpickr official site.
Example:
¶ 4. Progress Bar
This built-in editor displays completion percentage based on cell value.
/**
* Step 1: Get active sheet
*/
let activeSheet = wsheet.ActiveSheet();
activeSheet.SetCellValue('A3','Progress Control');
/**
* Step 2: Create progress bar and register
*/
let redoptions = {
isVertical: false,
background: '#eee',
foreground: 'red',
textColor: '#333'
};
activeSheet.SetCellValue('B3',0.01); // Set completion
activeSheet.setCellEditor('B3', websheet.Model.ProgressCell,redoptions);
let yeoptions = {
isVertical: false,
background: '#eee',
foreground: 'yellow',
textColor: '#333'
};
activeSheet.SetCellValue('B4',0.50); // Set completion
activeSheet.setCellEditor('B4', websheet.Model.ProgressCell, yeoptions);
activeSheet.SetCellValue('B5',1); // Set completion
activeSheet.setCellEditor('B5', websheet.Model.ProgressCell);
activeSheet.SetCellValue('B6','Aab'); // Set completion
activeSheet.setCellEditor('B6', websheet.Model.ProgressCell);
/**
* Step 3: Redraw sheet
*/
activeSheet.setColWidth(1, 160);
activeSheet.setColWidth(2, 260);
activeSheet.setColWidth(3, 160);
activeSheet.setColWidth(4, 160);
activeSheet.setColWidth(5, 160);
activeSheet.WorkFormula(); // Rebuild formulas
activeSheet.cacl(); // Calculate formulas
wsheet.BuildSheet();
wsheet.Draw();
Parameters:
| Parameter | Description | Required |
|---|---|---|
| background | Background color (e.g. '#eee') | No |
| foreground | Foreground color (e.g. 'red') | No |
| textColor | Text color | No |
¶ 5. Auto-Complete Selector
This editor automatically filters matching data based on input, allowing selection via mouse or arrow keys.
/**
* Step 1: Get active sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* Step 2: Define data source and set cell editor
*/
const codeData = [
{ code: "B01", description: "Apple" },
{ code: "B02", description: "Banana" },
{ code: "B03", description: "Orange" },
{ code: "B04", description: "Watermelon" },
{ code: "B05", description: "Grape" },
{ code: "A01", description: "TV" },
{ code: "A02", description: "Refrigerator" },
{ code: "A03", description: "Washing Machine" },
{ code: "C01", description: "Laptop" },
{ code: "C02", description: "Mobile Phone" },
{ code: "C03", description: "Laptop1" },
{ code: "C04", description: "Mobile Phone1" }
];
activeSheet.setCellEditor('C1:C10', websheet.Model.CodeSelector, {
showdata: codeData,
placeholder: 'Select code',
bextend: true
});
activeSheet.setColWidth(3, 250);
/**
* Step 3: Redraw sheet
*/
wsheet.BuildSheet();
wsheet.Draw();
Parameters:
| Parameter | Description | Required |
|---|---|---|
| showdata | Data array in format | Yes |
| placeholder | Hint text (default: 'Code Select') | No |
| bextend | Whether to auto-fill name (default: false) | No |
¶ 6. Parameter Specifications
setCellEditor parameters:
| Parameter | Description | Required |
|---|---|---|
| range | Cell address (e.g. 'A1') | Yes |
| widget | View control (e.g. websheet.Model.DatePickCell) | Yes |
| contex | Context data (e.g. data source for currency control) | No |
¶ 7. Planned Controls
- Radio Buttons
- Checkboxes
- Toggle Switches
- Sliders
¶ 8. Custom Editors
For custom editor/display requirements, see Custom Display Controls.