Merge pull request #406 from paynezhuang/feat/table-total-items

feat(projects): add table showTotal options

packages/hooks/src/use-table.ts

@@ -57,6 +57,12 @@ export type TableConfig<A extends ApiFn, T, C> = {
    * @default true
    */
   immediate?: boolean;
+  /**
+   * whether to display the total items count
+   *
+   * @default false
+   */
+  showTotal?: boolean;
 };
 
 export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {

src/hooks/common/table.ts

@@ -13,7 +13,9 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
   const scope = effectScope();
   const appStore = useAppStore();
 
-  const { apiFn, apiParams, immediate } = config;
+  const isMobile = computed(() => appStore.isMobile);
+
+  const { apiFn, apiParams, immediate, showTotal } = config;
 
   const SELECTION_KEY = '__selection__';
 
@@ -124,14 +126,20 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
       });
 
       getData();
+    },
+    ...(showTotal
+      ? {
+          prefix: page => $t('datatable.itemCount', { total: page.itemCount })
         }
+      : {})
   });
 
   // this is for mobile, if the system does not support mobile, you can use `pagination` directly
   const mobilePagination = computed(() => {
     const p: PaginationProps = {
       ...pagination,
-      pageSlot: appStore.isMobile ? 3 : 9
+      pageSlot: isMobile.value ? 3 : 9,
+      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
     };
 
     return p;

src/locales/langs/en-us.ts

@@ -446,6 +446,9 @@ const local: App.I18n.Schema = {
     expand: 'Expand Menu',
     pin: 'Pin',
     unpin: 'Unpin'
+  },
+  datatable: {
+    itemCount: 'Total {total} items'
   }
 };
 

src/locales/langs/zh-cn.ts

@@ -446,6 +446,9 @@ const local: App.I18n.Schema = {
     expand: '展开菜单',
     pin: '固定',
     unpin: '取消固定'
+  },
+  datatable: {
+    itemCount: '共 {total} 条'
   }
 };
 

src/typings/app.d.ts

@@ -605,6 +605,9 @@ declare namespace App {
         pin: string;
         unpin: string;
       };
+      datatable: {
+        itemCount: string;
+      };
     };
 
     type GetI18nKey<T extends Record<string, unknown>, K extends keyof T = keyof T> = K extends string

src/typings/naive-ui.d.ts

@@ -42,6 +42,6 @@ declare namespace NaiveUI {
 
   type NaiveTableConfig<A extends TableApiFn> = Pick<
     import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
-    'apiFn' | 'apiParams' | 'columns' | 'immediate'
+    'apiFn' | 'apiParams' | 'columns' | 'immediate' | 'showTotal'
   >;
 }

src/views/manage/user/index.vue

@@ -12,6 +12,7 @@ const appStore = useAppStore();
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetUserList,
+  showTotal: true,
   apiParams: {
     current: 1,
     size: 10,