今天來說說primereact的DataTable的部分
因為可能會講很多，所以把panelmenu 修改一下

因為前面有說過panelmenu的部分，我只截新增的部分

import Tables1Compnent from './components/Tables1';
const items: MenuItem[] = [
    //...略過Buttons跟Forms的配布
    {
      label: 'Tables',
      data: '/tables',
      icon: 'pi pi-database',
      items: [
        {
          label: 'Tables1',
          data: '/tables1',
          className: pitem === '/tables1' ? 'p-highlight' : '',
          command: (e: MenuItemCommandEvent) => {
            setPItem(e.item.data);
            navigate(e.item.data);
          }
        }
      ]

    }
  ]
//FC內
<Route path='tables1' Component={Tables1Compnent} />

關於scss部分

.sidebar {
    width: 200px;
    .p-sidebar-header {
        font-size: 20px;
        font-weight: bold;
    }
    .p-sidebar-content {
        padding: 0;
        .p-panelmenu {
            .p-panelmenu-panel {
                &.p-highlight {
                    .p-panelmenu-header-content {
                        background-color: #303030;
                    }
                }
                &:hover{
                    .p-panelmenu-header-content {
                        background-color: #424242;
                    }  
                }
                .p-panelmenu-header {
                    .p-panelmenu-header-content {
                        border: 0;
                        border-radius: 0;
                        .p-submenu-icon{
                            position: absolute;
                            right:10px;
                        }
                    }
                }
                .p-toggleable-content {
                    .p-panelmenu-content{
                        border: 0;
                        padding: 0;
                        .p-menuitem-content{
                            padding-left: 2rem;
                            .p-menuitem-link{
                                height:48px;
                            }
                        }
                    }
                }
            }
        }
    }
}

調整好後，就開始DataTable
引入

import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

因為創資料挺麻煩的，我就直接拉官方文件了，

export class ProductService {
    getProductsData() {
        return [
         {
                id: '1000',
                code: 'f230fh0g3',
                name: 'Bamboo Watch',
                description: 'Product Description',
                image: 'bamboo-watch.jpg',
                price: 65,
                category: 'Accessories',
                quantity: 24,
                inventoryStatus: 'INSTOCK',
                rating: 5
            }
            //...資料太多略
        ];
    }

    getProductsWithOrdersData() {
        return [
           //...資料太多略 
        ];
    }

    getProductsMini() {
        return Promise.resolve(this.getProductsData().slice(0, 5));
    }

    getProductsSmall() {
        return Promise.resolve(this.getProductsData().slice(0, 10));
    }

    getProducts() {
        return Promise.resolve(this.getProductsData());
    }

    getProductsWithOrdersSmall() {
        return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10));
    }

    getProductsWithOrders() {
        return Promise.resolve(this.getProductsWithOrdersData());
    }
};

interface的部分之後table可能會繼續用，
所以依我開發習慣，額外分類拉出來
table.ts

export interface Product {
    id: string;
    code: string;
    name: string;
    description: string;
    image: string;
    price: number;
    category: string;
    quantity: number;
    inventoryStatus: string;
    rating: number;
}

再來就放入

<DataTable value={tabledata}>
    <Column field="code" header="產品編號"></Column>
    <Column field="name" header="產品名稱"></Column>
    <Column field="category" header="產品類別"></Column>
    <Column field="quantity" header="數量"></Column>
</DataTable>

Column 的field可以指定要顯示tabledata資料內的哪個key值成為欄位，
可以不限定第一層，可以以 「.」 進行串接
假設，我將上面資料魔改

{
    id: '1000',
    code:{
        serial:'f230fh0g3'
    },
    name: 'Bamboo Watch',
    description: 'Product Description',
    image: 'bamboo-watch.jpg',
    price: 65,
    category: 'Accessories',
    quantity: 24,
    inventoryStatus: 'INSTOCK',
    rating: 5
}

code的Column可以修改成

<Column field="code.serial" header="產品編號"></Column>

但注意是維持field是string，
別太開心用成field={code.serial}之類的，
遇到這種還問為什麼錯的大有人在...
要說他聰明?是滿聰明的(js學得很好)
那麼先來貼出結果

再來就值接上code

import React,{useEffect , useState} from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from '../service/table';
import { Product } from '../interfaces/table';
const Tables1Compnent:React.FC = ()=> {
    let service = new ProductService();
    const [tabledata,setTabledata] =useState<Product[]>();
    useEffect(() => {
        service.getProductsMini().then(data => setTabledata(data));
    }, []);
    return (
        <div>
            <DataTable value={tabledata}>
                <Column field="code" header="產品編號"></Column>
                <Column field="name" header="產品名稱"></Column>
                <Column field="category" header="產品類別"></Column>
                <Column field="quantity" header="數量"></Column>
            </DataTable>
        </div>

    );
}
export default Tables1Compnent;

好啦 ~~
今天就先到這
明天見