MontoyaTech/ignite-html-bootstrap
MontoyaTech/ignite-html-bootstrap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Working on making data table more mobile friendly.

Browse Source
This commit is contained in:
MattMo 2023-04-20 10:22:33 -07:00
parent 3f26ed4a33
commit e4c1ea950b
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
data-table.js
View File

@ -94,10 +94,10 @@ class DataTable extends IgniteElement {
render() { render() {
return this.template.child( return this.template.child(
new div().show([this.showPageSize, this.showSearchBox, this.showRowCount], (pageSize, searchBox, rowCount) => pageSize || searchBox || rowCount).class("row mb-3").child( new div().show([this.showPageSize, this.showSearchBox, this.showRowCount], (pageSize, searchBox, rowCount) => pageSize || searchBox || rowCount).class("row mb-3").child(
new div().class("col-12 d-flex flex-row justify-content-between gap-3").child( new div().class("col-12 d-flex flex-row justify-content-between gap-3 flex-wrap").child(
new div().class("d-flex flex-row gap-3").child( new div().class("d-flex flex-row gap-3 flex-wrap flex-grow-1 flex-sm-grow-0").child(
//Page size selector //Page size selector
new div().show(this.showPageSize).class("input-group flex-nowrap w-auto").child( new div().show(this.showPageSize).class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child(
new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-list-ul"></i>`), new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-list-ul"></i>`),
new select().class("form-select border-0 w-auto").child( new select().class("form-select border-0 w-auto").child(
@ -106,7 +106,7 @@ class DataTable extends IgniteElement {
), ),
//Search box //Search box
new div().show(this.showSearchBox).class("input-group flex-nowrap").child( new div().show(this.showSearchBox).class("input-group flex-nowrap w-auto flex-grow-1").child(
new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-magnifying-glass"></i>`), new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-magnifying-glass"></i>`),
new input().class("form-control") new input().class("form-control")
@ -122,20 +122,22 @@ class DataTable extends IgniteElement {
), ),
//Rows count //Rows count
new div().show(this.showRowCount).class("bg-white p-2 rounded-2 d-flex align-items-center justify-content-center").innerHTML(this.results, results => results.length == 0 ? "No rows" : `${results.length} ${(results.length < 2 ? "row" : "rows")}`) new div().show(this.showRowCount).class("d-sm-flex d-none align-items-center justify-content-end text-nowrap flex-grow-1").child(
new span().class("bg-white p-2 rounded-2").innerHTML(this.results, results => results.length == 0 ? "No rows" : `${results.length} ${(results.length < 2 ? "row" : "rows")}`)
)
) )
), ),
new div().class("table-responsive overflow-hidden rounded-2 mb-3").child( new div().class("table-responsive rounded-2 mb-3").child(
new table().class("table table-striped align-middle mb-0").child( new table().class("table table-striped align-middle mb-0").child(
//Table columns //Table columns
new thead().class("table-dark").child( new thead().class("table-dark").child(
new tr().child( new tr().child(
new list(this.columns, column => { new list(this.columns, column => {
if (column instanceof DataColumn) { if (column instanceof DataColumn) {
return new th().attribute("scope", "col").child(column.name); return new th().class("text-nowrap").attribute("scope", "col").child(column.name);
} else { } else {
return new th().attribute("scope", "col").child(column); return new th().class("text-nowrap").attribute("scope", "col").child(column);
} }
}) })
) )
@ -149,12 +151,12 @@ class DataTable extends IgniteElement {
), ),
new div().class("row").child( new div().class("row").child(
new div().class("col-12 d-flex flex-row gap-3 flex-wrap").child( new div().class("col-12 d-flex flex-row gap-3 flex-wrap justify-content-between").child(
//Pages //Pages
new div().class("btn-group").child( new div().class("btn-group flex-wrap justify-content-center d-none d-sm-flex").child(
//Previous page button //Previous page button
new button() new button()
.class("btn btn-secondary") .class("btn btn-secondary flex-grow-0")
.child(`<i class="fa-solid fa-chevron-left"></i>`) .child(`<i class="fa-solid fa-chevron-left"></i>`)
.onClick(() => { .onClick(() => {
if (this.currentPage > 0) { if (this.currentPage > 0) {
@ -172,7 +174,7 @@ class DataTable extends IgniteElement {
return null; return null;
} }
return new button() return new button()
.class("btn text-center") .class("btn text-center flex-grow-0")
.style("width", "3em") .style("width", "3em")
.class(current, current => current ? "btn-primary" : "btn-secondary") .class(current, current => current ? "btn-primary" : "btn-secondary")
.innerText(filler ? "..." : index + 1) .innerText(filler ? "..." : index + 1)
@ -181,7 +183,7 @@ class DataTable extends IgniteElement {
//Next page button //Next page button
new button() new button()
.class("btn btn-secondary") .class("btn btn-secondary flex-grow-0")
.child(`<i class="fa-solid fa-chevron-right"></i>`) .child(`<i class="fa-solid fa-chevron-right"></i>`)
.onClick(() => { .onClick(() => {
if (this.currentPage < this.pageCount) { if (this.currentPage < this.pageCount) {
@ -191,11 +193,11 @@ class DataTable extends IgniteElement {
), ),
//Page jump to //Page jump to
new div().show(this.showPageJumpTo).class("input-group flex-nowrap w-auto").child( new div().show(this.showPageJumpTo).class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child(
new select().class("form-select border-0 w-auto").child( new select().class("form-select border-0 w-auto").child(
new population( new population(
this.pageCount, this.pageCount,
index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).child(index + 1) index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).innerText(`Page ${index + 1}`)
) )
).value(this.currentPage, true) ).value(this.currentPage, true)
) )