Updated client contract table and notification table, multiselect

resources/js/Components/DataTable/DataTableServer.vue

@@ -171,7 +171,7 @@ function goToPageInput() {
 
 <template>
   <div class="w-full">
-    <div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
+    <div v-if="showToolbar" class="mb-3 flex items-center gap-3">
       <div class="flex items-center gap-2">
         <input
           type="text"
@@ -180,7 +180,8 @@ function goToPageInput() {
           v-model="internalSearch"
         />
       </div>
-      <div class="flex items-center gap-2">
+      <slot name="toolbar-extra" />
+      <div class="ml-auto flex items-center gap-2">
         <label class="text-sm text-gray-600">Na stran</label>
         <select
           class="rounded border-gray-300 text-sm"
@@ -202,20 +203,25 @@ function goToPageInput() {
           class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
         >
           <FwbTableHeadCell v-for="col in columns" :key="col.key" :class="col.class">
-            <button
-              v-if="col.sortable"
-              type="button"
-              class="inline-flex items-center gap-1 hover:text-indigo-600"
-              @click="toggleSort(col)"
-              :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
-            >
-              <span class="uppercase">{{ col.label }}</span>
-              <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
-              <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
-                >▼</span
+            <template v-if="$slots['header-' + col.key]">
+              <slot :name="'header-' + col.key" :column="col" />
+            </template>
+            <template v-else>
+              <button
+                v-if="col.sortable"
+                type="button"
+                class="inline-flex items-center gap-1 hover:text-indigo-600"
+                @click="toggleSort(col)"
+                :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
               >
-            </button>
-            <span v-else>{{ col.label }}</span>
+                <span class="uppercase">{{ col.label }}</span>
+                <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
+                <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
+                  >▼</span
+                >
+              </button>
+              <span v-else>{{ col.label }}</span>
+            </template>
           </FwbTableHeadCell>
           <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
         </FwbTableHead>