table.cfm

<cfscript>
request.container = 'container-fluid'
request.icons = ''
include '/Inc/header4.cfm';
</cfscript>

<cfoutput>
<div hidden id="columnOrder" class="row d-print-none">
	<div class="column col-md-1 order-1">
		<div class="card">
			<div class="card-header">
				<input name="order-1" placeholder="1">
			</div>
		</div>
	</div>
	<div class="column col-md-3 order-2">
		<div class="card">
			<div class="card-header">
				<input name="order-2" placeholder="2">
			</div>
		</div>
	</div>
	<div class="column col-md-8 order-3">
		<div class="card">
			<div class="card-header">
				<input name="order-3" placeholder="3">
			</div>
		</div>
	</div>
</div>


<div class="row">
	<div class="column col-md-1 order-1 d-print-none">
		<div class="card">
			<div class="card-header text-center px-1">
				<div class="caret-left-right"></div>
				<div class="caret-right-left"></div>
			</div>
		</div>
	</div>
	<div class="column col-md-3 order-2 d-print-none">
		<div class="card">
			<div class="card-header text-center px-1">
				<div class="caret-left-right"></div>
					<span>Header A</span>
				<div class="caret-right-left"></div>
			</div>
		</div>
	</div>
	<div class="column col-md-8 order-3">
		<div class="card">
			<div class="card-header text-center px-2">
				<div class="caret-left-right"></div>
				<span>Header B</span>
				<div class="caret-right-left"></div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="column col-md-1 order-1 d-print-none">
		<div class="card">
			<div class="card-body px-0">
				<aside>
					<nav>
						<label class="nav-link p-0 small">
							<input type="checkbox" checked>
							Navigation
						</label>
						<label class="nav-link p-0 small">
							<input type="checkbox" checked>
							Header A
						</label>
						<label class="nav-link p-0 small">
							<input type="checkbox" checked>
							Header B
						</label>
					</nav>
				</aside>
			</div>
		</div>
	</div>
	<div class="column col-md-3 order-2 d-print-none">
		<div class="card">
			<div class="card-body">
				<div hidden>
					<div class="input-group">
						<input name="search">
						<div class="input-group-append">
							<span class="input-group-text">
								<svg class="bi" width="1rem" height="1rem">
									<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg##search"/>
								</svg>
							</span>
						</div>
					</div>
				</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
	</div>

	<div class="column col-md-8 order-3">
		<div class="card">
			<div class="card-body">
				<div hidden class="row justify-content-end">
					<div class="col-lg-4 col-md-8 col-sm-12 input-group">
						<input name="search">
						<div class="input-group-append">
							<span class="input-group-text">
								<svg class="bi" width="1rem" height="1rem">
									<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg##search"/>
								</svg>
							</span>
						</div>
					</div>
				</div>
				
				<table>
					<thead>
						<tr class="py-0 justify-content-center align-items-center" valign="middle">
							<th class="text-right align-self-center">Row</th>
							<th>Name
							<div class="float-right caret-up-down"></div>
							</th>
							<th class="text-right">Column B
							<div class="float-right caret-up-down"></div>
							</th>
							<th class="text-right">Column C
							<div class="float-right caret-up-down"></div>
							</th>
						</tr>
					</thead>
					<tbody>
						<cfloop from="1" to="50" index="i">
							<tr>
								<td class="text-right">#i#</td>
								<td>
#chr(RandRange(65,90))##chr(RandRange(65,90))##chr(RandRange(65,90))#
								</td>
								<td class="text-right">#NumberFormat(RandRange(1,10000000))#
								</td>
								<td class="text-right">#NumberFormat(RandRange(1,10000000))#
								</td>
							</tr>
						</cfloop>
					</tbody>
				</table>

			</div>
		</div>
	</div>
</div>
<a id="menuOrder" href="JavaScript:;" class="dropdown-item">Col Order</a>
<a id="showLeftRight" href="JavaScript:;" class="dropdown-item">
	<svg class="bi" width="1rem" height="1rem">
		<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg##caret-left-fill"/>'
	</svg>
	<svg class="bi" width="1rem" height="1rem">'
		<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg##caret-right-fill"/>'
	</svg>
</a>
<a id="showUpDown" href="JavaScript:;" class="dropdown-item">
<svg class="bi" width="1rem" height="1rem">
	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg##caret-up-fill"/>
</svg>
<svg class="bi" width="1rem" height="1rem">
	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg##caret-down-fill"/>
</svg>
</a>
<a id="showSearch" href="JavaScript:;" class="dropdown-item">Search</a>
<script src="sort.js"></script>
<script src="search.js"></script>
<cfinclude template="/Inc/footer4.cfm">
</cfoutput>

table.css

