v-sistec-features 1.25.0 → 1.26.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.25.0",
+  "version": "1.26.2",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",

package/src/DatatableVue/components/SearchDatatable.vue

@@ -1,58 +1,60 @@
 <template>
-    <div class="dropdown d-flex">
-        <a v-if="item_use.includes(2)" href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown"
-            title="Pesquisas Prédefinidas">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" width="24" height="24"
-                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                stroke-linejoin="round">
+
+
+    <a v-if="item_use.includes(2)" href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown"
+        title="Pesquisas Prédefinidas">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" width="24" height="24"
+            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+            stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path
+                d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z">
+            </path>
+        </svg>
+    </a>
+    <div class="input-icon">
+        <input type="text" class="form-control ms-1" id="inputSearchVDataTable" v-model="modelSearch"
+            @keyup.enter="searchEnter" :placeholder="placeholder_search">
+
+        <span v-if="modelSearch" @click="cleanSearch()" class=" inputClose" title="Limpar pesquisa">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                class="icon icon-tabler icons-tabler-outline icon-tabler-x">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M18 6l-12 12" />
+                <path d="M6 6l12 12" />
+            </svg>
+        </span>
+        <span v-else class="input-icon-addon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path
-                    d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z">
-                </path>
+                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
+                <path d="M21 21l-6 -6"></path>
             </svg>
-        </a>
-        <div class="input-icon">
-            <input type="text" class="form-control ms-1" id="inputSearchVDataTable" v-model="modelSearch"
-                @keyup.enter="searchEnter" :placeholder="placeholder_search">
-
-            <span v-if="modelSearch" @click="cleanSearch()" class=" inputClose" title="Limpar pesquisa">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                    class="icon icon-tabler icons-tabler-outline icon-tabler-x">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                    <path d="M18 6l-12 12" />
-                    <path d="M6 6l12 12" />
-                </svg>
-            </span>
-            <span v-else class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-                    <path d="M21 21l-6 -6"></path>
-                </svg>
-            </span>
-        </div>
-        <div v-if="item_use.includes(2)" class="dropdown-menu">
-            <template v-for="(filter, index) in props.list_filter" :key="index">
-                <router-link v-if="('type' in filter ? filter.type === 1 : false) && ('visible' in filter ? filter.visible : true)" :to="filter?.to"
-                    class="dropdown-item cursor-pointer">
-                    {{ filter.text }}
-                </router-link>
-                <a v-else-if="('type' in filter ? filter.type === 2 : true) && ('visible' in filter ? filter.visible : true)"
-                    @click.prevent="tradeFilter(String(filter.value))" class="dropdown-item cursor-pointer"
-                    :class="modelFilter === filter?.value ? 'bg-info text-dark selected' : ''">
-                    {{ filter.text }}
-                </a>
-                <a v-else-if="('type' in filter ? filter.type === 3 : true) && ('visible' in filter ? filter.visible : true)" @click.prevent="clickItem(filter)"
-                    class="dropdown-item cursor-pointer"
-                    :class="filter?.active ? 'bg-info text-dark selected' : ''"
-                    >
-                    {{ filter.text }}
-                </a>
-            </template>
-        </div>
+        </span>
     </div>
+    <div v-if="item_use.includes(2)" class="dropdown-menu">
+        <template v-for="(filter, index) in props.list_filter" :key="index">
+            <router-link
+                v-if="('type' in filter ? filter.type === 1 : false) && ('visible' in filter ? filter.visible : true)"
+                :to="filter?.to" class="dropdown-item cursor-pointer">
+                {{ filter.text }}
+            </router-link>
+            <a v-else-if="('type' in filter ? filter.type === 2 : true) && ('visible' in filter ? filter.visible : true)"
+                @click.prevent="tradeFilter(String(filter.value))" class="dropdown-item cursor-pointer"
+                :class="modelFilter === filter?.value ? 'bg-info text-dark selected' : ''">
+                {{ filter.text }}
+            </a>
+            <a v-else-if="('type' in filter ? filter.type === 3 : true) && ('visible' in filter ? filter.visible : true)"
+                @click.prevent="clickItem(filter)" class="dropdown-item cursor-pointer"
+                :class="filter?.active ? 'bg-info text-dark selected' : ''">
+                {{ filter.text }}
+            </a>
+        </template>
+    </div>
+
+
 </template>
 <script setup lang="ts">
 import { computed, watch } from 'vue';
