fix(comp:table): the pageIndex and pageSize should be controlled

package.json

@@ -74,17 +74,17 @@
     "@types/yaml-front-matter": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.1.0",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/compiler-dom": "^3.2.37",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-dom": "^3.2.39",
+    "@vue/compiler-sfc": "^3.2.39",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/reactivity": "^3.2.37",
-    "@vue/runtime-core": "^3.2.37",
-    "@vue/runtime-dom": "^3.2.37",
-    "@vue/shared": "^3.2.37",
+    "@vue/reactivity": "^3.2.39",
+    "@vue/runtime-core": "^3.2.39",
+    "@vue/runtime-dom": "^3.2.39",
+    "@vue/shared": "^3.2.39",
     "@vue/test-utils": "2.0.2",
     "c8": "^7.12.0",
     "chalk": "^4.1.2",
@@ -133,9 +133,9 @@
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
     "unplugin-vue-components": "^0.22.4",
-    "vite": "^3.0.5",
+    "vite": "^3.1.0",
     "vitest": "^0.21.1",
-    "vue": "^3.2.37",
+    "vue": "^3.2.39",
     "yaml-front-matter": "^4.1.1"
   },
   "engines": {

packages/components/table/demo/Server.vue

@@ -1,5 +1,12 @@
 <template>
-  <IxTable :columns="columns" :dataSource="dataSource" :rowKey="getRowKey" :pagination="pagination" :spin="loading">
+  <IxTable
+    :columns="columns"
+    :dataSource="dataSource"
+    :getKey="getRowKey"
+    :pagination="pagination"
+    :spin="loading"
+    @pageChange="setPagination"
+  >
   </IxTable>
 </template>
 
@@ -8,6 +15,39 @@ import { onMounted, reactive, ref } from 'vue'
 
 import { TableColumn, TablePagination } from '@idux/components/table'
 
+const pagination = reactive<TablePagination>({
+  showSizeChanger: true,
+})
+
+const setPagination = (pageIndex: number, pageSize: number) => {
+  // 如果修改了 pageSize, 应该把 pageIndex 重置为 1
+  if (pagination.pageSize !== pageSize) {
+    pagination.pageIndex = 1
+    pagination.pageSize = pageSize
+  } else {
+    pagination.pageIndex = pageIndex
+  }
+
+  fetchData(pagination.pageIndex, pagination.pageSize)
+}
+
+const loading = ref(false)
+
+const fetchData = async (pageIndex: number, pageSize: number) => {
+  loading.value = true
+
+  const { results } = await fetch(`https://randomuser.me/api?page=${pageIndex}&results=${pageSize}`).then(res =>
+    res.json(),
+  )
+
+  dataSource.value = results
+  pagination.total = 200 // mock the total data here
+
+  loading.value = false
+}
+
+onMounted(() => setPagination(1, 10))
+
 interface RandomUser {
   gender: string
   email: string
@@ -48,29 +88,4 @@ const columns: TableColumn<RandomUser>[] = [
 const dataSource = ref<RandomUser[]>([])
 
 const getRowKey = (record: RandomUser) => record.login.uuid
-
-const pagination = reactive<TablePagination>({
-  showSizeChanger: true,
-  onChange: (pageIndex, pageSize) => fetchData(pageIndex, pageSize),
-})
-
-const loading = ref(false)
-
-const fetchData = async (pageIndex: number, pageSize: number) => {
-  loading.value = true
-
-  const { results } = await fetch(`https://randomuser.me/api?page=${pageIndex}&results=${pageSize}`).then(res =>
-    res.json(),
-  )
-
-  loading.value = false
-
-  dataSource.value = results
-
-  pagination.pageIndex = pageIndex
-  pagination.pageSize = pageSize
-  pagination.total = 200 // mock the total data here
-}
-
-onMounted(() => fetchData(1, 10))
 </script>

packages/components/table/src/Table.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
     const filterableContext = useFilterable(columnsContext.flattedColumns)
     const expandableContext = useExpandable(props, columnsContext.flattedColumns)
     const tableLayout = useTableLayout(props, columnsContext, scrollContext, stickyContext.isSticky)
-    const { mergedPagination } = usePagination(props, config)
+    const { mergedPagination } = usePagination(props, config, mergedSize)
 
     const dataContext = useDataSource(
       props,

packages/components/table/src/composables/usePagination.ts

@@ -5,21 +5,23 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, computed, ref, watchEffect } from 'vue'
+import { type ComputedRef, computed, ref } from 'vue'
 
 import { callEmit } from '@idux/cdk/utils'
 import { type TableConfig, useGlobalConfig } from '@idux/components/config'
 
-import { type TablePagination, type TableProps } from '../types'
+import { type TablePagination, type TableProps, type TableSize } from '../types'
 
 export interface PaginationContext {
   mergedPagination: ComputedRef<TablePagination | null>
 }
 
-export function usePagination(props: TableProps, config: TableConfig): PaginationContext {
+export function usePagination(
+  props: TableProps,
+  config: TableConfig,
+  mergedSize: ComputedRef<TableSize>,
+): PaginationContext {
   const paginationConfig = useGlobalConfig('pagination')
-  const pageIndex = ref<number>()
-  const pageSize = ref<number>()
 
   const tempPagination = computed(() => {
     const { pagination } = props
@@ -29,34 +31,29 @@ export function usePagination(props: TableProps, config: TableConfig): Paginatio
     return pagination === true ? {} : pagination
   })
 
-  watchEffect(() => {
-    const pagination = tempPagination.value
-    pageIndex.value = pagination?.pageIndex ?? 1
-    pageSize.value = pagination?.pageSize ?? config.pagination.pageSize ?? paginationConfig.pageSize
-  })
-
-  const handlePageIndexChange = (index: number) => {
-    pageIndex.value = index
-    callEmit(tempPagination.value?.['onUpdate:pageIndex'], index)
-  }
+  const tempIndex = ref<number>(tempPagination.value?.pageIndex ?? 1)
+  const tempSize = ref<number>(
+    tempPagination.value?.pageSize ?? config.pagination.pageSize ?? paginationConfig.pageSize,
+  )
 
-  const handlePageSizeChange = (size: number) => {
-    pageSize.value = size
-    callEmit(tempPagination.value?.['onUpdate:pageSize'], size)
+  const handlePageChange = (pageIndex: number, pageSize: number) => {
+    tempIndex.value = pageIndex
+    tempSize.value = pageSize
+    callEmit(tempPagination.value?.onChange, pageIndex, pageSize)
   }
 
-  const mergedPagination = computed(() => {
+  const mergedPagination = computed<TablePagination | null>(() => {
     const pagination = tempPagination.value
     if (pagination === null) {
       return null
     }
     return {
       ...config.pagination,
       ...pagination,
-      pageIndex: pageIndex.value,
-      pageSize: pageSize.value,
-      'onUpdate:pageIndex': handlePageIndexChange,
-      'onUpdate:pageSize': handlePageSizeChange,
+      pageIndex: pagination.pageIndex ?? tempIndex.value,
+      pageSize: pagination.pageSize ?? tempSize.value,
+      size: mergedSize.value === 'sm' ? 'sm' : 'md',
+      onChange: handlePageChange,
     }
   })
 

packages/components/table/src/types.ts

@@ -41,7 +41,7 @@ export const tableProps = {
   getKey: { type: [String, Function] as PropType<string | ((record: any) => any)>, default: undefined },
   header: { type: [String, Object] as PropType<string | HeaderProps>, default: undefined },
   headless: { type: Boolean, default: undefined },
-  pagination: { type: [Boolean, Object] as PropType<boolean | TablePagination>, default: undefined },
+  pagination: { type: [Boolean, Object] as PropType<boolean | TablePagination>, default: true },
   /**
    * @deprecated please use `customAdditional` instead'
    */

tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "dist",
     "declarationDir": "dist",
     "lib": ["ESNext", "DOM"],
-    "target": "ES6",
+    "target": "ESNext",
     "moduleResolution": "node",
     "jsx": "preserve",
     "jsxFactory": "h",