Add per-user saved column visibility for tables

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/WooCommerceSettingsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
+import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import type {
@@ -241,7 +242,10 @@ onMounted(() => {
         description="همگام‌سازی را بزنید یا وب‌هوک را وصل کنید."
       />
       <div v-else class="table-wrap">
-        <table>
+        <div class="tc-row">
+          <TableColumnsMenu table-key="woocommerce.orders" align="end" />
+        </div>
+        <table v-table-cols="'woocommerce.orders'">
           <thead>
             <tr>
               <th>سفارش ووکامرس</th>