Nested headers rowspan

[marciz]

Is there an option to use rowspan in nestedHeaders ('Location' in example below)?

[pphod]

Sorry, this is not possible in the current version. I will leave this as a suggestion for future releases.

[danaildinev]

Recently found this plugin and started using it. Although colspan is working great for grouping headers, rowspan would be a great addition and needed for the project I am working on.

+1 for this feature from me.

[fire1]

@pphod Is there any possibility that this functionality to appear in the near future?

[galinakoleva-mms]

Hi there, I'm also experimenting with your plugin and so far am very impressed. Unfortunately I am at the point where having rowspan will be very handful for my project. Is there any chance to be added rowspan to the functionality of future versions?

[shinnagamine]

Since I needed this functionality for my project, I created the method that achieves my needs. Hope this will help the person who is in trouble with this issue.

/**
 * [JavaScript version]
 * Merging rows of nested headers.
 * @param {string} selector: The selector of the Jspreadsheet element.
 * @param {integer} colIndex: The index of the target column.
 *        If not specified or not integer, the row number column (left-most column) will be merged.
 */
function mergeHeaderRows_JavaScript(selector, colIndex) {
	const thead = document.querySelector(`${selector} thead`);

	if (Number.isInteger(colIndex)) {
		const topTd = thead.querySelector(`td[data-column="${colIndex}"]`);
		const secondTd = thead.querySelector(`td[data-x="${colIndex}"]`);

		topTd.setAttribute('data-x', colIndex);
		topTd.setAttribute('rowspan', 2);
		topTd.setAttribute('title', secondTd.innerText);
		topTd.innerHTML = secondTd.innerText;
		secondTd.remove();
	} else {
		const topTd = thead.querySelector(`tr:first-child td:first-child`);
		const secondTd = thead.querySelector('tr:nth-child(2) td.jexcel_selectall');

		topTd.classList.add('jexcel_selectall');
		topTd.setAttribute('rowspan', 2);
		secondTd.remove();
	}
}

/**
 * [jQuery version]
 * Merging rows of nested headers.
 * @param {string} selector: The selector of the Jspreadsheet element.
 * @param {integer} colIndex: The index of the target column.
 *        If not specified or not integer, the row number column (left-most column) will be merged.
 */
function mergeHeaderRows_jQuery(selector, colIndex) {
	const $thead = $(selector).find('thead');

	if (Number.isInteger(colIndex)) {
		const $topTd = $thead.find(`td[data-column="${colIndex}"]`);
		const $secondTd = $thead.find(`td[data-x="${colIndex}"]`);

		$topTd.attr({
			'data-x': colIndex,
			'rowspan': 2,
			'title': $secondTd.text()
		}).html($secondTd.text());
		$secondTd.remove();
	} else {
		$thead.find('tr:first-child td:first-child').attr('rowspan', 2).addClass('jexcel_selectall');
		$thead.find('tr:nth-child(2) td.jexcel_selectall').remove();
	}
}

[danaildinev]

@ShinNagamine Thank you very much, your solution worked flawlessly! 🙂

[shinnagamine]

@danaildinev Thank you for verifying the behavior of the code. I'm so glad to hear it works as expected :)