แม้ว่า AG Grid จะมีฟีเจอร์การทำงานพื้นฐาน (Core Engine) ที่เหมือนกันในทุก Framework แต่ความแตกต่างที่สำคัญคือ “วิธีการเชื่อมต่อ” (Wrapper Implementation) และการจัดการกับ Lifecycle ของแต่ละตัว
การจัดการ DOM และ Performance
- JavaScript (Vanilla): เป็นการจัดการ DOM โดยตรง (Direct Manipulation) ไม่มี overhead ของ framework ทำให้ประสิทธิภาพดิบ (Raw Performance) สูงที่สุด แต่เขียนยากกว่าเพราะต้องจัดการ State เองทั้งหมด
- Angular, Vue, React: AG Grid เขียน “Wrapper” ขึ้นมาหุ้มเพื่อให้เราใช้งานแบบ Declarative ได้ (ส่งค่าผ่าน Props/Bindings) โดย AG Grid พยายามใช้ Virtual DOM ของตัวเองเป็นหลักเพื่อรักษาความเร็ว แต่ยังคง Sync กับ Lifecycle ของ Framework นั้น ๆ
Custom Components (Cell Renderers / Editors)
นี่คือจุดที่ต่างกันชัดเจนที่สุดในด้านการเขียนโค้ดครับ
- Angular: ต้องใช้ Angular Components และต้องระวังเรื่องการจัดการ
ViewContainerRef(แต่ AG Grid จัดการความยุ่งยากส่วนใหญ่ให้แล้ว) และรองรับระบบ Dependency Injection (DI) ของ Angular เต็มรูปแบบ - JavaScript: คุณต้องเขียนเป็น Class หรือ Function ที่คืนค่าเป็น Plain HTML/String ซึ่งจะลำบากกว่าถ้าต้องการทำ UI ซับซ้อนในช่องตาราง
- React: คุณสามารถใช้ React Functional Components เป็น Cell Renderer ได้เลย โดย AG Grid จะจัดการเรื่องการ Portal ข้อมูลให้เอง
- Vue: ใช้ Vue Components (SFC) ได้ตามปกติ รองรับทั้ง Options API และ Composition API
การจัดการข้อมูล (Data Binding)
| Feature | Plain JavaScript | React | Angular | Vue |
| Data Update | api.setRowData(data) | ผ่าน rowData prop (State) | ผ่าน [rowData] binding | ผ่าน :rowData binding |
| Event Handling | onGridReady: (params) => {} | onGridReady={onGridReady} | (gridReady)="onGridReady($event)" | @grid-ready="onGridReady" |
| Template | HTML Strings | JSX / TSX | HTML Templates | Vue Templates |
ขนาดของ Bundle Size
- ถ้าโปรเจกต์คุณเป็น Framework ไหน ให้ใช้ตัวนั้นครับ เพราะ AG Grid ออกแบบมาให้กลมกลืนกับ Ecosystem ของแต่ละตัวอยู่แล้ว
- หากกังวลเรื่องการย้าย Framework ในอนาคต: ข่าวดีคือ Grid Options (Configuration) เกือบ 90% ของ AG Grid นั้น “เหมือนกันทุก Framework” ครับ ถ้าคุณเขียน Logic การ Sort/Filter/Group ไว้ใน Framework หนึ่ง การย้ายไปอีกตัวหนึ่งจะทำได้เร็วมาก เพราะเปลี่ยนแค่ส่วนที่เป็น UI Wrapper เท่านั้น
อ่านเพิ่มเติม