Vergelijkingstabel

JS
KopiërenonInteractive(() => {
	const HIDDEN_ATTRIBUTE_NAME = 'data-hide-cell'
	const DEFAULT_STYLE = 'tertiary'
	const IMPORTANT_STYLE = 'primary'

	const setupTable = (
		tableWrapperElement,
	) => {
		if (!tableWrapperElement.classList.contains('.table-responsive')) {
			let tempElement = tableWrapperElement.closest('.table-responsive')
			if (tempElement) {
				tableWrapperElement = tempElement
			} else {
				tempElement = tableWrapperElement.querySelector('.table-responsive')
				if (tempElement) {
					tableWrapperElement = tempElement
				}
			}
		}

		const table = tableWrapperElement.querySelector('table')

		const columnLabelsElement = document.createElement('div')
		columnLabelsElement.setAttribute('class', 'column-labels')
		tableWrapperElement.insertAdjacentElement('afterbegin', columnLabelsElement)

		let headings = Array.from(
			table.querySelectorAll('thead>tr>th'),
		)
		if (headings.length === 0) {
			headings = Array.from(
				table.querySelectorAll(
					'tbody>tr:first-child>td',
				)
			)
		}

		const setupHeading = (
			heading,
			headingIndex,
		) => {
			const headingText = heading.textContent.trim()
			if (headingText.length === 0) {
				return
			}

			const headingButton = document.createElement('button')
			headingButton.setAttribute('type', 'button')
			headingButton.setAttribute('class', 'column-label btn btn-' + DEFAULT_STYLE)
			headingButton.textContent = headingText
			columnLabelsElement.appendChild(headingButton)

			headingButton.addEventListener('click', () => {
				let allCells = Array.from(
					table.querySelectorAll('tbody>tr>td:not(:first-child)')
				)
				for (let i = 0; i < allCells.length; i++) {
					allCells[i].setAttribute(HIDDEN_ATTRIBUTE_NAME, true)
				}

				let visibleCells = Array.from(
					table.querySelectorAll('thead>tr>*:nth-child(' + (headingIndex + 1) + '),tbody>tr>td:nth-child(' + (headingIndex + 1) + ')')
				)
				for (let i = 0; i < visibleCells.length; i++) {
					visibleCells[i].removeAttribute(HIDDEN_ATTRIBUTE_NAME)
				}
			})
		}

		for (let i = 0; i < headings.length; i++) {
			setupHeading(headings[i], i)
		}

		const lastButton = columnLabelsElement.querySelector('.column-label:last-child')
		if (lastButton) {
			lastButton.classList.remove('btn-' + DEFAULT_STYLE)
			lastButton.classList.add('btn-' + IMPORTANT_STYLE)
			lastButton.click()
		}
	}

	const tableElements = Array.from(
		document.querySelectorAll('.comparison-table'),
	)
	for (let i = 0; i < tableElements.length; i++) {
		setupTable(tableElements[i])
	}
})