接續昨日表格部分，
今天進行 DataTable(3) - Expand Table 的實作，進一步優化表格果，讓表格的每一列可以展開更多的資訊。

別忘了，今日心零雞湯～

Pessimism leads to weakness, optimism to power.
悲觀導致軟弱，樂觀導致力量。

Expand 功能的實現

產品目錄表格中，某些產品會包含訂單資料或其他相關資訊，這時候我們可以使用 Expand 功能來讓使用者展開表格的每一列，查看該產品的詳細資訊。

1. p-dataTable 元件

<p-dataTable
  v-model:expandedRows="expandedRows"
  :value="products"
  dataKey="id"
  @rowExpand="onRowExpand"
  @rowCollapse="onRowCollapse"
>
...
</p-dataTable>

• v-model:expandedRows="expandedRows"：
  使用 v-model 綁定展開的行（expandedRows）記錄目前展開了哪些行。
• :value="products"：
  傳遞 products 數據作為表格的資料來源，每一行對應到 products 裡的項目。
• dataKey="id"：
  設置每行的唯一id，PrimeVue 能正確地處理每行的展開與摺疊。
• @rowExpand="onRowExpand" 和 @rowCollapse="onRowCollapse"：
  當行被展開或摺疊時，分別觸發 onRowExpand 和 onRowCollapse 回調函數

2. p-column expander

<p-column expander style="width: 5rem" />

這是一個特殊的列，用來顯示展開按鈕。這個按鈕通常是加號（+）或減號（-）。

3.template #expansion

<template #expansion="slotProps">
  <div class="p-3">
    <h5>Orders for {{ slotProps.data.name }}</h5>
    <p-dataTable :value="slotProps.data.orders">
      <!-- 內嵌表格的各個欄位 -->
    </p-dataTable>
  </div>
</template>

• template #expansion="slotProps"：
  這個插槽定義了行展開後的內容，slotProps 傳遞了當前行的數據。
• 內嵌的 p-dataTable：
  在展開的部分，嵌套了一個新的 p-dataTable，這是一個子表格，顯示該產品的訂單信息。

4.子表格欄位展示

<p-dataTable :value="slotProps.data.orders">
  <p-column field="id" header="Id" sortable></p-column>
  <p-column field="customer" header="Customer" sortable></p-column>
  <p-column field="date" header="Date" sortable></p-column>
  <p-column field="amount" header="Amount" sortable>
    <template #body="slotProps">
      {{ formatCurrency(slotProps.data.amount) }}
    </template>
  </p-column>
  <p-column field="status" header="Status" sortable>
    <template #body="slotProps">
      <p-tag
        :value="slotProps.data.status.toLowerCase()"
        :severity="getOrderSeverity(slotProps.data)"
      />
    </template>
  </p-column>
  <p-column headerStyle="width:4rem">
    <template #body>
      <p-button icon="pi pi-search" />
    </template>
  </p-column>
</p-dataTable>

以上為內嵌子表格的各個欄位。

完整範例

<p-dataTable
      v-model:expandedRows="expandedRows"
      :value="products"
      dataKey="id"
      @rowExpand="onRowExpand"
      @rowCollapse="onRowCollapse"
    >
    <p-column expander style="width: 5rem" />
    <template #expansion="slotProps">
        <div class="p-3">
          <h5>Orders for {{ slotProps.data.name }}</h5>
          <p-dataTable :value="slotProps.data.orders">
            <p-column field="id" header="Id" sortable></p-column>
            <p-column field="customer" header="Customer" sortable></p-column>
            <p-column field="date" header="Date" sortable></p-column>
            <p-column field="amount" header="Amount" sortable>
              <template #body="slotProps">
                {{ formatCurrency(slotProps.data.amount) }}
              </template>
            </p-column>
            <p-column field="status" header="Status" sortable>
              <template #body="slotProps">
                <p-tag
                  :value="slotProps.data.status.toLowerCase()"
                  :severity="getOrderSeverity(slotProps.data)"
                />
              </template>
            </p-column>
            <p-column headerStyle="width:4rem">
              <template #body>
                <p-button icon="pi pi-search" />
              </template>
            </p-column>
          </p-dataTable>
        </div>
      </template>
    </p-dataTable>

總結

PrimeVue 表格中展示可展開的行，並在展開後顯示更多詳細資訊。
這種設計不僅能讓表格顯示更加簡潔，還能方便用戶查看每一項產品的詳細資訊。

這種設計能夠優化大表格的顯示效果，避免一開始就展示過多的資訊，需要時才點擊展開查看詳細內容。

參考資料:
https://v3.primevue.org/datatable/