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

Improved the page size, row count and search box row, it now handles resizing better.

Browse Source
This commit is contained in:
MattMo 2023-07-10 16:38:24 -07:00
parent c703b24bfe
commit 2870ae49ce
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
data-table.js
View File

@ -275,7 +275,7 @@ class DataTable extends IgniteElement {
searchBoxClass: "form-control bg-white",
searchBoxSpanClass: "input-group-text bg-white text-dark",
showRowCount: true,
rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark",
rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark text-nowrap",
showPages: true,
showPageJumpTo: true,
pageJumpToClass: "form-select border-0 w-auto text-dark",
@ -289,8 +289,8 @@ class DataTable extends IgniteElement {
render() {
return this.template.child(
new div().show([this.showPageSize, this.showSearchBox, this.showRowCount, this.showRefreshButton], (pageSize, searchBox, rowCount, refreshButton) => pageSize || searchBox || rowCount || refreshButton).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(
new div().show([this.showPageSize, this.showSearchBox, this.showRowCount, this.showRefreshButton], (pageSize, searchBox, rowCount, refreshButton) => pageSize || searchBox || rowCount || refreshButton).class("d-flex flex-column flex-sm-row gap-3 justify-content-between flex-wrap mb-3").child(
new div().class("d-flex flex-row justify-content-start gap-3 flex-nowrap flex-fill").child(
//Page size selector
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(this.pageSizeSpanClass).child(`<i class="fa-solid fa-list-ul"></i>`),
@ -321,7 +321,7 @@ class DataTable extends IgniteElement {
),
//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().show(this.showSearchBox).class("d-flex flex-row justify-content-end gap-3 flex-wrap flex-fill").style("max-width", "576px").child(
new div().class("input-group flex-nowrap w-auto flex-grow-1").child(
new span().class(this.searchBoxSpanClass).child(`<i class="fa-solid fa-magnifying-glass"></i>`),