.caret-right {
	margin-left:-5px
}
.caret-up-down, .caret-left-right, .caret-right-left {
	display:none;
	cursor:pointer
}
.caret-up-down .caret-up {
	display:block
}
.height1 {
	line-height:1rem;
}
caption {
	caption-side:inherit;
	padding-top:0;
}
.card-header {
	height:3rem;
}
td.text-right.caret {
	padding-right:2rem;
}

table.js

function Int(response) {
	return parseInt(response,10)
}

$('.caret-up-down').html
	('<svg class="bi caret-up" width="1rem" height="1rem">'
	+'	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg#caret-up-fill"/>'
	+'</svg>'
	+'<svg class="bi caret-down" width="1rem" height="1rem">'
	+'	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg#caret-down-fill"/>'
	+'</svg>'
	).addClass('height1 d-print-none')

$('.caret-left-right').html
	('<svg class="bi caret-left" width="1rem" height="1rem">'
	+'	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg#caret-left-fill"/>'
	+'</svg>'
	+'<svg class="bi caret-right" width="1rem" height="1rem">'
	+'	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg#caret-right-fill"/>'
	+'</svg>'
	).addClass('float-left d-print-none')

$('.caret-right-left').html
	('<svg class="bi caret-left" width="1rem" height="1rem">'
	+'	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg#caret-left-fill"/>'
	+'</svg>'
	+'<svg class="bi caret-right" width="1rem" height="1rem">'
	+'	<use xlink:href="/Bootstrap/icons-1.0.0-alpha5/bootstrap-icons.svg#caret-right-fill"/>'
	+'</svg>'
	).addClass('float-right d-print-none')

pgm.caretLeft = function() {
	var card = $(this).closest('.card')
	var column = card.closest('.column')
	if ($(this).parent().hasClass('float-left')) { // left arrow on the left side means: expand this column, contract the previous column
		if (column.hasClass('order-1')) {
			var maxOrder = 0
			for (var i=1; i<=12; i++) {
				if ($('.order-' + i).length) {
					maxOrder = i
				}
				$('.order-' + i).removeClass('order-' + i)
					.addClass('order-' + (i-1))
			}
			$('.order-0').removeClass('order-0')
				.addClass('order-' + maxOrder)
		} else {
			var expand = pgm.expand.bind(column,'prev')
			$('.column').each(expand)
		}
	} else { // left Arrow on the right side means: contract this column, expand the next column
		var contract = pgm.contract.bind(column,'next')
		$('.column').each(contract)
	}
}

pgm.expand = function(other,i,response) { 
	// 'this' is: the column to be expanded upon
	// other is: 'next' or 'prev'
	// i is not used
	// response is the element
	var col =  $(response).index()
	if (col === $(this).index()) {
		if (other === 'next') {
			var next = $(response).next()
			if (next.length) {
				pgm.changeClass(next,-1)
			}
		} else {
			var prev = $(response).prev()
			if (prev.length) {
				pgm.changeClass(prev,-1)
			}
		}
		pgm.changeClass($(response),+1)
	}
}

pgm.contract = function(other,i,response) {
	var col =  $(response).index()
	if (col === $(this).index()) {
		pgm.changeClass($(response),-1)
		if (other === 'next') {
			var next = $(response).next()
			if (next.length) {
				pgm.changeClass(next,1)
			}
		} else {
			var prev = $(response).prev()
			if (prev.length) {
				pgm.changeClass(prev,1)
			}
		}
	}
}

pgm.setColumnModifier = function() {
	var self = $(this)
	$(this).data('colmod',pgm.colmod(self))
}
pgm.colmod = function(column) {
	// class="column col-3", "column col-sm-3"...
	var result // 3
	column.attr('class').split(' ').forEach(each)
	function each(myClass) {
		if (myClass.substr(0,4) === 'col-') {
			result = Int(myClass.substr(myClass.lastIndexOf('-')+1))
		}
	}
	return result
}
$('.column').each(pgm.setColumnModifier)


pgm.display = function() {
	var variables = {}
	var self = $(this)
	variables.index = self.closest('label').index() // This is the index of the checkbox. It requires the label tags to be inside another element.

	var column = $('.column:eq(' + variables.index + ')').first() // This is the element that defines which column is to be expanded.
	// We need to get the width of this column. Example: col-3, col-sm-3, col-md-3...
	if (self.is(':checked')) {
		if (!column.data('colmod')) { // He became hidden because he was squished to zero.
			// Time to click on the right arrow that is float-right
			var expand = pgm.expand.bind(column,'next')
			$('.column').each(expand)
		}
		$('.row').each(showColumn)
	} else {
		$('.row').each(hideColumn) // This column
	}
	function showColumn() {
		// todo: change the col class back to its original.
		$(this).find('.column:eq(' + variables.index + ')').attr('hidden',false)
	}
	function hideColumn() {
		$(this).find('.column:eq(' + variables.index + ')').attr('hidden',true)
		// todo: expand the column that is next to this one.
		// which will mean to contract this column to zero.
		// so i'll have to save its previous col- value.
	}
}

