iT邦幫忙

2022 iThome 鐵人賽

DAY 16
1
自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列 第 16

Day16:Ant Design 裡的 Table(part4)

  • 分享至 

  • xImage
  •  

是的,當你發現可以在表格裡想呈現越來越多的資料後,你一定會想知道,咦可不可以有些介面上的優化呢?以下就介紹幾種方式讓大家參考使用。

一、將 Table 的表頭固定不隨視窗捲動

  這就像是excel裡面的表頭固定,適合用在資料筆數較多的情形。使用的理念就是在 Table 了加一個 scroll 的參數,並給予 y 軸固定高度,這樣當資料筆數的數量與每行佔據的高度超過你寫的高度,就自動會有卷軸呈現,並讓表頭固定在同一個位置啦~

1. 最基本的使用方式:引用與呼叫它

import { Table } from 'antd';
const App = () => (
  <div>
    <Table 
        columns={columns} 
        dataSource={data} 
        scroll={{
          y: 300,
        }}
     />
  <div/>
);

export default App;  

2.Table 的 表頭固定 實際使用範例

看完上面簡單的介紹後,下面提供我的簡單範例,若大家有興趣也可以到線上編輯器裡玩玩看唷!

我的 codepen連結

https://ithelp.ithome.com.tw/upload/images/20221001/201409208Prh6l9cNG.pnghttps://ithelp.ithome.com.tw/upload/images/20221001/20140920SrbBl2jtmX.png
codepen 練習成果

二、將 Table 的某個欄位固定不隨橫向卷軸捲動

  這就像是excel裡面的表頭固定,適合用在資料內容較多的情形。使用的理念跟表頭固定一樣,加一個 scroll 的參數,但給予 X 軸固定寬度和指定的欄位 width 和 fixed 參數,這樣當資料的欄位較多,產生橫向卷軸時,就自動會將你指定的欄位固定在你指定的位置,方便資料觀看啦~

要注意的地方是:

  • width 只能給數字
  • fixed 只有 left 和 right
  • 固定欄位不適用於IE瀏覽器

1. 最基本的使用方式:引用與呼叫它

import { Table } from 'antd';
const App = () => (
  <div>
    <Table 
        columns={columns} 
        dataSource={data} 
        scroll={{
          x: 300,
        }}
     />
  <div/>
);

export default App;  

2.Table 的 表頭固定 實際使用範例

看完上面簡單的介紹後,下面提供我的簡單範例,若大家有興趣也可以到線上編輯器裡玩玩看唷!

我的 codepen連結

https://ithelp.ithome.com.tw/upload/images/20221001/201409209SE8xXXEf5.png
codepen 練習成果

上一篇
Day15:Ant Design 裡的 Table(part3)
下一篇
Day17:Ant Design 裡的 Table(part5)
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-18 10:03:17

那如果不想知道的人該怎麼辦XD

我要留言

立即登入留言