Needless UI

Các component

Bảng dữ liệu

Sắp xếp, lọc, chọn, chỉnh sửa và cuộn qua bao nhiêu dòng cũng được.

Import

import-grid.ts
import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';

NuiGrid

Bảng dữ liệu dựa trên phần tử table native.

Selector
nui-grid
TênKiểuMặc địnhMô tả
rowsHai chiềureadonly T[]Dữ liệu. Chỉnh sửa sẽ thay thế dòng, nên hãy liên kết bằng [(rows)].
columnsInputNuiGridColumn<T>[]Các cột, dưới dạng đối tượng NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowKhóa của một dòng, dùng để chọn và theo dõi.
labelInputstringAccessible name của bảng.
selectionInput'none' | 'single' | 'multiple''none'Có cho chọn dòng hay không, và chọn được bao nhiêu.
selectedHai chiềuunknown[][]Khóa của các dòng được chọn.
sortHai chiềuNuiGridSort[][]Thứ tự sắp xếp, dưới dạng đối tượng { column, direction }; đối tượng đầu được ưu tiên.
filtersHai chiềuRecord<string, NuiGridFilter>{}Một bộ lọc cho mỗi id cột: toán tử và giá trị.
searchHai chiềustring''Các từ đều phải xuất hiện trong một dòng.
pageSizeHai chiềunumber0Số dòng mỗi trang, hoặc 0 để hiển thị một danh sách cuộn.
pageHai chiềunumber0Trang đang hiển thị, tính từ 0.
pageSizesInputnumber[][10, 25, 50, 100]Các lựa chọn trong thanh phân trang.
virtualInputboolean | 'auto''auto'Chỉ render các dòng đang hiển thị: luôn luôn, không bao giờ, hoặc auto khi quá 100 dòng mà không phân trang.
heightInputstringĐộ dài CSS giới hạn chiều cao bảng; nội dung cuộn bên trong.
columnStateHai chiềuNuiGridColumnState[][]Độ rộng, thứ tự, ghim và hiển thị của từng cột, để lưu và khôi phục.
modeInput'client' | 'server''client'server hiển thị dòng đúng như nhận được và để việc sắp xếp, lọc, phân trang cho bạn.
totalInputnumberSố dòng trên máy chủ.
loadingInputbooleanfalseHiển thị thanh tiến trình, và các dòng giữ chỗ khi chưa có dòng nào.
localeInputstringLOCALE_IDĐịnh dạng số và ngày, và đọc số được gõ vào.
labelsInputPartial<NuiGridLabels>Mọi văn bản mà bảng hiển thị hoặc đọc lên, để dịch.
cornersInputNuiCornersHình dạng các góc: round, squircle, bevel, scoop, notch hoặc square.
radiusInputNuiRadiusMức bo góc: none, small, medium, large hoặc full.
densityInputNuiDensityLượng không gian mà component chiếm: compact, regular hoặc roomy.
rowActivateOutputTPhát ra dòng được mở bằng Enter hoặc nhấp đúp.
cellEditOutputNuiGridEdit<T>Phát ra mỗi lần sửa đã xác nhận.
queryChangeOutputNuiGridQueryPhát ra sắp xếp, bộ lọc, tìm kiếm và trang mỗi khi chúng thay đổi.
exportCsvPhương thức(options?) => stringCác dòng đã lọc và sắp xếp của những cột đang hiển thị, dưới dạng CSV.
focusCellPhương thức(row: number, col: number) => voidChuyển focus vào một ô; dòng -1 là tiêu đề.
clearFiltersPhương thức() => voidXóa mọi bộ lọc và tìm kiếm.

Các input tùy biến mà bạn không đặt sẽ lấy giá trị từ thuộc tính data-nui-* gần nhất. Xem hướng dẫn tùy biến.

NuiGridColumn

Một cột. Chỉ id và header là bắt buộc.

TênKiểuMặc địnhMô tả
idThuộc tínhstringDuy nhất; là khóa trong sắp xếp, bộ lọc và trạng thái cột.
headerThuộc tínhstringVăn bản tiêu đề cột.
valueThuộc tínhkeyof T | ((row: T) => V)Một thuộc tính của dòng, hoặc một hàm nhận dòng. Mặc định là row[id].
typeThuộc tính'text' | 'number' | 'date' | 'boolean' | 'enum''text'Quyết định cách căn lề, sắp xếp, bộ lọc và trình chỉnh sửa.
formatThuộc tínhIntl options | ((value, row) => string)Tùy chọn Intl cho số và ngày, hoặc một hàm tạo ra văn bản.
optionsThuộc tínhNuiOption<V>[]Các lựa chọn của cột enum, dưới dạng đối tượng NuiOption.
width, minWidth, maxWidthThuộc tínhnumberTính bằng pixel.
flexThuộc tínhnumberChia phần không gian còn lại với các cột flex khác.
alignThuộc tính'start' | 'center' | 'end'Mặc định theo kiểu: số và ngày căn về cuối.
pinned, hiddenThuộc tính'start' | 'end', booleanTrạng thái ghim và hiển thị ban đầu của cột.
sortable, filterable, resizable, reorderable, hideableThuộc tínhbooleantrueCó thể tắt từng thuộc tính bằng false.
compareThuộc tính(a: V, b: V) => numberSắp xếp tùy biến.
editable, validateThuộc tínhboolean | ((row) => boolean), (value, row) => string | nullÔ có chỉnh sửa được không, và thông báo khi giá trị không hợp lệ.
setThuộc tính(row: T, value: V) => TTạo dòng đã chỉnh sửa. Mặc định là một bản sao mang giá trị mới.

NuiGridCell

Vẽ các ô của một cột. Context chứa dòng, giá trị và văn bản của ô.

Selector
ng-template[nuiGridCell]
TênKiểuMặc địnhMô tả
nuiGridCellInputstringId của cột.

NuiGridHeader

Vẽ tiêu đề của một cột.

Selector
ng-template[nuiGridHeader]
TênKiểuMặc địnhMô tả
nuiGridHeaderInputstringId của cột.

NuiGridEmpty

Nội dung khi không có dòng nào. Context cho biết bộ lọc có ẩn chúng hay không.

Selector
ng-template[nuiGridEmpty]