Nhóm dòng, tổng hợp giá trị, dữ liệu dạng cây, master/detail và xuất Excel của AG Grid thuộc bản Enterprise: muốn dùng trong môi trường production thì cần giấy phép thương mại, và nếu không có khóa, bảng sẽ hiện hình mờ và ghi một lỗi ra console. Bảng dữ liệu của Needless UI có nhóm dòng kèm tổng, dữ liệu dạng cây, chi tiết dòng và xuất .xlsx theo giấy phép MIT. Hướng dẫn này giúp bạn chuyển một ứng dụng Angular từ AG Grid sang Needless UI: những gì mang theo được, những gì không, và code thay đổi ra sao.
Hướng dẫn này dùng tên gọi của AG Grid 36. AG Grid 36 hỗ trợ Angular 20 đến 22; Needless UI cần Angular 22.
Bạn nhận được gì
| Tính năng | AG Grid | Needless UI |
|---|---|---|
| Nhóm dòng, kèm giá trị tổng hợp và dòng tổng cộng | Enterprise | Có: nhiều cấp, với tổng, trung bình, nhỏ nhất, lớn nhất, số lượng hoặc một hàm |
| Dữ liệu dạng cây | Enterprise | Có, từ các dòng lồng nhau |
| Chi tiết bên dưới dòng (master/detail) | Enterprise | Có: template bất kỳ bên dưới dòng, kể cả một bảng dữ liệu khác |
| Xuất Excel | Enterprise: style, nhiều trang tính, hình ảnh và công thức | Có: một trang tính với ô giữ đúng kiểu dữ liệu, kèm định dạng số và dòng tiêu đề cố định có bộ lọc |
| Menu cột kèm bộ chọn cột | Enterprise | Có: sắp xếp, lọc, ghim, di chuyển, chỉnh vừa độ rộng và ẩn từng cột, cũng như hiện hoặc ẩn tất cả các cột |
| Sắp xếp theo nhiều cột, tìm kiếm nhanh, phân trang, chọn dòng | Community | Có |
| Bộ lọc cột | Community: tối đa hai điều kiện, nối bằng AND hoặc OR | Một điều kiện cho mỗi cột |
| Bộ lọc tập giá trị, bộ lọc kết hợp và bộ lọc nâng cao | Enterprise | Một phần: danh sách checkbox lấy từ các lựa chọn của cột, không phải từ các giá trị trong dữ liệu |
| Đổi độ rộng, di chuyển, ghim, ẩn cột và lưu trạng thái cột | Community | Có |
| Cuộn ảo | Community: dòng và cột | Chỉ dòng |
| Chỉnh sửa ô | Community; một số trình chỉnh sửa thuộc Enterprise | Có, theo kiểu cột, kèm kiểm tra hợp lệ; không có trình chỉnh sửa tùy biến và không có hoàn tác |
| Pivot, biểu đồ tích hợp | Enterprise | Không |
| Sao chép và dán, chọn vùng ô, menu ngữ cảnh, thanh trạng thái, thanh bên | Enterprise | Không |
| Dữ liệu từ máy chủ | Mô hình dòng phía máy chủ: Enterprise; tải theo khối: Community | Từng trang từ máy chủ của bạn, do máy chủ sắp xếp, lọc và tìm kiếm; không nhóm dòng phía máy chủ |
| Nhóm cột, kéo thả dòng, dòng được ghim | Community | Không |
| Framework | React, Angular 20 đến 22, Vue và JavaScript thuần | Angular 22 và React 19 |
Đối chiếu tùy chọn
| AG Grid | Bảng dữ liệu Needless UI |
|---|---|
<ag-grid-angular>, đăng ký module, LicenseManager.setLicenseKey() | <nui-grid>; không cần đăng ký gì, cũng không cần khóa |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (tùy chọn Intl hoặc một hàm), type |
cellRenderer | Template nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup của cột, groupDefaultExpanded | [(groupBy)], danh sách id của các cột. Nhóm mặc định mở sẵn; [(collapsed)] đóng chúng lại. |
aggFunc, grandTotalRow | aggregate, totals |
treeData với treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Template nuiGridDetail, và [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, và [(selected)]: khóa của các dòng được chọn |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() trả về một Blob, còn exportCsv() trả về văn bản |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; hướng từ phải sang trái theo dir của trang |
Đơn hàng nhóm theo quốc gia, viết theo cả hai cách
Bài toán: đơn hàng được nhóm theo quốc gia, có tổng cho từng quốc gia và một tổng chung cho tất cả, xuất Excel, tìm kiếm nhanh và chọn nhiều dòng. Với AG Grid 36, phần nhóm dòng, tổng và xuất Excel đều cần bản Enterprise:
Với bảng dữ liệu của Needless UI:
Có vài điểm hoạt động khác. Lựa chọn chứa khóa, tức id của các dòng, nên vẫn giữ nguyên khi có dữ liệu mới; khi cần chính các dòng, hãy ánh xạ khóa ngược lại thành dòng. Nhóm mặc định mở sẵn. Nhãn của nhóm nằm ở cột hiển thị đầu tiên, và tìm kiếm chỉ đọc các cột đang hiển thị, nên nếu muốn tìm kiếm khớp cả cột dùng để nhóm, hãy để cột đó hiển thị. Ngoài ra, exportXlsx() trả về tệp thay vì tải xuống: một trang tính gồm các dòng đã lọc và sắp xếp, không có dòng nhóm.
Nếu bạn cần những gì còn thiếu
Nếu ứng dụng của bạn phụ thuộc vào pivot, biểu đồ, sao chép, dán và chọn vùng ô, nhóm dòng phía máy chủ hoặc nhóm cột, bảng dữ liệu của Needless UI chưa thể thay thế AG Grid. Hãy mở một issue cho tính năng bạn cần. Với mọi thứ khác, trang của bảng dữ liệu có đủ mọi input, output và ví dụ.