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

Added more control over specific controls on the table and made the defaults look better with stock bootstrap.

Browse Source
This commit is contained in:
MattMo 2024-05-13 09:01:03 -07:00
parent 270a5fbabf
commit a356467823
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
data-table.js
View File

@ -269,20 +269,22 @@ class DataTable extends IgniteElement {
bodyClass: null, bodyClass: null,
pendingSearch: null, pendingSearch: null,
showPageSize: true, showPageSize: true,
pageSizeClass: "form-select w-auto text-dark", pageSizeClass: "form-select w-auto text-dark border-0",
pageSizeSpanClass: "input-group-text bg-white text-dark", pageSizeSpanClass: "input-group-text bg-white text-dark border-0",
showSearchBox: true, showSearchBox: true,
searchBoxClass: "form-control bg-white", searchBoxClass: "form-control bg-white border-0",
searchBoxSpanClass: "input-group-text bg-white text-dark", searchBoxSpanClass: "input-group-text bg-white text-dark border-0",
showRowCount: true, showRowCount: true,
rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark text-nowrap", rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark text-nowrap",
showPages: true, showPages: true,
showPageJumpTo: true, showPageJumpTo: true,
pageJumpToClass: "form-select border-0 w-auto text-dark", pageJumpToClass: "form-select border-0 w-auto text-dark",
showRefreshButton: true, showRefreshButton: true,
refreshButtonClass: "btn btn-secondary text-dark", refreshButtonClass: "btn bg-white text-dark",
primaryPageButtonClass: "btn-primary", previousPageButtonClass: "btn bg-dark text-white flex-grow-1",
secondaryPageButtonClass: "btn-secondary", nextPageButtonClass: "btn bg-dark text-white flex-grow-1",
primaryPageButtonClass: "btn text-center flex-grow-1 btn-primary",
secondaryPageButtonClass: "btn text-center flex-grow-1 btn-secondary",
refresh: null, refresh: null,
pendingFilter: null, pendingFilter: null,
loading: false loading: false
@ -393,7 +395,7 @@ class DataTable extends IgniteElement {
new div().class("btn-group flex-wrap justify-content-center d-flex flex-grow-1 flex-sm-grow-0").child( new div().class("btn-group flex-wrap justify-content-center d-flex flex-grow-1 flex-sm-grow-0").child(
//Previous page button //Previous page button
new button() new button()
.class("btn btn-secondary flex-grow-1") .class(this.previousPageButtonClass)
.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) {
@ -412,7 +414,6 @@ class DataTable extends IgniteElement {
} }
return new button() return new button()
.class("btn text-center flex-grow-1")
.class(current, current => current ? this.primaryPageButtonClass : this.secondaryPageButtonClass) .class(current, current => current ? this.primaryPageButtonClass : this.secondaryPageButtonClass)
.innerText(filler ? "..." : index + 1) .innerText(filler ? "..." : index + 1)
.onClick(() => this.currentPage = index) .onClick(() => this.currentPage = index)
@ -420,7 +421,7 @@ class DataTable extends IgniteElement {
//Next page button //Next page button
new button() new button()
.class("btn btn-secondary flex-grow-1") .class(this.nextPageButtonClass)
.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) {