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

Data table is now more mobile friendly.

Browse Source
This commit is contained in:
MattMo 2023-04-20 11:32:08 -07:00
parent e4c1ea950b
commit 8d5216d5b8
1 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
data-table.js
View File

@ -94,37 +94,35 @@ class DataTable extends IgniteElement {
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 d-flex flex-row justify-content-between gap-3 flex-wrap").child(
new div().class("d-flex flex-row gap-3 flex-wrap flex-grow-1 flex-sm-grow-0").child(
//Page size selector
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 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(
//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 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 list(this.pageSizeOptions, size => new option().child(size))
).value(this.pageSize, true)
),
//Search box
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 input().class("form-control")
.value(this.filterSearch, true)
.onEnter(() => this.filter())
.onChange(() => this.filter())
.on("keydown", (event) => {
if (event.key != 'Shift' && event.key != 'Capslock' && event.key != 'Space' && event.key != 'Control') {
this.search();
}
})
)
new select().class("form-select border-0 w-auto").child(
new list(this.pageSizeOptions, size => new option().child(size))
).value(this.pageSize, true)
),
//Rows count
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")}`)
//Search box
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 input().class("form-control")
.value(this.filterSearch, true)
.onEnter(() => this.filter())
.onChange(() => this.filter())
.on("keydown", (event) => {
if (event.key != 'Shift' && event.key != 'Capslock' && event.key != 'Space' && event.key != 'Control') {
this.search();
}
})
)
),
//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")}`)
)
),
@ -151,7 +149,7 @@ class DataTable extends IgniteElement {
),
new div().class("row").child(
new div().class("col-12 d-flex flex-row gap-3 flex-wrap justify-content-between").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(
//Previous page button