Update README.md

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
 

composer.json

@@ -11,12 +11,12 @@
         }
     ],
     "require": {
-        "php": "^7.4|^8.0|^8.1",
-        "illuminate/support": "^8.67|^v9.0.0-beta.4"
+        "php": "^8.0|^8.1|^8.2",
+        "illuminate/support": "^8.0|^9.0|^10.0|^11.0"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.8",
-        "inertiajs/inertia-laravel": "^0.5",
+        "inertiajs/inertia-laravel": "^0.6.9",
         "orchestra/testbench": "^6.23|^7.0",
         "phpunit/phpunit": "^9.4"
     },

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>