Adds an active-classes prop so the active element color can be customised

README.md

@@ -270,16 +270,18 @@ The `Table` has some additional properties to tweak its front-end behaviour.
     :prevent-overlapping-requests="false"
     :input-debounce-ms="1000"
     :prevent-scroll="true"
+    :active-classes="{text: 'text-red-500', border: 'border-red-300'}"
   />
 </template>
 ```
 
-| Property | Description | Default |
-| --- | --- | --- |
-| striped | Adds a *striped* layout to the table. | `false` |
-| preventOverlappingRequests | Cancels a previous visit on new user input to prevent an inconsistent state. | `true` |
-| inputDebounceMs | Number of ms to wait before refreshing the table on user input. | 350 |
-| preventScroll | Configures the [Scroll preservation](https://inertiajs.com/scroll-management#scroll-preservation) behavior. You may also pass `table-top` to this property to scroll to the top of the table on new data. | false |
+| Property                   | Description                                                                                                                                                                                               | Default                                                |
+|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|
+| striped                    | Adds a *striped* layout to the table.                                                                                                                                                                     | `false`                                                |
+| preventOverlappingRequests | Cancels a previous visit on new user input to prevent an inconsistent state.                                                                                                                              | `true`                                                 |
+| inputDebounceMs            | Number of ms to wait before refreshing the table on user input.                                                                                                                                           | 350                                                    |
+| preventScroll              | Configures the [Scroll preservation](https://inertiajs.com/scroll-management#scroll-preservation) behavior. You may also pass `table-top` to this property to scroll to the top of the table on new data. | false                                                  |
+| activeClasses              | Configures the CSS classes to apply on active elements like filters & column buttons and sorting indicator                                                                                                | {text: 'text-green-400', border: 'border-green-300' }  |
 
 #### Custom column cells
 

js/Components/ButtonWithDropdown.vue

@@ -7,7 +7,11 @@
         :dusk="dusk"
         :disabled="disabled"
         class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        :class="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }"
+        :class="{
+          [activeClasses.border]: props.active,
+          'border-gray-300': !props.active,
+          'cursor-not-allowed': props.disabled
+        }"
         aria-haspopup="true"
         @click.prevent="toggle"
       >
@@ -32,7 +36,7 @@ import OnClickOutside from "./OnClickOutside.vue";
 import { createPopper } from "@popperjs/core/lib/popper-lite";
 import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
 import flip from "@popperjs/core/lib/modifiers/flip";
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, inject, computed } from "vue";
 
 const props = defineProps({
     placement: {
@@ -86,4 +90,7 @@ onMounted(() => {
 });
 
 defineExpose({ hide });
+
+const activeClasses = inject("activeClasses");
+
 </script>

js/Components/HeaderCell.vue

@@ -18,7 +18,7 @@
             class="w-3 h-3 ml-2"
             :class="{
               'text-gray-400': !cell.sorted,
-              'text-green-500': cell.sorted,
+              [activeClasses.text]: cell.sorted,
             }"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 320 512"
@@ -49,16 +49,21 @@
 </template>
 
 <script setup>
+
+import { inject } from "vue";
+
 const props = defineProps({
     cell: {
         type: Object,
         required: true,
     },
 });
 
+const activeClasses = inject("activeClasses");
+
 function onClick() {
     if (props.cell.sortable) {
         props.cell.onSort(props.cell.key);
     }
 }
-</script>
+</script>

js/Components/Table.vue

@@ -199,7 +199,7 @@ import TableGlobalSearch from "./TableGlobalSearch.vue";
 import TableSearchRows from "./TableSearchRows.vue";
 import TableReset from "./TableReset.vue";
 import TableWrapper from "./TableWrapper.vue";
-import { computed, onMounted, ref, watch, onUnmounted, getCurrentInstance, Transition } from "vue";
+import { computed, onMounted, ref, watch, onUnmounted, getCurrentInstance, Transition, provide } from "vue";
 import qs from "qs";
 import clone from "lodash-es/clone";
 import filter from "lodash-es/filter";
@@ -271,8 +271,21 @@ const props = defineProps({
         },
         required: false,
     },
+
+    activeClasses:{
+        type: Object,
+        required: false,
+        default() {
+            return {
+                text: "text-green-400",
+                border: "border-green-300"
+            };
+        }
+    }
 });
 
+provide("activeClasses", props.activeClasses);
+
 const app = getCurrentInstance();
 const $inertia = app ? app.appContext.config.globalProperties.$inertia : props.inertia;
 

js/Components/TableColumns.vue

@@ -10,7 +10,7 @@
         class="h-5 w-5"
         :class="{
           'text-gray-400': !hasHiddenColumns,
-          'text-green-400': hasHiddenColumns,
+          [activeClasses.text]: hasHiddenColumns,
         }"
         viewBox="0 0 20 20"
         fill="currentColor"
@@ -76,6 +76,7 @@
 
 <script setup>
 import ButtonWithDropdown from "./ButtonWithDropdown.vue";
+import { inject } from "vue";
 
 const props = defineProps({
     columns: {
@@ -93,4 +94,5 @@ const props = defineProps({
         required: true,
     },
 });
+const activeClasses = inject("activeClasses");
 </script>

js/Components/TableFilter.vue

@@ -10,7 +10,7 @@
         class="h-5 w-5"
         :class="{
           'text-gray-400': !hasEnabledFilters,
-          'text-green-400': hasEnabledFilters,
+          [activeClasses.text]: hasEnabledFilters,
         }"
         viewBox="0 0 20 20"
         fill="currentColor"
@@ -60,6 +60,7 @@
 
 <script setup>
 import ButtonWithDropdown from "./ButtonWithDropdown.vue";
+import { inject } from "vue";
 
 defineProps({
     hasEnabledFilters: {
@@ -77,5 +78,7 @@ defineProps({
         required: true,
     },
 });
-</script>
 
+const activeClasses = inject("activeClasses");
+
+</script>