pgm.changeClass = function(column,amount) {
	var arr = column.attr('class').split(' ')
		.forEach(each)
	function each(classname) {
		if (classname.substr(0,4) === 'col-') {
			var i = classname.lastIndexOf('-')
			var classNumber = Int(classname.substr(i+1))
			var colmod = classNumber + amount
			column.data('colmod',colmod) // column modifier
			var newClassName = classname.substr(0,i+1) + colmod
			column.removeClass(classname)
				.addClass(newClassName)
			if (!colmod) { // col-0, col-sm-0, col-md-0...
				column.attr('hidden',true)
				var aside = $('aside')
				var chk = aside.find(':checkbox')
				chk = chk.eq(column.index())
				chk.attr('checked',false)
			} else if (colmod === 1) {
				column.find('span').attr('hidden',true)
			} else {
				column.find('span').attr('hidden',false)
			}
		}
	}
}

pgm.caretRight = function() {
	var variables = {}
	var card = $(this).closest('.card')
	var column = card.closest('.column')
	if ($(this).parent().hasClass('float-right')) { // right arrow on the right side means: expand this column, contract the next column

		var maxOrder = 0
		for (var i=12; i>0; i--) {
			if ($('.order-' + i).length) {
				maxOrder = i
				break
			}
		}
		var expand = pgm.expand.bind(column,'next')

		if (column.hasClass('order-' + maxOrder)) { // todo: should be if we're the last column showing.
			variables.columns = 0
			column.siblings().each(each)
			column.attr('class').split(' ').forEach(sumColumns)
			if (variables.columns < 12) {
				$('.column').each(expand)
			} else {
				for (var i=12; i>0; i--) {
					$('.order-' + i).removeClass('order-' + i)
						.addClass('order-' + (i+1))
				}
				$('.order-' + (maxOrder+1)).removeClass('order-' + (maxOrder+1))
					.addClass('order-1')
			}
		} else {
			$('.column').each(expand)
		}
	} else { // right arrow on the left side means: contract this column, expand prev column.
		var contract = pgm.contract.bind(column,'prev')
		$('.column').each(contract)
	}
	function each() {
		var arr = $(this).attr('class').split(' ')
			.forEach(sumColumns)
	}
	function sumColumns(classname) {
		if (classname.substr(0,4) === 'col-') {
			variables.columns += pgm.getcol(classname)
		}
	}
}
pgm.getcol = function(classname) {
	var i = classname.lastIndexOf('-')
	return Int(classname.substr(i+1))
}

pgm.menuOrder = function() {
	var columnOrder = $('#columnOrder')
	if (columnOrder.attr('hidden')) {
		columnOrder.attr('hidden',false)
			.find('input:first')
			.focus()
	} else {
		columnOrder.attr('hidden',true)
	}
}
pgm.showLeftRight = function() {
	var visible = $('.caret-left-right').is(':visible')
	if (visible) {
		$('.caret-left-right, .caret-right-left').hide('slow')
	} else {
		$('.caret-left-right, .caret-right-left').show('slow')
	}
}
pgm.showUpDown = function() {
	var visible = $('.caret-up-down').is(':visible')
	if (visible) {
		$('.caret-up-down').hide()
		$('td.caret').removeClass('caret')
	} else {
		$('.caret-up-down').show('slow','swing',callback)
	}
	function callback() {
		$('th.text-right').each(pgm.setSpacer)
	}
}
pgm.setSpacer = function() {
	if ($(this).find('.caret-up-down').length) {
		var variables = {}
		variables.index = $(this).index()
		$(this).closest('table').find('tbody td').each(each)
	}
	function each() {
		if ($(this).index() === variables.index) {
			$(this).addClass('caret')
		}
	}
}
pgm.setPrimary = function() {
	$(this).addClass('text-primary')
}
pgm.delPrimary = function() {
	$(this).removeClass('text-primary')
}
pgm.showSearch = function() {
	$('input[name=search]').closest('[hidden]').attr('hidden',false)
}
$(document).on('click','.caret-left',pgm.caretLeft)
$(document).on('click','.caret-right',pgm.caretRight)
$(document).on('change','aside :checkbox',pgm.display)
$(document).on('click','#menuOrder',pgm.menuOrder)
$(document).on('click','#showLeftRight',pgm.showLeftRight)
$(document).on('click','#showUpDown',pgm.showUpDown)
$(document).on('mouseenter','.caret-left, .caret-right, .caret-up, .caret-down',pgm.setPrimary)
$(document).on('mouseleave','.caret-left, .caret-right, .caret-up, .caret-down',pgm.delPrimary)
$(document).on('click','#showSearch',pgm.showSearch)