iT邦幫忙

2022 iThome 鐵人賽

DAY 17
1
自我挑戰組

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

Day17:Ant Design 裡的 Table(part5)

  • 分享至 

  • xImage
  •  

  在前面的章節中,我們學會了如何把大量的資料整齊地放到表格做呈現,雖然已經知道可以搭配表頭固定、某個指定欄位固定或加上延展子層與細節內容的 expandable 等功能,但是就算如此,我認為適當地加上分頁效果在 UI 和 UX 上也有加分的效果。那這篇就讓我們實際學習怎麼為大量的表格資料加上頁碼吧~

一、 最基本的使用方式:引用與呼叫它

import { Table } from 'antd';
const App = () => (
  <div>
    <Table 
        columns={columns} 
        dataSource={data} 
        pagination={{
          position: ['bottomCenter'],
        }}
     />
  <div/>
);

export default App;  

二、 Table 的 pagination 設定方式

  基本上你只要在 table 裡加上 pagination 這個參數,那你就可以在這個參數底下,用object的方式再額外設定關於頁碼呈現的效果。這邊要特別注意的是,切換頁碼的動作仍然是屬於table的參數,不要加到頁碼裡唷!

  ANTD預設的頁碼渲染如下圖(粉色背景只是我自己後製上去的,因為每個按鈕其實都有1px的淺灰色邊框,想說這樣放可能清楚一點),那頁碼就跟其他元件一樣,你可以透過自定義樣式客製化你想要的樣式與內容。下面列出幾項我開發最常用的,也可以點此連結去看更多官方 api 文件

https://ithelp.ithome.com.tw/upload/images/20221002/20140920Gwf8m9Jcgb.png
ANTD預設的頁碼

1. table

屬性名稱 可以使用的值 說明
pagination object 預設都是開啟的,如果不想要呈現頁碼,那可以設為false。需要客製化頁碼樣式可以看下表
onChange `function(pagination, filters, sorter, extra: { currentDataSource: [], action: paginate sort

2. pagination

屬性名稱 可以使用的值 說明
position topLeft 或 topCenter 或 topRight 或 bottomLeft 或 bottomCenter 或 bottomRight 設定頁碼要為在表格的哪個相對位置,要注意的是要使用陣列將值包起來,預設為 [bottomRight]
pageSize number 每頁要顯示的筆數
total number 總共有幾頁
current number 要呈現的那頁,通常一開始會設置為第一頁
itemRender `(page, type: 'page' 'prev'
showTotal (total) => 共 ${total} 項目 是否要顯示「總共幾個項目」,預設不會顯示,如果要的話可以加上此參數

三、 今天的元件練習

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

我的 codepen連結

https://ithelp.ithome.com.tw/upload/images/20221002/20140920q1HuG1WxtB.png
codepen 練習成果
https://ithelp.ithome.com.tw/upload/images/20221002/201409201dc8MWRxga.png
先前專案元件應用示意圖

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

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-18 10:08:09

還以為ANTD是少女自動設定粉紅色哈哈哈

我要留言

立即登入留言