Skip to content

C
cbdiscord
Commit d0d93a48 authored by Geovanny's avatar Geovanny
Browse files
Options

Abstracted out table view and some fixes

parent 53b1d3f5
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 141 deletions
web/myunits/index.html
View file @ d0d93a48
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<button id="my_units" class="tablinks active">My Units</button> <button id="my_units" class="tablinks active">My Units</button>
<button id="add_units" class="tablinks">Units to Add</button> <button id="add_units" class="tablinks">Units to Add</button>
</div> </div>
<table id="units_table" class="display" style="max-width: 500px;"></table> <table id="units_table" class="display my_units"></table>
</table-wrapper> </table-wrapper>
<unit-detail> <unit-detail>
<image class="unit_img"></image> <image class="unit_img"></image>
......
web/myunits/view.js
View file @ d0d93a48
import UnitTableView from "../units/view.js"; import TableView from "../views/table_view.js";
import UnitDetailView from "./detail_view.js" import UnitDetailView from "./detail_view.js"
const unit_columns =[ const unit_columns =[
...@@ -33,7 +33,7 @@ class MyUnitView extends EventTarget{ ...@@ -33,7 +33,7 @@ class MyUnitView extends EventTarget{
this.my_units_add = document.querySelector("#my_units"); this.my_units_add = document.querySelector("#my_units");
this.add_units = document.querySelector("#add_units"); this.add_units = document.querySelector("#add_units");
this.unit_table_view = new UnitTableView(unit_columns); this.unit_table_view = new TableView(unit_columns, true);
this.unit_detail_view = new UnitDetailView(); this.unit_detail_view = new UnitDetailView();
this.my_units_tab = true; this.my_units_tab = true;
this.my_units_add.addEventListener("click", (event) =>{ this.my_units_add.addEventListener("click", (event) =>{
......
web/sass/main.scss
View file @ d0d93a48
@import "../fontawesome/font_awesome.scss"; @import "../fontawesome/font_awesome.scss";
@import "./navbar.scss"; @import "./navbar.scss";
@import "./table.scss";
@import "./login.scss"; @import "./login.scss";
@import "./unit.scss"; @import "./unit.scss";
......
web/sass/table.scss 0 → 100644
View file @ d0d93a48
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
table.dataTable.display tbody tr.odd{
background-color: rgb(10, 10, 10);
.sorting_1{
background-color: rgb(10, 10, 10);
}
}
table.dataTable.display tbody tr.even{
background-color: rgb(37, 37, 37);
.sorting_1{
background-color: rgb(37, 37, 37);
}
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: whitesmoke;
}
.dataTables_wrapper{
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
table_component{
margin-top: 50px;
grid-area: content;
grid-template:
"table details"
/1fr 200px
;
}
\ No newline at end of file
web/sass/unit.scss
View file @ d0d93a48
...@@ -2,34 +2,7 @@ ...@@ -2,34 +2,7 @@
#units_table{ #units_table{
color: whitesmoke; color: whitesmoke;
text-align: center; text-align: center;
margin-top: 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
table.dataTable.display tbody tr.odd{
background-color: rgb(10, 10, 10);
.sorting_1{
background-color: rgb(10, 10, 10);
}
}
table.dataTable.display tbody tr.even{
background-color: rgb(37, 37, 37);
.sorting_1{
background-color: rgb(37, 37, 37);
}
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: whitesmoke;
}
.dataTables_wrapper{
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
} }
.tab2{ .tab2{
...@@ -37,33 +10,44 @@ table.dataTable.display tbody tr.even{ ...@@ -37,33 +10,44 @@ table.dataTable.display tbody tr.even{
border: 1px black solid; border: 1px black solid;
} }
table_component{ .my_units{
margin-top: 50px; background-color: rgb(141, 11, 11);
grid-area: content; max-width: 600px;
}
.overflow_table{
overflow: auto;
max-width: 100%;
width: 100%;
}
table-component{
grid-template: grid-template:
"table details" "table details" 600px
/1fr 200px /1fr 600px
; ;
display: grid;
position: relative;
} }
table_wrapper{ table-wrapper{
grid-area: table; grid-area: table;
width: 100%;
display: inline-block; display: inline-block;
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
} }
unit-detail{ unit-detail{
grid-area: details; grid-area: details;
text-align: center; text-align: center;
position: relative; position: absolute;
display: inline-block; display: inline-block;
background-color: rgb(27, 27, 27); background-color: rgb(27, 27, 27);
height: 600px; height: 600px;
width: 500px; width: 100%;
left: 50%;
margin-top: 50px; margin-top: 50px;
margin-left: -250px;
outline: 1px black solid; outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding-top: 20px; padding-top: 20px;
...@@ -114,4 +98,4 @@ unit-detail{ ...@@ -114,4 +98,4 @@ unit-detail{
.delete_button{ .delete_button{
background-color: red !important; background-color: red !important;
border: 2px solid rgb(83, 3, 3); border: 2px solid rgb(83, 3, 3);
} }
\ No newline at end of file
web/stylesheets/main.css
View file @ d0d93a48
...@@ -124,6 +124,40 @@ bar-user .dropdown:hover { ...@@ -124,6 +124,40 @@ bar-user .dropdown:hover {
background-color: #5f1a1a; background-color: #5f1a1a;
} }
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
table.dataTable.display tbody tr.odd {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.odd .sorting_1 {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.even {
background-color: #252525;
}
table.dataTable.display tbody tr.even .sorting_1 {
background-color: #252525;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: whitesmoke;
}
.dataTables_wrapper {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
}
center-div { center-div {
text-align: center; text-align: center;
left: 50%; left: 50%;
...@@ -216,64 +250,49 @@ center-div { ...@@ -216,64 +250,49 @@ center-div {
#units_table { #units_table {
color: whitesmoke; color: whitesmoke;
text-align: center; text-align: center;
margin-top: 10px;
} }
.dataTables_wrapper .dataTables_paginate .paginate_button { .tab2 {
color: whitesmoke !important; text-align: center;
} border: 1px black solid;
table.dataTable.display tbody tr.odd {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.odd .sorting_1 {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.even {
background-color: #252525;
}
table.dataTable.display tbody tr.even .sorting_1 {
background-color: #252525;
} }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { .my_units {
color: whitesmoke; background-color: #8d0b0b;
max-width: 600px;
} }
.dataTables_wrapper { .overflow_table {
padding: 10px; overflow: auto;
outline: 1px black solid; max-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); width: 100%;
}
.tab2 {
text-align: center;
border: 1px black solid;
} }
table_component { table-component {
margin-top: 50px; grid-template: "table details" 600px/1fr 600px;
grid-area: content; display: grid;
grid-template: "table details"/1fr 200px; position: relative;
} }
table_wrapper { table-wrapper {
grid-area: table; grid-area: table;
width: 100%;
display: inline-block; display: inline-block;
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
} }
unit-detail { unit-detail {
grid-area: details; grid-area: details;
text-align: center; text-align: center;
position: relative; position: absolute;
display: inline-block; display: inline-block;
background-color: #1b1b1b; background-color: #1b1b1b;
height: 600px; height: 600px;
width: 500px; width: 100%;
left: 50%;
margin-top: 50px; margin-top: 50px;
margin-left: -250px;
outline: 1px black solid; outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px; padding-top: 20px;
......
web/stylesheets/main.css.map
View file @ d0d93a48
{"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/login.scss","../sass/unit.scss","../sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAmBF;EACI;IAAK;;EACP;IAAO;;;AC1CX;EACI;EACA;EACA;EACA,eACI;EAGJ;EACA;;;AAGJ;EAGI;EACA;EACA;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;;AAKJ;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;ACvGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;EACA;EACA;;AACA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;ACnFJ;EACI;EACA;;;AAGJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EAEA,eACI;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AC9GJ;EACI;EACA;EACA;EACA;EACA,eACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI","file":"main.css"} {"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/table.scss","../sass/login.scss","../sass/unit.scss","../sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAmBF;EACI;IAAK;;EACP;IAAO;;;AC1CX;EACI;EACA;EACA;EACA,eACI;EAGJ;EACA;;;AAGJ;EAGI;EACA;EACA;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;;AAKJ;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;ACvGR;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EAEA,eACI;;;AClCR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;EACA;EACA;;AACA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;ACnFJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI,eACI;EAGJ;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AC7FJ;EACI;EACA;EACA;EACA;EACA,eACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI","file":"main.css"}
\ No newline at end of file \ No newline at end of file
web/stylesheets/table.css 0 → 100644
View file @ d0d93a48
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
table.dataTable.display tbody tr.odd {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.odd .sorting_1 {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.even {
background-color: #252525;
}
table.dataTable.display tbody tr.even .sorting_1 {
background-color: #252525;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: whitesmoke;
}
.dataTables_wrapper {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
}
/*# sourceMappingURL=table.css.map */
web/stylesheets/table.css.map 0 → 100644
View file @ d0d93a48
{"version":3,"sourceRoot":"","sources":["../sass/table.scss"],"names":[],"mappings":"AAAA;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EAEA,eACI","file":"table.css"}
\ No newline at end of file
web/stylesheets/unit.css
View file @ d0d93a48
#units_table { #units_table {
color: whitesmoke; color: whitesmoke;
text-align: center; text-align: center;
margin-top: 10px;
} }
.dataTables_wrapper .dataTables_paginate .paginate_button { .tab2 {
color: whitesmoke !important; text-align: center;
} border: 1px black solid;
table.dataTable.display tbody tr.odd {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.odd .sorting_1 {
background-color: #0a0a0a;
}
table.dataTable.display tbody tr.even {
background-color: #252525;
}
table.dataTable.display tbody tr.even .sorting_1 {
background-color: #252525;
} }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { .my_units {
color: whitesmoke; background-color: #8d0b0b;
max-width: 600px;
} }
.dataTables_wrapper { .overflow_table {
padding: 10px; overflow: auto;
outline: 1px black solid; max-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); width: 100%;
}
.tab2 {
text-align: center;
border: 1px black solid;
} }
table_component { table-component {
margin-top: 50px; grid-template: "table details" 600px/1fr 600px;
grid-area: content; display: grid;
grid-template: "table details"/1fr 200px; position: relative;
} }
table_wrapper { table-wrapper {
grid-area: table; grid-area: table;
width: 100%;
display: inline-block; display: inline-block;
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
} }
unit-detail { unit-detail {
grid-area: details; grid-area: details;
text-align: center; text-align: center;
position: relative; position: absolute;
display: inline-block; display: inline-block;
background-color: #1b1b1b; background-color: #1b1b1b;
height: 600px; height: 600px;
width: 500px; width: 100%;
left: 50%;
margin-top: 50px; margin-top: 50px;
margin-left: -250px;
outline: 1px black solid; outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px; padding-top: 20px;
......
web/stylesheets/unit.css.map
View file @ d0d93a48
{"version":3,"sourceRoot":"","sources":["../sass/unit.scss"],"names":[],"mappings":"AACA;EACI;EACA;;;AAGJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EAEA,eACI;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA","file":"unit.css"} {"version":3,"sourceRoot":"","sources":["../sass/unit.scss"],"names":[],"mappings":"AACA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI,eACI;EAGJ;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA","file":"unit.css"}
\ No newline at end of file \ No newline at end of file
web/units/index.html
View file @ d0d93a48
...@@ -16,8 +16,10 @@ ...@@ -16,8 +16,10 @@
<nav-placeholder></nav-placeholder> <nav-placeholder></nav-placeholder>
<script src="/navbar/navbar.js"></script> <script src="/navbar/navbar.js"></script>
<content-body> <content-body>
<table id="units-table" class="display" style="width: 100%;"> <table-wrapper>
</table> <table id="units_table" class="display"></table>
</table-wrapper>
</content-body> </content-body>
</body> </body>
</html> </html>
web/units/view.js
View file @ d0d93a48
import TableView from "../views/table_view.js";
const default_columns =[ const default_columns =[
{title: "ID", term: "id"}, {title: "ID", term: "id"},
{title: "Name", term: "name"}, {title: "Name", term: "name"},
...@@ -23,31 +25,14 @@ const default_columns =[ ...@@ -23,31 +25,14 @@ const default_columns =[
class UnitTableView extends EventTarget{ class UnitTableView extends EventTarget{
constructor(columns){ constructor(){
super(); super();
this.columns = columns ? columns : default_columns; this.table_view = new TableView(default_columns);
this.table = $("#units_table")
this.datatable = this.table.DataTable({
columns: this.columns
});
const datatable = this.datatable;
const view = this;
$("#units_table tbody").on("click", "tr", function(){
const index = datatable.row(this).index();
view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
})
} }
drawTable(data){ drawTable(data){
const data_set = data.map((ele) => { this.table_view.drawTable(data);
var d = [];
this.columns.forEach((col) =>{
d.push(ele[col.term]);
})
return d;
});
this.datatable.clear().rows.add(data_set).draw();
} }
} }
......
web/views/table_view.js 0 → 100644
View file @ d0d93a48
class TableView extends EventTarget{
constructor(columns, overflow){
super();
if(!columns){
throw Error('Columns are needed');
}
this.columns = columns;
this.table = $("#units_table")
this.datatable = this.table.DataTable({
columns: this.columns
});
if(overflow){
this.$overflow_div = $("<div></div>").addClass("overflow_table");
$("#units_table_filter").after(this.$overflow_div);
this.table.detach();
this.$overflow_div.append(this.table);
}
const datatable = this.datatable;
const view = this;
$("#units_table tbody").on("click", "tr", function(){
const index = datatable.row(this).index();
view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
})
}
drawTable(data){
const data_set = data.map((ele) => {
var d = [];
this.columns.forEach((col) =>{
d.push(ele[col.term]);
})
return d;
});
this.datatable.clear().rows.add(data_set).draw();
}
}
export default TableView;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment