ตัวอย่าง DataGrid: รายการใบสั่งซื้อ (Purchase Order)

ตัวอย่างตารางข้อมูลที่สร้างด้วย DataGrid (vanilla JS ไม่มี dependency) แสดงรายการใบสั่งซื้อพร้อมความสามารถหลัก ได้แก่ การเรียงลำดับคอลัมน์ ป้ายสถานะ (badge) คอลัมน์วันที่และ boolean ปุ่มดำเนินการต่อแถว (ดู/ยกเลิก) การแบ่งหน้า และการเลื่อนแนวนอน

• คลิกหัวคอลัมน์เพื่อเรียงลำดับ
• ดับเบิลคลิกแถว หรือกด Enter ที่แถวที่โฟกัส เพื่อดูรายละเอียด
• ปุ่มตา (View) ดูรายละเอียด และปุ่ม Cancel ยกเลิกเอกสารที่ยกเลิกได้
• ด้านล่างสุดคือ Source Code ของตัวอย่างนี้ พร้อมปุ่มคัดลอก

การใช้งานในโค้ด

import { DataGrid, thaiLabels } from '/src/index.js';

const grid = new DataGrid(document.getElementById('grid'), {
  rowKey: 'id', // คีย์ที่ไม่ซ้ำของแต่ละแถว
  rows, // array ของ object
  columns: [
    { key: 'poNumber', label: 'เลขที่ใบสั่งซื้อ', sortable: true },
    { key: 'submittedDate', label: 'วันที่', type: 'date' },
    { key: 'status', label: 'สถานะ', type: 'badge', badges: { เสร็จสิ้น: { tone: 'success' } } },
    { key: '_actions', actions: [{ name: 'view', label: 'View', icon: 'visibility' }] },
  ],
  searchable: true,
  pageSize: 10,
  defaultSort: { key: 'submittedDate', direction: 'desc' },
  onAction: ({ action, row }) => console.log(action, row),
  labels: thaiLabels,
});

grid.setRows(newRows); // เปลี่ยนข้อมูล
grid.destroy(); // ล้าง event listener เมื่อเลิกใช้

• rowKey ระบุ field ที่ไม่ซ้ำ ใช้จำแถวตอนเรียงลำดับ จัดกลุ่ม และเปิดรายละเอียด
• type ของคอลัมน์ (date, badge, boolean) จัดรูปแบบค่าให้เอง เก็บข้อมูลเป็น Date หรือ boolean ตามจริงได้
• คอลัมน์ที่มี actions สร้างปุ่มต่อแถว และแจ้งผลผ่าน onAction
• ตัวเลือก *StorageKey จำค่าที่ผู้ใช้ปรับ (หน้า ลำดับ ความกว้าง คอลัมน์) ไว้ใน localStorage
• ข้อมูลของผู้ใช้ถูก escape ก่อนแสดงเสมอ ไม่ต้องกรอง HTML เอง