Siam Piwat DataGrid

การติดตั้ง

1. ข้อกำหนด Node.js 22 ขึ้นไป และ bundler ที่รองรับ ES modules (เช่น Vite, webpack) DataGrid ไม่มี runtime dependency
2. ติดตั้งแพ็กเกจด้วย npm เมื่อเผยแพร่ขึ้น registry แล้วใช้

   npm install @siampiwat/datagrid

   ตอนนี้ยังไม่ได้เผยแพร่ เลือกติดตั้งจาก URL หรือไฟล์ได้ 3 แบบ

   ก. จาก URL ของไฟล์ .tgz

   ไฟล์ .tgz แนบอยู่ที่ GitHub Releases (ถ้า repo เป็น private ต้องมี token) สร้างไฟล์เองด้วย npm run pack:release แล้วนำไปไว้บนที่ที่เปิดผ่าน URL ได้

   npm install https://github.com/banpotej/siampiwat-datagrid/releases/download/v1.0.1/siampiwat-datagrid-1.0.1.tgz

   ข. จาก git URL

   npm จะ build ให้ตอนติดตั้ง (สคริปต์ prepare) จึงต้องมี git บนเครื่องปลายทาง

   npm install github:banpotej/siampiwat-datagrid
   npm install github:banpotej/siampiwat-datagrid#main   # ระบุ branch หรือ tag

   ค. จากไฟล์ในเครื่อง

   ดาวน์โหลดแพ็กเกจที่แพ็กไว้แล้วติดตั้งจากไฟล์ได้เลย ดาวน์โหลด หรือ build และแพ็กไฟล์เองจาก repo นี้

   # ใน repo datagrid
   npm install
   npm run build
   npm pack              # ได้ไฟล์ siampiwat-datagrid-1.0.1.tgz
   
   # ในโปรเจกต์ที่จะใช้
   npm install ../siampiwat-datagrid/siampiwat-datagrid-1.0.1.tgz

3. ดาวน์โหลดเป็นไฟล์ .zip เนื้อหาเดียวกับแพ็กเกจ npm (dist/, docs/ รวมคู่มือสำหรับ AI Agent, README) แต่เป็น .zip สำหรับคนที่ไม่ใช้ npm แตกไฟล์แล้วใช้ dist/datagrid.js กับ dist/datagrid.css ดาวน์โหลด
4. โหลดผ่าน URL ในหน้าเว็บ (ไม่ใช้ npm) ไฟล์ใน dist/ เป็น ES module ที่ไม่มี dependency ใช้ผ่าน URL ได้โดยตรง นำ dist/datagrid.js และ dist/datagrid.css ไปไว้บน static host หรือ CDN (เช่น jsDelivr / unpkg หลังเผยแพร่ขึ้น npm) หรือดาวน์โหลดไฟล์ที่ build แล้วจากที่นี่ ดาวน์โหลด datagrid.js ดาวน์โหลด datagrid.css ดาวน์โหลด datagrid.cjs

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@siampiwat/datagrid@1.0.1/dist/datagrid.css" />
   <div id="app"></div>
   <script type="module">
     import { DataGrid } from 'https://cdn.jsdelivr.net/npm/@siampiwat/datagrid@1.0.1/dist/datagrid.js';
   
     new DataGrid(document.getElementById('app'), {
       rowKey: 'id',
       columns: [{ key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }],
       rows: [{ id: 1, name: 'Ada' }],
     });
   </script>

   URL ข้างบนใช้ jsDelivr (เมื่อเผยแพร่ขึ้น npm แล้ว) ควรระบุเวอร์ชันตายตัวแทน @latest หรือจะนำไฟล์ไปไว้บน static host ของตัวเองก็ได้
5. นำเข้าและสร้างตาราง (เมื่อติดตั้งด้วย npm) import จาก datagrid จะดึง CSS มาให้ด้วย (ผ่าน bundler) ถ้าต้องการ JS อย่างเดียวใช้ @siampiwat/datagrid/plain หรือ import @siampiwat/datagrid/style.css เอง

   import { DataGrid } from '@siampiwat/datagrid';
   
   const grid = new DataGrid(document.querySelector('#app'), {
     rowKey: 'id',
     columns: [{ key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }],
     rows: [{ id: 1, name: 'Ada' }],
   });

6. ใช้กับ framework DataGrid ทำงานกับ DOM จึงต้องสร้างฝั่งเบราว์เซอร์เท่านั้น เช่น ใน useEffect ของ React / Next.js (client component) แล้วเรียก grid.destroy() ตอน unmount