From a356467823e34f0f4723e8de1780b92045375db3 Mon Sep 17 00:00:00 2001
From: MattMo <matt@montoyatech.com>
Date: Mon, 13 May 2024 09:01:03 -0700
Subject: [PATCH] Added more control over specific controls on the table and
 made the defaults look better with stock bootstrap.

---
 data-table.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/data-table.js b/data-table.js
index bcb53a2..9149041 100644
--- a/data-table.js
+++ b/data-table.js
@@ -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) {