This control only implements basic table functionality.
¶ 1. Basic Table Usage
Tables can be dynamically added using the addTable function. Example code:
let tableColumn = [];
let col = 1;
tableColumn.push('Test' + (col++) + 'Column');
tableColumn.push('Test' + (col++) + 'Column');
tableColumn.push('Test' + (col++) + 'Column');
tableColumn.push('Test' + (col++) + 'Column');
activeSheet.addTable('Test1', 'C2:L12', tableColumn, 'TableStyleMedium2');
Parameters explained:
| Position | Example | Description |
|---|---|---|
| 1 | 'Test1' | Table name (used for subsequent operations) |
| 2 | 'C2:L12' | Table range (includes headers) |
| 3 | tableColumn | Array of header names |
| 4 | 'TableStyleMedium2' | Default table style |
This control only supports 'TableStyleMedium2' and 'TableStyleMedium28' styles. Other styles can be defined in XLSX templates and loaded via templates, or refer to Section 4.1 for custom styling.
Final result:
¶ 2. Setting Table Data Sources
¶ 2.1 2D Array Data
Typically JSON data returned from backend. Example simulates backend data converted to employees array:
const jsonString = `
[
{
"employeeId": "EM001",
"name": "Li Qiang",
"gender": "Male",
"age": 32,
"department": "Tech Dept",
"position": "Senior Engineer",
"hireDate": "2018-05-15",
"email": "zhangwei@company.com",
"phone": "+86 13812345678",
"salary": 28000,
"status": "Active"
},
{
"employeeId": "EM002",
"name": "Wang Fang",
"gender": "Female",
"age": 28,
"department": "HR Dept",
"position": "Recruitment Lead",
"hireDate": "2020-09-22",
"email": "wangfang@company.com",
"phone": "+86 13987654321",
"salary": 18000,
"status": "Active"
}
] `;
const employees = JSON.parse(jsonString);
¶ 2.2 Column-Order Data Binding
Default mode fills table data according to array order:
activeSheet.SetTableData('Test1', employees);
//Array data determines table length
Parameters:
¶ 2.3 Column-Name Data Binding
First define column mappings (display names vs field names):
let tableColumn2 = [];
tableColumn2.push({ showName: 'ID', codeName: 'employeeId' });
tableColumn2.push({ showName: 'Name', codeName: 'name' });
tableColumn2.push({ showName: 'Gender', codeName: 'gender' });
tableColumn2.push({ showName: 'Age', codeName: 'age' });
tableColumn2.push({ showName: 'Department', codeName: 'department' });
tableColumn2.push({ showName: 'Position', codeName: 'position' });
tableColumn2.push({ showName: 'Hire Date', codeName: 'hireDate' });
tableColumn2.push({ showName: 'Email', codeName: 'email' });
tableColumn2.push({ showName: 'Phone', codeName: 'phone' });
tableColumn2.push({ showName: 'Salary', codeName: 'salary' });
tableColumn2.push({ showName: 'Status', codeName: 'status' });
activeSheet.SetTableColumn('Test1', tableColumn2);
Then set data source:
activeSheet.SetTableData('Test1', employees);
Result:
¶ 3. Retrieving Table Data
¶ 3.1 Default Mode (No Column Names)
let aaa=activeSheet.GetTableDate('Test1')
¶ 3.2 Column-Name Mode
let aaa=activeSheet.GetTableDate('Test1')
¶ 4. Setting Column Editors
Example implements dropdown for department selection:
const techOpt = document.createElement('option');
techOpt.value = 'Tech Dept';
techOpt.textContent = 'Tech Dept';
const hrOpt = document.createElement('option');
hrOpt.value = 'HR Dept';
hrOpt.textContent = 'HR Dept';
const mgmtOpt = document.createElement('option');
mgmtOpt.value = 'Management';
mgmtOpt.textContent = 'Management';
let deptOptions = [techOpt, hrOpt, mgmtOpt];
activeSheet.setCellEditor('G3:G12', websheet.Model.SelectCell, deptOptions)
¶ 5. Column Formatting
Example sets header font and salary number formatting:
let lsFont = new websheet.Model.Font();
lsFont.name = 'LiSu';
lsFont.sz = 18;
lsFont.color.rgb = '#FFFFFF';
activeSheet.SetCellFont('C2', lsFont);
let centerAlign = new websheet.Model.CellAlignment();
centerAlign.horizontal = 'center';
centerAlign.vertical = 'center';
activeSheet.SetCellAlignment('C2', centerAlign);
// Custom salary formatting
let salaryFormat = new websheet.Model.NumFmt();
salaryFormat.numFmtId = 200;
salaryFormat.formatCode = '#,##0.0000_);[Red]\(#,##0.0000\)';
let rightAlign = new websheet.Model.CellAlignment();
rightAlign.horizontal = 'right';
rightAlign.vertical = 'center';
activeSheet.SetCellAlignment('L13', rightAlign);
activeSheet.SetCellNumFmts('L3:L13', salaryFormat);
¶ 6. Table Aggregations
Example adds average age and salary total formulas:
activeSheet.SetCellValue(13, 5, 'Avg Age:');
activeSheet.SetCellValue(13,6, '=AVERAGE(F3:F12)');
activeSheet.SetCellValue(13, 11, 'Salary Total:');
activeSheet.SetCellValue(13, 12, '=SUM(L3:L12)');
¶ 7. Custom Table Styles (Coming Soon)
// TBD