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

Made data table more mobile friendly without having to hide certain controls unless they are explicitly hidden.

Browse Source
This commit is contained in:
MattMo 2023-04-20 16:14:35 -07:00
parent 8d5216d5b8
commit b60659761b
1 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
data-table.js
View File

@ -87,16 +87,17 @@ class DataTable extends IgniteElement {
showPageSize: true, showPageSize: true,
showSearchBox: true, showSearchBox: true,
showRowCount: true, showRowCount: true,
showPages: true,
showPageJumpTo: true showPageJumpTo: true
} }
} }
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 g-3 mb-3").child(
new div().class("col-12 col-sm-8 col-lg-6 d-flex flex-column flex-sm-row justify-content-start gap-3 flex-wrap flex-sm-nowrap").child( new div().class("col-12 col-sm-8 col-lg-8 d-flex flex-row justify-content-start gap-3 flex-nowrap").child(
//Page size selector //Page size selector
new div().show(this.showPageSize).class("input-group d-none d-sm-flex flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child( new div().show(this.showPageSize).class("input-group d-flex 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(
@ -104,8 +105,13 @@ class DataTable extends IgniteElement {
).value(this.pageSize, true) ).value(this.pageSize, true)
), ),
//Search box //Row count
new div().show(this.showSearchBox).class("input-group flex-nowrap w-auto flex-grow-1").child( new span().show(this.showRowCount).class("bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0").innerHTML(this.results, results => results.length == 0 ? "No rows" : `${results.length} ${(results.length < 2 ? "row" : "rows")}`)
),
//Search box
new div().show(this.showSearchBox).class("col-12 col-sm-4 col-lg-4 d-flex flex-row justify-content-end gap-3 flex-wrap").child(
new div().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")
@ -118,11 +124,6 @@ class DataTable extends IgniteElement {
} }
}) })
) )
),
//Rows count
new div().class("d-none col-12 col-sm-4 col-lg-6 d-sm-flex flex-row justify-content-end gap-3 flex-wrap").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")}`)
) )
), ),
@ -148,13 +149,13 @@ class DataTable extends IgniteElement {
) )
), ),
new div().class("row").child( new div().class("row g-3").child(
new div().class("col-12 d-flex flex-row gap-3 flex-wrap justify-content-around").child( //Pagination pages
//Pages new div().show(this.showPages).class("col-12 col-sm-9 col-lg-8 d-flex flex-row justify-content-start").child(
new div().class("btn-group flex-wrap justify-content-center d-none d-sm-flex").child( new div().class("btn-group flex-wrap justify-content-center d-flex flex-grow-1").style("max-width", "35em").child(
//Previous page button //Previous page button
new button() new button()
.class("btn btn-secondary flex-grow-0") .class("btn btn-secondary flex-grow-1")
.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,8 +173,7 @@ class DataTable extends IgniteElement {
return null; return null;
} }
return new button() return new button()
.class("btn text-center flex-grow-0") .class("btn text-center flex-grow-1")
.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)
.onClick(() => this.currentPage = index) .onClick(() => this.currentPage = index)
@ -181,17 +181,19 @@ class DataTable extends IgniteElement {
//Next page button //Next page button
new button() new button()
.class("btn btn-secondary flex-grow-0") .class("btn btn-secondary flex-grow-1")
.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) {
this.currentPage = this.currentPage + 1; this.currentPage = this.currentPage + 1;
} }
}), }),
), )
),
//Page jump to //Page jump to select
new div().show(this.showPageJumpTo).class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child( new div().show(this.showPageJumpTo).class("col-12 col-sm-3 col-lg-4 d-flex flex-row justify-content-end").child(
new div().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,