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

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

react logo


[ 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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Toast 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容1. Toast 是
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Modal 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容需要引入 P
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Circle 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Bar 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Skeleton 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1.
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Spin 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數isLoading
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Pagination 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數pag
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tabs。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數themeColor – 主題配色
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。[ Repo ]:https://github.com/andy922200/practice-
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。[ Repo ]:https://github.com/andy922
按讚加入粉絲團

延伸閱讀