implemented simpleSearch for Employees/Index.

src/views/Employees/Index.vue

@@ -1,6 +1,8 @@
 <template>
 
-<table class="table table-hover">
+<EmployeesSimpleSearch />
+
+<table class="table table-hover mt-3">
     <thead>
         <tr>
             <th 
@@ -26,7 +28,8 @@
 
 <script setup lang="ts">
 
-import { onMounted, reactive, watch, computed } from 'vue'
+import EmployeesSimpleSearch from '@/components/Employees/EmployeesSimpleSearch.vue';
+import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmployees } from '@/stores/employees'
@@ -40,12 +43,8 @@ const sort_by = reactive({
     column: 'id'
 })
 
-watch(sort_by, () => {
-    store.fetchFromApi(undefined, undefined, (sort_by.asc ? "asc(" : "desc(")+sort_by.column+")")
-})
-
 onMounted(() => {
-    store.fetchFromApi(undefined, undefined, (sort_by.asc ? "asc(" : "desc(")+sort_by.column+")")
+    store.fetchFromApi()
 })
 
 function colIsSelected(col : string) {
@@ -57,6 +56,8 @@ function onSortBy(col : string) {
     else sort_by.asc = !sort_by.asc
 
     sort_by.column = col
+    store.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
+    store.fetchFromApi() 
 }
 
 const iconSort = computed(() => {
@@ -66,6 +67,13 @@ const iconSort = computed(() => {
 </script>
 
 <style scoped>
+table {
+    /* table-layout: fixed; */
+}
+
+table thead tr:first-child th:first-child {
+    width: 51px;
+}
 
 table th {
     -ms-user-select: none;
@@ -75,6 +83,7 @@ table th {
     -khtml-user-select: none;
     user-select: none;
     cursor: pointer;
+    
 }
 
 tr {