Detect Table Column Name Change

Since table headers are still treated as cells, we can monitor when they are changed with the ValueChanged event. We can configure the event trigger on our column headers via tableManager.find(). 

For this example, we can set up a simple table similar to the following:

var data = {
	sales: [
		{ orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99, isDelivered: true },
		{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99, isDelivered: false },
		{ orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99, isDelivered: false }
	]
};

var table = sheet.tables.add('tableSales', 1, 1, 5, 5);
table.style(spreadNS.Tables.TableThemes["medium4"]);
var tableColumn1 = new spreadNS.Tables.TableColumn(1, "orderDate", "Order Date", "yyyy-mm-dd");
var tableColumn2 = new spreadNS.Tables.TableColumn(2, "item", "Item");
var tableColumn3 = new spreadNS.Tables.TableColumn(3, "units", "Units");
var tableColumn4 = new spreadNS.Tables.TableColumn(4, "cost", "Cost", null, null);
var tableColumn5 = new spreadNS.Tables.TableColumn(5, "isDelivered", "Delivered", null, new GC.Spread.Sheets.CellTypes.CheckBox());
table.autoGenerateColumns(false);
table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);

Then, all we need to do is bind the ValueChanged event to our instance, and configure a response for our table headers:

spread.bind(GC.Spread.Sheets.Events.ValueChanged, (event, args) => {
	console.log(event.type, args);
	let row = args.row, col = args.col, sheet = args.sheet;
	let table = sheet.tables.find(row, col);
	if (table) {
		let tableRange = table.range();
		if (tableRange.row === row) {
			console.log('table column header renamed');
 //Add additional functionality of your choice
		}
	}
});

We can now change the column headers of our table and trigger a response of our choice.