@cnamts/synapse 1.0.1 → 1.0.2

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import { ref } from 'vue'
 import SyTable from './SyTable.vue'
 import type { DataOptions, FilterType } from '../common/types'
-import { ref } from 'vue'
 import type { VDataTable } from 'vuetify/components'
 import dayjs from 'dayjs'
 
@@ -18,7 +19,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',
@@ -29,6 +30,9 @@ const meta = {
 			control: { type: 'object' },
 			table: {
 				category: 'props',
+				defaultValue: {
+					summary: '[]',
+				},
 			},
 		},
 		density: {
@@ -66,10 +70,6 @@ const meta = {
 			},
 			required: true,
 		},
-		itemsPerPage: {
-			description: 'Nombre d\'éléments par page',
-			control: { type: 'number' },
-		},
 		resizableColumns: {
 			description: 'Permet de redimensionner les colonnes du tableau',
 		},
@@ -81,6 +81,25 @@ const meta = {
 			description: 'Affiche les filtres au-dessus du tableau',
 			control: { type: 'boolean' },
 		},
+		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 SyTable & typeof VDataTable>
 
@@ -168,7 +187,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'lastname',
@@ -182,7 +201,7 @@ export const Default: Story = {
 				value: 'email',
 			},
 		],
-		items: [
+		'items': [
 			{
 				firstname: 'Virginie',
 				lastname: 'Beauchesne',
@@ -214,15 +233,16 @@ export const Default: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		options: {
+		'options': {
 			itemsPerPage: 4,
 		},
-		caption: '',
-		suffix: 'default-table',
-		density: 'default',
-		striped: false,
+		'caption': '',
+		'suffix': 'default-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -231,13 +251,7 @@ export const Default: Story = {
 			template: `
 				<SyTable
 					v-model:options="args.options"
-					:headers="args.headers"
-					:items="args.items"
-					:caption="args.caption"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-bind="args"
 				/>
 			`,
 		}
@@ -331,7 +345,7 @@ export const SortBy: Story = {
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'lastname',
@@ -345,7 +359,7 @@ export const SortBy: Story = {
 				value: 'email',
 			},
 		],
-		items: [
+		'items': [
 			{
 				firstname: 'Virginie',
 				lastname: 'Beauchesne',
@@ -377,8 +391,8 @@ export const SortBy: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 4,
 			sortBy: [
 				{
@@ -387,11 +401,12 @@ export const SortBy: Story = {
 				},
 			],
 		},
-		suffix: 'sort-table',
-		density: 'default',
-		striped: false,
+		'suffix': 'sort-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -400,13 +415,7 @@ export const SortBy: Story = {
 			template: `
 				<SyTable
 					v-model:options="args.options"
-					:headers="args.headers"
-					:items="args.items"
-					:caption="args.caption"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-bind="args"
 				/>
 			`,
 		}
@@ -501,7 +510,7 @@ export const FilterByText: Story = {
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'lastname',
@@ -521,7 +530,7 @@ export const FilterByText: Story = {
 				filterType: 'text',
 			},
 		],
-		items: [
+		'items': [
 			{
 				firstname: 'Virginie',
 				lastname: 'Beauchesne',
@@ -553,17 +562,18 @@ export const FilterByText: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 4,
 			filters: [],
 		},
-		showFilters: true,
-		suffix: 'filter-text-table',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'filter-text-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -579,15 +589,9 @@ export const FilterByText: Story = {
 			},
 			template: `
 				<SyTable
-					v-model:options="options"
-					:headers="args.headers"
-					:items="items"
-					:caption="args.caption"
-					:show-filters="args.showFilters"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-text-table"
 				/>
 			`,
 		}
@@ -677,7 +681,7 @@ export const FilterByNumber: Story = {
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'name',
@@ -697,7 +701,7 @@ export const FilterByNumber: Story = {
 				filterType: 'number',
 			},
 		],
-		items: [
+		'items': [
 			{
 				name: 'Jean Dupont',
 				age: 32,
@@ -724,17 +728,18 @@ export const FilterByNumber: Story = {
 				salary: 58000,
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			filters: [],
 		},
-		showFilters: true,
-		suffix: 'filter-number-table',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'filter-number-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -750,15 +755,9 @@ export const FilterByNumber: Story = {
 			},
 			template: `
 				<SyTable
-					v-model:options="options"
-					:headers="args.headers"
-					:items="items"
-					:caption="args.caption"
-					:show-filters="args.showFilters"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-number-table"
 				/>
 			`,
 		}
@@ -861,7 +860,7 @@ export const FilterBySelect: Story = {
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'name',
@@ -894,7 +893,7 @@ export const FilterBySelect: Story = {
 				],
 			},
 		],
-		items: [
+		'items': [
 			{
 				name: 'Jean Dupont',
 				department: 'RH',
@@ -921,17 +920,18 @@ export const FilterBySelect: Story = {
 				status: 'Inactif',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			filters: [],
 		},
-		showFilters: true,
-		suffix: 'filter-select-table',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'filter-select-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -947,22 +947,16 @@ export const FilterBySelect: Story = {
 			},
 			template: `
 				<SyTable
-					v-model:options="options"
-					:headers="args.headers"
-					:items="items"
-					:caption="args.caption"
-					:show-filters="args.showFilters"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-select-table"
 				/>
 			`,
 		}
 	},
 }
 
-export const FilterByDate: Story = {
+export const FilterBySelectMultiple: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -973,8 +967,8 @@ export const FilterByDate: Story = {
 						v-model:options="options"
 						:headers="headers"
 						:items="items"
-						:show-filters="true"
-						suffix="filter-date-table"
+						show-filters
+						suffix="filter-select-table"
 					/>
 				</template>
 				`,
@@ -985,11 +979,10 @@ export const FilterByDate: Story = {
 				<script setup lang="ts">
 					import { ref } from 'vue'
 					import { SyTable } from '@cnamts/synapse'
-					import dayjs from 'dayjs';
 					
 					const options = ref({
 						itemsPerPage: 5,
-						filters: [],
+						filters: []
 					})
 					
 					const headers = ref([
@@ -997,64 +990,64 @@ export const FilterByDate: Story = {
 							title: 'Nom',
 							key: 'name',
 							filterable: true,
-							filterType: 'text',
+							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',
+							multiple: true,
+							chips: true,
+							filterType: 'select',
+							hideMessages: true,
+							filterOptions: [
+								{ text: 'Actif', value: 'Actif' },
+								{ text: 'En congé', value: 'En congé' },
+								{ text: 'Inactif', value: 'Inactif' },
+							]
 						},
 					])
-					
+						
 					const items = ref([
 						{
 							name: 'Jean Dupont',
-							hireDate: dayjs('2020-05-15').format('DD/MM/YYYY'),
-							vacationPeriod: { 
-							  from: dayjs('2023-07-01').format('DD/MM/YYYY'), 
-							  to: dayjs('2023-07-15').format('DD/MM/YYYY') 
-							},
+							department: 'RH',
+							status: 'Actif',
 						},
 						{
 							name: 'Marie Martin',
-							hireDate: dayjs('2019-03-10').format('DD/MM/YYYY'),
-							vacationPeriod: {
-							  from: dayjs('2023-08-01').format('DD/MM/YYYY'),
-							  to: dayjs('2023-08-20').format('DD/MM/YYYY'),
-							},
+							department: 'IT',
+							status: 'En congé',
 						},
 						{
-							name: 'Pierre Dupont',
-							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: 'Pierre Durand',
+							department: 'Finance',
+							status: 'Actif',
 						},
 						{
-							name: 'Sophie Garnier',
-							hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
-							vacationPeriod: {
-							  from: dayjs('2025-12-20').format('DD/MM/YYYY'),
-							  to: dayjs('2025-01-05').format('DD/MM/YYYY'),
-							},
+							name: 'Sophie Petit',
+							department: 'Marketing',
+							status: 'Actif',
 						},
 						{
 							name: 'Thomas Leroy',
-							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'),
-							},
+							department: 'IT',
+							status: 'Inactif',
 						},
 					])
 				</script>
@@ -1063,7 +1056,7 @@ export const FilterByDate: Story = {
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'name',
@@ -1071,73 +1064,74 @@ export const FilterByDate: 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' },
+				],
 			},
 		],
-		items: [
+		'items': [
 			{
 				name: 'Jean Dupont',
-				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'),
-				},
+				department: 'RH',
+				status: 'Actif',
 			},
 			{
 				name: 'Marie Martin',
-				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'),
-				},
+				department: 'IT',
+				status: 'En congé',
 			},
 			{
 				name: 'Pierre Durand',
-				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'),
-				},
+				department: 'Finance',
+				status: 'Actif',
 			},
 			{
 				name: 'Sophie Petit',
-				hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
-				vacationPeriod: {
-					from: dayjs('2025-12-20').format('DD/MM/YYYY'),
-					to: dayjs('2025-01-05').format('DD/MM/YYYY'),
-				},
+				department: 'Marketing',
+				status: 'Actif',
 			},
 			{
 				name: 'Thomas Leroy',
-				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'),
-				},
+				department: 'IT',
+				status: 'Inactif',
 			},
 		],
-		caption: '',
-		options: {
+		'caption': '',
+		'options': {
 			itemsPerPage: 5,
 			filters: [],
 		},
-		showFilters: true,
-		suffix: 'filter-date-table',
-		density: 'default',
-		striped: false,
+		'showFilters': true,
+		'suffix': 'filter-select-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -1153,22 +1147,16 @@ export const FilterByDate: Story = {
 			},
 			template: `
 				<SyTable
-					v-model:options="options"
-					:headers="args.headers"
-					:items="items"
-					:caption="args.caption"
-					:show-filters="args.showFilters"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-select-table"
 				/>
 			`,
 		}
 	},
 }
 
-export const CustomFilterSlot: Story = {
+export const FilterByExactDate: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -1179,38 +1167,9 @@ export const CustomFilterSlot: Story = {
 						v-model:options="options"
 						:headers="headers"
 						:items="items"
-						show-filters
-						suffix="custom-filter-slot-table"
-					>
-						<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) => {
-										// Créer manuellement un filtre de sélection
-										const currentFilters = [...options.filters || []]
-										// Supprimer le filtre existant pour cette clé si nécessaire
-										const filteredFilters = currentFilters.filter(f => f.key !== 'status')
-										// Ajouter un nouveau filtre si la valeur n'est pas vide
-										if (val) {
-											filteredFilters.push({ key: 'status', value: val, type: 'select' })
-										}
-										// Mettre à jour les options avec les nouveaux filtres
-										options.filters = filteredFilters
-									}"
-								/>
-							</div>
-						</template>
-					</SyTable>
+						:show-filters="true"
+						suffix="filter-date-table"
+					/>
 				</template>
 				`,
 			},
@@ -1220,219 +1179,1099 @@ export const CustomFilterSlot: Story = {
 				<script setup lang="ts">
 					import { ref } from 'vue'
 					import { SyTable } from '@cnamts/synapse'
+					import dayjs from 'dayjs';
 					
 					const options = ref({
-						itemsPerPage: 4,
-						filters: []
+						itemsPerPage: 5,
+						filters: [],
 					})
 					
-					const customFilterValue = ref('')
-					const statusOptions = ['Actif', 'Inactif', 'En attente']
-					
 					const headers = ref([
 						{
 							title: 'Nom',
-							key: 'lastname',
-							filterable: true,
-							filterType: 'text'
-						},
-						{
-							title: 'Prénom',
-							key: 'firstname',
+							key: 'name',
 							filterable: true,
-							filterType: 'text'
+							filterType: 'text',
 						},
 						{
-							title: 'Statut',
-							key: 'status',
+							title: 'Date d'embauche',
+							key: 'hireDate',
 							filterable: true,
-							filterType: 'custom' // Utilisation du type 'custom' pour activer le slot personnalisé
+							filterType: 'date',
+							dateFormat: 'DD/MM/YYYY',
 						},
 					])
-						
+					
 					const items = ref([
 						{
-							firstname: 'Virginie',
-							lastname: 'Beauchesne',
-							status: 'Actif',
+							name: 'Jean Dupont',
+							hireDate: dayjs('2020-05-15').format('DD/MM/YYYY'),
 						},
 						{
-							firstname: 'Simone',
-							lastname: 'Bellefeuille',
-							status: 'Inactif',
+							name: 'Marie Martin',
+							hireDate: dayjs('2019-03-10').format('DD/MM/YYYY'),
 						},
 						{
-							firstname: 'Étienne',
-							lastname: 'Salois',
-							status: 'En attente',
+							name: 'Pierre Dupont',
+							hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
 						},
 						{
-							firstname: 'Thierry',
-							lastname: 'Bobu',
-							status: 'Actif',
+							name: 'Sophie Garnier',
+							hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
+						},
+						{
+							name: 'Thomas Leroy',
+							hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
+						},
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'name',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Date d\'embauche',
+				key: 'hireDate',
+				filterable: true,
+				filterType: 'date',
+				dateFormat: 'DD/MM/YYYY',
+			},
+		],
+		'items': [
+			{
+				name: 'Jean Dupont',
+				hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Marie Martin',
+				hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Pierre Durand',
+				hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Sophie Petit',
+				hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Thomas Leroy',
+				hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
+			},
+		],
+		'caption': '',
+		'options': {
+			itemsPerPage: 5,
+			filters: [],
+		},
+		'showFilters': true,
+		'suffix': 'filter-date-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				// Create reactive references
+				const options = ref(args.options)
+				const items = ref(args.items)
+
+				return {
+					args,
+					options,
+					items,
+				}
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-date-table"
+				/>
+			`,
+		}
+	},
+}
+
+export const FilterByPeriod: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						:show-filters="true"
+						suffix="filter-date-table"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					import dayjs from 'dayjs';
+					
+					const options = ref({
+						itemsPerPage: 5,
+						filters: [],
+					})
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'name',
+							filterable: true,
+							filterType: 'text',
+						},
+						{
+							title: 'Date d'embauche',
+							key: 'hireDate',
+							filterable: true,
+							filterType: 'period',
+							dateFormat: 'DD/MM/YYYY',
+						},
+					])
+					
+					const items = ref([
+						{
+							name: 'Jean Dupont',
+							hireDate: dayjs('2020-05-15').format('DD/MM/YYYY'),
+						},
+						{
+							name: 'Marie Martin',
+							hireDate: dayjs('2019-03-10').format('DD/MM/YYYY'),
+						},
+						{
+							name: 'Pierre Dupont',
+							hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
+						},
+						{
+							name: 'Sophie Garnier',
+							hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
+						},
+						{
+							name: 'Thomas Leroy',
+							hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
+						},
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'name',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Date d\'embauche',
+				key: 'hireDate',
+				filterable: true,
+				filterType: 'period',
+				dateFormat: 'DD/MM/YYYY',
+			},
+		],
+		'items': [
+			{
+				name: 'Jean Dupont',
+				hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Marie Martin',
+				hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Pierre Durand',
+				hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Sophie Petit',
+				hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
+			},
+			{
+				name: 'Thomas Leroy',
+				hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
+			},
+		],
+		'caption': '',
+		'options': {
+			itemsPerPage: 5,
+			filters: [],
+		},
+		'showFilters': true,
+		'suffix': 'filter-date-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				// Create reactive references
+				const options = ref(args.options)
+				const items = ref(args.items)
+
+				return {
+					args,
+					options,
+					items,
+				}
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-date-table"
+				/>
+			`,
+		}
+	},
+}
+
+export const CustomFilterSlot: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Cette story démontre comment utiliser un slot personnalisé pour le filtrage. Le filtre personnalisé utilise un v-select pour filtrer par statut.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						show-filters
+						suffix="custom-filter-slot-table"
+					>
+						<template #filter.custom="{ header, 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) => {
+										// Use updateFilter provided by the slot props
+										updateFilter(val);
+										// Also update our local state
+										handleFilterChange(val);
+									}"
+								/>
+							</div>
+						</template>
+					</SyTable>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						page: 1,
+						itemsPerPage: 4,
+						filters: []
+					})
+					
+					const customFilterValue = ref('')
+					const statusOptions = ['Actif', 'Inactif', 'En attente']
+					
+					// Function to update the filter when the select value changes
+					function handleFilterChange(val) {
+						// Create a new filters array
+						const newFilters = options.value.filters.filter(f => f.key !== 'status')
+						
+						// Add the new filter if a value is selected
+						if (val) {
+							newFilters.push({
+								key: 'status',
+								value: val,
+								type: 'select' // Use 'select' type for compatibility with filtering logic
+							})
+						}
+						
+						// Update the options with the new filters
+						options.value = {
+							...options.value,
+							filters: newFilters
+						}
+					}
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'lastname',
+							filterable: true,
+							filterType: 'text'
+						},
+						{
+							title: 'Prénom',
+							key: 'firstname',
+							filterable: true,
+							filterType: 'text'
+						},
+						{
+							title: 'Statut',
+							key: 'status',
+							filterable: true,
+							filterType: 'custom' // Utilisation du type 'custom' pour activer le slot personnalisé
+						},
+					])
+						
+					const items = ref([
+						{
+							firstname: 'Virginie',
+							lastname: 'Beauchesne',
+							status: 'Actif',
+						},
+						{
+							firstname: 'Simone',
+							lastname: 'Bellefeuille',
+							status: 'Inactif',
+						},
+						{
+							firstname: 'Étienne',
+							lastname: 'Salois',
+							status: 'En attente',
+						},
+						{
+							firstname: 'Thierry',
+							lastname: 'Bobu',
+							status: 'Actif',
+						},
+						{
+							firstname: 'Bernadette',
+							lastname: 'Langelier',
+							status: 'Inactif'
+						},
+						{
+							firstname: 'Agate',
+							lastname: 'Roy',
+							status: 'En attente'
+						}
+					])
+				</script>
+				`,
+			},
+			{
+				name: 'Style',
+				code: `
+				<style scoped>
+					.custom-filter-container {
+						display: flex;
+						flex-direction: column;
+						gap: 4px;
+					}
+					
+					.custom-filter-info {
+						font-size: 12px;
+						color: #666;
+						margin-top: 4px;
+					}
+				</style>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'lastname',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Prénom',
+				key: 'firstname',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Statut',
+				key: 'status',
+				filterable: true,
+				filterType: 'custom',
+			},
+		],
+		'items': [
+			{
+				firstname: 'Virginie',
+				lastname: 'Beauchesne',
+				status: 'Actif',
+			},
+			{
+				firstname: 'Simone',
+				lastname: 'Bellefeuille',
+				status: 'Inactif',
+			},
+			{
+				firstname: 'Étienne',
+				lastname: 'Salois',
+				status: 'En attente',
+			},
+			{
+				firstname: 'Thierry',
+				lastname: 'Bobu',
+				status: 'Actif',
+			},
+			{
+				firstname: 'Bernadette',
+				lastname: 'Langelier',
+				status: 'Inactif',
+			},
+			{
+				firstname: 'Agate',
+				lastname: 'Roy',
+				status: 'En attente',
+			},
+		],
+		'caption': '',
+		'options': {
+			itemsPerPage: 4,
+			filters: [],
+		},
+		'showFilters': true,
+		'suffix': 'custom-filter-slot-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				// Create a fresh copy of the options to avoid reactivity issues
+				const options = ref<DataOptions>({
+					page: 1,
+					itemsPerPage: 4,
+					filters: [] as import('../common/types').FilterOption[],
+					sortBy: [],
+				})
+
+				// Create a reactive reference for the custom filter value
+				const customFilterValue = ref('')
+				const statusOptions = ['Actif', 'Inactif', 'En attente']
+
+				// Function to update the filter when the select value changes
+				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,
+					}
+				}
+
+				return {
+					args,
+					options,
+					customFilterValue,
+					statusOptions,
+					handleFilterChange,
+				}
+			},
+			template: `
+				<SyTable
+					v-model:options="options"
+					:headers="args.headers"
+					:items="args.items"
+					show-filters
+					suffix="custom-filter-slot-table"
+				>
+					<template #filter.custom="{ header, 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) => {
+									// Use updateFilter provided by the slot props
+									updateFilter(val);
+									// Also update our local state
+									handleFilterChange(val);
+								}"
+							/>
+						</div>
+					</template>
+				</SyTable>
+			`,
+		}
+	},
+}
+
+export const CustomFilterInputs: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						:filter-input-config="filterInputConfig"
+						show-filters
+						suffix="filter-text-table"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 4,
+						filters: []
+					})
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'lastname',
+							filterable: true,
+							filterType: 'text'
+						},
+						{
+							title: 'Prénom',
+							key: 'firstname',
+							filterable: true,
+							filterType: 'text'
+						},
+						{
+							title: 'Email',
+							value: 'email',
+							filterable: true,
+							filterType: 'text'
+						},
+					])
+						
+					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'
+						}
+					])
+					
+					const filterInputConfig = ref({
+						variant: 'outlined',
+						density: 'comfortable',
+						hideDetails: true,
+						clearable: false,
+						disableErrorHandling: true,
+					})
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'lastname',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Prénom',
+				key: 'firstname',
+				filterable: true,
+				filterType: 'text',
+			},
+			{
+				title: 'Email',
+				value: 'email',
+				filterable: true,
+				filterType: 'text',
+			},
+		],
+		'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': '',
+		'options': {
+			itemsPerPage: 4,
+			filters: [],
+		},
+		'filterInputConfig': {
+			variant: 'outlined',
+			density: 'comfortable',
+			hideDetails: true,
+			clearable: false,
+			disableErrorHandling: true,
+		},
+		'showFilters': true,
+		'suffix': 'filter-text-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				// Create reactive references
+				const options = ref(args.options)
+				const items = ref(args.items)
+
+				return {
+					args,
+					options,
+					items,
+				}
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="filter-custom-input"
+				/>
+			`,
+		}
+	},
+}
+
+export const ManyTables: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div class="d-flex flex-column gap-4">
+						<SyTable
+							v-model:options="options1"
+							:headers="headers"
+							:items="items1"
+							suffix="table-1"
+						/>
+						<SyTable
+							v-model:options="options2"
+							:headers="headers"
+							:items="items2"
+							suffix="table-2"
+						/>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options1 = ref({
+						itemsPerPage: 4,
+					})
+					
+					const options2 = ref({
+						itemsPerPage: 2,
+					})
+					
+					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',
-							status: 'Inactif'
+							email: 'bernadette.langelier@exemple.com'
 						},
 						{
 							firstname: 'Agate',
 							lastname: 'Roy',
-							status: 'En attente'
+							email: 'agate.roy@exemple.com'
 						}
 					])
 				</script>
 				`,
 			},
