用 Web Component 製作客製化表格元件
# 前言目前團隊在規劃建立一個元件庫，希望未來能在各個專案上快速套用自己所寫的元件。由於各項專案使用的框架可能有所不同，所以元件庫必須支援不同框架的使用情境。例如說 VueFormGenerator 當中的 custom field 是可以自由客製化表單中的元件，我們就能引用這個元件庫的元件，將其使用於 Vue 的表單之中。大部分元件在實作上沒有太大的困難，像是按鈕這個元件就很單純，開幾個欄位提供使用者改改顏色或改改樣式基本上就沒太大問題了。不過有幾項元件就不是那麼好實作了，例如本篇文章想要探討的 table 這個元件，它不光是改樣式這麼簡單而已，像是每個欄位需要如何抓取資料，各自的行為是什麼？還有表格所衍生出來的各項功能如何去實作？以及如何讓使用者自由客製化...等等。這些都需要提前設計好，才不會在使用的時候感到不方便。以往在 HTML 使用到 table 這個標籤時，每個頁面的表格都會是分開來做的，A 頁面的表格直接寫在 A 頁面的檔案底下，B 頁面的表格也直接寫在 B 頁面的檔案底下，所以每個頁面的表格需要幾個 column 都可以分別定義好的，有幾個功能也可以分別放上去。但是現在要達成的目標變成是，做出一個 table 元件，不管是 A 頁面還是 B 頁面，都可以直接使用這個元件，這也是第一次研究如何可以做出讓不同頁面一起使用的 table 元件。由於這邊的 table 元件是透過 Web Component 來實作的，所以上半部的篇幅會先提到關於 Web Component 最簡單的概念（已經了解的大大們可以跳過這部分），下半部才會是分享 table 元件的實作。
