causeway-standard-theme
Version:
2,149 lines • 69.2 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<div class="container page">
<div class="content pane single-pane">
<section>
<a id="table"></a>
<header class="content-header">
<h1 class="title">
Tables
</h1>
</header>
<p>Tables should be wrapped in a
<code><div class="table-wrapper"> <!--table goes in here --> </div></code> with a class
<code>.table-wrapper</code></p>
<p>
<code><div class="table-wrapper"></div></code> should basically contain tree first level container divs.
</p>
<ul>
<li>
<code><div class="table-toolbar"></div></code> -- Its optional. Should be used to hold table related action buttons as in below example.
</li>
<li>
<code><div class="table-content"></div></code> -- This should hold the table.
<code><tfoot></tfoot></code> should not be the part of table.
</li>
<li>
<code><div class="table-footer"></div></code> -- This should hold table footer content which normally exists in
<code><tfoot></tfoot></code>
</li>
</ul>
<p>Tables must be created with the classes <code>"table"</code> and <code>"table-striped"</code> and contain
<code><thead></code>,
<code><tbody></code> tags only, preferably in that order and should be wrapped in
<code><div class="table-content"></div></code>.</p>
<p><code><tfoot></code> contents should go in
<code><div class="table-footer"></div></code> and be placed immediately after
<code><div class="table-content"></div></code>.</p>
<p>To control the width of individual column use <code><col></code> tag nested inside
<code><colgroup></colgroup></code>. Refer the code below.
<code><col></code> accepts <code>"width"</code> attribute and the value can specified in
<code>"%", "px" or "relative units"</code>
</p>
<p> For table group heading add <code><tr></tr></code> as first element of
<code><thead></code> and add class <code>"has-table-group"</code> to <code><thead></code></p>
<div class="table-wrapper edge-2-edge">
<div class="table-toolbar">
<button type="button" class="btn btn-filter">
Filter
</button>
<div class="toolbar-filter">
<form action="" class="form-inline">
<div class="form-row">
<div class="form-group">
<label for="listField0value" class="control-label has-tooltip" data-toggle="tooltip" data-title="Search for a specific document number" data-original-title="" title="">Document Number:</label>
<div class="control-input">
<input type="text" id="listField0value" class="form-control" name="listField[0].value" value="" maxlength="40" size="40">
</div>
</div>
<div class="form-group">
<label class="control-label has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title="">Archived:</label>
<div class="control-input">
<div class="form-group radio form-group-inline">
<input type="radio" id="listField1value_0" class="form-control" name="listField[1].value" value="" checked>
<label for="listField1value_0" class="has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title=""><span class="radio-icon"></span>All</label>
</div>
<div class="form-group radio form-group-inline">
<input type="radio" id="listField1value_1" class="form-control" name="listField[1].value" value="Y">
<label for="listField1value_1" class="has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title=""><span class="radio-icon"></span>Archived</label>
</div>
<div class="form-group radio form-group-inline">
<input type="radio" id="listField1value_2" class="form-control" name="listField[1].value" value="N">
<label for="listField1value_2" class="has-tooltip" data-toggle="tooltip" data-title="Select the batch archive status" data-original-title="" title=""><span class="radio-icon"></span>Not Archived</label>
</div>
</div>
</div>
<div class="form-group pull-right">
<button type="button" class="btn btn-default btn-with-icon has-tooltip" title="" data-original-title="Search this list by typing text to compare against in the fields below then click search">Search
<span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="table-content">
<table class="table table-striped">
<thead>
<tr>
<th>
Column 1, width = 20%
</th>
<th>
Column 2, width = 30%
</th>
<th>
Column 3, width = 50%
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col11_filter" name="col1_filter" placeholder="Enter Value">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col12_filter" name="col2_filter" placeholder="Enter Value">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col13_filter" placeholder="Enter Value" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
<tr>
<td>
Cell 77
</td>
<td>
Cell 88
</td>
<td>
Cell 99
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<!--Table Footer contents of <tfoot> should be place here-->
</div>
</div>
<pre><code>
<div class="table-wrapper">
<div class="table-toolbar">
<!-- Table action button or filters -->
<button type="button" class="btn btn-filter">
Filter
</button>
<div class="toolbar-filter">
<!--Toolbar related any content goes in here. This content toggles on above filter button-->
</div>
</div>
<div class="table-content">
<table class="table table-striped">
<colgroup>
<col width="20%">
<col width="30%">
<col width="50%">
</colgroup>
<thead class="has-table-group">
<tr>
<th colspan="2"></th>
<th>Title</th>
</tr>
<tr>
<th>
Column 1, width = 20%
</th>
<th>
Column 2, width = 30%
</th>
<th>
Column 3, width = 50%
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col1_filter" name="col1_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col2_filter" name="col2_filter" value=" ">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col3_filter" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<!--Table Footer contents of <tfoot> should be place here-->
</div>
</div>
</code></pre>
<p>Tables that can have their rows re-ordered by a user (as by using the
<a href="http://jqueryui.com/sortable/">jQuery UI sortable component</a>) must have an empty cell at the start of every row (<code><th></code> in the
<code><thead></code> section and <code><td></code> in the <code><tfoot></code> and
<code><tbody></code> sections).</p>
<div class="table-wrapper">
<div class="table-content">
<table class="table table-striped table-handles">
<thead>
<tr>
<th class="handle"></th>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="handle">
<a href="#" title="" class="table-notification"></a>
</td>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td class="handle">
<a href="#" title="" class="table-notification-alert"></a>
</td>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td class="handle"></td>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<div class="col-md-9"></div>
<div class="col-md-3"></div>
</div>
</div>
<pre>
<code>
<div class="table-wrapper">
<div class="table-content">
<table class="table table-striped table-handles">
<thead>
<tr>
<th class="handle"></th>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="handle"></td>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td class="handle"></td>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td class="handle"></td>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<div class="col-md-9"></div>
<div class="col-md-3"></div>
</div>
</div>
</code>
</pre>
<p>Tables that can have columns sorted by a user must use the appropriate sorting handles in each of the column headings that can be sorted (the
<code><th></code> elements in the <code><thead></code> element). Each
<code><th></code> element must have a class of
<code>"sorting"</code> and an optional class based on the sorting capability and currently active sort as detailed below.
</p>
<div class="table-wrapper">
<div class="table-content">
<table class="table table-striped">
<thead>
<tr>
<th>
Column
</th>
<th>
Class
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Can be sorted but is not the currently active sorted column.
</td>
<td>
No class required
</td>
</tr>
<tr>
<td>
Is currently sorted ascending.
</td>
<td>
sorting-asc
</td>
</tr>
<tr>
<td>
Is currently sorted descending.
</td>
<td>
sorting-desc
</td>
</tr>
<tr>
<td>
Can be sorted but sorting is currently disabled
</td>
<td>
sorting-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted ascending but is not the currently active sorted column.
</td>
<td>
sorting-desc-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted ascending and is the currently active sorted column.
</td>
<td>
sorting-desc-disabled-asc
</td>
</tr>
<tr>
<td>
Can only be sorted descending but is not the currently active sorted column.
</td>
<td>
sorting-asc-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted descending and is the currently active sorted column.
</td>
<td>
sorting-asc-disabled-desc
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<div class="pull-left pagination-page-view">
<div class="form-group">
<label for="pageNumber" class="control-label ">Go to page:</label>
<div class="control-input">
<input type="text" id="pageNumber" class="form-control" name="pageNumber" value="" size="1">
</div>
</div>
</div>
<div class="pull-left pagination-page-view">
<label class="control-label ">Viewing page 1 of 133:</label>
</div>
<ul class="pagination pull-right">
<li><span class="glyphicon glyphicon-pagination-first"></span></li>
<li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
<li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
</ul>
</div>
</div>
<br/>
<p>
Table with horizontal scrolling.
</p>
<div class="table-wrapper fixed-header1">
<div class="table-content">
<table id="my_table" class="table table-striped table-sort fixed-header">
<thead>
<tr>
<th>
<span>LongLongLongHeaderWord</span>
<a class="sorting" href="javascript:void(0)"></a>
</th>
<th>
<span>Very Very Long Header Text</span>
<a class="sorting sorting-desc" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 3</span>
<a class="sorting sorting-desc-disabled" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 4</span>
<a class="sorting sorting-asc" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 5</span>
<a class="sorting sorting-asc-disabled" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 6</span>
<a class="sorting sorting-disabled" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 7</span>
</th>
<th><span>Column 08</span></th>
<th><span>Column 09</span></th>
<th><span>Column 10</span></th>
<th><span>Column 11</span></th>
<th><span>Column 12</span></th>
<th><span>Column 13</span></th>
<th><span>Column 14</span></th>
<th><span>Column 15</span></th>
<th><span>Column 16</span></th>
<th><span>Column 17</span></th>
<th><span>Column 18</span></th>
<th><span>Column 19</span></th>
<th><span>Column 20</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
<td colspan="14">
Cell 7
</td>
</tr>
<tr>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
<td>
Cell 10
</td>
<td>
Cell 11
</td>
<td>
Cell 12
</td>
<td>
Cell 13
</td>
<td colspan="14">
Cell 14
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
<td>
Cell 20
</td>
<td colspan="14">
Cell 21
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
</div>
</div>
<br>
<br>
<div class="table-wrapper">
<div class="table-toolbar">
<button type="button" class="btn btn-filter">
Filter
</button>
</div>
<div class="table-content">
<table id="my_table2" class="table table-filter table-sort">
<thead>
<tr>
<th>
<span>LongLongLongHeaderWord</span>
<a class="sorting sorting-desc-disabled" href="javascript:void(0)"></a>
</th>
<th>
<span>Very Very Long Header Text</span>
<a class="sorting" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 3</span>
<a class="sorting sorting-desc-disabled" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 4</span>
<a class="sorting sorting-asc" href="javascript:void(0)"></a>
</th>
<th>
<span>Column 5</span>
<a class="sorting sorting-asc-disabled" href="javascript:void(0)"></a>
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col11" name="col1_filter" value="Hello">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col12" name="col2_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col13" name="col3_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col14" name="col4_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col15" name="col5_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
</tr>
<tr>
<td>
Cell 15
</td>
<td>
Cell 16
</td>
<td>
Cell 17
</td>
<td>
Cell 18
</td>
<td>
Cell 19
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer"></div>
</div>
<pre>
<code>
<div class="table-wrapper">
<div class="table-content">
<table class="table table-striped">
<thead>
<tr>
<th>
Column
</th>
<th>
Class
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Can be sorted but is not the currently active sorted column.
</td>
<td>
No class required
</td>
</tr>
<tr>
<td>
Is currently sorted ascending.
</td>
<td>
sorting-asc
</td>
</tr>
<tr>
<td>
Is currently sorted descending.
</td>
<td>
sorting-desc
</td>
</tr>
<tr>
<td>
Can be sorted but sorting is currently disabled
</td>
<td>
sorting-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted ascending but is not the currently active sorted column.
</td>
<td>
sorting-desc-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted ascending and is the currently active sorted column.
</td>
<td>
sorting-desc-disabled-asc
</td>
</tr>
<tr>
<td>
Can only be sorted descending but is not the currently active sorted column.
</td>
<td>
sorting-asc-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted descending and is the currently active sorted column.
</td>
<td>
sorting-asc-disabled-desc
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination pull-right">
<li><span class="glyphicon glyphicon-pagination-first"></span></li>
<li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
<li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
</ul>
</div>
</div>
</code>
</pre>
<ul>
<li>
Points:
<ul>
<li>Filter row</li>
</ul>
</li>
</ul>
<p>Tables that can have columns filtered by a user must add a second row to the
<code><thead></code> element with a class of <code>"filter"</code> that contains
<code><th></code> elements containing the appropriate
<code><a href="/docs/components/forms.html#forms">form elements</a></code> without their accompanying labels.
</p>
<form role="form">
<div class="table-wrapper">
<div class="table-toolbar">
<button type="button" class="btn btn-filter">
Filter
</button>
</div>
<div class="form-row table-content">
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" class="form-control filter" value="true">
<label><span class="checkbox-icon"></span></label>
</div>
</div>
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col1_filter" name="col1_filter" value="Hello World">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col2_filter" name="col2_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col3_filter" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col4_filter" name="col1_filter">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col5_filter" name="col1_filter">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col6_filter" name="col1_filter">
</div>
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
</div>
</div>
</form>
<pre>
<code>
<div class="table-wrapper">
<div class="table-toolbar">
<button type="button" class="btn btn-filter">
Filter
</button>
</div>
<div class="form-row table-content">
<table class="table table-striped">
<thead>
<tr class="filter">
<th>
<div class="form-group checkbox no-label">
<input type="checkbox" class="form-control filter" value="true">
<label><span class="checkbox-icon"></span></label>
</div>
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col1_filter" name="col1_filter" value="Hello World">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col2_filter" name="col2_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col3_filter" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col4_filter" name="col1_filter">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col5_filter" name="col1_filter">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col6_filter" name="col1_filter">
</div>
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
</div>
</div>
</code>
</pre>
<header>
<h1 class="title">
Table with Filter Columns
</h1>
</header>
<div class="table-wrapper fixed-header2">
<div class="table-toolbar">
<button type="button" class="btn btn-filter">
Filter
</button>
</div>
<div class="table-content">
<table class="table table-striped table-filter fixed-header">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>Email</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col1" name="col1_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col2" name="col2_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col3" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Vijay Sharma</td>
<td>vijay</td>
<td><a href="">vijay@example.com</a></td>
</tr>
<tr>
<td>Saaib Zafar</td>
<td>saaib</td>
<td><a href="" class="disabled">saaib@example.com</a></td>
</tr>
<tr>
<td>Dixon Thomas</td>
<td>dixon</td>
<td>dixon@example.com</td>
</tr>
<tr>
<td>Vijay Sharma</td>
<td>vijay</td>
<td>vijay@example.com</td>
</tr>
<tr>
<td>Saaib Zafar</td>
<td>saaib</td>
<td>saaib@example.com</td>
</tr>
<tr>
<td>Dixon Thomas</td>
<td>dixon</td>
<td>dixon@example.com</td>
</tr>
<tr>
<td>Vijay Sharma</td>
<td>vijay</td>
<td>vijay@example.com</td>
</tr>
<tr>
<td>Saaib Zafar</td>
<td>saaib</td>
<td>saaib@example.com</td>
</tr>
<tr>
<td>Dixon Thomas</td>
<td>dixon</td>
<td>dixon@example.com</td>
</tr>
<tr>
<td>Vijay Sharma</td>
<td>vijay</td>
<td>vijay@example.com</td>
</tr>
<tr>
<td>Saaib Zafar</td>
<td>saaib</td>
<td>saaib@example.com</td>
</tr>
<tr>
<td>Dixon Thomas</td>
<td>dixon</td>
<td>dixon@example.com</td>
</tr>
<tr>
<td>Vijay Sharma</td>
<td>saaib</td>
<td>dixon@example.com</td>
</tr>
<tr>
<td>Dixon</td>
<td>saaib</td>
<td>vijay@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
<div class="container site-footer">
<div class="status-holder">
<div class="status-message"></div>
</div>
<!--<a href="#" class="site-footer-toggle">-->
<!--<span class="fa fa-chevron-down"></span>-->
<!--</a>-->
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/causeway-utils.min.js"></script>
<script src="/js/causeway.js"></script>
<script src="/js/responsive.js"></script>
<script src="/docs/js/docs.js"></script>
<script>
(function(window, $){
var statusHolder = $('.status-message'),
date = new Date();
var message = "Copyright © 1998-" + date.getFullYear() + " Causeway Software Solutions Limited.";
statusHolder.html(message);
}(window, jQuery));
</script>
</body>
</html>