@@ -64,6 +66,7 @@ interface SearchProps {
     placeholder_search?: string;
     deactivate_search_on_clear?: boolean;
     deactivate_search_empty?: boolean;
+
 }
 const props = withDefaults(defineProps<SearchProps>(), {
     filter: "",
@@ -148,7 +151,7 @@ function tradeFilter(newFilter: string): void {
 
 function cleanSearch(): void {
     modelSearch.value = ""
-    if (!props.deactivate_search_on_clear){
+    if (!props.deactivate_search_on_clear) {
         emit('search'); // emite o evento de busca para atualizar a lista
     }
     emit('clickedClearSearch');

package/src/DatatableVue/components/VColumn.vue

@@ -4,12 +4,13 @@
 
 <script setup lang="ts">
 import { inject, onMounted, useSlots } from 'vue';
+import type { Component } from 'vue';
 import { dataTableApiKey } from '../keys';
 const column_internal_id = crypto.randomUUID();
 defineSlots<{
   // props para o slot body 
   body?: (props: { item: any }) => any,
-  col_header?: (props: { col: any, locked: boolean }) => any,
+  col_header?: (props: { col: any, locked: boolean, OrderingComponent: Component  }) => any,
   col_header_midle?: (props: { col: any, locked: boolean }) => any,
 }>();
 interface VColumnProps {

package/src/DatatableVue/components/VDataTable.vue

@@ -19,23 +19,41 @@
           <slot name="fieldMiddle">
 
           </slot>
+
           <Teleport :to="options.search_teleport || 'body'" :disabled="!options.search_teleport">
-            <slot name="search-field" :search="pagination.search" :filter="pagination.filter" :reSearch="reSearch"
-              :list_filter="options.list_filter" :item_use="item_use">
+            <div class="dropdown d-flex">
               <Search v-if="!options.disable_search" v-model:search="pagination.search"
                 v-model:filter="pagination.filter" :list_filter="options.list_filter" :item_use="item_use"
                 @search="reSearch" :deactivate_search_on_clear="options.deactivate_search_on_clear"
                 :placeholder_search="options.placeholder_search"
                 :deactivate_search_empty="options.deactivate_search_empty"
-                @clicked-clear-search="$emit('clickedClearSearch')" />
-            </slot>
+                :use_column_manager="options.use_column_manager" :toggleColumnVisibility="toggleColumnVisibility"
+                :columns_list="columns_list" @clicked-clear-search="$emit('clickedClearSearch')">
+
+                <template #search-field>
+                  <slot name="search-field" :search="pagination.search" :filter="pagination.filter"
+                    :reSearch="reSearch">
+                  </slot>
+                </template>
+              </Search>
+
+              <VExtraActions :use_column_manager="options.use_column_manager" :columns_list="columns_list"
+                :toggleColumnVisibility="toggleColumnVisibility">
+                <template #extra-actions>
+                  <slot name="extra-actions">
+                  </slot>
+                </template>
+              </VExtraActions>
+            </div>
+
           </Teleport>
         </div>
         <slot name="item-selected-info" :selected_items="selected_items" :clearSelection="() => selected_items = []">
           <div v-if="(options.use_checkbox && selected_items.length > 0) && !options.deactivate_selected_info"
             class="alert alert-cyan d-flex justify-content-center align-items-center py-2" role="alert">
             <h4 class="alert-title m-0"> <strong>oi Itens Selecionados:</strong> <span
-                class="badge bg-azure text-azure-fg">{{ selected_items.length }}</span></h4>
+                class="badge bg-azure text-azure-fg">{{
+                  selected_items.length }}</span></h4>
             <a class=" cursor-pointer " @click="selected_items = []">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -72,9 +90,8 @@
             <table class="table table-vcenter table-selectable" :class="options.class_table">
               <thead>
 
-                <draggable v-model="draggableColumns" tag="tr" item-key="id" :animation="400"
-                  ghost-class="ghost-item" drag-class="dragging-item" @start="isDraggingColumns = true"
-                  @end="() => onDragEnd()">
+                <draggable v-model="draggableColumns" tag="tr" item-key="id" :animation="400" ghost-class="ghost-item"
+                  drag-class="dragging-item" @start="isDraggingColumns = true" @end="() => onDragEnd()">
 
                   <template #header>
                     <th v-if="options.use_expandable_items"></th>
@@ -247,6 +264,7 @@ import { readonly, ref, provide, computed, watch, nextTick, inject, onMounted }
 import { DATA_TABLE_CONFIG } from '@/config/datatableConfig'
 import PaginationDatatable from '@/Pagination/Pagination.vue';
 import Search from './SearchDatatable.vue';
+import VExtraActions from './VExtraActions.vue';
 import { useImagePreview } from '../composables/useImagePreview';
 import { dataTableApiKey, type ColumnConfiguration } from '../keys';
 import draggable from 'vuedraggable';
@@ -256,6 +274,7 @@ import { useCheckBox } from '../composables/useCheckBox.ts';
 import VDataTableLoading from './VDataTableLoading.vue';
 import VThDataTable from './VThDataTable.vue';
 
+
 const globalConfig = inject(DATA_TABLE_CONFIG, {});
 const {
   isHovering,
@@ -295,6 +314,8 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
   pagination_teleport: null,
   search_teleport: null,
   show_header_when_empty: false,
+  storage_id: '',
+  use_column_manager: false,
 });
 const options = computed(() => {
   return {
@@ -334,6 +355,8 @@ const options = computed(() => {
     retry_attempts: props.retry_attempts ?? globalConfig.retry_attempts ?? 3,
     retry_delay: props.retry_delay ?? globalConfig.retry_delay ?? 2000,
     show_header_when_empty: props.show_header_when_empty ?? globalConfig.show_header_when_empty ?? false,
+    storage_id: props.storage_id ?? globalConfig.storage_id ?? '',
+    use_column_manager: props.use_column_manager ?? globalConfig.use_column_manager ?? false,
   };
 });
 const emit = defineEmits(['tradePage', 'beforeFetch', 'afterFetch', 'clickedClearSearch']);
@@ -388,6 +411,92 @@ const {
   atLeastOneSelected, toggleSelectAll, toggleItemSelection
 } = useCheckBox(options.value, items);
 
+
+
+// Variável computada que forma uma string exclusiva para garantir que este cache não atropele o cache de outra tabela.
+const storageKey = computed(() => {
+  if (!options.value.storage_id) return null;
+
+  return `vdatatable_${options.value.storage_id}_${options.value.endpoint}`;
+});
+
+/* 
+Recebe: Nada.
+Devolve: Nada.
+Por que é usada: Inspeciona cada coluna para gerar um ID confiável de cache. Se for incapaz de gerar IDs únicos sem conflitos, a aplicação é encerrada propositalmente.
+*/
+function validateAndAssignKeys(): void {
+  for (const col of columns.value) {
+    let key = '';
+    const fieldCount = columns.value.filter(c => c.field === col.field).length;
+
+    if (col.field && fieldCount === 1) {
+      key = col.field;
+    } else {
+      const headerCount = columns.value.filter(c => c.header === col.header).length;
+      if (col.header && headerCount === 1) {
+        key = col.header;
+      } else {
+        throw new Error(`[VDataTable] Falha de integridade: Impossível designar um ID único de armazenamento. O 'field' e 'header' estão duplicados ou ausentes. Header ofensor: ${col.header}`);
+      }
+    }
+    col.storage_key = key;
+  }
+}
+
+/* 
+Recebe: Nada.
+Devolve: Nada.
+Por que é usada: Converte o estado de visibilidade e a ordem das colunas para JSON e grava no navegador do usuário.
+*/
+function saveColumnsState(): void {
+  if (!storageKey.value) return;
+  const state = columns.value.map(col => ({
+    storage_key: col.storage_key,
+    visible: col.visible
+  }));
+  localStorage.setItem(storageKey.value, JSON.stringify(state));
+}
+
+/* 
+Recebe: Nada.
+Devolve: Nada.
+Por que é usada: Tenta recuperar o estado anterior da tabela. Caso detecte mudanças na estrutura das colunas, ele expurga o cache velho e impõe a nova realidade.
+*/
+function loadColumnsState(): void {
+  if (!storageKey.value) return;
+  const saved = localStorage.getItem(storageKey.value);
+  if (!saved) return;
+
+  try {
+    const parsed = JSON.parse(saved);
+    const currentKeys = columns.value.map(c => c.storage_key).sort();
+    const savedKeys = parsed.map((p: any) => p.storage_key).sort();
+
+    if (JSON.stringify(currentKeys) !== JSON.stringify(savedKeys)) {
+      localStorage.removeItem(storageKey.value);
+      saveColumnsState();
+      return;
+    }
+
+    const newColumnsOrder = [];
+    for (const savedCol of parsed) {
+      const found = columns.value.find(c => c.storage_key === savedCol.storage_key);
+      if (found) {
+        found.visible = savedCol.visible;
+        newColumnsOrder.push(found);
+      }
+    }
+
+    // Atualiza o array in-place para não destruir a instância que o vuedraggable vigia
+    columns.value.splice(0, columns.value.length, ...newColumnsOrder);
+
+  } catch (e) {
+    localStorage.removeItem(storageKey.value);
+  }
+}
+
+
 // =======================================================
 // 4. PROPRIEDADES COMPUTADAS
 // =======================================================
@@ -404,7 +513,9 @@ const draggableColumns = computed({
   set(newUnlockedOrder) {
     const locked = columns.value.filter(c => c.locked);
     const hidden = columns.value.filter(c => !c.locked && c.visible === false);
-    columns.value = [...newUnlockedOrder, ...hidden, ...locked];
+    // Usa splice para não quebrar a referência de reatividade do array original!
+    columns.value.splice(0, columns.value.length, ...newUnlockedOrder, ...hidden, ...locked);
+    saveColumnsState();
   }
 });
 // colunas RENDERIZADAS (ordem final)
@@ -435,6 +546,7 @@ function toggleColumnVisibility(id: string): void {
   const coluna = columns.value.find(c => c.id === id);
   if (coluna) {
     coluna.visible = !coluna.visible;
+    saveColumnsState();
   }
 }
 
@@ -470,7 +582,6 @@ watch(response, (newResponse: any) => {
 }, { immediate: true });
 
 
-
 // =======================================================
 // 6. MÉTODOS
 // =======================================================
@@ -635,14 +746,40 @@ onMounted(() => {
       reSearch();
     });
   }
+  nextTick(() => {
+    if (options.value.storage_id) {
+      validateAndAssignKeys();
+      loadColumnsState();
+    }
+  });
 });
 
 watch(
-  () => options.value.add_params,
   () => {
-    reSearch();
+    const params = typeof options.value.add_params === 'function'
+      ? options.value.add_params()
+      : options.value.add_params;
+    return JSON.stringify(params);
   },
-  { deep: true }
+  (newVal, oldVal) => {
+    if (newVal !== oldVal && oldVal !== undefined) {
+      reSearch();
+    }
+  }
+);
+/* 
+========
+Observa mudanças no endpoint.
+Caso a rota da API mude dinamicamente, ele reseta a tabela para a página inicial com segurança.
+========
+*/
+watch(
+  () => options.value.endpoint,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal && oldVal !== undefined) {
+      pagination.value.current_page = options.value.page_starts_at;
+    }
+  }
 );
 </script>
 

package/src/DatatableVue/components/VExtraActions.vue

@@ -0,0 +1,45 @@
+<template>
+
+    <div v-if="use_column_manager" class="dropdown d-inline-block ms-2">
+        <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"
+            title="Gerenciar Colunas visíveis">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-columns" width="24" height="24"
+                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M4 6l5.5 0" />
+                <path d="M4 10l5.5 0" />
+                <path d="M4 14l5.5 0" />
+                <path d="M4 18l5.5 0" />
+                <path d="M14.5 6l5.5 0" />
+                <path d="M14.5 10l5.5 0" />
+                <path d="M14.5 14l5.5 0" />
+                <path d="M14.5 18l5.5 0" />
+            </svg>
+        </button>
+        <div class="dropdown-menu dropdown-menu-end p-3 shadow-sm" style="min-width: 220px; z-index: 1050;">
+            <h6 class="dropdown-header text-uppercase fw-bold mb-2">Exibir Colunas</h6>
+            <div class="d-flex flex-column gap-2">
+                <label v-for="coluna in columns_list" :key="coluna.id" class="form-check cursor-pointer m-0">
+                    <input class="form-check-input" type="checkbox" :checked="coluna.visible" :disabled="coluna.locked"
+                        @change="toggleColumnVisibility(coluna.id)">
+                    <span class="form-check-label user-select-none">{{ coluna.header }}</span>
+                </label>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+interface SearchProps {
+    columns_list?: any[];
+    use_column_manager?: boolean;
+    toggleColumnVisibility?: (columnId: string) => void;
+}
+withDefaults(defineProps<SearchProps>(), {
+    columns_list: () => [],
+    use_column_manager: false,
+    toggleColumnVisibility: () => { }
+});
+
+
+</script>

package/src/DatatableVue/components/VOrderingIcon.vue

@@ -0,0 +1,50 @@
+<template>
+  <span v-if="use_ordering" @click="emit('toggle')" class="cursor-pointer">
+    <svg v-if="!props.orderings_state || props.orderings_state === 'none'" xmlns="http://www.w3.org/2000/svg"
+      width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round">
+      <path d="m3 8 4-4 4 4"></path>
+      <path d="m11 16-4 4-4-4"></path>
+      <path d="M7 4v16"></path>
+      <path d="M15 8h6"></path>
+      <path d="M15 16h6"></path>
+      <path d="M13 12h8"></path>
+    </svg>
+
+    <svg v-else-if="props.orderings_state === 'decreasing'" xmlns="http://www.w3.org/2000/svg" width="16"
+      height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="m3 16 4 4 4-4"></path>
+      <path d="M7 20V4"></path>
+      <path d="M11 4h10"></path>
+      <path d="M11 8h7"></path>
+      <path d="M11 12h4"></path>
+    </svg>
+
+    <svg v-else-if="props.orderings_state === 'increasing'" xmlns="http://www.w3.org/2000/svg" width="16"
+      height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+      stroke-linejoin="round">
+      <path d="m3 8 4-4 4 4"></path>
+      <path d="M7 4v16"></path>
+      <path d="M11 12h4"></path>
+      <path d="M11 16h7"></path>
+      <path d="M11 20h10"></path>
+    </svg>
+  </span>
+</template>
+
+<script setup lang="ts">
+/* 
+========
+Componente interno de uso exclusivo do VDataTable para renderizar o ícone de ordenação.
+========
+*/
+const props = defineProps<{
+  orderings_state?: 'none' | 'increasing' | 'decreasing';
+  use_ordering?: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [void];
+}>();
+</script>

package/src/DatatableVue/components/VThDataTable.vue

@@ -1,56 +1,22 @@
 <template>
   <th :class="class_all">
     <div :class="{ 'header-ordering': use_ordering }">
-      
-      <component
-        v-if="hasCustomHeader"
-        :is="col.colHeaderSlot"
-        v-bind="{ col: props.col, locked: props.locked }"
-      ></component>
-      
-      <template v-else>
-        <span>
-          {{ props.header }}
-        </span>
 
-        <component
-          v-if="col.colHeaderMidleSlot"
-          :is="col.colHeaderMidleSlot"
-          v-bind="{ col: props.col, locked: props.locked }"
-        ></component>
+      <component v-if="hasCustomHeader" :is="col.colHeaderSlot"
+        v-bind="{ col: props.col, locked: props.locked, OrderingComponent }"></component>
+
+      <template v-else>
+        <div class="d-flex justify-content-between align-items-center">
+          <span>
+            {{ props.header }}
+          </span>
 
-        <span v-if="use_ordering" @click="emit('toggleOrderingState')" class="ms-2 cursor-pointer">
-          <svg v-if="!props.orderings_state || props.orderings_state === 'none'" xmlns="http://www.w3.org/2000/svg"
-            width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-            stroke-linecap="round" stroke-linejoin="round">
-            <path d="m3 8 4-4 4 4"></path>
-            <path d="m11 16-4 4-4-4"></path>
-            <path d="M7 4v16"></path>
-            <path d="M15 8h6"></path>
-            <path d="M15 16h6"></path>
-            <path d="M13 12h8"></path>
-          </svg>
+          <component v-if="col.colHeaderMidleSlot" :is="col.colHeaderMidleSlot"
+            v-bind="{ col: props.col, locked: props.locked }"></component>
 
-          <svg v-else-if="props.orderings_state === 'decreasing'" xmlns="http://www.w3.org/2000/svg" width="16"
-            height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-            stroke-linejoin="round">
-            <path d="m3 16 4 4 4-4"></path>
-            <path d="M7 20V4"></path>
-            <path d="M11 4h10"></path>
-            <path d="M11 8h7"></path>
-            <path d="M11 12h4"></path>
-          </svg>
+          <component :is="OrderingComponent" />
+        </div>
 
-          <svg v-else-if="props.orderings_state === 'increasing'" xmlns="http://www.w3.org/2000/svg" width="16"
-            height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-            stroke-linejoin="round">
-            <path d="m3 8 4-4 4 4"></path>
-            <path d="M7 4v16"></path>
-            <path d="M11 12h4"></path>
-            <path d="M11 16h7"></path>
-            <path d="M11 20h10"></path>
-          </svg>
-        </span>
       </template>
 
     </div>
@@ -58,8 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Comment, Fragment, Text } from 'vue';
-
+import { computed, Comment, Fragment, Text, h } from 'vue';
+import VOrderingIcon from './VOrderingIcon.vue';
 const props = defineProps<{
   header: string;
   class_column: string;
@@ -68,7 +34,11 @@ const props = defineProps<{
   orderings_state: 'none' | 'increasing' | 'decreasing';
   col: any;
 }>();
-
+const OrderingComponent = () => h(VOrderingIcon, {
+  orderings_state: props.orderings_state,
+  use_ordering: props.use_ordering,
+  onToggle: () => emit('toggleOrderingState')
+});
 const class_all = computed(() => {
   return {
     'header-draggable': !props.locked,

package/src/DatatableVue/composables/useDataTableFetch.ts

@@ -15,10 +15,9 @@ export function useDataTableFetch<T>(
     const items = ref<T[]>([]) as Ref<T[]>;
 
     const urlReativa = computed(() => {
-        pagination.value.current_page = props.page_starts_at;
         return props.endpoint;
     });
-
+    
     const default_params = computed<Record<string, any>>(() => ({
         [props.page_param_name]: pagination.value.current_page + 1,
         [props.page_size_param_name]: pagination.value.limit_per_page,

package/src/DatatableVue/keys.ts

@@ -26,6 +26,8 @@ export interface ColumnConfiguration {
   // não é prop, é uma propriedade interna do VDataTable para controlar a visibilidade da coluna
   visible?: boolean; 
   id: string; // ID único da coluna, gerado internamente pelo VDataTable
+  // Chave gerada dinamicamente para salvar e recuperar o estado da coluna no localstorage
+  storage_key?: string;
 }
 
 // A API que o VDataTable "fornece" para os filhos

package/src/DatatableVue/types/v-data-table.ts

@@ -78,6 +78,9 @@ export interface VDataTableProps {
   pagination_teleport?: string | HTMLElement | null;
   search_teleport?: string | HTMLElement | null;
   show_header_when_empty?: boolean;
+  // Propriedade para ativar a persistência de configuração da tabela no localstorage
+  storage_id?: string;
+  use_column_manager?: boolean;
 }
 export type DataTablePropsWithDefaults = VDataTableProps & {
     // Strings
@@ -129,6 +132,8 @@ export type DataTablePropsWithDefaults = VDataTableProps & {
     add_params: Record<string, any> | (() => Record<string, any>);
     list_filter: any[]; 
     custom_loading: any | null; 
+    storage_id: string;
+    use_column_manager: boolean;
 };
 export interface ExposedFunctions<T extends Record<string, any>> {
   execute: () => void;