Adds the nice tabulator library!

css/tabulator/bootstrap/tabulator_bootstrap.css

@@ -0,0 +1,574 @@
+/* Tabulator v3.3.1 (c) Oliver Folkerd */
+.tabulator {
+  position: relative;
+  background-color: #fff;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: left;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+  -ms-transform: translatez(0);
+  transform: translatez(0);
+}
+
+.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
+  min-width: 100%;
+}
+
+.tabulator.tabulator-block-select {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.tabulator .tabulator-header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 2px solid #ddd;
+  background-color: #fff;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  background-color: #fff;
+  text-align: left;
+  vertical-align: bottom;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-moving {
+  position: absolute;
+  border: 1px solid #ddd;
+  background: #e6e6e6;
+  pointer-events: none;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  position: relative;
+  padding: 8px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #999;
+  padding: 1px;
+  background: #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+  display: inline-block;
+  position: absolute;
+  top: 14px;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  border-top: 1px solid #ddd;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
+  margin-right: -1px;
+}
+
+.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
+  position: absolute;
+  background-color: #e6e6e6 !important;
+  border: 1px solid #ddd;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 2px;
+  width: 100%;
+  text-align: center;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
+  height: auto !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
+  margin-top: 3px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+  padding-right: 25px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #666;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
+  border-top: 6px solid #666;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-header .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #ddd;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #ddd;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: 100%;
+  background: white !important;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
+  background: white !important;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-tableHolder {
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tabulator .tabulator-tableHolder:focus {
+  outline: none;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder span {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+  color: #000;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+  position: relative;
+  display: inline-block;
+  background-color: #fff;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
+  font-weight: bold;
+  background: #ececec !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
+  border-bottom: 2px solid #ddd;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
+  border-top: 2px solid #ddd;
+}
+
+.tabulator .tabulator-row {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 30px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+  background-color: #f5f5f5 !important;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-selected {
+  background-color: #9ABCEA;
+}
+
+.tabulator .tabulator-row.tabulator-selected:hover {
+  background-color: #769BCC;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-moving {
+  position: absolute;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  pointer-events: none !important;
+  z-index: 15;
+}
+
+.tabulator .tabulator-row .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  background-color: inherit;
+  z-index: 10;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #ddd;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #ddd;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 8px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabulator .tabulator-row .tabulator-cell:last-of-type {
+  border-right: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
+  border: 1px solid #1D68CD;
+  padding: 0;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
+  border: 1px;
+  background: transparent;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
+  border: 1px solid #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
+  border: 1px;
+  background: transparent;
+  color: #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
+  width: 80%;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
+  width: 100%;
+  height: 3px;
+  margin: 2px 10% 0 10%;
+  background: #666;
+}
+
+.tabulator .tabulator-row.tabulator-group {
+  box-sizing: border-box;
+  border-bottom: 1px solid #999;
+  border-right: 1px solid #ddd;
+  border-top: 1px solid #999;
+  padding: 5px;
+  padding-left: 10px;
+  background: #fafafa;
+  font-weight: bold;
+  min-width: 100%;
+}
+
+.tabulator .tabulator-row.tabulator-group:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
+  margin-right: 10px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #666;
+  border-bottom: 0;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
+  margin-left: 20px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
+  margin-left: 40px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
+  margin-left: 60px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
+  margin-left: 80px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
+  margin-left: 1000px;
+}
+
+.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-right: 16px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 0;
+  border-left: 6px solid #666;
+  vertical-align: middle;
+}
+
+.tabulator .tabulator-row.tabulator-group span {
+  margin-left: 10px;
+  color: #666;
+}
+
+.tabulator .tabulator-col-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+}
+
+.tabulator .tabulator-col-resize-handle.prev {
+  left: 0;
+  right: auto;
+}
+
+.tabulator .tabulator-col-resize-handle:hover {
+  cursor: ew-resize;
+}
+
+.tabulator .tabulator-footer {
+  padding: 5px 10px;
+  border-top: 2px solid #ddd;
+  text-align: right;
+  font-weight: bold;
+  white-space: nowrap;
+  -ms-user-select: none;
+      user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: calc("100% + 20px");
+  margin: -5px -10px 5px -10px;
+  text-align: left;
+  background: white !important;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
+  background: white !important;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
+  margin-bottom: -5px;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-footer .tabulator-pages {
+  margin: 0 7px;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  display: inline-block;
+  margin: 0 2px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.2);
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  color: #d00;
+}
+
+.tabulator .tabulator-footer .tabulator-page:disabled {
+  opacity: .5;
+}
+
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.tabulator .tablulator-loader {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #fff;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
+  border: 4px solid #333;
+  color: #000;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
+  border: 4px solid #D00;
+  color: #590000;
+}
+
+.tabulator.table-striped .tabulator-row:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.tabulator.table-bordered {
+  border: 1px solid #ddd;
+}
+
+.tabulator.table-bordered .tabulator-header .tabulator-col {
+  border-right: 1px solid #ddd;
+}
+
+.tabulator.table-bordered .tabulator-tableHolder .tabulator-table .tabulator-row .tabulator-cell {
+  border-right: 1px solid #ddd;
+}
+
+.tabulator.table-condensed .tabulator-header .tabulator-col .tabulator-col-content {
+  padding: 5px;
+}
+
+.tabulator.table-condensed .tabulator-tableHolder .tabulator-table .tabulator-row {
+  min-height: 24px;
+}
+
+.tabulator.table-condensed .tabulator-tableHolder .tabulator-table .tabulator-row .tabulator-cell {
+  padding: 5px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.active {
+  background: #f5f5f5 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.success {
+  background: #dff0d8 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.info {
+  background: #d9edf7 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.warning {
+  background: #fcf8e3 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.danger {
+  background: #f2dede !important;
+}

css/tabulator/tabulator.css

@@ -0,0 +1,535 @@
+/* Tabulator v3.3.1 (c) Oliver Folkerd */
+.tabulator {
+  position: relative;
+  border: 1px solid #999;
+  background-color: #888;
+  font-size: 14px;
+  text-align: left;
+  overflow: hidden;
+  -ms-transform: translatez(0);
+  transform: translatez(0);
+}
+
+.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
+  min-width: 100%;
+}
+
+.tabulator.tabulator-block-select {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.tabulator .tabulator-header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 1px solid #999;
+  background-color: #e6e6e6;
+  color: #555;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border-right: 1px solid #aaa;
+  background: #e6e6e6;
+  text-align: left;
+  vertical-align: bottom;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-moving {
+  position: absolute;
+  border: 1px solid #999;
+  background: #cdcdcd;
+  pointer-events: none;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  position: relative;
+  padding: 4px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #999;
+  padding: 1px;
+  background: #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+  display: inline-block;
+  position: absolute;
+  top: 9px;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  border-top: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
+  margin-right: -1px;
+}
+
+.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
+  position: absolute;
+  background-color: #e6e6e6 !important;
+  border: 1px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 2px;
+  width: 100%;
+  text-align: center;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
+  height: auto !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
+  margin-top: 3px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+  padding-right: 25px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  cursor: pointer;
+  background-color: #cdcdcd;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #666;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
+  border-top: 6px solid #666;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-header .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder {
+  box-sizing: border-box;
+  min-width: 200%;
+  background: #f3f3f3 !important;
+  border-top: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
+  background: #f3f3f3 !important;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-tableHolder {
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tabulator .tabulator-tableHolder:focus {
+  outline: none;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder span {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+  color: #ccc;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+  position: relative;
+  display: inline-block;
+  background-color: #fff;
+  white-space: nowrap;
+  overflow: visible;
+  color: #333;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
+  font-weight: bold;
+  background: #e2e2e2 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
+  border-bottom: 2px solid #aaa;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
+  border-top: 2px solid #aaa;
+}
+
+.tabulator .tabulator-row {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 22px;
+  background-color: #fff;
+}
+
+.tabulator .tabulator-row.tabulator-row-even {
+  background-color: #EFEFEF;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+  background-color: #bbb;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-selected {
+  background-color: #9ABCEA;
+}
+
+.tabulator .tabulator-row.tabulator-selected:hover {
+  background-color: #769BCC;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-row-moving {
+  border: 1px solid #000;
+  background: #fff;
+}
+
+.tabulator .tabulator-row.tabulator-moving {
+  position: absolute;
+  border-top: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
+  pointer-events: none;
+  z-index: 15;
+}
+
+.tabulator .tabulator-row .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  background-color: inherit;
+  z-index: 10;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #aaa;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #aaa;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px;
+  border-right: 1px solid #aaa;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
+  border: 1px solid #1D68CD;
+  padding: 0;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
+  border: 1px;
+  background: transparent;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
+  border: 1px solid #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
+  border: 1px;
+  background: transparent;
+  color: #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
+  width: 80%;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
+  width: 100%;
+  height: 3px;
+  margin: 2px 10% 0 10%;
+  background: #666;
+}
+
+.tabulator .tabulator-row.tabulator-group {
+  box-sizing: border-box;
+  border-bottom: 1px solid #999;
+  border-right: 1px solid #aaa;
+  border-top: 1px solid #999;
+  padding: 5px;
+  padding-left: 10px;
+  background: #ccc;
+  font-weight: bold;
+  min-width: 100%;
+}
+
+.tabulator .tabulator-row.tabulator-group:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
+  margin-right: 10px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #666;
+  border-bottom: 0;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
+  margin-left: 20px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
+  margin-left: 40px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
+  margin-left: 60px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
+  margin-left: 80px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
+  margin-left: 1000px;
+}
+
+.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-right: 16px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 0;
+  border-left: 6px solid #666;
+  vertical-align: middle;
+}
+
+.tabulator .tabulator-row.tabulator-group span {
+  margin-left: 10px;
+  color: #d00;
+}
+
+.tabulator .tabulator-footer {
+  padding: 5px 10px;
+  border-top: 1px solid #999;
+  background-color: #e6e6e6;
+  text-align: right;
+  color: #555;
+  font-weight: bold;
+  white-space: nowrap;
+  -ms-user-select: none;
+      user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: calc("100% + 20px");
+  margin: -5px -10px 5px -10px;
+  text-align: left;
+  background: #f3f3f3 !important;
+  border-bottom: 1px solid #aaa;
+  border-top: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
+  background: #f3f3f3 !important;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
+  margin-bottom: -5px;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-footer .tabulator-pages {
+  margin: 0 7px;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  display: inline-block;
+  margin: 0 2px;
+  padding: 2px 5px;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #555;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  color: #d00;
+}
+
+.tabulator .tabulator-footer .tabulator-page:disabled {
+  opacity: .5;
+}
+
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.tabulator .tabulator-col-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+}
+
+.tabulator .tabulator-col-resize-handle.prev {
+  left: 0;
+  right: auto;
+}
+
+.tabulator .tabulator-col-resize-handle:hover {
+  cursor: ew-resize;
+}
+
+.tabulator .tablulator-loader {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #fff;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
+  border: 4px solid #333;
+  color: #000;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
+  border: 4px solid #D00;
+  color: #590000;
+}

css/tabulator/tabulator_midnight.css

@@ -0,0 +1,539 @@
+/* Tabulator v3.3.1 (c) Oliver Folkerd */
+.tabulator {
+  position: relative;
+  border: 1px solid #333;
+  background-color: #222;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: left;
+  -ms-transform: translatez(0);
+  transform: translatez(0);
+}
+
+.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
+  min-width: 100%;
+}
+
+.tabulator.tabulator-block-select {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.tabulator .tabulator-header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 1px solid #999;
+  background-color: #333;
+  color: #fff;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border-right: 1px solid #aaa;
+  background-color: #333;
+  text-align: left;
+  vertical-align: bottom;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-moving {
+  position: absolute;
+  border: 1px solid #999;
+  background: #1a1a1a;
+  pointer-events: none;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  position: relative;
+  padding: 4px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #999;
+  padding: 1px;
+  background: #444;
+  color: #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+  display: inline-block;
+  position: absolute;
+  top: 9px;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  border-top: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
+  margin-right: -1px;
+}
+
+.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
+  position: absolute;
+  background-color: #1a1a1a !important;
+  border: 1px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 2px;
+  width: 100%;
+  text-align: center;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
+  height: auto !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
+  margin-top: 3px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input, .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
+  border: 1px solid #999;
+  background: #444;
+  color: #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+  padding-right: 25px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  cursor: pointer;
+  background-color: #1a1a1a;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #666;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
+  border-top: 6px solid #666;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-header .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #888;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #888;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder {
+  box-sizing: border-box;
+  min-width: 200%;
+  background: #1a1a1a !important;
+  border-top: 1px solid #888;
+  border-bottom: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
+  background: #1a1a1a !important;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-tableHolder {
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tabulator .tabulator-tableHolder:focus {
+  outline: none;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder span {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+  color: #eee;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+  position: relative;
+  display: inline-block;
+  background-color: #666;
+  white-space: nowrap;
+  overflow: visible;
+  color: #fff;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
+  font-weight: bold;
+  background: #373737 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
+  border-bottom: 2px solid #888;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
+  border-top: 2px solid #888;
+}
+
+.tabulator .tabulator-row {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 22px;
+  background-color: #666;
+}
+
+.tabulator .tabulator-row:nth-child(even) {
+  background-color: #444;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+  background-color: #999;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-selected {
+  background-color: #000;
+}
+
+.tabulator .tabulator-row.tabulator-selected:hover {
+  background-color: #888;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-moving {
+  position: absolute;
+  border-top: 1px solid #888;
+  border-bottom: 1px solid #888;
+  pointer-events: none !important;
+  z-index: 15;
+}
+
+.tabulator .tabulator-row .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  background-color: inherit;
+  z-index: 10;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #888;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #888;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px;
+  border-right: 1px solid #888;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
+  border: 1px solid #999;
+  padding: 0;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
+  border: 1px;
+  background: transparent;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
+  border: 1px solid #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
+  border: 1px;
+  background: transparent;
+  color: #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
+  width: 80%;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
+  width: 100%;
+  height: 3px;
+  margin: 2px 10% 0 10%;
+  background: #666;
+}
+
+.tabulator .tabulator-row.tabulator-group {
+  box-sizing: border-box;
+  border-bottom: 1px solid #999;
+  border-right: 1px solid #888;
+  border-top: 1px solid #999;
+  padding: 5px;
+  padding-left: 10px;
+  background: #ccc;
+  font-weight: bold;
+  color: #333;
+  min-width: 100%;
+}
+
+.tabulator .tabulator-row.tabulator-group:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
+  margin-right: 10px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #666;
+  border-bottom: 0;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
+  margin-left: 20px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
+  margin-left: 40px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
+  margin-left: 60px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
+  margin-left: 80px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
+  margin-left: 1000px;
+}
+
+.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-right: 16px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 0;
+  border-left: 6px solid #666;
+  vertical-align: middle;
+}
+
+.tabulator .tabulator-row.tabulator-group span {
+  margin-left: 10px;
+  color: #666;
+}
+
+.tabulator .tabulator-col-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+}
+
+.tabulator .tabulator-col-resize-handle.prev {
+  left: 0;
+  right: auto;
+}
+
+.tabulator .tabulator-col-resize-handle:hover {
+  cursor: ew-resize;
+}
+
+.tabulator .tabulator-footer {
+  padding: 5px 10px;
+  border-top: 1px solid #999;
+  background-color: #333;
+  text-align: right;
+  color: #333;
+  font-weight: bold;
+  white-space: nowrap;
+  -ms-user-select: none;
+      user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: calc("100% + 20px");
+  margin: -5px -10px 5px -10px;
+  text-align: left;
+  background: #262626 !important;
+  border-bottom: 1px solid #888;
+  border-top: 1px solid #888;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
+  background: #262626 !important;
+  color: #fff;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
+  margin-bottom: -5px;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-footer .tabulator-pages {
+  margin: 0 7px;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  display: inline-block;
+  margin: 0 2px;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #333;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  color: #fff;
+}
+
+.tabulator .tabulator-footer .tabulator-page:disabled {
+  opacity: .5;
+}
+
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.tabulator .tablulator-loader {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #fff;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
+  border: 4px solid #333;
+  color: #000;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
+  border: 4px solid #D00;
+  color: #590000;
+}

css/tabulator/tabulator_modern.css

@@ -0,0 +1,562 @@
+/* Tabulator v3.3.1 (c) Oliver Folkerd */
+.tabulator {
+  position: relative;
+  border: 1px solid #fff;
+  background-color: #fff;
+  overflow: hidden;
+  font-size: 16px;
+  text-align: left;
+  -ms-transform: translatez(0);
+  transform: translatez(0);
+}
+
+.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
+  min-width: 100%;
+}
+
+.tabulator.tabulator-block-select {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.tabulator .tabulator-header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 3px solid #3759D7;
+  margin-bottom: 4px;
+  background-color: #fff;
+  color: #3759D7;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  padding-left: 10px;
+  font-size: 1.1em;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border-right: 2px solid #fff;
+  background-color: #fff;
+  text-align: left;
+  vertical-align: bottom;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-moving {
+  position: absolute;
+  border: 1px solid #3759D7;
+  background: #e6e6e6;
+  pointer-events: none;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  position: relative;
+  padding: 4px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #3759D7;
+  padding: 1px;
+  background: #fff;
+  font-size: 1em;
+  color: #3759D7;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+  display: inline-block;
+  position: absolute;
+  top: 9px;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #b7c3f1;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  border-top: 2px solid #3759D7;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
+  margin-right: -1px;
+}
+
+.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
+  position: absolute;
+  background-color: #e6e6e6 !important;
+  border: 1px solid #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 2px;
+  width: 100%;
+  text-align: center;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
+  height: auto !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
+  margin-top: 3px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+  padding-right: 25px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #b7c3f1;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #3759D7;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
+  border-top: 6px solid #3759D7;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-header .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
+  padding-left: 10px;
+  border-right: 2px solid #fff;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #fff;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder {
+  box-sizing: border-box;
+  min-width: 200%;
+  border-top: 2px solid #3759D7 !important;
+  background: white !important;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
+  padding-left: 0 !important;
+  background: white !important;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-cell {
+  background: none;
+}
+
+.tabulator .tabulator-tableHolder {
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tabulator .tabulator-tableHolder:focus {
+  outline: none;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder span {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+  color: #3759D7;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+  position: relative;
+  display: inline-block;
+  background-color: #f3f3f3;
+  white-space: nowrap;
+  overflow: visible;
+  color: #333;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
+  font-weight: bold;
+  background: #f2f2f2 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
+  border-bottom: 2px solid #3759D7;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
+  border-top: 2px solid #3759D7;
+}
+
+.tabulator .tabulator-row {
+  position: relative;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  min-height: 24px;
+  background-color: #3759D7;
+  padding-left: 10px !important;
+  margin-bottom: 2px;
+}
+
+.tabulator .tabulator-row:nth-child(even) {
+  background-color: #627ce0;
+}
+
+.tabulator .tabulator-row:nth-child(even) .tabulator-cell {
+  background-color: #fff;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell {
+  background-color: #bbb;
+}
+
+.tabulator .tabulator-row.tabulator-selected .tabulator-cell {
+  background-color: #9ABCEA;
+}
+
+.tabulator .tabulator-row.tabulator-selected:hover .tabulator-cell {
+  background-color: #769BCC;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-moving {
+  position: absolute;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  pointer-events: none !important;
+  z-index: 15;
+}
+
+.tabulator .tabulator-row .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  background-color: inherit;
+  z-index: 10;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
+  padding-left: 10px;
+  border-right: 2px solid #fff;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #fff;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 6px 4px;
+  border-right: 2px solid #fff;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: #f3f3f3;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
+  border: 1px solid #1D68CD;
+  padding: 0;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
+  border: 1px;
+  background: transparent;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
+  border: 1px solid #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
+  border: 1px;
+  background: transparent;
+  color: #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
+  width: 80%;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
+  width: 100%;
+  height: 3px;
+  margin: 2px 10% 0 10%;
+  background: #666;
+}
+
+.tabulator .tabulator-row.tabulator-group {
+  box-sizing: border-box;
+  border-bottom: 2px solid #3759D7;
+  border-top: 2px solid #3759D7;
+  padding: 5px;
+  padding-left: 10px;
+  background: #8ca0e8;
+  font-weight: bold;
+  color: fff;
+  margin-bottom: 2px;
+  min-width: 100%;
+}
+
+.tabulator .tabulator-row.tabulator-group:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
+  margin-right: 10px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #3759D7;
+  border-bottom: 0;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
+  margin-left: 20px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
+  margin-left: 40px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
+  margin-left: 60px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
+  margin-left: 80px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
+  margin-left: 1000px;
+}
+
+.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-right: 16px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 0;
+  border-left: 6px solid #3759D7;
+  vertical-align: middle;
+}
+
+.tabulator .tabulator-row.tabulator-group span {
+  margin-left: 10px;
+  color: #3759D7;
+}
+
+.tabulator .tabulator-col-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+}
+
+.tabulator .tabulator-col-resize-handle.prev {
+  left: 0;
+  right: auto;
+}
+
+.tabulator .tabulator-col-resize-handle:hover {
+  cursor: ew-resize;
+}
+
+.tabulator .tabulator-footer {
+  padding: 5px 10px;
+  border-top: 1px solid #999;
+  background-color: #fff;
+  text-align: right;
+  color: #3759D7;
+  font-weight: bold;
+  white-space: nowrap;
+  -ms-user-select: none;
+      user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: calc("100% + 20px");
+  margin: -5px -10px 5px -10px;
+  text-align: left;
+  background: white !important;
+  border-top: 3px solid #3759D7 !important;
+  border-bottom: 2px solid #3759D7 !important;
+  border-bottom: 1px solid #fff;
+  border-top: 1px solid #fff;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
+  background: white !important;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-cell {
+  background: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
+  margin-bottom: -5px;
+  border-bottom: none;
+  border-bottom: none !important;
+}
+
+.tabulator .tabulator-footer .tabulator-pages {
+  margin: 0 7px;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  display: inline-block;
+  margin: 0 2px;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #3759D7;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  color: #3759D7;
+}
+
+.tabulator .tabulator-footer .tabulator-page:disabled {
+  opacity: .5;
+}
+
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.tabulator .tablulator-loader {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #fff;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
+  border: 4px solid #333;
+  color: #000;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
+  border: 4px solid #D00;
+  color: #590000;
+}

css/tabulator/tabulator_simple.css

@@ -0,0 +1,534 @@
+/* Tabulator v3.3.1 (c) Oliver Folkerd */
+.tabulator {
+  position: relative;
+  background-color: #fff;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: left;
+  -ms-transform: translatez(0);
+  transform: translatez(0);
+}
+
+.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
+  min-width: 100%;
+}
+
+.tabulator.tabulator-block-select {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.tabulator .tabulator-header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 1px solid #999;
+  background-color: #fff;
+  color: #555;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border-right: 1px solid #ddd;
+  background-color: #fff;
+  text-align: left;
+  vertical-align: bottom;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-moving {
+  position: absolute;
+  border: 1px solid #999;
+  background: #e6e6e6;
+  pointer-events: none;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  position: relative;
+  padding: 4px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #999;
+  padding: 1px;
+  background: #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+  display: inline-block;
+  position: absolute;
+  top: 9px;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  border-top: 1px solid #ddd;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
+  margin-right: -1px;
+}
+
+.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
+  position: absolute;
+  background-color: #e6e6e6 !important;
+  border: 1px solid #ddd;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 2px;
+  width: 100%;
+  text-align: center;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
+  height: auto !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
+  margin-top: 3px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+  padding-right: 25px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #666;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
+  border-top: 6px solid #666;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-header .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #ddd;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #ddd;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder {
+  box-sizing: border-box;
+  min-width: 200%;
+  background: #f2f2f2 !important;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #999;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
+  background: #f2f2f2 !important;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-tableHolder {
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tabulator .tabulator-tableHolder:focus {
+  outline: none;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder span {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+  color: #000;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+  position: relative;
+  display: inline-block;
+  background-color: #fff;
+  white-space: nowrap;
+  overflow: visible;
+  color: #333;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
+  font-weight: bold;
+  background: #f2f2f2 !important;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
+  border-bottom: 2px solid #ddd;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
+  border-top: 2px solid #ddd;
+}
+
+.tabulator .tabulator-row {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 22px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+
+.tabulator .tabulator-row:nth-child(even) {
+  background-color: #fff;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+  background-color: #bbb;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-selected {
+  background-color: #9ABCEA;
+}
+
+.tabulator .tabulator-row.tabulator-selected:hover {
+  background-color: #769BCC;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-moving {
+  position: absolute;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  pointer-events: none !important;
+  z-index: 15;
+}
+
+.tabulator .tabulator-row .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  background-color: inherit;
+  z-index: 10;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #ddd;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #ddd;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px;
+  border-right: 1px solid #ddd;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabulator .tabulator-row .tabulator-cell:last-of-type {
+  border-right: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
+  border: 1px solid #1D68CD;
+  padding: 0;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
+  border: 1px;
+  background: transparent;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
+  border: 1px solid #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
+  border: 1px;
+  background: transparent;
+  color: #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
+  width: 80%;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
+  width: 100%;
+  height: 3px;
+  margin: 2px 10% 0 10%;
+  background: #666;
+}
+
+.tabulator .tabulator-row.tabulator-group {
+  box-sizing: border-box;
+  border-bottom: 1px solid #999;
+  border-right: 1px solid #ddd;
+  border-top: 1px solid #999;
+  padding: 5px;
+  padding-left: 10px;
+  background: #fafafa;
+  font-weight: bold;
+  min-width: 100%;
+}
+
+.tabulator .tabulator-row.tabulator-group:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
+  margin-right: 10px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #666;
+  border-bottom: 0;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
+  margin-left: 20px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
+  margin-left: 40px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
+  margin-left: 60px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
+  margin-left: 80px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
+  margin-left: 1000px;
+}
+
+.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-right: 16px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 0;
+  border-left: 6px solid #666;
+  vertical-align: middle;
+}
+
+.tabulator .tabulator-row.tabulator-group span {
+  margin-left: 10px;
+  color: #666;
+}
+
+.tabulator .tabulator-col-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+}
+
+.tabulator .tabulator-col-resize-handle.prev {
+  left: 0;
+  right: auto;
+}
+
+.tabulator .tabulator-col-resize-handle:hover {
+  cursor: ew-resize;
+}
+
+.tabulator .tabulator-footer {
+  padding: 5px 10px;
+  border-top: 1px solid #999;
+  background-color: #fff;
+  text-align: right;
+  color: #555;
+  font-weight: bold;
+  white-space: nowrap;
+  -ms-user-select: none;
+      user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: calc("100% + 20px");
+  margin: -5px -10px 5px -10px;
+  text-align: left;
+  background: #f2f2f2 !important;
+  border-bottom: 1px solid #fff;
+  border-top: 1px solid #ddd;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
+  background: #f2f2f2 !important;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
+  margin-bottom: -5px;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-footer .tabulator-pages {
+  margin: 0 7px;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  display: inline-block;
+  margin: 0 2px;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #555;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  color: #d00;
+}
+
+.tabulator .tabulator-footer .tabulator-page:disabled {
+  opacity: .5;
+}
+
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.tabulator .tablulator-loader {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #fff;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
+  border: 4px solid #333;
+  color: #000;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
+  border: 4px solid #D00;
+  color: #590000;
+}

css/tabulator/tabulator_site.css

@@ -0,0 +1,533 @@
+/* Tabulator v3.3.1 (c) Oliver Folkerd */
+.tabulator {
+  position: relative;
+  border-bottom: 5px solid #222;
+  background-color: #fff;
+  font-size: 14px;
+  text-align: left;
+  overflow: hidden;
+  -ms-transform: translatez(0);
+  transform: translatez(0);
+}
+
+.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
+  min-width: 100%;
+}
+
+.tabulator[tabulator-layout="fitColumns"] .tabulator-row .tabulator-cell:last-of-type {
+  border-right: none;
+}
+
+.tabulator.tabulator-block-select {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.tabulator .tabulator-header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 3px solid #3FB449;
+  background-color: #222;
+  color: #fff;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border-right: 1px solid #aaa;
+  background-color: #222;
+  text-align: left;
+  vertical-align: bottom;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-moving {
+  position: absolute;
+  border: 1px solid #3FB449;
+  background: #090909;
+  pointer-events: none;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  position: relative;
+  padding: 8px;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #999;
+  padding: 1px;
+  background: #fff;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+  display: inline-block;
+  position: absolute;
+  top: 14px;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  border-top: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
+  margin-right: -1px;
+}
+
+.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
+  position: absolute;
+  background-color: #222 !important;
+  border: 1px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 2px;
+  width: 100%;
+  text-align: center;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
+  height: auto !important;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
+  margin-top: 3px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+  padding-right: 25px;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  cursor: pointer;
+  background-color: #090909;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #bbb;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
+  border-top: none;
+  border-bottom: 6px solid #3FB449;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
+  border-top: 6px solid #3FB449;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-header .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #aaa;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder {
+  box-sizing: border-box;
+  min-width: 200%;
+  background: #3c3c3c !important;
+  border-top: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
+  background: #3c3c3c !important;
+}
+
+.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-tableHolder {
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tabulator .tabulator-tableHolder:focus {
+  outline: none;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-placeholder span {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+  color: #3FB449;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+  position: relative;
+  display: inline-block;
+  background-color: #fff;
+  white-space: nowrap;
+  overflow: visible;
+  color: #333;
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
+  font-weight: bold;
+  background: #484848 !important;
+  color: #fff;
+}
+
+.tabulator .tabulator-row {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 22px;
+  background-color: #fff;
+}
+
+.tabulator .tabulator-row.tabulator-row-even {
+  background-color: #EFEFEF;
+}
+
+.tabulator .tabulator-row.tabulator-selectable:hover {
+  background-color: #bbb;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-selected {
+  background-color: #9ABCEA;
+}
+
+.tabulator .tabulator-row.tabulator-selected:hover {
+  background-color: #769BCC;
+  cursor: pointer;
+}
+
+.tabulator .tabulator-row.tabulator-row-moving {
+  border: 1px solid #000;
+  background: #fff;
+}
+
+.tabulator .tabulator-row.tabulator-moving {
+  position: absolute;
+  border-top: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
+  pointer-events: none !important;
+  z-index: 15;
+}
+
+.tabulator .tabulator-row .tabulator-frozen {
+  display: inline-block;
+  position: absolute;
+  background-color: inherit;
+  z-index: 10;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
+  border-right: 2px solid #aaa;
+}
+
+.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
+  border-left: 2px solid #aaa;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 6px;
+  border-right: 1px solid #aaa;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
+  border: 1px solid #1D68CD;
+  padding: 0;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
+  border: 1px;
+  background: transparent;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
+  border: 1px solid #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
+  border: 1px;
+  background: transparent;
+  color: #dd0000;
+}
+
+.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
+  width: 80%;
+}
+
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
+  width: 100%;
+  height: 3px;
+  margin: 2px 10% 0 10%;
+  background: #666;
+}
+
+.tabulator .tabulator-row.tabulator-group {
+  box-sizing: border-box;
+  border-right: 1px solid #aaa;
+  border-top: 1px solid #000;
+  border-bottom: 2px solid #3FB449;
+  padding: 5px;
+  padding-left: 10px;
+  background: #222;
+  color: #fff;
+  font-weight: bold;
+  min-width: 100%;
+}
+
+.tabulator .tabulator-row.tabulator-group:hover {
+  cursor: pointer;
+  background-color: #090909;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
+  margin-right: 10px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #3FB449;
+  border-bottom: 0;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
+  margin-left: 20px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
+  margin-left: 40px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
+  margin-left: 60px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
+  margin-left: 80px;
+}
+
+.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
+  margin-left: 1000px;
+}
+
+.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-right: 16px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 0;
+  border-left: 6px solid #3FB449;
+  vertical-align: middle;
+}
+
+.tabulator .tabulator-row.tabulator-group span {
+  margin-left: 10px;
+  color: #3FB449;
+}
+
+.tabulator .tabulator-footer {
+  padding: 5px 10px;
+  padding-top: 8px;
+  border-top: 3px solid #3FB449;
+  background-color: #222;
+  text-align: right;
+  color: #222;
+  font-weight: bold;
+  white-space: nowrap;
+  -ms-user-select: none;
+      user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  box-sizing: border-box;
+  width: calc("100% + 20px");
+  margin: -8px -10px 8px -10px;
+  text-align: left;
+  background: #3c3c3c !important;
+  border-bottom: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
+  background: #3c3c3c !important;
+  color: #fff !important;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
+  margin-bottom: -5px;
+  border-bottom: none;
+}
+
+.tabulator .tabulator-footer .tabulator-pages {
+  margin: 0 7px;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  display: inline-block;
+  margin: 0 2px;
+  padding: 2px 5px;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  background: #fff;
+  color: #222;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  color: #3FB449;
+}
+
+.tabulator .tabulator-footer .tabulator-page:disabled {
+  opacity: .5;
+}
+
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.tabulator .tabulator-col-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+}
+
+.tabulator .tabulator-col-resize-handle.prev {
+  left: 0;
+  right: auto;
+}
+
+.tabulator .tabulator-col-resize-handle:hover {
+  cursor: ew-resize;
+}
+
+.tabulator .tablulator-loader {
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #fff;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
+  border: 4px solid #333;
+  color: #000;
+}
+
+.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
+  border: 4px solid #D00;
+  color: #590000;
+}

js/tabulator/.gitignore

@@ -0,0 +1,5 @@
+*.sublime-project
+*.sublime-workspace
+
+node_modules/
+npm-debug.log

js/tabulator/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-2017 Oli Folkerd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

js/tabulator/README.md

@@ -0,0 +1,74 @@
+![Tabluator Table](http://olifolkerd.github.io/tabulator/images/tabulator.png)
+
+### Version 3.3 Out Now!
+
+An easy to use interactive table generation plugin for JQuery UI
+
+Full documentation & demos can be found at: [http://tabulator.info](http://tabulator.info)
+***
+![Tabluator Table](http://tabulator.info/images/tabulator_table.jpg)
+***
+Features
+================================
+Tabulator allows you to create interactive tables in seconds from any HTML Table, Javascript Array or JSON formatted data.
+
+Simply include the library and the css in your JQuery UI project and you're away!
+
+Tabulator is packed with useful features including:
+
+![Tabluator Features](http://olifolkerd.github.io/tabulator/images/featurelist_share.png)
+
+Setup
+================================
+Setting up tabulator could not be simpler.
+
+Include the library and the css
+```html
+<link href="dist/css/tabulator.min.css" rel="stylesheet">
+<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
+```
+
+Create an element to hold the table
+```html
+<div id="example-table"></div>
+```
+
+Turn the element into a tabulator with some simple javascript
+```js
+$("#example-table").tabulator();
+```
+
+
+### Bower Installation
+To get Tabulator via the Bower package manager, open a terminal in your project directory and run the following commmand:
+```
+bower install tabulator --save
+```
+
+### NPM Installation
+To get Tabulator via the NPM package manager, open a terminal in your project directory and run the following commmand:
+```
+npm install jquery.tabulator --save
+```
+
+### CDNJS
+To access Tabulator directly from the CDNJS CDN servers, include the following two lines at the start of your project, instead of the localy hosted versions:
+```html
+<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/css/tabulator.min.css" rel="stylesheet">
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/js/tabulator.min.js"></script>
+
+Coming Soon
+================================
+Tabulator is actively under development and I plan to have even more useful features implemented soon, including:
+
+- Data Reactivity
+- Custom Row Templates
+- Additional Editors and Formatters
+- Copy to Clipboard
+- Print Styling
+- Drag Rows Between Tables
+- Multi Cell Editing
+- Resizable Rows
+- Cell Selection
+
+Get in touch if there are any features you feel Tabulator needs.

js/tabulator/bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "tabulator",
+  "main": "dist/js/tabulator.js",
+  "version": "3.3.1",
+  "description": "Interactive table generation plugin for jQuery UI",
+  "keywords": [
+    "table",
+    "grid",
+    "datagrid",
+    "tabulator",
+    "editable",
+    "cookie",
+    "jquery",
+    "jqueryui",
+    "sort",
+    "format",
+    "resizable",
+    "list",
+    "scrollable",
+    "ajax",
+    "json",
+    "widget"
+  ],
+  "authors": [
+    "Oli Folkerd"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/olifolkerd/tabulator",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

js/tabulator/gulpfile.js

@@ -0,0 +1,100 @@
+var gulp = require('gulp'),
+    sass = require('gulp-sass'),
+    autoprefixer = require('gulp-autoprefixer'),
+    cssnano = require('gulp-cssnano'),
+    jshint = require('gulp-jshint'),
+    uglify = require('gulp-uglify'),
+    imagemin = require('gulp-imagemin'),
+    rename = require('gulp-rename'),
+    concat = require('gulp-concat'),
+    notify = require('gulp-notify'),
+    cache = require('gulp-cache'),
+    livereload = require('gulp-livereload'),
+    del = require('del');
+    include = require('gulp-include'),
+    sourcemaps = require('gulp-sourcemaps'),
+    babel = require('gulp-babel'),
+    plumber = require('gulp-plumber'),
+    gutil = require('gulp-util'),
+    insert = require('gulp-insert');
+
+    var version_no = "3.3.1",
+    version = "/* Tabulator v" + version_no + " (c) Oliver Folkerd */\n";
+
+    var gulp_src = gulp.src;
+    gulp.src = function() {
+      return gulp_src.apply(gulp, arguments)
+        .pipe(plumber(function(error) {
+          // Output an error message
+          gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
+          // emit the end event, to properly end the task
+          this.emit('end');
+        })
+      );
+    };
+
+
+    gulp.task('styles', function() {
+      return gulp.src('src/scss/**/tabulator*.scss')
+     	.pipe(sourcemaps.init())
+        .pipe(insert.prepend(version + "\n"))
+        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
+        .pipe(autoprefixer('last 4 version'))
+        .pipe(gulp.dest('dist/css'))
+        .pipe(rename({suffix: '.min'}))
+        .pipe(cssnano())
+        .pipe(insert.prepend(version))
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('dist/css'))
+        //.pipe(notify({ message: 'Styles task complete' }));
+        .on('end', function(){ gutil.log('Styles task complete'); })
+    });
+
+    gulp.task('scripts', function() {
+     	//return gulp.src('src/js/**/*.js')
+      	return gulp.src('src/js/jquery_wrapper.js')
+        .pipe(insert.prepend(version + "\n"))
+      	//.pipe(sourcemaps.init())
+      	.pipe(include())
+        //.pipe(jshint())
+       // .pipe(jshint.reporter('default'))
+        .pipe(babel({
+         	//presets:['es2015']
+         	presets: [["env", {
+         	      "targets": {
+         	        "browsers": ["last 4 versions"]
+         	      }
+         	    }]
+         	  ]
+       	}))
+        .pipe(concat('tabulator.js'))
+        .pipe(gulp.dest('dist/js'))
+        .pipe(rename({suffix: '.min'}))
+        .pipe(uglify())
+        .pipe(insert.prepend(version))
+       // .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('dist/js'))
+        //.pipe(notify({ message: 'Scripts task complete' }));
+        .on('end', function(){ gutil.log('Scripts task complete'); })
+        //.on("error", console.log)
+    });
+
+    gulp.task('clean', function() {
+        return del(['dist/css', 'dist/js']);
+    });
+
+
+    gulp.task('default', ['clean'], function() {
+        gulp.start('styles', 'scripts');
+    });
+
+
+    gulp.task('watch', function() {
+
+      // Watch .scss files
+      gulp.watch('src/scss/**/*.scss', ['styles']);
+
+      // Watch .js files
+      gulp.watch('src/js/**/*.js', ['scripts']);
+
+    });

js/tabulator/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "jquery.tabulator",
+  "version": "3.3.1",
+  "description": "Interactive table generation plugin for jQuery UI",
+  "main": "dist/js/tabulator.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/olifolkerd/tabulator.git"
+  },
+  "keywords": [
+    "table",
+    "grid",
+    "datagrid",
+    "tabulator",
+    "editable",
+    "cookie",
+    "jquery",
+    "jqueryui",
+    "sort",
+    "format",
+    "resizable",
+    "list",
+    "scrollable",
+    "ajax",
+    "json",
+    "widget"
+  ],
+  "author": "Oli Folkerd",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/olifolkerd/tabulator/issues"
+  },
+  "homepage": "http://tabulator.info/",
+  "devDependencies": {
+    "babel-preset-env": "^1.4.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "del": "^2.2.2",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-cache": "^0.4.6",
+    "gulp-concat": "^2.6.1",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-imagemin": "^3.2.0",
+    "gulp-include": "^2.3.1",
+    "gulp-insert": "^0.5.0",
+    "gulp-jshint": "^2.0.4",
+    "gulp-livereload": "^3.8.1",
+    "gulp-notify": "^3.0.0",
+    "gulp-plumber": "^1.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-uglify": "^2.1.2",
+    "gulp-util": "^3.0.8",
+    "jshint": "^2.9.4"
+  }
+}

js/tabulator/src/js/cell.js

@@ -0,0 +1,479 @@
+
+//public row object
+var CellComponent = function (cell){
+	this.cell = cell;
+};
+
+CellComponent.prototype.getValue = function(){
+	return this.cell.getValue();
+};
+
+CellComponent.prototype.getOldValue = function(){
+	return this.cell.getOldValue();
+};
+
+CellComponent.prototype.getElement = function(){
+	return $(this.cell.getElement());
+};
+
+CellComponent.prototype.getRow = function(){
+	return this.cell.row.getComponent();
+};
+
+CellComponent.prototype.getData = function(){
+	return this.cell.row.getData();
+};
+
+CellComponent.prototype.getField = function(){
+	return this.cell.column.getField();
+};
+
+CellComponent.prototype.getColumn = function(){
+	return this.cell.column.getComponent();
+};
+
+CellComponent.prototype.setValue = function(value, mutate){
+	if(typeof mutate == "undefined"){
+		mutate = true;
+	}
+
+	this.cell.setValue(value, mutate);
+};
+
+CellComponent.prototype.restoreOldValue = function(){
+	this.cell.setValueActual(this.cell.getOldValue());
+};
+
+CellComponent.prototype.edit = function(){
+	this.cell.edit();
+};
+
+CellComponent.prototype.nav = function(){
+	return this.cell.nav();
+};
+
+CellComponent.prototype.checkHeight = function(){
+	this.cell.checkHeight();
+};
+
+CellComponent.prototype._getSelf = function(){
+	return this.cell;
+};
+
+
+
+var Cell = function(column, row){
+
+	this.table = column.table;
+	this.column = column;
+	this.row = row;
+	// this.element = $("<div class='tabulator-cell' role='gridcell'></div>");
+	this.element = null;
+	this.value = null;
+	this.oldValue = null;
+
+	this.height = null;
+	this.width = null;
+	this.minWidth = null;
+
+	this.build();
+};
+
+//////////////// Setup Functions /////////////////
+
+//generate element
+Cell.prototype.build = function(){
+	this.generateElement();
+
+	this.setWidth(this.column.width);
+
+	this._configureCell();
+
+	this.setValueActual(this.column.getFieldValue(this.row.data));
+};
+
+Cell.prototype.generateElement = function(){
+	this.element = document.createElement('div');
+	this.element.className = "tabulator-cell";
+	this.element.setAttribute("role", "gridcell");
+	this.element = $(this.element);
+};
+
+
+Cell.prototype._configureCell = function(){
+	var self = this,
+	cellEvents = self.column.cellEvents,
+	element = self.element,
+	field = this.column.getField(),
+	dblTap,	tapHold, tap;
+
+	//set text alignment
+	element[0].style.textAlign = self.column.hozAlign;
+
+	if(field){
+		element.attr("tabulator-field", field);
+	}
+
+	if(self.column.definition.cssClass){
+		element.addClass(self.column.definition.cssClass);
+	}
+
+	//set event bindings
+	if (cellEvents.cellClick){
+		self.element.on("click", function(e){
+			cellEvents.cellClick(e, self.getComponent());
+		});
+	}
+
+	if (cellEvents.cellDblClick){
+		self.element.on("dblclick", function(e){
+			cellEvents.cellDblClick(e, self.getComponent());
+		});
+	}
+
+	if (cellEvents.cellContext){
+		self.element.on("contextmenu", function(e){
+			cellEvents.cellContext(e, self.getComponent());
+		});
+	}
+
+	if (cellEvents.cellTap){
+		tap = false;
+
+		self.element.on("touchstart", function(e){
+			tap = true;
+		});
+
+		self.element.on("touchend", function(e){
+			if(tap){
+				cellEvents.cellTap(e, self.getComponent());
+			}
+
+			tap = false;
+		});
+	}
+
+	if (cellEvents.cellDblTap){
+		dblTap = null;
+
+		self.element.on("touchend", function(e){
+
+			if(dblTap){
+				clearTimeout(dblTap);
+				dblTap = null;
+
+				cellEvents.cellDblTap(e, self.getComponent());
+			}else{
+
+				dblTap = setTimeout(function(){
+					clearTimeout(dblTap);
+					dblTap = null;
+				}, 300);
+			}
+
+		});
+	}
+
+	if (cellEvents.cellTapHold){
+		tapHold = null;
+
+		self.element.on("touchstart", function(e){
+			clearTimeout(tapHold);
+
+			tapHold = setTimeout(function(){
+				clearTimeout(tapHold);
+				tapHold = null;
+				tap = false;
+				cellEvents.cellTapHold(e, self.getComponent());
+			}, 1000)
+
+		});
+
+		self.element.on("touchend", function(e){
+			clearTimeout(tapHold);
+			tapHold = null;
+		});
+	}
+
+	if(self.column.extensions.edit){
+		self.table.extensions.edit.bindEditor(self);
+	}
+
+	if(self.column.definition.rowHandle && self.table.options.movableRows !== false && self.table.extExists("moveRow")){
+		self.table.extensions.moveRow.initializeCell(self);
+	}
+
+	//hide cell if not visible
+	if(!self.column.visible){
+		self.hide();
+	}
+};
+
+//generate cell contents
+Cell.prototype._generateContents = function(){
+	var self = this;
+
+	if(self.table.extExists("format")){
+		self.element.html(self.table.extensions.format.formatValue(self));
+	}else{
+		self.element.html(self.value);
+	}
+};
+
+//generate tooltip text
+Cell.prototype._generateTooltip = function(){
+	var self = this;
+
+	var tooltip = self.column.tooltip;
+
+	if(tooltip){
+		if(tooltip === true){
+			tooltip = self.value;
+		}else if(typeof(tooltip) == "function"){
+			tooltip = tooltip(self.getComponent());
+		}
+
+		self.element[0].setAttribute("title", tooltip);
+	}else{
+		self.element[0].setAttribute("title", "");
+	}
+};
+
+
+//////////////////// Getters ////////////////////
+Cell.prototype.getElement = function(){
+	return this.element;
+};
+
+Cell.prototype.getValue = function(){
+	return this.value;
+};
+
+Cell.prototype.getOldValue = function(){
+	return this.oldValue;
+};
+
+//////////////////// Actions ////////////////////
+
+Cell.prototype.setValue = function(value, mutate){
+
+	var changed = this.setValueProcessData(value, mutate);
+
+	if(changed){
+		if(this.table.options.history && this.table.extExists("history")){
+			this.table.extensions.history.action("cellEdit", this, {oldValue:this.oldValue, newValue:this.value});
+		};
+
+		this.table.options.cellEdited(this.getComponent());
+		this.table.options.dataEdited(this.table.rowManager.getData());
+	}
+
+	if(this.table.extExists("columnCalcs")){
+		if(this.column.definition.topCalc || this.column.definition.bottomCalc){
+			if(this.table.options.groupBy && this.table.extExists("groupRows")){
+				this.table.extensions.columnCalcs.recalcRowGroup(this.row);
+			}else{
+				this.table.extensions.columnCalcs.recalc(this.table.rowManager.displayRows);
+			}
+		}
+	}
+
+};
+
+Cell.prototype.setValueProcessData = function(value, mutate){
+	var changed = false;
+
+	if(this.value != value){
+
+		changed = true;
+
+		if(mutate){
+			if(this.column.extensions.mutate && this.column.extensions.mutate.type !== "data"){
+				value = this.table.extensions.mutator.transformCell(this, value);
+			}
+		}
+	}
+
+	this.setValueActual(value);
+
+	return changed;
+}
+
+Cell.prototype.setValueActual = function(value){
+	this.oldValue = this.value;
+
+	this.value = value;
+
+	this.column.setFieldValue(this.row.data, value);
+
+	this._generateContents();
+	this._generateTooltip();
+
+	//set resizable handles
+	if(this.table.options.resizableColumns && this.table.extExists("resizeColumns")){
+		this.table.extensions.resizeColumns.initializeColumn("cell", this.column, this.element);
+	}
+
+	//handle frozen cells
+	if(this.table.extExists("frozenColumns")){
+		this.table.extensions.frozenColumns.layoutElement(this.element, this.column);
+	}
+};
+
+Cell.prototype.setWidth = function(width){
+	this.width = width;
+	// this.element.css("width", width || "");
+	this.element[0].style.width = (width ? width + "px" : "");
+};
+
+Cell.prototype.getWidth = function(){
+	return this.width || this.element.outerWidth();
+};
+
+Cell.prototype.setMinWidth = function(minWidth){
+	this.minWidth = minWidth;
+	this.element[0].style.minWidth =  (minWidth ? minWidth + "px" : "");
+};
+
+Cell.prototype.checkHeight = function(){
+	var height = this.element.css("height");
+
+	this.row.reinitializeHeight();
+};
+
+Cell.prototype.clearHeight = function(){
+	this.element[0].style.height = "";
+};
+
+
+Cell.prototype.setHeight = function(height){
+	this.height = height;
+	this.element[0].style.height = (height ? height + "px" : "");
+};
+
+Cell.prototype.getHeight = function(){
+	return this.height || this.element.outerHeight();
+};
+
+Cell.prototype.show = function(){
+	this.element[0].style.display = "";
+};
+
+Cell.prototype.hide = function(){
+	this.element[0].style.display = "none";
+};
+
+Cell.prototype.edit = function(){
+	this.element.focus();
+};
+
+Cell.prototype.delete = function(){
+	this.element.detach();
+	this.column.deleteCell(this);
+	this.row.deleteCell(this);
+};
+
+//////////////// Navigation /////////////////
+
+Cell.prototype.nav = function(){
+
+	var self = this,
+	nextCell = false,
+	index = this.row.getCellIndex(this);
+
+	return {
+		next:function(){
+
+			var nextCell = this.right(),
+			nextRow;
+
+			if(!nextCell){
+				nextRow = self.table.rowManager.nextDisplayRow(self.row);
+
+				if(nextRow){
+					nextCell = nextRow.findNextEditableCell(-1);
+
+					if(nextCell){
+						nextCell.edit();
+						return true;
+					}
+				}
+			}else{
+				return true;
+			}
+
+			return false;
+
+		},
+		prev:function(){
+			var nextCell = this.left(),
+			prevRow;
+
+			if(!nextCell){
+				prevRow = self.table.rowManager.prevDisplayRow(self.row);
+
+				if(prevRow){
+					nextCell = prevRow.findPrevEditableCell(prevRow.cells.length);
+
+					if(nextCell){
+						nextCell.edit();
+						return true;
+					}
+				}
+
+			}else{
+				return true;
+			}
+
+			return false;
+
+		},
+		left:function(){
+
+			nextCell = self.row.findPrevEditableCell(index);
+
+			if(nextCell){
+				nextCell.edit();
+				return true;
+			}else{
+				return false;
+			}
+
+		},
+		right:function(){
+			nextCell = self.row.findNextEditableCell(index);
+
+			if(nextCell){
+				nextCell.edit();
+				return true;
+			}else{
+				return false;
+			}
+		},
+		up:function(){
+			var nextRow = self.table.rowManager.prevDisplayRow(self.row);
+
+			if(nextRow){
+				nextRow.cells[index].edit();
+			}
+		},
+		down:function(){
+			var nextRow = self.table.rowManager.nextDisplayRow(self.row);
+
+			if(nextRow){
+				nextRow.cells[index].edit();
+			}
+		},
+
+	}
+
+};
+
+Cell.prototype.getIndex = function(){
+	this.row.getCellIndex(this);
+};
+
+//////////////// Object Generation /////////////////
+Cell.prototype.getComponent = function(){
+	return new CellComponent(this);
+};

js/tabulator/src/js/column.js

@@ -0,0 +1,896 @@
+
+//public column object
+var ColumnComponent = function (column){
+	this.column = column;
+	this.type = "ColumnComponent";
+};
+
+ColumnComponent.prototype.getElement = function(){
+	return this.column.getElement();
+};
+
+ColumnComponent.prototype.getDefinition = function(){
+	return this.column.getDefinition();
+};
+
+ColumnComponent.prototype.getField = function(){
+	return this.column.getField();
+};
+
+ColumnComponent.prototype.getCells = function(){
+	var cells = [];
+
+	this.column.cells.forEach(function(cell){
+		cells.push(cell.getComponent());
+	});
+
+	return cells;
+};
+
+ColumnComponent.prototype.getVisibility = function(){
+	return this.column.visible;
+};
+
+ColumnComponent.prototype.show = function(){
+	this.column.show();
+};
+
+ColumnComponent.prototype.hide = function(){
+	this.column.hide();
+};
+
+ColumnComponent.prototype.toggle = function(){
+	if(this.column.visible){
+		this.column.hide();
+	}else{
+		this.column.show();
+	}
+};
+
+ColumnComponent.prototype.delete = function(){
+	this.column.delete();
+};
+
+ColumnComponent.prototype._getSelf = function(){
+	return this.column;
+};
+
+
+var Column = function(def, parent){
+	var self = this;
+
+	this.table = parent.table;
+	this.definition = def; //column definition
+	this.parent = parent; //hold parent object
+	this.type = "column"; //type of element
+	this.columns = []; //child columns
+	this.cells = []; //cells bound to this column
+	this.element = $("<div class='tabulator-col' role='columnheader' aria-sort='none'></div>"); //column header element
+	this.contentElement = false;
+	this.groupElement = $("<div class='tabulator-col-group-cols'></div>"); //column group holder element
+	this.isGroup = false;
+	this.tooltip = false; //hold column tooltip
+	this.hozAlign = ""; //horizontal text alignment
+
+	//multi dimentional filed handling
+	this.field ="";
+	this.fieldStructure = "";
+	this.getFieldValue = "";
+	this.setFieldValue = "";
+
+	this.setField(this.definition.field);
+
+
+	this.extensions = {}; //hold extension variables;
+
+	this.cellEvents = {
+		cellClick:false,
+		cellDblClick:false,
+		cellContext:false,
+		cellTap:false,
+		cellDblTap:false,
+		cellTapHold:false
+	};
+
+	this.width = null; //column width
+	this.minWidth = null; //column minimum width
+	this.widthFixed = false; //user has specified a width for this column
+
+	this.visible = true; //default visible state
+
+	//initialize column
+	if(def.columns){
+
+		this.isGroup = true;
+
+		def.columns.forEach(function(def, i){
+			var newCol = new Column(def, self);
+			self.attachColumn(newCol);
+		});
+
+		self.checkColumnVisibility();
+	}else{
+		parent.registerColumnField(this);
+	}
+
+	if(def.rowHandle && this.table.options.movableRows !== false && this.table.extExists("moveRow")){
+		this.table.extensions.moveRow.setHandle(true);
+	}
+
+	this._mapDepricatedFunctionality()
+
+	this._buildHeader();
+};
+
+
+//////////////// Setup Functions /////////////////
+Column.prototype._mapDepricatedFunctionality = function(field){
+	if(this.definition.tooltipHeader){
+		console.warn("The%c tooltipHeader%c column definition property has been depricated and will be removed in version 4.0, use %c headerTooltio%c instead.", "font-weight:bold;", "font-weight:regular;", "font-weight:bold;", "font-weight:regular;");
+
+		if(typeof this.definition.headerTooltip == "undefined"){
+			this.definition.headerTooltip = this.definition.tooltipHeader;
+		}
+	}
+};
+
+Column.prototype.setField = function(field){
+	this.field = field;
+	this.fieldStructure = field ? field.split(".") : [];
+	this.getFieldValue = this.fieldStructure.length > 1 ? this._getNestedData : this._getFlatData;
+	this.setFieldValue = this.fieldStructure.length > 1 ? this._setNesteData : this._setFlatData;
+};
+
+//register column position with column manager
+Column.prototype.registerColumnPosition = function(column){
+	this.parent.registerColumnPosition(column);
+};
+
+//register column position with column manager
+Column.prototype.registerColumnField = function(column){
+	this.parent.registerColumnField(column);
+};
+
+//trigger position registration
+Column.prototype.reRegisterPosition = function(){
+	if(this.isGroup){
+		this.columns.forEach(function(column){
+			column.reRegisterPosition();
+		});
+	}else{
+		this.registerColumnPosition(this);
+	}
+};
+
+//build header element
+Column.prototype._buildHeader = function(){
+	var self = this,
+	def = self.definition,
+	dblTap,	tapHold, tap;
+
+	self.element.empty();
+
+	self.contentElement = self._buildColumnHeaderContent();
+
+	self.element.append(self.contentElement);
+
+	if(self.isGroup){
+		self._buildGroupHeader();
+	}else{
+		self._buildColumnHeader();
+	}
+
+	//set header tooltips
+	var tooltip = def.headerTooltip || def.tooltip === false  ? def.headerTooltip : self.table.options.tooltipsHeader;
+
+	if(tooltip){
+		if(tooltip === true){
+			if(def.field){
+				self.table.extensions.localize.bind("columns." + def.field, function(value){
+					self.element.attr("title", value || def.title);
+				});
+			}else{
+				self.element.attr("title", def.title);
+			}
+
+		}else{
+			if(typeof(tooltip) == "function"){
+				tooltip = tooltip(self.getComponent());
+			}
+
+			self.element.attr("title", tooltip);
+		}
+
+	}else{
+		self.element.attr("title", "");
+	}
+
+
+
+	//set resizable handles
+	if(self.table.options.resizableColumns && self.table.extExists("resizeColumns")){
+		self.table.extensions.resizeColumns.initializeColumn("header", self, self.element);
+	}
+
+	//set resizable handles
+	if(def.headerFilter && self.table.extExists("filter") && self.table.extExists("edit")){
+		if(typeof def.headerFilterPlaceholder !== "undefined" && def.field){
+			self.table.extensions.localize.setHeaderFilterColumnPlaceholder(def.field, def.headerFilterPlaceholder);
+		}
+
+		self.table.extensions.filter.initializeColumn(self);
+	}
+
+
+	//set resizable handles
+	if(self.table.extExists("frozenColumns")){
+		self.table.extensions.frozenColumns.initializeColumn(self);
+	}
+
+	//set movable column
+	if(self.table.options.movableColumns && !self.isGroup && self.table.extExists("moveColumn")){
+		self.table.extensions.moveColumn.initializeColumn(self);
+	}
+
+	//set calcs column
+	if((def.topCalc || def.bottomCalc) && self.table.extExists("columnCalcs")){
+		self.table.extensions.columnCalcs.initializeColumn(self);
+	}
+
+
+	//setup header click event bindings
+	if(typeof(def.headerClick) == "function"){
+		self.element.on("click", function(e){def.headerClick(e, self.getComponent())})
+	}
+
+	if(typeof(def.headerDblClick) == "function"){
+		self.element.on("dblclick", function(e){def.headerDblClick(e, self.getComponent())});
+	}
+
+	if(typeof(def.headerContext) == "function"){
+		self.element.on("contextmenu", function(e){def.headerContext(e, self.getComponent())});
+	}
+
+	//setup header tap event bindings
+	if(typeof(def.headerTap) == "function"){
+		tap = false;
+
+		self.element.on("touchstart", function(e){
+			tap = true;
+		});
+
+		self.element.on("touchend", function(e){
+			if(tap){
+				def.headerTap(e, self.getComponent());
+			}
+
+			tap = false;
+		});
+	}
+
+	if(typeof(def.headerDblTap) == "function"){
+		dblTap = null;
+
+		self.element.on("touchend", function(e){
+
+			if(dblTap){
+				clearTimeout(dblTap);
+				dblTap = null;
+
+				def.headerDblTap(e, self.getComponent());
+			}else{
+
+				dblTap = setTimeout(function(){
+					clearTimeout(dblTap);
+					dblTap = null;
+				}, 300);
+			}
+
+		});
+	}
+
+	if(typeof(def.headerTapHold) == "function"){
+		tapHold = null;
+
+		self.element.on("touchstart", function(e){
+			clearTimeout(tapHold);
+
+			tapHold = setTimeout(function(){
+				clearTimeout(tapHold);
+				tapHold = null;
+				tap = false;
+				def.headerTapHold(e, self.getComponent());
+			}, 1000)
+
+		});
+
+		self.element.on("touchend", function(e){
+			clearTimeout(tapHold);
+			tapHold = null;
+		});
+	}
+
+	//store column cell click event bindings
+	if(typeof(def.cellClick) == "function"){
+		self.cellEvents.cellClick = def.cellClick;
+	}
+
+	if(typeof(def.cellDblClick) == "function"){
+		self.cellEvents.cellDblClick = def.cellDblClick;
+	}
+
+	if(typeof(def.cellContext) == "function"){
+		self.cellEvents.cellContext = def.cellContext;
+	}
+
+	//setup column cell tap event bindings
+	if(typeof(def.cellTap) == "function"){
+		self.cellEvents.cellTap = def.cellTap;
+	}
+
+	if(typeof(def.cellDblTap) == "function"){
+		self.cellEvents.cellDblTap = def.cellDblTap;
+	}
+
+	if(typeof(def.cellTapHold) == "function"){
+		self.cellEvents.cellTapHold = def.cellTapHold;
+	}
+};
+
+//build header element for header
+Column.prototype._buildColumnHeader = function(){
+	var self = this,
+	def = self.definition,
+	table = self.table,
+	sortable;
+
+	//set column sorter
+	if(table.extExists("sort")){
+		table.extensions.sort.initializeColumn(self, self.contentElement);
+	}
+
+	//set column formatter
+	if(table.extExists("format")){
+		table.extensions.format.initializeColumn(self);
+	}
+
+	//set column editor
+	if(typeof def.editor != "undefined" && table.extExists("edit")){
+		table.extensions.edit.initializeColumn(self);
+	}
+
+	//set colum validator
+	if(typeof def.validator != "undefined" && table.extExists("validate")){
+		table.extensions.validate.initializeColumn(self);
+	}
+
+
+	//set column mutator
+	if(typeof def.mutator != "undefined" && table.extExists("mutator")){
+		table.extensions.mutator.initializeColumn(self);
+	}
+
+	//set column accessor
+	if(typeof def.accessor != "undefined" && table.extExists("accessor")){
+		table.extensions.accessor.initializeColumn(self);
+	}
+
+	//set column visibility
+	if(typeof def.visible != "undefined"){
+		if(def.visible){
+			self.show();
+		}else{
+			self.hide();
+		}
+	}
+
+	//asign additional css classes to column header
+	if(def.cssClass){
+		self.element.addClass(def.cssClass);
+	}
+
+	//set min width if present
+	self.setMinWidth(typeof def.minWidth == "undefined" ? self.table.options.columnMinWidth : def.minWidth);
+
+	self.reinitializeWidth();
+
+	//set tooltip if present
+	self.tooltip = self.definition.tooltip || self.definition.tooltip === false ? self.definition.tooltip : self.table.options.tooltips;
+
+	//set orizontal text alignment
+	self.hozAlign = typeof(self.definition.align) == "undefined" ? "" : self.definition.align;
+};
+
+Column.prototype._buildColumnHeaderContent = function(){
+	var self = this,
+	def = self.definition,
+	table = self.table;
+
+	var contentElement = $("<div class='tabulator-col-content'></div>");
+
+	contentElement.append(self._buildColumnHeaderTitle());
+
+	return contentElement;
+};
+
+//build title element of column
+Column.prototype._buildColumnHeaderTitle = function(){
+	var self = this,
+	def = self.definition,
+	table = self.table,
+	title;
+
+	var titleHolderElement = $("<div class='tabulator-col-title'></div>");
+
+	if(def.editableTitle){
+		var titleElement = $("<input class='tabulator-title-editor'>");
+
+		titleElement.on("click", function(e){
+			e.stopPropagation();
+			$(this).focus();
+		});
+
+		titleElement.on("change", function(){
+			var newTitle = $(this).val();
+			def.title = newTitle;
+			table.options.columnTitleChanged(self.getComponent());
+		});
+
+		titleHolderElement.append(titleElement);
+
+		if(def.field){
+			table.extensions.localize.bind("columns." + def.field, function(text){
+				titleElement.val(text || (def.title || "&nbsp"));
+			});
+		}else{
+			titleElement.val(def.title || "&nbsp");
+		}
+
+	}else{
+		if(def.field){
+			table.extensions.localize.bind("columns." + def.field, function(text){
+				self._formatColumnHeaderTitle(titleHolderElement, text || (def.title || "&nbsp"));
+			});
+		}else{
+			self._formatColumnHeaderTitle(titleHolderElement, def.title || "&nbsp");
+		}
+	}
+
+	return titleHolderElement;
+};
+
+Column.prototype._formatColumnHeaderTitle = function(el, title){
+	var formatter, contents;
+
+	if(this.definition.titleFormatter && this.table.extExists("format")){
+
+		formatter = this.table.extensions.format.getFormatter(this.definition.titleFormatter);
+
+		contents = formatter.call(this.table.extensions.format, {
+			getValue:function(){
+				return title;
+			},
+			getElement:function(){
+				return el;
+			}
+		}, this.definition.titleFormatterParams || {});
+
+		el.append(contents);
+	}else{
+		el.html(title);
+	}
+};
+
+
+//build header element for column group
+Column.prototype._buildGroupHeader = function(){
+	var self = this,
+	def = self.definition,
+	table = self.table;
+
+	self.element.addClass("tabulator-col-group")
+	.attr("role", "columngroup")
+	.attr("aria-title", def.title);
+
+	self.element.append(self.groupElement);
+};
+
+//flat field lookup
+Column.prototype._getFlatData = function(data){
+	return data[this.field];
+};
+
+//nested field lookup
+Column.prototype._getNestedData = function(data){
+	var dataObj = data,
+	structure = this.fieldStructure,
+	length = structure.length,
+	output;
+
+	for(let i = 0; i < length; i++){
+
+		dataObj = dataObj[structure[i]];
+
+		output = dataObj;
+
+		if(!dataObj){
+			break;
+		}
+	}
+
+	return output;
+};
+
+//flat field set
+Column.prototype._setFlatData = function(data, value){
+	data[this.field] = value;
+};
+
+//nested field set
+Column.prototype._setNesteData = function(data, value){
+	var dataObj = data,
+	structure = this.fieldStructure,
+	length = structure.length;
+
+	for(let i = 0; i < length; i++){
+
+		if(i == length -1){
+			dataObj[structure[i]] = value;
+		}else{
+			if(!dataObj[structure[i]]){
+				dataObj[structure[i]] = {};
+			}
+
+			dataObj = dataObj[structure[i]];
+		}
+	}
+};
+
+
+//attach column to this group
+Column.prototype.attachColumn = function(column){
+	var self = this;
+
+	if(self.groupElement){
+		self.columns.push(column);
+		self.groupElement.append(column.getElement());
+	}else{
+		console.warn("Column Warning - Column being attached to another column instead of column group");
+	}
+};
+
+//vertically align header in column
+Column.prototype.verticalAlign = function(alignment){
+
+	if(this.parent.isGroup){
+		this.element.css("height", this.parent.getGroupElement().innerHeight())
+	}else{
+		this.element.css("height", this.parent.getHeadersElement().innerHeight())
+	}
+
+	//vertically align cell contents
+	if(!this.isGroup && alignment !== "top"){
+		if(alignment === "bottom"){
+			this.element.css({"padding-top": this.element.innerHeight() - this.contentElement.outerHeight()});
+		}else{
+			this.element.css({"padding-top": (this.element.innerHeight() - this.contentElement.outerHeight()) / 2 });
+		}
+	}
+
+	this.columns.forEach(function(column){
+		column.verticalAlign(alignment);
+	});
+};
+
+//clear vertical alignmenet
+Column.prototype.clearVerticalAlign = function(){
+	this.element.css("padding-top","");
+	this.element.css("height","");
+
+	this.columns.forEach(function(column){
+		column.clearVerticalAlign();
+	});
+};
+
+//// Retreive Column Information ////
+
+//return column header element
+Column.prototype.getElement = function(){
+	return this.element;
+};
+
+//return colunm group element
+Column.prototype.getGroupElement = function(){
+	return this.groupElement;
+};
+
+//return field name
+Column.prototype.getField = function(){
+	return this.field;
+};
+
+//return the first column in a group
+Column.prototype.getFirstColumn = function(){
+	if(!this.isGroup){
+		return this;
+	}else{
+		if(this.columns.length){
+			return this.columns[0].getFirstColumn();
+		}else{
+			return false;
+		}
+	}
+};
+
+//return the last column in a group
+Column.prototype.getLastColumn = function(){
+	if(!this.isGroup){
+		return this;
+	}else{
+		if(this.columns.length){
+			return this.columns[this.columns.length -1].getLastColumn();
+		}else{
+			return false;
+		}
+	}
+};
+
+//return all columns in a group
+Column.prototype.getColumns = function(){
+	return this.columns;
+};
+
+//return all columns in a group
+Column.prototype.getCells = function(){
+	return this.cells;
+};
+
+//retreive the top column in a group of columns
+Column.prototype.getTopColumn = function(){
+	if(this.parent.isGroup){
+		return this.parent.getTopColumn();
+	}else{
+		return this;
+	}
+};
+
+//return column definition object
+Column.prototype.getDefinition = function(updateBranches){
+	var colDefs = [];
+
+	if(this.isGroup && updateBranches){
+		this.columns.forEach(function(column){
+			colDefs.push(column.getDefinition(true));
+		});
+
+		this.definition.columns = colDefs;
+	}
+
+	return this.definition;
+};
+
+//////////////////// Actions ////////////////////
+
+Column.prototype.checkColumnVisibility = function(){
+	var visible = false;
+
+	this.columns.forEach(function(column){
+		if(column.visible){
+			visible = true;
+		}
+	});
+
+	if(visible){
+		this.show()
+		this.parent.table.options.columnVisibilityChanged(this.getComponent(), false);
+	}else{
+		this.hide();
+	}
+
+};
+
+//show column
+Column.prototype.show = function(){
+	if(!this.visible){
+		this.visible = true;
+
+		this.element.show();
+		this.table.columnManager._verticalAlignHeaders();
+
+		if(this.parent.isGroup){
+			this.parent.checkColumnVisibility();
+		}
+
+		this.cells.forEach(function(cell){
+			cell.show();
+		});
+
+		if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
+			this.table.extensions.persistentLayout.save();
+		}
+
+		this.table.options.groupVisibilityChanged(this.getComponent(), true);
+	}
+};
+
+//hide column
+Column.prototype.hide = function(){
+	if(this.visible){
+		this.visible = false;
+
+		this.element.hide();
+		this.table.columnManager._verticalAlignHeaders();
+
+		if(this.parent.isGroup){
+			this.parent.checkColumnVisibility();
+		}
+
+		this.cells.forEach(function(cell){
+			cell.hide();
+		});
+
+		if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
+			this.table.extensions.persistentLayout.save();
+		}
+
+		this.table.options.groupVisibilityChanged(this.getComponent(), false);
+	}
+};
+
+Column.prototype.setWidth = function(width){
+	this.widthFixed = true;
+	this.setWidthActual(width);
+};
+
+Column.prototype.setWidthActual = function(width){
+	if(isNaN(width)){
+		width = Math.floor((this.table.element.innerWidth()/100) * parseInt(width));
+	}
+
+	width = Math.max(this.minWidth, width);
+
+	this.width = width;
+
+	if(!this.isGroup){
+		this.element.css("width", width || "");
+
+		this.cells.forEach(function(cell){
+			cell.setWidth(width);
+		});
+	}
+
+	//set resizable handles
+	if(this.table.extExists("frozenColumns")){
+		this.table.extensions.frozenColumns.layout();
+	}
+};
+
+
+Column.prototype.checkCellHeights = function(){
+	var rows = [];
+
+	this.cells.forEach(function(cell){
+		if(cell.row.heightInitialized){
+			if(cell.row.element[0].offsetParent !== null){
+				rows.push(cell.row);
+				cell.row.clearCellHeight();
+			}else{
+				cell.row.heightInitialized = false;
+			}
+		}
+	});
+
+	rows.forEach(function(row){
+		row.calcHeight();
+	})
+
+	rows.forEach(function(row){
+		row.setCellHeight();
+	})
+};
+
+Column.prototype.getWidth = function(){
+	return this.element.outerWidth();
+};
+
+Column.prototype.getHeight = function(){
+	return this.element.outerHeight();
+};
+
+Column.prototype.setMinWidth = function(minWidth){
+	this.minWidth = minWidth;
+
+	this.element.css("min-width", minWidth || "");
+
+	this.cells.forEach(function(cell){
+		cell.setMinWidth(minWidth);
+	});
+};
+
+Column.prototype.delete = function(){
+	if(this.isGroup){
+		this.columns.forEach(function(column){
+			column.delete();
+		});
+	}
+
+	var cellCount = this.cells.length;
+
+	for(let i = 0; i < cellCount; i++){
+		this.cells[0].delete();
+	}
+
+	this.element.detach();
+
+	this.table.columnManager.deregisterColumn(this);
+};
+
+//////////////// Cell Management /////////////////
+
+//generate cell for this column
+Column.prototype.generateCell = function(row){
+	var self = this;
+
+	var cell = new Cell(self, row);
+
+	this.cells.push(cell);
+
+	return cell;
+};
+
+Column.prototype.reinitializeWidth = function(){
+
+	this.widthFixed = false;
+
+	//set width if present
+	if(typeof this.definition.width !== "undefined"){
+		this.setWidth(this.definition.width);
+	}
+
+	this.fitToData();
+}
+
+//set column width to maximum cell width
+Column.prototype.fitToData = function(){
+	var self = this;
+
+	if(!this.widthFixed){
+		this.element.css("width", "")
+
+		self.cells.forEach(function(cell){
+			cell.setWidth("");
+		});
+	}
+
+	var maxWidth = this.element.outerWidth();
+
+	if(!self.width || !this.widthFixed){
+		self.cells.forEach(function(cell){
+			var width = cell.getWidth();
+
+			if(width > maxWidth){
+				maxWidth = width;
+			}
+		});
+
+		if(maxWidth){
+			self.setWidthActual(maxWidth + 1);
+		}
+
+	}
+};
+
+Column.prototype.deleteCell = function(cell){
+	var index = this.cells.indexOf(cell);
+
+	if(index > -1){
+		this.cells.splice(index, 1);
+	}
+};
+
+//////////////// Event Bindings /////////////////
+
+//////////////// Object Generation /////////////////
+Column.prototype.getComponent = function(){
+	return new ColumnComponent(this);
+};

js/tabulator/src/js/column_manager.js

@@ -0,0 +1,462 @@
+var ColumnManager = function(table){
+	this.table = table; //hold parent table
+	this.headersElement = $("<div class='tabulator-headers'></div>");
+	this.element = $("<div class='tabulator-header'></div>"); //containing element
+	this.rowManager = null; //hold row manager object
+	this.columns = []; // column definition object
+	this.columnsByIndex = []; //columns by index
+	this.columnsByField = []; //columns by field
+	this.scrollLeft = 0;
+
+	this.element.prepend(this.headersElement);
+};
+
+
+////////////// Setup Functions /////////////////
+
+//link to row manager
+ColumnManager.prototype.setRowManager = function(manager){
+	this.rowManager = manager;
+};
+
+//return containing element
+ColumnManager.prototype.getElement = function(){
+	return this.element;
+};
+
+//return header containing element
+ColumnManager.prototype.getHeadersElement = function(){
+	return this.headersElement;
+};
+
+//scroll horizontally to match table body
+ColumnManager.prototype.scrollHorizontal = function(left){
+	var hozAdjust = 0,
+	scrollWidth = this.element[0].scrollWidth - this.table.element.innerWidth();
+
+	this.element.scrollLeft(left);
+
+	//adjust for vertical scrollbar moving table when present
+	if(left > scrollWidth){
+		hozAdjust = left - scrollWidth
+		this.element.css("margin-left", -(hozAdjust));
+	}else{
+		this.element.css("margin-left", 0);
+	}
+
+	//keep frozen columns fixed in position
+	//this._calcFrozenColumnsPos(hozAdjust + 3);
+
+	this.scrollLeft = left;
+
+	if(this.table.extExists("frozenColumns")){
+		this.table.extensions.frozenColumns.layout();
+	}
+};
+
+
+///////////// Column Setup Functions /////////////
+
+ColumnManager.prototype.setColumns = function(cols, row){
+	var self = this;
+
+	self.headersElement.empty();
+
+	self.columns = [];
+	self.columnsByIndex = [];
+	self.columnsByField = [];
+
+
+	//reset frozen columns
+	if(self.table.extExists("frozenColumns")){
+		self.table.extensions.frozenColumns.reset();
+	}
+
+	cols.forEach(function(def, i){
+		self._addColumn(def);
+	});
+
+	self._reIndexColumns();
+
+	if(self.table.options.responsiveLayout && self.table.extExists("responsiveLayout", true)){
+		self.table.extensions.responsiveLayout.initialize();
+	}
+
+	self.redraw(true);
+};
+
+ColumnManager.prototype._addColumn = function(definition, before, nextToColumn){
+	var column = new Column(definition, this);
+	var index = nextToColumn ? this.findColumnIndex(nextToColumn) : nextToColumn;
+
+	if(nextToColumn && index > -1){
+
+		let parentIndex = this.columns.indexOf(nextToColumn.getTopColumn());
+
+		if(before){
+			this.columns.splice(parentIndex, 0, column);
+			nextToColumn.getElement().before(column.getElement());
+		}else{
+			this.columns.splice(parentIndex + 1, 0, column);
+			nextToColumn.getElement().after(column.getElement());
+		}
+
+	}else{
+		if(before){
+			this.columns.unshift(column);
+			this.headersElement.prepend(column.getElement());
+		}else{
+			this.columns.push(column);
+			this.headersElement.append(column.getElement());
+		}
+	}
+
+	return column;
+};
+
+ColumnManager.prototype.registerColumnField = function(col){
+	if(col.definition.field){
+		this.columnsByField[col.definition.field] = col;
+	}
+};
+
+ColumnManager.prototype.registerColumnPosition = function(col){
+	this.columnsByIndex.push(col);
+};
+
+ColumnManager.prototype._reIndexColumns = function(){
+	this.columnsByIndex = [];
+
+	this.columns.forEach(function(column){
+		column.reRegisterPosition();
+	});
+};
+
+//ensure column headers take up the correct amount of space in column groups
+ColumnManager.prototype._verticalAlignHeaders = function(){
+	var self = this;
+
+	self.columns.forEach(function(column){
+		column.clearVerticalAlign();
+	});
+
+	self.columns.forEach(function(column){
+		column.verticalAlign(self.table.options.columnVertAlign);
+	});
+
+	self.rowManager.adjustTableSize();
+};
+
+//////////////// Column Details /////////////////
+
+ColumnManager.prototype.findColumn = function(subject){
+	var self = this;
+
+	if(typeof subject == "object"){
+
+		if(subject instanceof Column){
+			//subject is column element
+			return subject;
+		}else if(subject instanceof ColumnComponent){
+			//subject is public column component
+			return subject._getSelf() || false;
+		}else if(subject instanceof jQuery){
+			//subject is a jquery element of the column header
+			let match = self.columns.find(function(column){
+				return column.element === subject;
+			});
+
+			return match || false;
+		}
+
+	}else{
+		//subject should be treated as the field name of the column
+		return this.columnsByField[subject] || false;
+	}
+
+	//catch all for any other type of input
+
+	return false;
+};
+
+ColumnManager.prototype.getColumnByField = function(field){
+	return this.columnsByField[field];
+};
+
+ColumnManager.prototype.getColumnByIndex = function(index){
+	return this.columnsByIndex[index];
+};
+
+ColumnManager.prototype.getColumns = function(){
+	return this.columns;
+};
+
+ColumnManager.prototype.findColumnIndex = function(column){
+	return this.columnsByIndex.findIndex(function(col){
+		return column === col;
+	});
+};
+
+//return all columns that are not groups
+ColumnManager.prototype.getRealColumns = function(){
+	return this.columnsByIndex;
+};
+
+//travers across columns and call action
+ColumnManager.prototype.traverse = function(callback){
+	var self = this;
+
+	self.columnsByIndex.forEach(function(column,i){
+		callback(column, i);
+	});
+};
+
+//get defintions of actual columns
+ColumnManager.prototype.getDefinitions = function(active){
+	var self = this,
+	output = [];
+
+	self.columnsByIndex.forEach(function(column){
+		if(!active || (active && column.visible)){
+			output.push(column.getDefinition());
+		}
+	});
+
+	return output;
+};
+
+//get full nested definition tree
+ColumnManager.prototype.getDefinitionTree = function(){
+	var self = this,
+	output = [];
+
+	self.columns.forEach(function(column){
+		output.push(column.getDefinition(true));
+	});
+
+	return output;
+};
+
+ColumnManager.prototype.getComponents = function(){
+	var self = this,
+	output = [];
+
+	self.columnsByIndex.forEach(function(column){
+		output.push(column.getComponent());
+	});
+
+	return output;
+};
+
+ColumnManager.prototype.getWidth = function(){
+	var width = 0;
+
+	this.columnsByIndex.forEach(function(column){
+		if(column.visible){
+			width += column.getWidth();
+		}
+	});
+
+	return width;
+};
+
+ColumnManager.prototype.moveColumn = function(from, to, after){
+
+	this._moveColumnInArray(this.columns, from, to, after);
+	this._moveColumnInArray(this.columnsByIndex, from, to, after, true);
+
+	this.table.options.columnMoved(from.getComponent());
+
+	if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
+		this.table.extensions.persistentLayout.save();
+	}
+};
+
+ColumnManager.prototype._moveColumnInArray = function(columns, from, to, after, updateRows){
+	var	fromIndex = columns.indexOf(from),
+	toIndex;
+
+	if (fromIndex > -1) {
+
+		columns.splice(fromIndex, 1);
+
+		toIndex = columns.indexOf(to);
+
+		if (toIndex > -1) {
+
+			if(after){
+				toIndex = toIndex+1;
+			}
+
+		}else{
+			toIndex = fromIndex;
+		}
+
+		columns.splice(toIndex, 0, from);
+
+		if(updateRows){
+
+			this.table.rowManager.rows.forEach(function(row){
+				if(row.cells.length){
+					var cell = row.cells.splice(fromIndex, 1)[0];
+					row.cells.splice(toIndex, 0, cell);
+				}
+			});
+		}
+	}
+};
+
+//////////////// Cell Management /////////////////
+
+ColumnManager.prototype.generateCells = function(row){
+	var self = this;
+
+	var cells = [];
+
+	self.columnsByIndex.forEach(function(column){
+		cells.push(column.generateCell(row));
+	});
+
+	return cells;
+};
+
+//////////////// Column Management /////////////////
+
+
+ColumnManager.prototype.getFlexBaseWidth = function(){
+	var self = this,
+	totalWidth = self.table.element.innerWidth(), //table element width
+	fixedWidth = 0;
+
+	//adjust for vertical scrollbar if present
+	if(self.rowManager.element[0].scrollHeight > self.rowManager.element.innerHeight()){
+		totalWidth -= self.rowManager.element[0].offsetWidth - self.rowManager.element[0].clientWidth;
+	}
+
+	this.columnsByIndex.forEach(function(column){
+		var width, minWidth, colWidth;
+
+		if(column.visible){
+
+			width = column.definition.width || 0;
+
+			minWidth = typeof column.minWidth == "undefined" ? self.table.options.columnMinWidth : parseInt(column.minWidth);
+
+			if(typeof(width) == "string"){
+				if(width.indexOf("%") > -1){
+					colWidth = (totalWidth / 100) * parseInt(width) ;
+				}else{
+					colWidth = parseInt(width);
+				}
+			}else{
+				colWidth = width;
+			}
+
+			fixedWidth += colWidth > minWidth ? colWidth : minWidth;
+
+		}
+	});
+
+	return fixedWidth;
+};
+
+ColumnManager.prototype.addColumn = function(definition, before, nextToColumn){
+	var column = this._addColumn(definition, before, nextToColumn);
+
+	this._reIndexColumns();
+
+	if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
+		this.table.extensions.responsiveLayout.initialize();
+	}
+
+	if(this.table.extExists("columnCalcs")){
+		this.table.extensions.columnCalcs.recalc(this.table.rowManager.displayRows);
+	}
+
+	this.redraw();
+
+	if(this.table.extensions.layout.getMode() != "fitColumns"){
+		column.reinitializeWidth();
+	}
+
+	this._verticalAlignHeaders();
+
+	this.table.rowManager.reinitialize();
+};
+
+//remove column from system
+ColumnManager.prototype.deregisterColumn = function(column){
+	var field = column.getField(),
+	index;
+
+	//remove from field list
+	if(field){
+		delete this.columnsByField[field];
+	}
+
+	//remove from index list
+	index = this.columnsByIndex.indexOf(column);
+
+	if(index > -1){
+		this.columnsByIndex.splice(index, 1);
+	}
+
+	//remove from column list
+	index = this.columns.indexOf(column);
+
+	if(index > -1){
+		this.columns.splice(index, 1);
+	}
+
+	if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
+		this.table.extensions.responsiveLayout.initialize();
+	}
+
+	this.redraw();
+};
+
+//redraw columns
+ColumnManager.prototype.redraw = function(force){
+	if(force){
+		if(this.element.is(":visible")){
+			this._verticalAlignHeaders();
+		}
+		this.table.rowManager.resetScroll();
+		this.table.rowManager.reinitialize();
+	}
+
+	if(this.table.extensions.layout.getMode() == "fitColumns"){
+		this.table.extensions.layout.layout();
+	}else{
+		if(force){
+			this.table.extensions.layout.layout();
+		}else{
+			if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
+				this.table.extensions.responsiveLayout.update();
+			}
+		}
+	}
+
+	if(this.table.extExists("frozenColumns")){
+		this.table.extensions.frozenColumns.layout();
+	}
+
+	if(this.table.extExists("columnCalcs")){
+		this.table.extensions.columnCalcs.recalc(this.table.rowManager.displayRows);
+	}
+
+	if(force){
+		if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
+			this.table.extensions.persistentLayout.save();
+		}
+
+		if(this.table.extExists("columnCalcs")){
+			this.table.extensions.columnCalcs.redraw();
+		}
+	}
+
+	this.table.footerManager.redraw();
+
+
+
+};

js/tabulator/src/js/extensions/accessor.js

@@ -0,0 +1,58 @@
+var Accessor = function(table){
+	this.table = table; //hold Tabulator object
+};
+
+
+//initialize column accessor
+Accessor.prototype.initializeColumn = function(column){
+
+	var config = {accessor:false, params:column.definition.accessorParams || {}};
+
+	//set column accessor
+	switch(typeof column.definition.accessor){
+		case "string":
+		if(this.accessors[column.definition.accessor]){
+			config.accessor = this.accessors[column.definition.accessor]
+		}else{
+			console.warn("Accessor Error - No such accessor found, ignoring: ", column.definition.accessor);
+		}
+		break;
+
+		case "function":
+		config.accessor = column.definition.accessor;
+		break;
+	}
+
+	if(config.accessor){
+		column.extensions.accessor = config;
+	}
+},
+
+//apply accessor to row
+Accessor.prototype.transformRow = function(dataIn){
+	var self = this;
+
+	//clone data object with deep copy to isolate internal data from returned result
+	var data = $.extend(true, {}, dataIn || {});
+
+	self.table.columnManager.traverse(function(column){
+		var field;
+
+		if(column.extensions.accessor){
+			field = column.getField();
+
+			if(typeof data[field] != "undefined"){
+				column.setFieldValue(data, column.extensions.accessor.accessor(column.getFieldValue(data), data, column.extensions.accessor.params));
+			}
+		}
+	});
+
+	return data;
+},
+
+//default accessors
+Accessor.prototype.accessors = {};
+
+
+
+Tabulator.registerExtension("accessor", Accessor);

js/tabulator/src/js/extensions/ajax.js

@@ -0,0 +1,187 @@
+var Ajax = function(table){
+
+	this.table = table; //hold Tabulator object
+	this.config = false; //hold config object for ajax request
+	this.url = ""; //request URL
+	this.params = false; //request parameters
+
+	this.loaderElement = $("<div class='tablulator-loader'></div>"); //loader message div
+	this.msgElement = $("<div class='tabulator-loader-msg' role='alert'></div>"); //message element
+	this.loadingElement = false;
+	this.errorElement = false;
+};
+
+//initialize setup options
+Ajax.prototype.initialize = function(){
+	this.loaderElement.append(this.msgElement);
+
+	if(this.table.options.ajaxLoaderLoading){
+		this.loadingElement = this.table.options.ajaxLoaderLoading;
+	}
+
+	if(this.table.options.ajaxLoaderError){
+		this.errorElement = this.table.options.ajaxLoaderError;
+	}
+
+	if(this.table.options.ajaxParams){
+		this.setParams(this.table.options.ajaxParams);
+	}
+
+	if(this.table.options.ajaxConfig){
+		this.setConfig(this.table.options.ajaxConfig);
+	}
+
+	if(this.table.options.ajaxURL){
+		this.setUrl(this.table.options.ajaxURL);
+	}
+
+};
+
+//set ajax params
+Ajax.prototype.setParams = function(params, update){
+	if(update){
+		this.params = this.params || {};
+
+		for(let key in params){
+			this.params[key] = params[key];
+		}
+	}else{
+		this.params = params;
+	}
+};
+
+Ajax.prototype.getParams = function(){
+	return this.params || {};
+};
+
+//load config object
+Ajax.prototype.setConfig = function(config){
+	this._loadDefaultConfig();
+
+	if(typeof config == "string"){
+		this.config.type = config;
+	}else{
+		for(let key in config){
+			this.config[key] = config[key];
+		}
+	}
+};
+
+//create config object from default
+Ajax.prototype._loadDefaultConfig = function(force){
+	var self = this;
+	if(!self.config || force){
+
+		self.config = {};
+
+		//load base config from defaults
+		for(let key in self.defaultConfig){
+			self.config[key] = self.defaultConfig[key];
+		}
+	}
+};
+
+//set request url
+Ajax.prototype.setUrl = function(url){
+	this.url = url;
+};
+
+//get request url
+Ajax.prototype.getUrl = function(){
+	return this.url;
+};
+
+//send ajax request
+Ajax.prototype.sendRequest = function(callback){
+	var self = this;
+
+	if(self.url){
+
+		self._loadDefaultConfig();
+
+		self.config.url = self.url;
+
+		if(self.params){
+			self.config.data = self.params;
+		}
+
+		if(self.table.options.ajaxRequesting(self.url, self.params) !== false){
+
+			self.showLoader();
+
+			$.ajax(self.config)
+			.done(function(data){
+				if(self.table.options.ajaxResponse){
+					data = self.table.options.ajaxResponse(self.url, self.params, data);
+				}
+
+				self.table.options.dataLoaded(data);
+
+				callback(data);
+
+				self.hideLoader();
+			})
+			.fail(function(xhr, textStatus, errorThrown){
+				console.error("Ajax Load Error - Connection Error: " + xhr.status, errorThrown);
+
+				self.table.options.ajaxError(xhr, textStatus, errorThrown);
+				self.showError();
+
+				setTimeout(function(){
+					self.hideLoader();
+				}, 3000);
+			});
+		}
+
+	}else{
+		console.warn("Ajax Load Error - No URL Set");
+		return false;
+	}
+};
+
+Ajax.prototype.showLoader = function(){
+	this.loaderElement.detach();
+
+	this.msgElement.empty()
+	.removeClass("tabulator-error")
+	.addClass("tabulator-loading")
+
+	if(this.loadingElement){
+		this.msgElement.append(this.loadingElement);
+	}else{
+		this.msgElement.append(this.table.extensions.localize.getText("ajax.loading"));
+	}
+
+	this.table.element.append(this.loaderElement);
+};
+
+Ajax.prototype.showError = function(){
+	this.loaderElement.detach();
+
+	this.msgElement.empty()
+	.removeClass("tabulator-loading")
+	.addClass("tabulator-error")
+
+	if(this.errorElement){
+		this.msgElement.append(this.errorElement);
+	}else{
+		this.msgElement.append(this.table.extensions.localize.getText("ajax.error"));
+	}
+
+	this.table.element.append(this.loaderElement);
+};
+
+Ajax.prototype.hideLoader = function(){
+	this.loaderElement.detach();
+};
+
+//default ajax config object
+Ajax.prototype.defaultConfig = {
+	url: "",
+	type: "GET",
+	async: true,
+	dataType:"json",
+	success: function (data){}
+};
+
+Tabulator.registerExtension("ajax", Ajax);

js/tabulator/src/js/extensions/calculation_colums.js

@@ -0,0 +1,381 @@
+var ColumnCalcs = function(table){
+	this.table = table; //hold Tabulator object
+	this.topCalcs = [];
+	this.botCalcs = [];
+	this.genColumn = false;
+	this.topElement = $("<div class='tabulator-calcs-holder'></div>");
+	this.botElement = $("<div class='tabulator-calcs-holder'></div>");
+	this.topRow = false;
+	this.botRow = false;
+	this.topInitialized = false;
+	this.botInitialized = false;
+
+	this.initialize();
+};
+
+ColumnCalcs.prototype.initialize = function(){
+	this.genColumn = new Column({field:"value"}, this);
+};
+
+//dummy functions to handle being mock column manager
+ColumnCalcs.prototype.registerColumnField = function(){};
+
+//initialize column calcs
+ColumnCalcs.prototype.initializeColumn = function(column){
+	var def = column.definition
+
+	var config = {
+		topCalcParams:def.topCalcParams || {},
+		botCalcParams:def.bottomCalcParams || {},
+	};
+
+	if(def.topCalc){
+
+		switch(typeof def.topCalc){
+			case "string":
+			if(this.calculations[def.topCalc]){
+				config.topCalc = this.calculations[def.topCalc]
+			}else{
+				console.warn("Column Calc Error - No such calculation found, ignoring: ", def.topCalc);
+			}
+			break;
+
+			case "function":
+			config.topCalc = def.topCalc;
+			break
+
+		}
+
+		if(config.topCalc){
+			column.extensions.columnCalcs = config;
+			this.topCalcs.push(column);
+
+			if(!this.table.options.groupBy){
+				this.initializeTopRow();
+			}
+		}
+
+	}
+
+	if(def.bottomCalc){
+		switch(typeof def.bottomCalc){
+			case "string":
+			if(this.calculations[def.bottomCalc]){
+				config.botCalc = this.calculations[def.bottomCalc]
+			}else{
+				console.warn("Column Calc Error - No such calculation found, ignoring: ", def.bottomCalc);
+			}
+			break;
+
+			case "function":
+			config.botCalc = def.bottomCalc;
+			break
+
+		}
+
+		if(config.botCalc){
+			column.extensions.columnCalcs = config;
+			this.botCalcs.push(column);
+
+			if(!this.table.options.groupBy){
+				this.initializeBottomRow();
+			}
+		}
+	}
+
+};
+
+ColumnCalcs.prototype.removeCalcs = function(){
+	var changed = false;
+
+	if(this.topInitialized){
+		this.topInitialized = false;
+		this.topElement.remove();
+		changed = true;
+	}
+
+	if(this.botInitialized){
+		this.botInitialized = false;
+		this.table.footerManager.remove(this.botElement);
+		changed = true;
+	}
+
+	if(changed){
+		this.table.rowManager.adjustTableSize();
+	}
+};
+
+ColumnCalcs.prototype.initializeTopRow = function(){
+	if(!this.topInitialized){
+		this.table.columnManager.element.append(this.topElement);
+		this.topInitialized = true;
+	}
+};
+
+ColumnCalcs.prototype.initializeBottomRow = function(){
+	if(!this.botInitialized){
+		this.table.footerManager.prepend(this.botElement);
+		this.botInitialized = true;
+	}
+};
+
+
+ColumnCalcs.prototype.scrollHorizontal = function(left){
+	var hozAdjust = 0,
+	scrollWidth = this.table.columnManager.element[0].scrollWidth - this.table.element.innerWidth();
+
+	if(this.botInitialized){
+		this.botRow.getElement().css("margin-left", -left);
+	}
+};
+
+
+ColumnCalcs.prototype.recalc = function(rows){
+	var data, row;
+
+	if(this.topInitialized || this.botInitialized){
+		data = this.rowsToData(rows);
+
+		if(this.topInitialized){
+			row = this.generateRow("top", this.rowsToData(rows))
+			this.topRow = row;
+			this.topElement.empty();
+			this.topElement.append(row.getElement());
+			row.initialize(true);
+		}
+
+		if(this.botInitialized){
+			row = this.generateRow("bottom", this.rowsToData(rows))
+			this.botRow = row;
+			this.botElement.empty();
+			this.botElement.append(row.getElement());
+			row.initialize(true);
+		}
+
+		this.table.rowManager.adjustTableSize();
+
+		//set resizable handles
+		if(this.table.extExists("frozenColumns")){
+			this.table.extensions.frozenColumns.layout();
+		}
+	}
+};
+
+ColumnCalcs.prototype.recalcRowGroup = function(row){
+	var data, rowData;
+
+	var group = this.table.extensions.groupRows.getRowGroup(row);
+
+	if(group.calcs.bottom){
+		data = this.rowsToData(group.rows);
+		rowData = this.generateRowData("bottom", data);
+
+		group.calcs.bottom.updateData(rowData);
+	}
+
+	if(group.calcs.top){
+		data = this.rowsToData(group.rows);
+		rowData = this.generateRowData("top", data);
+
+		group.calcs.top.updateData(rowData);
+	}
+};
+
+
+//generate top stats row
+ColumnCalcs.prototype.generateTopRow = function(rows){
+	return this.generateRow("top", this.rowsToData(rows));
+};
+//generate bottom stats row
+ColumnCalcs.prototype.generateBottomRow = function(rows){
+	return this.generateRow("bottom", this.rowsToData(rows));
+};
+
+ColumnCalcs.prototype.rowsToData = function(rows){
+	var data = [];
+
+	rows.forEach(function(row){
+		data.push(row.getData());
+	});
+
+	return data;
+};
+
+//generate stats row
+ColumnCalcs.prototype.generateRow = function(pos, data){
+	var self = this,
+	rowData = this.generateRowData(pos, data),
+	row = new Row(rowData, this);
+
+	row.getElement().addClass("tabulator-calcs").addClass("tabulator-calcs-" + pos);
+	row.type = "calc";
+
+	row.generateCells = function(){
+
+		var cells = [];
+
+		self.table.columnManager.columnsByIndex.forEach(function(column){
+
+			if(column.visible){
+				//set field name of mock column
+				self.genColumn.setField(column.getField());
+				self.genColumn.hozAlign = column.hozAlign;
+
+				if(column.definition[pos + "CalcFormatter"] && self.table.extExists("format")){
+
+					self.genColumn.extensions.format = {
+						formatter: self.table.extensions.format.getFormatter(column.definition[pos + "CalcFormatter"]),
+						params: column.definition[pos + "CalcFormatterParams"]
+					}
+				}else{
+					self.genColumn.extensions.format = {
+						formatter: self.table.extensions.format.getFormatter("plaintext"),
+						params:{}
+					}
+				}
+
+				//generate cell and assign to correct column
+				var cell = new Cell(self.genColumn, row);
+				cell.column = column;
+
+				cell.setWidth(column.getWidth());
+
+				column.cells.push(cell);
+				cells.push(cell);
+			}
+		});
+
+		this.cells = cells;
+	}
+
+	return row;
+};
+
+//generate stats row
+ColumnCalcs.prototype.generateRowData = function(pos, data){
+	var rowData = {},
+	calcs = pos == "top" ? this.topCalcs : this.botCalcs,
+	type = pos == "top" ? "topCalc" : "botCalc";
+
+	calcs.forEach(function(column){
+		var values = [];
+
+		if(column.extensions.columnCalcs && column.extensions.columnCalcs[type]){
+			data.forEach(function(item){
+				values.push(column.getFieldValue(item));
+			});
+
+			column.setFieldValue(rowData, column.extensions.columnCalcs[type](values, data, column.extensions.columnCalcs[type + "Params"]));
+		}
+	});
+
+	return rowData;
+};
+
+ColumnCalcs.prototype.hasTopCalcs = function(){
+	return	!!(this.topCalcs.length);
+},
+
+ColumnCalcs.prototype.hasBottomCalcs = function(){
+	return	!!(this.botCalcs.length);
+},
+
+//handle table redraw
+ColumnCalcs.prototype.redraw = function(){
+	if(this.topRow){
+		this.topRow.normalizeHeight(true);
+	}
+	if(this.botRow){
+		this.botRow.normalizeHeight(true);
+	}
+};
+
+//default calculations
+ColumnCalcs.prototype.calculations = {
+	"avg":function(values, data, calcParams){
+		var output = 0,
+		precision = typeof calcParams.precision !== "undefined" ? calcParams.precision : 2
+
+		if(values.length){
+			output = values.reduce(function(sum, value){
+				value = Number(value);
+				return sum + value;
+			});
+
+			output = output / values.length;
+
+			output = precision !== false ? output.toFixed(precision) : output;
+		}
+
+		return parseFloat(output).toString();
+	},
+	"max":function(values, data, calcParams){
+		var output = null;
+
+		values.forEach(function(value){
+
+			value = Number(value);
+
+			if(value > output || output === null){
+				output = value;
+			}
+		});
+
+		return output !== null ? output : "";
+	},
+	"min":function(values, data, calcParams){
+		var output = null;
+
+		values.forEach(function(value){
+
+			value = Number(value);
+
+			if(value < output || output === null){
+				output = value;
+			}
+		});
+
+		return output !== null ? output : "";
+	},
+	"sum":function(values, data, calcParams){
+		var output = 0;
+
+		if(values.length){
+			values.forEach(function(value){
+				value = Number(value);
+
+				output += !isNaN(value) ? Number(value) : 0;
+			});
+		}
+
+		return output;
+	},
+	"concat":function(values, data, calcParams){
+		var output = 0;
+
+		if(values.length){
+			output = values.reduce(function(sum, value){
+				return String(sum) + String(value);
+			});
+		}
+
+		return output;
+	},
+	"count":function(values, data, calcParams){
+		var output = 0;
+
+		if(values.length){
+			values.forEach(function(value){
+				if(value){
+					output ++;
+				}
+			});
+		}
+
+		return output;
+	},
+};
+
+
+
+Tabulator.registerExtension("columnCalcs", ColumnCalcs);

js/tabulator/src/js/extensions/download.js

@@ -0,0 +1,256 @@
+var Download = function(table){
+	this.table = table; //hold Tabulator object
+	this.fields = {}; //hold filed multi dimension arrays
+};
+
+//trigger file download
+Download.prototype.download = function(type, filename, options){
+	var self = this,
+	downloadFunc = false;
+
+	function buildLink(data, mime){
+		self.triggerDownload(data, mime, type, filename);
+	}
+
+	if(typeof type == "function"){
+		downloadFunc = type;
+	}else{
+		if(self.downloaders[type]){
+			downloadFunc = self.downloaders[type];
+		}else{
+			console.warn("Download Error - No such download type found: ", type);
+		}
+	}
+
+	if(downloadFunc){
+		downloadFunc.call(this, self.processDefinitions(), self.processData() , options, buildLink);
+	}
+};
+
+
+Download.prototype.processDefinitions = function(){
+	var self = this,
+	definitions = self.table.columnManager.getDefinitions(),
+	processedDefinitions = [];
+
+	self.fields = {};
+
+	definitions.forEach(function(column){
+		if(column.field){
+			self.fields[column.field] = column.field.split(".");
+
+			if(column.download !== false){
+				//isolate definiton from defintion object
+				var def = {};
+
+				for(var key in column){
+					def[key] = column[key];
+				}
+
+				if(typeof column.downloadTitle != "undefined"){
+					def.title = column.downloadTitle;
+				}
+
+				processedDefinitions.push(def);
+			}
+		}
+	});
+
+
+	return  processedDefinitions;
+};
+
+Download.prototype.processData = function(){
+	var self = this,
+	data = self.table.rowManager.getData(true);
+
+	//add user data processing step;
+	if(typeof self.table.options.downloadDataMutator == "function"){
+		data = self.table.options.downloadDataMutator(data);
+	}
+
+	return data;
+};
+
+Download.prototype.triggerDownload = function(data, mime, type, filename){
+	var element = document.createElement('a'),
+	blob = new Blob([data],{type:mime}),
+	filename = filename || "Tabulator." + (typeof type === "function" ? "txt" : type);
+
+	if(navigator.msSaveOrOpenBlob){
+		navigator.msSaveOrOpenBlob(blob, filename);
+	}else{
+		element.setAttribute('href', window.URL.createObjectURL(blob));
+
+		//set file title
+		element.setAttribute('download', filename);
+
+		//trigger download
+		element.style.display = 'none';
+		document.body.appendChild(element);
+		element.click();
+
+		//remove temporary link element
+		document.body.removeChild(element);
+	}
+};
+
+//nested field lookup
+Download.prototype.getFieldValue = function(field, data){
+	var dataObj = data,
+	structure = this.fields[field],
+	length = structure.length,
+	output;
+
+	for(let i = 0; i < length; i++){
+
+		dataObj = dataObj[structure[i]];
+
+		output = dataObj;
+
+		if(!dataObj){
+			break;
+		}
+	}
+
+	return output;
+};
+
+
+//downloaders
+Download.prototype.downloaders = {
+	csv:function(columns, data, options, setFileContents){
+		var self = this,
+		titles = [],
+		fields = [],
+		delimiter = options && options.delimiter ? options.delimiter : ",",
+		fileContents;
+
+		//get field lists
+		columns.forEach(function(column){
+			if(column.field){
+				titles.push('"' + String(column.title).split('"').join('""') + '"');
+				fields.push(column.field);
+			}
+		})
+
+		//generate header row
+		fileContents = [titles.join(delimiter)];
+
+		//generate each row of the table
+		data.forEach(function(row){
+			var rowData = [];
+
+			fields.forEach(function(field){
+				var value = self.getFieldValue(field, row);
+
+				switch(typeof value){
+					case "object":
+					value = JSON.stringify(value);
+					break;
+
+					case "undefined":
+					case "null":
+					value = "";
+					break;
+
+					default:
+					value = value;
+				}
+
+				//escape uotation marks
+				rowData.push('"' + String(value).split('"').join('""') + '"');
+			})
+
+			fileContents.push(rowData.join(delimiter));
+		});
+
+		setFileContents(fileContents.join("\n"), "text/csv");
+	},
+
+	json:function(columns, data, options, setFileContents){
+		var fileContents = JSON.stringify(data, null, '\t');
+
+		setFileContents(fileContents, "application/json");
+	},
+
+	xlsx:function(columns, data, options, setFileContents){
+		var self = this,
+		titles = [],
+		fields = [],
+		rows = [],
+		workbook = { SheetNames:["Sheet1"], Sheets:{} },
+		worksheet, output;
+
+		//convert rows to worksheet
+		function rowsToSheet(){
+			var sheet = {};
+			var range = {s: {c:0, r:0}, e: {c:fields.length, r:rows.length }};
+
+			rows.forEach(function(row, i){
+				row.forEach(function(value, j){
+					var cell = {v: typeof value == "undefined" || value === null ? "" : value};
+
+					if(cell != null){
+						switch(typeof cell.v){
+							case "number":
+							cell.t = 'n';
+							break;
+							case "boolean":
+							cell.t = 'b';
+							break;
+							default:
+							cell.t = 's';
+							break;
+						}
+
+						sheet[XLSX.utils.encode_cell({c:j,r:i})] = cell
+					}
+				});
+			});
+
+			sheet['!ref'] = XLSX.utils.encode_range(range);
+
+			return sheet;
+		}
+
+		//convert workbook to binary array
+		function s2ab(s) {
+			var buf = new ArrayBuffer(s.length);
+			var view = new Uint8Array(buf);
+			for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+				return buf;
+		}
+
+		//get field lists
+		columns.forEach(function(column){
+			if(column.field){
+				titles.push(column.title);
+				fields.push(column.field);
+			}
+		});
+
+		rows.push(titles);
+
+		//generate each row of the table
+		data.forEach(function(row){
+			var rowData = [];
+
+			fields.forEach(function(field){
+				rowData.push(self.getFieldValue(field, row));
+			});
+
+			rows.push(rowData);
+		});
+
+
+		worksheet = rowsToSheet();
+		workbook.Sheets["Sheet1"] = worksheet;
+
+		output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary'});
+
+		setFileContents(s2ab(output), "application/octet-stream");
+	}
+};
+
+Tabulator.registerExtension("download", Download);

js/tabulator/src/js/extensions/edit.js

@@ -0,0 +1,580 @@
+var Edit = function(table){
+	this.table = table; //hold Tabulator object
+	this.currentCell = false; //hold currently editing cell
+};
+
+
+//initialize column editor
+Edit.prototype.initializeColumn = function(column){
+	var self = this,
+	config = {
+		editor:false,
+		blocked:false,
+		check:column.definition.editable,
+		params:column.definition.editorParams || {}
+	};
+
+	//set column editor
+	switch(typeof column.definition.editor){
+		case "string":
+		if(self.editors[column.definition.editor]){
+			config.editor = self.editors[column.definition.editor]
+		}else{
+			console.warn("Editor Error - No such editor found: ", column.definition.editor);
+		}
+		break;
+
+		case "function":
+		config.editor = column.definition.editor;
+		break;
+
+		case "boolean":
+
+		if(column.definition.editor === true){
+
+			if(typeof column.definition.formatter !== "function"){
+				if(self.editors[column.definition.formatter]){
+					config.editor = self.editors[column.definition.formatter];
+				}else{
+					config.editor = self.editors["input"];
+				}
+			}else{
+				console.warn("Editor Error - Cannot auto lookup editor for a custom formatter: ", column.definition.formatter);
+			}
+		}
+		break;
+	}
+
+	if(config.editor){
+		column.extensions.edit = config;
+	}
+};
+
+Edit.prototype.getCurrentCell = function(){
+	return this.currentCell ? this.currentCell.getComponent() : false;
+};
+
+Edit.prototype.clearEditor = function(cell){
+	this.currentCell = false;
+	cell.getElement().removeClass("tabulator-validation-fail");
+	cell.getElement().removeClass("tabulator-editing").empty();
+	cell.row.getElement().removeClass("tabulator-row-editing");
+};
+
+//return a formatted value for a cell
+Edit.prototype.bindEditor = function(cell){
+	var self = this,
+	rendered = function(){},
+	element = cell.getElement(),
+	mouseClick = false;
+
+	//handle successfull value change
+	function success(value){
+		var valid = true;
+
+		if(cell.column.extensions.validate && self.table.extExists("validate")){
+			valid = self.table.extensions.validate.validate(cell.column.extensions.validate, cell.getComponent(), value);
+		}
+
+		if(valid === true){
+			self.clearEditor(cell);
+			cell.setValue(value, true);
+		}else{
+			cell.getElement().addClass("tabulator-validation-fail");
+			rendered();
+			self.table.options.validationFailed(cell.getComponent(), value, valid);
+		}
+	};
+
+	//handle aborted edit
+	function cancel(){
+		self.clearEditor(cell);
+		cell.setValueActual(cell.getValue());
+		self.table.options.cellEditCancelled(cell.getComponent())
+	};
+
+	element.attr("tabindex", 0);
+
+	element.on("click", function(e){
+		if(!$(this).hasClass("tabulator-editing")){
+			$(this).focus();
+		}
+	});
+
+	element.on("mousedown", function(e){
+		mouseClick = true;
+	});
+
+	element.on("focus", function(e){
+		var allowEdit = true,
+		cellEditor;
+
+		self.currentCell = cell;
+
+		if(mouseClick){
+			mouseClick = false;
+
+			if(cell.column.cellEvents.cellClick){
+				cell.column.cellEvents.cellClick(e, cell.getComponent());
+			}
+		}
+
+		function onRendered(callback){
+			rendered = callback;
+		}
+
+		if(!cell.column.extensions.edit.blocked){
+			e.stopPropagation();
+
+			if(typeof cell.column.extensions.edit.check == "function"){
+				allowEdit = cell.column.extensions.edit.check(cell.getComponent());
+			}
+
+			if(allowEdit){
+
+				self.table.options.cellEditing(cell.getComponent());
+
+				cellEditor = cell.column.extensions.edit.editor.call(self, cell.getComponent(), onRendered, success, cancel, cell.column.extensions.edit.params);
+
+				//if editor returned, add to DOM, if false, abort edit
+				if(cellEditor !== false){
+					element.addClass("tabulator-editing");
+					cell.row.getElement().addClass("tabulator-row-editing");
+					element.empty();
+					element.append(cellEditor);
+
+					//trigger onRendered Callback
+					rendered();
+
+					//prevent editing from triggering rowClick event
+					element.children().click(function(e){
+						e.stopPropagation();
+					})
+				}else{
+					element.blur();
+				}
+			}else{
+				element.blur();
+			}
+		}else{
+			element.blur();
+		}
+
+	});
+};
+
+//default data editors
+Edit.prototype.editors = {
+
+	//input element
+	input:function(cell, onRendered, success, cancel, editorParams){
+
+		//create and style input
+		var input = $("<input type='text'/>");
+
+		input.css({
+			"padding":"4px",
+			"width":"100%",
+			"box-sizing":"border-box",
+		})
+		.val(cell.getValue());
+
+		onRendered(function(){
+			input.focus();
+			input.css("height","100%");
+		});
+
+		//submit new value on blur
+		input.on("change blur", function(e){
+			if(input.val() != cell.getValue()){
+				success(input.val());
+			}else{
+				cancel();
+			}
+		});
+
+		//submit new value on enter
+		input.on("keydown", function(e){
+			if(e.keyCode == 13){
+				success(input.val());
+			}
+
+			if(e.keyCode == 27){
+				cancel();
+			}
+		});
+
+		return input;
+	},
+
+	//resizable text area element
+	textarea:function(cell, onRendered, success, cancel, editorParams){
+		var self = this,
+		cellValue = cell.getValue(),
+		value = String(typeof cellValue == "null" || typeof cellValue == "undefined" ? "" : cellValue),
+		count = (value.match(/(?:\r\n|\r|\n)/g) || []).length + 1,
+		input = $("<textarea></textarea>"),
+		scrollHeight = 0;
+
+        //create and style input
+        input.css({
+        	"display":"block",
+        	"height":"100%",
+        	"width":"100%",
+        	"padding":"2px",
+        	"box-sizing":"border-box",
+        	"white-space":"pre-wrap",
+        	"resize": "none",
+        })
+        .val(value);
+
+        onRendered(function(){
+        	input.focus();
+        	input.css("height","100%");
+        });
+
+        //submit new value on blur
+        input.on("change blur", function(e){
+        	if(input.val() != cell.getValue()){
+        		success(input.val());
+        		setTimeout(function(){
+        			cell.getRow().normalizeHeight();
+        		},300)
+        	}else{
+        		cancel();
+        	}
+        });
+
+        input.on("keyup", function(){
+
+        	input.css({"height": ""});
+
+        	var heightNow = input[0].scrollHeight;
+        	input.css({"height": heightNow});
+
+        	if(heightNow != scrollHeight){
+        		scrollHeight = heightNow;
+        		cell.getRow().normalizeHeight();
+        	}
+        });
+
+        input.on("keydown", function(e){
+        	if(e.keyCode == 27){
+        		cancel();
+        	}
+        });
+
+        return input;
+    },
+
+    //input element with type of number
+    number:function(cell, onRendered, success, cancel, editorParams){
+    	var input = $("<input type='number'/>");
+
+		//create and style input
+		input.css({
+			"padding":"4px",
+			"width":"100%",
+			"box-sizing":"border-box",
+		})
+		.val(cell.getValue());
+
+		onRendered(function(){
+			input.focus();
+			input.css("height","100%");
+		});
+
+		//submit new value on blur
+		input.on("blur", function(e){
+			var value = input.val();
+
+			if(!isNaN(value)){
+				value = Number(value);
+			}
+
+			if(value != cell.getValue()){
+				success(value);
+			}else{
+				cancel();
+			}
+		});
+
+		//submit new value on enter
+		input.on("keydown", function(e){
+			var value;
+
+			if(e.keyCode == 13){
+				value = input.val();
+
+				if(!isNaN(value)){
+					value = Number(value);
+				}
+
+				success(value);
+			}
+
+			if(e.keyCode == 27){
+				cancel();
+			}
+		});
+
+		return input;
+	},
+
+	//start rating
+	star:function(cell, onRendered, success, cancel, editorParams){
+		var element = cell.getElement(),
+		value = cell.getValue(),
+		maxStars = $("svg", element).length || 5,
+		size = $("svg:first", element).attr("width") || 14,
+		stars=$("<div style='vertical-align:middle; padding:4px; display:inline-block; vertical-align:middle;'></div>"),
+		starActive = $('<svg width="' + size + '" height="' + size + '" class="tabulator-star-active" viewBox="0 0 512 512" xml:space="preserve" style="padding:0 1px;"><polygon fill="#488CE9" stroke="#014AAE" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>'),
+		starInactive = $('<svg width="' + size + '" height="' + size + '" class="tabulator-star-inactive" viewBox="0 0 512 512" xml:space="preserve" style="padding:0 1px;"><polygon fill="#010155" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>');
+
+
+		//change number of active stars
+		var starChange = function(element){
+			if($(".tabulator-star-active", element.closest("div")).length != element.prevAll("svg").length + 1){
+				element.prevAll("svg").replaceWith(starActive.clone());
+				element.nextAll("svg").replaceWith(starInactive.clone());
+				element.replaceWith(starActive.clone());
+			}
+		}
+
+		value = parseInt(value) < maxStars ? parseInt(value) : maxStars;
+
+		for(var i=1;i<= maxStars;i++){
+			let nextStar = i <= value ? starActive : starInactive;
+			stars.append(nextStar.clone());
+		}
+
+		stars.on("mouseover", "svg", function(e){
+			e.stopPropagation();
+			starChange($(this));
+		});
+
+		stars.on("mouseover", function(e){
+			$("svg", $(this)).replaceWith(starInactive.clone());
+		});
+
+		stars.on("click", function(e){
+			success(0);
+		});
+
+		stars.on("click", "svg", function(e){
+			e.stopPropagation();
+			success($(this).prevAll("svg").length + 1);
+		});
+
+		element.css({
+			"white-space": "nowrap",
+			"overflow": "hidden",
+			"text-overflow": "ellipsis",
+		});
+
+		element.on("blur", function(){
+			cancel();
+		});
+
+		//allow key based navigation
+		element.on("keydown", function(e){
+			switch(e.keyCode){
+				case 39: //right arrow
+				starChange($(".tabulator-star-inactive:first", stars));
+				break;
+
+				case 37: //left arrow
+				let prevstar = $(".tabulator-star-active:last", stars).prev("svg");
+
+				if(prevstar.length){
+					starChange(prevstar);
+				}else{
+					$("svg", stars).replaceWith(starInactive.clone());
+				}
+				break;
+
+				case 13: //enter
+				success($(".tabulator-star-active", stars).length);
+				break;
+
+				case 27: //escape
+				cancel();
+				break;
+
+			}
+		});
+
+		return stars;
+	},
+
+	//draggable progress bar
+	progress:function(cell, onRendered, success, cancel, editorParams){
+		var element = cell.getElement(),
+		max = $("div", element).data("max"),
+		min = $("div", element).data("min"),
+		percent = (max - min) / 100,
+		value = cell.getValue() || 0,
+		handle = $("<div class='tabulator-progress-handle' style='position:absolute; right:0; top:0; bottom:0; width:5px;'></div>"),
+		bar;
+
+		var newVal = function(){
+			var calcVal = (percent * Math.round(bar.outerWidth() / (element.width()/100))) + min;
+			success(calcVal);
+			element.attr("aria-valuenow", calcVal).attr("aria-label", value);
+		}
+
+		//make sure value is in range
+		value = parseFloat(value) <= max ? parseFloat(value) : max;
+		value = parseFloat(value) >= min ? parseFloat(value) : min;
+
+		//workout percentage
+		value = 100 - Math.round((value - min) / percent);
+
+		bar = $("<div style='position:absolute; top:8px; bottom:8px; left:4px; right:" + value + "%; margin-right:4px; background-color:#488CE9; display:inline-block; max-width:100%; min-width:0%;' data-max='" + max + "' data-min='" + min + "'></div>"),
+
+		element.css({
+			padding:"0 4px",
+		});
+
+		element.attr("aria-valuemin", min).attr("aria-valuemax", max);
+
+		bar.append(handle);
+
+		handle.on("mousedown", function(e){
+			bar.data("mouseDrag", e.screenX);
+			bar.data("mouseDragWidth", bar.outerWidth());
+		});
+
+		handle.on("mouseover", function(){$(this).css({cursor:"ew-resize"})});
+
+		element.on("mousemove", function(e){
+			if(bar.data("mouseDrag")){
+				bar.css({width: bar.data("mouseDragWidth") + (e.screenX - bar.data("mouseDrag"))})
+			}
+		});
+
+		element.on("mouseup", function(e){
+			if(bar.data("mouseDrag")){
+				e.stopPropagation();
+				e.stopImmediatePropagation();
+
+				bar.data("mouseDragOut", true);
+				bar.data("mouseDrag", false);
+				bar.data("mouseDragWidth", false);
+
+				newVal();
+
+			}
+		});
+
+		//allow key based navigation
+		element.on("keydown", function(e){
+			switch(e.keyCode){
+				case 39: //right arrow
+				bar.css({"width" : bar.width() + element.width()/100});
+				break;
+
+				case 37: //left arrow
+				bar.css({"width" : bar.width() - element.width()/100});
+				break;
+
+				case 13: //enter
+				newVal();
+				break;
+
+				case 27: //escape
+				cancel();
+				break;
+
+			}
+		});
+
+		element.on("blur", function(){
+			cancel();
+		});
+
+		return bar;
+	},
+
+	//checkbox
+	tickCross:function(cell, onRendered, success, cancel, editorParams){
+		var value = cell.getValue(),
+		input = $("<input type='checkbox'/>");
+
+		//create and style input
+		input.css({
+			"margin-top":"5px",
+			"box-sizing":"border-box",
+		})
+		.val(value);
+
+		onRendered(function(){
+			input.focus();
+		});
+
+		if(value === true || value === "true" || value === "True" || value === 1){
+			input.prop("checked", true);
+		}else{
+			input.prop("checked", false);
+		}
+
+		//submit new value on blur
+		input.on("change blur", function(e){
+			success(input.is(":checked"));
+		});
+
+		//submit new value on enter
+		input.on("keydown", function(e){
+			if(e.keyCode == 13){
+				success(input.is(":checked"));
+			}
+			if(e.keyCode == 27){
+				cancel();
+			}
+		});
+
+		return input;
+	},
+
+	//checkbox
+	tick:function(cell, onRendered, success, cancel, editorParams){
+		var value = cell.getValue(),
+		input = $("<input type='checkbox'/>");
+
+		//create and style input
+		input.css({
+			"margin-top":"5px",
+			"box-sizing":"border-box",
+		})
+		.val(value);
+
+		onRendered(function(){
+			input.focus();
+		});
+
+		if(value === true || value === "true" || value === "True" || value === 1){
+			input.prop("checked", true);
+		}else{
+			input.prop("checked", false);
+		}
+
+		//submit new value on blur
+		input.on("change blur", function(e){
+			success(input.is(":checked"));
+		});
+
+		//submit new value on enter
+		input.on("keydown", function(e){
+			if(e.keyCode == 13){
+				success(input.is(":checked"));
+			}
+			if(e.keyCode == 27){
+				cancel();
+			}
+		});
+
+		return input;
+	},
+};
+
+Tabulator.registerExtension("edit", Edit);

js/tabulator/src/js/extensions/filter.js

@@ -0,0 +1,453 @@
+var Filter = function(table){
+
+	this.table = table; //hold Tabulator object
+
+	this.filterList = []; //hold filter list
+	this.headerFilters = {}; //hold column filters
+	this.headerFilterElements = []; //hold header filter elements for manipulation
+
+	this.changed = false; //has filtering changed since last render
+};
+
+
+//initialize column header filter
+Filter.prototype.initializeColumn = function(column){
+	var self = this,
+	field = column.getField(),
+	filterElement, editor, editorElement, cellWrapper, typingTimer, tagType, attrType;
+
+	//handle successfull value change
+	function success(value){
+		var filterType = tagType == "input" && attrType == "text" ? "partial" : "match",
+		type = "",
+		filterFunc;
+
+		if(value){
+			switch(typeof column.definition.headerFilterFunc){
+				case "string":
+				if(self.filters[column.definition.headerFilterFunc]){
+					type = column.definition.headerFilterFunc;
+					filterFunc = function(data){
+						return self.filters[column.definition.headerFilterFunc](value, column.getFieldValue(data));
+					}
+				}else{
+					console.warn("Header Filter Error - Matching filter function not found: ", column.definition.headerFilterFunc);
+				}
+				break;
+
+				case "function":
+				filterFunc = function(data){
+					return column.definition.headerFilterFunc(value, column.getFieldValue(data), data, column.definition.headerFilterFuncParams || {});
+				}
+
+				type = filterFunc;
+				break;
+			}
+
+			if(!filterFunc){
+
+				switch(filterType){
+					case "partial":
+					filterFunc = function(data){
+						return String(column.getFieldValue(data)).toLowerCase().indexOf(String(value).toLowerCase()) > -1;
+					}
+					type = "like";
+					break;
+
+					default:
+					filterFunc = function(data){
+						return column.getFieldValue(data) == value;
+					}
+					type = "=";
+				}
+			}
+
+			self.headerFilters[field] = {value:value, func:filterFunc, type:type};
+
+		}else{
+			delete self.headerFilters[field];
+		}
+
+		self.changed = true;
+
+		self.table.rowManager.filterRefresh();
+	};
+
+	//handle aborted edit
+	function cancel(){};
+
+	if(field){
+
+		filterElement = $("<div class='tabulator-header-filter'></div>");
+
+		//set column editor
+		switch(typeof column.definition.headerFilter){
+			case "string":
+			if(self.table.extensions.edit.editors[column.definition.headerFilter]){
+				editor = self.table.extensions.edit.editors[column.definition.headerFilter];
+			}else{
+				console.warn("Filter Error - Cannot build header filter, No such editor found: ", column.definition.editor);
+			}
+			break;
+
+			case "function":
+			editor = column.definition.headerFilter;
+			break;
+
+			case "boolean":
+			if(column.extensions.edit && column.extensions.edit.editor){
+				editor = column.extensions.edit.editor;
+			}else{
+				if(column.definition.formatter && self.table.extensions.edit.editors[column.definition.formatter]){
+					editor = self.table.extensions.edit.editors[column.definition.formatter];
+				}else{
+					editor = self.table.extensions.edit.editors["input"];
+				}
+			}
+			break;
+		}
+
+		if(editor){
+
+			cellWrapper = {
+				getValue:function(){
+					return "";
+				},
+				getField:function(){
+					return column.definition.field;
+				},
+				getElement:function(){
+					return filterElement;
+				}
+			};
+
+			editorElement = editor.call(self, cellWrapper, function(){}, success, cancel, column.definition.headerFilterParams || {});
+
+			//set Placeholder Text
+			if(field){
+				self.table.extensions.localize.bind("headerFilters.columns." + column.definition.field, function(value){
+					editorElement.attr("placeholder", typeof value !== "undefined" && value ? value : self.table.extensions.localize.getText("headerFilters.default"));
+				});
+			}else{
+				self.table.extensions.localize.bind("headerFilters.default", function(value){
+					editorElement.attr("placeholdder", typeof self.column.definition.headerFilterPlaceholder !== "undefined" && self.column.definition.headerFilterPlaceholder ? self.column.definition.headerFilterPlaceholder : value);
+				});
+			}
+
+			//focus on element on click
+			editorElement.on("click", function(e){
+				e.stopPropagation();
+				$(this).focus();
+			});
+
+			//live update filters as user types
+			typingTimer = false;
+
+			editorElement.on("keyup search", function(e){
+				var element = $(this);
+
+				if(typingTimer){
+					clearTimeout(typingTimer);
+				}
+
+				typingTimer = setTimeout(function(){
+					success(element.val());
+				},300);
+			});
+
+			//update number filtered columns on change
+			attrType = editorElement.attr("type") ? editorElement.attr("type").toLowerCase() : "" ;
+			if(attrType == "number"){
+				editorElement.on("change", function(e){
+					success($(this).val());
+				});
+			}
+
+			//change text inputs to search inputs to allow for clearing of field
+			if(attrType == "text"){
+				editorElement.attr("type", "search");
+				editorElement.off("change blur"); //prevent blur from triggering filter and preventing selection click
+			}
+
+			//prevent input and select elements from propegating click to column sorters etc
+			tagType = editorElement.prop("tagName").toLowerCase()
+			if(tagType == "input" || tagType == "select"){
+				editorElement.on("mousedown",function(e){
+					e.stopPropagation();
+				});
+			}
+
+			filterElement.append(editorElement);
+
+			column.contentElement.append(filterElement);
+
+			self.headerFilterElements.push(editorElement);
+		}
+	}else{
+		console.warn("Filter Error - Cannot add header filter, column has no field set:", column.definition.title);
+	}
+
+};
+
+//check if the filters has changed since last use
+Filter.prototype.hasChanged = function(){
+	var changed = this.changed;
+	this.changed = false;
+	return changed;
+};
+
+//set standard filters
+Filter.prototype.setFilter = function(field, type, value){
+	var self = this;
+
+	self.filterList = [];
+
+	if(!Array.isArray(field)){
+		field = [{field:field, type:type, value:value}];
+	}
+
+	self.addFilter(field);
+
+};
+
+//add filter to array
+Filter.prototype.addFilter = function(field, type, value){
+	var self = this,
+	column;
+
+	if(!Array.isArray(field)){
+		field = [{field:field, type:type, value:value}];
+	}
+
+	field.forEach(function(filter){
+
+		var filterFunc = false;
+
+		if(typeof filter.field == "function"){
+			filterFunc = function(data){
+				return filter.field(data, filter.type || {})// pass params to custom filter function
+			}
+		}else{
+			if(self.filters[filter.type]){
+
+				column = self.table.columnManager.getColumnByField(filter.field);
+
+				if(column){
+					filterFunc = function(data){
+						return self.filters[filter.type](filter.value, column.getFieldValue(data));
+					}
+				}else{
+					filterFunc = function(data){
+						return self.filters[filter.type](filter.value, data[filter.field]);
+					}
+				}
+
+
+			}else{
+				console.warn("Filter Error - No such filter type found, ignoring: ", filter.type);
+			}
+		}
+
+		if(filterFunc){
+			filter.func = filterFunc;
+			self.filterList.push(filter);
+
+			self.changed = true;
+		}
+	});
+
+};
+
+//get all filters
+Filter.prototype.getFilters = function(all, ajax){
+	var self = this,
+	output = [];
+
+	if(all){
+		output = self.getHeaderFilters();
+	}
+
+	self.filterList.forEach(function(filter){
+		output.push({field:filter.field, type:filter.type, value:filter.value});
+	});
+
+	if(ajax){
+		output.forEach(function(item){
+			if(typeof item.type == "function"){
+				item.type = "function";
+			}
+		})
+	}
+
+	return output;
+};
+
+//get all filters
+Filter.prototype.getHeaderFilters = function(){
+	var self = this,
+	output = [];
+
+	for(var key in this.headerFilters){
+		output.push({field:key, type:this.headerFilters[key].type, value:this.headerFilters[key].value});
+	}
+
+	return output;
+};
+
+//remove filter from array
+Filter.prototype.removeFilter = function(field, type, value){
+	var self = this;
+
+	if(!Array.isArray(field)){
+		field = [{field:field, type:type, value:value}];
+	}
+
+	field.forEach(function(filter){
+		var index = -1;
+
+		if(typeof filter.field == "object"){
+			index = self.filterList.findIndex(function(element){
+				return filter === element;
+			});
+		}else{
+			index = self.filterList.findIndex(function(element){
+				return filter.field === element.field && filter.type === element.type  && filter.value === element.value
+			});
+		}
+
+		if(index > -1){
+			self.filterList.splice(index, 1);
+			self.changed = true;
+		}else{
+			console.warn("Filter Error - No matching filter type found, ignoring: ", filter.type);
+		}
+
+	});
+
+};
+
+//clear filters
+Filter.prototype.clearFilter = function(all){
+	this.filterList = [];
+
+	if(all){
+		this.clearHeaderFilter();
+	}
+
+	this.changed = true;
+};
+
+//clear header filters
+Filter.prototype.clearHeaderFilter = function(){
+	this.headerFilters = {};
+
+	this.headerFilterElements.forEach(function(element){
+		element.val("");
+	});
+
+	self.changed = true;
+};
+
+//filter row array
+Filter.prototype.filter = function(rowList){
+	var self = this,
+	activeRows = [],
+	activeRowComponents = [];
+
+	if(self.table.options.dataFiltering){
+		self.table.options.dataFiltering(self.getFilters());
+	}
+
+	if(!self.table.options.ajaxFiltering && (self.filterList.length || Object.keys(self.headerFilters).length)){
+
+		rowList.forEach(function(row){
+			if(self.filterRow(row)){
+				activeRows.push(row);
+			}
+		});
+
+		activeRows;
+
+	}else{
+		activeRows = rowList.slice(0);
+	}
+
+	if(self.table.options.dataFiltered){
+
+		activeRows.forEach(function(row){
+			activeRowComponents.push(row.getComponent());
+		});
+
+		self.table.options.dataFiltered(self.getFilters(), activeRowComponents);
+	}
+
+	return activeRows;
+
+};
+
+//filter individual row
+Filter.prototype.filterRow = function(row){
+	var self = this,
+	match = true,
+	data = row.getData();
+
+	self.filterList.forEach(function(filter){
+		if(!filter.func(data)){
+			match = false;
+		}
+	});
+
+	for(var field in self.headerFilters){
+		if(!self.headerFilters[field].func(data)){
+			match = false;
+		}
+	}
+
+	return match;
+};
+
+
+//list of available filters
+Filter.prototype.filters ={
+
+	//equal to
+	"=":function(filterVal, rowVal){
+		return rowVal == filterVal ? true : false;
+	},
+
+	//less than
+	"<":function(filterVal, rowVal){
+		return rowVal < filterVal ? true : false;
+	},
+
+	//less than or equal to
+	"<=":function(filterVal, rowVal){
+		return rowVal <= filterVal ? true : false;
+	},
+
+	//greater than
+	">":function(filterVal, rowVal){
+		return rowVal > filterVal ? true : false;
+	},
+
+	//greater than or equal to
+	">=":function(filterVal, rowVal){
+		return rowVal >= filterVal ? true : false;
+	},
+
+	//not equal to
+	"!=":function(filterVal, rowVal){
+		return rowVal != filterVal ? true : false;
+	},
+
+	//contains the string
+	"like":function(filterVal, rowVal){
+		if(filterVal === null || typeof filterVal === "undefined"){
+			return rowVal === filterVal ? true : false;
+		}else{
+			return rowVal.toLowerCase().indexOf(filterVal.toLowerCase()) > -1 ? true : false;
+		}
+	},
+};
+
+Tabulator.registerExtension("filter", Filter);

js/tabulator/src/js/extensions/format.js

@@ -0,0 +1,273 @@
+var Format = function(table){
+	this.table = table; //hold Tabulator object
+};
+
+//initialize column formatter
+Format.prototype.initializeColumn = function(column){
+	var self = this,
+	config = {params:column.definition.formatterParams || {}};
+
+	//set column formatter
+	switch(typeof column.definition.formatter){
+		case "string":
+		if(self.formatters[column.definition.formatter]){
+			config.formatter = self.formatters[column.definition.formatter]
+		}else{
+			console.warn("Formatter Error - No such formatter found: ", column.definition.formatter);
+			config.formatter = self.formatters.plaintext;
+		}
+		break;
+
+		case "function":
+		config.formatter = column.definition.formatter;
+		break;
+
+		default:
+		config.formatter = self.formatters.plaintext;
+		break;
+	}
+
+	column.extensions.format = config;
+};
+
+//return a formatted value for a cell
+Format.prototype.formatValue = function(cell){
+	return cell.column.extensions.format.formatter.call(this, cell.getComponent(), cell.column.extensions.format.params);
+};
+
+
+Format.prototype.sanitizeHTML = function(value){
+	if(value){
+		var entityMap = {
+			'&': '&',
+			'<': '&lt;',
+			'>': '&gt;',
+			'"': '&quot;',
+			"'": '&#39;',
+			'/': '&#x2F;',
+			'`': '&#x60;',
+			'=': '&#x3D;'
+		};
+
+		return String(value).replace(/[&<>"'`=\/]/g, function (s) {
+			return entityMap[s];
+		});
+	}else{
+		return value;
+	}
+};
+
+Format.prototype.emptyToSpace = function(value){
+	return value === null ? "&nbsp" : value;
+};
+
+//get formatter for cell
+Format.prototype.getFormatter = function(formatter){
+	var formatter;
+
+	switch(typeof formatter){
+		case "string":
+		if(this.formatters[formatter]){
+			formatter = this.formatters[formatter]
+		}else{
+			console.warn("Formatter Error - No such formatter found: ", formatter);
+			formatter = this.formatters.plaintext;
+		}
+		break;
+
+		case "function":
+		formatter = formatter;
+		break;
+
+		default:
+		formatter = this.formatters.plaintext;
+		break;
+	}
+
+	return formatter;
+
+};
+
+//default data formatters
+Format.prototype.formatters = {
+	//plain text value
+	plaintext:function(cell, formatterParams){
+		return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
+	},
+
+	//html text value
+	html:function(cell, formatterParams){
+		return cell.getValue();
+	},
+
+	//multiline text area
+	textarea:function(cell, formatterParams){
+		cell.getElement().css({"white-space":"pre-wrap"});
+		return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
+	},
+
+	//currency formatting
+	money:function(cell, formatterParams){
+		var floatVal = parseFloat(cell.getValue()),
+		number, integer, decimal, rgx;
+
+		var decimalSym = formatterParams.decimal || ".";
+		var thousandSym = formatterParams.thousand || ",";
+		var symbol = formatterParams.symbol || "";
+		var after = !!formatterParams.symbolAfter;
+		var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2;
+
+		if(isNaN(floatVal)){
+			return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
+		}
+
+		number = precision !== false ? floatVal.toFixed(precision) : floatVal;
+		number = number.split(".");
+
+		integer = number[0];
+		decimal = number.length > 1 ? decimalSym + number[1] : "";
+
+		rgx = /(\d+)(\d{3})/;
+
+		while (rgx.test(integer)){
+			integer = integer.replace(rgx, "$1" + thousandSym + "$2");
+		}
+
+		return after ? integer + decimal + symbol : symbol + integer + decimal;
+	},
+
+	//clickable mailto link
+	email:function(cell, formatterParams){
+		var value = this.sanitizeHTML(cell.getValue());
+		return "<a href='mailto:" + value + "'>" + this.emptyToSpace(value) + "</a>";
+	},
+
+	//clickable anchor tag
+	link:function(cell, formatterParams){
+		var value = this.sanitizeHTML(cell.getValue());
+		return "<a href='" + value + "'>" + this.emptyToSpace(value) + "</a>";
+	},
+
+	//image element
+	image:function(cell, formatterParams){
+		var value = this.sanitizeHTML(cell.getValue());
+		return "<img src='" + value + "'/>";
+	},
+
+	//tick or empty cell
+	tick:function(cell, formatterParams){
+		var value = cell.getValue(),
+		element = cell.getElement();
+
+		var tick = '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>';
+
+		if(value === true || value === "true" || value === "True" || value === 1 || value === "1"){
+			element.attr("aria-checked", true);
+			return tick;
+		}else{
+			element.attr("aria-checked", false);
+			return "";
+		}
+	},
+
+	//tick or cross
+	tickCross:function(cell, formatterParams){
+		var value = cell.getValue(),
+		element = cell.getElement(),
+		tick = '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>',
+		cross = '<svg enable-background="new 0 0 24 24" height="14" width="14"  viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272  c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0  l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269  c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73  L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
+
+		if(value === true || value === "true" || value === "True" || value === 1 || value === "1"){
+			element.attr("aria-checked", true);
+			return tick;
+		}else{
+			element.attr("aria-checked", false);
+			return cross;
+		}
+	},
+
+	//star rating
+	star:function(cell, formatterParams){
+		var value = cell.getValue(),
+		element = cell.getElement(),
+		maxStars = formatterParams && formatterParams.stars ? formatterParams.stars : 5,
+		stars = $("<span style='vertical-align:middle;'></span>"),
+		starActive = $('<svg width="14" height="14" viewBox="0 0 512 512" xml:space="preserve" style="margin:0 1px;"><polygon fill="#FFEA00" stroke="#C1AB60" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>'),
+		starInactive = $('<svg width="14" height="14" viewBox="0 0 512 512" xml:space="preserve" style="margin:0 1px;"><polygon fill="#D2D2D2" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>');
+
+		value = parseInt(value) < maxStars ? parseInt(value) : maxStars;
+
+		for(var i=1;i<= maxStars;i++){
+
+			var nextStar = i <= value ? starActive : starInactive;
+
+			stars.append(nextStar.clone());
+		}
+
+		element.css({
+			"white-space": "nowrap",
+			"overflow": "hidden",
+			"text-overflow": "ellipsis",
+		});
+
+		element.attr("aria-label", value);
+
+		return stars.html();
+	},
+
+	//progress bar
+	progress:function(cell, formatterParams){ //progress bar
+		var value = this.sanitizeHTML(cell.getValue()) || 0,
+		element = cell.getElement(),
+		max = formatterParams && formatterParams.max ? formatterParams.max : 100,
+		min = formatterParams && formatterParams.min ? formatterParams.min : 0,
+		color = formatterParams && formatterParams.color ? formatterParams.color : "#2DC214",
+		percent;
+
+		//make sure value is in range
+		value = parseFloat(value) <= max ? parseFloat(value) : max;
+		value = parseFloat(value) >= min ? parseFloat(value) : min;
+
+		//workout percentage
+		percent = (max - min) / 100;
+		value = 100 - Math.round((value - min) / percent);
+
+		element.css({
+			"min-width":"30px",
+			"position":"relative",
+		});
+
+		element.attr("aria-label", value);
+
+		return "<div style='position:absolute; top:8px; bottom:8px; left:4px; right:" + value + "%; margin-right:4px; background-color:" + color + "; display:inline-block;' data-max='" + max + "' data-min='" + min + "'></div>";
+	},
+
+	//background color
+	color:function(cell, formatterParams){
+		cell.getElement().css({"background-color":this.sanitizeHTML(cell.getValue())});
+		return "";
+	},
+
+	//tick icon
+	buttonTick:function(cell, formatterParams){
+		return '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>';
+	},
+
+	//cross icon
+	buttonCross:function(cell, formatterParams){
+		return '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272  c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0  l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269  c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73  L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
+	},
+
+	//current row number
+	rownum:function(cell, formatterParams){
+		return this.table.rowManager.activeRows.indexOf(cell.getRow()._getSelf()) + 1;
+	},
+
+	//row handle
+	handle:function(cell, formatterParams){
+		cell.getElement().addClass("tabulator-row-handle");
+		return "<div class='tabulator-row-handle-box'><div class='tabulator-row-handle-bar'></div><div class='tabulator-row-handle-bar'></div><div class='tabulator-row-handle-bar'></div></div>";
+	},
+};
+
+Tabulator.registerExtension("format", Format);

js/tabulator/src/js/extensions/frozen_columns.js

@@ -0,0 +1,162 @@
+var FrozenColumns = function(table){
+	this.table = table; //hold Tabulator object
+	this.leftColumns = [];
+	this.rightColumns = [];
+	this.leftMargin = 0;
+	this.rightMargin = 0;
+	this.initializationMode = "left";
+	this.active = false;
+};
+
+//reset initial state
+FrozenColumns.prototype.reset = function(){
+	this.initializationMode = "left";
+	this.leftColumns = [];
+	this.rightColumns = [];
+	this.active = false;
+};
+
+//initialize specific column
+FrozenColumns.prototype.initializeColumn = function(column){
+	var config = {margin:0, edge:false};
+
+	if(column.definition.frozen){
+
+		if(!column.parent.isGroup){
+
+
+			if(!column.isGroup){
+				config.position = this.initializationMode;
+
+				if(this.initializationMode == "left"){
+					this.leftColumns.push(column);
+				}else{
+					this.rightColumns.unshift(column);
+				}
+
+				this.active = true;
+
+				column.extensions.frozen = config;
+			}else{
+				console.warn("Frozen Column Error - Column Groups cannot be frozen");
+			}
+		}else{
+			console.warn("Frozen Column Error - Grouped columns cannot be frozen");
+		}
+
+	}else{
+		this.initializationMode = "right";
+	}
+};
+
+//layout columns appropropriatly
+FrozenColumns.prototype.layout = function(){
+	var self = this,
+	tableHolder = this.table.rowManager.element,
+	rightMargin = 0;
+
+	if(self.active){
+
+		//calculate row padding
+
+		self.leftMargin = self._calcSpace(self.leftColumns, self.leftColumns.length);
+		self.table.columnManager.headersElement.css("margin-left", self.leftMargin);
+
+		self.rightMargin = self._calcSpace(self.rightColumns, self.rightColumns.length);
+		self.table.columnManager.element.css("padding-right", self.rightMargin);
+
+		self.table.rowManager.activeRows.forEach(function(row){
+			self.layoutRow(row);
+		});
+
+		if(self.table.extExists("columnCalcs")){
+			if(self.table.extensions.columnCalcs.topInitialized && self.table.extensions.columnCalcs.topRow){
+				self.layoutRow(self.table.extensions.columnCalcs.topRow);
+			}
+			if(self.table.extensions.columnCalcs.botInitialized && self.table.extensions.columnCalcs.botRow){
+				self.layoutRow(self.table.extensions.columnCalcs.botRow);
+			}
+		}
+
+
+		//calculate left columns
+		self.leftColumns.forEach(function(column, i){
+			column.extensions.frozen.margin = self._calcSpace(self.leftColumns, i) + self.table.columnManager.scrollLeft;
+
+			if(i == self.leftColumns.length - 1){
+				column.extensions.frozen.edge = true;
+			}else{
+				column.extensions.frozen.edge = false;
+			}
+
+			self.layoutColumn(column);
+		});
+
+		//calculate right frozen columns
+		rightMargin = self.table.rowManager.element.innerWidth() + self.table.columnManager.scrollLeft;
+
+		if(tableHolder[0].scrollHeight > tableHolder.innerHeight()){
+			rightMargin -= tableHolder[0].offsetWidth - tableHolder[0].clientWidth;
+		}
+
+		self.rightColumns.forEach(function(column, i){
+			column.extensions.frozen.margin = rightMargin - self._calcSpace(self.rightColumns, i + 1);
+
+			if(i == self.rightColumns.length - 1){
+				column.extensions.frozen.edge = true;
+			}else{
+				column.extensions.frozen.edge = false;
+			}
+
+			self.layoutColumn(column);
+		});
+	}
+};
+
+FrozenColumns.prototype.layoutColumn = function(column){
+	var self = this;
+
+	self.layoutElement(column.element, column);
+
+	column.cells.forEach(function(cell){
+		self.layoutElement(cell.element, column);
+	});
+};
+
+FrozenColumns.prototype.layoutRow = function(row){
+	row.getElement().css({
+		"padding-left": this.leftMargin,
+		"padding-right": this.rightMargin,
+	});
+};
+
+FrozenColumns.prototype.layoutElement = function(element, column){
+
+	if(column.extensions.frozen){
+		var css = {
+			position:"absolute",
+			left:column.extensions.frozen.margin
+		}
+
+		element.css(css);
+		element.addClass("tabulator-frozen");
+
+		if(column.extensions.frozen.edge){
+			element.addClass("tabulator-frozen-" + column.extensions.frozen.position);
+		}
+	}
+};
+
+FrozenColumns.prototype._calcSpace = function(columns, index){
+	var width = 0;
+
+	for (let i = 0; i < index; i++){
+		if(columns[i].visible){
+			width += columns[i].getWidth();
+		}
+	}
+
+	return width;
+};
+
+Tabulator.registerExtension("frozenColumns", FrozenColumns);

js/tabulator/src/js/extensions/group_rows.js

@@ -0,0 +1,641 @@
+
+
+//public group object
+var GroupComponent = function (group){
+	this.group = group;
+	this.type = "GroupComponent";
+}
+
+GroupComponent.prototype.getKey = function(){
+	return this.group.key;
+};
+
+GroupComponent.prototype.getElement = function(){
+	return this.group.element;
+};
+
+GroupComponent.prototype.getRows = function(){
+	var output = []
+
+	this.group.rows.forEach(function(row){
+		output.push(row.getComponent());
+	});
+
+	return output;
+};
+
+GroupComponent.prototype.getSubGroups = function(){
+	var output = [];
+
+	this.group.groupList.forEach(function(child){
+		output.push(child.getComponent());
+	});
+
+	return output;
+};
+
+GroupComponent.prototype.getParentGroup = function(){
+	return this.group.parent ? this.group.parent.getComponent() : false;
+};
+
+GroupComponent.prototype.getVisibility = function(){
+	return this.group.visible;
+};
+
+GroupComponent.prototype.show = function(){
+	this.group.show()
+};
+
+GroupComponent.prototype.hide = function(){
+	this.group.hide();
+};
+
+GroupComponent.prototype.toggle = function(){
+	this.group.toggleVisibility();
+};
+
+GroupComponent.prototype._getSelf = function(){
+	return this.group;
+};
+
+//////////////////////////////////////////////////
+//////////////// Group Functions /////////////////
+//////////////////////////////////////////////////
+
+var Group = function(groupManager, parent, level, key, generator, oldGroup){
+
+	this.groupManager = groupManager;
+	this.parent = parent;
+	this.key = key;
+	this.level = level;
+	this.hasSubGroups = level < (groupManager.groupIDLookups.length - 1);
+	this.addRow = this.hasSubGroups ? this._addRowToGroup : this._addRow;
+	this.type = "group"; //type of element
+	this.old = oldGroup;
+	this.rows = [];
+	this.groups = [];
+	this.groupList = [];
+	this.generator = generator;
+	this.element = $("<div class='tabulator-row tabulator-group tabulator-group-level-" + level + "' role='rowgroup'></div>");
+	this.arrowElement = $("<div class='tabulator-arrow'></div>");
+	this.height = 0;
+	this.outerHeight = 0;
+	this.initialized = false;
+	this.calcs = {};
+	this.initialized = false;
+
+	this.visible = oldGroup ? oldGroup.visible : (typeof groupManager.startOpen[level] !== "undefined" ? groupManager.startOpen[level] : groupManager.startOpen[0]);
+
+	this.addBindings();
+};
+
+Group.prototype.addBindings = function(){
+	var self = this,
+	dblTap,	tapHold, tap, toggleElement;
+
+	if(self.groupManager.table.options.groupToggleElement){
+		toggleElement = self.groupManager.table.options.groupToggleElement == "arrow" ? self.arrowElement : self.element;
+
+		toggleElement.on("click", function(e){
+			e.stopPropagation();
+			e.stopImmediatePropagation();
+			self.toggleVisibility();
+		});
+	}
+
+
+	//handle group click events
+	if (self.groupManager.table.options.groupClick){
+		self.element.on("click", function(e){
+			self.groupManager.table.options.groupClick(e, self.getComponent());
+		})
+	}
+
+	if (self.groupManager.table.options.groupDblClick){
+		self.element.on("dblclick", function(e){
+			self.groupManager.table.options.groupDblClick(e, self.getComponent());
+		})
+	}
+
+	if (self.groupManager.table.options.groupContext){
+		self.element.on("contextmenu", function(e){
+			self.groupManager.table.options.groupContext(e, self.getComponent());
+		})
+	}
+
+	if (self.groupManager.table.options.groupTap){
+
+		tap = false;
+
+		self.element.on("touchstart", function(e){
+			tap = true;
+		});
+
+		self.element.on("touchend", function(e){
+			if(tap){
+				self.groupManager.table.options.groupTap(e, self.getComponent());
+			}
+
+			tap = false;
+		});
+	}
+
+	if (self.groupManager.table.options.groupDblTap){
+
+		dblTap = null;
+
+		self.element.on("touchend", function(e){
+
+			if(dblTap){
+				clearTimeout(dblTap);
+				dblTap = null;
+
+				self.groupManager.table.options.groupDblTap(e, self.getComponent());
+			}else{
+
+				dblTap = setTimeout(function(){
+					clearTimeout(dblTap);
+					dblTap = null;
+				}, 300);
+			}
+
+		});
+	}
+
+
+	if (self.groupManager.table.options.groupTapHold){
+
+		tapHold = null;
+
+		self.element.on("touchstart", function(e){
+			clearTimeout(tapHold);
+
+			tapHold = setTimeout(function(){
+				clearTimeout(tapHold);
+				tapHold = null;
+				tap = false;
+				self.groupManager.table.options.groupTapHold(e, self.getComponent());
+			}, 1000)
+
+		});
+
+		self.element.on("touchend", function(e){
+			clearTimeout(tapHold);
+			tapHold = null;
+		});
+	}
+
+};
+
+Group.prototype._addRowToGroup = function(row){
+
+	var level = this.level + 1;
+
+	if(this.hasSubGroups){
+		var groupID = this.groupManager.groupIDLookups[level](row.getData());
+
+		if(!this.groups[groupID]){
+			var group = new Group(this.groupManager, this, level, groupID, this.groupManager.headerGenerator[level] || this.groupManager.headerGenerator[0], this.old ? this.old.groups[groupID] : false);
+
+			this.groups[groupID] = group;
+			this.groupList.push(group);
+		}
+
+		this.groups[groupID].addRow(row);
+	}
+
+};
+
+Group.prototype._addRow = function(row){
+	this.rows.push(row);
+};
+
+Group.prototype.getHeadersAndRows = function(){
+	var output = [];
+
+	output.push(this);
+
+	this._visSet();
+
+	if(this.visible){
+
+		if(this.groupList.length){
+			this.groupList.forEach(function(group){
+				output = output.concat(group.getHeadersAndRows());
+			});
+
+		}else{
+			if(this.groupManager.table.extExists("columnCalcs") && this.groupManager.table.extensions.columnCalcs.hasTopCalcs()){
+				this.calcs.top = this.groupManager.table.extensions.columnCalcs.generateTopRow(this.rows);
+				output.push(this.calcs.top);
+			}
+
+			output = output.concat(this.rows);
+
+			if(this.groupManager.table.extExists("columnCalcs") && this.groupManager.table.extensions.columnCalcs.hasBottomCalcs()){
+				this.calcs.bottom = this.groupManager.table.extensions.columnCalcs.generateBottomRow(this.rows);
+				output.push(this.calcs.bottom);
+			}
+		}
+	}else{
+		if(this.groupManager.table.options.groupClosedShowCalcs){
+			if(this.groupManager.table.extExists("columnCalcs")){
+				if(this.groupManager.table.extensions.columnCalcs.hasTopCalcs()){
+					this.calcs.top = this.groupManager.table.extensions.columnCalcs.generateTopRow(this.rows)
+					output.push(this.calcs.top);
+				}
+
+				if(this.groupManager.table.extensions.columnCalcs.hasBottomCalcs()){
+					this.calcs.bottom = this.groupManager.table.extensions.columnCalcs.generateBottomRow(this.rows);
+					output.push(this.calcs.bottom);
+				}
+			}
+		}
+	}
+
+	return output;
+};
+
+Group.prototype.getRows = function(){
+	this._visSet();
+
+	return this.visible ? this.rows : [];
+};
+
+Group.prototype.getRowCount = function(){
+	var count = 0;
+
+	if(this.groupList.length){
+		this.groupList.forEach(function(group){
+			count += group.getRowCount();
+		});
+	}else{
+		count = this.rows.length;
+	}
+	return count;
+};
+
+Group.prototype.toggleVisibility = function(){
+	if(this.visible){
+		this.hide();
+	}else{
+		this.show();
+	}
+};
+
+Group.prototype.hide = function(){
+	this.visible = false;
+
+	if(this.groupManager.table.rowManager.getRenderMode() == "classic"){
+
+		this.element.removeClass("tabulator-group-visible");
+
+		this.rows.forEach(function(row){
+			row.getElement().detach();
+		});
+	}else{
+		this.groupManager.updateGroupRows(true);
+	}
+
+	this.groupManager.table.options.groupVisibilityChanged(this.getComponent(), false);
+};
+
+Group.prototype.show = function(){
+	var self = this;
+
+	self.visible = true;
+
+	if(this.groupManager.table.rowManager.getRenderMode() == "classic"){
+
+		this.element.addClass("tabulator-group-visible");
+
+		self.rows.forEach(function(row){
+			self.getElement().after(row.getElement());
+			row.initialize();
+		});
+	}else{
+		this.groupManager.updateGroupRows(true);
+	}
+
+	this.groupManager.table.options.groupVisibilityChanged(this.getComponent(), true);
+};
+
+Group.prototype._visSet = function(){
+	var data = [];
+
+	if(typeof this.visible == "function"){
+
+		this.rows.forEach(function(row){
+			data.push(row.getData());
+		});
+
+		this.visible = this.visible(this.key, this.getRowCount(), data, this.getRowCount());
+	}
+};
+
+Group.prototype.getRowGroup = function(row){
+	var match = false;
+	if(this.groupList.length){
+		this.groupList.forEach(function(group){
+			var result = group.getRowGroup(row);
+
+			if(result){
+				match = result;
+			}
+		});
+	}else{
+		if(this.rows.find(function(item){
+			return item === row;
+		})){
+			match = this;
+		}
+	}
+
+	return match;
+};
+
+////////////// Standard Row Functions //////////////
+
+Group.prototype.getElement = function(){
+	this.addBindingsd = false;
+
+	this._visSet();
+
+	var data = [];
+
+	this.rows.forEach(function(row){
+		data.push(row.getData());
+	});
+
+	if(this.visible){
+		this.element.addClass("tabulator-group-visible");
+	}else{
+		this.element.removeClass("tabulator-group-visible");
+	}
+
+	this.element.children().detach();
+
+	this.element.html(this.generator(this.key, this.getRowCount(), data, this.getComponent())).prepend(this.arrowElement);
+
+	// this.addBindings();
+
+	return this.element;
+};
+
+//normalize the height of elements in the row
+Group.prototype.normalizeHeight = function(){
+	this.setHeight(this.element.innerHeight())
+};
+
+Group.prototype.initialize = function(force){
+	if(!this.initialized || force){
+		this.normalizeHeight();
+		this.initialized = true;
+	}
+};
+
+Group.prototype.reinitialize = function(){
+	this.initialized = false;
+	this.height = 0;
+
+	if(this.element.is(":visible")){
+		this.initialize(true);
+	}
+};
+
+Group.prototype.setHeight = function(height){
+	if(this.height != height){
+		this.height = height;
+		this.outerHeight = this.element.outerHeight();
+	}
+};
+
+//return rows outer height
+Group.prototype.getHeight = function(){
+	return this.outerHeight;
+};
+
+Group.prototype.reinitializeHeight = function(){
+};
+Group.prototype.calcHeight = function(){
+};
+Group.prototype.setCellHeight = function(){
+};
+Group.prototype.clearCellHeight = function(){
+}
+
+
+//////////////// Object Generation /////////////////
+Group.prototype.getComponent = function(){
+	return new GroupComponent(this);
+};
+
+//////////////////////////////////////////////////
+////////////// Group Row Extension ///////////////
+//////////////////////////////////////////////////
+
+var GroupRows = function(table){
+
+	this.table = table; //hold Tabulator object
+
+	this.groupIDLookups = false; //enable table grouping and set field to group by
+	this.startOpen = [function(){return false;}]; //starting state of group
+	this.headerGenerator = [function(){return "";}];
+	this.groupList = []; //ordered list of groups
+	this.groups = {}; //hold row groups
+};
+
+
+//initialize group configuration
+GroupRows.prototype.initialize = function(){
+	var self = this,
+	groupBy = self.table.options.groupBy,
+	startOpen = self.table.options.groupStartOpen,
+	groupHeader = self.table.options.groupHeader;
+
+	self.headerGenerator = [function(){return "";}];
+	this.startOpen = [function(){return false;}]; //starting state of group
+
+	self.table.extensions.localize.bind("groups.item", function(langValue, lang){
+		self.headerGenerator[0] = function(value, count, data){ //header layout function
+			return value + "<span>(" + count + " " + ((count === 1) ? langValue : lang.groups.items) + ")</span>";
+		};
+	});
+
+	this.groupIDLookups = [];
+
+
+	if(Array.isArray(groupBy) || groupBy){
+		if(this.table.extExists("columnCalcs")){
+			this.table.extensions.columnCalcs.removeCalcs();
+		}
+	}else{
+		if(this.table.extExists("columnCalcs")){
+
+			var cols = this.table.columnManager.getRealColumns();
+
+			cols.forEach(function(col){
+				if(col.definition.topCalc){
+					self.table.extensions.columnCalcs.initializeTopRow();
+				}
+
+				if(col.definition.bottomCalc){
+					self.table.extensions.columnCalcs.initializeBottomRow();
+				}
+			})
+		}
+	}
+
+
+
+	if(!Array.isArray(groupBy)){
+		groupBy = [groupBy];
+	}
+
+	groupBy.forEach(function(group){
+		var lookupFunc, column;
+
+		if(typeof group == "function"){
+			lookupFunc = group;
+		}else{
+			column = self.table.columnManager.getColumnByField(group);
+
+			if(column){
+				lookupFunc = function(data){
+					return column.getFieldValue(data);
+				}
+			}else{
+				lookupFunc = function(data){
+					return data[group];
+				}
+			}
+		}
+
+		self.groupIDLookups.push(lookupFunc);
+	});
+
+
+
+	if(startOpen){
+
+		if(!Array.isArray(startOpen)){
+			startOpen = [startOpen];
+		}
+
+		startOpen.forEach(function(level){
+			level = typeof level == "function" ? level : function(){return true;};
+		});
+
+		self.startOpen = startOpen;
+	}
+
+	if(groupHeader){
+		self.headerGenerator = Array.isArray(groupHeader) ? groupHeader : [groupHeader];
+	}
+
+	this.initialized = true;
+
+};
+
+//return appropriate rows with group headers
+GroupRows.prototype.getRows = function(rows){
+	if(this.groupIDLookups.length){
+
+		this.table.options.dataGrouping();
+
+		this.generateGroups(rows);
+
+		if(this.table.options.dataGrouped){
+			this.table.options.dataGrouped(this.getGroups());
+		};
+
+		return this.updateGroupRows();
+
+	}else{
+		return rows.slice(0);
+	}
+
+};
+
+GroupRows.prototype.getGroups = function(){
+	var groupComponents = [];
+
+	if(this.table.options.dataGrouped){
+		this.groupList.forEach(function(group){
+			groupComponents.push(group.getComponent());
+		});
+	}
+
+	return groupComponents;
+};
+
+GroupRows.prototype.getRowGroup = function(row){
+	var match = false;
+
+	this.groupList.forEach(function(group){
+		var result = group.getRowGroup(row);
+
+		if(result){
+			match = result;
+		}
+	});
+
+	return match;
+};
+
+GroupRows.prototype.countGroups = function(){
+	return this.groupList.length;
+};
+
+GroupRows.prototype.generateGroups = function(rows){
+	var self = this,
+	oldGroups = self.groups;
+
+	self.groups = {};
+	self.groupList =[];
+
+	rows.forEach(function(row){
+
+		var groupID = self.groupIDLookups[0](row.getData());
+
+		if(!self.groups[groupID]){
+			var group = new Group(self, false, 0, groupID, self.headerGenerator[0], oldGroups[groupID]);
+
+			self.groups[groupID] = group;
+			self.groupList.push(group);
+		}
+
+		self.groups[groupID].addRow(row);
+	});
+
+
+}
+
+
+GroupRows.prototype.updateGroupRows = function(force){
+	var self = this,
+	output = [],
+	oldRowCount;
+
+	self.groupList.forEach(function(group){
+		output = output.concat(group.getHeadersAndRows());
+	});
+
+	//force update of table display
+	if(force){
+		oldRowCount = self.table.rowManager.displayRowsCount;
+
+		self.table.rowManager.setDisplayRows(output);
+		self.table.rowManager._virtualRenderFill(Math.floor((self.table.rowManager.element.scrollTop() / self.table.rowManager.element[0].scrollHeight) * oldRowCount));
+	}
+
+	return output;
+};
+
+GroupRows.prototype.scrollHeaders = function(left){
+	this.groupList.forEach(function(group){
+		group.arrowElement.css("margin-left", left);
+	});
+};
+
+Tabulator.registerExtension("groupRows", GroupRows);

js/tabulator/src/js/extensions/history.js

@@ -0,0 +1,117 @@
+var History = function(table){
+	this.table = table; //hold Tabulator object
+
+	this.history = [];
+	this.index = -1;
+};
+
+
+History.prototype.clear = function(){
+	this.history = [];
+	this.index = -1;
+};
+
+History.prototype.action = function(type, component, data){
+
+	if(this.index > -1){
+		this.history = this.history.slice(0, this.index + 1);
+	}
+
+	this.history.push({
+		type:type,
+		component:component,
+		data:data,
+	});
+
+	this.index ++;
+};
+
+History.prototype.undo = function(){
+
+	if(this.index > -1){
+
+		let action = this.history[this.index];
+
+		this.undoers[action.type].call(this, action);
+
+		this.index--;
+
+		return true;
+	}else{
+		console.warn("History Undo Error - No more history to undo");
+		return false;
+	}
+
+};
+
+History.prototype.redo = function(){
+	if(this.history.length-1 > this.index){
+
+		this.index++;
+
+		let action = this.history[this.index];
+
+		this.redoers[action.type].call(this, action);
+
+		return true;
+	}else{
+		console.warn("History Redo Error - No more history to redo");
+		return false;
+	}
+};
+
+
+History.prototype.undoers = {
+	cellEdit: function(action){
+		action.component.setValueProcessData(action.data.oldValue);
+	},
+
+	rowAdd: function(action){
+		action.component.delete();
+	},
+
+	rowDelete: function(action){
+		var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
+
+		this._rebindRow(action.component, newRow);
+	},
+};
+
+
+History.prototype.redoers = {
+	cellEdit: function(action){
+		action.component.setValueProcessData(action.data.newValue);
+	},
+
+	rowAdd: function(action){
+		var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
+
+		this._rebindRow(action.component, newRow);
+	},
+
+	rowDelete:function(action){
+		action.component.delete();
+	},
+};
+
+//rebind rows to new element after deletion
+History.prototype._rebindRow = function(oldRow, newRow){
+	this.history.forEach(function(action){
+		if(action.component instanceof Row){
+			if(action.component === oldRow){
+				action.component = newRow;
+			}
+		}else if(action.component instanceof Cell){
+			if(action.component.row === oldRow){
+				var field = action.component.column.getField();
+
+				if(field){
+					action.component = newRow.getCell(field);
+				}
+
+			}
+		}
+	});
+};
+
+Tabulator.registerExtension("history", History);

js/tabulator/src/js/extensions/html_table_import.js

@@ -0,0 +1,197 @@
+var HtmlTableImport = function(table){
+	this.table = table; //hold Tabulator object
+};
+
+HtmlTableImport.prototype.parseTable = function(){
+	var self = this,
+	element = self.table.element,
+	options = self.table.options,
+	columns = options.columns,
+	headers = $("th", element),
+	hasIndex = false,
+	rows = $("tbody tr", element),
+	data = [];
+
+	self.table.options.htmlImporting();
+
+	//check for tablator inline options
+	self._extractOptions(element, options);
+
+	if(headers.length){
+		self._extractHeaders(element);
+	}else{
+		self._generateBlankHeaders(element);
+	}
+
+
+	//iterate through table rows and build data set
+	rows.each(function(rowIndex){
+		var item = {};
+
+		//create index if the dont exist in table
+		if(!hasIndex){
+			item[options.index] = rowIndex;
+		}
+
+		//add row data to item
+		$("td", $(this)).each(function(colIndex){
+			item[$(this).data("field")] = $(this).html();
+		});
+
+		data.push(item);
+	});
+
+	//create new element
+	var newElement = $("<div></div>");
+
+	//transfer attributes to new element
+	var attributes = element.prop("attributes");
+
+	// loop through attributes and apply them on div
+	$.each(attributes, function(){
+		newElement.attr(this.name, this.value);
+	});
+
+	// replace table with div element
+	element.replaceWith(newElement);
+
+	options.data = data;
+
+	self.table.options.htmlImported();
+
+	newElement.tabulator(options);
+};
+
+//extract tabluator attribute options
+HtmlTableImport.prototype._extractOptions = function(element, options){
+	var self = this,
+	attributes = element[0].attributes
+
+	for(var index in attributes){
+		var attrib = attributes[index];
+		var name;
+
+		if(attrib && attrib.name && attrib.name.indexOf("tabulator-") === 0){
+
+			name = attrib.name.replace("tabulator-", "");
+
+			for(var key in options){
+				if(key.toLowerCase() == name){
+					options[key] = self._attribValue(attrib.value);
+				}
+			}
+		}
+	}
+};
+
+//get value of attribute
+HtmlTableImport.prototype._attribValue = function(value){
+	if(value === "true"){
+		return true;
+	}
+
+	if(value === "false"){
+		return false;
+	}
+
+	return value;
+};
+
+//find column if it has already been defined
+HtmlTableImport.prototype._findCol = function(title){
+	var self = this;
+
+	var match = self.table.options.columns.find(function(column){
+		return column.title === title;
+	});
+
+	return match || false;
+};
+
+//extract column from headers
+HtmlTableImport.prototype._extractHeaders = function(element){
+	var self = this,
+	headers = $("th", element),
+	rows = $("tbody tr", element);
+
+	headers.each(function(index){
+		var header = $(this),
+		exists = false,
+		col = self._findCol(header.text()),
+		width, attributes;
+
+		//list of possible attributes
+		var attribList = ["title", "field", "align", "width", "minWidth", "frozen", "sortable", "sorter", "formatter", "cellClick", "cellDblClick", "cellContext", "editable", "editor", "visible", "cssClass", "tooltip", "tooltipHeader", "editableTitle", "headerFilter", "mutator", "mutateType", "accessor"];
+
+
+		if(col){
+			exists = true;
+		}else{
+			col = {title:header.text().trim()};
+		}
+
+		if(!col.field) {
+			col.field = header.text().trim().toLowerCase().replace(" ", "_");
+		}
+
+		width = header.attr("width");
+
+		if(width && !col.width)	{
+			col.width = width;
+		}
+
+
+		//check for tablator inline options
+		attributes = header[0].attributes;
+
+		//check for tablator inline options
+		for(var i in attributes){
+			var attrib = attributes[i],
+			name;
+
+			if(attrib && attrib.name && attrib.name.indexOf("tabulator-") === 0){
+
+				name = attrib.name.replace("tabulator-", "");
+
+				attribList.forEach(function(key){
+					if(key.toLowerCase() == name){
+						col[key] = self._attribValue(attrib.value);
+					}
+				});
+			}
+		}
+
+		$("td:eq(" + index + ")", rows).data("field", col.field);
+
+		if(col.field == self.table.options.index){
+			hasIndex = true;
+		}
+
+		if(!exists){
+			self.table.options.columns.push(col)
+		}
+
+	});
+};
+
+//generate blank headers
+HtmlTableImport.prototype._generateBlankHeaders = function(element){
+	var self = this;
+
+	var headers = $("tr:first td", element);
+
+	headers.each(function(index){
+		var col = {title:"", field:"col" + index};
+		$("td:eq(" + index + ")", rows).data("field", col.field)
+
+		var width = $(this).attr("width");
+
+		if(width){
+			col.width = width;
+		}
+
+		self.table.options.columns.push(col);
+	});
+};
+
+Tabulator.registerExtension("htmlTableImport", HtmlTableImport);

js/tabulator/src/js/extensions/keybindings.js

@@ -0,0 +1,333 @@
+var Keybindings = function(table){
+	this.table = table; //hold Tabulator object
+	this.watchKeys = null;
+	this.pressedKeys = null;
+};
+
+
+Keybindings.prototype.initialize = function(){
+	var bindings = this.table.options.keybindings,
+	mergedBindings = {};
+
+	this.watchKeys = {};
+	this.pressedKeys = [];
+
+	if(bindings !== false){
+
+		for(let key in this.bindings){
+			mergedBindings[key] = this.bindings[key];
+		}
+
+		if(Object.keys(bindings).length){
+
+			for(let key in bindings){
+				mergedBindings[key] = bindings[key];
+			}
+		}
+
+		this.mapBindings(mergedBindings);
+		this.bindEvents();
+	}
+};
+
+Keybindings.prototype.mapBindings = function(bindings){
+	var self = this;
+
+	for(let key in bindings){
+
+		if(this.actions[key]){
+
+			if(bindings[key]){
+
+				if(typeof bindings[key] !== "object"){
+					bindings[key] = [bindings[key]];
+				}
+
+				bindings[key].forEach(function(binding){
+					self.mapBinding(key, binding);
+				});
+			}
+
+		}else{
+			console.warn("Key Binding Error - no such action:", key);
+		}
+	}
+};
+
+Keybindings.prototype.mapBinding = function(action, symbolsList){
+	var self = this;
+
+	var binding = {
+		action: this.actions[action],
+		keys: [],
+		ctrl: false,
+		shift: false,
+	}
+
+	var symbols = symbolsList.toString().toLowerCase().split(" ").join("").split("+");
+
+	symbols.forEach(function(symbol){
+		switch(symbol){
+			case "ctrl":
+			binding.ctrl = true;
+			break;
+
+			case "shift":
+			binding.shift = true;
+			break;
+
+			default:
+			symbol = parseInt(symbol);
+			binding.keys.push(symbol);
+
+			if(!self.watchKeys[symbol]){
+				self.watchKeys[symbol] = [];
+			}
+
+			self.watchKeys[symbol].push(binding);
+		}
+	});
+};
+
+Keybindings.prototype.bindEvents = function(){
+	var self = this;
+
+	this.table.element.on("keydown", function(e){
+		var code = e.keyCode;
+		var bindings = self.watchKeys[code];
+
+		if(bindings){
+
+			self.pressedKeys.push(code);
+
+			bindings.forEach(function(binding){
+				self.checkBinding(e, binding);
+			});
+		}
+	});
+
+	this.table.element.on("keyup", function(e){
+		var code = e.keyCode;
+		var bindings = self.watchKeys[code];
+
+		if(bindings){
+
+			var index = self.pressedKeys.indexOf(code);
+
+			if(index > -1){
+				self.pressedKeys.splice(index, 1);
+			}
+		}
+	});
+};
+
+
+Keybindings.prototype.checkBinding = function(e, binding){
+	var self = this,
+	match = true;
+
+	if(e.ctrlKey == binding.ctrl && e.shiftKey == binding.shift){
+		binding.keys.forEach(function(key){
+			var index = self.pressedKeys.indexOf(key);
+
+			if(index == -1){
+				match = false;
+			}
+		});
+
+		if(match){
+			binding.action.call(self, e);
+		}
+
+		return true;
+	}
+
+	return false;
+};
+
+//default bindings
+Keybindings.prototype.bindings = {
+	navPrev:"shift + 9",
+	navNext:9,
+	navUp:38,
+	navDown:40,
+	scrollPageUp:33,
+	scrollPageDown:34,
+	scrollToStart:36,
+	scrollToEnd:35,
+	undo:"ctrl + 90",
+	redo:"ctrl + 89",
+};
+
+
+//default actions
+Keybindings.prototype.actions = {
+	keyBlock:function(e){
+		e.stopPropagation();
+		e.preventDefault();
+	},
+	scrollPageUp:function(e){
+		var rowManager = this.table.rowManager,
+		newPos = rowManager.scrollTop - rowManager.height,
+		scrollMax = rowManager.element[0].scrollHeight;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			if(newPos >= 0){
+				rowManager.element.scrollTop(newPos);
+			}else{
+				rowManager.scrollToRow(rowManager.displayRows[0]);
+			}
+		}
+
+		this.table.element.focus();
+	},
+	scrollPageDown:function(e){
+		var rowManager = this.table.rowManager,
+		newPos = rowManager.scrollTop + rowManager.height,
+		scrollMax = rowManager.element[0].scrollHeight;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			if(newPos <= scrollMax){
+				rowManager.element.scrollTop(newPos);
+			}else{
+				rowManager.scrollToRow(rowManager.displayRows[rowManager.displayRows.length - 1]);
+			}
+		}
+
+		this.table.element.focus();
+
+	},
+	scrollToStart:function(e){
+		var rowManager = this.table.rowManager;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			rowManager.scrollToRow(rowManager.displayRows[0]);
+		}
+
+		this.table.element.focus();
+	},
+	scrollToEnd:function(e){
+		var rowManager = this.table.rowManager;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			rowManager.scrollToRow(rowManager.displayRows[rowManager.displayRows.length - 1]);
+		}
+
+		this.table.element.focus();
+	},
+	navPrev:function(e){
+		var cell = false;
+
+		if(this.table.extExists("edit")){
+			cell = this.table.extensions.edit.currentCell;
+
+			if(cell){
+				e.preventDefault();
+				cell.nav().prev();
+			}
+		}
+	},
+
+	navNext:function(e){
+		var cell = false;
+
+		if(this.table.extExists("edit")){
+			cell = this.table.extensions.edit.currentCell;
+
+			if(cell){
+				e.preventDefault();
+				cell.nav().next();
+			}
+		}
+	},
+
+	navLeft:function(e){
+		var cell = false;
+
+		if(this.table.extExists("edit")){
+			cell = this.table.extensions.edit.currentCell;
+
+			if(cell){
+				e.preventDefault();
+				cell.nav().left();
+			}
+		}
+	},
+
+	navRight:function(e){
+		var cell = false;
+
+		if(this.table.extExists("edit")){
+			cell = this.table.extensions.edit.currentCell;
+
+			if(cell){
+				e.preventDefault();
+				cell.nav().right();
+			}
+		}
+	},
+
+	navUp:function(e){
+		var cell = false;
+
+		if(this.table.extExists("edit")){
+			cell = this.table.extensions.edit.currentCell;
+
+			if(cell){
+				e.preventDefault();
+				cell.nav().up();
+			}
+		}
+	},
+
+	navDown:function(e){
+		var cell = false;
+
+		if(this.table.extExists("edit")){
+			cell = this.table.extensions.edit.currentCell;
+
+			if(cell){
+				e.preventDefault();
+				cell.nav().down();
+			}
+		}
+	},
+
+	undo:function(e){
+		var cell = false;
+		if(this.table.options.history && this.table.extExists("history") && this.table.extExists("edit")){
+
+			cell = this.table.extensions.edit.currentCell;
+
+			if(!cell){
+				e.preventDefault();
+				this.table.extensions.history.undo();
+			}
+		}
+	},
+
+	redo:function(e){
+		var cell = false;
+		if(this.table.options.history && this.table.extExists("history") && this.table.extExists("edit")){
+
+			cell = this.table.extensions.edit.currentCell;
+
+			if(!cell){
+				e.preventDefault();
+				this.table.extensions.history.redo();
+			}
+		}
+	},
+
+};
+
+
+Tabulator.registerExtension("keybindings", Keybindings);

js/tabulator/src/js/extensions/layout.js

@@ -0,0 +1,160 @@
+var Layout = function(table){
+	this.table = table;
+	this.mode = null;
+};
+
+//initialize layout system
+Layout.prototype.initialize = function(layout){
+
+	if(this.modes[layout]){
+		this.mode = layout;
+	}else{
+		console.warn("Layout Error - invalid mode set, defaulting to 'fitData' : " + layout);
+		this.mode = 'fitData';
+	}
+
+	this.table.element.attr("tabulator-layout", this.mode);
+};
+
+Layout.prototype.getMode = function(){
+	return this.mode;
+};
+
+//trigger table layout
+Layout.prototype.layout = function(){
+	this.modes[this.mode].call(this, this.table.columnManager.columnsByIndex);
+};
+
+//layout render functions
+Layout.prototype.modes = {
+
+	//resize columns to fit data the contain
+	"fitData": function(columns){
+		columns.forEach(function(column){
+			column.reinitializeWidth();
+		});
+
+		if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
+			this.table.extensions.responsiveLayout.update();
+		}
+	},
+
+	//resize columns to fit data the contain
+	"fitDataFill": function(columns){
+		columns.forEach(function(column){
+			column.reinitializeWidth();
+		});
+
+		if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
+			this.table.extensions.responsiveLayout.update();
+		}
+	},
+
+	//resize columns to fit
+	"fitColumns": function(columns){
+		var self = this;
+
+		var totalWidth = self.table.element.innerWidth(); //table element width
+		var fixedWidth = 0; //total width of columns with a defined width
+		var flexWidth = 0; //total width available to flexible columns
+		var flexColWidth = 0; //desired width of flexible columns
+		var flexColumns = []; //array of flexible width columns
+		var gapFill=0; //number of pixels to be added to final column to close and half pixel gaps
+
+		//ensure columns resize to take up the correct amount of space
+		function scaleColumns(columns, freeSpace, colWidth){
+
+			var oversizeCols = [],
+			oversizeSpace = 0,
+			remainingSpace = 0,
+			nextColWidth = 0,
+			gap = 0,
+			undersizeCols = [];
+
+			columns.forEach(function(column, i){
+				if(column.minWidth >= colWidth){
+					oversizeCols.push(column);
+				}else{
+					undersizeCols.push(column);
+				}
+			});
+
+			if(oversizeCols.length){
+				oversizeCols.forEach(function(column){
+					oversizeSpace += column.minWidth;
+					column.setWidth(column.minWidth);
+				});
+
+				remainingSpace = freeSpace - oversizeSpace;
+
+				nextColWidth = undersizeCols.length ? Math.floor(remainingSpace/undersizeCols.length) : remainingSpace;
+
+				gap = remainingSpace - (nextColWidth * undersizeCols.length);
+
+				gap += scaleColumns(undersizeCols, remainingSpace, nextColWidth);
+			}else{
+				gap = undersizeCols.length ? freeSpace - (Math.floor(freeSpace/undersizeCols.length) * undersizeCols.length) : freeSpace;
+
+				undersizeCols.forEach(function(column){
+					column.setWidth(colWidth);
+				});
+			}
+
+			return gap;
+		}
+
+		if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
+			this.table.extensions.responsiveLayout.update();
+		}
+
+		//adjust for vertical scrollbar if present
+		if(this.table.rowManager.element[0].scrollHeight > this.table.rowManager.element.innerHeight()){
+			totalWidth -= this.table.rowManager.element[0].offsetWidth - this.table.rowManager.element[0].clientWidth;
+		}
+
+		columns.forEach(function(column){
+			var width, minWidth, colWidth;
+
+			if(column.visible){
+
+				width = column.definition.width;
+				minWidth =  parseInt(column.minWidth);
+
+				if(width){
+
+					if(typeof(width) == "string"){
+						if(width.indexOf("%") > -1){
+							colWidth = (totalWidth / 100) * parseInt(width);
+						}else{
+							colWidth = parseInt(width);
+						}
+					}else{
+						colWidth = width;
+					}
+
+					fixedWidth += colWidth > minWidth ? colWidth : minWidth;
+
+				}else{
+					flexColumns.push(column);
+				}
+			}
+		});
+
+		//calculate available space
+		flexWidth = totalWidth - fixedWidth;
+
+		//calculate correct column size
+		flexColWidth = Math.floor(flexWidth / flexColumns.length)
+
+		//generate column widths
+		var gapFill = scaleColumns(flexColumns, flexWidth, flexColWidth);
+
+		//increase width of last column to account for rounding errors
+		if(flexColumns.length){
+			flexColumns[flexColumns.length-1].setWidth(flexColumns[flexColumns.length-1].getWidth() + gapFill);
+		}
+	},
+};
+
+
+Tabulator.registerExtension("layout", Layout);

js/tabulator/src/js/extensions/localize.js

@@ -0,0 +1,196 @@
+var Localize = function(table){
+	this.table = table; //hold Tabulator object
+	this.locale = "default"; //current locale
+	this.lang = false; //current language
+	this.bindings = {}; //update events to call when locale is changed
+};
+
+//set header placehoder
+Localize.prototype.setHeaderFilterPlaceholder = function(placeholder){
+	this.langs.default.headerFilters.default = placeholder;
+};
+
+//set header filter placeholder by column
+Localize.prototype.setHeaderFilterColumnPlaceholder = function(column, placeholder){
+	this.langs.default.headerFilters.columns[column] = placeholder;
+
+	if(this.lang && !this.lang.headerFilters.columns[column]){
+		this.lang.headerFilters.columns[column] = placeholder;
+	}
+};
+
+//setup a lang description object
+Localize.prototype.installLang = function(locale, lang){
+	if(this.langs[locale]){
+		this._setLangProp(this.langs[locale], lang);
+	}else{
+		this.langs[locale] = lang;
+	}
+};
+
+Localize.prototype._setLangProp = function(lang, values){
+	for(let key in values){
+		if(lang[key] && typeof lang[key] == "object"){
+			this._setLangProp(lang[key], values[key])
+		}else{
+			lang[key] = values[key];
+		}
+	}
+};
+
+
+//set current locale
+Localize.prototype.setLocale = function(desiredLocale){
+	var self = this;
+
+	desiredLocale = desiredLocale || "default";
+
+	//fill in any matching languge values
+	function traverseLang(trans, path){
+		for(var prop in trans){
+
+			if(typeof trans[prop] == "object"){
+				if(!path[prop]){
+					path[prop] = {};
+				}
+				traverseLang(trans[prop], path[prop]);
+			}else{
+				path[prop] = trans[prop];
+			}
+		}
+	}
+
+	//determing correct locale to load
+	if(desiredLocale === true && navigator.language){
+		//get local from system
+		desiredLocale = navigator.language.toLowerCase();
+	}
+
+	if(desiredLocale){
+
+		//if locale is not set, check for matching top level locale else use default
+		if(!self.langs[desiredLocale]){
+			let prefix = desiredLocale.split("-")[0];
+
+			if(self.langs[prefix]){
+				console.warn("Localization Error - Exact matching locale not found, using closest match: ", desiredLocale, prefix);
+				desiredLocale = prefix;
+			}else{
+				console.warn("Localization Error - Matching locale not found, using default: ", desiredLocale);
+				desiredLocale = "default";
+			}
+		}
+	}
+
+	self.locale = desiredLocale;
+
+	//load default lang template
+	self.lang = $.extend(true, {}, self.langs.default);
+
+	if(desiredLocale != "default"){
+		traverseLang(self.langs[desiredLocale], self.lang);
+	}
+
+	self.table.options.localized(self.locale, self.lang)
+
+	self._executeBindings();
+};
+
+//get current locale
+Localize.prototype.getLocale = function(locale){
+	return self.locale;
+};
+
+//get lang object for given local or current if none provided
+Localize.prototype.getLang = function(locale){
+	return locale ? this.langs[locale] : this.lang;
+};
+
+//get text for current locale
+Localize.prototype.getText = function(path, value){
+	var path = value ? path + "." + value : path,
+	pathArray = path.split("."),
+	text = this._getLangElement(pathArray, this.locale);
+
+	// if(text === false){
+	// 	console.warn("Localization Error - Matching localized text not found for given path: ", path);
+	// }
+
+	return text || "";
+};
+
+//traverse langs object and find localized copy
+Localize.prototype._getLangElement = function(path, locale){
+	var self = this;
+	var root = self.lang;
+
+	path.forEach(function(level){
+		var rootPath
+
+		if(root){
+			rootPath = root[level];
+
+			if(typeof rootPath != "undefined"){
+				root = rootPath;
+			}else{
+				root = false;
+			}
+		}
+	});
+
+	return root;
+};
+
+//set update binding
+Localize.prototype.bind = function(path, callback){
+	if(!this.bindings[path]){
+		this.bindings[path] = [];
+	}
+
+	this.bindings[path].push(callback);
+
+	callback(this.getText(path), this.lang);
+};
+
+//itterate through bindings and trigger updates
+Localize.prototype._executeBindings = function(){
+	var self = this;
+
+	for(let path in self.bindings){
+		self.bindings[path].forEach(function(binding){
+			binding(self.getText(path), self.lang);
+		});
+	}
+};
+
+//Localized text listings
+Localize.prototype.langs = {
+	"default":{ //hold default locale text
+		"groups":{
+			"item":"item",
+			"items":"items",
+		},
+		"columns":{
+		},
+		"ajax":{
+			"loading":"Loading",
+			"error":"Error",
+		},
+		"pagination":{
+			"first":"First",
+			"first_title":"First Page",
+			"last":"Last",
+			"last_title":"Last Page",
+			"prev":"Prev",
+			"prev_title":"Prev Page",
+			"next":"Next",
+			"next_title":"Next Page",
+		},
+		"headerFilters":{
+			"default":"filter column...",
+			"columns":{}
+		}
+	},
+};
+
+Tabulator.registerExtension("localize", Localize);

js/tabulator/src/js/extensions/moveable_columns.js

@@ -0,0 +1,187 @@
+var MoveColumns = function(table){
+	this.table = table; //hold Tabulator object
+	this.placeholderElement = $("<div class='tabulator-col tabulator-col-placeholder'></div>");
+	this.hoverElement = $(); //floating column header element
+	this.checkTimeout = false; //click check timeout holder
+	this.checkPeriod = 250; //period to wait on mousedown to consider this a move and not a click
+	this.moving = false; //currently moving column
+	this.toCol = false; //destination column
+	this.toColAfter = false; //position of moving column relative to the desitnation column
+	this.startX = 0; //starting position within header element
+	this.autoScrollMargin = 40; //auto scroll on edge when within margin
+	this.autoScrollStep = 5; //auto scroll distance in pixels
+	this.autoScrollTimeout = false; //auto scroll timeout
+
+	this.moveHover = this.moveHover.bind(this);
+	this.endMove = this.endMove.bind(this);
+};
+
+MoveColumns.prototype.initializeColumn = function(column){
+	var self = this,
+	config = {};
+
+	if(!column.extensions.frozen){
+
+		config.mousemove = function(e){
+			if(column.parent === self.moving.parent){
+				if(((e.pageX - column.element.offset().left) + self.table.columnManager.element.scrollLeft()) > (column.getWidth() / 2)){
+					if(self.toCol !== column || !self.toColAfter){
+						column.element.after(self.placeholderElement);
+						self.moveColumn(column, true);
+					}
+				}else{
+					if(self.toCol !== column || self.toColAfter){
+						column.element.before(self.placeholderElement);
+						self.moveColumn(column, false);
+					}
+				}
+			}
+		}.bind(self)
+
+		column.getElement().on("mousedown", function(e){
+			self.checkTimeout = setTimeout(function(){
+				self.startMove(e, column);
+			}, self.checkPeriod)
+		});
+
+		column.getElement().on("mouseup", function(e){
+			if(self.checkTimeout){
+				clearTimeout(self.checkTimeout);
+			}
+		});
+	}
+
+	column.extensions.moveColumn = config;
+};
+
+MoveColumns.prototype.startMove = function(e, column){
+	var self = this,
+	element = column.getElement();
+
+
+	self.moving = column;
+	self.startX = (e.pageX - element.offset().left);
+
+	self.table.element.addClass("tabulator-block-select");
+
+	//create placeholder
+	self.placeholderElement.css({
+		width:column.getWidth(),
+		height:column.getHeight(),
+	});
+	element.before(self.placeholderElement)
+	element.detach();
+
+	//create hover element
+	self.hoverElement = element.clone();
+	self.hoverElement.addClass("tabulator-moving");
+
+	self.table.columnManager.getElement().append(self.hoverElement);
+	self.hoverElement.css({
+		"left":0,
+		"bottom":0,
+	});
+
+	self._bindMouseMove();
+
+	$("body").on("mousemove", self.moveHover)
+	$("body").on("mouseup", self.endMove)
+
+	self.moveHover(e);
+};
+
+MoveColumns.prototype._bindMouseMove = function(){
+	var self = this;
+
+	self.table.columnManager.columnsByIndex.forEach(function(column){
+		if(column.extensions.moveColumn.mousemove){
+			column.element.on("mousemove", column.extensions.moveColumn.mousemove);
+		}
+	});
+};
+
+MoveColumns.prototype._unbindMouseMove = function(){
+	var self = this;
+
+	self.table.columnManager.columnsByIndex.forEach(function(column){
+		if(column.extensions.moveColumn.mousemove){
+			column.element.off("mousemove", column.extensions.moveColumn.mousemove);
+		}
+	});
+};
+
+MoveColumns.prototype.moveColumn = function(column, after){
+	var self = this,
+	movingCells = this.moving.getCells();
+
+	self.toCol = column;
+	self.toColAfter = after;
+
+	if(after){
+		column.getCells().forEach(function(cell, i){
+			cell.getElement().after(movingCells[i].getElement())
+		});
+	}else{
+		column.getCells().forEach(function(cell, i){
+			cell.getElement().before(movingCells[i].getElement())
+		});
+	}
+};
+
+MoveColumns.prototype.endMove = function(column){
+	var self = this;
+
+	self._unbindMouseMove();
+
+	self.placeholderElement.after(self.moving.getElement());
+	self.placeholderElement.detach();
+	self.hoverElement.detach();
+
+	self.table.element.removeClass("tabulator-block-select");
+
+	if(self.toCol){
+		self.table.columnManager.moveColumn(self.moving, self.toCol, self.toColAfter);
+	}
+
+	self.moving = false;
+	self.toCol = false;
+	self.toColAfter = false;
+
+	$("body").off("mousemove", self.moveHover);
+	$("body").off("mouseup", self.endMove);
+};
+
+MoveColumns.prototype.moveHover = function(e){
+	var self = this,
+	columnHolder = self.table.columnManager.getElement(),
+	scrollLeft = columnHolder.scrollLeft(),
+	xPos = (e.pageX - columnHolder.offset().left) + scrollLeft,
+	scrollPos;
+
+	self.hoverElement.css({
+		"left":xPos - self.startX,
+	});
+
+
+	if(xPos - scrollLeft < self.autoScrollMargin){
+		if(!self.autoScrollTimeout){
+			self.autoScrollTimeout = setTimeout(function(){
+				scrollPos = Math.max(0,scrollLeft-5);
+				self.table.rowManager.getElement().scrollLeft(scrollPos);
+				self.autoScrollTimeout = false;
+			}, 1);
+		}
+	}
+
+	if(scrollLeft + columnHolder.innerWidth() - xPos < self.autoScrollMargin){
+		if(!self.autoScrollTimeout){
+			self.autoScrollTimeout = setTimeout(function(){
+				scrollPos = Math.min(columnHolder.innerWidth(), scrollLeft+5);
+				self.table.rowManager.getElement().scrollLeft(scrollPos);
+				self.autoScrollTimeout = false;
+			}, 1);
+		}
+	}
+};
+
+Tabulator.registerExtension("moveColumn", MoveColumns);

js/tabulator/src/js/extensions/moveable_rows.js

@@ -0,0 +1,172 @@
+var MoveRows = function(table){
+
+	this.table = table; //hold Tabulator object
+	this.placeholderElement = $("<div class='tabulator-row tabulator-row-placeholder'></div>");
+	this.hoverElement = $(); //floating row header element
+	this.checkTimeout = false; //click check timeout holder
+	this.checkPeriod = 150; //period to wait on mousedown to consider this a move and not a click
+	this.moving = false; //currently moving row
+	this.toRow = false; //destination row
+	this.toRowAfter = false; //position of moving row relative to the desitnation row
+	this.hasHandle = false; //row has handle instead of fully movable row
+	this.startY = 0; //starting position within header element
+
+	this.moveHover = this.moveHover.bind(this);
+	this.endMove = this.endMove.bind(this);
+};
+
+MoveRows.prototype.setHandle = function(handle){
+	this.hasHandle = handle;
+};
+
+MoveRows.prototype.initializeRow = function(row){
+	var self = this,
+	config = {};
+
+	config.mousemove = function(e){
+		if(((e.pageY - row.element.offset().top) + self.table.rowManager.element.scrollTop()) > (row.getHeight() / 2)){
+			if(self.toRow !== row || !self.toRowAfter){
+				row.element.after(self.placeholderElement);
+				self.moveRow(row, true);
+			}
+		}else{
+			if(self.toRow !== row || self.toRowAfter){
+				row.element.before(self.placeholderElement);
+				self.moveRow(row, false);
+			}
+		}
+	}.bind(self);
+
+	if(!this.hasHandle){
+
+		row.getElement().on("mousedown", function(e){
+			self.checkTimeout = setTimeout(function(){
+				self.startMove(e, row);
+			}, self.checkPeriod);
+		});
+
+		row.getElement().on("mouseup", function(e){
+			if(self.checkTimeout){
+				clearTimeout(self.checkTimeout);
+			}
+		});
+	}
+
+	row.extensions.moveRow = config;
+};
+
+MoveRows.prototype.initializeCell = function(cell){
+	var self = this;
+
+	cell.getElement().on("mousedown", function(e){
+		self.checkTimeout = setTimeout(function(){
+			self.startMove(e, cell.row);
+		}, self.checkPeriod);
+	});
+
+	cell.getElement().on("mouseup", function(e){
+		if(self.checkTimeout){
+			clearTimeout(self.checkTimeout);
+		}
+	});
+};
+
+MoveRows.prototype._bindMouseMove = function(){
+	var self = this;
+
+	self.table.rowManager.displayRows.forEach(function(row){
+		if(row.type === "row" && row.extensions.moveRow.mousemove){
+			row.element.on("mousemove", row.extensions.moveRow.mousemove);
+		}
+	});
+};
+
+MoveRows.prototype._unbindMouseMove = function(){
+	var self = this;
+
+	self.table.rowManager.displayRows.forEach(function(row){
+		if(row.type === "row" && row.extensions.moveRow.mousemove){
+			row.element.off("mousemove", row.extensions.moveRow.mousemove);
+		}
+	});
+};
+
+MoveRows.prototype.startMove = function(e, row){
+	var self = this,
+	element = row.getElement();
+
+	self.moving = row;
+	self.startY = (e.pageY - element.offset().top);
+
+	self.table.element.addClass("tabulator-block-select");
+
+	//create placeholder
+	self.placeholderElement.css({
+		width:row.getWidth(),
+		height:row.getHeight(),
+	});
+	element.before(self.placeholderElement)
+	element.detach();
+
+	//create hover element
+	self.hoverElement = element.clone();
+	self.hoverElement.addClass("tabulator-moving");
+
+	self.table.rowManager.getTableElement().append(self.hoverElement);
+	self.hoverElement.css({
+		"left":0,
+		"top":0,
+	});
+
+
+	self._bindMouseMove();
+
+	$("body").on("mousemove", self.moveHover);
+	$("body").on("mouseup", self.endMove);
+
+	self.moveHover(e);
+};
+
+MoveRows.prototype.endMove = function(column){
+	var self = this;
+
+	self._unbindMouseMove();
+
+	self.placeholderElement.after(self.moving.getElement());
+	self.placeholderElement.detach();
+	self.hoverElement.detach();
+
+	self.table.element.removeClass("tabulator-block-select");
+
+	if(self.toRow){
+		self.table.rowManager.moveRow(self.moving, self.toRow, self.toRowAfter);
+	}
+
+	self.moving = false;
+	self.toRow = false;
+	self.toRowAfter = false;
+
+	$("body").off("mousemove", self.moveHover);
+	$("body").off("mouseup", self.endMove);
+};
+
+MoveRows.prototype.moveRow = function(row, after){
+	var self = this;
+
+	self.toRow = row;
+	self.toRowAfter = after;
+};
+
+MoveRows.prototype.moveHover = function(e){
+	var self = this,
+	rowHolder = self.table.rowManager.getElement(),
+	scrollTop = rowHolder.scrollTop(),
+	yPos = (e.pageY - rowHolder.offset().top) + scrollTop,
+	scrollPos;
+
+	self.hoverElement.css({
+		"top":yPos - self.startY,
+	});
+};
+
+Tabulator.registerExtension("moveRow", MoveRows);

js/tabulator/src/js/extensions/mutator.js

@@ -0,0 +1,58 @@
+var Mutator = function(table){
+	this.table = table; //hold Tabulator object
+};
+
+//initialize column mutator
+Mutator.prototype.initializeColumn = function(column){
+
+	var config = {mutator:false, type:column.definition.mutateType, params:column.definition.mutatorParams || {}};
+
+	//set column mutator
+	switch(typeof column.definition.mutator){
+		case "string":
+		if(this.mutators[column.definition.mutator]){
+			config.mutator = this.mutators[column.definition.mutator]
+		}else{
+			console.warn("Mutator Error - No such mutator found, ignoring: ", column.definition.mutator);
+		}
+		break;
+
+		case "function":
+		config.mutator = column.definition.mutator;
+		break;
+	}
+
+	if(config.mutator){
+		column.extensions.mutate = config;
+	}
+};
+
+//apply mutator to row
+Mutator.prototype.transformRow = function(data){
+	var self = this;
+
+	self.table.columnManager.traverse(function(column){
+		var field;
+
+		if(column.extensions.mutate){
+
+			field = column.getField();
+
+			if(column.extensions.mutate.type != "edit"){
+				column.setFieldValue(data, column.extensions.mutate.mutator(column.getFieldValue(data), data, "data", column.extensions.mutate.params));
+			}
+		}
+	});
+
+	return data;
+};
+
+//apply mutator to new cell value
+Mutator.prototype.transformCell = function(cell, value){
+	return cell.column.extensions.mutate.mutator(value, cell.row.getData(), "edit", cell.column.extensions.mutate.params, cell.getComponent())
+};
+
+//default mutators
+Mutator.prototype.mutators = {};
+
+Tabulator.registerExtension("mutator", Mutator);

js/tabulator/src/js/extensions/page.js

@@ -0,0 +1,412 @@
+var Page = function(table){
+
+	this.table = table; //hold Tabulator object
+
+	this.element = $("<span class='tabulator-paginator'></span>");
+	this.pagesElement = $("<span class='tabulator-pages'></span>");
+	this.firstBut = $("<button class='tabulator-page' data-page='first' role='button' aria-label='' title=''></button>");
+	this.prevBut = $("<button class='tabulator-page' data-page='prev' role='button' aria-label='' title=''></button>");
+	this.nextBut = $("<button class='tabulator-page' data-page='next' role='button' aria-label='' title=''></button>");
+	this.lastBut = $("<button class='tabulator-page' data-page='last' role='button' aria-label='' title=''></button>");
+
+	this.mode = "local";
+	this.size = 0;
+	this.page = 1;
+	this.max = 1;
+	this.paginator = false;
+};
+
+//setup pageination
+Page.prototype.initialize = function(){
+	var self = this;
+
+	//update param names
+	for(let key in self.table.options.paginationDataSent){
+		self.paginationDataSentNames[key] = self.table.options.paginationDataSent[key];
+	}
+
+	for(let key in self.table.options.paginationDataReceived){
+		self.paginationDataReceivedNames[key] = self.table.options.paginationDataReceived[key];
+	}
+
+	if(self.table.options.paginator){
+		self.paginator = self.table.options.paginator;
+	}
+
+
+	//build pagination element
+
+	//bind localizations
+	self.table.extensions.localize.bind("pagination.first", function(value){
+		self.firstBut.html(value);
+	});
+
+	self.table.extensions.localize.bind("pagination.first_title", function(value){
+		self.firstBut.attr("aria-label", value)
+		.attr("title", value);
+	});
+
+	self.table.extensions.localize.bind("pagination.prev", function(value){
+		self.prevBut.html(value);
+	});
+
+	self.table.extensions.localize.bind("pagination.prev_title", function(value){
+		self.prevBut.attr("aria-label", value)
+		.attr("title", value);
+	});
+
+	self.table.extensions.localize.bind("pagination.next", function(value){
+		self.nextBut.html(value);
+	});
+
+	self.table.extensions.localize.bind("pagination.next_title", function(value){
+		self.nextBut.attr("aria-label", value)
+		.attr("title", value);
+	});
+
+	self.table.extensions.localize.bind("pagination.last", function(value){
+		self.lastBut.html(value);
+	});
+
+	self.table.extensions.localize.bind("pagination.last_title", function(value){
+		self.lastBut.attr("aria-label", value)
+		.attr("title", value);
+	});
+
+	//click bindings
+	self.firstBut.on("click", function(){
+		self.setPage(1);
+	});
+
+	self.prevBut.on("click", function(){
+		self.previousPage();
+	});
+
+	self.nextBut.on("click", function(){
+		self.nextPage();
+	});
+
+	self.lastBut.on("click", function(){
+		self.setPage(self.max);
+	});
+
+	if(self.table.options.paginationElement){
+		self.element = self.table.options.paginationElement;
+	}
+
+	//append to DOM
+	self.element.append(self.firstBut);
+	self.element.append(self.prevBut);
+	self.element.append(self.pagesElement);
+	self.element.append(self.nextBut);
+	self.element.append(self.lastBut);
+
+	if(!self.table.options.paginationElement){
+		self.table.footerManager.append(self.element, self);
+	}
+
+
+	//set default values
+	self.mode = self.table.options.pagination;
+	self.size = self.table.options.paginationSize || Math.floor(self.table.rowManager.getElement().innerHeight() / 26);
+};
+
+//calculate maximum page from number of rows
+Page.prototype.setMaxRows = function(rowCount){
+
+	if(!rowCount){
+		this.max = 1;
+	}else{
+		this.max = Math.ceil(rowCount/this.size);
+	}
+
+	if(this.page > this.max){
+		this.page = this.max;
+	}
+};
+
+//reset to first page without triggering action
+Page.prototype.reset = function(force){
+	if(this.mode == "local" || force){
+		this.page = 1;
+	}
+	return true;
+};
+
+//set the maxmum page
+Page.prototype.setMaxPage = function(max){
+	this.max = max || 1;
+
+	if(this.page > this.max){
+		this.page = this.max;
+		this.trigger();
+	}
+};
+
+//set current page number
+Page.prototype.setPage = function(page){
+	if(page > 0 && page <= this.max){
+		this.page = page;
+		this.trigger();
+		return true;
+	}else{
+		console.warn("Pagination Error - Requested page is out of range of 1 - " + this.max + ":", page);
+		return false;
+	}
+};
+
+Page.prototype.setPageSize = function(size){
+	if(size > 0){
+		this.size = size;
+	}
+};
+
+
+//setup the pagination buttons
+Page.prototype._setPageButtons = function(){
+	var self = this;
+
+	var min = this.page < this.max-2 ? (this.page - 2) : (this.page - (4 - (this.max - this.page)));
+	var max = this.page > 3 ? (this.page + 2) : (this.page + (5 - this.page));
+
+	self.pagesElement.empty();
+
+	if(self.page == 1){
+		self.firstBut.prop("disabled", true);
+		self.prevBut.prop("disabled", true);
+	}else{
+		self.firstBut.prop("disabled", false);
+		self.prevBut.prop("disabled", false);
+	}
+
+	if(self.page == self.max){
+		self.lastBut.prop("disabled", true);
+		self.nextBut.prop("disabled", true);
+	}else{
+		self.lastBut.prop("disabled", false);
+		self.nextBut.prop("disabled", false);
+	}
+
+	for(let i = min; i <= max; i++){
+		if(i>0 && i <= self.max){
+			self.pagesElement.append(self._generatePageButton(i));
+		}
+	}
+
+	this.footerRedraw();
+};
+
+Page.prototype._generatePageButton = function(page){
+	var self = this;
+	var button = $("<button class='tabulator-page " + (page == self.page ? "active" : "") + "' data-page='" + page + "' role='button' arpagea-label='Show Page " + page + "'>" + page + "</button>");
+
+	button.on("click", function(e){
+		self.setPage(page);
+	});
+
+	return button;
+};
+
+//previous page
+Page.prototype.previousPage = function(){
+	if(this.page > 1){
+		this.page--;
+		this.trigger();
+		return true;
+	}else{
+		console.warn("Pagination Error - Previous page would be less than page 1:", 0);
+		return false;
+	}
+};
+
+//next page
+Page.prototype.nextPage = function(){
+	if(this.page < this.max){
+		this.page++;
+		this.trigger();
+		return true;
+	}else{
+		console.warn("Pagination Error - Next page would be greater than maximum page of " + this.max + ":", this.max + 1);
+		return false;
+	}
+};
+
+//return current page number
+Page.prototype.getPage = function(){
+	return this.page;
+};
+
+//return max page number
+Page.prototype.getPageMax = function(){
+	return this.max;
+};
+
+Page.prototype.getPageSize = function(size){;
+	return this.size;
+};
+
+Page.prototype.getMode = function(){
+	return this.mode;
+};
+
+//return appropriate rows for current page
+Page.prototype.getRows = function(data){
+	var output, start, end;
+
+	if(this.mode == "local"){
+		output = [];
+		start = this.size * (this.page - 1);
+		end = start + parseInt(this.size);
+
+		this._setPageButtons();
+
+		for(let i = start; i < end; i++){
+			if(data[i]){
+				output.push(data[i]);
+			}
+		}
+
+		return output;
+	}else{
+
+		this._setPageButtons();
+
+		return data.slice(0);
+	}
+};
+
+Page.prototype.trigger = function(){
+	switch(this.mode){
+		case "local":
+		this.table.rowManager.refreshActiveData();
+		this.table.options.pageLoaded(this.getPage());
+		break;
+
+		case "remote":
+		this._getRemotePage();
+		break;
+
+		default:
+		console.warn("Pagination Error - no such pagination mode:", this.mode);
+	}
+};
+
+Page.prototype._getRemotePage = function(){
+	if(this.table.extExists("ajax", true)){
+
+		if(this.paginator){
+			this._getRemotePagePaginator();
+		}else{
+			this._getRemotePageAuto();
+		}
+	}
+};
+
+Page.prototype._getRemotePagePaginator = function(){
+	var self = this,
+	ajax = self.table.extensions.ajax,
+	oldUrl = ajax.getUrl();
+
+	ajax.setUrl(self.paginator(ajax.getUrl(), self.page, self.size, ajax.getParams()))
+
+	ajax.sendRequest(function(data){
+		self._parseRemoteData(data);
+	});
+
+	ajax.setUrl(oldUrl);
+};
+
+Page.prototype._getRemotePageAuto = function(){
+	var self = this,
+	oldParams, pageParams;
+
+	//record old params and restore after request has been made
+	oldParams = $.extend(true, {}, self.table.extensions.ajax.getParams());
+	pageParams = self.table.extensions.ajax.getParams();
+
+	//configure request params
+	pageParams[this.paginationDataSentNames.page] = self.page;
+
+	//set page size if defined
+	if(this.size){
+		pageParams[this.paginationDataSentNames.size] = this.size;
+	}
+
+	//set sort data if defined
+	if(this.table.extExists("sort")){
+		let sorters = self.table.extensions.sort.getSort();
+
+		sorters.forEach(function(item){
+			delete item.column;
+		});
+
+		pageParams[this.paginationDataSentNames.sorters] = sorters;
+	}
+
+	//set filter data if defined
+	if(this.table.extExists("filter")){
+		let filters = self.table.extensions.filter.getFilters(true, true);
+		pageParams[this.paginationDataSentNames.filters] = filters;
+	}
+
+	self.table.extensions.ajax.setParams(pageParams);
+
+	self.table.extensions.ajax.sendRequest(function(data){
+		self._parseRemoteData(data);
+	});
+
+	self.table.extensions.ajax.setParams(oldParams);
+};
+
+
+
+Page.prototype._parseRemoteData = function(data){
+	if(data[this.paginationDataReceivedNames.last_page]){
+		if(data[this.paginationDataReceivedNames.data]){
+			this.max = parseInt(data[this.paginationDataReceivedNames.last_page]);
+
+			this.table.rowManager.setData(data[this.paginationDataReceivedNames.data]);
+
+			this.table.options.pageLoaded(this.getPage());
+		}else{
+			console.warn("Remote Pagination Error - Server response missing '" + this.paginationDataReceivedNames.data + "' property");
+		}
+	}else{
+		console.warn("Remote Pagination Error - Server response missing '" + this.paginationDataReceivedNames.last_page + "' property");
+	}
+};
+
+//handle the footer element being redrawn
+Page.prototype.footerRedraw = function(){
+	var footer = this.table.footerManager.element;
+
+	if((footer.innerWidth() - footer[0].scrollWidth) < 0){
+		this.pagesElement.hide();
+	}else{
+		this.pagesElement.show();
+
+		if((footer.innerWidth() - footer[0].scrollWidth) < 0){
+			this.pagesElement.hide();
+		}
+	}
+};
+
+//set the paramter names for pagination requests
+Page.prototype.paginationDataSentNames = {
+	"page":"page",
+	"size":"size",
+	"sorters":"sorters",
+	// "sort_dir":"sort_dir",
+	"filters":"filters",
+	// "filter_value":"filter_value",
+	// "filter_type":"filter_type",
+};
+
+//set the property names for pagination responses
+Page.prototype.paginationDataReceivedNames = {
+	"current_page":"current_page",
+	"last_page":"last_page",
+	"data":"data",
+};
+
+Tabulator.registerExtension("page", Page);

js/tabulator/src/js/extensions/persistent_layout.js

@@ -0,0 +1,155 @@
+var PersistentLayout = function(table){
+	this.table = table; //hold Tabulator object
+	this.mode = "";
+	this.id = "";
+	this.persistProps = ["field", "width", "visible"];
+};
+
+//setup parameters
+PersistentLayout.prototype.initialize = function(mode, id){
+	//determine persistent layout storage type
+	this.mode = mode !== true ?  mode : (typeof window.localStorage !== 'undefined' ? "local" : "cookie");
+
+	//set storage tag
+	this.id = "tabulator-" + (id || (this.table.element.attr("id") || ""));
+};
+
+//load saved definitions
+PersistentLayout.prototype.load = function(definition){
+
+	var newDefinition = "";
+
+	switch(this.mode){
+		case "local":
+		newDefinition = localStorage.getItem(this.id);
+		break;
+
+		case "cookie":
+
+		//find cookie
+		let cookie = document.cookie,
+		cookiePos = cookie.indexOf(this.id + "="),
+		end;
+
+		//if cookie exists, decode and load column data into tabulator
+		if(cookiePos > -1){
+			cookie = cookie.substr(cookiePos);
+
+			end = cookie.indexOf(";");
+
+			if(end > -1){
+				cookie = cookie.substr(0, end);
+			}
+
+			newDefinition = cookie.replace(this.id + "=", "");
+		}
+		break;
+
+		default:
+		console.warn("Persistance Load Error - invalid mode selected", this.mode);
+	}
+
+	if(newDefinition){
+		newDefinition = JSON.parse(newDefinition);
+
+		definition = this.mergeDefinition(definition, newDefinition);
+	}
+
+	return definition;
+};
+
+//merge old and new column defintions
+PersistentLayout.prototype.mergeDefinition = function(oldCols, newCols){
+	var self = this,
+	output = [];
+
+	newCols.forEach(function(column, to){
+
+		var from = self._findColumn(oldCols, column);
+
+		if(from){
+
+			from.width = column.width;
+			from.visible = column.visible;
+
+			if(from.columns){
+				from.columns = self.mergeDefinition(from.columns, column.columns);
+			}
+
+			output.push(from);
+		}
+
+	});
+
+	return output;
+};
+
+//find matching columns
+PersistentLayout.prototype._findColumn = function(columns, subject){
+	var type = subject.columns ? "group" : (subject.field ? "field" : "object");
+
+	return columns.find(function(col){
+		switch(type){
+			case "group":
+			return col.title === subject.title && col.columns.length === subject.columns.length;
+			break;
+
+			case "field":
+			return col.field === subject.field;
+			break;
+
+			case "object":
+			return col === subject;
+			break;
+		}
+	})
+};
+
+//save current definitions
+PersistentLayout.prototype.save = function(){
+	var definition = this.parseColumns(this.table.columnManager.getColumns()),
+	data = JSON.stringify(definition);
+
+	switch(this.mode){
+		case "local":
+		localStorage.setItem(this.id, data);
+		break;
+
+		case "cookie":
+		let expireDate = new Date();
+		expireDate.setDate(expireDate.getDate() + 10000);
+
+		//save cookie
+		document.cookie = this.id + "=" + data + "; expires=" + expireDate.toUTCString();
+		break;
+
+		default:
+		console.warn("Persistance Save Error - invalid mode selected", this.mode);
+	}
+};
+
+//build premission list
+PersistentLayout.prototype.parseColumns = function(columns){
+	var self = this,
+	definitions = [];
+
+	columns.forEach(function(column){
+		var def = {};
+
+		if(column.isGroup){
+			def.title = column.getDefinition().title;
+			def.columns = self.parseColumns(column.getColumns());
+		}else{
+			def.title = column.getDefinition().title;
+			def.field = column.getField();
+			def.width = column.getWidth();
+			def.visible = column.visible;
+		}
+
+		definitions.push(def);
+	});
+
+	return definitions;
+};
+
+Tabulator.registerExtension("persistentLayout", PersistentLayout);

js/tabulator/src/js/extensions/resize_columns.js

@@ -0,0 +1,119 @@
+var ResizeColumns = function(table){
+	this.table = table; //hold Tabulator object
+	this.startColumn = false;
+	this.startX = false;
+	this.startWidth = false;
+	this.handle = null;
+	this.prevHandle = null;
+};
+
+ResizeColumns.prototype.initializeColumn = function(type, column, element){
+	var self = this,
+	variableHeight =false,
+	mode = this.table.options.resizableColumns;
+
+	//set column resize mode
+	if(type === "header"){
+		variableHeight = column.definition.formatter == "textarea" || column.definition.variableHeight;
+		column.extensions.resize = {variableHeight:variableHeight};
+	}
+
+	if(mode === true || mode == type){
+
+		var handle = document.createElement('div');
+		handle.className = "tabulator-col-resize-handle";
+
+
+		var prevHandle = document.createElement('div');
+		prevHandle.className = "tabulator-col-resize-handle prev";
+
+		handle.addEventListener("click", function(e){
+			e.stopPropagation();
+		});
+
+		handle.addEventListener("mousedown", function(e){
+			var nearestColumn = column.getLastColumn();
+
+			if(nearestColumn){
+				self.startColumn = column;
+				self._mouseDown(e, nearestColumn);
+			}
+		});
+
+		prevHandle.addEventListener("click", function(e){
+			e.stopPropagation();
+		});
+
+		prevHandle.addEventListener("mousedown", function(e){
+			var nearestColumn, colIndex, prevColumn;
+
+			nearestColumn = column.getFirstColumn();
+
+			if(nearestColumn){
+				colIndex = self.table.columnManager.findColumnIndex(nearestColumn);
+				prevColumn = colIndex > 0 ? self.table.columnManager.getColumnByIndex(colIndex - 1) : false;
+
+				if(prevColumn){
+					self.startColumn = column;
+					self._mouseDown(e, prevColumn);
+				}
+			}
+		});
+
+		element.append(handle)
+		.append(prevHandle);
+	}
+};
+
+ResizeColumns.prototype._mouseDown = function(e, column){
+	var self = this;
+
+	self.table.element.addClass("tabulator-block-select");
+
+	function mouseMove(e){
+		column.setWidth(self.startWidth + (e.screenX - self.startX));
+
+		if(!self.table.browserSlow && column.extensions.resize && column.extensions.resize.variableHeight){
+			column.checkCellHeights();
+		}
+	}
+
+	function mouseUp(e){
+
+		//block editor from taking action while resizing is taking place
+		if(self.startColumn.extensions.edit){
+			self.startColumn.extensions.edit.blocked = false;
+		}
+
+		if(self.table.browserSlow && column.extensions.resize && column.extensions.resize.variableHeight){
+			column.checkCellHeights();
+		}
+
+		$("body").off("mouseup", mouseMove);
+		$("body").off("mousemove", mouseMove);
+
+		self.table.element.removeClass("tabulator-block-select");
+
+		if(self.table.options.persistentLayout && self.table.extExists("persistentLayout", true)){
+			self.table.extensions.persistentLayout.save();
+		}
+
+		self.table.options.columnResized(self.startColumn.getComponent())
+	}
+
+	e.stopPropagation(); //prevent resize from interfereing with movable columns
+
+	//block editor from taking action while resizing is taking place
+	if(self.startColumn.extensions.edit){
+		self.startColumn.extensions.edit.blocked = true;
+	}
+
+	self.startX = e.screenX;
+	self.startWidth = column.getWidth();
+
+	$("body").on("mousemove", mouseMove);
+
+	$("body").on("mouseup", mouseUp);
+};
+
+Tabulator.registerExtension("resizeColumns", ResizeColumns);

js/tabulator/src/js/extensions/responsive_layout.js

@@ -0,0 +1,84 @@
+var ResponsiveLayout = function(table){
+	this.table = table; //hold Tabulator object
+	this.columns = [];
+	this.index = 0;
+};
+
+//generate resposivle columns list
+ResponsiveLayout.prototype.initialize = function(){
+	var columns=[];
+
+	//detemine level of responsivity for each column
+	this.table.columnManager.columnsByIndex.forEach(function(column){
+		var def = column.getDefinition();
+
+		column.extensions.responsive = {order: typeof def.responsive === "undefined" ? 1 : def.responsive};
+
+		if(column.extensions.responsive.order){
+			columns.push(column);
+		}
+	});
+
+
+	//sort list by responsivity
+	columns = columns.reverse();
+	columns = columns.sort(function(a, b){
+		return b.extensions.responsive.order - a.extensions.responsive.order;
+	});
+
+	this.columns = columns;
+};
+
+ResponsiveLayout.prototype.update = function(){
+	var self = this,
+	working = true;
+
+	while(working){
+
+		let width = self.table.extensions.layout.getMode() == "fitColumns" ? self.table.columnManager.getFlexBaseWidth() : self.table.columnManager.getWidth();
+
+		let diff = self.table.columnManager.element.innerWidth() - width;
+
+		if(diff < 0){
+			//table is too wide
+			let column = self.columns[self.index];
+
+			if(column){
+				column.hide();
+				self.index ++;
+			}else{
+				working = false;
+			}
+
+		}else{
+
+			//table has spare space
+			let column = self.columns[self.index -1];
+
+			if(column){
+				if(diff > 0){
+					if(diff >= column.getWidth()){
+						column.show();
+
+						//set column width to prevent calculation loops on uninitialized columns
+						column.setWidth(column.getWidth());
+
+						self.index --;
+					}else{
+						working = false;
+					}
+				}else{
+					working = false;
+				}
+			}else{
+				working = false;
+			}
+		}
+
+		if(!self.table.rowManager.activeRowsCount){
+			self.table.rowManager.renderEmptyScroll();
+		}
+	}
+};
+
+Tabulator.registerExtension("responsiveLayout", ResponsiveLayout);

js/tabulator/src/js/extensions/select_row.js

@@ -0,0 +1,242 @@
+var SelectRow = function(table){
+	this.table = table; //hold Tabulator object
+	this.selecting = false; //flag selecting in progress
+	this.selectPrev = []; //hold previously selected element for drag drop selection
+	this.selectedRows = []; //hold selected rows
+};
+
+SelectRow.prototype.clearSelectionData = function(){
+	this.selecting = false;
+	this.selectPrev = [];
+	this.selectedRows = [];
+};
+
+SelectRow.prototype.initializeRow = function(row){
+	var self = this,
+	element = row.getElement();
+
+	// trigger end of row selection
+	var endSelect = function(){
+
+		setTimeout(function(){
+			self.selecting = false;
+		}, 50)
+
+		$("body").off("mouseup", endSelect);
+	}
+
+
+	row.extensions.select = {selected:false};
+
+	//set row selection class
+	if(self.table.options.selectableCheck(row.getComponent())){
+		element.addClass("tabulator-selectable").removeClass("tabulator-unselectable");
+
+		if(self.table.options.selectable && self.table.options.selectable != "highlight"){
+			element.on("click", function(e){
+				if(!self.selecting){
+					self.toggleRow(row);
+				}
+			});
+
+			element.on("mousedown", function(e){
+				if(e.shiftKey){
+					self.selecting = true;
+
+					self.selectPrev = [];
+
+					$("body").on("mouseup", endSelect);
+					$("body").on("keyup", endSelect);
+
+					self.toggleRow(row);
+
+					return false;
+				}
+			});
+
+			element.on("mouseenter", function(e){
+				if(self.selecting){
+					self.toggleRow(row);
+
+					if(self.selectPrev[1] == row){
+						self.toggleRow(self.selectPrev[0]);
+					}
+				}
+			});
+
+			element.on("mouseout", function(e){
+				if(self.selecting){
+					self.selectPrev.unshift(row);
+				}
+			});
+		}
+
+	}else{
+		row.getElement().addClass("tabulator-unselectable").removeClass("tabulator-selectable");
+	}
+};
+
+//toggle row selection
+SelectRow.prototype.toggleRow = function(row){
+	if(this.table.options.selectableCheck(row.getComponent())){
+		if(row.extensions.select.selected){
+			this._deselectRow(row);
+		}else{
+			this._selectRow(row);
+		}
+	}
+};
+
+//select a number of rows
+SelectRow.prototype.selectRows = function(rows){
+	var self = this;
+
+	switch(typeof rows){
+		case "undefined":
+		self.table.rowManager.rows.forEach(function(row){
+			self._selectRow(row, true, true);
+		});
+
+		self._rowSelectionChanged();
+		break;
+
+		case "boolean":
+		if(rows === true){
+			self.table.rowManager.activeRows.forEach(function(row){
+				self._selectRow(row, true, true);
+			});
+
+			self._rowSelectionChanged();
+		}
+		break;
+
+		default:
+		if(Array.isArray(rows)){
+			rows.forEach(function(row){
+				self._selectRow(row, true);
+			});
+
+			self._rowSelectionChanged();
+		}else{
+			self._selectRow(rows);
+		}
+		break;
+	}
+};
+
+//select an individual row
+SelectRow.prototype._selectRow = function(rowInfo, silent, force){
+	var self = this,
+	index;
+
+	//handle max row count
+	if(!isNaN(self.table.options.selectable) && self.table.options.selectable !== true && !force){
+		if(self.selectedRows.length >= self.table.options.selectable){
+			if(self.table.options.selectableRollingSelection){
+				self._deselectRow(self.selectedRows[0], true);
+			}else{
+				return false;
+			}
+		}
+	}
+
+	var row = self.table.rowManager.findRow(rowInfo);
+
+	if(row){
+		var self = this;
+
+		row.extensions.select.selected = true;
+		row.getElement().addClass("tabulator-selected");
+
+		self.selectedRows.push(row);
+
+		if(!silent){
+			self.table.options.rowSelected(row.getComponent());
+			self._rowSelectionChanged();
+		}
+	}else{
+		console.warn("Selection Error - No such row found, ignoring selection:" + rowInfo)
+	}
+};
+
+//deselect a number of rows
+SelectRow.prototype.deselectRows = function(rows){
+	var self = this;
+
+	if(typeof rows == "undefined"){
+
+		let rowCount = self.selectedRows.length;
+
+		for(let i = 0; i < rowCount; i++){
+			self._deselectRow(self.selectedRows[0], true);
+		}
+
+		self._rowSelectionChanged();
+	}else{
+		if(Array.isArray(rows)){
+			rows.forEach(function(row){
+				self._deselectRow(row, true);
+			});
+
+			self._rowSelectionChanged();
+		}else{
+			self._deselectRow(rows);
+		}
+	}
+};
+
+//deselect an individual row
+SelectRow.prototype._deselectRow = function(rowInfo, silent){
+	var self = this,
+	row = self.table.rowManager.findRow(rowInfo),
+	index;
+
+
+
+	if(row){
+		index = self.selectedRows.findIndex(function(selectedRow){
+			return selectedRow == row;
+		});
+
+		if(index > -1){
+
+			row.extensions.select.selected = false;
+			row.getElement().removeClass("tabulator-selected");
+			self.selectedRows.splice(index, 1);
+
+			if(!silent){
+				self.table.options.rowDeselected(row.getComponent());
+				self._rowSelectionChanged();
+			}
+		}
+	}else{
+		console.warn("Selection Error - No such row found, ignoring selection:" + rowInfo)
+	}
+};
+
+SelectRow.prototype.getSelectedData = function(){
+	var data = [];
+
+	this.selectedRows.forEach(function(row){
+		data.push(row.getData());
+	});
+
+	return data
+};
+
+SelectRow.prototype.getSelectedRows = function(){
+
+	var rows = []
+
+	this.selectedRows.forEach(function(row){
+		rows.push(row.getComponent());
+	})
+
+	return rows;
+};
+
+SelectRow.prototype._rowSelectionChanged = function(){
+	this.table.options.rowSelectionChanged(this.getSelectedData(), this.getSelectedRows());
+};
+
+Tabulator.registerExtension("selectRow", SelectRow);

js/tabulator/src/js/extensions/sort.js

@@ -0,0 +1,341 @@
+var Sort = function(table){
+ 	this.table = table; //hold Tabulator object
+ 	this.sortList = []; //holder current sort
+ 	this.changed = false; //has the sort changed since last render
+ };
+
+//initialize column header for sorting
+Sort.prototype.initializeColumn = function(column, content){
+	var self = this,
+	sorter = false;
+
+
+	switch(typeof column.definition.sorter){
+		case "string":
+		if(self.sorters[column.definition.sorter]){
+			sorter = self.sorters[column.definition.sorter];
+		}else{
+			console.warn("Sort Error - No such sorter found: ", column.definition.sorter);
+		}
+		break;
+
+		case "function":
+		sorter = column.definition.sorter;
+		break;
+	}
+
+
+	column.extensions.sort = {sorter:sorter, dir:"none", params:column.definition.sorterParams || {}};
+
+	if(column.definition.headerSort !== false){
+
+		column.element.addClass("tabulator-sortable");
+
+		//create sorter arrow
+		content.append($("<div class='tabulator-arrow'></div>"));
+
+		//sort on click
+		column.element.on("click", function(e){
+			var dir = "",
+			sorters=[],
+			match = false;
+
+			if(column.extensions.sort){
+				dir = column.extensions.sort.dir == "asc" ? "desc" : "asc";
+
+				if(e.shiftKey || e.ctrlKey){
+					sorters = self.getSort();
+
+
+					match = sorters.findIndex(function(sorter){
+						return sorter.field === column.getField();
+					});
+
+					if(match > -1){
+						sorters[match].dir = sorters[match].dir == "asc" ? "desc" : "asc";
+
+						if(match != sorters.length -1){
+							sorters.push(sorters.splice(match, 1)[0]);
+						}
+					}else{
+						sorters.push({column:column, dir:dir});
+					}
+
+					//add to existing sort
+					self.setSort(sorters);
+				}else{
+					//sort by column only
+					self.setSort(column, dir);
+				}
+
+				self.table.rowManager.sorterRefresh();
+			}
+		});
+	}
+};
+
+//check if the sorters have changed since last use
+Sort.prototype.hasChanged = function(){
+	var changed = this.changed;
+	this.changed = false;
+	return changed;
+};
+
+//return current sorters
+Sort.prototype.getSort = function(){
+	var self = this,
+	sorters = [];
+
+	self.sortList.forEach(function(item){
+		if(item.column){
+			sorters.push({column:item.column.getComponent(), field:item.column.getField(), dir:item.dir});
+		}
+	});
+
+	return sorters;
+};
+
+//change sort list and trigger sort
+Sort.prototype.setSort = function(sortList, dir){
+	var self = this,
+	newSortList = [];
+
+	if(!Array.isArray(sortList)){
+		sortList = [{column: sortList, dir:dir}];
+	}
+
+	sortList.forEach(function(item){
+		var column;
+
+		column = self.table.columnManager.findColumn(item.column);
+
+		if(column){
+			item.column = column;
+			newSortList.push(item);
+			self.changed = true;
+		}else{
+			console.warn("Sort Warning - Sort field does not exist and is being ignored: ", item.column);
+		}
+
+	});
+
+	self.sortList = newSortList;
+};
+
+//clear sorters
+Sort.prototype.clear = function(){
+	this.setSort([]);
+},
+
+//find appropriate sorter for column
+Sort.prototype.findSorter = function(column){
+	var row = this.table.rowManager.activeRows[0],
+	sorter = "string",
+	field, value;
+
+	if(row){
+		row = row.getData();
+		field = column.getField();
+
+		if(field){
+
+			value = column.getFieldValue(row);
+
+			switch(typeof value){
+				case "undefined":
+				sorter = "string";
+				break;
+
+				case "boolean":
+				sorter = "boolean";
+				break;
+
+				default:
+				if(!isNaN(value) && value !== ""){
+					sorter = "number";
+				}else{
+					if(value.match(/((^[0-9]+[a-z]+)|(^[a-z]+[0-9]+))+$/i)){
+						sorter = "alphanum";
+					}
+				}
+				break;
+			}
+		}
+	}
+
+	return this.sorters[sorter];
+};
+
+//work through sort list sorting data
+Sort.prototype.sort = function(){
+	var self = this, lastSort;
+
+	if(self.table.options.dataSorting){
+		self.table.options.dataSorting(self.getSort());
+	}
+
+	self.clearColumnHeaders();
+
+	if(!self.table.options.ajaxSorting){
+
+		self.sortList.forEach(function(item, i){
+
+			if(item.column && item.column.extensions.sort){
+
+				//if no sorter has been defined, take a guess
+				if(!item.column.extensions.sort.sorter){
+					item.column.extensions.sort.sorter = self.findSorter(item.column);
+				}
+
+				self._sortItem(item.column, item.dir, self.sortList, i);
+			}
+
+			self.setColumnHeader(item.column, item.dir);
+		})
+	}
+
+	if(self.table.options.dataSorted){
+		self.table.options.dataSorted(self.getSort(), self.table.rowManager.getComponents(true));
+	}
+
+};
+
+//clear sort arrows on columns
+Sort.prototype.clearColumnHeaders = function(){
+	this.table.columnManager.getRealColumns().forEach(function(column){
+		if(column.extensions.sort){
+			column.extensions.sort.dir = "none";
+			column.element.attr("aria-sort", "none");
+		}
+	});
+};
+
+//set the column header sort direction
+Sort.prototype.setColumnHeader = function(column, dir){
+	column.extensions.sort.dir = dir;
+	column.element.attr("aria-sort", dir);
+};
+
+//sort each item in sort list
+Sort.prototype._sortItem = function(column, dir, sortList, i){
+	var self = this;
+
+	var activeRows = self.table.rowManager.activeRows;
+
+	activeRows.sort(function(a, b){
+
+		var result = self._sortRow(a, b, column, dir);
+
+		//if results match recurse through previous searchs to be sure
+		if(result == 0 && i){
+			for(var j = i-1; j>= 0; j--){
+				result = self._sortRow(a, b, sortList[j].column, sortList[j].dir);
+
+				if(result != 0){
+					break;
+				}
+			}
+		}
+
+		return result;
+	});
+};
+
+//process individual rows for a sort function on active data
+Sort.prototype._sortRow = function(a, b, column, dir){
+	var self = this;
+
+	//switch elements depending on search direction
+	var el1 = dir == "asc" ? a : b;
+	var el2 = dir == "asc" ? b : a;
+
+	a = column.getFieldValue(el1.getData());
+	b = column.getFieldValue(el2.getData());
+
+	a = typeof a !== "undefined" ? a : "";
+	b = typeof b !== "undefined" ? b : "";
+
+	return column.extensions.sort.sorter.call(self, a, b, el1.getComponent(), el2.getComponent(), column.getComponent(), dir, column.extensions.sort.params);
+};
+
+
+//default data sorters
+Sort.prototype.sorters = {
+
+	//sort numbers
+	number:function(a, b, aRow, bRow, column, dir, params){
+		return parseFloat(String(a).replace(",","")) - parseFloat(String(b).replace(",",""));
+	},
+
+	//sort strings
+	string:function(a, b, aRow, bRow, column, dir, params){
+		return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
+	},
+
+	//sort date
+	date:function(a, b, aRow, bRow, column, dir, params){
+		var self = this;
+		var format = params.format || "DD/MM/YYYY";
+
+		if(typeof moment != "undefined"){
+			a = moment(a, format);
+			b = moment(b, format);
+		}else{
+			console.error("Sort Error - 'date' sorter is dependant on moment.js");
+		}
+
+		return a - b;
+	},
+
+	//sort booleans
+	boolean:function(a, b, aRow, bRow, column, dir, params){
+		var el1 = a === true || a === "true" || a === "True" || a === 1 ? 1 : 0;
+		var el2 = b === true || b === "true" || b === "True" || b === 1 ? 1 : 0;
+
+		return el1 - el2;
+	},
+
+	//sort alpha numeric strings
+	alphanum:function(as, bs, aRow, bRow, column, dir, params){
+		var a, b, a1, b1, i= 0, L, rx = /(\d+)|(\D+)/g, rd = /\d/;
+
+		if(isFinite(as) && isFinite(bs)) return as - bs;
+		a = String(as).toLowerCase();
+		b = String(bs).toLowerCase();
+		if(a === b) return 0;
+		if(!(rd.test(a) && rd.test(b))) return a > b ? 1 : -1;
+		a = a.match(rx);
+		b = b.match(rx);
+		L = a.length > b.length ? b.length : a.length;
+		while(i < L){
+			a1= a[i];
+			b1= b[i++];
+			if(a1 !== b1){
+				if(isFinite(a1) && isFinite(b1)){
+					if(a1.charAt(0) === "0") a1 = "." + a1;
+					if(b1.charAt(0) === "0") b1 = "." + b1;
+					return a1 - b1;
+				}
+				else return a1 > b1 ? 1 : -1;
+			}
+		}
+		return a.length > b.length;
+	},
+
+	//sort hh:mm formatted times
+	time:function(a, b, aRow, bRow, column, dir, params){
+		var self = this;
+		var format = params.format || "hh:mm";
+
+		if(typeof moment != "undefined"){
+			a = moment(a, format);
+			b = moment(b, format);
+		}else{
+			console.error("Sort Error - 'date' sorter is dependant on moment.js");
+		}
+
+		return a - b;
+	},
+};
+
+Tabulator.registerExtension("sort", Sort);

js/tabulator/src/js/extensions/validate.js

@@ -0,0 +1,178 @@
+var Validate = function(table){
+	this.table = table;
+};
+
+//validate
+Validate.prototype.initializeColumn = function(column){
+	var self = this,
+	config = [],
+	validator;
+
+	if(column.definition.validator){
+
+		if(Array.isArray(column.definition.validator)){
+			column.definition.validator.forEach(function(item){
+				validator = self._extractValidator(item);
+
+				if(validator){
+					config.push(validator);
+				}
+			})
+
+		}else{
+			validator = this._extractValidator(column.definition.validator);
+
+			if(validator){
+				config.push(validator);
+			}
+		}
+
+		column.extensions.validate = config.length ? config : false;
+	}
+};
+
+Validate.prototype._extractValidator = function(value){
+
+	switch(typeof value){
+		case "string":
+		let parts = value.split(":");
+		let type = parts.shift();
+		let params = parts.join();
+
+		return this._buildValidator(type, params);
+		break;
+
+		case "function":
+		return this._buildValidator(value);
+		break;
+
+		case "object":
+		return this._buildValidator(value.type, value.parameters);
+		break;
+	}
+};
+
+Validate.prototype._buildValidator = function(type, params){
+
+	var func = typeof type == "function" ? type : this.validators[type];
+
+	if(!func){
+		console.warn("Validator Setup Error - No matching validator found:", type);
+		return false;
+	}else{
+		return {
+			type:typeof type == "function" ? "function" : type,
+			func:func,
+			params:params,
+		};
+	}
+};
+
+
+Validate.prototype.validate = function(validators, cell, value){
+	var self = this,
+	valid = [];
+
+	if(validators){
+		validators.forEach(function(item){
+			if(!item.func.call(self, cell, value, item.params)){
+				valid.push({
+					type:item.type,
+					parameters:item.params
+				});
+			}
+		});
+	}
+
+	return valid.length ? valid : true;
+};
+
+
+Validate.prototype.validators = {
+
+	//is integer
+	integer:function(cell, value, parameters){
+		value = Number(value);
+		return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+	},
+
+	//is float
+	float:function(cell, value, parameters){
+		value = Number(value);
+		return typeof value === 'number' && isFinite(value) && value % 1 !== 0;;
+	},
+
+	//must be a number
+	numeric:function(cell, value, parameters){
+		return !isNaN(value);
+	},
+
+	//must be a string
+	string:function(cell, value, parameters){
+		return isNaN(value);
+	},
+
+
+	//maximum value
+	max:function(cell, value, parameters){
+		return parseFloat(value) <= parameters;
+	},
+
+	//minimum value
+	min:function(cell, value, parameters){
+		return parseFloat(value) >= parameters;
+	},
+
+	//minimum string length
+	minLength:function(cell, value, parameters){
+		return String(value).length >= parameters;
+	},
+
+	//maximum string length
+	maxLength:function(cell, value, parameters){
+		return String(value).length <= parameters;
+	},
+
+	//in provided value list
+	in:function(cell, value, parameters){
+		if(typeof parameters == "string"){
+			parameters = parameters.split("|");
+		}
+
+		return value === "" || parameters.indexOf(value) > -1;
+	},
+
+	//must match provided regex
+	regex:function(cell, value, parameters){
+		var reg = new RegExp(parameters);
+
+		return reg.test(value);
+	},
+
+	//value must be unique in this column
+	unique:function(cell, value, parameters){
+		var unique = true;
+
+		var cellData = cell.getData();
+
+		this.table.rowManager.rows.forEach(function(row){
+			var data = row.getData();
+
+			if(data !== cellData){
+				if(value == data[cell.getField()]){
+					unique = false;
+				}
+			}
+		});
+
+		return unique;
+	},
+
+	//must have a value
+	required:function(cell, value, parameters){
+		return value !== "" & value !== null && typeof value != "undefined";
+	},
+};
+
+
+Tabulator.registerExtension("validate", Validate);

js/tabulator/src/js/extensions_enabled.js

@@ -0,0 +1,22 @@
+/*=include extensions/accessor.js */
+/*=include extensions/ajax.js */
+/*=include extensions/calculation_colums.js */
+/*=include extensions/download.js */
+/*=include extensions/edit.js */
+/*=include extensions/filter.js */
+/*=include extensions/format.js */
+/*=include extensions/frozen_columns.js */
+/*=include extensions/group_rows.js */
+/*=include extensions/history.js */
+/*=include extensions/html_table_import.js */
+/*=include extensions/Keybindings.js */
+/*=include extensions/moveable_columns.js */
+/*=include extensions/moveable_rows.js */
+/*=include extensions/mutator.js */
+/*=include extensions/page.js */
+/*=include extensions/persistent_layout.js */
+/*=include extensions/resize_columns.js */
+/*=include extensions/responsive_layout.js */
+/*=include extensions/select_row.js */
+/*=include extensions/sort.js */
+/*=include extensions/validate.js */

js/tabulator/src/js/footer_manager.js

@@ -0,0 +1,65 @@
+var FooterManager = function(table){
+	this.table = table;
+	this.active = false;
+	this.element = $("<div class='tabulator-footer'></div>"); //containing element
+	this.links = [];
+
+	this._initialize();
+};
+
+FooterManager.prototype._initialize = function(element){
+	if(this.table.options.footerElement){
+		this.element = this.table.options.footerElement;
+	}
+};
+
+FooterManager.prototype.getElement = function(){
+	return this.element;
+};
+
+
+FooterManager.prototype.append = function(element, parent){
+	this.activate(parent);
+
+	this.element.append(element);
+	this.table.rowManager.adjustTableSize();
+};
+
+FooterManager.prototype.prepend = function(element, parent){
+	this.activate(parent);
+
+	this.element.prepend(element);
+	this.table.rowManager.adjustTableSize();
+};
+
+FooterManager.prototype.remove = function(element){
+	element.remove();
+	this.deactivate();
+};
+
+FooterManager.prototype.deactivate = function(force){
+	if(this.element.is(":empty") || force){
+		this.element.remove();
+		this.active = false;
+	}
+
+	// this.table.rowManager.adjustTableSize();
+}
+
+FooterManager.prototype.activate = function(parent){
+	if(!this.active){
+		this.active = true;
+		this.table.element.append(this.getElement());
+		this.table.element.show();
+	}
+
+	if(parent){
+		this.links.push(parent);
+	}
+}
+
+FooterManager.prototype.redraw = function(){
+	this.links.forEach(function(link){
+		link.footerRedraw();
+	});
+};

js/tabulator/src/js/jquery_wrapper.js

@@ -0,0 +1,32 @@
+/*
+ * This file is part of the Tabulator package.
+ *
+ * (c) Oliver Folkerd <oliver.folkerd@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * Full Documentation & Demos can be found at: http://olifolkerd.github.io/tabulator/
+ *
+ */
+
+ (function (factory) {
+ 	"use strict";
+ 	if (typeof define === 'function' && define.amd) {
+ 		define(['jquery'], factory);
+ 	}
+ 	else if(typeof module !== 'undefined' && module.exports) {
+ 		module.exports = factory(require('jquery'));
+ 	}
+ 	else {
+ 		factory(jQuery);
+ 	}
+ }(function ($, undefined) {
+
+ 	/*=include core.js */
+
+ 	$.widget("ui.tabulator", Tabulator);
+
+ }));
+
+

js/tabulator/src/js/polyfills.js

@@ -0,0 +1,92 @@
+
+
+
+// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    }
+  });
+}
+
+// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    }
+  });
+}

js/tabulator/src/js/row.js

@@ -0,0 +1,487 @@
+
+//public row object
+var RowComponent = function (row){
+	this.row = row;
+};
+
+RowComponent.prototype.getData = function(){
+	return this.row.getData(true);
+};
+
+RowComponent.prototype.getElement = function(){
+	return this.row.getElement();
+};
+
+RowComponent.prototype.getCells = function(){
+	var cells = [];
+
+	this.row.getCells().forEach(function(cell){
+		cells.push(cell.getComponent());
+	});
+
+	return cells;
+};
+
+RowComponent.prototype.getCell = function(column){
+	return this.row.getCell(column).getComponent();
+};
+
+RowComponent.prototype.getIndex = function(){
+	return this.row.getData(true)[this.row.table.options.index];
+};
+
+RowComponent.prototype.delete = function(){
+	this.row.delete();
+};
+
+RowComponent.prototype.scrollTo = function(){
+	this.row.table.rowManager.scrollToRow(this.row);
+};
+
+RowComponent.prototype.update = function(data){
+	this.row.updateData(data);
+};
+
+RowComponent.prototype.normalizeHeight = function(){
+	this.row.normalizeHeight(true);
+};
+
+RowComponent.prototype.select = function(){
+	this.row.selectRows(this.row);
+};
+
+RowComponent.prototype.deselect = function(){
+	this.row.deselectRows(this.row);
+};
+
+RowComponent.prototype.toggleSelect = function(){
+	this.row.toggleRow(this.row);
+};
+
+RowComponent.prototype._getSelf = function(){
+	return this.row;
+};
+
+
+var Row = function(data, parent){
+	this.table = parent.table;
+	this.parent = parent;
+	this.data = {};
+	this.type = "row"; //type of element
+	this.element = $("<div class='tabulator-row' role='row'></div>");
+	this.extensions = {}; //hold extension variables;
+	this.cells = [];
+	this.height = 0; //hold element height
+	this.outerHeight = 0; //holde lements outer height
+	this.initialized = false; //element has been rendered
+	this.heightInitialized = false; //element has resized cells to fit
+
+	this.setData(data);
+	this.generateElement();
+};
+
+Row.prototype.getElement = function(){
+	return this.element;
+};
+
+
+Row.prototype.generateElement = function(){
+	var self = this,
+	dblTap,	tapHold, tap;
+
+	//set row selection characteristics
+	if(self.table.options.selectable !== false && self.table.extExists("selectRow")){
+		self.table.extensions.selectRow.initializeRow(this);
+	}
+
+	//setup movable rows
+	if(self.table.options.movableRows !== false && self.table.extExists("moveRow")){
+		self.table.extensions.moveRow.initializeRow(this);
+	}
+
+	//handle row click events
+	if (self.table.options.rowClick){
+		self.element.on("click", function(e){
+			self.table.options.rowClick(e, self.getComponent());
+		})
+	}
+
+	if (self.table.options.rowDblClick){
+		self.element.on("dblclick", function(e){
+			self.table.options.rowDblClick(e, self.getComponent());
+		})
+	}
+
+	if (self.table.options.rowContext){
+		self.element.on("contextmenu", function(e){
+			self.table.options.rowContext(e, self.getComponent());
+		})
+	}
+
+	if (self.table.options.rowTap){
+
+		tap = false;
+
+		self.element.on("touchstart", function(e){
+			tap = true;
+		});
+
+		self.element.on("touchend", function(e){
+			if(tap){
+				self.table.options.rowTap(e, self.getComponent());
+			}
+
+			tap = false;
+		});
+	}
+
+	if (self.table.options.rowDblTap){
+
+		dblTap = null;
+
+		self.element.on("touchend", function(e){
+
+			if(dblTap){
+				clearTimeout(dblTap);
+				dblTap = null;
+
+				self.table.options.rowDblTap(e, self.getComponent());
+			}else{
+
+				dblTap = setTimeout(function(){
+					clearTimeout(dblTap);
+					dblTap = null;
+				}, 300);
+			}
+
+		});
+	}
+
+
+	if (self.table.options.rowTapHold){
+
+		tapHold = null;
+
+		self.element.on("touchstart", function(e){
+			clearTimeout(tapHold);
+
+			tapHold = setTimeout(function(){
+				clearTimeout(tapHold);
+				tapHold = null;
+				tap = false;
+				self.table.options.rowTapHold(e, self.getComponent());
+			}, 1000)
+
+		});
+
+		self.element.on("touchend", function(e){
+			clearTimeout(tapHold);
+			tapHold = null;
+		});
+	}
+};
+
+Row.prototype.generateCells = function(){
+	this.cells = this.table.columnManager.generateCells(this);
+}
+
+//functions to setup on first render
+Row.prototype.initialize = function(force){
+	var self = this;
+
+	if(!self.initialized || force){
+
+		self.deleteCells();
+
+		self.element.empty();
+
+		//handle frozen cells
+		if(this.table.extExists("frozenColumns")){
+			this.table.extensions.frozenColumns.layoutRow(this);
+		}
+
+		this.generateCells();
+
+		self.cells.forEach(function(cell){
+			self.element.append(cell.getElement());
+		});
+
+		if(force){
+			self.normalizeHeight();
+		}
+
+		if(self.table.options.rowFormatter){
+			self.table.options.rowFormatter(self.getComponent());
+		}
+
+		self.initialized = true;
+	}
+};
+
+Row.prototype.reinitializeHeight = function(){
+	this.heightInitialized = false;
+
+	if(this.element[0].offsetParent !== null){
+		this.normalizeHeight(true);
+	}
+};
+
+
+Row.prototype.reinitialize = function(){
+	this.initialized = false;
+	this.heightInitialized = false;
+	this.height = 0;
+
+	if(this.element[0].offsetParent !== null){
+		this.initialize(true);
+	}
+};
+
+//get heights when doing bulk row style calcs in virtual DOM
+Row.prototype.calcHeight = function(){
+	this.height = this.element[0].clientHeight;
+	this.outerHeight = this.element[0].offsetHeight;
+};
+
+//set of cells
+Row.prototype.setCellHeight = function(){
+	var height = this.height;
+
+	this.cells.forEach(function(cell){
+		cell.setHeight(height);
+	});
+
+	this.heightInitialized = true;
+};
+
+Row.prototype.clearCellHeight = function(){
+	this.cells.forEach(function(cell){
+		cell.clearHeight();
+	});
+}
+
+//normalize the height of elements in the row
+Row.prototype.normalizeHeight = function(force){
+
+	if(force){
+		this.clearCellHeight();
+	}
+
+	this.calcHeight();
+
+	this.setCellHeight();
+};
+
+//set height of rows
+Row.prototype.setHeight = function(height, force){
+	if(this.height != height || force){
+
+		this.height = height;
+
+		this.setCellHeight();
+
+		// this.outerHeight = this.element.outerHeight();
+		this.outerHeight = this.element[0].offsetHeight;
+	}
+};
+
+//return rows outer height
+Row.prototype.getHeight = function(){
+	return this.outerHeight;
+};
+
+//return rows outer Width
+Row.prototype.getWidth = function(){
+	return this.element.outerWidth();
+};
+
+
+//////////////// Cell Management /////////////////
+
+Row.prototype.deleteCell = function(cell){
+	var index = this.cells.indexOf(cell);
+
+	if(index > -1){
+		this.cells.splice(index, 1);
+	}
+};
+
+//////////////// Data Management /////////////////
+
+Row.prototype.setData = function(data){
+	var self = this;
+
+	if(self.table.extExists("mutator")){
+		self.data = self.table.extensions.mutator.transformRow(data);
+	}else{
+		self.data = data;
+	}
+};
+
+//update the rows data
+Row.prototype.updateData = function(data){
+	var self = this;
+
+	//mutate incomming data if needed
+	if(self.table.extExists("mutator")){
+		data = self.table.extensions.mutator.transformRow(data);
+	}
+
+	//set data
+	for (var attrname in data) {
+		self.data[attrname] = data[attrname];
+	}
+
+	//update affected cells only
+	for (var attrname in data) {
+		let cell = this.getCell(attrname);
+
+		if(cell){
+			if(cell.getValue() != data[attrname]){
+				cell.setValueProcessData(data[attrname]);
+			}
+		}
+	}
+
+	//Partial reinitialization if visible
+	if(this.element.is(":visible")){
+		self.normalizeHeight();
+
+		if(self.table.options.rowFormatter){
+			self.table.options.rowFormatter(self.getComponent());
+		}
+	}else{
+		this.initialized = false;
+		this.height = 0;
+	}
+
+	//self.reinitialize();
+
+	self.table.options.rowUpdated(self.getComponent());
+};
+
+Row.prototype.getData = function(transform){
+	var self = this;
+
+	if(transform){
+		if(self.table.extExists("accessor")){
+			return self.table.extensions.accessor.transformRow(self.data);
+		}
+	}else{
+		return this.data;
+	}
+
+};
+
+Row.prototype.getCell = function(column){
+	var match = false,
+	column = this.table.columnManager.findColumn(column);
+
+	match = this.cells.find(function(cell){
+		return cell.column === column;
+	});
+
+	return match;
+},
+
+Row.prototype.getCellIndex = function(findCell){
+	return this.cells.findIndex(function(cell){
+		return cell === findCell;
+	});
+},
+
+
+Row.prototype.findNextEditableCell = function(index){
+
+	var nextCell = false;
+
+	if(index < this.cells.length-1){
+		for(var i = index+1; i < this.cells.length; i++){
+			let cell = this.cells[i];
+
+			if(cell.column.extensions.edit && cell.getElement().is(":visible")){
+				let allowEdit = true;
+
+				if(typeof cell.column.extensions.edit.check == "function"){
+					allowEdit = cell.column.extensions.edit.check(cell.getComponent());
+				}
+
+				if(allowEdit){
+					nextCell = cell;
+					break;
+				}
+			}
+		}
+	}
+
+	return nextCell;
+},
+
+Row.prototype.findPrevEditableCell = function(index){
+	var prevCell = false;
+
+	if(index > 0){
+		for(var i = index-1; i >= 0; i--){
+			let cell = this.cells[i],
+			allowEdit = true;
+
+			if(cell.column.extensions.edit && cell.getElement().is(":visible")){
+				if(typeof cell.column.extensions.edit.check == "function"){
+					allowEdit = cell.column.extensions.edit.check(cell.getComponent());
+				}
+
+				if(allowEdit){
+					prevCell = cell;
+					break;
+				}
+			}
+		}
+	}
+
+	return prevCell;
+},
+
+
+Row.prototype.getCells = function(){
+	return this.cells;
+},
+
+///////////////////// Actions  /////////////////////
+
+Row.prototype.delete = function(){
+
+	var index = this.table.rowManager.getRowIndex(this);
+
+	this.deleteActual();
+
+	if(this.table.options.history && this.table.extExists("history")){
+		if(index){
+			index = this.table.rowManager.rows[index-1];
+		}
+
+		this.table.extensions.history.action("rowDelete", this, {data:this.getData(), pos:!index, index:index});
+	};
+};
+
+
+Row.prototype.deleteActual = function(){
+	this.table.rowManager.deleteRow(this);
+
+	this.deleteCells();
+};
+
+
+Row.prototype.deleteCells = function(){
+	var cellCount = this.cells.length;
+
+	for(let i = 0; i < cellCount; i++){
+		this.cells[0].delete();
+	}
+};
+
+
+
+//////////////// Object Generation /////////////////
+Row.prototype.getComponent = function(){
+	return new RowComponent(this);
+};

js/tabulator/src/scss/bootstrap/tabulator_bootstrap.scss

@@ -0,0 +1,750 @@
+@import "variables.scss";
+
+// Style conversion file, bootstrap to tabulator
+
+//Main Theme Variables
+$backgroundColor: $table-bg; //background color of tabulator
+$borderColor:$table-border-color; //border to tablulator
+$textSize:$font-size-base; //table text size
+
+//header themeing
+$headerBackgroundColor:#fff; //border to tablulator
+$headerSeperatorColor:$table-border-color; //header bottom seperator color
+
+$cellPadding:$table-cell-padding; //padding round header
+$cellPaddingCondensed:$table-condensed-cell-padding; //padding round header
+
+//column header arrows
+$sortArrowActive: #666;
+$sortArrowInactive: #bbb;
+
+//row themeing
+$rowBackgroundColor:$backgroundColor; //table row background color
+$rowAltBackgroundColor:$table-bg-accent; //table row background color
+$rowBorderColor:$table-border-color; //table border color
+$rowHoverBackground:$table-bg-hover; //row background color on hover
+
+$rowSelectedBackground: #9ABCEA; //row background color when selected
+$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
+
+
+$editBoxColor:#1D68CD; //border color for edit boxes
+$errorColor:#dd0000; //error indication
+
+//footer themeing
+$footerBorderColor:$table-border-color; //footer border color
+$footerSeperatorColor:$table-border-color; //footer bottom seperator color
+
+
+
+//Tabulator Containing Element
+.tabulator{
+	position: relative;
+	background-color: $backgroundColor;
+	overflow:hidden;
+	font-size:$textSize;
+	text-align: left;
+	width: 100%;
+	max-width: 100%;
+	margin-bottom: $line-height-computed;
+
+	-webkit-transform: translatez(0);
+	-moz-transform: translatez(0);
+	-ms-transform: translatez(0);
+	-o-transform: translatez(0);
+	transform: translatez(0);
+
+	&[tabulator-layout="fitDataFill"]{
+		.tabulator-tableHolder{
+			.tabulator-table{
+				min-width:100%;
+			}
+		}
+	}
+
+	&.tabulator-block-select{
+		user-select: none;
+	}
+
+	//column header containing element
+	.tabulator-header{
+		position:relative;
+		box-sizing: border-box;
+
+		width:100%;
+
+		border-bottom:2px solid $headerSeperatorColor;
+		background-color: $headerBackgroundColor;
+		font-weight:bold;
+
+		white-space: nowrap;
+		overflow:hidden;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		//individual column header element
+		.tabulator-col{
+			display:inline-block;
+			position:relative;
+			box-sizing:border-box;
+			background-color: $headerBackgroundColor;
+			text-align:left;
+			vertical-align: bottom;
+			overflow: hidden;
+
+			&.tabulator-moving{
+				position: absolute;
+				border:1px solid  $headerSeperatorColor;
+				background:darken($headerBackgroundColor, 10%);
+				pointer-events: none;
+			}
+
+			//hold content of column header
+			.tabulator-col-content{
+				position: relative;
+				padding:$cellPadding;
+
+				//hold title of column header
+				.tabulator-col-title{
+					box-sizing:border-box;
+					width: 100%;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align:bottom;
+
+					//element to hold title editor
+					.tabulator-title-editor{
+						box-sizing: border-box;
+						width: 100%;
+
+						border:1px solid #999;
+
+						padding:1px;
+
+						background: #fff;
+					}
+				}
+
+				//column sorter arrow
+				.tabulator-arrow{
+					display: inline-block;
+					position: absolute;
+					top:14px;
+					right:8px;
+					width: 0;
+					height: 0;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-bottom: 6px solid $sortArrowInactive;
+				}
+
+			}
+
+			//complex header column group
+			&.tabulator-col-group{
+
+				//gelement to hold sub columns in column group
+				.tabulator-col-group-cols{
+					position:relative;
+					display: flex;
+
+					border-top:1px solid $borderColor;
+					overflow: hidden;
+
+					.tabulator-col:last-child{
+						margin-right:-1px;
+					}
+				}
+			}
+
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//placeholder element for sortable columns
+			&.ui-sortable-helper{
+				position: absolute;
+				background-color:darken($headerBackgroundColor, 10%) !important;
+				border:1px solid $borderColor;
+			}
+
+			//header filter containing element
+			.tabulator-header-filter{
+				position: relative;
+				box-sizing: border-box;
+				margin-top:2px;
+				width:100%;
+				text-align: center;
+
+				//styling adjustment for inbuilt editors
+				textarea{
+					height:auto !important;
+				}
+
+				svg{
+					margin-top: 3px;
+				}
+			}
+
+
+			//styling child elements for sortable columns
+			&.tabulator-sortable{
+				.tabulator-col-title{
+					padding-right:25px;
+				}
+
+				&:hover{
+					cursor:pointer;
+					background-color:darken($headerBackgroundColor, 10%);
+				}
+
+				&[aria-sort="none"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowInactive;
+					}
+				}
+
+				&[aria-sort="asc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowActive;
+					}
+				}
+
+				&[aria-sort="desc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: 6px solid $sortArrowActive;
+						border-bottom: none;
+					}
+				}
+			}
+
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			// background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:100%;
+
+			background:lighten($headerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:lighten($headerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $headerSeperatorColor;
+
+			overflow: hidden;
+		}
+	}
+
+
+
+	//scrolling element to hold table
+	.tabulator-tableHolder{
+		position:relative;
+		width:100%;
+		white-space: nowrap;
+		overflow:auto;
+		-webkit-overflow-scrolling: touch;
+
+		&:focus{
+			outline: none;
+		}
+
+		//default placeholder element
+		.tabulator-placeholder{
+			position: absolute;
+			box-sizing:border-box;
+			display: flex;
+			align-items:center;
+
+			top:0;
+			left:0;
+			height:100%;
+			width:100%;
+
+			span{
+				display: inline-block;
+
+				margin:0 auto;
+				padding:10px;
+
+				color:#000;
+				font-weight: bold;
+				font-size: 20px;
+			}
+		}
+
+		//element to hold table rows
+		.tabulator-table{
+			position:relative;
+			display:inline-block;
+			background-color:$rowBackgroundColor;
+			white-space: nowrap;
+			overflow:visible;
+
+			.tabulator-row{
+				&.tabulator-calcs{
+					font-weight: bold;
+					background:darken($rowAltBackgroundColor, 5%) !important;
+
+					&.tabulator-calcs-top{
+						border-bottom:2px solid $rowBorderColor;
+					}
+
+					&.tabulator-calcs-bottom{
+						border-top:2px solid $rowBorderColor;
+					}
+				}
+			}
+		}
+	}
+
+	//row element
+	.tabulator-row{
+		position: relative;
+		box-sizing: border-box;
+
+		min-height:$textSize + ($cellPadding * 2);
+		background-color: $rowBackgroundColor;
+		border-bottom:1px solid $rowBorderColor;
+
+		&.tabulator-selectable:hover{
+			background-color:$rowHoverBackground !important;
+			cursor: pointer;
+		}
+
+		&.tabulator-selected{
+			background-color:$rowSelectedBackground;
+		}
+
+		&.tabulator-selected:hover{
+			background-color:$rowSelectedBackgroundHover;
+			cursor: pointer;
+		}
+
+		&.tabulator-moving{
+			position: absolute;
+
+			border-top:1px solid  $rowBorderColor;
+			border-bottom:1px solid  $rowBorderColor;
+
+			pointer-events: none !important;
+			z-index:15;
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		//cell element
+		.tabulator-cell{
+			display:inline-block;
+			position: relative;
+			box-sizing:border-box;
+			padding:$cellPadding;
+			vertical-align:middle;
+			white-space:nowrap;
+			overflow:hidden;
+			text-overflow:ellipsis;
+
+			&:last-of-type{
+				border-right: none;
+			}
+
+			&.tabulator-editing{
+				border:1px solid  $editBoxColor;
+				padding: 0;
+
+				input, select{
+					border:1px;
+					background:transparent;
+				}
+			}
+
+			&.tabulator-validation-fail{
+				border:1px solid $errorColor;
+				input, select{
+					border:1px;
+					background:transparent;
+
+					color: $errorColor;
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//movable row handle
+			&.tabulator-row-handle{
+
+				display: inline-flex;
+				align-items:center;
+
+				-moz-user-select: none;
+				-khtml-user-select: none;
+				-webkit-user-select: none;
+				-o-user-select: none;
+
+				//handle holder
+				.tabulator-row-handle-box{
+					width:80%;
+
+					//Hamburger element
+					.tabulator-row-handle-bar{
+						width:100%;
+						height:3px;
+						margin:2px 10% 0 10%;
+						background:#666;
+					}
+				}
+			}
+		}
+		//row grouping element
+		&.tabulator-group{
+
+			box-sizing:border-box;
+			border-bottom:1px solid #999;
+			border-right:1px solid $rowBorderColor;
+			border-top:1px solid #999;
+			padding:5px;
+			padding-left:10px;
+			background:#fafafa;
+			font-weight:bold;
+
+			min-width: 100%;
+
+			&:hover{
+				cursor:pointer;
+				background-color:rgba(0,0,0,.1);
+			}
+
+			&.tabulator-group-visible{
+				.tabulator-arrow{
+					margin-right:10px;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-top: 6px solid $sortArrowActive;
+					border-bottom: 0;
+				}
+			}
+
+			&.tabulator-group-level-1{
+				.tabulator-arrow{
+					margin-left:20px;
+				}
+			}
+
+			&.tabulator-group-level-2{
+				.tabulator-arrow{
+					margin-left:40px;
+				}
+			}
+
+			&.tabulator-group-level-3{
+				.tabulator-arrow{
+					margin-left:60px;
+				}
+			}
+
+			&.tabulator-group-level-4{
+				.tabulator-arrow{
+					margin-left:80px;
+				}
+			}
+
+			&.tabulator-group-level-5{
+				.tabulator-arrow{
+					margin-left:1000px;
+				}
+			}
+
+			//sorting arrow
+			.tabulator-arrow{
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin-right:16px;
+				border-top: 6px solid transparent;
+				border-bottom: 6px solid transparent;
+				border-right: 0;
+				border-left: 6px solid $sortArrowActive;
+				vertical-align:middle;
+			}
+
+			span{
+				margin-left:10px;
+				color:#666;
+			}
+		}
+	}
+
+	//column resize handles
+	.tabulator-col-resize-handle{
+		position:absolute;
+		right:0;
+		top:0;
+		bottom:0;
+		width:5px;
+
+		&.prev{
+			left:0;
+			right:auto;
+		}
+
+		&:hover{
+			cursor:ew-resize;
+		}
+	}
+
+
+	//footer element
+	.tabulator-footer{
+		padding:5px 10px;
+		border-top:2px solid $footerSeperatorColor;
+		text-align:right;
+		font-weight:bold;
+		white-space:nowrap;
+		user-select:none;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:calc("100% + 20px");
+			margin:-5px -10px 5px -10px;
+
+			text-align: left;
+
+			background:lighten($backgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:lighten($backgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-bottom:1px solid $rowBorderColor;
+			border-top:1px solid $rowBorderColor;
+
+			overflow: hidden;
+
+			&:only-child{
+				margin-bottom:-5px;
+				border-bottom:none;
+			}
+		}
+
+		//pagination container element
+		.tabulator-pages{
+			margin:0 7px;
+		}
+
+		//pagination button
+		.tabulator-page{
+			display:inline-block;
+			margin:0 2px;
+			border:1px solid $footerBorderColor;
+			border-radius:3px;
+			padding:2px 5px;
+			background:rgba(255,255,255,.2);
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+
+
+			&.active{
+				color:#d00;
+			}
+
+			&:disabled{
+				opacity:.5;
+			}
+
+			&:not(.disabled){
+				&:hover{
+					cursor:pointer;
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+	}
+
+	//holding div that contains loader and covers tabulator element to prevent interaction
+	.tablulator-loader{
+		position:absolute;
+		display: flex;
+		align-items:center;
+
+		top:0;
+		left:0;
+		z-index:100;
+
+		height:100%;
+		width:100%;
+		background:rgba(0,0,0,.4);
+		text-align:center;
+
+		//loading message element
+		.tabulator-loader-msg{
+			display:inline-block;
+
+			margin:0 auto;
+			padding:10px 20px;
+
+			border-radius:10px;
+
+			background:#fff;
+			font-weight:bold;
+			font-size:16px;
+
+			//loading message
+			&.tabulator-loading{
+				border:4px solid #333;
+				color:#000;
+			}
+
+			//error message
+			&.tabulator-error{
+				border:4px solid #D00;
+				color:#590000;
+			}
+		}
+	}
+
+
+
+	//Bootstrap theming classes
+
+	&.table-striped{
+		.tabulator-row{
+			&:nth-child(even){
+				background-color: $rowAltBackgroundColor;
+			}
+		}
+	}
+
+	&.table-bordered{
+		border:1px solid $borderColor;
+
+		.tabulator-header{
+			.tabulator-col{
+				border-right:1px solid $borderColor;
+			}
+		}
+
+		.tabulator-tableHolder{
+			.tabulator-table{
+				.tabulator-row{
+					.tabulator-cell{
+						border-right:1px solid $borderColor;
+					}
+				}
+			}
+		}
+
+	}
+
+	&.table-condensed{
+		.tabulator-header{
+			.tabulator-col{
+				.tabulator-col-content{
+					padding:$cellPaddingCondensed;
+				}
+			}
+		}
+
+		.tabulator-tableHolder{
+			.tabulator-table{
+				.tabulator-row{
+					min-height:$textSize + ($cellPaddingCondensed * 2);
+
+					.tabulator-cell{
+						padding:$cellPaddingCondensed;
+					}
+				}
+			}
+		}
+	}
+
+
+	//row colors
+	.tabulator-tableHolder{
+		.tabulator-table{
+			.tabulator-row{
+				&.active{
+					background:$table-bg-active!important;
+				}
+				&.success{
+					background:$state-success-bg!important;
+				}
+				&.info{
+					background: $state-info-bg!important;
+				}
+				&.warning{
+					background:$state-warning-bg!important;
+				}
+				&.danger{
+					background:$state-danger-bg!important;
+				}
+			}
+		}
+	}
+
+}
+

js/tabulator/src/scss/bootstrap/variables.scss

@@ -0,0 +1,870 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base:              #000;
+$gray-darker:            lighten($gray-base, 13.5%); // #222
+$gray-dark:              lighten($gray-base, 20%);   // #333
+$gray:                   lighten($gray-base, 33.5%); // #555
+$gray-light:             lighten($gray-base, 46.7%); // #777
+$gray-lighter:           lighten($gray-base, 93.5%); // #eee
+
+$brand-primary:         darken(#428bca, 6.5%); // #337ab7
+$brand-success:         #5cb85c;
+$brand-info:            #5bc0de;
+$brand-warning:         #f0ad4e;
+$brand-danger:          #d9534f;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #fff;
+//** Global text color on `<body>`.
+$text-color:            $gray-dark;
+
+//** Global textual link color.
+$link-color:            $brand-primary;
+//** Link hover color set via `darken()` function.
+$link-hover-color:      darken($link-color, 15%);
+//** Link hover decoration.
+$link-hover-decoration: underline;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base:        $font-family-sans-serif;
+
+$font-size-base:          14px;
+$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
+$font-size-h5:            $font-size-base;
+$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family:    inherit;
+$headings-font-weight:    500;
+$headings-line-height:    1.1;
+$headings-color:          inherit;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+$icon-font-path:          "../fonts/";
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1@mixin 428 line-height (~20px to start).
+
+$padding-base-vertical:     6px;
+$padding-base-horizontal:   12px;
+
+$padding-large-vertical:    10px;
+$padding-large-horizontal:  16px;
+
+$padding-small-vertical:    5px;
+$padding-small-horizontal:  10px;
+
+$padding-xs-vertical:       1px;
+$padding-xs-horizontal:     5px;
+
+$line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+$line-height-small:         1.5;
+
+$border-radius-base:        4px;
+$border-radius-large:       6px;
+$border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px;
+
+//** Default background color used for all tables.
+// $table-bg:                      transparent;
+$table-bg:                      #fff;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5;
+$table-bg-active:               $table-bg-hover;
+
+//** Border color for table and cell borders.
+$table-border-color:            #ddd;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal;
+
+$btn-default-color:              #333;
+$btn-default-bg:                 #fff;
+$btn-default-border:             #ccc;
+
+$btn-primary-color:              #fff;
+$btn-primary-bg:                 $brand-primary;
+$btn-primary-border:             darken($btn-primary-bg, 5%);
+
+$btn-success-color:              #fff;
+$btn-success-bg:                 $brand-success;
+$btn-success-border:             darken($btn-success-bg, 5%);
+
+$btn-info-color:                 #fff;
+$btn-info-bg:                    $brand-info;
+$btn-info-border:                darken($btn-info-bg, 5%);
+
+$btn-warning-color:              #fff;
+$btn-warning-bg:                 $brand-warning;
+$btn-warning-border:             darken($btn-warning-bg, 5%);
+
+$btn-danger-color:               #fff;
+$btn-danger-bg:                  $brand-danger;
+$btn-danger-border:              darken($btn-danger-bg, 5%);
+
+$btn-link-disabled-color:        $gray-light;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base;
+$btn-border-radius-large:        $border-radius-large;
+$btn-border-radius-small:        $border-radius-small;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg:                       #fff;
+//** `<input disabled>` background color
+$input-bg-disabled:              $gray-lighter;
+
+//** Text color for `<input>`s
+$input-color:                    $gray;
+//** `<input>` border color
+$input-border:                   #ccc;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+$input-border-radius:            $border-radius-base;
+//** Large `.form-control` border radius
+$input-border-radius-large:      $border-radius-large;
+//** Small `.form-control` border radius
+$input-border-radius-small:      $border-radius-small;
+
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9;
+
+//** Placeholder text color
+$input-color-placeholder:        #999;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
+
+//** `.form-group` margin
+$form-group-margin-bottom:       15px;
+
+$legend-color:                   $gray-dark;
+$legend-border-color:            #e5e5e5;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-lighter;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled:                not-allowed;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15);
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-dark;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-dark, 5%);
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000;
+$zindex-dropdown:          1000;
+$zindex-popover:           1060;
+$zindex-tooltip:           1070;
+$zindex-navbar-fixed:      1030;
+$zindex-modal-background:  1040;
+$zindex-modal:             1050;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px;
+$screen-sm-min:              $screen-sm;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px;
+$screen-md-min:              $screen-md;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px;
+$screen-lg-min:              $screen-lg;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1);
+$screen-sm-max:              ($screen-md-min - 1);
+$screen-md-max:              ($screen-lg-min - 1);
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $grid-gutter-width);
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet;
+
+// Medium screen / desktop
+$container-desktop:            (940px + $grid-gutter-width);
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width);
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    50px;
+$navbar-margin-bottom:             $line-height-computed;
+$navbar-border-radius:             $border-radius-base;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2));
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2);
+$navbar-collapse-max-height:       340px;
+
+$navbar-default-color:             #777;
+$navbar-default-bg:                #f8f8f8;
+$navbar-default-border:            darken($navbar-default-bg, 6.5%);
+
+// Navbar links
+$navbar-default-link-color:                #777;
+$navbar-default-link-hover-color:          #333;
+$navbar-default-link-hover-bg:             transparent;
+$navbar-default-link-active-color:         #555;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%);
+$navbar-default-link-disabled-color:       #ccc;
+$navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+$navbar-default-brand-color:               $navbar-default-link-color;
+$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%);
+$navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           #ddd;
+$navbar-default-toggle-icon-bar-bg:        #888;
+$navbar-default-toggle-border-color:       #ddd;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      lighten($gray-light, 15%);
+$navbar-inverse-bg:                         #222;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 lighten($gray-light, 15%);
+$navbar-inverse-link-hover-color:           #fff;
+$navbar-inverse-link-hover-bg:              transparent;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color;
+$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%);
+$navbar-inverse-link-disabled-color:        #444;
+$navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                $navbar-inverse-link-color;
+$navbar-inverse-brand-hover-color:          #fff;
+$navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333;
+$navbar-inverse-toggle-icon-bar-bg:         #fff;
+$navbar-inverse-toggle-border-color:        #333;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px;
+$nav-link-hover-bg:                         $gray-lighter;
+
+$nav-disabled-link-color:                   $gray-light;
+$nav-disabled-link-hover-color:             $gray-light;
+
+//== Tabs
+$nav-tabs-border-color:                     #ddd;
+
+$nav-tabs-link-hover-border-color:          $gray-lighter;
+
+$nav-tabs-active-link-hover-bg:             $body-bg;
+$nav-tabs-active-link-hover-color:          $gray;
+$nav-tabs-active-link-hover-border-color:   #ddd;
+
+$nav-tabs-justified-link-border-color:            #ddd;
+$nav-tabs-justified-active-link-border-color:     $body-bg;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base;
+$nav-pills-active-link-hover-bg:            $component-active-bg;
+$nav-pills-active-link-hover-color:         $component-active-color;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $link-color;
+$pagination-bg:                        #fff;
+$pagination-border:                    #ddd;
+
+$pagination-hover-color:               $link-hover-color;
+$pagination-hover-bg:                  $gray-lighter;
+$pagination-hover-border:              #ddd;
+
+$pagination-active-color:              #fff;
+$pagination-active-bg:                 $brand-primary;
+$pagination-active-border:             $brand-primary;
+
+$pagination-disabled-color:            $gray-light;
+$pagination-disabled-bg:               #fff;
+$pagination-disabled-border:           #ddd;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg;
+$pager-border:                         $pagination-border;
+$pager-border-radius:                  15px;
+
+$pager-hover-bg:                       $pagination-hover-bg;
+
+$pager-active-bg:                      $pagination-active-bg;
+$pager-active-color:                   $pagination-active-color;
+
+$pager-disabled-color:                 $pagination-disabled-color;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px;
+$jumbotron-color:                inherit;
+$jumbotron-bg:                   $gray-lighter;
+$jumbotron-heading-color:        inherit;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5));
+$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5));
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d;
+$state-success-bg:               #dff0d8;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10%), 5%);
+
+$state-info-text:                #31708f;
+$state-info-bg:                  #d9edf7;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10%), 7%);
+
+$state-warning-text:             #8a6d3b;
+$state-warning-bg:               #fcf8e3;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10%), 5%);
+
+$state-danger-text:              #a94442;
+$state-danger-bg:                #f2dede;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10%), 5%);
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px;
+//** Tooltip text color
+$tooltip-color:               #fff;
+//** Tooltip background color
+$tooltip-bg:                  #000;
+$tooltip-opacity:             .9;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff;
+//** Popover maximum width
+$popover-max-width:                   276px;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%);
+
+//** Popover arrow width
+$popover-arrow-width:                 10px;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1);
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fadein($popover-border-color, 5%);
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%);
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light;
+//** Primary label background color
+$label-primary-bg:            $brand-primary;
+//** Success label background color
+$label-success-bg:            $brand-success;
+//** Info label background color
+$label-info-bg:               $brand-info;
+//** Warning label background color
+$label-warning-bg:            $brand-warning;
+//** Danger label background color
+$label-danger-bg:             $brand-danger;
+
+//** Default label text color
+$label-color:                 #fff;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         15px;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base;
+
+//** Background color of modal content area
+$modal-content-bg:                             #fff;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2);
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5;
+//** Modal header border color
+$modal-header-border-color:   #e5e5e5;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color;
+
+$modal-lg:                    900px;
+$modal-md:                    600px;
+$modal-sm:                    300px;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px;
+$alert-border-radius:         $border-radius-base;
+$alert-link-font-weight:      bold;
+
+$alert-success-bg:            $state-success-bg;
+$alert-success-text:          $state-success-text;
+$alert-success-border:        $state-success-border;
+
+$alert-info-bg:               $state-info-bg;
+$alert-info-text:             $state-info-text;
+$alert-info-border:           $state-info-border;
+
+$alert-warning-bg:            $state-warning-bg;
+$alert-warning-text:          $state-warning-text;
+$alert-warning-border:        $state-warning-border;
+
+$alert-danger-bg:             $state-danger-bg;
+$alert-danger-text:           $state-danger-text;
+$alert-danger-border:         $state-danger-border;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5;
+//** Progress bar text color
+$progress-bar-color:          #fff;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 #fff;
+//** `.list-group-item` border color
+$list-group-border:             #ddd;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           #f5f5f5;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%);
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color;
+
+$list-group-link-color:         #555;
+$list-group-link-hover-color:   $list-group-link-color;
+$list-group-link-heading-color: #333;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    #fff;
+$panel-body-padding:          15px;
+$panel-heading-padding:       10px 15px;
+$panel-footer-padding:        $panel-heading-padding;
+$panel-border-radius:         $border-radius-base;
+
+//** Border color for elements within panels
+$panel-inner-border:          #ddd;
+$panel-footer-bg:             #f5f5f5;
+
+$panel-default-text:          $gray-dark;
+$panel-default-border:        #ddd;
+$panel-default-heading-bg:    #f5f5f5;
+
+$panel-primary-text:          #fff;
+$panel-primary-border:        $brand-primary;
+$panel-primary-heading-bg:    $brand-primary;
+
+$panel-success-text:          $state-success-text;
+$panel-success-border:        $state-success-border;
+$panel-success-heading-bg:    $state-success-bg;
+
+$panel-info-text:             $state-info-text;
+$panel-info-border:           $state-info-border;
+$panel-info-heading-bg:       $state-info-bg;
+
+$panel-warning-text:          $state-warning-text;
+$panel-warning-border:        $state-warning-border;
+$panel-warning-heading-bg:    $state-warning-bg;
+
+$panel-danger-text:           $state-danger-text;
+$panel-danger-border:         $state-danger-border;
+$panel-danger-heading-bg:     $state-danger-bg;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px;
+//** Thumbnail background color
+$thumbnail-bg:                $body-bg;
+//** Thumbnail border color
+$thumbnail-border:            #ddd;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     #f5f5f5;
+$well-border:                 darken($well-bg, 7%);
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #fff;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff;
+$badge-bg:                    $gray-light;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff;
+
+$badge-font-weight:           bold;
+$badge-line-height:           1;
+$badge-border-radius:         10px;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px;
+$breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+$breadcrumb-bg:                 #f5f5f5;
+//** Breadcrumb text color
+$breadcrumb-color:              #ccc;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $gray-light;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/";
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+$carousel-control-color:                      #fff;
+$carousel-control-width:                      15%;
+$carousel-control-opacity:                    .5;
+$carousel-control-font-size:                  20px;
+
+$carousel-indicator-active-bg:                #fff;
+$carousel-indicator-border-color:             #fff;
+
+$carousel-caption-color:                      #fff;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold;
+$close-color:                 #000;
+$close-text-shadow:           0 1px 0 #fff;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e;
+$code-bg:                     #f9f2f4;
+
+$kbd-color:                   #fff;
+$kbd-bg:                      #333;
+
+$pre-bg:                      #f5f5f5;
+$pre-color:                   $gray-dark;
+$pre-border-color:            #ccc;
+$pre-scrollable-max-height:   340px;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px;
+//** Text muted color
+$text-muted:                  $gray-light;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light;
+//** Headings small color
+$headings-small-color:        $gray-light;
+//** Blockquote small color
+$blockquote-small-color:      $gray-light;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25);
+//** Blockquote border color
+$blockquote-border-color:     $gray-lighter;
+//** Page header border color
+$page-header-border-color:    $gray-lighter;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint:    $grid-float-breakpoint;
+//** Horizontal line color.
+$hr-border:                   $gray-lighter;

js/tabulator/src/scss/semantic-ui/variables.scss

@@ -0,0 +1,830 @@
+
+
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+       Fonts
+--------------------*/
+
+$fontName          : 'Lato';
+$fontSmoothing     : antialiased;
+
+$headerFont        : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+$pageFont          : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+$googleFontName    : $fontName;
+$importGoogleFonts : true;
+$googleFontSizes   : '400,700,400italic,700italic';
+$googleSubset      : 'latin';
+
+$googleProtocol    : 'https://';
+$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}';
+
+/*-------------------
+      Base Sizes
+--------------------*/
+
+/* This is the single variable that controls them all */
+$emSize   : 14px;
+
+/* The size of page text  */
+$fontSize : 14px;
+
+/*-------------------
+  Exact Pixel Values
+--------------------*/
+/*
+  These are used to specify exact pixel values in em
+  for things like borders that remain constantly
+  sized as emSize adjusts
+
+  Since there are many more sizes than names for sizes,
+  these are named by their original pixel values.
+
+*/
+
+
+$a1px  : (1 / $emSize) + rem;
+$a4px  : (4 / $emSize) + rem;
+$a11px  : (11 / $emSize) + rem;
+$a14px  : (14 / $emSize) + rem;
+
+$relative1px  : (1 / $emSize) + em;
+$relative4px  : (4 / $emSize) + em;
+$relative11px  : (11 / $emSize) + em;
+$relative14px  : (14 / $emSize) + em;
+
+
+
+/*-------------------
+    Border Radius
+--------------------*/
+
+/* See Power-user section below
+   for explanation of $px variables
+*/
+$relativeBorderRadius: $relative4px;
+$absoluteBorderRadius: $a4px;
+
+$defaultBorderRadius: $absoluteBorderRadius;
+
+
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+$red              : #DB2828;
+$orange           : #F2711C;
+$yellow           : #FBBD08;
+$olive            : #B5CC18;
+$green            : #21BA45;
+$teal             : #00B5AD;
+$blue             : #2185D0;
+$violet           : #6435C9;
+$purple           : #A333C8;
+$pink             : #E03997;
+$brown            : #A5673F;
+$grey             : #767676;
+$black            : #1B1C1D;
+
+/*---  Light Colors  ---*/
+$lightRed         : #FF695E;
+$lightOrange      : #FF851B;
+$lightYellow      : #FFE21F;
+$lightOlive       : #D9E778;
+$lightGreen       : #2ECC40;
+$lightTeal        : #6DFFFF;
+$lightBlue        : #54C8FF;
+$lightViolet      : #A291FB;
+$lightPurple      : #DC73FF;
+$lightPink        : #FF8EDF;
+$lightBrown       : #D67C1C;
+$lightGrey        : #DCDDDE;
+$lightBlack       : #545454;
+
+/*---   Neutrals  ---*/
+$fullBlack        : #000000;
+$offWhite         : #F9FAFB;
+$darkWhite        : #F3F4F5;
+$midWhite         : #DCDDDE;
+$white            : #FFFFFF;
+
+/*--- Colored Backgrounds ---*/
+$redBackground    : #FFE8E6;
+$orangeBackground : #FFEDDE;
+$yellowBackground : #FFF8DB;
+$oliveBackground  : #FBFDEF;
+$greenBackground  : #E5F9E7;
+$tealBackground   : #E1F7F7;
+$blueBackground   : #DFF0FF;
+$violetBackground : #EAE7FF;
+$purpleBackground : #F6E7FF;
+$pinkBackground   : #FFE3FB;
+$brownBackground  : #F1E2D3;
+
+/*--- Colored Text ---*/
+$redTextColor    : $red;
+$orangeTextColor : $orange;
+$yellowTextColor : #B58105; // Yellow text is difficult to read
+$oliveTextColor  : #8ABC1E; // Olive is difficult to read
+$greenTextColor  : #1EBC30; // Green is difficult to read
+$tealTextColor   : #10A3A3; // Teal text is difficult to read
+$blueTextColor   : $blue;
+$violetTextColor : $violet;
+$purpleTextColor : $purple;
+$pinkTextColor   : $pink;
+$brownTextColor  : $brown;
+
+/*--- Colored Headers ---*/
+$redHeaderColor    : darken($redTextColor, 5);
+$oliveHeaderColor  : darken($oliveTextColor, 5);
+$greenHeaderColor  : darken($greenTextColor, 5);
+$yellowHeaderColor : darken($yellowTextColor, 5);
+$blueHeaderColor   : darken($blueTextColor, 5);
+$tealHeaderColor   : darken($tealTextColor, 5);
+$pinkHeaderColor   : darken($pinkTextColor, 5);
+$violetHeaderColor : darken($violetTextColor, 5);
+$purpleHeaderColor : darken($purpleTextColor, 5);
+$orangeHeaderColor : darken($orangeTextColor, 5);
+$brownHeaderColor  : darken($brownTextColor, 5);
+
+/*--- Colored Border ---*/
+$redBorderColor    : $redTextColor;
+$orangeBorderColor : $orangeTextColor;
+$yellowBorderColor : $yellowTextColor;
+$oliveBorderColor  : $oliveTextColor;
+$greenBorderColor  : $greenTextColor;
+$tealBorderColor   : $tealTextColor;
+$blueBorderColor   : $blueTextColor;
+$violetBorderColor : $violetTextColor;
+$purpleBorderColor : $purpleTextColor;
+$pinkBorderColor   : $pinkTextColor;
+$brownBorderColor  : $brownTextColor;
+
+/*-------------------
+     Alpha Colors
+--------------------*/
+
+$subtleTransparentBlack     : rgba(0, 0, 0, 0.03);
+$transparentBlack           : rgba(0, 0, 0, 0.05);
+$strongTransparentBlack     : rgba(0, 0, 0, 0.10);
+$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15);
+
+$subtleTransparentWhite     : rgba(255, 255, 255, 0.02);
+$transparentWhite           : rgba(255, 255, 255, 0.08);
+$strongTransparentWhite     : rgba(255, 255, 255, 0.15);
+
+
+
+/*-------------------
+    Brand Colors
+--------------------*/
+
+$primaryColor        : $blue;
+$secondaryColor      : $black;
+
+$lightPrimaryColor   : $lightBlue;
+$lightSecondaryColor : $lightBlack;
+
+/*--------------
+  Page Heading
+---------------*/
+
+$headerFontWeight : bold;
+$headerLineHeight : (18 / 14) * 1em;
+
+$h1 : (28 / 14) * 1rem;
+$h2 : (24 / 14) * 1rem;
+$h3 : (18 / 14) * 1rem;
+$h4 : (15 / 14) * 1rem;
+$h5 : (14 / 14) * 1rem;
+
+
+/*-------------------
+        Page
+--------------------*/
+
+$pageBackground      : #FFFFFF;
+$pageOverflowX       : hidden;
+
+$lineHeight          : 1.4285em;
+$textColor           : rgba(0, 0, 0, 0.87);
+
+
+/*--------------
+   Form Input
+---------------*/
+
+/* This adjusts the default form input across all elements */
+$inputBackground        : $white;
+$inputVerticalPadding   : $relative11px;
+$inputHorizontalPadding : $relative14px;
+$inputPadding           : $inputVerticalPadding $inputHorizontalPadding;
+
+/* Input Text Color */
+$inputColor: $textColor;
+$inputPlaceholderColor: lighten($inputColor, 75);
+$inputPlaceholderFocusColor: lighten($inputColor, 45);
+
+/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
+$inputLineHeight: (17 / 14) * 1em;
+
+/*-------------------
+    Focused Input
+--------------------*/
+
+/* Used on inputs, textarea etc */
+$focusedFormBorderColor: #85B7D9;
+
+/* Used on dropdowns, other larger blocks */
+$focusedFormMutedBorderColor: #96C8DA;
+
+/*-------------------
+        Sizes
+--------------------*/
+
+/*
+  Sizes are all expressed in terms of 14px/em (default em)
+  This ensures these "ratios" remain constant despite changes in EM
+*/
+
+$miniSize        : (11 / 14);
+$tinySize        : (12 / 14);
+$smallSize       : (13 / 14);
+$mediumSize      : (14 / 14);
+$largeSize       : (16 / 14);
+$bigSize         : (18 / 14);
+$hugeSize        : (20 / 14);
+$massiveSize     : (24 / 14);
+
+
+/*-------------------
+      Paragraph
+--------------------*/
+
+$paragraphMargin     : 0em 0em 1em;
+$paragraphLineHeight : $lineHeight;
+
+/*-------------------
+       Links
+--------------------*/
+
+$linkColor           : #4183C4;
+$linkUnderline       : none;
+$linkHoverColor      : darken(saturate($linkColor, 20), 15);
+$linkHoverUnderline  : $linkUnderline;
+
+/*-------------------
+  Highlighted Text
+--------------------*/
+
+$highlightBackground      : #CCE2FF;
+$highlightColor           : $textColor;
+
+$inputHighlightBackground : rgba(100, 100, 100, 0.4);
+$inputHighlightColor      : $textColor;
+
+/*-------------------
+       Em Sizes
+--------------------*/
+
+/*
+  This rounds $size values to the closest pixel then expresses that value in (r)em.
+  This ensures all size values round to exact pixels
+*/
+$mini            : (round($miniSize * $emSize) / $emSize) * 1rem;
+$tiny            : (round($tinySize * $emSize) / $emSize) * 1rem;
+$small           : (round($smallSize * $emSize) / $emSize) * 1rem;
+$medium          : (round($mediumSize * $emSize) / $emSize) * 1rem;
+$large           : (round($largeSize * $emSize) / $emSize) * 1rem;
+$big             : (round($bigSize * $emSize) / $emSize) * 1rem;
+$huge            : (round($hugeSize * $emSize) / $emSize) * 1rem;
+$massive         : (round($massiveSize * $emSize) / $emSize) * 1rem;
+
+/* em */
+$relativeMini    : (round($miniSize * $emSize) / $emSize) * 1em;
+$relativeTiny    : (round($tinySize * $emSize) / $emSize) * 1em;
+$relativeSmall   : (round($smallSize * $emSize) / $emSize) * 1em;
+$relativeMedium  : (round($mediumSize * $emSize) / $emSize) * 1em;
+$relativeLarge   : (round($largeSize * $emSize) / $emSize) * 1em;
+$relativeBig     : (round($bigSize * $emSize) / $emSize) * 1em;
+$relativeHuge    : (round($hugeSize * $emSize) / $emSize) * 1em;
+$relativeMassive : (round($massiveSize * $emSize) / $emSize) * 1em;
+
+/* rem */
+$absoluteMini    : (round($miniSize * $emSize) / $emSize) * 1rem;
+$absoluteTiny    : (round($tinySize * $emSize) / $emSize) * 1rem;
+$absoluteSmall   : (round($smallSize * $emSize) / $emSize) * 1rem;
+$absoluteMedium  : (round($mediumSize * $emSize) / $emSize) * 1rem;
+$absoluteLarge   : (round($largeSize * $emSize) / $emSize) * 1rem;
+$absoluteBig     : (round($bigSize * $emSize) / $emSize) * 1rem;
+$absoluteHuge    : (round($hugeSize * $emSize) / $emSize) * 1rem;
+$absoluteMassive : (round($massiveSize * $emSize) / $emSize) * 1rem;
+
+
+/*-------------------
+       Loader
+--------------------*/
+
+$loaderSize              : $relativeBig;
+$loaderSpeed             : 0.6s;
+$loaderLineWidth         : 0.2em;
+$loaderFillColor         : rgba(0, 0, 0, 0.1);
+$loaderLineColor         : $grey;
+
+$invertedLoaderFillColor : rgba(255, 255, 255, 0.15);
+$invertedLoaderLineColor : $white;
+
+/*-------------------
+        Grid
+--------------------*/
+
+$columnCount: 16;
+
+/*-------------------
+     Transitions
+--------------------*/
+
+$defaultDuration : 0.1s;
+$defaultEasing   : ease;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+$mobileBreakpoint            : 320px;
+$tabletBreakpoint            : 768px;
+$computerBreakpoint          : 992px;
+$largeMonitorBreakpoint      : 1200px;
+$widescreenMonitorBreakpoint : 1920px;
+
+
+
+/* Columns */
+$oneWide        : (1 / $columnCount * 100%);
+$twoWide        : (2 / $columnCount * 100%);
+$threeWide      : (3 / $columnCount * 100%);
+$fourWide       : (4 / $columnCount * 100%);
+$fiveWide       : (5 / $columnCount * 100%);
+$sixWide        : (6 / $columnCount * 100%);
+$sevenWide      : (7 / $columnCount * 100%);
+$eightWide      : (8 / $columnCount * 100%);
+$nineWide       : (9 / $columnCount * 100%);
+$tenWide        : (10 / $columnCount * 100%);
+$elevenWide     : (11 / $columnCount * 100%);
+$twelveWide     : (12 / $columnCount * 100%);
+$thirteenWide   : (13 / $columnCount * 100%);
+$fourteenWide   : (14 / $columnCount * 100%);
+$fifteenWide    : (15 / $columnCount * 100%);
+$sixteenWide    : (16 / $columnCount * 100%);
+
+$oneColumn      : (1 / 1 * 100%);
+$twoColumn      : (1 / 2 * 100%);
+$threeColumn    : (1 / 3 * 100%);
+$fourColumn     : (1 / 4 * 100%);
+$fiveColumn     : (1 / 5 * 100%);
+$sixColumn      : (1 / 6 * 100%);
+$sevenColumn    : (1 / 7 * 100%);
+$eightColumn    : (1 / 8 * 100%);
+$nineColumn     : (1 / 9 * 100%);
+$tenColumn      : (1 / 10 * 100%);
+$elevenColumn   : (1 / 11 * 100%);
+$twelveColumn   : (1 / 12 * 100%);
+$thirteenColumn : (1 / 13 * 100%);
+$fourteenColumn : (1 / 14 * 100%);
+$fifteenColumn  : (1 / 15 * 100%);
+$sixteenColumn  : (1 / 16 * 100%);
+
+
+/*******************************
+           Power-User
+*******************************/
+
+
+/*-------------------
+    Emotive Colors
+--------------------*/
+
+/* Positive */
+$positiveColor           : $green;
+$positiveBackgroundColor : #FCFFF5;
+$positiveBorderColor     : #A3C293;
+$positiveHeaderColor     : #1A531B;
+$positiveTextColor       : #2C662D;
+
+/* Negative */
+$negativeColor           : $red;
+$negativeBackgroundColor : #FFF6F6;
+$negativeBorderColor     : #E0B4B4;
+$negativeHeaderColor     : #912D2B;
+$negativeTextColor       : #9F3A38;
+
+/* Info */
+$infoColor              : #31CCEC;
+$infoBackgroundColor    : #F8FFFF;
+$infoBorderColor        : #A9D5DE;
+$infoHeaderColor        : #0E566C;
+$infoTextColor          : #276F86;
+
+/* Warning */
+$warningColor           : #F2C037;
+$warningBorderColor     : #C9BA9B;
+$warningBackgroundColor : #FFFAF3;
+$warningHeaderColor     : #794B02;
+$warningTextColor       : #573A08;
+
+/*-------------------
+        Paths
+--------------------*/
+
+/* For source only. Modified in gulp for dist */
+$imagePath : '../../themes/default/assets/images';
+$fontPath  : '../../themes/default/assets/fonts';
+
+
+/*-------------------
+       Icons
+--------------------*/
+
+/* Maximum Glyph Width of Icon */
+$iconWidth : 1.18em;
+
+/*-------------------
+     Neutral Text
+--------------------*/
+
+$darkTextColor               : rgba(0, 0, 0, 0.85);
+$mutedTextColor              : rgba(0, 0, 0, 0.6);
+$lightTextColor              : rgba(0, 0, 0, 0.4);
+
+$unselectedTextColor         : rgba(0, 0, 0, 0.4);
+$hoveredTextColor            : rgba(0, 0, 0, 0.8);
+$pressedTextColor            : rgba(0, 0, 0, 0.9);
+$selectedTextColor           : rgba(0, 0, 0, 0.95);
+$disabledTextColor           : rgba(0, 0, 0, 0.2);
+
+$invertedTextColor           : rgba(255, 255, 255, 0.9);
+$invertedMutedTextColor      : rgba(255, 255, 255, 0.8);
+$invertedLightTextColor      : rgba(255, 255, 255, 0.7);
+$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
+$invertedHoveredTextColor    : rgba(255, 255, 255, 1);
+$invertedPressedTextColor    : rgba(255, 255, 255, 1);
+$invertedSelectedTextColor   : rgba(255, 255, 255, 1);
+$invertedDisabledTextColor   : rgba(255, 255, 255, 0.2);
+
+/*-------------------
+     Brand Colors
+--------------------*/
+
+$facebookColor   : #3B5998;
+$twitterColor    : #55ACEE;
+$googlePlusColor : #DD4B39;
+$linkedInColor   : #1F88BE;
+$youtubeColor    : #CC181E;
+$pinterestColor  : #BD081C;
+$vkColor         : #4D7198;
+$instagramColor  : #49769C;
+
+/*-------------------
+      Borders
+--------------------*/
+
+$circularRadius                : 500rem;
+
+$borderColor               : rgba(34, 36, 38, 0.15);
+$strongBorderColor         : rgba(34, 36, 38, 0.22);
+$internalBorderColor       : rgba(34, 36, 38, 0.1);
+$selectedBorderColor       : rgba(34, 36, 38, 0.35);
+$strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
+$disabledBorderColor       : rgba(34, 36, 38, 0.5);
+
+$solidInternalBorderColor  : #FAFAFA;
+$solidBorderColor          : #D4D4D5;
+$solidSelectedBorderColor  : #BCBDBD;
+
+$whiteBorderColor              : rgba(255, 255, 255, 0.1);
+$selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);
+
+$solidWhiteBorderColor         : #555555;
+$selectedSolidWhiteBorderColor : #999999;
+
+/*-------------------
+       Accents
+--------------------*/
+
+/* Differentiating Neutrals */
+$subtleGradient: linear-gradient(transparent, $transparentBlack);
+
+/* Differentiating Layers */
+$subtleShadow:
+  0px 1px 2px 0 $borderColor
+;
+$floatingShadow:
+  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
+  0px 2px 10px 0px rgba(34, 36, 38, 0.15)
+;
+
+
+/*-------------------
+    Derived Values
+--------------------*/
+
+/* Loaders Position Offset */
+$loaderOffset : -($loaderSize / 2);
+$loaderMargin : $loaderOffset 0em 0em $loaderOffset;
+
+/* Rendered Scrollbar Width */
+$scrollbarWidth: 17px;
+
+/* Maximum Single Character Glyph Width, aka Capital "W" */
+$glyphWidth: 1.1em;
+
+/* Used to match floats with text */
+$lineHeightOffset       : (($lineHeight - 1em) / 2);
+$headerLineHeightOffset : ($headerLineHeight - 1em) / 2;
+
+/* Header Spacing */
+$headerTopMargin    : calc(2rem - #{$headerLineHeightOffset});
+$headerBottomMargin : 1rem;
+$headerMargin       : $headerTopMargin 0em $headerBottomMargin;
+
+/* Minimum Mobile Width */
+$pageMinWidth       : 320px;
+
+/* Positive / Negative Dupes */
+$successBackgroundColor : $positiveBackgroundColor;
+$successColor           : $positiveColor;
+$successBorderColor     : $positiveBorderColor;
+$successHeaderColor     : $positiveHeaderColor;
+$successTextColor       : $positiveTextColor;
+
+$errorBackgroundColor   : $negativeBackgroundColor;
+$errorColor             : $negativeColor;
+$errorBorderColor       : $negativeBorderColor;
+$errorHeaderColor       : $negativeHeaderColor;
+$errorTextColor         : $negativeTextColor;
+
+
+/* Responsive */
+$largestMobileScreen : ($tabletBreakpoint - 1px);
+$largestTabletScreen : ($computerBreakpoint - 1px);
+$largestSmallMonitor : ($largeMonitorBreakpoint - 1px);
+$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px);
+
+
+
+/*******************************
+             States
+*******************************/
+
+/*-------------------
+      Disabled
+--------------------*/
+
+$disabledOpacity: 0.45;
+$disabledTextColor: rgba(40, 40, 40, 0.3);
+$invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
+
+/*-------------------
+        Hover
+--------------------*/
+
+/*---  Shadows  ---*/
+$floatingShadowHover:
+  0px 2px 4px 0px rgba(34, 36, 38, 0.15),
+  0px 2px 10px 0px rgba(34, 36, 38, 0.25)
+;
+
+/*---  Colors  ---*/
+$primaryColorHover    : saturate(darken($primaryColor, 5), 10);
+$secondaryColorHover  : saturate(lighten($secondaryColor, 5), 10);
+
+$redHover             : saturate(darken($red, 5), 10);
+$orangeHover          : saturate(darken($orange, 5), 10);
+$yellowHover          : saturate(darken($yellow, 5), 10);
+$oliveHover           : saturate(darken($olive, 5), 10);
+$greenHover           : saturate(darken($green, 5), 10);
+$tealHover            : saturate(darken($teal, 5), 10);
+$blueHover            : saturate(darken($blue, 5), 10);
+$violetHover          : saturate(darken($violet, 5), 10);
+$purpleHover          : saturate(darken($purple, 5), 10);
+$pinkHover            : saturate(darken($pink, 5), 10);
+$brownHover           : saturate(darken($brown, 5), 10);
+
+$lightRedHover        : saturate(darken($lightRed, 5), 10);
+$lightOrangeHover     : saturate(darken($lightOrange, 5), 10);
+$lightYellowHover     : saturate(darken($lightYellow, 5), 10);
+$lightOliveHover      : saturate(darken($lightOlive, 5), 10);
+$lightGreenHover      : saturate(darken($lightGreen, 5), 10);
+$lightTealHover       : saturate(darken($lightTeal, 5), 10);
+$lightBlueHover       : saturate(darken($lightBlue, 5), 10);
+$lightVioletHover     : saturate(darken($lightViolet, 5), 10);
+$lightPurpleHover     : saturate(darken($lightPurple, 5), 10);
+$lightPinkHover       : saturate(darken($lightPink, 5), 10);
+$lightBrownHover      : saturate(darken($lightBrown, 5), 10);
+$lightGreyHover       : saturate(darken($lightGrey, 5), 10);
+$lightBlackHover      : saturate(darken($fullBlack, 5), 10);
+
+/*---  Emotive  ---*/
+$positiveColorHover   : saturate(darken($positiveColor, 5), 10);
+$negativeColorHover   : saturate(darken($negativeColor, 5), 10);
+
+/*---  Brand   ---*/
+$facebookHoverColor   : saturate(darken($facebookColor, 5), 10);
+$twitterHoverColor    : saturate(darken($twitterColor, 5), 10);
+$googlePlusHoverColor : saturate(darken($googlePlusColor, 5), 10);
+$linkedInHoverColor   : saturate(darken($linkedInColor, 5), 10);
+$youtubeHoverColor    : saturate(darken($youtubeColor, 5), 10);
+$instagramHoverColor  : saturate(darken($instagramColor, 5), 10);
+$pinterestHoverColor  : saturate(darken($pinterestColor, 5), 10);
+$vkHoverColor         : saturate(darken($vkColor, 5), 10);
+
+/*---  Dark Tones  ---*/
+$fullBlackHover       : lighten($fullBlack, 5);
+$blackHover           : lighten($black, 5);
+$greyHover            : lighten($grey, 5);
+
+/*---  Light Tones  ---*/
+$whiteHover           : darken($white, 5);
+$offWhiteHover        : darken($offWhite, 5);
+$darkWhiteHover       : darken($darkWhite, 5);
+
+/*-------------------
+        Focus
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorFocus    : saturate(darken($primaryColor, 8), 20);
+$secondaryColorFocus  : saturate(lighten($secondaryColor, 8), 20);
+
+$redFocus             : saturate(darken($red, 8), 20);
+$orangeFocus          : saturate(darken($orange, 8), 20);
+$yellowFocus          : saturate(darken($yellow, 8), 20);
+$oliveFocus           : saturate(darken($olive, 8), 20);
+$greenFocus           : saturate(darken($green, 8), 20);
+$tealFocus            : saturate(darken($teal, 8), 20);
+$blueFocus            : saturate(darken($blue, 8), 20);
+$violetFocus          : saturate(darken($violet, 8), 20);
+$purpleFocus          : saturate(darken($purple, 8), 20);
+$pinkFocus            : saturate(darken($pink, 8), 20);
+$brownFocus           : saturate(darken($brown, 8), 20);
+
+$lightRedFocus        : saturate(darken($lightRed, 8), 20);
+$lightOrangeFocus     : saturate(darken($lightOrange, 8), 20);
+$lightYellowFocus     : saturate(darken($lightYellow, 8), 20);
+$lightOliveFocus      : saturate(darken($lightOlive, 8), 20);
+$lightGreenFocus      : saturate(darken($lightGreen, 8), 20);
+$lightTealFocus       : saturate(darken($lightTeal, 8), 20);
+$lightBlueFocus       : saturate(darken($lightBlue, 8), 20);
+$lightVioletFocus     : saturate(darken($lightViolet, 8), 20);
+$lightPurpleFocus     : saturate(darken($lightPurple, 8), 20);
+$lightPinkFocus       : saturate(darken($lightPink, 8), 20);
+$lightBrownFocus      : saturate(darken($lightBrown, 8), 20);
+$lightGreyFocus       : saturate(darken($lightGrey, 8), 20);
+$lightBlackFocus      : saturate(darken($fullBlack, 8), 20);
+
+/*---  Emotive  ---*/
+$positiveColorFocus   : saturate(darken($positiveColor, 8), 20);
+$negativeColorFocus   : saturate(darken($negativeColor, 8), 20);
+
+/*---  Brand   ---*/
+$facebookFocusColor   : saturate(darken($facebookColor, 8), 20);
+$twitterFocusColor    : saturate(darken($twitterColor, 8), 20);
+$googlePlusFocusColor : saturate(darken($googlePlusColor, 8), 20);
+$linkedInFocusColor   : saturate(darken($linkedInColor, 8), 20);
+$youtubeFocusColor    : saturate(darken($youtubeColor, 8), 20);
+$instagramFocusColor  : saturate(darken($instagramColor, 8), 20);
+$pinterestFocusColor  : saturate(darken($pinterestColor, 8), 20);
+$vkFocusColor         : saturate(darken($vkColor, 8), 20);
+
+/*---  Dark Tones  ---*/
+$fullBlackFocus       : lighten($fullBlack, 8);
+$blackFocus           : lighten($black, 8);
+$greyFocus            : lighten($grey, 8);
+
+/*---  Light Tones  ---*/
+$whiteFocus           : darken($white, 8);
+$offWhiteFocus        : darken($offWhite, 8);
+$darkWhiteFocus       : darken($darkWhite, 8);
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorDown    : darken($primaryColor, 10);
+$secondaryColorDown  : lighten($secondaryColor, 10);
+
+$redDown             : darken($red, 10);
+$orangeDown          : darken($orange, 10);
+$yellowDown          : darken($yellow, 10);
+$oliveDown           : darken($olive, 10);
+$greenDown           : darken($green, 10);
+$tealDown            : darken($teal, 10);
+$blueDown            : darken($blue, 10);
+$violetDown          : darken($violet, 10);
+$purpleDown          : darken($purple, 10);
+$pinkDown            : darken($pink, 10);
+$brownDown           : darken($brown, 10);
+
+$lightRedDown        : darken($lightRed, 10);
+$lightOrangeDown     : darken($lightOrange, 10);
+$lightYellowDown     : darken($lightYellow, 10);
+$lightOliveDown      : darken($lightOlive, 10);
+$lightGreenDown      : darken($lightGreen, 10);
+$lightTealDown       : darken($lightTeal, 10);
+$lightBlueDown       : darken($lightBlue, 10);
+$lightVioletDown     : darken($lightViolet, 10);
+$lightPurpleDown     : darken($lightPurple, 10);
+$lightPinkDown       : darken($lightPink, 10);
+$lightBrownDown      : darken($lightBrown, 10);
+$lightGreyDown       : darken($lightGrey, 10);
+$lightBlackDown      : darken($fullBlack, 10);
+
+/*---  Emotive  ---*/
+$positiveColorDown   : darken($positiveColor, 10);
+$negativeColorDown   : darken($negativeColor, 10);
+
+/*---  Brand   ---*/
+$facebookDownColor   : darken($facebookColor, 10);
+$twitterDownColor    : darken($twitterColor, 10);
+$googlePlusDownColor : darken($googlePlusColor, 10);
+$linkedInDownColor   : darken($linkedInColor, 10);
+$youtubeDownColor    : darken($youtubeColor, 10);
+$instagramDownColor  : darken($instagramColor, 10);
+$pinterestDownColor  : darken($pinterestColor, 10);
+$vkDownColor         : darken($vkColor, 10);
+
+/*---  Dark Tones  ---*/
+$fullBlackDown       : lighten($fullBlack, 10);
+$blackDown           : lighten($black, 10);
+$greyDown            : lighten($grey, 10);
+
+/*---  Light Tones  ---*/
+$whiteDown           : darken($white, 10);
+$offWhiteDown        : darken($offWhite, 10);
+$darkWhiteDown       : darken($darkWhite, 10);
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorActive    : saturate(darken($primaryColor, 5), 15);
+$secondaryColorActive  : saturate(lighten($secondaryColor, 5), 15);
+
+$redActive             : saturate(darken($red, 5), 15);
+$orangeActive          : saturate(darken($orange, 5), 15);
+$yellowActive          : saturate(darken($yellow, 5), 15);
+$oliveActive           : saturate(darken($olive, 5), 15);
+$greenActive           : saturate(darken($green, 5), 15);
+$tealActive            : saturate(darken($teal, 5), 15);
+$blueActive            : saturate(darken($blue, 5), 15);
+$violetActive          : saturate(darken($violet, 5), 15);
+$purpleActive          : saturate(darken($purple, 5), 15);
+$pinkActive            : saturate(darken($pink, 5), 15);
+$brownActive           : saturate(darken($brown, 5), 15);
+
+$lightRedActive        : saturate(darken($lightRed, 5), 15);
+$lightOrangeActive     : saturate(darken($lightOrange, 5), 15);
+$lightYellowActive     : saturate(darken($lightYellow, 5), 15);
+$lightOliveActive      : saturate(darken($lightOlive, 5), 15);
+$lightGreenActive      : saturate(darken($lightGreen, 5), 15);
+$lightTealActive       : saturate(darken($lightTeal, 5), 15);
+$lightBlueActive       : saturate(darken($lightBlue, 5), 15);
+$lightVioletActive     : saturate(darken($lightViolet, 5), 15);
+$lightPurpleActive     : saturate(darken($lightPurple, 5), 15);
+$lightPinkActive       : saturate(darken($lightPink, 5), 15);
+$lightBrownActive      : saturate(darken($lightBrown, 5), 15);
+$lightGreyActive       : saturate(darken($lightGrey, 5), 15);
+$lightBlackActive      : saturate(darken($fullBlack, 5), 15);
+
+/*---  Emotive  ---*/
+$positiveColorActive   : saturate(darken($positiveColor, 5), 15);
+$negativeColorActive   : saturate(darken($negativeColor, 5), 15);
+
+/*---  Brand   ---*/
+$facebookActiveColor   : saturate(darken($facebookColor, 5), 15);
+$twitterActiveColor    : saturate(darken($twitterColor, 5), 15);
+$googlePlusActiveColor : saturate(darken($googlePlusColor, 5), 15);
+$linkedInActiveColor   : saturate(darken($linkedInColor, 5), 15);
+$youtubeActiveColor    : saturate(darken($youtubeColor, 5), 15);
+$instagramActiveColor  : saturate(darken($instagramColor, 5), 15);
+$pinterestActiveColor  : saturate(darken($pinterestColor, 5), 15);
+$vkActiveColor         : saturate(darken($vkColor, 5), 15);
+
+/*---  Dark Tones  ---*/
+$fullBlackActive       : darken($fullBlack, 5);
+$blackActive           : darken($black, 5);
+$greyActive            : darken($grey, 5);
+
+/*---  Light Tones  ---*/
+$whiteActive           : darken($white, 5);
+$offWhiteActive        : darken($offWhite, 5);
+$darkWhiteActive       : darken($darkWhite, 5);

js/tabulator/src/scss/semantic-ui/variables_table.scss

@@ -0,0 +1,248 @@
+@import "variables.scss";
+
+/*******************************
+             Table
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+$verticalMargin: 1em;
+$horizontalMargin: 0em;
+$margin: $verticalMargin $horizontalMargin;
+$borderCollapse: separate;
+$borderSpacing: 0px;
+$borderRadius: $defaultBorderRadius;
+$transition:
+  background $defaultDuration $defaultEasing,
+  color $defaultDuration $defaultEasing
+;
+$background: $white;
+$color: $textColor;
+$borderWidth: 1px;
+$border: $borderWidth solid $borderColor;
+$boxShadow: none;
+$textAlign: left;
+
+/*--------------
+     Parts
+---------------*/
+
+/* Table Row */
+$rowBorder: 1px solid $internalBorderColor;
+
+/* Table Cell */
+$cellVerticalPadding: $relativeMini;
+$cellHorizontalPadding: $relativeMini;
+$cellVerticalAlign: inherit;
+$cellTextAlign: inherit;
+$cellBorder: 1px solid $internalBorderColor;
+
+/* Table Header */
+$headerBorder: 1px solid $internalBorderColor;
+$headerDivider: none;
+$headerBackground: $offWhite;
+$headerAlign: inherit;
+$headerVerticalAlign: inherit;
+$headerColor: $textColor;
+$headerVerticalPadding: $relativeSmall;
+$headerHorizontalPadding: $cellHorizontalPadding;
+$headerFontStyle: none;
+$headerFontWeight: bold;
+$headerTextTransform: none;
+$headerBoxShadow: none;
+
+/* Table Footer */
+$footerBoxShadow: none;
+$footerBorder: 1px solid $borderColor;
+$footerDivider: none;
+$footerBackground: $offWhite;
+$footerAlign: inherit;
+$footerVerticalAlign: middle;
+$footerColor: $textColor;
+$footerVerticalPadding: $cellVerticalPadding;
+$footerHorizontalPadding: $cellHorizontalPadding;
+$footerFontStyle: normal;
+$footerFontWeight: normal;
+$footerTextTransform: none;
+
+/* Responsive Size */
+$responsiveHeaderDisplay: block;
+$responsiveFooterDisplay: block;
+$responsiveRowVerticalPadding: 1em;
+$responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
+$responsiveCellVerticalPadding: 0.25em;
+$responsiveCellHorizontalPadding: 0.75em;
+$responsiveCellBoxShadow: none !important;
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Definition */
+$definitionPageBackground: $white;
+
+$definitionHeaderBackground: transparent;
+$definitionHeaderColor: $unselectedTextColor;
+$definitionHeaderFontWeight: normal;
+
+$definitionFooterBackground: $definitionHeaderBackground;
+$definitionFooterColor: $definitionHeaderColor;
+$definitionFooterFontWeight: $definitionHeaderFontWeight;
+
+$definitionColumnBackground: $subtleTransparentBlack;
+$definitionColumnFontWeight: bold;
+$definitionColumnColor: $selectedTextColor;
+$definitionColumnFontSize: $relativeMedium;
+$definitionColumnTextTransform: '';
+$definitionColumnBoxShadow: '';
+$definitionColumnTextAlign: '';
+$definitionColumnHorizontalPadding: '';
+
+
+/*--------------
+    Couplings
+---------------*/
+
+$iconVerticalAlign: baseline;
+
+/*--------------
+     States
+---------------*/
+
+$stateMarkerWidth: 0px;
+
+/* Positive */
+$positiveColor: $positiveTextColor;
+$positiveBoxShadow: $stateMarkerWidth 0px 0px $positiveBorderColor inset;
+$positiveBackgroundHover: darken($positiveBackgroundColor, 3);
+$positiveColorHover: darken($positiveColor, 3);
+
+/* Negative */
+$negativeColor: $negativeTextColor;
+$negativeBoxShadow: $stateMarkerWidth 0px 0px $negativeBorderColor inset;
+$negativeBackgroundHover: darken($negativeBackgroundColor, 3);
+$negativeColorHover: darken($negativeColor, 3);
+
+/* Error */
+$errorColor: $errorTextColor;
+$errorBoxShadow: $stateMarkerWidth 0px 0px $errorBorderColor inset;
+$errorBackgroundHover: darken($errorBackgroundColor, 3);
+$errorColorHover: darken($errorColor, 3);
+
+/* Warning */
+$warningColor: $warningTextColor;
+$warningBoxShadow: $stateMarkerWidth 0px 0px $warningBorderColor inset;
+$warningBackgroundHover: darken($warningBackgroundColor, 3);
+$warningColorHover: darken($warningColor, 3);
+
+/* Active */
+$activeColor: $textColor;
+$activeBackgroundColor: #E0E0E0;
+$activeBoxShadow: $stateMarkerWidth 0px 0px $activeColor inset;
+
+$activeBackgroundHover: #EFEFEF;
+$activeColorHover: $selectedTextColor;
+
+/*--------------
+     Types
+---------------*/
+
+/* Attached */
+$attachedTopOffset: 0px;
+$attachedBottomOffset: 0px;
+$attachedHorizontalOffset: -$borderWidth;
+$attachedWidth: calc(100% + #{$attachedHorizontalOffset * -2});
+$attachedBoxShadow: none;
+$attachedBorder: $borderWidth solid $solidBorderColor;
+$attachedBottomBoxShadow:
+  $boxShadow,
+  $attachedBoxShadow
+;
+
+/* Striped */
+$stripedBackground: rgba(0, 0, 50, 0.02);
+$invertedStripedBackground: rgba(255, 255, 255, 0.05);
+
+/* Selectable */
+$selectableBackground: $transparentBlack;
+$selectableTextColor: $selectedTextColor;
+$selectableInvertedBackground: $transparentWhite;
+$selectableInvertedTextColor: $invertedSelectedTextColor;
+
+/* Sortable */
+$sortableBackground: '';
+$sortableColor: $textColor;
+
+$sortableBorder: 1px solid $borderColor;
+$sortableIconWidth: auto;
+$sortableIconDistance: 0.5em;
+$sortableIconOpacity: 0.8;
+$sortableIconFont: 'Icons';
+$sortableIconAscending: '\f0d8';
+$sortableIconDescending: '\f0d7';
+$sortableDisabledColor: $disabledTextColor;
+
+$sortableHoverBackground: $transparentBlack;
+$sortableHoverColor: $hoveredTextColor;
+
+$sortableActiveBackground: $transparentBlack;
+$sortableActiveColor: $selectedTextColor;
+
+$sortableActiveHoverBackground: $transparentBlack;
+$sortableActiveHoverColor: $selectedTextColor;
+
+$sortableInvertedBorderColor: transparent;
+$sortableInvertedHoverBackground: $transparentWhite $subtleGradient;
+$sortableInvertedHoverColor: $invertedHoveredTextColor;
+$sortableInvertedActiveBackground: $strongTransparentWhite $subtleGradient;
+$sortableInvertedActiveColor: $invertedSelectedTextColor;
+
+/* Colors */
+$coloredBorderSize: 0.2em;
+$coloredBorderRadius: 0em 0em $borderRadius $borderRadius;
+
+/* Inverted */
+$invertedBackground: #333333;
+$invertedBorder: none;
+$invertedCellBorderColor: $whiteBorderColor;
+$invertedCellColor: $invertedTextColor;
+
+$invertedHeaderBackground: $veryStrongTransparentBlack;
+$invertedHeaderColor: $invertedTextColor;
+$invertedHeaderBorderColor: $invertedCellBorderColor;
+
+$invertedDefinitionColumnBackground: $subtleTransparentWhite;
+$invertedDefinitionColumnColor: $invertedSelectedTextColor;
+$invertedDefinitionColumnFontWeight: bold;
+
+/* Basic */
+$basicTableBackground: transparent;
+$basicTableBorder: $borderWidth solid $borderColor;
+$basicBoxShadow: none;
+
+$basicTableHeaderBackground: transparent;
+$basicTableCellBackground: transparent;
+$basicTableHeaderDivider: none;
+$basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1);
+$basicTableCellPadding: '';
+$basicTableStripedBackground: $transparentBlack;
+
+/* Padded */
+$paddedVerticalPadding: 1em;
+$paddedHorizontalPadding: 1em;
+$veryPaddedVerticalPadding: 1.5em;
+$veryPaddedHorizontalPadding: 1.5em;
+
+/* Compact */
+$compactVerticalPadding: 0.5em;
+$compactHorizontalPadding: 0.7em;
+$veryCompactVerticalPadding: 0.4em;
+$veryCompactHorizontalPadding: 0.6em;
+
+
+/* Sizes */
+$small: 0.9em;
+$medium: 1em;
+$large: 1.1em;

js/tabulator/src/scss/tabulator.scss

@@ -0,0 +1,686 @@
+
+//Main Theme Variables
+$backgroundColor: #888; //background color of tabulator
+$borderColor:#999; //border to tablulator
+$textSize:14px; //table text size
+
+//header themeing
+$headerBackgroundColor:#e6e6e6; //border to tablulator
+$headerTextColor:#555; //header text colour
+$headerBorderColor:#aaa;  //header border color
+$headerSeperatorColor:#999; //header bottom seperator color
+$headerMargin:4px; //padding round header
+
+//column header arrows
+$sortArrowActive: #666;
+$sortArrowInactive: #bbb;
+
+//row themeing
+$rowBackgroundColor:#fff; //table row background color
+$rowAltBackgroundColor:#EFEFEF; //table row background color
+$rowBorderColor:#aaa; //table border color
+$rowTextColor:#333; //table text color
+$rowHoverBackground:#bbb; //row background color on hover
+
+$rowSelectedBackground: #9ABCEA; //row background color when selected
+$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
+
+$editBoxColor:#1D68CD; //border color for edit boxes
+$errorColor:#dd0000; //error indication
+
+//footer themeing
+$footerBackgroundColor:#e6e6e6; //border to tablulator
+$footerTextColor:#555; //footer text colour
+$footerBorderColor:#aaa; //footer border color
+$footerSeperatorColor:#999; //footer bottom seperator color
+
+
+
+//Tabulator Containing Element
+.tabulator{
+	position: relative;
+
+	border: 1px solid $borderColor;
+
+	background-color: $backgroundColor;
+
+	font-size:$textSize;
+	text-align: left;
+	overflow:hidden;
+
+	-webkit-transform: translatez(0);
+	-moz-transform: translatez(0);
+	-ms-transform: translatez(0);
+	-o-transform: translatez(0);
+	transform: translatez(0);
+
+	&[tabulator-layout="fitDataFill"]{
+		.tabulator-tableHolder{
+			.tabulator-table{
+				min-width:100%;
+			}
+		}
+	}
+
+	&.tabulator-block-select{
+		user-select: none;
+	}
+
+	//column header containing element
+	.tabulator-header{
+		position:relative;
+		box-sizing: border-box;
+
+		width:100%;
+
+		border-bottom:1px solid $headerSeperatorColor;
+		background-color: $headerBackgroundColor;
+		color: $headerTextColor;
+		font-weight:bold;
+
+		white-space: nowrap;
+		overflow:hidden;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		//individual column header element
+		.tabulator-col{
+			display:inline-block;
+			position:relative;
+			box-sizing:border-box;
+			border-right:1px solid $headerBorderColor;
+			background:$headerBackgroundColor;
+			text-align:left;
+			vertical-align: bottom;
+			overflow: hidden;
+
+			&.tabulator-moving{
+				position: absolute;
+				border:1px solid  $headerSeperatorColor;
+				background:darken($headerBackgroundColor, 10%);
+				pointer-events: none;
+			}
+
+			//hold content of column header
+			.tabulator-col-content{
+				position: relative;
+				padding:4px;
+
+				//hold title of column header
+				.tabulator-col-title{
+					box-sizing:border-box;
+					width: 100%;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align:bottom;
+
+					//element to hold title editor
+					.tabulator-title-editor{
+						box-sizing: border-box;
+						width: 100%;
+
+						border:1px solid #999;
+
+						padding:1px;
+
+						background: #fff;
+					}
+				}
+
+				//column sorter arrow
+				.tabulator-arrow{
+					display: inline-block;
+					position: absolute;
+					top:9px;
+					right:8px;
+					width: 0;
+					height: 0;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-bottom: 6px solid $sortArrowInactive;
+				}
+
+			}
+
+			//complex header column group
+			&.tabulator-col-group{
+
+				//gelement to hold sub columns in column group
+				.tabulator-col-group-cols{
+					position:relative;
+					display: flex;
+
+					border-top:1px solid $headerBorderColor;
+					overflow: hidden;
+
+					.tabulator-col:last-child{
+						margin-right:-1px;
+					}
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//placeholder element for sortable columns
+			&.ui-sortable-helper{
+				position: absolute;
+				background-color: $headerBackgroundColor !important;
+				border:1px solid $headerBorderColor;
+			}
+
+			//header filter containing element
+			.tabulator-header-filter{
+				position: relative;
+				box-sizing: border-box;
+				margin-top:2px;
+				width:100%;
+				text-align: center;
+
+				//styling adjustment for inbuilt editors
+				textarea{
+					height:auto !important;
+				}
+
+				svg{
+					margin-top: 3px;
+				}
+			}
+
+			//styling child elements for sortable columns
+			&.tabulator-sortable{
+				.tabulator-col-title{
+					padding-right:25px;
+				}
+
+				&:hover{
+					cursor:pointer;
+					background-color:darken($headerBackgroundColor, 10%);
+				}
+
+				&[aria-sort="none"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowInactive;
+					}
+				}
+
+				&[aria-sort="asc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowActive;
+					}
+				}
+
+				&[aria-sort="desc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: 6px solid $sortArrowActive;
+						border-bottom: none;
+					}
+				}
+			}
+
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			// background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			min-width:200%;
+
+			background:lighten($headerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:lighten($headerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $headerBorderColor;
+
+			overflow: hidden;
+		}
+	}
+
+	//scrolling element to hold table
+	.tabulator-tableHolder{
+		position:relative;
+		width:100%;
+		white-space: nowrap;
+		overflow:auto;
+		-webkit-overflow-scrolling: touch;
+
+		&:focus{
+			outline: none;
+		}
+
+		//default placeholder element
+		.tabulator-placeholder{
+			position: absolute;
+			box-sizing:border-box;
+			display: flex;
+			align-items:center;
+
+			top:0;
+			left:0;
+			height:100%;
+			width:100%;
+
+			span{
+				display: inline-block;
+
+				margin:0 auto;
+				padding:10px;
+
+				color:#ccc;
+				font-weight: bold;
+				font-size: 20px;
+			}
+		}
+
+		//element to hold table rows
+		.tabulator-table{
+			position:relative;
+			display:inline-block;
+			background-color:$rowBackgroundColor;
+			white-space: nowrap;
+			overflow:visible;
+			color:$rowTextColor;
+
+			//row element
+			.tabulator-row{
+				&.tabulator-calcs{
+					font-weight: bold;
+					background:darken($rowAltBackgroundColor, 5%) !important;
+
+					&.tabulator-calcs-top{
+						border-bottom:2px solid $rowBorderColor;
+					}
+
+					&.tabulator-calcs-bottom{
+						border-top:2px solid $rowBorderColor;
+					}
+				}
+			}
+
+		}
+	}
+
+	//row element
+	.tabulator-row{
+		position: relative;
+		box-sizing: border-box;
+		min-height:$textSize + ($headerMargin * 2);
+		background-color: $rowBackgroundColor;
+
+
+		&.tabulator-row-even{
+			background-color: $rowAltBackgroundColor;
+		}
+
+		&.tabulator-selectable:hover{
+			background-color:$rowHoverBackground;
+			cursor: pointer;
+		}
+
+		&.tabulator-selected{
+			background-color:$rowSelectedBackground;
+		}
+
+		&.tabulator-selected:hover{
+			background-color:$rowSelectedBackgroundHover;
+			cursor: pointer;
+		}
+
+		&.tabulator-row-moving{
+			border:1px solid #000;
+			background:#fff;
+		}
+
+		&.tabulator-moving{
+			position: absolute;
+
+			border-top:1px solid  $rowBorderColor;
+			border-bottom:1px solid  $rowBorderColor;
+
+			pointer-events: none;
+			z-index:15;
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		//cell element
+		.tabulator-cell{
+			display:inline-block;
+			position: relative;
+			box-sizing:border-box;
+			padding:4px;
+			border-right:1px solid $rowBorderColor;
+			vertical-align:middle;
+			white-space:nowrap;
+			overflow:hidden;
+			text-overflow:ellipsis;
+
+
+			&.tabulator-editing{
+				border:1px solid  $editBoxColor;
+				padding: 0;
+
+				input, select{
+					border:1px;
+					background:transparent;
+				}
+			}
+
+			&.tabulator-validation-fail{
+				border:1px solid $errorColor;
+				input, select{
+					border:1px;
+					background:transparent;
+
+					color: $errorColor;
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//movable row handle
+			&.tabulator-row-handle{
+
+				display: inline-flex;
+				align-items:center;
+
+				-moz-user-select: none;
+				-khtml-user-select: none;
+				-webkit-user-select: none;
+				-o-user-select: none;
+
+				//handle holder
+				.tabulator-row-handle-box{
+					width:80%;
+
+					//Hamburger element
+					.tabulator-row-handle-bar{
+						width:100%;
+						height:3px;
+						margin:2px 10% 0 10%;
+						background:#666;
+					}
+				}
+			}
+		}
+
+		//row grouping element
+		&.tabulator-group{
+			box-sizing:border-box;
+			border-bottom:1px solid #999;
+			border-right:1px solid $rowBorderColor;
+			border-top:1px solid #999;
+			padding:5px;
+			padding-left:10px;
+			background:#ccc;
+			font-weight:bold;
+
+			min-width: 100%;
+
+			&:hover{
+				cursor:pointer;
+				background-color:rgba(0,0,0,.1);
+			}
+
+			&.tabulator-group-visible{
+
+				.tabulator-arrow{
+					margin-right:10px;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-top: 6px solid $sortArrowActive;
+					border-bottom: 0;
+				}
+
+			}
+
+			&.tabulator-group-level-1{
+				.tabulator-arrow{
+					margin-left:20px;
+				}
+			}
+
+			&.tabulator-group-level-2{
+				.tabulator-arrow{
+					margin-left:40px;
+				}
+			}
+
+			&.tabulator-group-level-3{
+				.tabulator-arrow{
+					margin-left:60px;
+				}
+			}
+
+			&.tabulator-group-level-4{
+				.tabulator-arrow{
+					margin-left:80px;
+				}
+			}
+
+			&.tabulator-group-level-5{
+				.tabulator-arrow{
+					margin-left:1000px;
+				}
+			}
+
+			//sorting arrow
+			.tabulator-arrow{
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin-right:16px;
+				border-top: 6px solid transparent;
+				border-bottom: 6px solid transparent;
+				border-right: 0;
+				border-left: 6px solid $sortArrowActive;
+				vertical-align:middle;
+			}
+
+			span{
+				margin-left:10px;
+				color:#d00;
+			}
+		}
+
+	}
+
+	//footer element
+	.tabulator-footer{
+		padding:5px 10px;
+		border-top:1px solid $footerSeperatorColor;
+		background-color: $footerBackgroundColor;
+		text-align: right;
+		color: $footerTextColor;
+		font-weight:bold;
+		white-space:nowrap;
+		user-select:none;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:calc("100% + 20px");
+			margin:-5px -10px 5px -10px;
+
+			text-align: left;
+
+			background:lighten($footerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:lighten($footerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-bottom:1px solid $rowBorderColor;
+			border-top:1px solid $rowBorderColor;
+
+			overflow: hidden;
+
+			&:only-child{
+				margin-bottom:-5px;
+				border-bottom:none;
+			}
+		}
+
+		//pagination container element
+		.tabulator-pages{
+			margin:0 7px;
+		}
+
+		//pagination button
+		.tabulator-page{
+			display:inline-block;
+
+			margin:0 2px;
+			padding:2px 5px;
+
+			border:1px solid $footerBorderColor;
+			border-radius:3px;
+
+			background:rgba(255,255,255,.2);
+
+			color: $footerTextColor;
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+
+			&.active{
+				color:#d00;
+			}
+
+			&:disabled{
+				opacity:.5;
+			}
+
+			&:not(.disabled){
+				&:hover{
+					cursor:pointer;
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+	}
+
+	//column resize handles
+	.tabulator-col-resize-handle{
+		position:absolute;
+		right:0;
+		top:0;
+		bottom:0;
+		width:5px;
+
+		&.prev{
+			left:0;
+			right:auto;
+		}
+
+		&:hover{
+			cursor:ew-resize;
+		}
+	}
+
+
+	//holding div that contains loader and covers tabulator element to prevent interaction
+	.tablulator-loader{
+		position:absolute;
+		display: flex;
+		align-items:center;
+
+		top:0;
+		left:0;
+		z-index:100;
+
+		height:100%;
+		width:100%;
+		background:rgba(0,0,0,.4);
+		text-align:center;
+
+		//loading message element
+		.tabulator-loader-msg{
+			display:inline-block;
+
+			margin:0 auto;
+			padding:10px 20px;
+
+			border-radius:10px;
+
+			background:#fff;
+			font-weight:bold;
+			font-size:16px;
+
+			//loading message
+			&.tabulator-loading{
+				border:4px solid #333;
+				color:#000;
+			}
+
+			//error message
+			&.tabulator-error{
+				border:4px solid #D00;
+				color:#590000;
+			}
+		}
+	}
+}

js/tabulator/src/scss/tabulator_midnight.scss

@@ -0,0 +1,684 @@
+
+//Main Theme Variables
+$backgroundColor: #222; //background color of tabulator
+$borderColor:#333; //border to tablulator
+$textSize:14px; //table text size
+
+//header themeing
+$headerBackgroundColor:#333; //border to tablulator
+$headerTextColor:#fff; //header text colour
+$headerBorderColor:#aaa;  //header border color
+$headerSeperatorColor:#999; //header bottom seperator color
+$headerMargin:4px; //padding round header
+
+//column header arrows
+$sortArrowActive: #666;
+$sortArrowInactive: #bbb;
+
+//row themeing
+$rowBackgroundColor:#666; //table row background color
+$rowAltBackgroundColor:#444; //table row background color
+$rowBorderColor:#888; //table border color
+$rowTextColor:#fff; //table text color
+$rowHoverBackground:#999; //row background color on hover
+
+$rowSelectedBackground: #000; //row background color when selected
+$rowSelectedBackgroundHover: #888;//row background color when selected and hovered
+
+$editBoxColor:#999; //border color for edit boxes
+$errorColor:#dd0000; //error indication
+
+//footer themeing
+$footerBackgroundColor:#333; //border to tablulator
+$footerTextColor:#333; //footer text colour
+$footerBorderColor:#aaa; //footer border color
+$footerSeperatorColor:#999; //footer bottom seperator color
+
+
+
+//Tabulator Containing Element
+.tabulator{
+	position: relative;
+	border: 1px solid $borderColor;
+	background-color: $backgroundColor;
+	overflow:hidden;
+	font-size:$textSize;
+	text-align: left;
+
+	-webkit-transform: translatez(0);
+	-moz-transform: translatez(0);
+	-ms-transform: translatez(0);
+	-o-transform: translatez(0);
+	transform: translatez(0);
+
+	&[tabulator-layout="fitDataFill"]{
+		.tabulator-tableHolder{
+			.tabulator-table{
+				min-width:100%;
+			}
+		}
+	}
+
+	&.tabulator-block-select{
+		user-select: none;
+	}
+
+	//column header containing element
+	.tabulator-header{
+		position:relative;
+		box-sizing: border-box;
+
+		width:100%;
+
+		border-bottom:1px solid $headerSeperatorColor;
+		background-color: $headerBackgroundColor;
+		color: $headerTextColor;
+		font-weight:bold;
+
+		white-space: nowrap;
+		overflow:hidden;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		//individual column header element
+		.tabulator-col{
+			display:inline-block;
+			position:relative;
+			box-sizing:border-box;
+			border-right:1px solid $headerBorderColor;
+			background-color: $headerBackgroundColor;
+			text-align:left;
+			vertical-align: bottom;
+			overflow: hidden;
+
+			&.tabulator-moving{
+				position: absolute;
+				border:1px solid  $headerSeperatorColor;
+				background:darken($headerBackgroundColor, 10%);
+				pointer-events: none;
+			}
+
+			//hold content of column header
+			.tabulator-col-content{
+				position: relative;
+				padding:4px;
+
+				//hold title of column header
+				.tabulator-col-title{
+					box-sizing:border-box;
+					width: 100%;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align:bottom;
+
+					//element to hold title editor
+					.tabulator-title-editor{
+						box-sizing: border-box;
+						width: 100%;
+
+						border:1px solid #999;
+
+						padding:1px;
+
+						background: #444;
+						color: #fff;
+					}
+
+				}
+
+				//column sorter arrow
+				.tabulator-arrow{
+					display: inline-block;
+					position: absolute;
+					top:9px;
+					right:8px;
+					width: 0;
+					height: 0;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-bottom: 6px solid $sortArrowInactive;
+				}
+
+			}
+
+			//complex header column group
+			&.tabulator-col-group{
+
+				//gelement to hold sub columns in column group
+				.tabulator-col-group-cols{
+					position:relative;
+					display: flex;
+
+					border-top:1px solid $headerBorderColor;
+					overflow: hidden;
+
+					.tabulator-col:last-child{
+						margin-right:-1px;
+					}
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//placeholder element for sortable columns
+			&.ui-sortable-helper{
+				position: absolute;
+				background-color: darken($headerBackgroundColor, 10%) !important;
+				border:1px solid $headerBorderColor;
+			}
+
+			//header filter containing element
+			.tabulator-header-filter{
+				position: relative;
+				box-sizing: border-box;
+				margin-top:2px;
+				width:100%;
+				text-align: center;
+
+				//styling adjustment for inbuilt editors
+				textarea{
+					height:auto !important;
+				}
+
+				svg{
+					margin-top: 3px;
+				}
+
+				input, select{
+					border:1px solid #999;
+					background: #444;
+					color: #fff;
+				}
+			}
+
+			//styling child elements for sortable columns
+			&.tabulator-sortable{
+				.tabulator-col-title{
+					padding-right:25px;
+				}
+
+				&:hover{
+					cursor:pointer;
+					background-color:darken($headerBackgroundColor, 10%);
+				}
+
+
+				&[aria-sort="none"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowInactive;
+					}
+				}
+
+				&[aria-sort="asc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowActive;
+					}
+				}
+
+				&[aria-sort="desc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: 6px solid $sortArrowActive;
+						border-bottom: none;
+					}
+				}
+			}
+
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			// background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			min-width:200%;
+
+			background:darken($headerBackgroundColor, 10%) !important;
+
+			.tabulator-row{
+				background:darken($headerBackgroundColor, 10%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $headerBorderColor;
+
+			overflow: hidden;
+		}
+
+
+	}
+
+	//scrolling element to hold table
+	.tabulator-tableHolder{
+		position:relative;
+		width:100%;
+		white-space: nowrap;
+		overflow:auto;
+		-webkit-overflow-scrolling: touch;
+
+		&:focus{
+			outline: none;
+		}
+
+		//default placeholder element
+		.tabulator-placeholder{
+			position: absolute;
+			box-sizing:border-box;
+			display: flex;
+			align-items:center;
+
+			top:0;
+			left:0;
+			height:100%;
+			width:100%;
+
+			span{
+				display: inline-block;
+
+				margin:0 auto;
+				padding:10px;
+
+				color:#eee;
+				font-weight: bold;
+				font-size: 20px;
+			}
+		}
+
+		//element to hold table rows
+		.tabulator-table{
+			position:relative;
+			display:inline-block;
+			background-color:$rowBackgroundColor;
+			white-space: nowrap;
+			overflow:visible;
+			color:$rowTextColor;
+
+			.tabulator-row{
+				&.tabulator-calcs{
+					font-weight: bold;
+					background:darken($rowAltBackgroundColor, 5%) !important;
+
+					&.tabulator-calcs-top{
+						border-bottom:2px solid $rowBorderColor;
+					}
+
+					&.tabulator-calcs-bottom{
+						border-top:2px solid $rowBorderColor;
+					}
+				}
+			}
+		}
+	}
+
+	//row element
+	.tabulator-row{
+		position: relative;
+		box-sizing: border-box;
+
+		min-height:$textSize + ($headerMargin * 2);
+		background-color: $rowBackgroundColor;
+
+		&:nth-child(even){
+			background-color: $rowAltBackgroundColor;
+		}
+
+		&.tabulator-selectable:hover{
+			background-color:$rowHoverBackground;
+			cursor: pointer;
+		}
+
+		&.tabulator-selected{
+			background-color:$rowSelectedBackground;
+		}
+
+		&.tabulator-selected:hover{
+			background-color:$rowSelectedBackgroundHover;
+			cursor: pointer;
+		}
+
+		&.tabulator-moving{
+			position: absolute;
+
+			border-top:1px solid  $rowBorderColor;
+			border-bottom:1px solid  $rowBorderColor;
+
+			pointer-events: none !important;
+			z-index:15;
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+
+		//cell element
+		.tabulator-cell{
+			display:inline-block;
+			position: relative;
+			box-sizing:border-box;
+			padding:4px;
+			border-right:1px solid $rowBorderColor;
+			vertical-align:middle;
+			white-space:nowrap;
+			overflow:hidden;
+			text-overflow:ellipsis;
+
+
+			&.tabulator-editing{
+				border:1px solid  $editBoxColor;
+				padding: 0;
+
+				input, select{
+					border:1px;
+					background:transparent;
+				}
+			}
+
+			&.tabulator-validation-fail{
+				border:1px solid $errorColor;
+				input, select{
+					border:1px;
+					background:transparent;
+
+					color: $errorColor;
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//movable row handle
+			&.tabulator-row-handle{
+
+				display: inline-flex;
+				align-items:center;
+
+				-moz-user-select: none;
+				-khtml-user-select: none;
+				-webkit-user-select: none;
+				-o-user-select: none;
+
+				//handle holder
+				.tabulator-row-handle-box{
+					width:80%;
+
+					//Hamburger element
+					.tabulator-row-handle-bar{
+						width:100%;
+						height:3px;
+						margin:2px 10% 0 10%;
+						background:#666;
+					}
+				}
+			}
+		}
+
+
+		//row grouping element
+		&.tabulator-group{
+
+			box-sizing:border-box;
+			border-bottom:1px solid #999;
+			border-right:1px solid $rowBorderColor;
+			border-top:1px solid #999;
+			padding:5px;
+			padding-left:10px;
+			background:#ccc;
+			font-weight:bold;
+			color:#333;
+
+			min-width: 100%;
+
+			&:hover{
+				cursor:pointer;
+				background-color:rgba(0,0,0,.1);
+			}
+
+			&.tabulator-group-visible{
+				.tabulator-arrow{
+					margin-right:10px;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-top: 6px solid $sortArrowActive;
+					border-bottom: 0;
+				}
+			}
+
+			&.tabulator-group-level-1{
+				.tabulator-arrow{
+					margin-left:20px;
+				}
+			}
+
+			&.tabulator-group-level-2{
+				.tabulator-arrow{
+					margin-left:40px;
+				}
+			}
+
+			&.tabulator-group-level-3{
+				.tabulator-arrow{
+					margin-left:60px;
+				}
+			}
+
+			&.tabulator-group-level-4{
+				.tabulator-arrow{
+					margin-left:80px;
+				}
+			}
+
+			&.tabulator-group-level-5{
+				.tabulator-arrow{
+					margin-left:1000px;
+				}
+			}
+
+			//sorting arrow
+			.tabulator-arrow{
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin-right:16px;
+				border-top: 6px solid transparent;
+				border-bottom: 6px solid transparent;
+				border-right: 0;
+				border-left: 6px solid $sortArrowActive;
+				vertical-align:middle;
+			}
+
+			span{
+				margin-left:10px;
+				color:#666;
+			}
+		}
+	}
+
+	//column resize handles
+	.tabulator-col-resize-handle{
+		position:absolute;
+		right:0;
+		top:0;
+		bottom:0;
+		width:5px;
+
+		&.prev{
+			left:0;
+			right:auto;
+		}
+
+		&:hover{
+			cursor:ew-resize;
+		}
+	}
+
+
+	//footer element
+	.tabulator-footer{
+		padding:5px 10px;
+		border-top:1px solid $footerSeperatorColor;
+		background-color: $footerBackgroundColor;
+		text-align:right;
+		color: $footerTextColor;
+		font-weight:bold;
+		white-space:nowrap;
+		user-select:none;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:calc("100% + 20px");
+			margin:-5px -10px 5px -10px;
+
+			text-align: left;
+
+			background:darken($footerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:darken($footerBackgroundColor, 5%) !important;
+				color:$headerTextColor;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-bottom:1px solid $rowBorderColor;
+			border-top:1px solid $rowBorderColor;
+
+			overflow: hidden;
+
+			&:only-child{
+				margin-bottom:-5px;
+				border-bottom:none;
+			}
+		}
+
+		//pagination container element
+		.tabulator-pages{
+			margin:0 7px;
+		}
+
+		//pagination button
+		.tabulator-page{
+			display:inline-block;
+			margin:0 2px;
+			border:1px solid $footerBorderColor;
+			border-radius:3px;
+			padding:2px 5px;
+			background:rgba(255,255,255,.2);
+			color: $footerTextColor;
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+
+			&.active{
+				color:#fff;
+			}
+
+			&:disabled{
+				opacity:.5;
+			}
+
+			&:not(.disabled){
+				&:hover{
+					cursor:pointer;
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+	}
+
+	//holding div that contains loader and covers tabulator element to prevent interaction
+	.tablulator-loader{
+		position:absolute;
+		display: flex;
+		align-items:center;
+
+		top:0;
+		left:0;
+		z-index:100;
+
+		height:100%;
+		width:100%;
+		background:rgba(0,0,0,.4);
+		text-align:center;
+
+		//loading message element
+		.tabulator-loader-msg{
+			display:inline-block;
+
+			margin:0 auto;
+			padding:10px 20px;
+
+			border-radius:10px;
+
+			background:#fff;
+			font-weight:bold;
+			font-size:16px;
+
+			//loading message
+			&.tabulator-loading{
+				border:4px solid #333;
+				color:#000;
+			}
+
+			//error message
+			&.tabulator-error{
+				border:4px solid #D00;
+				color:#590000;
+			}
+		}
+	}
+}

js/tabulator/src/scss/tabulator_modern.scss

@@ -0,0 +1,722 @@
+
+$primary: #3759D7; //the base text color from which the rest of the theme derives
+
+//Main Theme Variables
+$backgroundColor: #fff; //background color of tabulator
+$borderColor:#fff; //border to tablulator
+$textSize:16px; //table text size
+
+//header themeing
+$headerBackgroundColor:#fff; //border to tablulator
+$headerTextColor:$primary; //header text colour
+$headerBorderColor:#fff;  //header border color
+$headerSeperatorColor:$primary; //header bottom seperator color
+$headerMargin:4px; //padding round header
+
+//column header arrows
+$sortArrowActive: $primary;
+$sortArrowInactive: lighten($primary, 30%);
+
+//row themeing
+$rowBackgroundColor:#f3f3f3; //table row background color
+$rowAltBackgroundColor:#fff; //table row background color
+$rowBorderColor:#fff; //table border color
+$rowTextColor:#333; //table text color
+$rowHoverBackground:#bbb; //row background color on hover
+
+$rowSelectedBackground: #9ABCEA; //row background color when selected
+$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
+
+$editBoxColor:#1D68CD; //border color for edit boxes
+$errorColor:#dd0000; //error indication
+
+//footer themeing
+$footerBackgroundColor:#fff; //border to tablulator
+$footerTextColor:$primary; //footer text colour
+$footerBorderColor:#aaa; //footer border color
+$footerSeperatorColor:#999; //footer bottom seperator color
+
+$handleWidth:10px; //width of the row handle
+$handleColor: $primary; //color for odd numbered rows
+$handleColorAlt: lighten($primary, 10%); //color for even numbered rows
+
+
+//Tabulator Containing Element
+.tabulator{
+	position: relative;
+	border: 1px solid $borderColor;
+	background-color: $backgroundColor;
+	overflow:hidden;
+	font-size:$textSize;
+	text-align: left;
+
+	-webkit-transform: translatez(0);
+	-moz-transform: translatez(0);
+	-ms-transform: translatez(0);
+	-o-transform: translatez(0);
+	transform: translatez(0);
+
+	&[tabulator-layout="fitDataFill"]{
+		.tabulator-tableHolder{
+			.tabulator-table{
+				min-width:100%;
+			}
+		}
+	}
+
+	&.tabulator-block-select{
+		user-select: none;
+	}
+
+	//column header containing element
+	.tabulator-header{
+		position:relative;
+		box-sizing: border-box;
+
+		width:100%;
+
+		border-bottom:3px solid $headerSeperatorColor;
+		margin-bottom:4px;
+		background-color: $headerBackgroundColor;
+		color: $headerTextColor;
+		font-weight:bold;
+
+		white-space: nowrap;
+		overflow:hidden;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		padding-left:$handleWidth;
+
+		font-size: 1.1em;
+
+		//individual column header element
+		.tabulator-col{
+			display:inline-block;
+			position:relative;
+			box-sizing:border-box;
+			border-right:2px solid $headerBorderColor;
+			background-color: $headerBackgroundColor;
+			text-align:left;
+			vertical-align: bottom;
+			overflow: hidden;
+
+			&.tabulator-moving{
+				position: absolute;
+				border:1px solid  $headerSeperatorColor;
+				background:darken($headerBackgroundColor, 10%);
+				pointer-events: none;
+			}
+
+			//hold content of column header
+			.tabulator-col-content{
+				position: relative;
+				padding:4px;
+
+				//hold title of column header
+				.tabulator-col-title{
+					box-sizing:border-box;
+					width: 100%;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align:bottom;
+
+					//element to hold title editor
+					.tabulator-title-editor{
+						box-sizing: border-box;
+						width: 100%;
+
+						border:1px solid $primary;
+
+						padding:1px;
+
+						background: #fff;
+
+						font-size: 1em;
+						color: $primary;
+					}
+				}
+
+				//column sorter arrow
+				.tabulator-arrow{
+					display: inline-block;
+					position: absolute;
+					top:9px;
+					right:8px;
+					width: 0;
+					height: 0;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-bottom: 6px solid $sortArrowInactive;
+				}
+
+			}
+
+			//complex header column group
+			&.tabulator-col-group{
+
+				//gelement to hold sub columns in column group
+				.tabulator-col-group-cols{
+					position:relative;
+					display: flex;
+
+					border-top:2px solid $headerSeperatorColor;
+					overflow: hidden;
+
+					.tabulator-col:last-child{
+						margin-right:-1px;
+					}
+				}
+			}
+
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//placeholder element for sortable columns
+			&.ui-sortable-helper{
+				position: absolute;
+				background-color: darken($headerBackgroundColor, 10%) !important;
+				border:1px solid $headerBorderColor;
+			}
+
+			//header filter containing element
+			.tabulator-header-filter{
+				position: relative;
+				box-sizing: border-box;
+				margin-top:2px;
+				width:100%;
+				text-align: center;
+
+				//styling adjustment for inbuilt editors
+				textarea{
+					height:auto !important;
+				}
+
+				svg{
+					margin-top: 3px;
+				}
+			}
+
+			//styling child elements for sortable columns
+			&.tabulator-sortable{
+				.tabulator-col-title{
+					padding-right:25px;
+				}
+
+				&:hover{
+					cursor:pointer;
+					background-color:darken($headerBackgroundColor, 10%);
+				}
+
+
+				&[aria-sort="none"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowInactive;
+					}
+				}
+
+				&[aria-sort="asc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowActive;
+					}
+				}
+
+				&[aria-sort="desc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: 6px solid $sortArrowActive;
+						border-bottom: none;
+					}
+				}
+			}
+
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			// background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				padding-left: $handleWidth;
+
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			min-width:200%;
+
+			border-top:2px solid $headerSeperatorColor !important;
+
+			background:lighten($headerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				padding-left: 0 !important;
+
+				background:lighten($headerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+
+				.tabulator-cell{
+					background:none;
+				}
+			}
+
+			border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $headerBorderColor;
+
+			overflow: hidden;
+		}
+	}
+
+	//scrolling element to hold table
+	.tabulator-tableHolder{
+		position:relative;
+		width:100%;
+		white-space: nowrap;
+		overflow:auto;
+		-webkit-overflow-scrolling: touch;
+
+		&:focus{
+			outline: none;
+		}
+
+		//default placeholder element
+		.tabulator-placeholder{
+			position: absolute;
+			box-sizing:border-box;
+			display: flex;
+			align-items:center;
+
+			top:0;
+			left:0;
+			height:100%;
+			width:100%;
+
+			span{
+				display: inline-block;
+
+				margin:0 auto;
+				padding:10px;
+
+				color:$primary;
+				font-weight: bold;
+				font-size: 20px;
+			}
+		}
+
+		//element to hold table rows
+		.tabulator-table{
+			position:relative;
+			display:inline-block;
+			background-color:$rowBackgroundColor;
+			white-space: nowrap;
+			overflow:visible;
+			color:$rowTextColor;
+
+			.tabulator-row{
+				&.tabulator-calcs{
+					font-weight: bold;
+					background:darken($rowAltBackgroundColor, 5%) !important;
+
+					&.tabulator-calcs-top{
+						border-bottom:2px solid $headerSeperatorColor;
+					}
+
+					&.tabulator-calcs-bottom{
+						border-top:2px solid $headerSeperatorColor;
+					}
+				}
+			}
+		}
+	}
+
+	//row element
+	.tabulator-row{
+		position: relative;
+		box-sizing: border-box;
+
+		box-sizing: border-box;
+		min-height:$textSize + ($headerMargin * 2);
+
+		background-color: $handleColor;
+
+		padding-left: $handleWidth !important;
+
+		margin-bottom: 2px;
+
+		&:nth-child(even){
+			background-color: $handleColorAlt;
+
+			.tabulator-cell{
+				background-color: $rowAltBackgroundColor;
+			}
+		}
+
+		&.tabulator-selectable:hover{
+			cursor: pointer;
+
+			.tabulator-cell{
+				background-color:$rowHoverBackground;
+			}
+		}
+
+		&.tabulator-selected{
+			.tabulator-cell{
+				background-color:$rowSelectedBackground;
+			}
+		}
+
+		&.tabulator-selected:hover{
+			.tabulator-cell{
+				background-color:$rowSelectedBackgroundHover;
+				cursor: pointer;
+			}
+		}
+
+		&.tabulator-moving{
+			position: absolute;
+
+			border-top:1px solid  $rowBorderColor;
+			border-bottom:1px solid  $rowBorderColor;
+
+			pointer-events: none !important;
+			z-index:15;
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				padding-left: $handleWidth;
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		//cell element
+		.tabulator-cell{
+			display:inline-block;
+			position: relative;
+			box-sizing:border-box;
+			padding:6px 4px;
+			border-right:2px solid $rowBorderColor;
+			vertical-align:middle;
+			white-space:nowrap;
+			overflow:hidden;
+			text-overflow:ellipsis;
+
+			background-color: $rowBackgroundColor;
+
+			&.tabulator-editing{
+				border:1px solid  $editBoxColor;
+				padding: 0;
+
+				input, select{
+					border:1px;
+					background:transparent;
+				}
+			}
+
+			&.tabulator-validation-fail{
+				border:1px solid $errorColor;
+				input, select{
+					border:1px;
+					background:transparent;
+
+					color: $errorColor;
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//movable row handle
+			&.tabulator-row-handle{
+
+				display: inline-flex;
+				align-items:center;
+
+				-moz-user-select: none;
+				-khtml-user-select: none;
+				-webkit-user-select: none;
+				-o-user-select: none;
+
+				//handle holder
+				.tabulator-row-handle-box{
+					width:80%;
+
+					//Hamburger element
+					.tabulator-row-handle-bar{
+						width:100%;
+						height:3px;
+						margin:2px 10% 0 10%;
+						background:#666;
+					}
+				}
+			}
+		}
+
+		//row grouping element
+		&.tabulator-group{
+
+			box-sizing:border-box;
+			border-bottom:2px solid $primary;
+			border-top:2px solid $primary;
+			padding:5px;
+			padding-left:10px;
+			background:lighten($primary, 20%);
+			font-weight:bold;
+			color:fff;
+			margin-bottom: 2px;
+
+			min-width: 100%;
+
+			&:hover{
+				cursor:pointer;
+				background-color:rgba(0,0,0,.1);
+			}
+
+
+			&.tabulator-group-visible{
+				.tabulator-arrow{
+					margin-right:10px;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-top: 6px solid $sortArrowActive;
+					border-bottom: 0;
+				}
+			}
+
+			&.tabulator-group-level-1{
+				.tabulator-arrow{
+					margin-left:20px;
+				}
+			}
+
+			&.tabulator-group-level-2{
+				.tabulator-arrow{
+					margin-left:40px;
+				}
+			}
+
+			&.tabulator-group-level-3{
+				.tabulator-arrow{
+					margin-left:60px;
+				}
+			}
+
+			&.tabulator-group-level-4{
+				.tabulator-arrow{
+					margin-left:80px;
+				}
+			}
+
+			&.tabulator-group-level-5{
+				.tabulator-arrow{
+					margin-left:1000px;
+				}
+			}
+
+			//sorting arrow
+			.tabulator-arrow{
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin-right:16px;
+				border-top: 6px solid transparent;
+				border-bottom: 6px solid transparent;
+				border-right: 0;
+				border-left: 6px solid $sortArrowActive;
+				vertical-align:middle;
+			}
+
+			span{
+				margin-left:10px;
+				color:$primary;
+			}
+		}
+	}
+	//column resize handles
+	.tabulator-col-resize-handle{
+		position:absolute;
+		right:0;
+		top:0;
+		bottom:0;
+		width:5px;
+
+		&.prev{
+			left:0;
+			right:auto;
+		}
+
+		&:hover{
+			cursor:ew-resize;
+		}
+	}
+
+
+	//footer element
+	.tabulator-footer{
+		padding:5px 10px;
+		border-top:1px solid $footerSeperatorColor;
+		background-color: $footerBackgroundColor;
+		text-align:right;
+		color: $footerTextColor;
+		font-weight:bold;
+		white-space:nowrap;
+		user-select:none;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:calc("100% + 20px");
+			margin:-5px -10px 5px -10px;
+
+			text-align: left;
+
+			background:lighten($footerBackgroundColor, 5%) !important;
+
+			border-top:3px solid $headerSeperatorColor !important;
+			border-bottom:2px solid $headerSeperatorColor !important;
+
+			.tabulator-row{
+				background:lighten($footerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+
+				.tabulator-cell{
+					background:none;
+				}
+			}
+
+			border-bottom:1px solid $rowBorderColor;
+			border-top:1px solid $rowBorderColor;
+
+			overflow: hidden;
+
+			&:only-child{
+				margin-bottom:-5px;
+				border-bottom:none;
+				border-bottom:none !important;
+			}
+		}
+
+		//pagination container element
+		.tabulator-pages{
+			margin:0 7px;
+		}
+
+		//pagination button
+		.tabulator-page{
+			display:inline-block;
+			margin:0 2px;
+			border:1px solid $footerBorderColor;
+			border-radius:3px;
+			padding:2px 5px;
+			background:rgba(255,255,255,.2);
+			color: $footerTextColor;
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+
+			&.active{
+				color:$primary;
+			}
+
+			&:disabled{
+				opacity:.5;
+			}
+
+			&:not(.disabled){
+				&:hover{
+					cursor:pointer;
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+	}
+
+	//holding div that contains loader and covers tabulator element to prevent interaction
+	.tablulator-loader{
+		position:absolute;
+		display: flex;
+		align-items:center;
+
+		top:0;
+		left:0;
+		z-index:100;
+
+		height:100%;
+		width:100%;
+		background:rgba(0,0,0,.4);
+		text-align:center;
+
+		//loading message element
+		.tabulator-loader-msg{
+			display:inline-block;
+
+			margin:0 auto;
+			padding:10px 20px;
+
+			border-radius:10px;
+
+			background:#fff;
+			font-weight:bold;
+			font-size:16px;
+
+			//loading message
+			&.tabulator-loading{
+				border:4px solid #333;
+				color:#000;
+			}
+
+			//error message
+			&.tabulator-error{
+				border:4px solid #D00;
+				color:#590000;
+			}
+		}
+	}
+}

js/tabulator/src/scss/tabulator_simple.scss

@@ -0,0 +1,680 @@
+
+//Main Theme Variables
+$backgroundColor: #fff; //background color of tabulator
+$borderColor:#999; //border to tablulator
+$textSize:14px; //table text size
+
+//header themeing
+$headerBackgroundColor:#fff; //border to tablulator
+$headerTextColor:#555; //header text colour
+$headerBorderColor:#ddd;  //header border color
+$headerSeperatorColor:#999; //header bottom seperator color
+$headerMargin:4px; //padding round header
+
+//column header arrows
+$sortArrowActive: #666;
+$sortArrowInactive: #bbb;
+
+//row themeing
+$rowBackgroundColor:#fff; //table row background color
+$rowAltBackgroundColor:#fff; //table row background color
+$rowBorderColor:#ddd; //table border color
+$rowTextColor:#333; //table text color
+$rowHoverBackground:#bbb; //row background color on hover
+
+$rowSelectedBackground: #9ABCEA; //row background color when selected
+$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
+
+
+$editBoxColor:#1D68CD; //border color for edit boxes
+$errorColor:#dd0000; //error indication
+
+//footer themeing
+$footerBackgroundColor:#fff; //border to tablulator
+$footerTextColor:#555; //footer text colour
+$footerBorderColor:#aaa; //footer border color
+$footerSeperatorColor:#999; //footer bottom seperator color
+
+
+
+//Tabulator Containing Element
+.tabulator{
+	position: relative;
+	background-color: $backgroundColor;
+	overflow:hidden;
+	font-size:$textSize;
+	text-align: left;
+
+	-webkit-transform: translatez(0);
+	-moz-transform: translatez(0);
+	-ms-transform: translatez(0);
+	-o-transform: translatez(0);
+	transform: translatez(0);
+
+	&[tabulator-layout="fitDataFill"]{
+		.tabulator-tableHolder{
+			.tabulator-table{
+				min-width:100%;
+			}
+		}
+	}
+
+	&.tabulator-block-select{
+		user-select: none;
+	}
+
+	//column header containing element
+	.tabulator-header{
+		position:relative;
+		box-sizing: border-box;
+
+		width:100%;
+
+		border-bottom:1px solid $headerSeperatorColor;
+		background-color: $headerBackgroundColor;
+		color: $headerTextColor;
+		font-weight:bold;
+
+		white-space: nowrap;
+		overflow:hidden;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		//individual column header element
+		.tabulator-col{
+			display:inline-block;
+			position:relative;
+			box-sizing:border-box;
+			border-right:1px solid $headerBorderColor;
+			background-color: $headerBackgroundColor;
+			text-align:left;
+			vertical-align: bottom;
+			overflow: hidden;
+
+			&.tabulator-moving{
+				position: absolute;
+				border:1px solid  $headerSeperatorColor;
+				background:darken($headerBackgroundColor, 10%);
+				pointer-events: none;
+			}
+
+			//hold content of column header
+			.tabulator-col-content{
+				position: relative;
+				padding:4px;
+
+				//hold title of column header
+				.tabulator-col-title{
+					box-sizing:border-box;
+					width: 100%;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align:bottom;
+
+					//element to hold title editor
+					.tabulator-title-editor{
+						box-sizing: border-box;
+						width: 100%;
+
+						border:1px solid #999;
+
+						padding:1px;
+
+						background: #fff;
+					}
+				}
+
+				//column sorter arrow
+				.tabulator-arrow{
+					display: inline-block;
+					position: absolute;
+					top:9px;
+					right:8px;
+					width: 0;
+					height: 0;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-bottom: 6px solid $sortArrowInactive;
+				}
+
+			}
+
+			//complex header column group
+			&.tabulator-col-group{
+
+				//gelement to hold sub columns in column group
+				.tabulator-col-group-cols{
+					position:relative;
+					display: flex;
+
+					border-top:1px solid $headerBorderColor;
+					overflow: hidden;
+
+					.tabulator-col:last-child{
+						margin-right:-1px;
+					}
+				}
+			}
+
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//placeholder element for sortable columns
+			&.ui-sortable-helper{
+				position: absolute;
+				background-color:darken($headerBackgroundColor, 10%) !important;
+				border:1px solid $headerBorderColor;
+			}
+
+			//header filter containing element
+			.tabulator-header-filter{
+				position: relative;
+				box-sizing: border-box;
+				margin-top:2px;
+				width:100%;
+				text-align: center;
+
+				//styling adjustment for inbuilt editors
+				textarea{
+					height:auto !important;
+				}
+
+				svg{
+					margin-top: 3px;
+				}
+			}
+
+
+			//styling child elements for sortable columns
+			&.tabulator-sortable{
+				.tabulator-col-title{
+					padding-right:25px;
+				}
+
+				&:hover{
+					cursor:pointer;
+					background-color:darken($headerBackgroundColor, 10%);
+				}
+
+
+				&[aria-sort="none"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowInactive;
+					}
+				}
+
+				&[aria-sort="asc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowActive;
+					}
+				}
+
+				&[aria-sort="desc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: 6px solid $sortArrowActive;
+						border-bottom: none;
+					}
+				}
+			}
+
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			// background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			min-width:200%;
+
+			background:darken($headerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:darken($headerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $headerSeperatorColor;
+
+			overflow: hidden;
+		}
+	}
+
+
+
+	//scrolling element to hold table
+	.tabulator-tableHolder{
+		position:relative;
+		width:100%;
+		white-space: nowrap;
+		overflow:auto;
+		-webkit-overflow-scrolling: touch;
+
+		&:focus{
+			outline: none;
+		}
+
+		//default placeholder element
+		.tabulator-placeholder{
+			position: absolute;
+			box-sizing:border-box;
+			display: flex;
+			align-items:center;
+
+			top:0;
+			left:0;
+			height:100%;
+			width:100%;
+
+			span{
+				display: inline-block;
+
+				margin:0 auto;
+				padding:10px;
+
+				color:#000;
+				font-weight: bold;
+				font-size: 20px;
+			}
+		}
+
+		//element to hold table rows
+		.tabulator-table{
+			position:relative;
+			display:inline-block;
+			background-color:$rowBackgroundColor;
+			white-space: nowrap;
+			overflow:visible;
+			color:$rowTextColor;
+
+			.tabulator-row{
+				&.tabulator-calcs{
+					font-weight: bold;
+					background:darken($rowAltBackgroundColor, 5%) !important;
+
+					&.tabulator-calcs-top{
+						border-bottom:2px solid $rowBorderColor;
+					}
+
+					&.tabulator-calcs-bottom{
+						border-top:2px solid $rowBorderColor;
+					}
+				}
+			}
+
+		}
+	}
+
+
+	//row element
+	.tabulator-row{
+		position: relative;
+		box-sizing: border-box;
+
+		min-height:$textSize + ($headerMargin * 2);
+		background-color: $rowBackgroundColor;
+		border-bottom:1px solid $rowBorderColor;
+
+		&:nth-child(even){
+			background-color: $rowAltBackgroundColor;
+		}
+
+		&.tabulator-selectable:hover{
+			background-color:$rowHoverBackground;
+			cursor: pointer;
+		}
+
+		&.tabulator-selected{
+			background-color:$rowSelectedBackground;
+		}
+
+		&.tabulator-selected:hover{
+			background-color:$rowSelectedBackgroundHover;
+			cursor: pointer;
+		}
+
+		&.tabulator-moving{
+			position: absolute;
+
+			border-top:1px solid  $rowBorderColor;
+			border-bottom:1px solid  $rowBorderColor;
+
+			pointer-events: none !important;
+			z-index:15;
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		//cell element
+		.tabulator-cell{
+			display:inline-block;
+			position: relative;
+			box-sizing:border-box;
+			padding:4px;
+			border-right:1px solid $rowBorderColor;
+			vertical-align:middle;
+			white-space:nowrap;
+			overflow:hidden;
+			text-overflow:ellipsis;
+
+			&:last-of-type{
+				border-right: none;
+			}
+
+			&.tabulator-editing{
+				border:1px solid  $editBoxColor;
+				padding: 0;
+
+				input, select{
+					border:1px;
+					background:transparent;
+				}
+			}
+
+			&.tabulator-validation-fail{
+				border:1px solid $errorColor;
+				input, select{
+					border:1px;
+					background:transparent;
+
+					color: $errorColor;
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//movable row handle
+			&.tabulator-row-handle{
+
+				display: inline-flex;
+				align-items:center;
+
+				-moz-user-select: none;
+				-khtml-user-select: none;
+				-webkit-user-select: none;
+				-o-user-select: none;
+
+				//handle holder
+				.tabulator-row-handle-box{
+					width:80%;
+
+					//Hamburger element
+					.tabulator-row-handle-bar{
+						width:100%;
+						height:3px;
+						margin:2px 10% 0 10%;
+						background:#666;
+					}
+				}
+			}
+		}
+
+		//row grouping element
+		&.tabulator-group{
+
+			box-sizing:border-box;
+			border-bottom:1px solid #999;
+			border-right:1px solid $rowBorderColor;
+			border-top:1px solid #999;
+			padding:5px;
+			padding-left:10px;
+			background:#fafafa;
+			font-weight:bold;
+
+			min-width: 100%;
+
+			&:hover{
+				cursor:pointer;
+				background-color:rgba(0,0,0,.1);
+			}
+
+			&.tabulator-group-visible{
+				.tabulator-arrow{
+					margin-right:10px;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-top: 6px solid $sortArrowActive;
+					border-bottom: 0;
+				}
+			}
+
+			&.tabulator-group-level-1{
+				.tabulator-arrow{
+					margin-left:20px;
+				}
+			}
+
+			&.tabulator-group-level-2{
+				.tabulator-arrow{
+					margin-left:40px;
+				}
+			}
+
+			&.tabulator-group-level-3{
+				.tabulator-arrow{
+					margin-left:60px;
+				}
+			}
+
+			&.tabulator-group-level-4{
+				.tabulator-arrow{
+					margin-left:80px;
+				}
+			}
+
+			&.tabulator-group-level-5{
+				.tabulator-arrow{
+					margin-left:1000px;
+				}
+			}
+
+			//sorting arrow
+			.tabulator-arrow{
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin-right:16px;
+				border-top: 6px solid transparent;
+				border-bottom: 6px solid transparent;
+				border-right: 0;
+				border-left: 6px solid $sortArrowActive;
+				vertical-align:middle;
+			}
+
+			span{
+				margin-left:10px;
+				color:#666;
+			}
+		}
+	}
+
+	//column resize handles
+	.tabulator-col-resize-handle{
+		position:absolute;
+		right:0;
+		top:0;
+		bottom:0;
+		width:5px;
+
+		&.prev{
+			left:0;
+			right:auto;
+		}
+
+		&:hover{
+			cursor:ew-resize;
+		}
+	}
+
+
+	//footer element
+	.tabulator-footer{
+		padding:5px 10px;
+		border-top:1px solid $footerSeperatorColor;
+		background-color: $footerBackgroundColor;
+		text-align:right;
+		color: $footerTextColor;
+		font-weight:bold;
+		white-space:nowrap;
+		user-select:none;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:calc("100% + 20px");
+			margin:-5px -10px 5px -10px;
+
+			text-align: left;
+
+			background:darken($footerBackgroundColor, 5%) !important;
+
+			.tabulator-row{
+				background:darken($footerBackgroundColor, 5%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-bottom:1px solid $footerBackgroundColor;
+			border-top:1px solid $rowBorderColor;
+
+			overflow: hidden;
+
+			&:only-child{
+				margin-bottom:-5px;
+				border-bottom:none;
+			}
+		}
+
+		//pagination container element
+		.tabulator-pages{
+			margin:0 7px;
+		}
+
+		//pagination button
+		.tabulator-page{
+			display:inline-block;
+			margin:0 2px;
+			border:1px solid $footerBorderColor;
+			border-radius:3px;
+			padding:2px 5px;
+			background:rgba(255,255,255,.2);
+			color: $footerTextColor;
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+
+			&.active{
+				color:#d00;
+			}
+
+			&:disabled{
+				opacity:.5;
+			}
+
+			&:not(.disabled){
+				&:hover{
+					cursor:pointer;
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+	}
+
+	//holding div that contains loader and covers tabulator element to prevent interaction
+	.tablulator-loader{
+		position:absolute;
+		display: flex;
+		align-items:center;
+
+		top:0;
+		left:0;
+		z-index:100;
+
+		height:100%;
+		width:100%;
+		background:rgba(0,0,0,.4);
+		text-align:center;
+
+		//loading message element
+		.tabulator-loader-msg{
+			display:inline-block;
+
+			margin:0 auto;
+			padding:10px 20px;
+
+			border-radius:10px;
+
+			background:#fff;
+			font-weight:bold;
+			font-size:16px;
+
+			//loading message
+			&.tabulator-loading{
+				border:4px solid #333;
+				color:#000;
+			}
+
+			//error message
+			&.tabulator-error{
+				border:4px solid #D00;
+				color:#590000;
+			}
+		}
+	}
+}

js/tabulator/src/scss/tabulator_site.scss

@@ -0,0 +1,689 @@
+
+//Main Theme Variables
+$backgroundColor: #fff; //background color of tabulator
+$borderColor:#222; //border to tablulator
+$textSize:14px; //table text size
+
+//header themeing
+$headerBackgroundColor:#222; //border to tablulator
+$headerTextColor:#fff; //header text colour
+$headerBorderColor:#aaa;  //header border color
+$headerSeperatorColor:#3FB449; //header bottom seperator color
+$headerMargin:4px; //padding round header
+
+//column header arrows
+$sortArrowActive: #3FB449;
+$sortArrowInactive: #bbb;
+
+//row themeing
+$rowBackgroundColor:#fff; //table row background color
+$rowAltBackgroundColor:#EFEFEF; //table row background color
+$rowBorderColor:#aaa; //table border color
+$rowTextColor:#333; //table text color
+$rowHoverBackground:#bbb; //row background color on hover
+
+$rowSelectedBackground: #9ABCEA; //row background color when selected
+$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
+
+$editBoxColor:#1D68CD; //border color for edit boxes
+$errorColor:#dd0000; //error indication
+
+//footer themeing
+$footerBackgroundColor:#222; //border to tablulator
+$footerTextColor:#222; //footer text colour
+$footerBorderColor:#aaa; //footer border color
+$footerSeperatorColor:#3FB449; //footer bottom seperator color
+
+
+
+//Tabulator Containing Element
+.tabulator{
+	position: relative;
+
+	border-bottom: 5px solid $borderColor;
+
+	background-color: $backgroundColor;
+
+	font-size:$textSize;
+	text-align: left;
+	overflow:hidden;
+
+	-webkit-transform: translatez(0);
+	-moz-transform: translatez(0);
+	-ms-transform: translatez(0);
+	-o-transform: translatez(0);
+	transform: translatez(0);
+
+	&[tabulator-layout="fitDataFill"]{
+		.tabulator-tableHolder{
+			.tabulator-table{
+				min-width:100%;
+			}
+		}
+	}
+
+	&[tabulator-layout="fitColumns"]{
+		.tabulator-row{
+			.tabulator-cell{
+				&:last-of-type{
+					border-right: none;
+				}
+			}
+		}
+	}
+
+
+	&.tabulator-block-select{
+		user-select: none;
+	}
+
+	//column header containing element
+	.tabulator-header{
+		position:relative;
+		box-sizing: border-box;
+
+		width:100%;
+
+		border-bottom:3px solid $headerSeperatorColor;
+		background-color: $headerBackgroundColor;
+		color: $headerTextColor;
+		font-weight:bold;
+
+		white-space: nowrap;
+		overflow:hidden;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		//individual column header element
+		.tabulator-col{
+			display:inline-block;
+
+			position:relative;
+			box-sizing:border-box;
+			border-right:1px solid $headerBorderColor;
+			background-color: $headerBackgroundColor;
+			text-align:left;
+			vertical-align: bottom;
+			overflow: hidden;
+
+			&.tabulator-moving{
+				position: absolute;
+				border:1px solid  $headerSeperatorColor;
+				background:darken($headerBackgroundColor, 10%);
+				pointer-events: none;
+			}
+
+			//hold content of column header
+			.tabulator-col-content{
+				position: relative;
+				padding:8px;
+
+				//hold title of column header
+				.tabulator-col-title{
+					box-sizing:border-box;
+					width: 100%;
+
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align:bottom;
+
+					//element to hold title editor
+					.tabulator-title-editor{
+						box-sizing: border-box;
+						width: 100%;
+
+						border:1px solid #999;
+
+						padding:1px;
+
+						background: #fff;
+					}
+				}
+
+				//column sorter arrow
+				.tabulator-arrow{
+					display: inline-block;
+					position: absolute;
+					top:14px;
+					right:8px;
+					width: 0;
+					height: 0;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-bottom: 6px solid $sortArrowInactive;
+				}
+
+			}
+
+			//complex header column group
+			&.tabulator-col-group{
+
+				//gelement to hold sub columns in column group
+				.tabulator-col-group-cols{
+					position:relative;
+					display: flex;
+
+					border-top:1px solid $headerBorderColor;
+					overflow: hidden;
+
+					.tabulator-col:last-child{
+						margin-right:-1px;
+					}
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//placeholder element for sortable columns
+			&.ui-sortable-helper{
+				position: absolute;
+				background-color: $headerBackgroundColor !important;
+				border:1px solid $headerBorderColor;
+			}
+
+			//header filter containing element
+			.tabulator-header-filter{
+				position: relative;
+				box-sizing: border-box;
+				margin-top:2px;
+				width:100%;
+				text-align: center;
+
+				//styling adjustment for inbuilt editors
+				textarea{
+					height:auto !important;
+				}
+
+				svg{
+					margin-top: 3px;
+				}
+			}
+
+			//styling child elements for sortable columns
+			&.tabulator-sortable{
+				.tabulator-col-title{
+					padding-right:25px;
+				}
+
+				&:hover{
+					cursor:pointer;
+					background-color:darken($headerBackgroundColor, 10%);
+				}
+
+				&[aria-sort="none"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowInactive;
+					}
+				}
+
+				&[aria-sort="asc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: none;
+						border-bottom: 6px solid $sortArrowActive;
+					}
+				}
+
+				&[aria-sort="desc"]{
+					.tabulator-col-content .tabulator-arrow{
+						border-top: 6px solid $sortArrowActive;
+						border-bottom: none;
+					}
+				}
+			}
+
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			// background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			min-width:200%;
+
+			background:lighten($headerBackgroundColor, 10%) !important;
+
+			.tabulator-row{
+				background:lighten($headerBackgroundColor, 10%) !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			border-top:1px solid $rowBorderColor;
+			// border-bottom:1px solid $headerBorderColor;
+
+			overflow: hidden;
+		}
+	}
+
+	//scrolling element to hold table
+	.tabulator-tableHolder{
+		position:relative;
+		width:100%;
+		white-space: nowrap;
+		overflow:auto;
+		-webkit-overflow-scrolling: touch;
+
+		&:focus{
+			outline: none;
+		}
+
+		//default placeholder element
+		.tabulator-placeholder{
+			position: absolute;
+			box-sizing:border-box;
+			display: flex;
+			align-items:center;
+
+			top:0;
+			left:0;
+			height:100%;
+			width:100%;
+
+			span{
+				display: inline-block;
+
+				margin:0 auto;
+				padding:10px;
+
+				color:$headerSeperatorColor;
+				font-weight: bold;
+				font-size: 20px;
+			}
+		}
+
+		//element to hold table rows
+		.tabulator-table{
+			position:relative;
+			display:inline-block;
+			background-color:$rowBackgroundColor;
+			white-space: nowrap;
+			overflow:visible;
+			color:$rowTextColor;
+
+			.tabulator-row{
+				&.tabulator-calcs{
+					font-weight: bold;
+					background:lighten($headerBackgroundColor, 15%) !important;
+					color:$headerTextColor;
+				}
+			}
+		}
+	}
+
+	//row element
+	.tabulator-row{
+		position: relative;
+		box-sizing: border-box;
+		min-height:$textSize + ($headerMargin * 2);
+		background-color: $rowBackgroundColor;
+
+
+		&.tabulator-row-even{
+			background-color: $rowAltBackgroundColor;
+		}
+
+		&.tabulator-selectable:hover{
+			background-color:$rowHoverBackground;
+			cursor: pointer;
+		}
+
+		&.tabulator-selected{
+			background-color:$rowSelectedBackground;
+		}
+
+		&.tabulator-selected:hover{
+			background-color:$rowSelectedBackgroundHover;
+			cursor: pointer;
+		}
+
+		&.tabulator-row-moving{
+			border:1px solid #000;
+			background:#fff;
+		}
+
+		&.tabulator-moving{
+			position: absolute;
+
+			border-top:1px solid  $rowBorderColor;
+			border-bottom:1px solid  $rowBorderColor;
+
+			pointer-events: none !important;
+			z-index:15;
+		}
+
+		.tabulator-frozen{
+			display: inline-block;
+			position: absolute;
+
+			background-color: inherit;
+
+			z-index: 10;
+
+			&.tabulator-frozen-left{
+				border-right:2px solid $rowBorderColor;
+			}
+
+			&.tabulator-frozen-right{
+				border-left:2px solid $rowBorderColor;
+			}
+		}
+
+		//cell element
+		.tabulator-cell{
+			display:inline-block;
+			position: relative;
+			box-sizing:border-box;
+			padding:6px;
+			border-right:1px solid $rowBorderColor;
+			vertical-align:middle;
+			white-space:nowrap;
+			overflow:hidden;
+			text-overflow:ellipsis;
+
+
+			&.tabulator-editing{
+				border:1px solid  $editBoxColor;
+				padding: 0;
+
+				input, select{
+					border:1px;
+					background:transparent;
+				}
+			}
+
+			&.tabulator-validation-fail{
+				border:1px solid $errorColor;
+				input, select{
+					border:1px;
+					background:transparent;
+
+					color: $errorColor;
+				}
+			}
+
+			//hide left resize handle on first column
+			&:first-child{
+				.tabulator-col-resize-handle.prev{
+					display: none;
+				}
+			}
+
+			//movable row handle
+			&.tabulator-row-handle{
+
+				display: inline-flex;
+				align-items:center;
+
+				-moz-user-select: none;
+				-khtml-user-select: none;
+				-webkit-user-select: none;
+				-o-user-select: none;
+
+				//handle holder
+				.tabulator-row-handle-box{
+					width:80%;
+
+					//Hamburger element
+					.tabulator-row-handle-bar{
+						width:100%;
+						height:3px;
+						margin:2px 10% 0 10%;
+						background:#666;
+					}
+				}
+			}
+		}
+
+		//row grouping element
+		&.tabulator-group{
+			box-sizing:border-box;
+			border-right:1px solid $rowBorderColor;
+			border-top:1px solid #000;
+			border-bottom:2px solid $headerSeperatorColor;
+			padding:5px;
+			padding-left:10px;
+			background:$headerBackgroundColor;
+			color:$headerTextColor;
+			font-weight:bold;
+
+			min-width: 100%;
+
+			&:hover{
+				cursor:pointer;
+				background-color:darken($headerBackgroundColor, 10%);
+			}
+
+			&.tabulator-group-visible{
+				.tabulator-arrow{
+					margin-right:10px;
+					border-left: 6px solid transparent;
+					border-right: 6px solid transparent;
+					border-top: 6px solid $sortArrowActive;
+					border-bottom: 0;
+				}
+			}
+
+			&.tabulator-group-level-1{
+				.tabulator-arrow{
+					margin-left:20px;
+				}
+			}
+
+			&.tabulator-group-level-2{
+				.tabulator-arrow{
+					margin-left:40px;
+				}
+			}
+
+			&.tabulator-group-level-3{
+				.tabulator-arrow{
+					margin-left:60px;
+				}
+			}
+
+			&.tabulator-group-level-4{
+				.tabulator-arrow{
+					margin-left:80px;
+				}
+			}
+
+			&.tabulator-group-level-5{
+				.tabulator-arrow{
+					margin-left:1000px;
+				}
+			}
+
+			//sorting arrow
+			.tabulator-arrow{
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin-right:16px;
+				border-top: 6px solid transparent;
+				border-bottom: 6px solid transparent;
+				border-right: 0;
+				border-left: 6px solid $sortArrowActive;
+				vertical-align:middle;
+			}
+
+			span{
+				margin-left:10px;
+				color:$headerSeperatorColor;
+			}
+		}
+
+	}
+
+	//footer element
+	.tabulator-footer{
+		padding:5px 10px;
+		padding-top:8px;
+		border-top:3px solid $footerSeperatorColor;
+		background-color: $footerBackgroundColor;
+		text-align:right;
+		color: $footerTextColor;
+		font-weight:bold;
+		white-space:nowrap;
+		user-select:none;
+
+		-moz-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-o-user-select: none;
+
+		.tabulator-calcs-holder{
+			box-sizing:border-box;
+			width:calc("100% + 20px");
+			margin:-8px -10px 8px -10px;
+
+			text-align: left;
+
+			background:lighten($footerBackgroundColor, 10%) !important;
+
+			.tabulator-row{
+				background:lighten($footerBackgroundColor, 10%) !important;
+				color:$headerTextColor !important;
+
+				.tabulator-col-resize-handle{
+					display: none;
+				}
+			}
+
+			// border-top:1px solid $rowBorderColor;
+			border-bottom:1px solid $rowBorderColor;
+
+			overflow: hidden;
+
+			&:only-child{
+				margin-bottom:-5px;
+				border-bottom:none;
+			}
+		}
+
+		//pagination container element
+		.tabulator-pages{
+			margin:0 7px;
+		}
+
+		//pagination button
+		.tabulator-page{
+			display:inline-block;
+
+			margin:0 2px;
+			padding:2px 5px;
+
+			border:1px solid $footerBorderColor;
+			border-radius:3px;
+
+			background:#fff;
+
+			color: $footerTextColor;
+			font-family:inherit;
+			font-weight:inherit;
+			font-size:inherit;
+
+			&.active{
+				color:$footerSeperatorColor;
+			}
+
+			&:disabled{
+				opacity:.5;
+			}
+
+			&:not(.disabled){
+				&:hover{
+					cursor:pointer;
+					background:rgba(0,0,0,.2);
+					color:#fff;
+				}
+			}
+		}
+	}
+
+	//column resize handles
+	.tabulator-col-resize-handle{
+		position:absolute;
+		right:0;
+		top:0;
+		bottom:0;
+		width:5px;
+
+		&.prev{
+			left:0;
+			right:auto;
+		}
+
+		&:hover{
+			cursor:ew-resize;
+		}
+	}
+
+
+	//holding div that contains loader and covers tabulator element to prevent interaction
+	.tablulator-loader{
+		position:absolute;
+		display: flex;
+		align-items:center;
+
+		top:0;
+		left:0;
+		z-index:100;
+
+		height:100%;
+		width:100%;
+		background:rgba(0,0,0,.4);
+		text-align:center;
+
+		//loading message element
+		.tabulator-loader-msg{
+			display:inline-block;
+
+			margin:0 auto;
+			padding:10px 20px;
+
+			border-radius:10px;
+
+			background:#fff;
+			font-weight:bold;
+			font-size:16px;
+
+			//loading message
+			&.tabulator-loading{
+				border:4px solid #333;
+				color:#000;
+			}
+
+			//error message
+			&.tabulator-error{
+				border:4px solid #D00;
+				color:#590000;
+			}
+		}
+	}
+}