fix(comp:table): pagination should hide when data empty (#1782)

IDuxFE · Jan 8, 2024 · 85d80e1 · 85d80e1
1 parent 0c2be7b
commit 85d80e1
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 118 deletions.
diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Table > basic work > render work 1`] = `
 "<div class=\\"ix-table ix-table-borderless ix-table-md\\">
   <!---->
   <div class=\\"ix-table-container ix-table-inset-shadow\\">
-    <div class=\\"ix-table-content\\">
+    <div class=\\"ix-table-content\\" style=\\"overflow-x: auto; overflow-y: auto;\\">
       <table class=\\"ix-table-table\\" style=\\"table-layout: auto;\\">
         <colgroup>
           <col class=\\"ix-table-col-expandable\\">
@@ -34,6 +34,8 @@ exports[`Table > basic work > render work 1`] = `
           </tr>
         </thead>
         <tbody class=\\"ix-table-tbody\\">
+          <!---->
+          <!---->
           <!---->
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\">

diff --git a/packages/components/table/demo/AutoHeight.vue b/packages/components/table/demo/AutoHeight.vue
@@ -17,6 +17,8 @@
       </template>
     </IxTable>
   </div>
+  <br />
+  <IxButton @click="toggleEmpty">ToggleEmpty</IxButton>
 </template>
 
 <script lang="ts" setup>
@@ -100,15 +102,25 @@ const columns: TableColumn<Data>[] = [
   },
 ]
 
-const data: Data[] = []
+const fullData: Data[] = []
 for (let i = 0; i < 100; i++) {
-  data.push({
+  fullData.push({
     key: i,
     name: `Edrward ${i}`,
     age: 32,
     address: `London Park no. ${i}`,
   })
 }
 
+const data = ref<Data[]>(fullData)
+
+const toggleEmpty = () => {
+  if (data.value.length > 0) {
+    data.value = []
+  } else {
+    data.value = fullData
+  }
+}
+
 const scroll: TableScroll = { width: 1500 }
 </script>
diff --git a/packages/components/table/demo/Basic.vue b/packages/components/table/demo/Basic.vue
@@ -1,19 +1,22 @@
 <template>
-  <IxTable :columns="columns" :dataSource="data">
-    <template #name="{ value }">
-      <IxButton mode="link">{{ value }}</IxButton>
-    </template>
-    <template #action="{ record }">
-      <IxButtonGroup :gap="8" mode="link" separator="|">
-        <IxButton>Invite {{ record.name }}</IxButton>
-        <IxButton>Delete</IxButton>
-      </IxButtonGroup>
-    </template>
-  </IxTable>
+  <IxSpace vertical style="width: 100%">
+    <IxTable :columns="columns" :dataSource="data">
+      <template #name="{ value }">
+        <IxButton mode="link">{{ value }}</IxButton>
+      </template>
+      <template #action="{ record }">
+        <IxButtonGroup :gap="8" mode="link" separator="|">
+          <IxButton>Invite {{ record.name }}</IxButton>
+          <IxButton>Delete</IxButton>
+        </IxButtonGroup>
+      </template>
+    </IxTable>
+    <IxButton @click="toggleEmpty"> ToggleEmpty </IxButton>
+  </IxSpace>
 </template>
 
 <script lang="ts" setup>
-import { h } from 'vue'
+import { h, ref } from 'vue'
 
 import { TableColumn } from '@idux/components/table'
 import { IxTag } from '@idux/components/tag'
@@ -59,14 +62,24 @@ const columns: TableColumn<Data>[] = [
   },
 ]
 
-const data: Data[] = []
+const fullData: Data[] = []
 for (let index = 0; index < 100; index++) {
-  data.push({
+  fullData.push({
     key: index,
     name: `Edrward ${index}`,
     age: 18 + index,
     address: `London Park no. ${index}`,
     tags: ['nice', 'developer'],
   })
 }
+
+const data = ref<Data[]>(fullData)
+
+const toggleEmpty = () => {
+  if (data.value.length > 0) {
+    data.value = []
+  } else {
+    data.value = fullData
+  }
+}
 </script>
diff --git a/packages/components/table/demo/Expandable.vue b/packages/components/table/demo/Expandable.vue
@@ -1,5 +1,11 @@
 <template>
-  <IxTable v-model:expandedRowKeys="expandedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
+  <IxTable
+    v-model:expandedRowKeys="expandedRowKeys"
+    tableLayout="fixed"
+    :columns="columns"
+    :dataSource="data"
+    :pagination="false"
+  >
     <template #name="{ value }">
       <IxButton mode="link">{{ value }}</IxButton>
     </template>
@@ -27,23 +33,68 @@ const expandedRowKeys = ref([1])
 const columns: TableColumn<Data>[] = [
   {
     type: 'expandable',
+    width: 60,
+    fixed: 'start',
     disabled: record => !record.description,
     onChange: expendedRowKeys => console.log(expendedRowKeys),
     customExpand: 'expand',
   },
   {
+    width: 400,
     title: 'Name',
     dataKey: 'name',
     customCell: 'name',
   },
   {
+    width: 200,
     title: 'Age',
     dataKey: 'age',
   },
   {
+    width: 400,
     title: 'Address',
     dataKey: 'address',
   },
+  {
+    width: 400,
+    title: 'data1',
+    dataKey: 'data1',
+  },
+  {
+    width: 400,
+    title: 'data2',
+    dataKey: 'data2',
+  },
+  {
+    width: 400,
+    title: 'data3',
+    dataKey: 'data3',
+  },
+  {
+    width: 400,
+    title: 'data4',
+    dataKey: 'data4',
+  },
+  {
+    width: 400,
+    title: 'data5',
+    dataKey: 'data5',
+  },
+  {
+    width: 400,
+    title: 'data6',
+    dataKey: 'data6',
+  },
+  {
+    width: 400,
+    title: 'data7',
+    dataKey: 'data7',
+  },
+  {
+    width: 400,
+    title: 'data8',
+    dataKey: 'data8',
+  },
 ]
 
 const data: Data[] = [

diff --git a/packages/components/table/demo/VirtualBoth.vue b/packages/components/table/demo/VirtualBoth.vue
@@ -9,10 +9,11 @@
     :virtualColWidth="150"
   >
   </IxTable>
+  <IxButton @click="toggleEmpty"> ToggleEmpty </IxButton>
 </template>
 
 <script lang="ts" setup>
-import { h } from 'vue'
+import { h, ref } from 'vue'
 
 import { TableColumn } from '@idux/components/table'
 import { IxText } from '@idux/components/text'
@@ -42,16 +43,26 @@ for (let index = 0; index < columnCount; index++) {
   })
 }
 
-const data: Data[] = []
+const fullData: Data[] = []
 for (let index = 0; index < rowCount; index++) {
   const item: Data = { key: index }
 
   for (let colIndex = 0; colIndex < columnCount; colIndex++) {
     item[`column${colIndex}`] = `row-${index} col-${colIndex} hahahahahahahahahahah`
   }
 
-  data.push(item)
+  fullData.push(item)
 }
 
-const scroll = { height: 800 }
+const data = ref<Data[]>(fullData)
+
+const toggleEmpty = () => {
+  if (data.value.length > 0) {
+    data.value = []
+  } else {
+    data.value = fullData
+  }
+}
+
+const scroll = { height: 800, fullHeight: true }
 </script>
diff --git a/packages/components/table/demo/VirtualHorizontal.vue b/packages/components/table/demo/VirtualHorizontal.vue
@@ -1,9 +1,13 @@
 <template>
   <IxTable :columns="columns" :dataSource="data" :pagination="false" virtualHorizontal :virtualColWidth="150">
   </IxTable>
+  <br />
+  <IxButton @click="toggleEmpty"> ToggleEmpty </IxButton>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import { TableColumn } from '@idux/components/table'
 
 interface Data {
@@ -25,14 +29,24 @@ for (let index = 0; index < columnCount; index++) {
   })
 }
 
-const data: Data[] = []
+const fullData: Data[] = []
 for (let index = 0; index < 8; index++) {
   const item: Data = { key: index }
 
   for (let colIndex = 0; colIndex < columnCount; colIndex++) {
     item[`column${colIndex}`] = `row-${index} col-${colIndex}`
   }
 
-  data.push(item)
+  fullData.push(item)
+}
+
+const data = ref<Data[]>(fullData)
+
+const toggleEmpty = () => {
+  if (data.value.length > 0) {
+    data.value = []
+  } else {
+    data.value = fullData
+  }
 }
 </script>
diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
@@ -67,7 +67,7 @@ export default defineComponent({
     const { mergedPagination } = usePagination(props, config, mergedSize)
 
     const stickyContext = useSticky(props)
-    const scrollContext = useScroll(props, mergedAutoHeight, stickyContext)
+    const scrollContext = useScroll(props, stickyContext)
     const columnsContext = useColumns(props, slots, config, scrollContext.scrollBarSizeOnFixedHolder)
     const sortableContext = useSortable(columnsContext.flattedColumns)
     const filterableContext = useFilterable(columnsContext.flattedColumns)
@@ -145,14 +145,21 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       const header = <ɵHeader v-slots={slots} header={props.header} />
       const footer = renderFooter(slots, prefixCls)
-      const [paginationTop, paginationBottom] = renderPagination(
-        slots,
-        mergedPagination.value,
-        filteredData.value,
-        prefixCls,
-      )
+
       const children = [header]
-      const resetChildren = [paginationTop, <MainTable />, footer, paginationBottom].filter(Boolean) as VNode[]
+      let resetChildren = [<MainTable />, footer].filter(Boolean) as VNode[]
+
+      if (flattedData.value.length > 0) {
+        const [paginationTop, paginationBottom] = renderPagination(
+          slots,
+          mergedPagination.value,
+          filteredData.value,
+          prefixCls,
+        )
+
+        resetChildren = [paginationTop, ...resetChildren, paginationBottom].filter(Boolean) as VNode[]
+      }
+
       const spinProps = convertSpinProps(props.spin)
       if (spinProps) {
         children.push(<IxSpin {...spinProps}>{resetChildren}</IxSpin>)