Table Component (React)

這是一個使用 React、TypeScript 和 Vite 建置的表格元件庫。

特色

• 使用 React 18
• 使用 Storybook 進行元件開發和展示
• 使用 TailwindCSS 進行樣式處理
• TypeScript 支援，
• Vite 作為建置工具，實現快速的開發體驗

套件功能

1. 排序 Sort
2. 虛擬滾動 Virtual scroll
3. 無限滾動 Infinite scroll
4. 固定欄位 fixed column

排序 Sort

分成normal sort、backend sort、custom sort

• normal sort : 直接在前端進行預設的排序
• backend sort: 透過後端 API 進行排序
• custom sort: 自訂排序邏輯，可以根據需求進行排序

虛擬滾動 Virtual scroll

用於高效地渲染和顯示大筆表格資料。 當一個表格需要顯示大量的資料時，直接渲染所有行會導致性能問題。 虛擬滾動通過僅渲染當前視口（viewport）中的行，而不是整個資料，來解決這個問題。

使用方式：設定virtualScroll為true

const App: React.FC = () => <Table virtualScroll />;

export default App;

無限滾動 Infinite scroll

與虛擬滾動類似，應用於需要顯示大量資料。 差別在透過無限滾動不需要一次性載入所有資料。無限滾動的核心概念是，隨著用戶滾動到頁面底部，系統會自動加載更多內容，而不需要使用者手動觸發加載行為（呼叫後端API）

使用方式：

1. 設定virtualScroll為true
2. 設定onScrollFetch，傳入自定義方法

//自定義方法，透過後端撈取資料
const handleFetchData = async(offset:number):Promise<ScrollFetchDataResult<any>> => { ... }

const App: React.FC = () => <Table virtualScroll onScrollFetch={handleFetchData} />;

export default App;

固定欄位 Fixed Column

設定欄位是否固定和其固定的方向

//設定“訂單編號"欄位固定在左方
const ecommerceColumns: TableColumn[] = [
  { field: "orderId", title: "訂單編號", width: 120, fixed: "left" },
  ....其他資料
]
const App: React.FC = () => <Table columns={ecommerceColumns} />;

export default App;

開始使用

1. 複製儲存庫
2. 安裝相依套件: npm install
3. 啟動Storybook: npm run storybook
4. 在瀏覽器中開啟 http://localhost:6006

建置生產版本

• 執行 npm run storybook:build 來建置Storybook的production。
• 執行 npm run build 來建置元件庫production。

Storybook Demo

https://yihsuan1004.github.io/yih-table/?path=/docs/components-table--docs