+		],
+	},
+	args: {
+		'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-server',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				const options1 = ref<Partial<DataOptions>>({
+					itemsPerPage: 4,
+				})
+				const options2 = ref<Partial<DataOptions>>({
+					itemsPerPage: 2,
+				})
+				return { args, options1, options2 }
+			},
+			template: `
+				<div>
+					<SyTable
+						v-model:options="options1"
+						v-bind="args"
+						suffix="table1"
+						class="mb-10"
+					/>
+					<SyTable
+						v-model:options="options2"
+						v-bind="args"
+						suffix="table2"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const DataAlignment: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						suffix="alignment-table"
+					/>
+				</template>
+				`,
+			},
 			{
-				name: 'Style',
+				name: 'Script',
 				code: `
-				<style scoped>
-					.custom-filter-container {
-						display: flex;
-						flex-direction: column;
-						gap: 4px;
-					}
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
 					
-					.custom-filter-info {
-						font-size: 12px;
-						color: #666;
-						margin-top: 4px;
-					}
-				</style>
+					const options = ref({
+						itemsPerPage: 4,
+					})
+					
+					const headers = ref([
+						{
+							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 items = ref([
+						{
+							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',
+						},
+					])
+				</script>
 				`,
 			},
 		],
 	},
 	args: {
-		headers: [
+		'headers': [
+			{
+				title: 'ID',
+				key: 'id',
+				align: 'center',
+				sortable: false,
+			},
 			{
 				title: 'Nom',
 				key: 'lastname',
-				filterable: true,
-				filterType: 'text',
+				align: 'start',
+				sortable: false,
 			},
 			{
-				title: 'Prénom',
-				key: 'firstname',
-				filterable: true,
-				filterType: 'text',
+				title: 'Date de naissance',
+				key: 'birthdate',
+				align: 'center',
+				sortable: false,
 			},
 			{
-				title: 'Statut',
-				key: 'status',
-				filterable: true,
-				filterType: 'custom' as FilterType,
+				title: 'NIR',
+				key: 'nir',
+				align: 'end',
+				sortable: false,
 			},
 		],
-		items: [
-			{
-				firstname: 'Virginie',
-				lastname: 'Beauchesne',
-				status: 'Actif',
-			},
-			{
-				firstname: 'Simone',
-				lastname: 'Bellefeuille',
-				status: 'Inactif',
-			},
-			{
-				firstname: 'Étienne',
-				lastname: 'Salois',
-				status: 'En attente',
-			},
+		'items': [
 			{
-				firstname: 'Thierry',
-				lastname: 'Bobu',
-				status: 'Actif',
+				id: '1',
+				lastname: 'Lefebvre',
+				birthdate: '18/02/1989',
+				nir: '1 89 02 75 120 005 79',
 			},
 			{
-				firstname: 'Bernadette',
-				lastname: 'Langelier',
-				status: 'Inactif',
+				id: '2',
+				lastname: 'Richard',
+				birthdate: '22/05/1991',
+				nir: '2 91 05 75 120 005 76',
 			},
 			{
-				firstname: 'Agate',
-				lastname: 'Roy',
-				status: 'En attente',
+				id: '3',
+				lastname: 'Fournier',
+				birthdate: '11/11/2000',
+				nir: '2 00 11 42 120 008 87',
 			},
 		],
-		caption: '',
-		options: {
+		'options': {
 			itemsPerPage: 4,
-			filters: [],
 		},
-		showFilters: true,
-		suffix: 'custom-filter-slot-table',
-		density: 'default',
-		striped: false,
+		'suffix': 'alignment-table',
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
-				// Create reactive references
-				const options = ref(args.options)
-				const items = ref(args.items)
-				const customFilterValue = ref('')
-				const statusOptions = ['Actif', 'Inactif', 'En attente']
-
-				return {
-					args,
-					options,
-					items,
-					customFilterValue,
-					statusOptions,
-				}
+				return { args }
 			},
 			template: `
 				<SyTable
-					v-model:options="options"
-					:headers="args.headers"
-					:items="items"
-					:caption="args.caption"
-					:show-filters="args.showFilters"
-					:suffix="args.suffix"
-					:density="args.density"
-					:striped="args.striped"
-					:resizable-columns="args.resizableColumns"
-				>
-					<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) => {
-									// Manually create a select filter
-									const currentFilters = [...options.filters || []]
-									// Remove existing filter for this key if any
-									const filteredFilters = currentFilters.filter(f => f.key !== 'status')
-									// Add new filter if value is not empty
-									if (val) {
-										filteredFilters.push({ key: 'status', value: val, type: 'select' })
-									}
-									// Update options with new filters
-									options.filters = filteredFilters
-								}"
-							/>
-						</div>
-					</template>
-				</SyTable>
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="alignment-table"
+				/>
 			`,
 		}
 	},
 }
 
-export const CustomFilterInputs: Story = {
+export const ResizableColumns: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -1443,9 +2282,8 @@ export const CustomFilterInputs: Story = {
 						v-model:options="options"
 						:headers="headers"
 						:items="items"
-						:filter-input-config="filterInputConfig"
-						show-filters
-						suffix="filter-text-table"
+						:resizable-columns="true"
+						suffix="resizable-columns"
 					/>
 				</template>
 				`,
@@ -1459,27 +2297,20 @@ export const CustomFilterInputs: Story = {
 					
 					const options = ref({
 						itemsPerPage: 4,
-						filters: []
 					})
 					
 					const headers = ref([
 						{
 							title: 'Nom',
 							key: 'lastname',
-							filterable: true,
-							filterType: 'text'
 						},
 						{
 							title: 'Prénom',
 							key: 'firstname',
-							filterable: true,
-							filterType: 'text'
 						},
 						{
 							title: 'Email',
 							value: 'email',
-							filterable: true,
-							filterType: 'text'
 						},
 					])
 						
@@ -1515,41 +2346,28 @@ export const CustomFilterInputs: Story = {
 							email: 'agate.roy@exemple.com'
 						}
 					])
-					
-					const filterInputConfig = ref({
-						variant: 'outlined',
-						density: 'comfortable',
-						hideDetails: true,
-						clearable: false,
-						disableErrorHandling: true,
-					})
 				</script>
 				`,
 			},
 		],
 	},
 	args: {
-		headers: [
+		'resizableColumns': true,
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'lastname',
-				filterable: true,
-				filterType: 'text',
 			},
 			{
 				title: 'Prénom',
 				key: 'firstname',
-				filterable: true,
-				filterType: 'text',
 			},
 			{
 				title: 'Email',
 				value: 'email',
-				filterable: true,
-				filterType: 'text',
 			},
 		],
