create share store for table instances

src/ui/client/dashboard/components/Widget/Tabulator.vue

@@ -12,12 +12,20 @@ import {
   addColumnsWidth,
   a18yTable,
 } from "@utils/tabulator.js";
+import { useTableStore } from "@store/global.js";
+
+const tableStore = useTableStore();
 
 // TODO : ADD JSDOC COMPONENT
 
 const customComponents = ["Icons", "Text", "Fields", "Button", "ButtonGroup"];
 
 const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+    default: "table-component",
+  },
   columns: {
     type: Array,
     required: true,
@@ -160,6 +168,8 @@ onMounted(() => {
   table.instance.on("tableBuilt", () => {
     table.instance.redraw();
     a18yTable(table.instance);
+    // Add table instance to store in order to use it in other components
+    tableStore.setTable(props.id, table.instance);
   });
 });
 

src/ui/client/dashboard/pages/test/Test.vue

@@ -5,6 +5,10 @@ import GridLayout from "@components/Widget/GridLayout.vue";
 import DashboardLayout from "@components/Dashboard/Layout.vue";
 import Tabulator from "@components/Widget/Tabulator.vue";
 import { useEqualStr } from "@utils/global.js";
+import { useTableStore } from "@store/global.js";
+import { onMounted } from "vue";
+
+const tableStore = useTableStore();
 /**
  * @name Builder/Bans.vue
  * @description This component is lightweight builder containing only the necessary components to create the bans page.
@@ -104,6 +108,7 @@ const builder = [
       {
         type: "Tabulator",
         data: {
+          id: "table-test",
           columns: columns,
           items: items,
         },
@@ -111,6 +116,14 @@ const builder = [
     ],
   },
 ];
+
+onMounted(() => {
+  setTimeout(() => {
+    const table = tableStore.getTableById("table-test");
+    console.log(table);
+    table.setFilter("text", "keywords", "fesfs");
+  }, 1000);
+});
 </script>
 
 <template>

src/ui/client/dashboard/store/global.js

@@ -5,7 +5,7 @@ import { ref } from "vue";
  *  @name useBannerStore
  *  @description Store to share the current banner state (visible or not).
  *  This is useful to update components, specially fixed ones, related to the banner visibility.
- *  @returns {object{boolean, string, function}} - Object with the banner state, banner class and function to set the banner visibility.
+ *  @returns {object} - Object with the banner state, banner class and function to set the banner visibility.
  */
 export const useBannerStore = defineStore("banner", () => {
   const isBanner = ref(true);
@@ -23,7 +23,7 @@ export const useBannerStore = defineStore("banner", () => {
  *  @name useReadonlyStore
  *  @description Store to share the current readonly state (true or false).
  *  This is useful to unable or enable some inputs or actions related to the readonly state.
- *  @returns {object{boolean, function}} - Object with the readonly state and function to set the readonly state.
+ *  @returns {object} - Object with the readonly state and function to set the readonly state.
  */
 export const useReadonlyStore = defineStore("readonly", () => {
   const isReadOnly = ref(true);
@@ -34,3 +34,27 @@ export const useReadonlyStore = defineStore("readonly", () => {
 
   return { isReadOnly, setReadOnly };
 });
+
+/**
+ *  @name useTableStore
+ *  @description Store instiantiate Tabulator.js table using id prop component.
+ *  This is useful to get another component interact with the table and do some actions (delete, update, etc).
+ *  @returns {object{boolean, function}} - Object with functions to get one are all tables.
+ */
+export const useTableStore = defineStore("table", () => {
+  const tables = ref({});
+
+  async function setTable(id, tabulatorInstance) {
+    tables.value[id] = tabulatorInstance;
+  }
+
+  function getTableById(id) {
+    return tables.value[id];
+  }
+
+  function getTables() {
+    return tables.value;
+  }
+
+  return { setTable, getTableById, getTables };
+});