vue-datatable-tailwind

Introduction

本專案來自 vue3-easy-data-table 客製化版本，並基於原始設計進行了大幅修改與擴展。

新增功能與修改部分由 tiaohsun 開發，並保留所有權利。

專案僅為客製化版本，相關修改請詳閱下方文件，重構時並未充分測試原有功能，若出現BUG，請透過 Discussions 留言給我。

版本2(v2)以後將使用Tailwind4，若使用Tailwind3請用v1

README

• en English
• zh_TW 繁體中文

Refactoring and customization

• 重構程式碼結構。
• 移除了原始 SCSS，改用 TailwindCSS。
• 修改 usePageItems，使用緩存的 key 比較，提高效能以解決大數據選擇時卡頓問題。
• 新增 expandColumn，提供自訂義展開欄位。
• 新增 filterOption 輔助方法 createFilter。
• 新增 useBatchSelection 處理大數據選擇問題，預設為10,000筆資料以上啟用。
• 修改部分預設值。
• 預設 Mobile 僅剩上下頁切換。
• 新增 clickRowToSelect，點擊表格行可以進行選擇。
• 新增 selection-checkbox slot，可以客製化選擇框，透過客製化控制框，可以由外部控制disabled等屬性。
• 新增 disabledRows 禁用 clickRowToSelect 點擊事件。
• 重新命名，tableClassName > wrapperClassName，tableClassName現在位於<table :class=[tableClassName]>
• 新增 containerClassName、footerClassName
• 新增 .vdt-table-wrapper、.vdt-table-container、.vdt-table、.vdt-thead、.vdt-thead-tr、.vdt-thead-th、.vdt-tbody、.vdt-tbody-tr、.vdt-tbody-td、.vdt-expand-row、.vdt-footer、.vdt-pagination，CSS，預設無任何值。
• 移除headerTextDirection，請改用headerClassName統一控制，預設為text-left
• 移除bodyTextDirection，新增bodyClassName、footerClassName。
• 新增expandTransition，用來啟用擴展列過渡效果。
• 新增mode，可設置dark或light，預設為light。

Usage suggestions

1. 建議使用 Vue 3、Tailwind CSS 4 或以上版本
2. 如果使用較舊版本，請注意以下幾點：
   • 檢查間距和對齊是否正確
   • 某些新特性可能不可用
   • 可能需要手動調整某些樣式
3. 如果發現樣式問題，可以：
   • 更新到建議的版本
   • 使用自定義樣式覆蓋
   • 參考相容性指南進行調整

Install

1. 請確定您已安裝 Node.js 和 Tailwind CSS。
2. 在 tailwind.config.js 添加 DataTable 套件，以套用 Tailwind 樣式：

// npm install
npm install @tiaohsun/vue-datatable-tailwind
// pnpm add
pnpm add @tiaohsun/vue-datatable-tailwind

// 全域使用main.ts中註冊 or 組件中使用
import DataTable from '@tiaohsun/vue-datatable-tailwind'
import '@tiaohsun/vue-datatable-tailwind/style.css'

app.component('DataTable', DataTable)

// tailwind 4
@import "tailwindcss";
/* DataTable (請留意node_modules路徑) */
@source './node_modules/@tiaohsun/vue-datatable-tailwind/dist/**/*.{js,vue}';

// tailwind 3 tailwind.config.ts
export default {
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
        // 添加 node_modules 中 DataTable 的內容
        "./node_modules/@tiaohsun/vue-datatable-tailwind/dist/**/*.{js,vue}"
    ]
}

Theme

After Version 2

• theme:'indigo'
• theme:'#6366f1'
• theme:oklch(64.5% 0.246 16.439)
• 直接修改基礎變數(全域設定)

  :root {
    --color-vdt-500: oklch(0.65 0.25 130) !important; /* 修改成綠色系 */
    /* 其他顏色...(50-950) */
  }

version 1.x.x

• theme:'indigo'
• theme:'#6366f1'
• :theme:{ color:'indigo', variant: 'DEFAULT' }

Class

因為改TailwindCSS進行樣式管理，部分樣式渲染會落後於預設樣式，請採用下列方式

1. 使用 Tailwind 的 ! 修飾符來強制應用樣式

const bodyRowClassNameFunction: BodyRowClassNameFunction = (
  item: Item,
  rowNumber: number,
): string => {
  if (item.gender === '男') return '!bg-blue-100'
  return '!bg-red-100'
}

2. 修改奇偶行的樣式

const bodyRowClassNameFunction: BodyRowClassNameFunction = (
  item: Item,
  rowNumber: number,
): string => {
  const isEven = rowNumber % 2 === 0
  if (item.gender === '男') {
    return isEven ? 'even:!bg-blue-100 odd:bg-blue-100' : 'odd:!bg-blue-100 even:bg-blue-100'
  }
  return isEven ? 'even:!bg-red-100 odd:bg-red-100' : 'odd:!bg-red-100 even:bg-red-100'
}

Props

除了原本的Props外，新增下面Props

| Name | Required | Type | Default | Description | | ----------------------- | ------------ | --------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------- | | expand-column | false | string | ‘’ | 指定某Column欄位可以擴展 　 | | theme | false | string or TailwindColor(ex:'indigo'、'rose') | 'indigo' | 取代theme-color，可填入 HEX ‘#42b883’、oklch(版本2之後)、Tailwind Color Name | | batchSelectionThreshold | false | number | 10,000 | 超過預設值，啟用批次選擇，具有Loading樣式 | | clickRowToSelect | false | boolean | false | 點擊列，是否選擇項目 | | disabledRows | false | BodyRowDisabledFunction = (item: Item, rowNumber?: number) => boolean | false | 禁止特定行被選取 | | expandTransition | false | boolean | true | 如果有設置擴展列，預設啟用擴展列過渡效果 |

Slot

參考 Slot