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

10
data-table.js
View File

@ -94,10 +94,9 @@ 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 flex-wrap").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("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 flex-grow-1 flex-sm-grow-0").child( 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 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(
@ -122,10 +121,9 @@ class DataTable extends IgniteElement {
), ),
//Rows count //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 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")}`) 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 rounded-2 mb-3").child( new div().class("table-responsive rounded-2 mb-3").child(
@ -151,7 +149,7 @@ 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 justify-content-between").child( new div().class("col-12 d-flex flex-row gap-3 flex-wrap justify-content-around").child(
//Pages //Pages
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-none d-sm-flex").child(
//Previous page button //Previous page button