<div class="table-container " tabindex="0" role="group" aria-labelledby="caption-id">
    <table>
        <thead>
            <tr>
                <th scope="col">Heading</th>
                <th scope="col">Column Heading&nbsp;1</th>
                <th scope="col">Column Heading&nbsp;2</th>
                <th scope="col">Column Heading&nbsp;3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th scope="row">Footer&nbsp;Heading</th>
                <td>Column Footer&nbsp;1</td>
                <td>Column Footer&nbsp;2</td>
                <td>Column Footer&nbsp;3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Row&nbsp;Heading&nbsp;1</th>
                <td>Cell&nbsp;1.1</td>
                <td>Cell&nbsp;1.2</td>
                <td>Cell&nbsp;1.3</td>
            </tr>
            <tr>
                <th scope="row">Row&nbsp;Heading&nbsp;2</th>
                <td>Cell&nbsp;2.1</td>
                <td>Cell&nbsp;2.2</td>
                <td>Cell&nbsp;2.3</td>
            </tr>
            <tr>
                <th scope="row">Row&nbsp;Heading&nbsp;3</th>
                <td>Cell&nbsp;3.1</td>
                <td>Cell&nbsp;3.2</td>
                <td>Cell&nbsp;3.3</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="table-container {{classes}}" tabindex="0" role="group"{{#if caption}} aria-labelledby="{{caption.id}}"{{/if}}>
	<table>
		{{#if head}}<thead>
			<tr>
				{{#each head.cells}}<th scope="col">{{{data}}}</th>{{/each}}
			</tr>
		</thead>{{/if}}
		{{#if foot}}<tfoot>
			<tr>
				{{#if foot.header}}<th scope="row">{{{foot.header}}}</th>{{/if}}
				{{#each foot.cells}}<td>{{{data}}}</td>{{/each}}
			</tr>
		</tfoot>{{/if}}
		<tbody>
			{{#each rows}}<tr>
				{{#if header}}<th scope="row">{{{header}}}</th>{{/if}}
				{{#each cells}}<td>{{{data}}}</td>{{/each}}
			</tr>{{/each}}
		</tbody>
	</table>
</div>
  • Content:
    /*
     * Module: BYU Table
     * Desc:   Handle tables that are wider than thier container
     */
    
    var byu_table = (function(){
    
    	'use strict';
    
    	var doc = document;
    
    
    	// Execute the function
    	byu_main.executeOnLoad( updateTables );
    	
    
    	/*
    	 * Func: UpdateTables
    	 * Desc: Detect and handle tables that are wider than their container.
    	 * 		 Works on tables contained within an element of class "table-container".
    	 * Args: none
    	 */
    	function updateTables() {
    		var containers = doc.getElementsByClassName("table-container");
    
    		for (var i=0; i < containers.length; i++) {
    		    var container = containers[i];
    		    updateTable( container );
    		}
    	}
    
    
    	/*
    	 * Func: UpdateTable
    	 * Desc: Check if a table is wider than its container, and mark scrolling position within it
    	 * Args: @container - HTML Element - A container element for a table (probably of class "table-container")
    	 */
    	function updateTable( container ) {
    		var c_width = container.offsetWidth;
    	    var table = container. getElementsByTagName("table")[0];
    	    var t_width = table.offsetWidth;
    	    var table_wide_class = "table-wide";
    	    var start_visible_class = "start-visible";
    		var end_visible_class = "end-visible";
    
    	    if ( c_width < t_width ) {
    
    	    	// Add table wide class if it's not already there
    	    	if ( !container.hasClass( table_wide_class ) ) { 
    				container.addClass( table_wide_class );
    		    }
    
    	    	// Check if the start of the table is visible and handle
    	    	if ( table.scrollLeft == 0 ) {
    	    		if ( !container.hasClass( start_visible_class ) ) {
    					container.addClass( start_visible_class );
    	    		}
    	    	} else {
    	    		container.removeClass( start_visible_class );
    	    	}
    
    	    	// Check if the end of the table is visible and handle
    	    	if ( t_width - table.scrollLeft == c_width ) {
    	    		if ( !container.hasClass( end_visible_class ) ) {
    					container.addClass( end_visible_class );
    	    		}
    	    	} else {
    	    		container.removeClass( end_visible_class );
    	    	}
    	    } 
    
    	    // The table is not too wide for its container
    	    else {
    	    	container.removeClass( table_wide_class );
    	    }
    	}
    
    })();
  • URL: /components/raw/table/table.js
  • Filesystem Path: src/components/0-foundation/table/table.js
  • Size: 2.1 KB
  • Content:
    .table-container
    	overflow-x: auto
    
    table
    	border-collapse: collapse
    
    	caption
    		@extend .caption
    
    	.spacing-tight &, .spacing-extratight &
    		font-size: $fontSize16
    
    th
    	font-weight: $font-weight-bold
    
    td, th
    	padding: $spacing3 $spacing4
    	border: 1px solid $colorLine
    	// border: none
    	text-align: left
    	vertical-align: top
    	line-height: 1.4
    
    	.border-row &
    		border-right: none
    		border-left: none
    
    	.border-open &
    		border: none
    
    	.spacing-tight &
    		padding: $spacing2 $spacing3
    
    	.spacing-extratight &
    		padding: $spacing1 $spacing2
    
    
    tr 
    	*:first-child
    		border-left: none
    		padding-left: $spacing1
    	*:last-child
    		border-right: none
    		padding-right: $spacing2
    
    	&:first-child
    		td, th
    			border-top: none
    
    	&:last-child
    		td, th
    			border-bottom: none
    
    thead
    	border-bottom: 2px solid $colorLine
    	.border-open &
    		border-bottom: none
    
    tfoot
    	border-top: 2px solid $colorLine
    	.border-open &
    		border-top: none
    	
    .table-wide 
    	background:	linear-gradient(90deg, white 0%, rgba(255,255,255,0)),linear-gradient(-90deg, white 0%, rgba(255,255,255,0)) 100% 0, linear-gradient(to right, #cccccc 0%, rgba(255,255,255,0)), linear-gradient(-90deg,  #cccccc 0%, rgba(255,255,255,0)) 100% 0%
    	background-repeat: no-repeat
    	background-color: #fff
    	background-size: 100px 100%, 100px 100%, 14px 100%, 14px 100%
    	background-attachment: local, local, scroll, scroll
  • URL: /components/raw/table/table.sass
  • Filesystem Path: src/components/0-foundation/table/table.sass
  • Size: 1.4 KB
{
  "heading": {
    "data": "Table Heading",
    "level": "h3"
  },
  "caption": {
    "data": "Caption text",
    "id": "caption-id"
  },
  "head": {
    "cells": [
      {
        "data": "Heading"
      },
      {
        "data": "Column Heading&nbsp;1"
      },
      {
        "data": "Column Heading&nbsp;2"
      },
      {
        "data": "Column Heading&nbsp;3"
      }
    ]
  },
  "foot": {
    "header": "Footer&nbsp;Heading",
    "cells": [
      {
        "data": "Column Footer&nbsp;1"
      },
      {
        "data": "Column Footer&nbsp;2"
      },
      {
        "data": "Column Footer&nbsp;3"
      }
    ]
  },
  "rows": [
    {
      "header": "Row&nbsp;Heading&nbsp;1",
      "cells": [
        {
          "data": "Cell&nbsp;1.1"
        },
        {
          "data": "Cell&nbsp;1.2"
        },
        {
          "data": "Cell&nbsp;1.3"
        }
      ]
    },
    {
      "header": "Row&nbsp;Heading&nbsp;2",
      "cells": [
        {
          "data": "Cell&nbsp;2.1"
        },
        {
          "data": "Cell&nbsp;2.2"
        },
        {
          "data": "Cell&nbsp;2.3"
        }
      ]
    },
    {
      "header": "Row&nbsp;Heading&nbsp;3",
      "cells": [
        {
          "data": "Cell&nbsp;3.1"
        },
        {
          "data": "Cell&nbsp;3.2"
        },
        {
          "data": "Cell&nbsp;3.3"
        }
      ]
    }
  ]
}