Day13：Ant Design 裡的 Table(part1)

2022 iThome 鐵人賽

DAY 13

自我挑戰組

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

14th鐵人賽

Annie

2022-09-28 21:52:18

1066 瀏覽

分享至

今天要來介紹 ANTD 裡個人覺得使用上數一數二複雜與廣泛運用的「表格」了！在 html 裡寫表格要不斷重複寫tr, td、在純 JavaScript 裡頂多使用 map 去跑值和表頭名稱，但是使用 ANTD 的時候，你可以直接在 datasource 和 columns 的屬性給值(不論是從後端 call 回來的資料或你靜態寫的 array 都可以)，真的超方便！

ANTD 裡的表格還有自帶超多多樣化的功能，像是表頭勾選、展開收和細節內容、計算共幾列數量並提供換頁效果、表頭是否固定不隨視窗滾動(就像 excel 表那樣，大家應該懂我說什麼吧!!!)，還有超多其它客製化樣式與功能，那以下就開始分享 ANTD 表格的各種好用屬性囉～

一、ANTD Table 最基本的使用方式：引用與呼叫它

import { Table } from 'antd';

const App = () => (
  <div>
    <Table 
        columns={columns} 
        dataSource={data} 
     />
  <div/>
);

export default App;

二、Table 可添加的參數

參數就如同下方程式碼說明，也可以點此連結去看更多官方 api 文件。

屬性名稱	可以使用的值	說明
columns	陣列	必填的屬性，可以理解是 html 的 `<thead>`
dataSource	陣列	必填的屬性，可以理解是 html 的 `<tbody>`
pagination	object	假設你的表格項目很多，可以加上此參數，讓表格隨著你設定的數量有換頁功能
scroll	數字	如果希望整個表格固定在某個高度內，記得這個參數一定要設定~
onChange	() => {}	就是function，主要比較常拿來處理換頁等動作

三、Table columns 可添加的參數

columns ，可以理解是 html 的 <thead> ，基本使用可以把他理解成一個陣列，每個陣列裡至少會需要 dataIndex, key 和 title 屬性，讓表格在渲染時方便與下方的內容 (dataSource 屬性)做對應。

參數就如同下方程式碼說明，也可以點此連結去看更多官方 api 文件。

假設你有一些好友清單，想整理成一個表格，那你的 columns 可以這樣設定

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '生日',
    dataIndex: 'birth',
    key: 'birth',
  },
  {
    title: '電話',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '信箱',
    dataIndex: 'mail',
    key: 'mail',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <div>
        <a>編輯</a>
        <a>刪除</a>
      </div>
    ),
  },
];

屬性名稱	可以使用的值	說明
dataIndex	字串	與表格內容相對應的值
key	字串	這個欄位的唯一值，但如果有設定dataIndex就不須重複設定此屬性囉~
title	`ReactNode` 或 `({ sortOrder, sortColumn, filters }) => ReactNode`	要顯示出來的名稱，支援自定義的ReactNode !另外也有排序功能(後續會再介紹)
align	left 或 right 或 center	文字對齊，預設是靠左
render	`function(text, record, index) {}`	如果有其他特殊需求，可以加上這個參數

三、Table dataSource 的使用方式

前面有提到 dataSource 可以理解是 html 的 <tbody>，因為要搭配 columns 一起使用，所以他當然也要是個陣列啦~那陣列裡面就是一包一包 object，紀錄你每筆資料的值。這邊要特別注意，每筆資料一定都要有key值！

假設你有一些好友清單，想整理成一個表格，那你的 dataSource 可以這樣設定

const data = [
  {
    key: '1',
    name: 'John',
    birth: '2000/08/01',
    phone: '0988-123456',
    mail: 'john@test.com'
  },
  {
    key: '2',
    name: 'Mary',
    birth: '1990/02/01',
    phone: '0988-234567',
    mail: 'mary@test.com'
  },
  {
    key: '3',
    name: 'Andy',
    birth: '1995/05/01',
    phone: '0988-345678',
    mail: 'andy@test.com'
  },
];

因為表格的所有功能擠在同一篇裡介紹我覺得太過冗長，所以我們就下一篇繼續唷~