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,
pendingSearch: null,
showPageSize: true,
pageSizeClass: "form-select w-auto text-dark",
pageSizeSpanClass: "input-group-text bg-white text-dark",
pageSizeClass: "form-select w-auto text-dark border-0",
pageSizeSpanClass: "input-group-text bg-white text-dark border-0",
showSearchBox: true,
searchBoxClass: "form-control bg-white",
searchBoxSpanClass: "input-group-text bg-white text-dark",
searchBoxClass: "form-control bg-white border-0",
searchBoxSpanClass: "input-group-text bg-white text-dark border-0",
showRowCount: true,
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",
showRefreshButton: true,
refreshButtonClass: "btn btn-secondary text-dark",
primaryPageButtonClass: "btn-primary",
secondaryPageButtonClass: "btn-secondary",
refreshButtonClass: "btn bg-white text-dark",
previousPageButtonClass: "btn bg-dark text-white flex-grow-1",
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,
pendingFilter: null,
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(
//Previous page button
new button()
.class("btn btn-secondary flex-grow-1")
.class(this.previousPageButtonClass)
.child(`<i class="fa-solid fa-chevron-left"></i>`)
.onClick(() => {
if (this.currentPage > 0) {
@ -412,7 +414,6 @@ class DataTable extends IgniteElement {
}
return new button()
.class("btn text-center flex-grow-1")
.class(current, current => current ? this.primaryPageButtonClass : this.secondaryPageButtonClass)
.innerText(filler ? "..." : index + 1)
.onClick(() => this.currentPage = index)
@ -420,7 +421,7 @@ class DataTable extends IgniteElement {
//Next page button
new button()
.class("btn btn-secondary flex-grow-1")
.class(this.nextPageButtonClass)
.child(`<i class="fa-solid fa-chevron-right"></i>`)
.onClick(() => {
if (this.currentPage < this.pageCount) {