การจัดกลุ่มแถว การคำนวณค่าสรุป ข้อมูลแบบต้นไม้ master/detail และการส่งออกเป็น Excel ของ AG Grid เป็นฟีเจอร์ในรุ่น Enterprise การนำไปใช้งานจริงต้องมีสัญญาอนุญาตเชิงพาณิชย์ และหากไม่มี license key ตารางจะแสดงลายน้ำและบันทึกข้อผิดพลาดลงคอนโซล ส่วนตารางข้อมูลของ Needless UI มีการจัดกลุ่มพร้อมผลรวม ข้อมูลแบบต้นไม้ รายละเอียดของแถว และการส่งออกเป็น .xlsx ภายใต้สัญญาอนุญาต MIT คู่มือนี้จะพาย้ายแอป Angular จากตัวหนึ่งไปอีกตัว ทั้งสิ่งที่ย้ายมาได้เลย สิ่งที่ย้ายมาไม่ได้ และโค้ดที่ต้องเปลี่ยน
คู่มือนี้ใช้ชื่อตาม AG Grid 36 ซึ่งรองรับ Angular 20 ถึง 22 ส่วน Needless UI ต้องใช้ Angular 22
สิ่งที่คุณจะได้
| ฟีเจอร์ | AG Grid | Needless UI |
|---|---|---|
| การจัดกลุ่มแถว พร้อมค่าสรุปและแถวผลรวม | Enterprise | มี ซ้อนได้หลายระดับ พร้อมผลรวม ค่าเฉลี่ย ค่าต่ำสุด ค่าสูงสุด จำนวน หรือฟังก์ชัน |
| ข้อมูลแบบต้นไม้ | Enterprise | มี สร้างจากแถวที่ซ้อนกัน |
| รายละเอียดใต้แถว (master/detail) | Enterprise | มี ใส่เทมเพลตใดก็ได้ใต้แถว รวมถึงตารางข้อมูลอีกตาราง |
| การส่งออกเป็น Excel | Enterprise รองรับสไตล์ หลายชีต รูปภาพ และสูตร | มี ส่งออกเป็นชีตเดียวที่เซลล์มีชนิดข้อมูล พร้อมรูปแบบตัวเลข และแถวหัวตารางที่ตรึงไว้พร้อมตัวกรอง |
| เมนูคอลัมน์พร้อมเครื่องมือเลือกคอลัมน์ | Enterprise | มี เรียงลำดับ กรอง ตรึง ย้าย ปรับความกว้างให้พอดี และซ่อนได้ทีละคอลัมน์ รวมถึงแสดงหรือซ่อนทุกคอลัมน์ |
| การเรียงลำดับตามหลายคอลัมน์ การค้นหาด่วน การแบ่งหน้า และการเลือกแถว | Community | มี |
| ตัวกรองคอลัมน์ | Community ใส่ได้สูงสุดสองเงื่อนไข เชื่อมด้วย AND หรือ OR | หนึ่งเงื่อนไขต่อคอลัมน์ |
| ตัวกรองแบบ Set Multi และ Advanced | Enterprise | บางส่วน มีรายการให้ติ๊กเลือกจากตัวเลือกของคอลัมน์ แต่ไม่ได้สร้างจากค่าในข้อมูล |
| ปรับความกว้าง ย้าย ตรึง และซ่อนคอลัมน์ พร้อมบันทึกสถานะของคอลัมน์ | Community | มี |
| การเลื่อนแบบ virtual | Community ทั้งแถวและคอลัมน์ | แถว |
| การแก้ไขเซลล์ | Community แต่ตัวแก้ไขบางตัวต้องใช้ Enterprise | มี ตามชนิดของคอลัมน์ พร้อมการตรวจสอบค่า แต่ไม่มีตัวแก้ไขแบบกำหนดเองและไม่มีการเลิกทำ |
| การทำ pivot และแผนภูมิในตัว | Enterprise | ไม่มี |
| คลิปบอร์ด การเลือกช่วงเซลล์ เมนูบริบท แถบสถานะ และแถบด้านข้าง | Enterprise | ไม่มี |
| ข้อมูลจากเซิร์ฟเวอร์ | Server-side row model ต้องใช้ Enterprise ส่วนการโหลดเป็นบล็อกใช้ได้ใน Community | รับข้อมูลทีละหน้าจากเซิร์ฟเวอร์ของคุณ โดยเซิร์ฟเวอร์จัดการการเรียงลำดับ ตัวกรอง และการค้นหา แต่ไม่มีการจัดกลุ่มบนเซิร์ฟเวอร์ |
| กลุ่มคอลัมน์ การลากแถว และแถวที่ตรึงไว้ | Community | ไม่มี |
| เฟรมเวิร์ก | React, Angular 20 ถึง 22, Vue และ JavaScript ธรรมดา | Angular 22 และ React 19 |
อะไรตรงกับอะไร
| AG Grid | ตารางข้อมูลของ Needless UI |
|---|---|
<ag-grid-angular> การลงทะเบียนโมดูล และ LicenseManager.setLicenseKey() | <nui-grid> ไม่ต้องลงทะเบียนอะไรและไม่ต้องใช้ key |
rowData และ columnDefs | [(rows)] และ [columns] |
field และ headerName | id และ header |
valueGetter valueFormatter และ cellDataType | value format (ตัวเลือก Intl หรือฟังก์ชัน) และ type |
cellRenderer | เทมเพลต nuiGridCell |
pinned: 'left' และ hide | pinned: 'start' และ hidden |
rowGroup ของคอลัมน์ และ groupDefaultExpanded | [(groupBy)] ซึ่งเป็นรายการ id ของคอลัมน์ กลุ่มจะขยายอยู่ตั้งแต่แรก และ [(collapsed)] ใช้ยุบกลุ่ม |
aggFunc และ grandTotalRow | aggregate และ totals |
treeData คู่กับ treeDataChildrenField | children: (row) => row.children |
masterDetail และ detailCellRenderer | เทมเพลต nuiGridDetail และ [(details)] |
quickFilterText | [(search)] |
rowSelection และ getSelectedRows() | selection และ [(selected)] ซึ่งเก็บคีย์ของแถวที่เลือก |
pagination และ paginationPageSize | [(pageSize)] [(page)] และ pageSizes |
getColumnState() และ applyColumnState() | [(columnState)] |
exportDataAsExcel() และ exportDataAsCsv() | exportXlsx() คืนค่าเป็น Blob และ exportCsv() คืนค่าเป็นข้อความ |
cellValueChanged และ rowDoubleClicked | (cellEdit) และ (rowActivate) |
rowModelType: 'serverSide' | mode="server" total และ (queryChange) |
localeText และ enableRtl | labels ส่วนทิศทางขวาไปซ้ายจะเป็นไปตาม dir ของหน้า |
คำสั่งซื้อที่จัดกลุ่มตามประเทศด้วยทั้งสองไลบรารี
โจทย์คือแสดงคำสั่งซื้อที่จัดกลุ่มตามประเทศ พร้อมยอดรวมของแต่ละประเทศและยอดรวมทั้งหมด ส่งออกเป็น Excel ได้ มีการค้นหาด่วน และเลือกได้หลายแถว เมื่อใช้ AG Grid 36 ซึ่งการจัดกลุ่ม ผลรวม และการส่งออกเป็น Excel ต้องใช้รุ่น Enterprise จะเขียนได้ดังนี้
ส่วนเมื่อใช้ตารางข้อมูลของ Needless UI จะเขียนได้ดังนี้
มีบางเรื่องที่ทำงานต่างกัน แถวที่เลือกจะถูกเก็บเป็นคีย์ ซึ่งก็คือ id ของแถว การเลือกจึงยังคงอยู่แม้จะได้ข้อมูลชุดใหม่ หากต้องการตัวแถวก็จับคู่คีย์กลับไปหาแถว กลุ่มจะขยายอยู่ตั้งแต่แรก ป้ายกำกับของกลุ่มจะอยู่ในคอลัมน์แรกที่มองเห็น และการค้นหาจะอ่านเฉพาะคอลัมน์ที่มองเห็น หากต้องการให้การค้นหาตรงกับคอลัมน์ที่ใช้จัดกลุ่มด้วย จึงต้องแสดงคอลัมน์นั้นไว้ และ exportXlsx() จะคืนไฟล์มาให้แทนการดาวน์โหลด ไฟล์นั้นมีชีตเดียวซึ่งเป็นแถวที่กรองและเรียงลำดับแล้ว โดยไม่มีแถวกลุ่ม
หากต้องการสิ่งที่ยังไม่มี
หากแอปของคุณต้องพึ่งการทำ pivot แผนภูมิ คลิปบอร์ดและการเลือกช่วงเซลล์ การจัดกลุ่มบนเซิร์ฟเวอร์ หรือกลุ่มคอลัมน์ ตารางข้อมูลของ Needless UI ยังใช้แทน AG Grid ไม่ได้ในตอนนี้ เปิด issue เพื่อบอกสิ่งที่คุณต้องการ ส่วนเรื่องอื่นทั้งหมด หน้าของตารางข้อมูลมีทุก input output และตัวอย่าง