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
Download Patch File Download Diff File Expand all files Collapse all files

40
data-table.js
View File

@@ -87,16 +87,17 @@ class DataTable extends IgniteElement {
showPageSize: true,
showSearchBox: true,
showRowCount: true,
showPages: true,
showPageJumpTo: true
}
}
render() {
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().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().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-8 d-flex flex-row justify-content-start gap-3 flex-nowrap").child(
//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 select().class("form-select border-0 w-auto").child(
@@ -104,8 +105,13 @@ class DataTable extends IgniteElement {
).value(this.pageSize, true)
),
//Row count
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("input-group flex-nowrap w-auto flex-grow-1").child(
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 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("col-12 d-flex flex-row gap-3 flex-wrap justify-content-around").child(
//Pages
new div().class("btn-group flex-wrap justify-content-center d-none d-sm-flex").child(
new div().class("row g-3").child(
//Pagination 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-flex flex-grow-1").style("max-width", "35em").child(
//Previous page 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>`)
.onClick(() => {
if (this.currentPage > 0) {
@@ -172,8 +173,7 @@ class DataTable extends IgniteElement {
return null;
}
return new button()
.class("btn text-center flex-grow-0")
.style("width", "3em")
.class("btn text-center flex-grow-1")
.class(current, current => current ? "btn-primary" : "btn-secondary")
.innerText(filler ? "..." : index + 1)
.onClick(() => this.currentPage = index)
@@ -181,17 +181,19 @@ class DataTable extends IgniteElement {
//Next page 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>`)
.onClick(() => {
if (this.currentPage < this.pageCount) {
this.currentPage = this.currentPage + 1;
}
}),
)
),
//Page jump to
new div().show(this.showPageJumpTo).class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child(
//Page jump to select
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 population(
this.pageCount,