@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/Tables/SyServerTable/SyServerTable.stories.ts

@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import SyServerTable from './SyServerTable.vue'
 import { StateEnum } from '../common/constants/StateEnum'
 import type { DataOptions, FilterType } from '../common/types'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { VDataTable } from 'vuetify/components'
 import dayjs from 'dayjs'
+import { fn } from '@storybook/test'
 
 interface User {
 	[key: string]: string
@@ -31,7 +32,7 @@ const meta = {
 	},
 	argTypes: {
 		headers: {
-			description: 'Liste des colonnes du tableau',
+			description: 'Liste des colonnes du tableau (voir : https://vuetifyjs.com/en/api/v-data-table/#props-headers)',
 			control: { type: 'object' },
 			table: {
 				category: 'props',
@@ -42,6 +43,9 @@ const meta = {
 			control: { type: 'object' },
 			table: {
 				category: 'props',
+				defaultValue: {
+					summary: '[]',
+				},
 			},
 		},
 		density: {
@@ -83,10 +87,6 @@ const meta = {
 			},
 			required: true,
 		},
-		itemsPerPage: {
-			description: 'Nombre d\'éléments par page',
-			control: { type: 'number' },
-		},
 		caption: {
 			description: 'Texte de la légende du tableau',
 			control: { type: 'text' },
@@ -94,6 +94,25 @@ const meta = {
 		resizableColumns: {
 			description: 'Permet de redimensionner les colonnes du tableau',
 		},
+		enableColumnControls: {
+			description: 'Allow the users to re-organize the columns',
+			table: {
+				defaultValue: {
+					summary: 'false',
+				},
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+			control: { type: 'boolean' },
+		},
+		showSelect: {
+			description: 'Affiche des cases à cocher pour sélectionner des lignes',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+			},
+		},
 	},
 } satisfies Meta<typeof SyServerTable & typeof VDataTable>
 
@@ -167,7 +186,7 @@ export const Default: Story = {
 						return new Promise(resolve => setTimeout(resolve, ms))
 					}
 				
-					const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+					const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
 						state.value = StateEnum.PENDING
 						await wait(1000)
 				
@@ -212,27 +231,31 @@ export const Default: Story = {
 							{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
 						]
 					}
+                    
+                      // Initialize data
+		  			fetchData()
 				</script>
 				`,
 			},
 		],
 	},
 	args: {
-		options: {
+		'options': {
 			itemsPerPage: 5,
 			sortBy: [{ key: 'lastname', order: 'asc' }],
 			page: 1,
 		},
-		headers: [
+		'headers': [
 			{ title: 'Nom', key: 'lastname' },
 			{ title: 'Prénom', key: 'firstname' },
 			{ title: 'Email', key: 'email' },
 		],
-		caption: '',
-		serverItemsLength: 15,
-		suffix: 'server-default',
-		density: 'default',
-		striped: false,
+		'caption': '',
+		'serverItemsLength': 15,
+		'suffix': 'server-default',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render: (args) => {
 		return {
@@ -242,9 +265,16 @@ export const Default: Story = {
 				const users = ref<User[]>([])
 				const state = ref(StateEnum.IDLE)
 
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const fetchData = async (): Promise<void> => {
-					// @ts-expect-error - fetchData is not defined
-					const { items, total } = await getDataFromApi(args.options)
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
 					users.value = items
 					totalUsers.value = total
 				}
@@ -299,21 +329,19 @@ export const Default: Story = {
 					]
 				}
 
-				return { args, users, state, fetchData, totalUsers, StateEnum }
+				// Initialize data
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
 			},
 			template: `
 			<div>
 				<SyServerTable
-					v-model:options="args.options"
+					v-model:options="options"
 					:items="users"
-					:headers="args.headers"
-					:caption="args.caption"
 					:server-items-length="totalUsers"
 					:loading="state === StateEnum.PENDING"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-bind="args"
 					@update:options="fetchData"
 				/>
 			</div>
@@ -328,127 +356,136 @@ export const ServerSortBy: Story = {
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <SyServerTable
-            v-model:options="options"
-            :items="users"
-            :headers="headers"
-            :server-items-length="totalUsers"
-            :loading="state === StateEnum.PENDING"
-            suffix="server-sort"
-            @update:options="fetchData"
-          />
-        </template>
-        `,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="users"
+			:headers="headers"
+			:server-items-length="totalUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-sort"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            [key: string]: string
-            firstname: string
-            lastname: string
-            email: string
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const totalUsers = ref(0)
-          const users = ref<User[]>([])
-          const state = ref(StateEnum.IDLE)
-
-          const options = ref<DataOptions>({
-            itemsPerPage: 5,
-            sortBy: [{ key: 'lastname', order: 'desc' }],
-            page: 1,
-          })
-
-          const headers = [
-            { title: 'Nom', key: 'lastname' },
-            { title: 'Prénom', key: 'firstname' },
-            { title: 'Email', key: 'email' },
-          ]
-
-          const fetchData = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(options.value)
-            users.value = items
-            totalUsers.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              let items: User[] = getUsers()
-              const total = items.length
-
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-
-                  return a[key] > b[key] ? order : -order
-                })
-              }
-
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          }
-
-          const getUsers = (): User[] => {
-            return [
-              { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
-              { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
-              { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
-              { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
-              { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
-              { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
-              { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
-              { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
-              { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
-              { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
-            ]
-          }
-        </script>
-        `,
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			[key: string]: string
+			firstname: string
+			lastname: string
+			email: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalUsers = ref(0)
+		  const users = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			sortBy: [{ key: 'lastname', order: 'desc' }],
+			page: 1,
+		  })
+
+		  const headers = [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			users.value = items
+			totalUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  let items: User[] = getUsers()
+			  const total = items.length
+
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+
+				  return a[key] > b[key] ? order : -order
+				})
+			  }
+
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+							{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+							{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+							{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+							{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+							{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+							{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+							{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+							{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+							{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+							{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+							{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+							{ firstname: 'Jacques', lastname: 'Demers', email: 'jacques.demers@example.com' },
+							{ firstname: 'Aimée', lastname: 'Josseaume', email: 'aimee.josseaume@example.com' },
+							{ firstname: 'Delphine', lastname: 'Robillard', email: 'delphine.robillard@example.com' },
+							{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
+						]
+		  }
+          
+           // Initialize data
+		  	fetchData()
+		</script>
+		`,
 			},
 		],
 	},
 	args: {
-		options: {
+		'options': {
 			itemsPerPage: 5,
 			sortBy: [{ key: 'lastname', order: 'desc' }],
 			page: 1,
 		},
-		headers: [
+		'headers': [
 			{ title: 'Nom', key: 'lastname' },
 			{ title: 'Prénom', key: 'firstname' },
 			{ title: 'Email', key: 'email' },
 		],
-		caption: '',
-		serverItemsLength: 0,
-		suffix: 'server-sort',
-		density: 'default',
-		striped: false,
+		'caption': '',
+		'serverItemsLength': 15,
+		'suffix': 'server-sort',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render: (args) => {
 		return {
@@ -458,8 +495,16 @@ export const ServerSortBy: Story = {
 				const users = ref<User[]>([])
 				const state = ref(StateEnum.IDLE)
 
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const fetchData = async (): Promise<void> => {
-					const { items, total } = await getDataFromApi(args.options as DataOptions)
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
 					users.value = items
 					totalUsers.value = total
 				}
@@ -506,28 +551,31 @@ export const ServerSortBy: Story = {
 						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
 						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
 						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+						{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+						{ firstname: 'Jacques', lastname: 'Demers', email: 'jacques.demers@example.com' },
+						{ firstname: 'Aimée', lastname: 'Josseaume', email: 'aimee.josseaume@example.com' },
+						{ firstname: 'Delphine', lastname: 'Robillard', email: 'delphine.robillard@example.com' },
+						{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
 					]
 				}
 
-				return { args, users, state, fetchData, totalUsers, StateEnum }
+				// Initialize data
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
 			},
 			template: `
-      <div>
-        <SyServerTable
-          v-model:options="args.options"
-          :items="users"
-          :headers="args.headers"
-		  :caption="args.caption"
-          :server-items-length="totalUsers"
-          :loading="state === StateEnum.PENDING"
-          :suffix="args.suffix"
-		  :density="args.density"
-		  :striped="args.striped"
-		  :resizable-columns="args.resizableColumns"
-          @update:options="fetchData"
-        />
-      </div>
-      `,
+	  <div>
+		<SyServerTable
+		  v-model:options="options"
+		  :items="users"
+		  :server-items-length="totalUsers"
+		  :loading="state === StateEnum.PENDING"
+		  v-bind="args"
+		  @update:options="fetchData"
+		/>
+	  </div>
+	  `,
 		}
 	},
 }
@@ -538,153 +586,153 @@ export const ServerFilterByText: Story = {
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <SyServerTable
-            v-model:options="options"
-            :items="filteredUsers"
-            :headers="headers"
-            :server-items-length="totalFilteredUsers"
-            :loading="state === StateEnum.PENDING"
-            suffix="server-filter-text"
-            :show-filters="true"
-            @update:options="fetchData"
-          />
-        </template>
-        `,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-text"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            firstname: string
-            lastname: string
-            email: string
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const totalFilteredUsers = ref(0)
-          const filteredUsers = ref<User[]>([])
-          const state = ref(StateEnum.IDLE)
-
-          const options = ref<DataOptions>({
-            itemsPerPage: 5,
-            page: 1,
-            filters: [],
-          })
-
-          const headers = [
-            { 
-              title: 'Prénom', 
-              key: 'firstname',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Nom', 
-              key: 'lastname',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Email', 
-              key: 'email',
-              filterable: true,
-              filterType: 'text'
-            }
-          ]
-
-          const fetchData = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(options.value)
-            filteredUsers.value = items
-            totalFilteredUsers.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              // Get all users
-              let items: User[] = getUsers()
-              
-              // Apply filters on server side
-              if (filters && filters.length > 0) {
-                filters.forEach((filter: FilterOption) => {
-                  const { key, value } = filter
-                  
-                  items = items.filter(item => {
-                    const itemValue = item[key as keyof User]
-                    return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
-                  })
-                })
-              }
-              
-              const total = items.length
-
-              // Apply sorting
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key as keyof User
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-                  
-                  return String(a[key]) > String(b[key]) ? order : -order
-                })
-              }
-
-              // Apply pagination
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          }
-
-          const getUsers = (): User[] => {
-            return [
-              { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
-              { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
-              { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
-              { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
-              { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
-              { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
-              { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
-              { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
-              { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
-              { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
-              { firstname: 'Martin', lastname: 'Lavoie', email: 'martin.lavoie@example.com' },
-              { firstname: 'Céline', lastname: 'Tremblay', email: 'celine.tremblay@example.com' },
-              { firstname: 'Jacques', lastname: 'Gagnon', email: 'jacques.gagnon@example.com' },
-              { firstname: 'Isabelle', lastname: 'Côté', email: 'isabelle.cote@example.com' },
-              { firstname: 'Philippe', lastname: 'Bouchard', email: 'philippe.bouchard@example.com' },
-            ]
-          }
-          
-          // Initialize data
-          fetchData()
-        </script>
-        `,
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			firstname: string
+			lastname: string
+			email: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Prénom', 
+			  key: 'firstname',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Nom', 
+			  key: 'lastname',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Email', 
+			  key: 'email',
+			  filterable: true,
+			  filterType: 'text'
+			}
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
+					return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+			  { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+			  { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+			  { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+			  { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+			  { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+			  { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+			  { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+			  { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+			  { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+			  { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+			  { firstname: 'Martin', lastname: 'Lavoie', email: 'martin.lavoie@example.com' },
+			  { firstname: 'Céline', lastname: 'Tremblay', email: 'celine.tremblay@example.com' },
+			  { firstname: 'Jacques', lastname: 'Gagnon', email: 'jacques.gagnon@example.com' },
+			  { firstname: 'Isabelle', lastname: 'Côté', email: 'isabelle.cote@example.com' },
+			  { firstname: 'Philippe', lastname: 'Bouchard', email: 'philippe.bouchard@example.com' },
+			]
+		  }
+		  
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
 			},
 		],
 	},
 	args: {
-		serverItemsLength: 15,
-		headers: [
+		'serverItemsLength': 15,
+		'headers': [
 			{
 				title: 'Prénom',
 				key: 'firstname',
@@ -704,22 +752,30 @@ export const ServerFilterByText: Story = {
 				filterType: 'text',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			page: 1,
 			filters: [],
 		},
-		showFilters: true,
-		suffix: 'server-filter-text',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'server-filter-text',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
-				const options = ref(args.options)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const totalFilteredUsers = ref(0)
 				const filteredUsers = ref<Record<string, unknown>[]>([])
 				const state = ref(StateEnum.IDLE)
@@ -779,10 +835,10 @@ export const ServerFilterByText: Story = {
 
 				return {
 					args,
-					options,
 					filteredUsers,
 					totalFilteredUsers,
 					state,
+					options,
 					fetchData,
 					StateEnum,
 				}
@@ -790,17 +846,12 @@ export const ServerFilterByText: Story = {
 			template: `
 				<div>
 					<SyServerTable
+						v-bind="args"
 						v-model:options="options"
 						:items="filteredUsers"
-						:headers="args.headers"
-						:caption="args.caption"
 						:server-items-length="totalFilteredUsers"
 						:loading="state === StateEnum.PENDING"
-						:show-filters="args.showFilters"
-						:suffix="args.suffix"
-						:density="args.density"
-						:striped="args.striped"
-						:resizable-columns="args.resizableColumns"
+						suffix="server-filter-text"
 						@update:options="fetchData"
 					/>
 				</div>
@@ -815,161 +866,161 @@ export const ServerFilterByNumber: Story = {
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <SyServerTable
-            v-model:options="options"
-            :items="filteredUsers"
-            :headers="headers"
-            :server-items-length="totalFilteredUsers"
-            :loading="state === StateEnum.PENDING"
-            suffix="server-filter-number"
-            :show-filters="true"
-            @update:options="fetchData"
-          />
-        </template>
-        `,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-number"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            name: string
-            age: number
-            salary: number
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const totalFilteredUsers = ref(0)
-          const filteredUsers = ref<User[]>([])
-          const state = ref(StateEnum.IDLE)
-
-          const options = ref<DataOptions>({
-            itemsPerPage: 5,
-            page: 1,
-            filters: [],
-          })
-
-          const headers = [
-            { 
-              title: 'Nom', 
-              key: 'name',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Âge', 
-              key: 'age',
-              filterable: true,
-              filterType: 'number'
-            },
-            { 
-              title: 'Salaire', 
-              key: 'salary',
-              filterable: true,
-              filterType: 'number'
-            }
-          ]
-
-          const fetchData = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(options.value)
-            filteredUsers.value = items
-            totalFilteredUsers.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              // Get all users
-              let items: User[] = getUsers()
-              
-              // Apply filters on server side
-              if (filters && filters.length > 0) {
-                filters.forEach((filter: FilterOption) => {
-                  const { key, value, type } = filter
-                  
-                  items = items.filter(item => {
-                    const itemValue = item[key as keyof User]
-                    
-                    if (type === 'number') {
-                      return Number(itemValue) === Number(value)
-                    } else {
-                      return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
-                    }
-                  })
-                })
-              }
-              
-              const total = items.length
-
-              // Apply sorting
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key as keyof User
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-
-                  if (typeof a[key] === 'number' && typeof b[key] === 'number') {
-                    return (a[key] as number) > (b[key] as number) ? order : -order
-                  }
-                  
-                  return String(a[key]) > String(b[key]) ? order : -order
-                })
-              }
-
-              // Apply pagination
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          }
-
-          const getUsers = (): User[] => {
-            return [
-              { name: 'Jean Dupont', age: 32, salary: 45000 },
-              { name: 'Marie Martin', age: 28, salary: 52000 },
-              { name: 'Pierre Durand', age: 45, salary: 65000 },
-              { name: 'Sophie Petit', age: 36, salary: 48000 },
-              { name: 'Thomas Leroy', age: 41, salary: 58000 },
-              { name: 'Julie Bernard', age: 29, salary: 47000 },
-              { name: 'Nicolas Moreau', age: 38, salary: 61000 },
-              { name: 'Camille Dubois', age: 33, salary: 49000 },
-              { name: 'Alexandre Lefebvre', age: 44, salary: 67000 },
-              { name: 'Émilie Girard', age: 31, salary: 51000 },
-              { name: 'Lucas Roux', age: 39, salary: 59000 },
-              { name: 'Chloé Lambert', age: 27, salary: 46000 },
-              { name: 'Maxime Simon', age: 42, salary: 63000 },
-              { name: 'Laura Fournier', age: 35, salary: 54000 },
-              { name: 'Antoine Mercier', age: 40, salary: 60000 },
-            ]
-          }
-          
-          // Initialize data
-          fetchData()
-        </script>
-        `,
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			name: string
+			age: number
+			salary: number
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Nom', 
+			  key: 'name',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Âge', 
+			  key: 'age',
+			  filterable: true,
+			  filterType: 'number'
+			},
+			{ 
+			  title: 'Salaire', 
+			  key: 'salary',
+			  filterable: true,
+			  filterType: 'number'
+			}
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value, type } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
+					
+					if (type === 'number') {
+					  return Number(itemValue) === Number(value)
+					} else {
+					  return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+					}
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+
+				  if (typeof a[key] === 'number' && typeof b[key] === 'number') {
+					return (a[key] as number) > (b[key] as number) ? order : -order
+				  }
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+			  { name: 'Jean Dupont', age: 32, salary: 45000 },
+			  { name: 'Marie Martin', age: 28, salary: 52000 },
+			  { name: 'Pierre Durand', age: 45, salary: 65000 },
+			  { name: 'Sophie Petit', age: 36, salary: 48000 },
+			  { name: 'Thomas Leroy', age: 41, salary: 58000 },
+			  { name: 'Julie Bernard', age: 29, salary: 47000 },
+			  { name: 'Nicolas Moreau', age: 38, salary: 61000 },
+			  { name: 'Camille Dubois', age: 33, salary: 49000 },
+			  { name: 'Alexandre Lefebvre', age: 44, salary: 67000 },
+			  { name: 'Émilie Girard', age: 31, salary: 51000 },
+			  { name: 'Lucas Roux', age: 39, salary: 59000 },
+			  { name: 'Chloé Lambert', age: 27, salary: 46000 },
+			  { name: 'Maxime Simon', age: 42, salary: 63000 },
+			  { name: 'Laura Fournier', age: 35, salary: 54000 },
+			  { name: 'Antoine Mercier', age: 40, salary: 60000 },
+			]
+		  }
+		  
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
 			},
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'name',
@@ -989,23 +1040,31 @@ export const ServerFilterByNumber: Story = {
 				filterType: 'number',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			page: 1,
 			filters: [],
 		},
-		serverItemsLength: 15,
-		showFilters: true,
-		suffix: 'server-filter-number',
-		density: 'default',
-		striped: false,
+		'serverItemsLength': 15,
+		'showFilters': true,
+		'suffix': 'server-filter-number',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
-				const options = ref(args.options)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const totalFilteredUsers = ref(0)
 				const filteredUsers = ref<Record<string, unknown>[]>([])
 				const state = ref(StateEnum.IDLE)
@@ -1071,9 +1130,9 @@ export const ServerFilterByNumber: Story = {
 
 				return {
 					args,
-					options,
 					filteredUsers,
 					totalFilteredUsers,
+					options,
 					state,
 					fetchData,
 					StateEnum,
@@ -1082,17 +1141,11 @@ export const ServerFilterByNumber: Story = {
 			template: `
 				<div>
 					<SyServerTable
+						v-bind="args"
 						v-model:options="options"
 						:items="filteredUsers"
-						:headers="args.headers"
-						:caption="args.caption"
 						:server-items-length="totalFilteredUsers"
 						:loading="state === StateEnum.PENDING"
-						:show-filters="args.showFilters"
-						:suffix="args.suffix"
-						:density="args.density"
-						:striped="args.striped"
-						:resizable-columns="args.resizableColumns"
 						@update:options="fetchData"
 					/>
 				</div>
@@ -1107,170 +1160,170 @@ export const ServerFilterBySelect: Story = {
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <SyServerTable
-            v-model:options="options"
-            :items="filteredUsers"
-            :headers="headers"
-            :server-items-length="totalFilteredUsers"
-            :loading="state === StateEnum.PENDING"
-            suffix="server-filter-select"
-            :show-filters="true"
-            @update:options="fetchData"
-          />
-        </template>
-        `,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-select"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            name: string
-            department: string
-            status: string
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const totalFilteredUsers = ref(0)
-          const filteredUsers = ref<User[]>([])
-          const state = ref(StateEnum.IDLE)
-
-          const options = ref<DataOptions>({
-            itemsPerPage: 5,
-            page: 1,
-            filters: [],
-          })
-
-          const headers = [
-            { 
-              title: 'Nom', 
-              key: 'name',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Département', 
-              key: 'department',
-              filterable: true,
-              filterType: 'select',
-              hideMessages: true,
-              filterOptions: [
-                { text: 'RH', value: 'RH' },
-                { text: 'IT', value: 'IT' },
-                { text: 'Finance', value: 'Finance' },
-                { text: 'Marketing', value: 'Marketing' },
-              ]
-            },
-            { 
-              title: 'Statut', 
-              key: 'status',
-              filterable: true,
-              filterType: 'select',
-              hideMessages: true,
-              filterOptions: [
-                { text: 'Actif', value: 'Actif' },
-                { text: 'En congé', value: 'En congé' },
-                { text: 'Inactif', value: 'Inactif' },
-              ]
-            }
-          ]
-
-          const fetchData = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(options.value)
-            filteredUsers.value = items
-            totalFilteredUsers.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              // Get all users
-              let items: User[] = getUsers()
-              
-              // Apply filters on server side
-              if (filters && filters.length > 0) {
-                filters.forEach((filter: FilterOption) => {
-                  const { key, value, type } = filter
-                  
-                  items = items.filter(item => {
-                    const itemValue = item[key as keyof User]
-                    
-                    if (type === 'select') {
-                      return itemValue === value
-                    } else {
-                      return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
-                    }
-                  })
-                })
-              }
-              
-              const total = items.length
-
-              // Apply sorting
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key as keyof User
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-                  
-                  return String(a[key]) > String(b[key]) ? order : -order
-                })
-              }
-
-              // Apply pagination
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          }
-
-          const getUsers = (): User[] => {
-            return [
-              { name: 'Jean Dupont', department: 'RH', status: 'Actif' },
-              { name: 'Marie Martin', department: 'IT', status: 'En congé' },
-              { name: 'Pierre Durand', department: 'Finance', status: 'Actif' },
-              { name: 'Sophie Petit', department: 'Marketing', status: 'Actif' },
-              { name: 'Thomas Leroy', department: 'IT', status: 'Inactif' },
-              { name: 'Julie Bernard', department: 'RH', status: 'Actif' },
-              { name: 'Nicolas Moreau', department: 'Finance', status: 'En congé' },
-              { name: 'Camille Dubois', department: 'Marketing', status: 'Inactif' },
-              { name: 'Alexandre Lefebvre', department: 'IT', status: 'Actif' },
-              { name: 'Émilie Girard', department: 'RH', status: 'En congé' },
-              { name: 'Lucas Roux', department: 'Finance', status: 'Actif' },
-              { name: 'Chloé Lambert', department: 'Marketing', status: 'Actif' },
-              { name: 'Maxime Simon', department: 'IT', status: 'Inactif' },
-              { name: 'Laura Fournier', department: 'RH', status: 'Actif' },
-              { name: 'Antoine Mercier', department: 'Finance', status: 'En congé' },
-            ]
-          }
-          
-          // Initialize data
-          fetchData()
-        </script>
-        `,
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			name: string
+			department: string
+			status: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Nom', 
+			  key: 'name',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Département', 
+			  key: 'department',
+			  filterable: true,
+			  filterType: 'select',
+			  hideMessages: true,
+			  filterOptions: [
+				{ text: 'RH', value: 'RH' },
+				{ text: 'IT', value: 'IT' },
+				{ text: 'Finance', value: 'Finance' },
+				{ text: 'Marketing', value: 'Marketing' },
+			  ]
+			},
+			{ 
+			  title: 'Statut', 
+			  key: 'status',
+			  filterable: true,
+			  filterType: 'select',
+			  hideMessages: true,
+			  filterOptions: [
+				{ text: 'Actif', value: 'Actif' },
+				{ text: 'En congé', value: 'En congé' },
+				{ text: 'Inactif', value: 'Inactif' },
+			  ]
+			}
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value, type } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
+					
+					if (type === 'select') {
+					  return itemValue === value
+					} else {
+					  return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+					}
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+			  { name: 'Jean Dupont', department: 'RH', status: 'Actif' },
+			  { name: 'Marie Martin', department: 'IT', status: 'En congé' },
+			  { name: 'Pierre Durand', department: 'Finance', status: 'Actif' },
+			  { name: 'Sophie Petit', department: 'Marketing', status: 'Actif' },
+			  { name: 'Thomas Leroy', department: 'IT', status: 'Inactif' },
+			  { name: 'Julie Bernard', department: 'RH', status: 'Actif' },
+			  { name: 'Nicolas Moreau', department: 'Finance', status: 'En congé' },
+			  { name: 'Camille Dubois', department: 'Marketing', status: 'Inactif' },
+			  { name: 'Alexandre Lefebvre', department: 'IT', status: 'Actif' },
+			  { name: 'Émilie Girard', department: 'RH', status: 'En congé' },
+			  { name: 'Lucas Roux', department: 'Finance', status: 'Actif' },
+			  { name: 'Chloé Lambert', department: 'Marketing', status: 'Actif' },
+			  { name: 'Maxime Simon', department: 'IT', status: 'Inactif' },
+			  { name: 'Laura Fournier', department: 'RH', status: 'Actif' },
+			  { name: 'Antoine Mercier', department: 'Finance', status: 'En congé' },
+			]
+		  }
+		  
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
 			},
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'name',
@@ -1303,23 +1356,31 @@ export const ServerFilterBySelect: Story = {
 				],
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			page: 1,
 			filters: [],
 		},
-		serverItemsLength: 15,
-		showFilters: true,
-		suffix: 'server-filter-select',
-		density: 'default',
-		striped: false,
+		'serverItemsLength': 15,
+		'showFilters': true,
+		'suffix': 'server-filter-select',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
-				const options = ref(args.options)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const totalFilteredUsers = ref(0)
 				const filteredUsers = ref<Record<string, unknown>[]>([])
 				const state = ref(StateEnum.IDLE)
@@ -1385,9 +1446,9 @@ export const ServerFilterBySelect: Story = {
 
 				return {
 					args,
-					options,
 					filteredUsers,
 					totalFilteredUsers,
+					options,
 					state,
 					fetchData,
 					StateEnum,
@@ -1396,17 +1457,11 @@ export const ServerFilterBySelect: Story = {
 			template: `
 				<div>
 					<SyServerTable
+						v-bind="args"
 						v-model:options="options"
 						:items="filteredUsers"
-						:headers="args.headers"
-						:caption="args.caption"
 						:server-items-length="totalFilteredUsers"
 						:loading="state === StateEnum.PENDING"
-						:show-filters="args.showFilters"
-						:suffix="args.suffix"
-						:density="args.density"
-						:striped="args.striped"
-						:resizable-columns="args.resizableColumns"
 						@update:options="fetchData"
 					/>
 				</div>
@@ -1415,158 +1470,180 @@ export const ServerFilterBySelect: Story = {
 	},
 }
 
-export const ServerFilterByDate: Story = {
+export const ServerFilterBySelectMultiple: Story = {
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <SyServerTable
-            v-model:options="options"
-            :items="filteredUsers"
-            :headers="headers"
-            :server-items-length="totalFilteredUsers"
-            :loading="state === StateEnum.PENDING"
-            suffix="server-filter-date"
-            :show-filters="true"
-            @update:options="fetchData"
-          />
-        </template>
-        `,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-select"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            name: string
-            hireDate: string
-            vacationPeriod: {
-              from: string
-              to: string
-            }
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const totalFilteredUsers = ref(0)
-          const filteredUsers = ref<User[]>([])
-          const state = ref(StateEnum.IDLE)
-
-          const options = ref<DataOptions>({
-            itemsPerPage: 5,
-            page: 1,
-            filters: [],
-          })
-
-          const headers = [
-            { 
-              title: 'Nom', 
-              key: 'name',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Date d'embauche', 
-              key: 'hireDate',
-              filterable: true,
-              filterType: 'date',
-              dateFormat: 'DD/MM/YYYY'
-            },
-            { 
-              title: 'Période de congés', 
-              key: 'vacationPeriod',
-              filterable: true,
-              filterType: 'period',
-              dateFormat: 'DD/MM/YYYY'
-            }
-          ]
-
-          const fetchData = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(options.value)
-            filteredUsers.value = items
-            totalFilteredUsers.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              // Get all users
-              let items: User[] = getUsers()
-              
-              // Apply filters on server side
-              if (filters && filters.length > 0) {
-                filters.forEach((filter: FilterOption) => {
-                  const { key, value, type } = filter
-                  
-                  items = items.filter(item => {
-                    const itemValue = item[key as keyof User]
-                    
-                    if (type === 'date') {
-                      // Simple date comparison for demo purposes
-                      return itemValue === value
-                    } else {
-                      return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
-                    }
-                  })
-                })
-              }
-              
-              const total = items.length
-
-              // Apply sorting
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key as keyof User
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-                  
-                  return String(a[key]) > String(b[key]) ? order : -order
-                })
-              }
-
-              // Apply pagination
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          })
-        }
-        
-        // Update the displayed data
-        users.value = filteredData
-        totalUsers.value = filteredData.length
-
-        state.value = StateEnum.RESOLVED
-      }
-          // Initialize data
-          fetchData()
-        </script>
-        `,
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			name: string
+			department: string
+			status: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Nom', 
+			  key: 'name',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Département', 
+			  key: 'department',
+			  filterable: true,
+			  filterType: 'select',
+			  multiple: true,
+			  chips: true,
+			  hideMessages: true,
+			  filterOptions: [
+				{ text: 'RH', value: 'RH' },
+				{ text: 'IT', value: 'IT' },
+				{ text: 'Finance', value: 'Finance' },
+				{ text: 'Marketing', value: 'Marketing' },
+			  ]
+			},
+			{ 
+			  title: 'Statut', 
+			  key: 'status',
+			  filterable: true,
+			  filterType: 'select',
+			  multiple: true,
+			  chips: true,
+			  hideMessages: true,
+			  filterOptions: [
+				{ text: 'Actif', value: 'Actif' },
+				{ text: 'En congé', value: 'En congé' },
+				{ text: 'Inactif', value: 'Inactif' },
+			  ]
+			}
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value, type } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
+					
+					if (type === 'select') {
+					  return itemValue === value
+					} else {
+					  return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+					}
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+			  { name: 'Jean Dupont', department: 'RH', status: 'Actif' },
+			  { name: 'Marie Martin', department: 'IT', status: 'En congé' },
+			  { name: 'Pierre Durand', department: 'Finance', status: 'Actif' },
+			  { name: 'Sophie Petit', department: 'Marketing', status: 'Actif' },
+			  { name: 'Thomas Leroy', department: 'IT', status: 'Inactif' },
+			  { name: 'Julie Bernard', department: 'RH', status: 'Actif' },
+			  { name: 'Nicolas Moreau', department: 'Finance', status: 'En congé' },
+			  { name: 'Camille Dubois', department: 'Marketing', status: 'Inactif' },
+			  { name: 'Alexandre Lefebvre', department: 'IT', status: 'Actif' },
+			  { name: 'Émilie Girard', department: 'RH', status: 'En congé' },
+			  { name: 'Lucas Roux', department: 'Finance', status: 'Actif' },
+			  { name: 'Chloé Lambert', department: 'Marketing', status: 'Actif' },
+			  { name: 'Maxime Simon', department: 'IT', status: 'Inactif' },
+			  { name: 'Laura Fournier', department: 'RH', status: 'Actif' },
+			  { name: 'Antoine Mercier', department: 'Finance', status: 'En congé' },
+			]
+		  }
+		  
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
 			},
 		],
 	},
 	args: {
-		serverItemsLength: 0,
-		showFilters: true,
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'name',
@@ -1574,81 +1651,362 @@ export const ServerFilterByDate: Story = {
 				filterType: 'text',
 			},
 			{
-				title: 'Date d\'embauche',
-				key: 'hireDate',
+				title: 'Département',
+				key: 'department',
 				filterable: true,
-				filterType: 'date',
-				dateFormat: 'DD/MM/YYYY',
+				filterType: 'select',
+				multiple: true,
+				chips: true,
+				hideMessages: true,
+				filterOptions: [
+					{ text: 'RH', value: 'RH' },
+					{ text: 'IT', value: 'IT' },
+					{ text: 'Finance', value: 'Finance' },
+					{ text: 'Marketing', value: 'Marketing' },
+				],
 			},
 			{
-				title: 'Période de congés',
-				key: 'vacationPeriod',
+				title: 'Statut',
+				key: 'status',
 				filterable: true,
-				filterType: 'period',
-				dateFormat: 'DD/MM/YYYY',
+				filterType: 'select',
+				multiple: true,
+				chips: true,
+				hideMessages: true,
+				filterOptions: [
+					{ text: 'Actif', value: 'Actif' },
+					{ text: 'En congé', value: 'En congé' },
+					{ text: 'Inactif', value: 'Inactif' },
+				],
 			},
 		],
-		caption: '',
-		suffix: 'server-filter-date',
-		density: 'default',
-		striped: false,
+		'caption': '',
+		'options': {
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		},
+		'serverItemsLength': 15,
+		'showFilters': true,
+		'suffix': 'server-filter-select',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
-				// Original data that never changes
-				const originalUsers = [
-					{
-						name: 'Jean-Pierre Dubois',
-						hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
-						vacationPeriod: {
-							from: dayjs('2025-07-01').format('DD/MM/YYYY'),
-							to: dayjs('2025-07-15').format('DD/MM/YYYY'),
-						},
-					},
-					{
-						name: 'Marie-Claire Lefèvre',
-						hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
-						vacationPeriod: {
-							from: dayjs('2025-08-01').format('DD/MM/YYYY'),
-							to: dayjs('2025-08-20').format('DD/MM/YYYY'),
-						},
-					},
-					{
-						name: 'François Moreau',
-						hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
-						vacationPeriod: {
-							from: dayjs('2025-06-15').format('DD/MM/YYYY'),
-							to: dayjs('2025-07-05').format('DD/MM/YYYY'),
-						},
-					},
-					{
-						name: 'Céline Rousseau',
-						hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
-						vacationPeriod: {
-							from: dayjs('2025-12-20').format('DD/MM/YYYY'),
-							to: dayjs('2026-01-05').format('DD/MM/YYYY'),
-						},
-					},
-					{
-						name: 'Thierry Bertrand',
-						hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
-						vacationPeriod: {
-							from: dayjs('2025-09-10').format('DD/MM/YYYY'),
-							to: dayjs('2025-09-25').format('DD/MM/YYYY'),
-						},
-					},
-				]
+				const options = ref({ ...args.options })
 
-				const totalUsers = ref(originalUsers.length)
-				const users = ref([...originalUsers])
-				const options = ref({
-					itemsPerPage: 5,
-					page: 1,
-					filters: [],
-				})
-				const state = ref(StateEnum.IDLE)
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const totalFilteredUsers = ref(0)
+				const filteredUsers = ref<Record<string, unknown>[]>([])
+				const state = ref(StateEnum.IDLE)
+
+				const fetchData = async (): Promise<void> => {
+					state.value = StateEnum.PENDING
+
+					// Simulate API call
+					await new Promise(resolve => setTimeout(resolve, 1000))
+
+					// Get all users
+					let items = [
+						{ name: 'Jean Dupont', department: 'RH', status: 'Actif' },
+						{ name: 'Marie Martin', department: 'IT', status: 'En congé' },
+						{ name: 'Pierre Durand', department: 'Finance', status: 'Actif' },
+						{ name: 'Sophie Petit', department: 'Marketing', status: 'Actif' },
+						{ name: 'Thomas Leroy', department: 'IT', status: 'Inactif' },
+						{ name: 'Julie Bernard', department: 'RH', status: 'Actif' },
+						{ name: 'Nicolas Moreau', department: 'Finance', status: 'En congé' },
+						{ name: 'Camille Dubois', department: 'Marketing', status: 'Inactif' },
+						{ name: 'Alexandre Lefebvre', department: 'IT', status: 'Actif' },
+						{ name: 'Émilie Girard', department: 'RH', status: 'En congé' },
+						{ name: 'Lucas Roux', department: 'Finance', status: 'Actif' },
+						{ name: 'Chloé Lambert', department: 'Marketing', status: 'Actif' },
+						{ name: 'Maxime Simon', department: 'IT', status: 'Inactif' },
+						{ name: 'Laura Fournier', department: 'RH', status: 'Actif' },
+						{ name: 'Antoine Mercier', department: 'Finance', status: 'En congé' },
+					]
+
+					// Apply filters on server side
+					if (options.value?.filters && options.value.filters.length > 0) {
+						options.value.filters.forEach((filter) => {
+							const { key, value, type } = filter
+
+							items = items.filter((item) => {
+								const itemValue = item[key]
+
+								if (type === 'select') {
+									if (Array.isArray(value)) {
+										// Empty array means no filter applied
+										if (value.length === 0) return true
+										// Check if item value is in the selected values
+										return value.includes(itemValue)
+									}
+									else {
+										return itemValue === value
+									}
+								}
+								else {
+									return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+								}
+							})
+						})
+					}
+
+					const total = items.length
+
+					// Apply pagination
+					const { page = 1, itemsPerPage = 10 } = options.value || {}
+					if (itemsPerPage > 0) {
+						items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+					}
+
+					filteredUsers.value = items as Record<string, unknown>[]
+					totalFilteredUsers.value = total
+					state.value = StateEnum.RESOLVED
+				}
+
+				// Initialize data
+				fetchData()
+
+				return {
+					args,
+					filteredUsers,
+					totalFilteredUsers,
+					options,
+					state,
+					fetchData,
+					StateEnum,
+				}
+			},
+			template: `
+				<div>
+					<SyServerTable
+						v-bind="args"
+						v-model:options="options"
+						:items="filteredUsers"
+						:server-items-length="totalFilteredUsers"
+						:loading="state === StateEnum.PENDING"
+						@update:options="fetchData"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const ServerFilterByExacteDate: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-date"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
+			},
+			{
+				name: 'Script',
+				code: `
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			name: string
+			hireDate: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Nom', 
+			  key: 'name',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Date d'embauche', 
+			  key: 'hireDate',
+			  filterable: true,
+			  filterType: 'date',
+			  dateFormat: 'DD/MM/YYYY'
+			},
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value, type } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
+					
+					if (type === 'date') {
+					  // Simple date comparison for demo purposes
+					  return itemValue === value
+					} else {
+					  return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+					}
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  })
+		}
+		
+		// Update the displayed data
+		users.value = filteredData
+		totalUsers.value = filteredData.length
+
+		state.value = StateEnum.RESOLVED
+	  }
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
+			},
+		],
+	},
+	args: {
+		'serverItemsLength': 5,
+		'showFilters': true,
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'name',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Date d\'embauche',
+				key: 'hireDate',
+				filterable: true,
+				filterType: 'date',
+				dateFormat: 'DD/MM/YYYY',
+			},
+		],
+		'options': {
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		},
+		'caption': '',
+		'suffix': 'server-filter-date',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render(args) {
+		return {
+			components: { SyServerTable },
+			setup() {
+				// Original data that never changes
+				const originalUsers = [
+					{
+						name: 'Jean-Pierre Dubois',
+						hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'Marie-Claire Lefèvre',
+						hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'François Moreau',
+						hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'Céline Rousseau',
+						hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'Thierry Bertrand',
+						hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
+					},
+				]
+
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const totalUsers = ref(originalUsers.length)
+				const users = ref([...originalUsers])
+				const state = ref(StateEnum.IDLE)
 
 				const fetchData = async () => {
 					state.value = StateEnum.PENDING
@@ -1673,20 +2031,20 @@ export const ServerFilterByDate: Story = {
 									return itemValue === value
 								}
 								else if (type === 'period') {
-									// Handle period filter type
-									const period = itemValue as { from: string, to: string }
-									const filterPeriod = value as { from: string, to: string }
-
-									// Simple period comparison for demo purposes
-									if (filterPeriod.from && !filterPeriod.to) {
-										return period.from === filterPeriod.from
-									}
-									else if (!filterPeriod.from && filterPeriod.to) {
-										return period.to === filterPeriod.to
-									}
-									else if (filterPeriod.from && filterPeriod.to) {
-										return period.from === filterPeriod.from && period.to === filterPeriod.to
+									const filter = value as { from: string, to: string }
+									const start = new Date(filter.from)
+									const end = new Date(filter.to)
+									const itemDate = new Date(itemValue)
+
+									if (itemDate) {
+										if (end && itemDate < end) {
+											return false
+										}
+										if (start && itemDate > start) {
+											return false
+										}
 									}
+
 									return true
 								}
 								else {
@@ -1703,6 +2061,9 @@ export const ServerFilterByDate: Story = {
 					state.value = StateEnum.RESOLVED
 				}
 
+				// Initialize data
+				fetchData()
+
 				return {
 					args,
 					users,
@@ -1716,17 +2077,11 @@ export const ServerFilterByDate: Story = {
 			template: `
 				<div>
 					<SyServerTable
+						v-bind="args"
 						v-model:options="options"
 						:items="users"
-						:headers="args.headers"
-						:caption="args.caption"
 						:server-items-length="totalUsers"
 						:loading="state === StateEnum.PENDING"
-						:resizable-columns="args.resizableColumns"
-						:show-filters="true"
-						:suffix="args.suffix"
-						:density="args.density"
-						:striped="args.striped"
 						@update:options="fetchData"
 					/>
 				</div>
@@ -1735,71 +2090,376 @@ export const ServerFilterByDate: Story = {
 	},
 }
 
-export const CustomFilterSlot: Story = {
+export const ServerFilterByPeriod: Story = {
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<SyServerTable
-						v-model:options="options"
-						:headers="headers"
-						:items="items"
-						:server-items-length="serverItemsLength"
-						:loading="loading"
-						show-filters
-						suffix="server-custom-filter-slot"
-						@update:options="fetchData"
-					>
-						<template #filter.custom="{ header, value, updateFilter }">
-							<div class="custom-filter-container">
-								<div class="custom-filter-info mb-2">
-									Filtre personnalisé :
-								</div>
-								<v-select
-									v-model="customFilterValue"
-									:items="statusOptions"
-									label="Statut"
-									variant="outlined"
-									density="compact"
-									color="primary"
-									bg-color="white"
-									@update:model-value="(val) => {
-										// Utiliser la fonction updateFilter fournie par le slot
-										updateFilter(val)
-									}"
-								/>
-							</div>
-						</template>
-					</SyServerTable>
-				</template>
-				`,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-date"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ref } from 'vue'
-					import { SyServerTable } from '@cnamts/synapse'
-					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-					import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
-					
-					const options = ref<Partial<DataOptions>>({
-						itemsPerPage: 4,
-						filters: []
-					})
-					
-					const customFilterValue = ref('')
-					const statusOptions = ['Actif', 'Inactif', 'En attente']
-					const loading = ref(false)
-					const serverItemsLength = ref(6)
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			name: string
+			hireDate: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Nom', 
+			  key: 'name',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Date d'embauche', 
+			  key: 'hireDate',
+			  filterable: true,
+			  filterType: 'periode',
+			  dateFormat: 'DD/MM/YYYY'
+			},
+		  ]
+
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value, type } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
 					
-					const headers = [
-						{
-							title: 'Nom',
-							key: 'lastname',
-							filterable: true,
+					if (type === 'period') {
+						function formatDate(date: string): Date | null {
+							if (!date) return null
+							const parsedDate = dayjs(date, 'DD/MM/YYYY')
+							return parsedDate.isValid() ? parsedDate.toDate() : null
+						}
+						const filter = value as { from: string, to: string }
+						const start = formatDate(filter.from)
+						const end = formatDate(filter.to)
+						const itemDate = formatDate(itemValue)
+
+						if (itemDate) {
+							if (end && itemDate > end) {
+								return false
+							}
+							if (start && itemDate < start) {
+								return false
+							}
+						}
+						return true
+					} else {
+					  return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+					}
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  })
+		}
+		
+		// Update the displayed data
+		users.value = filteredData
+		totalUsers.value = filteredData.length
+
+		state.value = StateEnum.RESOLVED
+	  }
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
+			},
+		],
+	},
+	args: {
+		'serverItemsLength': 5,
+		'showFilters': true,
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'name',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Date d\'embauche',
+				key: 'hireDate',
+				filterable: true,
+				filterType: 'period',
+				dateFormat: 'DD/MM/YYYY',
+			},
+		],
+		'options': {
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		},
+		'caption': '',
+		'suffix': 'server-filter-date',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render(args) {
+		return {
+			components: { SyServerTable },
+			setup() {
+				// Original data that never changes
+				const originalUsers = [
+					{
+						name: 'Jean-Pierre Dubois',
+						hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'Marie-Claire Lefèvre',
+						hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'François Moreau',
+						hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'Céline Rousseau',
+						hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
+					},
+					{
+						name: 'Thierry Bertrand',
+						hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
+					},
+				]
+
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const totalUsers = ref(originalUsers.length)
+				const users = ref([...originalUsers])
+				const state = ref(StateEnum.IDLE)
+
+				const fetchData = async () => {
+					state.value = StateEnum.PENDING
+
+					// Simulate API delay
+					await new Promise(resolve => setTimeout(resolve, 1000))
+
+					// Start with original data
+					let filteredData = [...originalUsers]
+
+					// Apply filters if any
+					if (options.value.filters && options.value.filters.length > 0) {
+						filteredData = filteredData.filter((user) => {
+							return options.value.filters!.every((filter) => {
+								const { key, value, type } = filter
+								const itemValue = user[key as keyof typeof user]
+
+								if (!value) return true
+
+								else if (type === 'period') {
+									function formatDate(date: string): Date | null {
+										if (!date) return null
+										const parsedDate = dayjs(date, 'DD/MM/YYYY')
+										return parsedDate.isValid() ? parsedDate.toDate() : null
+									}
+									const filter = value as { from: string, to: string }
+									const start = formatDate(filter.from)
+									const end = formatDate(filter.to)
+									const itemDate = formatDate(itemValue)
+
+									if (itemDate) {
+										if (end && itemDate > end) {
+											return false
+										}
+										if (start && itemDate < start) {
+											return false
+										}
+									}
+									return true
+								}
+								else {
+									return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+								}
+							})
+						})
+					}
+
+					// Update the displayed data
+					users.value = filteredData
+					totalUsers.value = filteredData.length
+
+					state.value = StateEnum.RESOLVED
+				}
+
+				// Initialize data
+				fetchData()
+
+				return {
+					args,
+					users,
+					totalUsers,
+					options,
+					state,
+					fetchData,
+					StateEnum,
+				}
+			},
+			template: `
+				<div>
+					<SyServerTable
+						v-bind="args"
+						v-model:options="options"
+						:items="users"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						@update:options="fetchData"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const CustomFilterSlot: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						:server-items-length="serverItemsLength"
+						:loading="loading"
+						show-filters
+						suffix="server-custom-filter-slot"
+						@update:options="fetchData"
+					>
+						<template #filter.custom="{ header, value, updateFilter }">
+							<div class="custom-filter-container">
+								<div class="custom-filter-info mb-2">
+									Filtre personnalisé :
+								</div>
+								<v-select
+									v-model="customFilterValue"
+									:items="statusOptions"
+									label="Statut"
+									variant="outlined"
+									density="compact"
+									color="primary"
+									bg-color="white"
+									@update:model-value="(val) => {
+										// Utiliser la fonction updateFilter fournie par le slot
+										updateFilter(val)
+									}"
+								/>
+							</div>
+						</template>
+					</SyServerTable>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref, watch } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+					import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+					
+					const options = ref<Partial<DataOptions>>({
+						itemsPerPage: 4,
+						filters: []
+					})
+					
+					const customFilterValue = ref('')
+					const statusOptions = ['Actif', 'Inactif', 'En attente']
+					const loading = ref(false)
+					const serverItemsLength = ref(6)
+					
+					const headers = [
+						{
+							title: 'Nom',
+							key: 'lastname',
+							filterable: true,
 							filterType: 'text'
 						},
 						{
@@ -1916,8 +2576,8 @@ export const CustomFilterSlot: Story = {
 		],
 	},
 	args: {
-		serverItemsLength: 6,
-		headers: [
+		'serverItemsLength': 6,
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'lastname',
@@ -1937,7 +2597,7 @@ export const CustomFilterSlot: Story = {
 				filterType: 'custom' as FilterType,
 			},
 		],
-		items: [
+		'items': [
 			{
 				firstname: 'Virginie',
 				lastname: 'Beauchesne',
@@ -1969,22 +2629,31 @@ export const CustomFilterSlot: Story = {
 				status: 'En attente',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 4,
+			page: 1,
 			filters: [],
 		},
-		showFilters: true,
-		suffix: 'server-custom-filter-slot',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'server-custom-filter-slot',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
 				// Create reactive references
-				const options = ref(args.options)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const items = ref(args.items)
 				const customFilterValue = ref('')
 				const statusOptions = ['Actif', 'Inactif', 'En attente']
@@ -2031,6 +2700,35 @@ export const CustomFilterSlot: Story = {
 					loading.value = false
 				}
 
+				function handleFilterChange(val) {
+					// Ensure options.value.filters is initialized
+					if (!options.value.filters) {
+						options.value.filters = []
+					}
+
+					// Create a new filters array with proper typing
+					const currentFilters = options.value.filters as import('../common/types').FilterOption[]
+					const newFilters = [...currentFilters].filter(f => f.key !== 'status')
+
+					// Add the new filter if a value is selected
+					if (val) {
+						newFilters.push({
+							key: 'status',
+							value: val,
+							type: 'select' as FilterType, // Use 'select' type for compatibility with filtering logic
+						})
+					}
+
+					// Update the options with the new filters
+					options.value = {
+						...options.value,
+						filters: newFilters,
+					}
+				}
+
+				// Initialize data
+				fetchData()
+
 				return {
 					args,
 					options,
@@ -2039,22 +2737,17 @@ export const CustomFilterSlot: Story = {
 					statusOptions,
 					loading,
 					serverItemsLength,
+					handleFilterChange,
 					fetchData,
 				}
 			},
 			template: `
 				<SyServerTable
+					v-bind="args"
 					v-model:options="options"
-					:headers="args.headers"
 					:items="items"
-					:caption="args.caption"
 					:server-items-length="serverItemsLength"
 					:loading="loading"
-					:show-filters="args.showFilters"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
 					@update:options="fetchData"
 				>
 					<template #filter.custom="{ header, value, updateFilter }">
@@ -2071,8 +2764,10 @@ export const CustomFilterSlot: Story = {
 								color="primary"
 								bg-color="white"
 								@update:model-value="(val) => {
-									// Utiliser la fonction updateFilter fournie par le slot
-									updateFilter(val)
+									// Use updateFilter provided by the slot props
+									updateFilter(val);
+									// Also update our local state
+									handleFilterChange(val);
 								}"
 							/>
 						</div>
@@ -2089,73 +2784,73 @@ export const CustomFilterInputs: Story = {
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <SyServerTable
-            v-model:options="options"
-            :items="filteredUsers"
-            :headers="headers"
-            :server-items-length="totalFilteredUsers"
-            :filter-input-config="filterInputConfig"
-            :loading="state === StateEnum.PENDING"
-            suffix="server-filter-text"
-            :show-filters="true"
-            @update:options="fetchData"
-          />
-        </template>
-        `,
+		<template>
+		  <SyServerTable
+			v-model:options="options"
+			:items="filteredUsers"
+			:headers="headers"
+			:server-items-length="totalFilteredUsers"
+			:filter-input-config="filterInputConfig"
+			:loading="state === StateEnum.PENDING"
+			suffix="server-filter-text"
+			:show-filters="true"
+			@update:options="fetchData"
+		  />
+		</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            firstname: string
-            lastname: string
-            email: string
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const totalFilteredUsers = ref(0)
-          const filteredUsers = ref<User[]>([])
-          const state = ref(StateEnum.IDLE)
-
-          const options = ref<DataOptions>({
-            itemsPerPage: 5,
-            page: 1,
-            filters: [],
-          })
-
-          const headers = [
-            { 
-              title: 'Prénom', 
-              key: 'firstname',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Nom', 
-              key: 'lastname',
-              filterable: true,
-              filterType: 'text'
-            },
-            { 
-              title: 'Email', 
-              key: 'email',
-              filterable: true,
-              filterType: 'text'
-            }
-          ]
-          
-          const filterInputConfig = {
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions, FilterOption } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			firstname: string
+			lastname: string
+			email: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const totalFilteredUsers = ref(0)
+		  const filteredUsers = ref<User[]>([])
+		  const state = ref(StateEnum.IDLE)
+
+		  const options = ref<DataOptions>({
+			itemsPerPage: 5,
+			page: 1,
+			filters: [],
+		  })
+
+		  const headers = [
+			{ 
+			  title: 'Prénom', 
+			  key: 'firstname',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Nom', 
+			  key: 'lastname',
+			  filterable: true,
+			  filterType: 'text'
+			},
+			{ 
+			  title: 'Email', 
+			  key: 'email',
+			  filterable: true,
+			  filterType: 'text'
+			}
+		  ]
+		  
+		  const filterInputConfig = {
 			filterInputConfig: {
 			variant: 'outlined',
 			density: 'comfortable',
@@ -2165,88 +2860,88 @@ export const CustomFilterInputs: Story = {
 			},
 		  }
 
-          const fetchData = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(options.value)
-            filteredUsers.value = items
-            totalFilteredUsers.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              // Get all users
-              let items: User[] = getUsers()
-              
-              // Apply filters on server side
-              if (filters && filters.length > 0) {
-                filters.forEach((filter: FilterOption) => {
-                  const { key, value } = filter
-                  
-                  items = items.filter(item => {
-                    const itemValue = item[key as keyof User]
-                    return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
-                  })
-                })
-              }
-              
-              const total = items.length
-
-              // Apply sorting
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key as keyof User
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-                  
-                  return String(a[key]) > String(b[key]) ? order : -order
-                })
-              }
-
-              // Apply pagination
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          }
-
-          const getUsers = (): User[] => {
-            return [
-              { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
-              { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
-              { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
-              { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
-              { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
-              { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
-              { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
-              { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
-              { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
-              { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
-              { firstname: 'Martin', lastname: 'Lavoie', email: 'martin.lavoie@example.com' },
-              { firstname: 'Céline', lastname: 'Tremblay', email: 'celine.tremblay@example.com' },
-              { firstname: 'Jacques', lastname: 'Gagnon', email: 'jacques.gagnon@example.com' },
-              { firstname: 'Isabelle', lastname: 'Côté', email: 'isabelle.cote@example.com' },
-              { firstname: 'Philippe', lastname: 'Bouchard', email: 'philippe.bouchard@example.com' },
-            ]
-          }
-          
-          // Initialize data
-          fetchData()
-        </script>
-        `,
+		  const fetchData = async (): Promise<void> => {
+			const { items, total } = await getDataFromApi(options.value)
+			filteredUsers.value = items
+			totalFilteredUsers.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  // Get all users
+			  let items: User[] = getUsers()
+			  
+			  // Apply filters on server side
+			  if (filters && filters.length > 0) {
+				filters.forEach((filter: FilterOption) => {
+				  const { key, value } = filter
+				  
+				  items = items.filter(item => {
+					const itemValue = item[key as keyof User]
+					return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+				  })
+				})
+			  }
+			  
+			  const total = items.length
+
+			  // Apply sorting
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key as keyof User
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+				  
+				  return String(a[key]) > String(b[key]) ? order : -order
+				})
+			  }
+
+			  // Apply pagination
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+			  { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+			  { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+			  { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+			  { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+			  { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+			  { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+			  { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+			  { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+			  { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+			  { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+			  { firstname: 'Martin', lastname: 'Lavoie', email: 'martin.lavoie@example.com' },
+			  { firstname: 'Céline', lastname: 'Tremblay', email: 'celine.tremblay@example.com' },
+			  { firstname: 'Jacques', lastname: 'Gagnon', email: 'jacques.gagnon@example.com' },
+			  { firstname: 'Isabelle', lastname: 'Côté', email: 'isabelle.cote@example.com' },
+			  { firstname: 'Philippe', lastname: 'Bouchard', email: 'philippe.bouchard@example.com' },
+			]
+		  }
+		  
+		  // Initialize data
+		  fetchData()
+		</script>
+		`,
 			},
 		],
 	},
 	args: {
-		serverItemsLength: 15,
-		headers: [
+		'serverItemsLength': 15,
+		'headers': [
 			{
 				title: 'Prénom',
 				key: 'firstname',
@@ -2266,29 +2961,37 @@ export const CustomFilterInputs: Story = {
 				filterType: 'text',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			page: 1,
 			filters: [],
 		},
-		filterInputConfig: {
+		'filterInputConfig': {
 			variant: 'outlined',
 			density: 'comfortable',
 			hideDetails: true,
 			clearable: false,
 			disableErrorHandling: true,
 		},
-		showFilters: true,
-		suffix: 'server-filter-text',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'server-filter-text',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
 	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
-				const options = ref(args.options)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const totalFilteredUsers = ref(0)
 				const filteredUsers = ref<Record<string, unknown>[]>([])
 				const state = ref(StateEnum.IDLE)
@@ -2299,8 +3002,817 @@ export const CustomFilterInputs: Story = {
 					// Simulate API call
 					await new Promise(resolve => setTimeout(resolve, 1000))
 
-					// Get all users
-					let items = [
+					// Get all users
+					let items = [
+						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+						{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+						{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+						{ firstname: 'Martin', lastname: 'Lavoie', email: 'martin.lavoie@example.com' },
+						{ firstname: 'Céline', lastname: 'Tremblay', email: 'celine.tremblay@example.com' },
+						{ firstname: 'Jacques', lastname: 'Gagnon', email: 'jacques.gagnon@example.com' },
+						{ firstname: 'Isabelle', lastname: 'Côté', email: 'isabelle.cote@example.com' },
+						{ firstname: 'Philippe', lastname: 'Bouchard', email: 'philippe.bouchard@example.com' },
+					]
+
+					// Apply filters on server side
+					if (options.value?.filters && options.value.filters.length > 0) {
+						options.value.filters.forEach((filter) => {
+							const { key, value } = filter
+
+							items = items.filter((item) => {
+								const itemValue = item[key]
+								return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+							})
+						})
+					}
+
+					const total = items.length
+
+					// Apply pagination
+					const { page = 1, itemsPerPage = 10 } = options.value || {}
+					if (itemsPerPage > 0) {
+						items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+					}
+
+					filteredUsers.value = items as Record<string, unknown>[]
+					totalFilteredUsers.value = total
+					state.value = StateEnum.RESOLVED
+				}
+
+				// Initialize data
+				fetchData()
+
+				return {
+					args,
+					filteredUsers,
+					totalFilteredUsers,
+					options,
+					state,
+					fetchData,
+					StateEnum,
+				}
+			},
+			template: `
+				<div>
+					<SyServerTable
+						v-bind="args"
+						v-model:options="options"
+						:items="filteredUsers"
+						:server-items-length="totalFilteredUsers"
+						:loading="state === StateEnum.PENDING"
+						@update:options="fetchData"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const ManyServerTables: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+		<template>
+		  <div>
+			<SyServerTable
+			  v-model:options="optionsTable1"
+			  :items="usersTable1"
+			  :headers="headers"
+			  :server-items-length="totalUsersTable1"
+			  :loading="stateTable1 === StateEnum.PENDING"
+			  suffix="table1"
+			  @update:options="fetchDataTable1"
+			/>
+			<SyServerTable
+			  v-model:options="optionsTable2"
+			  :items="usersTable2"
+			  :headers="headers"
+			  :server-items-length="totalUsersTable2"
+			  :loading="stateTable2 === StateEnum.PENDING"
+			  suffix="table2"
+			  @update:options="fetchDataTable2"
+			/>
+		  </div>
+		</template>
+		`,
+			},
+			{
+				name: 'Script',
+				code: `
+		<script setup lang="ts">
+		  import { ref } from 'vue'
+		  import { SyServerTable } from '@cnamts/synapse'
+		  import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+		  import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+
+		  interface User {
+			[key: string]: string
+			firstname: string
+			lastname: string
+			email: string
+		  }
+
+		  interface DataObj {
+			items: User[]
+			total: number
+		  }
+
+		  const headers = [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		  ]
+
+		  // Table 1
+		  const totalUsersTable1 = ref(0)
+		  const usersTable1 = ref<User[]>([])
+		  const stateTable1 = ref(StateEnum.IDLE)
+		  const optionsTable1 = ref<DataOptions>({
+			itemsPerPage: 5,
+			sortBy: [{ key: 'lastname', order: 'asc' }],
+			page: 1,
+		  })
+
+		  const fetchDataTable1 = async (options?: DataOptions): Promise<void> => {
+			const optionsToUse = options || optionsTable1.value
+			const { items, total } = await getDataFromApi(optionsToUse)
+			usersTable1.value = items
+			totalUsersTable1.value = total
+		  }
+
+		  // Table 2
+		  const totalUsersTable2 = ref(0)
+		  const usersTable2 = ref<User[]>([])
+		  const stateTable2 = ref(StateEnum.IDLE)
+		  const optionsTable2 = ref<DataOptions>({
+			itemsPerPage: 3,
+			sortBy: [{ key: 'firstname', order: 'asc' }],
+			page: 1,
+		  })
+
+		  const fetchDataTable2 = async (options?: DataOptions): Promise<void> => {
+			const optionsToUse = options || optionsTable2.value
+			const { items, total } = await getDataFromApi(optionsToUse)
+			usersTable2.value = items
+			totalUsersTable2.value = total
+		  }
+
+		  const wait = async (ms: number) => {
+			return new Promise(resolve => setTimeout(resolve, ms))
+		  }
+
+		  const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+			const state = sortBy[0].key === 'lastname' ? stateTable1 : stateTable2
+			state.value = StateEnum.PENDING
+			await wait(1000)
+
+			return new Promise((resolve) => {
+			  let items: User[] = getUsers()
+			  const total = items.length
+
+			  if (sortBy && sortBy.length > 0) {
+				items = items.sort((a, b) => {
+				  const key = sortBy[0].key
+				  const order = sortBy[0].order === 'asc' ? 1 : -1
+
+				  return a[key] > b[key] ? order : -order
+				})
+			  }
+
+			  if (itemsPerPage > 0) {
+				items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+			  }
+
+			  resolve({ items, total })
+			  state.value = StateEnum.RESOLVED
+			})
+		  }
+
+		  const getUsers = (): User[] => {
+			return [
+			  { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+			  { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+			  { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+			  { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+			  { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+			  { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+			  { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+			  { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+			  { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+			  { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+			]
+		  }
+          
+          fetchDataTable1()
+          fetchDataTable2()
+		</script>
+		`,
+			},
+		],
+	},
+	args: {
+		'serverItemsLength': 15, // Add required serverItemsLength property
+		'headers': [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		],
+		'caption': '',
+		'suffix': 'multi',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				// Table 1
+				const totalUsersTable1 = ref(0)
+				const usersTable1 = ref<User[]>([])
+				const stateTable1 = ref(StateEnum.IDLE)
+
+				const optionsTable1 = ref<Partial<DataOptions>>({
+					itemsPerPage: 5,
+					sortBy: [{ key: 'lastname', order: 'asc' }],
+					page: 1,
+				})
+
+				const fetchDataTable1 = async (options?: DataOptions): Promise<void> => {
+					const optionsToUse = options || optionsTable1.value as DataOptions
+					const { items, total } = await getDataFromApi(optionsToUse)
+					usersTable1.value = items
+					totalUsersTable1.value = total
+				}
+
+				// Table 2
+				const totalUsersTable2 = ref(0)
+				const usersTable2 = ref<User[]>([])
+				const stateTable2 = ref(StateEnum.IDLE)
+
+				const optionsTable2 = ref<Partial<DataOptions>>({
+					itemsPerPage: 3,
+					sortBy: [{ key: 'firstname', order: 'asc' }],
+					page: 1,
+				})
+
+				const fetchDataTable2 = async (options?: DataOptions): Promise<void> => {
+					const optionsToUse = options || optionsTable2.value as DataOptions
+					const { items, total } = await getDataFromApi(optionsToUse)
+					usersTable2.value = items
+					totalUsersTable2.value = total
+				}
+
+				const wait = async (ms: number) => {
+					return new Promise(resolve => setTimeout(resolve, ms))
+				}
+
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+					const state = sortBy[0].key === 'lastname' ? stateTable1 : stateTable2
+					state.value = StateEnum.PENDING
+					await wait(1000)
+
+					return new Promise((resolve) => {
+						let items: User[] = getUsers()
+						const total = items.length
+
+						if (sortBy && sortBy.length > 0) {
+							items = items.sort((a, b) => {
+								const key = sortBy[0].key
+								const order = sortBy[0].order === 'asc' ? 1 : -1
+
+								return a[key] > b[key] ? order : -order
+							})
+						}
+
+						if (itemsPerPage > 0) {
+							items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+						}
+
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = (): User[] => {
+					return [
+						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+						{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+						{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+					]
+				}
+
+				// Chargement initial des données
+				fetchDataTable1()
+				fetchDataTable2()
+
+				return {
+					args,
+					usersTable1,
+					totalUsersTable1,
+					optionsTable1,
+					stateTable1,
+					fetchDataTable1,
+					usersTable2,
+					totalUsersTable2,
+					optionsTable2,
+					stateTable2,
+					fetchDataTable2,
+					StateEnum,
+				}
+			},
+			template: `
+	  <div>
+		<SyServerTable
+		  v-bind="args"
+		  v-model:options="optionsTable1"
+		  :items="usersTable1"
+		  :server-items-length="totalUsersTable1"
+		  :loading="stateTable1 === StateEnum.PENDING"
+		  suffix="table1"
+		  class="mb-10"
+		  @update:options="fetchDataTable1"
+		/>
+		<SyServerTable
+		  v-bind="args"
+		  v-model:options="optionsTable2"
+		  :items="usersTable2"
+		  :server-items-length="totalUsersTable2"
+		  :loading="stateTable2 === StateEnum.PENDING"
+		  suffix="table2"
+		  @update:options="fetchDataTable2"
+		/>
+	  </div>
+	  `,
+		}
+	},
+}
+
+export const DataAlignment: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="server-resizable-columns"
+						@update:options="fetchData"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref, watch } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+					import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+
+					const totalUsers = ref(0)
+					const users = ref<User[]>([])
+					const state = ref(StateEnum.IDLE)
+				
+					const options = ref({
+						itemsPerPage: 5,
+						sortBy: [{ key: 'lastname', order: 'asc' }],
+						page: 1,
+					})
+				
+					const headers = [
+						{
+							title: 'ID',
+							key: 'id',
+							align: 'center',
+						},
+						{
+							title: 'Nom',
+							key: 'lastname',
+							align: 'start',
+						},
+						{
+							title: 'Date de naissance',
+							key: 'birthdate',
+							align: 'center',
+						},
+						{
+							title: 'NIR',
+							key: 'nir',
+							align: 'end',
+						},
+					]
+				
+					const fetchData = async (): Promise<void> => {
+						const { items, total } = await getDataFromApi(options.value)
+						users.value = items
+						totalUsers.value = total
+					}
+				
+					const wait = async (ms: number) => {
+						return new Promise(resolve => setTimeout(resolve, ms))
+					}
+				
+					const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions) => {
+						state.value = StateEnum.PENDING
+						await wait(1000)
+				
+						return new Promise((resolve) => {
+							let items: User[] = getUsers()
+							const total = items.length
+				
+							if (sortBy && sortBy.length > 0) {
+								items = items.sort((a, b) => {
+									const key = sortBy[0].key
+									const order = sortBy[0].order === 'asc' ? 1 : -1
+				
+									return a[key] > b[key] ? order : -order
+								})
+							}
+				
+							if (itemsPerPage > 0) {
+								items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							}
+				
+							resolve({ items, total })
+							state.value = StateEnum.RESOLVED
+						})
+					}
+				
+					const getUsers = () => {
+						return [
+							{
+								id: '1',
+								lastname: 'Lefebvre',
+								birthdate: '18/02/1989',
+								nir: '1 89 02 75 120 005 79',
+							},
+							{
+								id: '2',
+								lastname: 'Richard',
+								birthdate: '22/05/1991',
+								nir: '2 91 05 75 120 005 76',
+							},
+							{
+								id: '3',
+								lastname: 'Fournier',
+								birthdate: '11/11/2000',
+								nir: '2 00 11 42 120 008 87',
+							},
+						]
+					}
+                    
+                    fetchData()
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'options': {
+			itemsPerPage: 5,
+			sortBy: [{ key: 'lastname', order: 'asc' }],
+			page: 1,
+		},
+		'headers': [
+			{
+				title: 'ID',
+				key: 'id',
+				align: 'center',
+			},
+			{
+				title: 'Nom',
+				key: 'lastname',
+				align: 'start',
+			},
+			{
+				title: 'Date de naissance',
+				key: 'birthdate',
+				align: 'center',
+			},
+			{
+				title: 'NIR',
+				key: 'nir',
+				align: 'end',
+			},
+		],
+		'caption': '',
+		'serverItemsLength': 3,
+		'suffix': 'server-resizable-columns',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const state = ref(StateEnum.IDLE)
+
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const fetchData = async (): Promise<void> => {
+					// @ts-expect-error - fetchData is not defined
+					const { items, total } = await getDataFromApi(options.value)
+					users.value = items
+					totalUsers.value = total
+				}
+
+				const wait = async (ms: number) => {
+					return new Promise(resolve => setTimeout(resolve, ms))
+				}
+
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions) => {
+					state.value = StateEnum.PENDING
+					await wait(1000)
+
+					return new Promise((resolve) => {
+						let items = getUsers()
+						const total = items.length
+
+						if (sortBy && sortBy.length > 0) {
+							items = items.sort((a, b) => {
+								const key = sortBy[0].key
+								const order = sortBy[0].order === 'asc' ? 1 : -1
+
+								return a[key] > b[key] ? order : -order
+							})
+						}
+
+						if (itemsPerPage > 0) {
+							items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+						}
+
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = () => {
+					return [
+						{
+							id: '1',
+							lastname: 'Lefebvre',
+							birthdate: '18/02/1989',
+							nir: '1 89 02 75 120 005 79',
+						},
+						{
+							id: '2',
+							lastname: 'Richard',
+							birthdate: '22/05/1991',
+							nir: '2 91 05 75 120 005 76',
+						},
+						{
+							id: '3',
+							lastname: 'Fournier',
+							birthdate: '11/11/2000',
+							nir: '2 00 11 42 120 008 87',
+						},
+					]
+				}
+
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
+			},
+			template: `
+				<SyServerTable
+					v-bind="args"
+					v-model:options="options"
+					:items="users"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					suffix="server-data-alignment"
+					@update:options="[fetchData, args['onUpdate:options']]"
+				/>
+			`,
+		}
+	},
+}
+
+export const ResizableColumns: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						:resizable-columns="true"
+						suffix="server-resizable-columns"
+						@update:options="fetchData"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref, watch } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+					import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+					
+					interface User {
+						[key: string]: string
+						firstname: string
+						lastname: string
+						email: string
+					}
+				
+					interface DataObj {
+						items: User[]
+						total: number
+					}
+				
+					const totalUsers = ref(0)
+					const users = ref<User[]>([])
+					const state = ref(StateEnum.IDLE)
+				
+					const options = ref({
+						itemsPerPage: 5,
+						sortBy: [{ key: 'lastname', order: 'asc' }],
+						page: 1,
+					})
+				
+					const headers = [
+						{ title: 'Nom', key: 'lastname' },
+						{ title: 'Prénom', key: 'firstname' },
+						{ title: 'Email', key: 'email' },
+					]
+				
+					const fetchData = async (): Promise<void> => {
+						const { items, total } = await getDataFromApi(options.value)
+						users.value = items
+						totalUsers.value = total
+					}
+				
+					const wait = async (ms: number) => {
+						return new Promise(resolve => setTimeout(resolve, ms))
+					}
+				
+					const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+						state.value = StateEnum.PENDING
+						await wait(1000)
+				
+						return new Promise((resolve) => {
+							let items: User[] = getUsers()
+							const total = items.length
+				
+							if (sortBy && sortBy.length > 0) {
+								items = items.sort((a, b) => {
+									const key = sortBy[0].key
+									const order = sortBy[0].order === 'asc' ? 1 : -1
+				
+									return a[key] > b[key] ? order : -order
+								})
+							}
+				
+							if (itemsPerPage > 0) {
+								items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							}
+				
+							resolve({ items, total })
+							state.value = StateEnum.RESOLVED
+						})
+					}
+				
+					const getUsers = (): User[] => {
+						return [
+							{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+							{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+							{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+							{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+							{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+							{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+							{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+							{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+							{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+							{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+							{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+							{ firstname: 'Jacques', lastname: 'Demers', email: 'jacques.demers@example.com' },
+							{ firstname: 'Aimée', lastname: 'Josseaume', email: 'aimee.josseaume@example.com' },
+							{ firstname: 'Delphine', lastname: 'Robillard', email: 'delphine.robillard@example.com' },
+							{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
+						]
+					}
+                    
+                    fetchData()
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'options': {
+			itemsPerPage: 5,
+			sortBy: [{ key: 'lastname', order: 'asc' }],
+			page: 1,
+		},
+		'headers': [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		],
+		'caption': '',
+		'serverItemsLength': 15,
+		'suffix': 'server-resizable-columns',
+		'density': 'default',
+		'striped': false,
+		'resizableColumns': true,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const state = ref(StateEnum.IDLE)
+
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const fetchData = async (): Promise<void> => {
+					// @ts-expect-error - fetchData is not defined
+					const { items, total } = await getDataFromApi(options.value)
+					users.value = items
+					totalUsers.value = total
+				}
+
+				const wait = async (ms: number) => {
+					return new Promise(resolve => setTimeout(resolve, ms))
+				}
+
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+					state.value = StateEnum.PENDING
+					await wait(1000)
+
+					return new Promise((resolve) => {
+						let items: User[] = getUsers()
+						const total = items.length
+
+						if (sortBy && sortBy.length > 0) {
+							items = items.sort((a, b) => {
+								const key = sortBy[0].key
+								const order = sortBy[0].order === 'asc' ? 1 : -1
+
+								return a[key] > b[key] ? order : -order
+							})
+						}
+
+						if (itemsPerPage > 0) {
+							items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+						}
+
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = (): User[] => {
+					return [
 						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
 						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
 						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
@@ -2311,275 +3823,237 @@ export const CustomFilterInputs: Story = {
 						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
 						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
 						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
-						{ firstname: 'Martin', lastname: 'Lavoie', email: 'martin.lavoie@example.com' },
-						{ firstname: 'Céline', lastname: 'Tremblay', email: 'celine.tremblay@example.com' },
-						{ firstname: 'Jacques', lastname: 'Gagnon', email: 'jacques.gagnon@example.com' },
-						{ firstname: 'Isabelle', lastname: 'Côté', email: 'isabelle.cote@example.com' },
-						{ firstname: 'Philippe', lastname: 'Bouchard', email: 'philippe.bouchard@example.com' },
+						{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+						{ firstname: 'Jacques', lastname: 'Demers', email: 'jacques.demers@example.com' },
+						{ firstname: 'Aimée', lastname: 'Josseaume', email: 'aimee.josseaume@example.com' },
+						{ firstname: 'Delphine', lastname: 'Robillard', email: 'delphine.robillard@example.com' },
+						{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
 					]
-
-					// Apply filters on server side
-					if (options.value?.filters && options.value.filters.length > 0) {
-						options.value.filters.forEach((filter) => {
-							const { key, value } = filter
-
-							items = items.filter((item) => {
-								const itemValue = item[key]
-								return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
-							})
-						})
-					}
-
-					const total = items.length
-
-					// Apply pagination
-					const { page = 1, itemsPerPage = 10 } = options.value || {}
-					if (itemsPerPage > 0) {
-						items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-					}
-
-					filteredUsers.value = items as Record<string, unknown>[]
-					totalFilteredUsers.value = total
-					state.value = StateEnum.RESOLVED
 				}
 
-				// Initialize data
 				fetchData()
 
-				return {
-					args,
-					options,
-					filteredUsers,
-					totalFilteredUsers,
-					state,
-					fetchData,
-					StateEnum,
-				}
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
 			},
 			template: `
-				<div>
-					<SyServerTable
-						v-model:options="options"
-						:items="filteredUsers"
-						:headers="args.headers"
-						:caption="args.caption"
-						:server-items-length="totalFilteredUsers"
-						:loading="state === StateEnum.PENDING"
-						:show-filters="args.showFilters"
-						:filter-input-config="args.filterInputConfig"
-						:suffix="args.suffix"
-						:density="args.density"
-						:striped="args.striped"
-						:resizable-columns="args.resizableColumns"
-						@update:options="fetchData"
-					/>
-				</div>
+			<div>
+				<SyServerTable
+					v-bind="args"
+					v-model:options="options"
+					:items="users"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					suffix="server-resizable-columns"
+					@update:options="fetchData"
+				/>
+			</div>
 			`,
 		}
 	},
 }
 
-export const ManyServerTables: Story = {
+export const RowSelection: Story = {
+	name: 'Row Selection',
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
-        <template>
-          <div>
-            <SyServerTable
-              v-model:options="optionsTable1"
-              :items="usersTable1"
-              :headers="headers"
-              :server-items-length="totalUsersTable1"
-              :loading="stateTable1 === StateEnum.PENDING"
-              suffix="table1"
-              @update:options="fetchDataTable1"
-            />
-            <SyServerTable
-              v-model:options="optionsTable2"
-              :items="usersTable2"
-              :headers="headers"
-              :server-items-length="totalUsersTable2"
-              :loading="stateTable2 === StateEnum.PENDING"
-              suffix="table2"
-              @update:options="fetchDataTable2"
-            />
-          </div>
-        </template>
-        `,
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						v-model="selection"
+						:headers="headers"
+						:items="items"
+						:serverItemsLength="items.length"
+						show-select
+						show-filters
+						suffix="selection-server-table"
+					/>
+					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
+						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
+						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
+							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : users.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : users.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : users.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
+					</div>
+				</div>
+				</template>
+				`,
 			},
 			{
 				name: 'Script',
 				code: `
-        <script setup lang="ts">
-          import { ref } from 'vue'
-          import { SyServerTable } from '@cnamts/synapse'
-          import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
-          import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
-
-          interface User {
-            [key: string]: string
-            firstname: string
-            lastname: string
-            email: string
-          }
-
-          interface DataObj {
-            items: User[]
-            total: number
-          }
-
-          const headers = [
-            { title: 'Nom', key: 'lastname' },
-            { title: 'Prénom', key: 'firstname' },
-            { title: 'Email', key: 'email' },
-          ]
-
-          // Table 1
-          const totalUsersTable1 = ref(0)
-          const usersTable1 = ref<User[]>([])
-          const stateTable1 = ref(StateEnum.IDLE)
-          const optionsTable1 = ref<DataOptions>({
-            itemsPerPage: 5,
-            sortBy: [{ key: 'lastname', order: 'asc' }],
-            page: 1,
-          })
-
-          const fetchDataTable1 = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(optionsTable1.value)
-            usersTable1.value = items
-            totalUsersTable1.value = total
-          }
-
-          // Table 2
-          const totalUsersTable2 = ref(0)
-          const usersTable2 = ref<User[]>([])
-          const stateTable2 = ref(StateEnum.IDLE)
-          const optionsTable2 = ref<DataOptions>({
-            itemsPerPage: 3,
-            sortBy: [{ key: 'firstname', order: 'asc' }],
-            page: 1,
-          })
-
-          const fetchDataTable2 = async (): Promise<void> => {
-            const { items, total } = await getDataFromApi(optionsTable2.value)
-            usersTable2.value = items
-            totalUsersTable2.value = total
-          }
-
-          const wait = async (ms: number) => {
-            return new Promise(resolve => setTimeout(resolve, ms))
-          }
-
-          const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
-            const state = sortBy[0].key === 'lastname' ? stateTable1 : stateTable2
-            state.value = StateEnum.PENDING
-            await wait(1000)
-
-            return new Promise((resolve) => {
-              let items: User[] = getUsers()
-              const total = items.length
-
-              if (sortBy && sortBy.length > 0) {
-                items = items.sort((a, b) => {
-                  const key = sortBy[0].key
-                  const order = sortBy[0].order === 'asc' ? 1 : -1
-
-                  return a[key] > b[key] ? order : -order
-                })
-              }
-
-              if (itemsPerPage > 0) {
-                items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
-              }
-
-              resolve({ items, total })
-              state.value = StateEnum.RESOLVED
-            })
-          }
-
-          const getUsers = (): User[] => {
-            return [
-              { firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
-              { firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
-              { firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
-              { firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
-              { firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
-              { firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
-              { firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
-              { firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
-              { firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
-              { firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
-            ]
-          }
-        </script>
-        `,
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 4,
+					})
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'lastname',
+						},
+						{
+							title: 'Prénom',
+							key: 'firstname',
+						},
+						{
+							title: 'Email',
+							value: 'email',
+						},
+					])
+						
+					const items = ref([
+						{
+							firstname: 'Virginie',
+							lastname: 'Beauchesne',
+							email: 'virginie.beauchesne@example.com',
+						},
+						{
+							firstname: 'Simone',
+							lastname: 'Bellefeuille',
+							email: 'simone.bellefeuille@example.com',
+						},
+						{
+							firstname: 'Étienne',
+							lastname: 'Salois',
+							email: 'etienne.salois@example.com',
+						},
+						{
+							firstname: 'Thierry',
+							lastname: 'Bobu',
+							email: 'thierry.bobu@example.com',
+						},
+						{
+							firstname: 'Bernadette',
+							lastname: 'Langelier',
+							email: 'bernadette.langelier@exemple.com'
+						},
+						{
+							firstname: 'Agate',
+							lastname: 'Roy',
+							email: 'agate.roy@exemple.com'
+						}
+					])
+				</script>
+				`,
 			},
 		],
 	},
 	args: {
-		serverItemsLength: 15,
-		headers: [
-			{ title: 'Nom', key: 'lastname' },
-			{ title: 'Prénom', key: 'firstname' },
-			{ title: 'Email', key: 'email' },
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'lastname',
+			},
+			{
+				title: 'Prénom',
+				key: 'firstname',
+			},
+			{
+				title: 'Email',
+				value: 'email',
+			},
+		],
+		'items': [
+			{
+				firstname: 'Virginie',
+				lastname: 'Beauchesne',
+				email: 'virginie.beauchesne@example.com',
+			},
+			{
+				firstname: 'Simone',
+				lastname: 'Bellefeuille',
+				email: 'simone.bellefeuille@example.com',
+			},
+			{
+				firstname: 'Étienne',
+				lastname: 'Salois',
+				email: 'etienne.salois@example.com',
+			},
+			{
+				firstname: 'Thierry',
+				lastname: 'Bobu',
+				email: 'thierry.bobu@example.com',
+			},
+			{
+				firstname: 'Bernadette',
+				lastname: 'Langelier',
+				email: 'bernadette.langelier@exemple.com',
+			},
+			{
+				firstname: 'Agate',
+				lastname: 'Roy',
+				email: 'agate.roy@exemple.com',
+			},
 		],
-		caption: '',
-		suffix: 'multi',
-		density: 'default',
-		striped: false,
+		'options': {
+			itemsPerPage: 4,
+			page: 1,
+			filters: [],
+		},
+		'caption': '',
+		'suffix': 'selection-server-table',
+		'density': 'default',
+		'striped': false,
+		'showSelect': true,
+		'showFilters': true,
+		'serverItemsLength': 6,
+		'onUpdate:options': fn(),
 	},
-	render: (args) => {
+	render(args) {
 		return {
 			components: { SyServerTable },
 			setup() {
-				// Table 1
-				const totalUsersTable1 = ref(0)
-				const usersTable1 = ref<User[]>([])
-				const stateTable1 = ref(StateEnum.IDLE)
-
-				const optionsTable1 = ref<Partial<DataOptions>>({
-					itemsPerPage: 5,
-					sortBy: [{ key: 'lastname', order: 'asc' }],
-					page: 1,
-				})
-
-				const fetchDataTable1 = async (): Promise<void> => {
-					const { items, total } = await getDataFromApi(optionsTable1.value as DataOptions)
-					usersTable1.value = items
-					totalUsersTable1.value = total
-				}
-
-				// Table 2
-				const totalUsersTable2 = ref(0)
-				const usersTable2 = ref<User[]>([])
-				const stateTable2 = ref(StateEnum.IDLE)
-
-				const optionsTable2 = ref<Partial<DataOptions>>({
-					itemsPerPage: 3,
-					sortBy: [{ key: 'firstname', order: 'asc' }],
-					page: 1,
-				})
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const selection = ref([])
+				const state = ref(StateEnum.IDLE)
 
-				const fetchDataTable2 = async (): Promise<void> => {
-					const { items, total } = await getDataFromApi(optionsTable2.value as DataOptions)
-					usersTable2.value = items
-					totalUsersTable2.value = total
+				const fetchData = async (): Promise<void> => {
+					// Create a complete DataOptions object with all required properties
+					const defaultOptions: DataOptions = {
+						page: 1,
+						itemsPerPage: 10,
+						sortBy: [],
+						multiSort: false,
+					}
+					const options = args.options ? { ...defaultOptions, ...args.options } : defaultOptions
+					const { items, total } = await getDataFromApi(options)
+					users.value = items
+					totalUsers.value = total
 				}
 
 				const wait = async (ms: number) => {
 					return new Promise(resolve => setTimeout(resolve, ms))
 				}
 
-				const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
-					const state = sortBy[0].key === 'lastname' ? stateTable1 : stateTable2
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
 					state.value = StateEnum.PENDING
 					await wait(1000)
 
 					return new Promise((resolve) => {
 						let items: User[] = getUsers()
-						const total = items.length
+						let total = items.length // Changed from const to let
+
+						// Add filtering logic here
+						if (filters && filters.length > 0) {
+							filters.forEach((filter) => {
+								const { key, value } = filter
+
+								items = items.filter((item) => {
+									const itemValue = item[key]
+									return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+								})
+							})
+							// Update total after filtering
+							total = items.length
+						}
 
 						if (sortBy && sortBy.length > 0) {
 							items = items.sort((a, b) => {
@@ -2604,66 +4078,50 @@ export const ManyServerTables: Story = {
 						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
 						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
 						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
-						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
-						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+						{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@exemple.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@exemple.com' },
 						{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
 						{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
 						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
 						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
 						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+						{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
 					]
 				}
 
-				return {
-					args,
-					usersTable1,
-					totalUsersTable1,
-					optionsTable1,
-					stateTable1,
-					fetchDataTable1,
-					usersTable2,
-					totalUsersTable2,
-					optionsTable2,
-					stateTable2,
-					fetchDataTable2,
-					StateEnum,
-				}
+				// Call fetchData on mount
+				fetchData()
+
+				return { args, users, state, fetchData, totalUsers, selection, StateEnum }
 			},
 			template: `
-      <div>
-        <SyServerTable
-          v-model:options="optionsTable1"
-          :items="usersTable1"
-          :headers="args.headers"
-		  :caption="args.caption"
-          :server-items-length="totalUsersTable1"
-          :loading="stateTable1 === StateEnum.PENDING"
-		  :density="args.density"
-		  :striped="args.striped"
-          suffix="table1"
-		  class="mb-10"
-		  :resizable-columns="args.resizableColumns"
-          @update:options="fetchDataTable1"
-        />
-        <SyServerTable
-          v-model:options="optionsTable2"
-          :items="usersTable2"
-          :headers="args.headers"
-		  :caption="args.caption"
-          :server-items-length="totalUsersTable2"
-          :loading="stateTable2 === StateEnum.PENDING"
-		  :density="args.density"
-		  :striped="args.striped"
-          suffix="table2"
-		  :resizable-columns="args.resizableColumns"
-          @update:options="fetchDataTable2"
-        />
-      </div>
-      `,
+				<div>
+					<SyServerTable
+						v-bind="args"
+						v-model:options="args.options"
+						v-model="selection"
+						:items="users"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="selection-server-table"
+						@update:options="fetchData"
+					/>
+					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
+						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
+						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
+							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : users.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : users.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : users.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
+					</div>
+				</div>
+			`,
 		}
 	},
 }
-export const ResizableColumns: Story = {
+
+export const ColumnControls: StoryObj<typeof SyServerTable> = {
 	parameters: {
 		sourceCode: [
 			{
@@ -2676,8 +4134,8 @@ export const ResizableColumns: Story = {
 						:headers="headers"
 						:server-items-length="totalUsers"
 						:loading="state === StateEnum.PENDING"
-						:resizable-columns="true"
-						suffix="server-resizable-columns"
+						suffix="server-control-columns"
+						enable-column-controls
 						@update:options="fetchData"
 					/>
 				</template>
@@ -2730,7 +4188,7 @@ export const ResizableColumns: Story = {
 						return new Promise(resolve => setTimeout(resolve, ms))
 					}
 				
-					const getDataFromApi = async ({ sortBy, page, itemsPerPage }: DataOptions): Promise<DataObj> => {
+					const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
 						state.value = StateEnum.PENDING
 						await wait(1000)
 				
@@ -2775,28 +4233,31 @@ export const ResizableColumns: Story = {
 							{ firstname: 'Alexandre', lastname: 'Lazure', email: 'alexandre.lazure@example.com' },
 						]
 					}
+                    
+                    fetchData()
 				</script>
 				`,
 			},
 		],
 	},
 	args: {
-		options: {
+		'options': {
 			itemsPerPage: 5,
 			sortBy: [{ key: 'lastname', order: 'asc' }],
 			page: 1,
 		},
-		headers: [
+		'headers': [
 			{ title: 'Nom', key: 'lastname' },
 			{ title: 'Prénom', key: 'firstname' },
 			{ title: 'Email', key: 'email' },
 		],
-		caption: '',
-		serverItemsLength: 15,
-		suffix: 'server-resizable-columns',
-		density: 'default',
-		striped: false,
-		resizableColumns: true,
+		'caption': '',
+		'serverItemsLength': 15,
+		'suffix': 'server-control-columns',
+		'density': 'default',
+		'striped': false,
+		'enableColumnControls': true,
+		'onUpdate:options': fn(),
 	},
 	render: (args) => {
 		return {
@@ -2806,9 +4267,17 @@ export const ResizableColumns: Story = {
 				const users = ref<User[]>([])
 				const state = ref(StateEnum.IDLE)
 
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
 				const fetchData = async (): Promise<void> => {
 					// @ts-expect-error - fetchData is not defined
-					const { items, total } = await getDataFromApi(args.options)
+					const { items, total } = await getDataFromApi(options.value)
 					users.value = items
 					totalUsers.value = total
 				}
@@ -2863,21 +4332,19 @@ export const ResizableColumns: Story = {
 					]
 				}
 
-				return { args, users, state, fetchData, totalUsers, StateEnum }
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
 			},
 			template: `
 			<div>
 				<SyServerTable
-					v-model:options="args.options"
+					v-bind="args"
+					v-model:options="options"
 					:items="users"
-					:headers="args.headers"
-					:caption="args.caption"
 					:server-items-length="totalUsers"
 					:loading="state === StateEnum.PENDING"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					suffix="server-control-columns"
 					@update:options="fetchData"
 				/>
 			</div>