-		items: [
+		'items': [
 			{
 				firstname: 'Virginie',
 				lastname: 'Beauchesne',
@@ -1581,74 +2399,53 @@ export const CustomFilterInputs: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		caption: '',
-		options: {
+		'options': {
 			itemsPerPage: 4,
-			filters: [],
-		},
-		filterInputConfig: {
-			variant: 'outlined',
-			density: 'comfortable',
-			hideDetails: true,
-			clearable: false,
-			disableErrorHandling: true,
 		},
-		showFilters: true,
-		suffix: 'filter-text-table',
-		density: 'default',
-		striped: false,
+		'suffix': 'resizable-columns',
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
-				// Create reactive references
-				const options = ref(args.options)
-				const items = ref(args.items)
-
-				return {
-					args,
-					options,
-					items,
-				}
+				return { args }
 			},
 			template: `
 				<SyTable
-					v-model:options="options"
-					:headers="args.headers"
-					:items="items"
-					:caption="args.caption"
-					:show-filters="args.showFilters"
-					:filter-input-config="args.filterInputConfig"
-					:resizable-columns="args.resizableColumns"
-					:suffix="args.suffix"
-					:density="args.density"
+					v-model:options="args.options"
+					v-bind="args"
+					suffix="resizable-columns"
 				/>
 			`,
 		}
 	},
 }
 
