[筆記] 哎呀！不小心刻了一套 React UI 元件庫 16 – Table

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Table。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

一個初始的簡易 Table，會包含 <table>, <thead>, <tbody>, <tr>, <th>, <td>。藉由 dataSource 將自定義的物件陣列傳入，並由 columns 來傳入欄位的設定值

---

參數

1. dataSource – 自定義物件陣列
2. columns – 欄位內容，相關的寬度、屬性等都是定義在這邊
3. maxWidth – 設定 <table> 父層的 div 寬度，確保 stickyColumn 效果 

---

概念

1. border 邊框設置在 table, th, td 這三個標籤上
2. 表格相關的 css 屬性都要設置上 border-box
3. <table> 外層加上 overflow: ‘auto’：確保出現捲軸；width: 100% ：確保寬度可以跟隨 wrapper 一致
4. 固定欄位後的陰影效果，是做在偽元素 ::after 上

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/8d6f9cbc8fad7006f14bae75c898b516d6fe02ca

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138
• [筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch