fix(comp: table): update style with sticky and bodered (#898)

* fix(comp: table): update style with sticky and bodered * test: update snapshots
IDuxFE · May 11, 2022 · ff75f3e · ff75f3e
1 parent 1156214
commit ff75f3e
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 29 deletions.
diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -315,6 +315,7 @@ exports[`Table > basic work > render work 1`] = `
       </table>
     </div>
   </div>
+  <!---->
   <ul class=\\"ix-pagination ix-pagination-md ix-table-pagination ix-table-pagination-end\\" position=\\"bottomEnd\\">
     <li class=\\"ix-pagination-total\\">共 100 项</li>
     <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
@@ -327,6 +328,5 @@ exports[`Table > basic work > render work 1`] = `
     <li class=\\"ix-pagination-item\\" title=\\"10\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>10</span></button></li>
     <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
   </ul>
-  <!---->
 </div>"
 `;
diff --git a/packages/components/table/demo/Bordered.md b/packages/components/table/demo/Bordered.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 带边框，页头和页脚
+  en: With border, header and footer
+order: 62
+---
+
+## zh
+
+添加表格边框线，页头和页脚。
+
+## en
+
+Add border, title and footer for table.
diff --git a/packages/components/table/demo/Bordered.vue b/packages/components/table/demo/Bordered.vue
@@ -0,0 +1,46 @@
+<template>
+  <IxTable :columns="columns" :dataSource="data" :borderless="false">
+    <template #header>
+      <IxHeader title="Table Header" suffix="setting"></IxHeader>
+    </template>
+    <template #footer>
+      <spam>This is footer</spam>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+  },
+]
+
+const data: Data[] = []
+for (let index = 0; index < 4; index++) {
+  data.push({
+    key: index,
+    name: `Edrward ${index}`,
+    age: 18 + index,
+    address: `London Park no. ${index}`,
+  })
+}
+</script>
diff --git a/packages/components/table/demo/ColSpanRowSpan.md b/packages/components/table/demo/ColSpanRowSpan.md
@@ -2,7 +2,7 @@
 title:
   zh: 行/列合并
   en: Merge row and column
-order: 10
+order: 80
 ---
 
 ## zh

diff --git a/packages/components/table/demo/CustomAdditional.md b/packages/components/table/demo/CustomAdditional.md
@@ -2,7 +2,7 @@
 title:
   zh: 斑马纹表格
   en: Striped Table
-order: 1
+order: 63
 ---
 
 ## zh

diff --git a/packages/components/table/demo/HeadGroup.vue b/packages/components/table/demo/HeadGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxTable :columns="columns" :dataSource="data" :scroll="scroll">
+  <IxTable :columns="columns" :dataSource="data" :borderless="false" :scroll="scroll">
     <template #name="{ value }">
       <a>{{ value }}</a>
     </template>

diff --git a/packages/components/table/demo/Sticky.md b/packages/components/table/demo/Sticky.md
@@ -0,0 +1,18 @@
+---
+title:
+  zh: 跟随页面固定的表头
+  en: Fixed header with the page
+order: 55
+---
+
+## zh
+
+对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。
+
+> 使用 `position: sticky` 实现，如果没有生效，请检查父元素是否有元素设置了 `overflow`，具体原因请查看 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position)
+
+## en
+
+For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.
+
+> Use `position: sticky` to implement, if it does not take effect, please check whether the parent element has set `overflow`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for specific reasons.
diff --git a/packages/components/table/demo/Sticky.vue b/packages/components/table/demo/Sticky.vue
@@ -0,0 +1,46 @@
+<template>
+  <IxTable :columns="columns" :dataSource="data" :pagination="false" :scroll="scroll" sticky>
+    <template #name="{ value }">
+      <a>{{ value }}</a>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customCell: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+  },
+]
+
+const data: Data[] = []
+for (let index = 0; index < 30; index++) {
+  data.push({
+    key: index,
+    name: `Edrward ${index}`,
+    age: 18 + index,
+    address: `London Park no. ${index}`,
+  })
+}
+
+const scroll = { height: 300 }
+</script>
diff --git a/packages/components/table/demo/TreeTable.md b/packages/components/table/demo/TreeTable.md
@@ -2,7 +2,7 @@
 title:
   zh: 树表格
   en: Tree table
-order: 80
+order: 21
 ---
 
 ## zh

diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
@@ -105,7 +105,7 @@ export default defineComponent({
       const header = <ɵHeader v-slots={slots} header={props.header} />
       const footer = renderFooter(slots, prefixCls)
       const [paginationTop, paginationBottom] = renderPagination(mergedPagination.value, filteredData.value, prefixCls)
-      const children = [header, paginationTop, <MainTable />, paginationBottom, footer]
+      const children = [header, paginationTop, <MainTable />, footer, paginationBottom]
       const spinProps = convertSpinProps(props.spin)
       const spinWrapper = spinProps ? <IxSpin {...spinProps}>{children}</IxSpin> : children
       return <div class={classes.value}>{spinWrapper}</div>

diff --git a/packages/components/table/src/main/FixedHolder.tsx b/packages/components/table/src/main/FixedHolder.tsx
@@ -7,23 +7,19 @@
 
 import { type CSSProperties, type Ref, computed, defineComponent, inject, onBeforeUnmount, onMounted } from 'vue'
 
-import { off, on } from '@idux/cdk/utils'
+import { convertCssPixel, off, on } from '@idux/cdk/utils'
 
 import { TABLE_TOKEN } from '../token'
 import ColGroup from './ColGroup'
 
 export default defineComponent({
-  setup(_, { slots }) {
-    const {
-      mergedPrefixCls,
-      scrollHeadRef,
-      handleScroll,
-      scrollWidth,
-      flattedData,
-      isSticky,
-      mergedSticky,
-      columnWidths,
-    } = inject(TABLE_TOKEN)!
+  props: {
+    offsetTop: { type: Number, default: undefined },
+    offsetBottom: { type: Number, default: undefined },
+  },
+  setup(props, { slots }) {
+    const { mergedPrefixCls, scrollHeadRef, handleScroll, scrollWidth, flattedData, isSticky, columnWidths } =
+      inject(TABLE_TOKEN)!
 
     useScrollEvents(scrollHeadRef, handleScroll)
 
@@ -38,11 +34,11 @@ export default defineComponent({
     })
     const style = computed<CSSProperties>(() => {
       const sticky = isSticky.value
-      const { offsetTop, offsetBottom } = mergedSticky.value
+      const { offsetTop, offsetBottom } = props
       return {
         overflow: 'hidden',
-        top: sticky ? offsetTop : undefined,
-        bottom: sticky ? offsetBottom : undefined,
+        top: sticky ? convertCssPixel(offsetTop) : undefined,
+        bottom: sticky ? convertCssPixel(offsetBottom) : undefined,
       }
     })
 

diff --git a/packages/components/table/src/main/MainTable.tsx b/packages/components/table/src/main/MainTable.tsx
@@ -45,6 +45,7 @@ export default defineComponent({
       changeColumnWidth,
       flattedData,
       isSticky,
+      mergedSticky,
       scrollBodyRef,
       handleScroll,
       pingedStart,
@@ -147,8 +148,9 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
 
       if (scrollHeight.value || isSticky.value) {
+        const { offsetTop } = mergedSticky.value
         const tableHead = !props.headless && (
-          <FixedHolder>
+          <FixedHolder offsetTop={offsetTop}>
             <Head></Head>
           </FixedHolder>
         )

diff --git a/packages/components/table/style/border.less b/packages/components/table/style/border.less
@@ -1,21 +1,29 @@
+@table-border: @table-border-width @table-border-style @table-border-color;
+
 .@{table-prefix}:not(.@{table-prefix}-borderless) {
+  > .@{header-prefix} {
+    border: @table-border;
+    border-bottom: 0;
+  }
+
   > .@{table-prefix}-container {
+    > .@{table-prefix}-fixed-holder,
     > .@{table-prefix}-content {
-      border-left: @table-border-width @table-border-style @table-border-color;
+      border-left: @table-border;
 
-      table {
-        border-top: @table-border-width @table-border-style @table-border-color;
+      > table {
+        border-top: @table-border;
 
         > thead > tr > th,
         > tbody > tr > td,
         > tfoot > tr > th,
         > tfoot > tr > td {
-          border-right: @table-border-width @table-border-style @table-border-color;
+          border-right: @table-border;
         }
 
         > thead {
           > tr:not(:last-child) > th {
-            border-bottom: @table-border-width @table-border-style @table-border-color;
+            border-bottom: @table-border;
           }
 
           > tr > th {
@@ -29,10 +37,21 @@
         > tbody > tr,
         > tfoot > tr {
           > .@{table-prefix}-fix-end-first::after {
-            border-right: @table-border-width @table-border-style @table-border-color;
+            border-right: @table-border;
           }
         }
       }
     }
+
+    > .@{table-prefix}-fixed-holder + .@{table-prefix}-content {
+      > table {
+        border-top: none;
+      }
+    }
+  }
+
+  > .@{table-prefix}-footer {
+    border: @table-border;
+    border-top: 0;
   }
 }
diff --git a/packages/components/table/style/size.less b/packages/components/table/style/size.less
@@ -16,6 +16,14 @@
       padding: @padding-top @padding-right @padding-bottom @padding-left;
     }
 
+    .@{header-prefix} {
+      padding: (@padding-top / 2) @padding-right (@padding-bottom / 2) @padding-left;
+    }
+
+    .@{table-prefix}-footer {
+      padding: @padding-top @padding-right @padding-bottom @padding-left;
+    }
+
     // TODO: Nest Table
   }
 }

diff --git a/packages/site/src/styles/app.less b/packages/site/src/styles/app.less
@@ -1,7 +1,6 @@
 .root-wrapper {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 .main-wrapper {