-export const ManyTables: Story = {
+export const RowSelection: Story = {
+	name: 'Row Selection',
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
 				<template>
-					<div class="d-flex flex-column gap-4">
-						<SyTable
-							v-model:options="options1"
-							:headers="headers"
-							:items="items1"
-							suffix="table-1"
-						/>
-						<SyTable
-							v-model:options="options2"
-							:headers="headers"
-							:items="items2"
-							suffix="table-2"
-						/>
+					<SyTable
+						v-model:options="options"
+						v-model="selection"
+						:headers="headers"
+						:items="items"
+						show-select
+						show-filters
+						suffix="selection-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 : items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : items.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
 					</div>
 				</template>
 				`,
@@ -1660,14 +2457,10 @@ export const ManyTables: Story = {
 					import { ref } from 'vue'
 					import { SyTable } from '@cnamts/synapse'
 					
-					const options1 = ref({
+					const options = ref({
 						itemsPerPage: 4,
 					})
 					
-					const options2 = ref({
-						itemsPerPage: 2,
-					})
-					
 					const headers = ref([
 						{
 							title: 'Nom',
@@ -1678,7 +2471,7 @@ export const ManyTables: Story = {
 							key: 'firstname',
 						},
 						{
-                            title: 'Email',
+							title: 'Email',
 							value: 'email',
 						},
 					])
@@ -1767,53 +2560,47 @@ export const ManyTables: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
+		options: {
+			itemsPerPage: 4,
+		},
 		caption: '',
-		suffix: 'multi-server',
+		suffix: 'selection-table',
 		density: 'default',
 		striped: false,
+		showSelect: true,
+		showFilters: true,
 	},
 	render(args) {
 		return {
 			components: { SyTable },
 			setup() {
-				const options1 = ref<Partial<DataOptions>>({
-					itemsPerPage: 4,
-				})
-				const options2 = ref<Partial<DataOptions>>({
-					itemsPerPage: 2,
-				})
-				return { args, options1, options2 }
+				const items = ref(args.items)
+				const selection = ref([])
+				return { args, selection, items }
 			},
 			template: `
 				<div>
 					<SyTable
-						v-model:options="options1"
-						:resizable-columns="args.resizableColumns"
-						:headers="args.headers"
-						:items="args.items"
-						:caption="args.caption"
-						:density="args.density"
-						:striped="args.striped"
-						suffix="table1"
-						class="mb-10"
-					/>
-					<SyTable
-						v-model:options="options2"
-						:resizable-columns="args.resizableColumns"
-						:headers="args.headers"
-						:items="args.items"
-						:caption="args.caption"
-						:density="args.density"
-						:striped="args.striped"
-						suffix="table2"
+						v-model:options="args.options"
+						v-model="selection"
+						v-bind="args"
+						suffix="selection-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 : args.items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : args.items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : args.items.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
+					</div>
 				</div>
 			`,
 		}
 	},
 }
 
-export const ResizableColumns: Story = {
+export const ColumnControls: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -1824,8 +2611,8 @@ export const ResizableColumns: Story = {
 						v-model:options="options"
 						:headers="headers"
 						:items="items"
-						:resizable-columns="true"
-						suffix="resizable-columns"
+						suffix="column-control-table"
+						enable-column-controls
 					/>
 				</template>
 				`,
@@ -1851,7 +2638,7 @@ export const ResizableColumns: Story = {
 							key: 'firstname',
 						},
 						{
-							title: 'Email',
+                            title: 'Email',
 							value: 'email',
 						},
 					])
