TableSheet supports multiple column sorting through the allowSorts option on ITableSheetOptions.
When allowSorts is enabled, users can sort by multiple columns simultaneously, providing more flexible data organization.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var sheet, spread;
var columnAllowSort = {
id: true, firstName: true, lastName: true, birth: true,
state: true, dept: true, title: true, salary: true
};
var columnIndexMap = {
id: 0, firstName: 1, lastName: 2, birth: 3,
state: 4, dept: 5, title: 6, salary: 7
};
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread();
bindEvents();
};
function initSpread() {
spread = GC.Spread.Sheets.findControl(document.getElementById("ss"));
spread.suspendPaint();
//1. init a sheet
spread.clearSheets();
spread.clearSheetTabs();
sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowSorts = getElementById("allowSorts").checked;
var data = generateData(1000);
var dataManager = spread.dataManager();
var employeeTable = dataManager.addTable("employeeTable", {
data: data.employees
});
var departmentTable = dataManager.addTable("departmentTable", {
data: data.departments
});
dataManager.addRelationship(employeeTable, "dept", "department", departmentTable, "dept_no", "employees");
dataManager.addRelationship(departmentTable, "leader_id", "manager", employeeTable, "id", "a");
spread.resumePaint();
var numericStyle = new GC.Spread.Sheets.Style();
numericStyle.formatter = "$ #,##0.00";
var formatStringStyle = new GC.Spread.Sheets.Style();
formatStringStyle.formatter = 'yyyy-mm-dd';
var cols = [
{ value: 'id', caption: 'ID', allowSort: columnAllowSort.id},
{ value: 'firstName', caption: 'First Name', width: 100, allowSort: columnAllowSort.firstName},
{ value: 'lastName', caption: 'Last Name', width: 100, allowSort: columnAllowSort.lastName},
{ value: 'birth', caption: 'Birthday', width: 100, style: formatStringStyle, allowSort: columnAllowSort.birth},
{ value: 'state', caption: 'State', width: 100, allowSort: columnAllowSort.state},
{ value: 'dept', caption: 'Department No', width: 130, allowSort: columnAllowSort.dept},
{ value: 'title', caption: 'Title', width: 120, allowSort: columnAllowSort.title},
{ value: 'salary', caption: 'Salary', style: numericStyle, width: 100, allowSort: columnAllowSort.salary},
];
var employeeView = employeeTable.addView("employeeView", cols, undefined);
employeeView.fetch().then(function (args) {
sheet.suspendPaint();
sheet.setDataView(employeeView);
sheet.resumePaint();
});
}
function randomFromList(list) {
return list[~~(Math.random() * list.length)];
}
function generateData(itemCount) {
var data = {employees:[], departments: departments};
var states = ["Texas", "New York", "Florida", "Washington", "Ohio"];
var department_id = ["D001", "D002", "D003", "D004", "D005", "D006", "D007", "D008", "D009"];
var title = ["Senior Engineer", "Staff", "Engineer", "Senior Staff", "Assistant Engineer", "Technique Leader", "Manager"];
for (var i = 0; i < itemCount; i++) {
var date = new Date(parseInt(Math.random() * 12052666) * 24 * 3600); //The timestamp
date.setHours(0,0,0,0);
var item = {
id: i + 1,
firstName: randomFromList(firstNames),
lastName: randomFromList(lastNames),
birth: date,
state: randomFromList(states),
dept: i < 9 ? department_id[i] : randomFromList(department_id),
title: i < 9 ? "Manager" : randomFromList(title),
salary: 3000 + parseInt(Math.random() * 100) * 500,
};
data.employees.push(item);
}
return data;
}
function bindEvents() {
var allowSortsCheckbox = document.getElementById('allowSorts');
allowSortsCheckbox.addEventListener('change', function () {
if (sheet) {
sheet.options.allowSorts = allowSortsCheckbox.checked;
}
});
var columnSelect = document.getElementById('columnSelect');
var columnAllowSortCheckbox = document.getElementById('columnAllowSort');
columnSelect.addEventListener('change', function () {
columnAllowSortCheckbox.checked = columnAllowSort[columnSelect.value];
});
columnAllowSortCheckbox.addEventListener('change', function () {
var colName = columnSelect.value;
columnAllowSort[colName] = columnAllowSortCheckbox.checked;
var colIndex = columnIndexMap[colName];
spread.commandManager().execute({
cmd: "ModifyColumn",
sheetName: "TableSheet1",
col: colIndex,
column: { value: colName, allowSort: columnAllowSort[colName] }
});
});
}
function getElementById (domId) {
return document.getElementById(domId);
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/departments.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div id="options-container" class="options-container">
<fieldset>
<legend>Multiple Sorting Options</legend>
<input type="checkbox" id="allowSorts" checked/>
<label for="allowSorts">Allow Sorts</label>
<br>
</fieldset>
<fieldset>
<legend>Column Sorting Options</legend>
<label for="columnSelect">Column: </label>
<select id="columnSelect">
<option value="id">ID</option>
<option value="firstName">First Name</option>
<option value="lastName">Last Name</option>
<option value="birth">Birthday</option>
<option value="state">State</option>
<option value="dept">Department No</option>
<option value="title">Title</option>
<option value="salary">Salary</option>
</select>
<div style="margin-top: 6px;">
<input type="checkbox" id="columnAllowSort" checked/>
<label for="columnAllowSort">Sort Visible</label>
</div>
</fieldset>
</div>
</div>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fieldset {
padding: 6px;
margin: 0;
margin-top: 10px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
fieldset span,
fieldset input,
fieldset select {
display: inline-block;
text-align: left;
}
fieldset span {
width: 50px;
}
fieldset input[type=text] {
width: calc(100% - 58px);
}
fieldset input[type=button] {
width: 100%;
text-align: center;
}
fieldset select {
width: calc(100% - 50px);
}
.field-line {
margin-top: 4px;
}
