今天來說說DataTable的Selection，
selection 跟 expander 對我來說是很棒的功能，
(antd 跟 mui也有所以我不強調primereact)，
要說棒...就是能省掉很多寫邏輯的地方...

(畢竟十幾年的工作經驗告訴我...
很多"號稱"前端工程師的人...
是根本不講邏輯的!!!
(我都想吶喊為什麼不去當UI，來危害社會)
跟他們講邏輯，還不如自己來 T_T~ 特別趕專案時，時間特別寶貴)

沒有經驗不是問題，問題在別都憑感覺解決問題啊

憑感覺只有你在當你無法連到客戶環境時，
只能依客戶敘述去處理問題的時候

特別...遇到右腦超發達的選手，
思想跳躍到完全不知道從哪開導才能讓她們走向正途，

雖然很抓狂，
但為了不當"惡婆婆"系的前輩，
還是保持禮貌地微笑，
一步一步幫忙弄順她們纏成一團亂的邏輯，
畢竟壓下憤怒開導，比攬一個跩屁跩臭名好

好了扯遠了
那麼開始吧
因為想展示multiple的selection 因此儲存選項的state類型要是陣列

const [selectedProduct, setSelectedProduct] = useState<Product[]>([]);

放上套件

 <DataTable 
    value={tabledata} 
    selectionMode="multiple"
    selection={selectedProduct}
    onSelectionChange={(e) => setSelectedProduct(e.value)} 
    metaKeySelection={false}
    dragSelection
>
    <Column field="code" header="產品編號"></Column>
    <Column field="name" header="產品名稱"></Column>
    <Column field="category" header="產品類別"></Column>
    <Column field="quantity" header="數量"></Column>
</DataTable>

selectionMode //選擇模式
=> single:單選(點row任意區域都有用)
=> multiple:多選(點row任意區域都有用)
=> radiobutton:點radio button才有效
=> checkbox:點checkbox才有效

metaKeySelection //按住Win鍵(Cmd鍵)才可以複選

dragSelection //滑鼠按著拖曳可以多選

再來展示添加checkbox

<DataTable
  value={tabledata}
  selectionMode="checkbox"
  selection={selectedProduct1}
  onSelectionChange={(e) => setSelectedProduct1(e.value)}
  showSelectAll={false}
>
  <Column selectionMode="multiple" />
  <Column field="code" header="產品編號"></Column>
  <Column field="name" header="產品名稱"></Column>
  <Column field="category" header="產品類別"></Column>
  <Column field="quantity" header="數量"></Column>
</DataTable>

showSelectAll全選的checkbox 預設是開的，所以不想要可以關掉

除了row外還有cell的selection，用法大致跟row的相同
我就只放在後面的完整的code

好啦~今天就到這 不免俗的上完整的

import React, { useEffect, useState } from 'react';
import { DataTable, DataTableCellSelection } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from '../service/table';
import { Product } from '../interfaces/table';
const Tables4Compnent: React.FC = () => {
  let service = new ProductService();
  const [tabledata, setTabledata] = useState<Product[]>();
  const [selectedProduct, setSelectedProduct] = useState<Product[]>([]);
  const [selectedProduct1, setSelectedProduct1] = useState<Product[]>([]);
  const [selectedCells, setSelectedCells] = useState<DataTableCellSelection<Product[]> | null>(null);

  useEffect(() => {
    service.getProductsMini().then(data => setTabledata(data));
  }, []);
  return (
    <div>
      <div className='mb-3'>
        <DataTable
          value={tabledata}
          selectionMode="multiple"
          selection={selectedProduct}
          onSelectionChange={(e) => setSelectedProduct(e.value)}
          metaKeySelection={false}
          dragSelection
        >
          <Column field="code" header="產品編號"></Column>
          <Column field="name" header="產品名稱"></Column>
          <Column field="category" header="產品類別"></Column>
          <Column field="quantity" header="數量"></Column>
        </DataTable>
      </div>
      <div className='mb-3'>
        <DataTable
          value={tabledata}
          selectionMode="checkbox"
          selection={selectedProduct1}
          onSelectionChange={(e) => setSelectedProduct1(e.value)}
          showSelectAll={false}
        >
          <Column selectionMode="multiple" />
          <Column field="code" header="產品編號"></Column>
          <Column field="name" header="產品名稱"></Column>
          <Column field="category" header="產品類別"></Column>
          <Column field="quantity" header="數量"></Column>
        </DataTable>
      </div>
      <div>
        <DataTable
          value={tabledata}
          selectionMode="multiple"
          cellSelection={true}
          selection={selectedCells!}
          onSelectionChange={(e) => setSelectedCells(e.value)!}
        >
          <Column field="code" header="產品編號"></Column>
          <Column field="name" header="產品名稱"></Column>
          <Column field="category" header="產品類別"></Column>
          <Column field="quantity" header="數量"></Column>
        </DataTable>
      </div>
    </div>
  );
}
export default Tables4Compnent;

明天見!