@@ -1894,8 +2681,7 @@ export const ResizableColumns: Story = {
 		],
 	},
 	args: {
-		resizableColumns: true,
-		headers: [
+		'headers': [
 			{
 				title: 'Nom',
 				key: 'lastname',
@@ -1909,7 +2695,7 @@ export const ResizableColumns: Story = {
 				value: 'email',
 			},
 		],
-		items: [
+		'items': [
 			{
 				firstname: 'Virginie',
 				lastname: 'Beauchesne',
@@ -1941,12 +2727,17 @@ export const ResizableColumns: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		options: {
+		'options': {
 			itemsPerPage: 4,
 		},
-		suffix: 'resizable-columns',
+		'caption': '',
+		'suffix': 'column-control-table',
+		'density': 'default',
+		'striped': false,
+		'enableColumnControls': true,
+		'onUpdate:options': fn(),
 	},
-	render(args) {
+	render: (args) => {
 		return {
 			components: { SyTable },
 			setup() {
@@ -1955,10 +2746,7 @@ export const ResizableColumns: Story = {
 			template: `
 				<SyTable
 					v-model:options="args.options"
-					:headers="args.headers"
-					:items="args.items"
-					:resizableColumns="args.resizableColumns"
-					:suffix="args.suffix"
+					v-bind="args"
 				/>
 			`,
 		}