feat(components): Column settings support fixed columns.

Author: m-xlsea

packages/hooks/src/use-table.ts

@@ -23,6 +23,7 @@ export type TableColumnCheck = {
   title: TableColumnCheckTitle;
   checked: boolean;
   visible: boolean;
+  fixed: 'left' | 'right' | 'unFixed';
 };
 
 export interface UseTableOptions<ResponseData, ApiData, Column, Pagination extends boolean> {
@@ -78,12 +79,14 @@ export default function useTable<ResponseData, ApiData, Column, Pagination exten
 
   function reloadColumns() {
     const checkMap = new Map(columnChecks.value.map(col => [col.key, col.checked]));
+    const fixedMap = new Map(columnChecks.value.map(col => [col.key, col.fixed]));
 
     const defaultChecks = getColumnChecks(columns());
 
     columnChecks.value = defaultChecks.map(col => ({
       ...col,
-      checked: checkMap.get(col.key) ?? col.checked
+      checked: checkMap.get(col.key) ?? col.checked,
+      fixed: (fixedMap.get(col.key) !== 'unFixed' ? fixedMap.get(col.key) : undefined) ?? col.fixed
     }));
   }
 

src/components/advanced/table-column-setting.vue

@@ -9,6 +9,19 @@ defineOptions({
 const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
   required: true
 });
+
+const tooltipRecord: Record<NaiveUI.TableColumnFixed, App.I18n.I18nKey> = {
+  left: 'datatable.fixed.right',
+  right: 'datatable.fixed.unFixed',
+  unFixed: 'datatable.fixed.left'
+};
+
+function handleFixed(column: NaiveUI.TableColumnCheck) {
+  const fixedOptions: NaiveUI.TableColumnFixed[] = ['left', 'right', 'unFixed'];
+  const index = fixedOptions.findIndex(item => item === column.fixed);
+  const nextIndex = index === fixedOptions.length - 1 ? 0 : index + 1;
+  column.fixed = fixedOptions[nextIndex];
+}
 </script>
 
 <template>
@@ -25,16 +38,29 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
       <div
         v-for="item in columns"
         :key="item.key"
-        class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
+        class="h-36px flex-y-center justify-between gap-6px"
         :class="{ hidden: !item.visible }"
       >
-        <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
-        <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
-          <template v-if="typeof item.title === 'function'">
-            <component :is="item.title" />
-          </template>
-          <template v-else>{{ item.title }}</template>
-        </NCheckbox>
+        <div class="flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
+          <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
+          <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
+            <template v-if="typeof item.title === 'function'">
+              <component :is="item.title" />
+            </template>
+            <template v-else>{{ item.title }}</template>
+          </NCheckbox>
+        </div>
+        <ButtonIcon
+          :disabled="!item.checked"
+          text
+          :focusable="false"
+          :tooltip-content="$t(tooltipRecord[item.fixed!])"
+          @click="handleFixed(item)"
+        >
+          <icon-octicon-pin-16 v-if="item.fixed === 'unFixed'" />
+          <icon-octicon-pin-16 v-else-if="item.fixed === 'left'" class="rotate-270" />
+          <icon-octicon-pin-slash-16 v-else />
+        </ButtonIcon>
       </div>
     </VueDraggable>
   </NPopover>

src/hooks/common/table.ts

@@ -266,20 +266,23 @@ function getColumnChecks<Column extends NaiveUI.TableColumn<any>>(
         key: column.key as string,
         title: column.title!,
         checked: true,
+        fixed: column.fixed ?? 'unFixed',
         visible: getColumnVisible?.(column) ?? true
       });
     } else if (column.type === 'selection') {
       checks.push({
         key: SELECTION_KEY,
         title: $t('common.check'),
         checked: true,
+        fixed: column.fixed ?? 'unFixed',
         visible: getColumnVisible?.(column) ?? false
       });
     } else if (column.type === 'expand') {
       checks.push({
         key: EXPAND_KEY,
         title: $t('common.expandColumn'),
         checked: true,
+        fixed: column.fixed ?? 'unFixed',
         visible: getColumnVisible?.(column) ?? false
       });
     }
@@ -301,7 +304,14 @@ function getColumns<Column extends NaiveUI.TableColumn<any>>(cols: Column[], che
     }
   });
 
-  const filteredColumns = checks.filter(item => item.checked).map(check => columnMap.get(check.key) as Column);
+  const filteredColumns = checks
+    .filter(item => item.checked)
+    .map(check => {
+      return {
+        ...columnMap.get(check.key),
+        fixed: check.fixed
+      } as Column;
+    });
 
   return filteredColumns;
 }

src/locales/langs/en-us.ts

@@ -356,7 +356,12 @@ const local: App.I18n.Schema = {
     unpin: 'Unpin'
   },
   datatable: {
-    itemCount: 'Total {total} items'
+    itemCount: 'Total {total} items',
+    fixed: {
+      left: 'Left Fixed',
+      right: 'Right Fixed',
+      unFixed: 'Unfixed'
+    }
   }
 };
 

src/locales/langs/zh-cn.ts

@@ -352,7 +352,12 @@ const local: App.I18n.Schema = {
     unpin: '取消固定'
   },
   datatable: {
-    itemCount: '共 {total} 条'
+    itemCount: '共 {total} 条',
+    fixed: {
+      left: '左固定',
+      right: '右固定',
+      unFixed: '取消固定'
+    }
   }
 };
 

src/typings/app.d.ts

@@ -578,6 +578,11 @@ declare namespace App {
       };
       datatable: {
         itemCount: string;
+        fixed: {
+          left: string;
+          right: string;
+          unFixed: string;
+        };
       };
     };
 

src/typings/naive-ui.d.ts

@@ -7,6 +7,7 @@ declare namespace NaiveUI {
   type DataTableSelectionColumn<T> = import('naive-ui').DataTableSelectionColumn<T>;
   type TableColumnGroup<T> = import('naive-ui/es/data-table/src/interface').TableColumnGroup<T>;
   type TableColumnCheck = import('@sa/hooks').TableColumnCheck;
+  type TableColumnFixed = import('@sa/hooks').TableColumnCheck['fixed'];
 
   type SetTableColumnKey<C, T> = Omit<C, 'key'> & { key: keyof T | (string & {}) };