表格常用於後台列表的顯示，PrimeVue 提供的 Datatable 元件提供多種 table 的操作功能，對於後臺表格的操作能夠帶給使用者較佳的體驗。以下針對 Datatable 進行說明：

基本元件的使用

個人覺得剛接觸 Datatable 時需要適應下其元件的結構，一般 html table 結構如下：

<table>
  <thead>
    <tr>
      <th scope="col">名稱</th>
      <th scope="col">Email</th>
      <th scope="col">年齡</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">王xx</th>
      <td>wang@gmail.com</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

主要結構以 row 的閱讀方式為主：

而 PrimeVue 提供的 Datatable 的結構則以 column 的閱讀方式：

<DataTable :value="products" tableStyle="min-width: 50rem">
    <Column field="name" header="名稱"></Column>
    <Column field="email" header="Email"></Column>
    <Column field="age" header="年齡"></Column>
</DataTable>

const products = ref([
    {
        name: '王xx',
        email: 'wang@gmail.com',
        age: 22
    }
]);

其中，Column 的 field 對應每個物件的 key，header 為 th 標題。

動態渲染

通常使用 table 時，其內容大多都是從 API 回傳的清單資料，因此，搭配 v-for 將定義好 Column 各欄位資訊，渲染多筆資料。

如下範例，取得 products 商品清單，加上定義好作為渲染的 columns 欄位資訊，在 Column 使用 v-for 長出 table 清單。

<script setup>
import { ref } from 'vue'
const products = ref([
  {
    code: '001',
    name: 'Watch',
    category: 'Accessories',
    quantity: 20
  },
  {
    code: '002',
    name: 'T-Shirt',
    category: 'Clothing',
    quantity: 25
  }
])
const columns = [
  { field: 'code', header: 'Code' },
  { field: 'name', header: 'Name' },
  { field: 'category', header: 'Category' },
  { field: 'quantity', header: 'Quantity' }
]
</script>

<template>
  <main class="p-6">
    <DataTable :value="products" tableStyle="min-width: 50rem">
      <Column
        v-for="col of columns"
        :key="col.field"
        :field="col.field"
        :header="col.header"
      ></Column>
    </DataTable>
  </main>
</template>

template 使用

上述搭配 v-for 的動態渲染，Column 內提供 template 的 slot 方法，可客製 td 的內容。

從 slotProps 可取得該行資訊 data，可為該欄位客製顯示資訊，可能為日期的轉換，或組合欄位。

<DataTable :value="products" tableStyle="min-width: 50rem">
  <Column header="代碼" field="code"></Column>
  <Column header="名稱" field="name"></Column>
  <Column header="種類" field="category"></Column>
  <Column header="數量" field="quantity">
    <template #body="slotProps"> {{ slotProps.data.quantity }} 瓶 </template>
  </Column>
</DataTable>

表格外觀

1. Size：表格的尺寸，可調整大或小的表格，可填入 large 或 small

<DataTable :value="products" size="large">...</DataTable>

2. Grid Lines：加入網格樣式。

<DataTable :value="products" showGridlines>...</DataTable>

3. Striped Rows：加入斑馬紋樣式。

<DataTable :value="products" stripedRows>...</DataTable>

sort

1. 針對需要排序的欄位 Column 可加上 sortable 屬性讓該欄位可排序。
2. DataTable 加上 removableSort，點擊到第三次排序時會取消排序。
3. 指定表格預先排序的欄位：在 DataTable 上加上：
   • sortField：指定預先排序的欄位。
   • sortOrder：設定 1(升冪) 或 -1(降冪)。

<DataTable
  :value="products"
  removableSort
  sortField="quantity"
  :sortOrder="1"
  tableStyle="min-width: 50rem"
>
  <Column header="代碼" field="code" sortable></Column>
  <Column header="名稱" field="name" sortable></Column>
  <Column header="種類" field="category" sortable></Column>
  <Column header="數量" field="quantity" :sortable="true">
    <template #body="slotProps"> {{ slotProps.data.quantity }} 瓶 </template>
  </Column>
</DataTable>

4. 在 DataTable 加上 sortMode="multiple" 可針對多欄位一起排序，但操作時須加上 ctrl 鍵。

<DataTable :value="products" removableSort sortMode="multiple" tableStyle="min-width: 50rem">
    ...
    <Column header="數量" field="quantity" :sortable="true">
      <template #body="slotProps"> {{ slotProps.data.quantity }} 瓶 </template>
    </Column>
</DataTable>

參考連結：https://primevue.org/datatable/