Needless UI

Komponen

Data grid

Urutkan, saring, pilih, edit, dan gulir baris sebanyak apa pun.

Impor

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

NuiGrid

Data grid di atas tabel native.

Selektor
nui-grid
NamaTipeDefaultDeskripsi
rowsDua arahreadonly T[]Datanya. Pengeditan mengganti baris, jadi hubungkan dengan [(rows)].
columnsInputNuiGridColumn<T>[]Kolom-kolomnya, sebagai objek NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowKunci baris, untuk pemilihan dan pelacakan.
labelInputstringNama aksesibel grid.
selectionInput'none' | 'single' | 'multiple''none'Apakah baris bisa dipilih, dan berapa banyak.
selectedDua arahunknown[][]Kunci baris yang dipilih.
sortDua arahNuiGridSort[][]Pengurutan, sebagai objek { column, direction }; yang pertama diutamakan.
filtersDua arahRecord<string, NuiGridFilter>{}Satu filter per id kolom: operator dan nilai.
searchDua arahstring''Kata-kata yang semuanya harus ada dalam satu baris.
pageSizeDua arahnumber0Baris per halaman, atau 0 untuk satu daftar yang bergulir.
pageDua arahnumber0Halaman yang ditampilkan, mulai dari 0.
pageSizesInputnumber[][10, 25, 50, 100]Pilihan ukuran halaman di paginator.
virtualInputboolean | 'auto''auto'Hanya merender baris yang terlihat: selalu, tidak pernah, atau auto jika lebih dari 100 baris tanpa paginasi.
heightInputstringPanjang CSS yang membatasi grid; isinya bergulir di dalam.
columnStateDua arahNuiGridColumnState[][]Lebar, urutan, penyematan, dan visibilitas setiap kolom, untuk disimpan dan dipulihkan.
modeInput'client' | 'server''client'server menampilkan baris apa adanya dan menyerahkan pengurutan, penyaringan, serta paginasi kepada Anda.
totalInputnumberJumlah baris di server.
loadingInputbooleanfalseMenampilkan bilah progres, dan baris placeholder selama belum ada baris.
localeInputstringLOCALE_IDMemformat angka dan tanggal, serta membaca angka yang diketik.
labelsInputPartial<NuiGridLabels>Semua teks yang ditampilkan atau diumumkan grid, untuk diterjemahkan.
cornersInputNuiCornersBentuk sudut: round, squircle, bevel, scoop, notch, atau square.
radiusInputNuiRadiusSeberapa bulat sudutnya: none, small, medium, large, atau full.
densityInputNuiDensitySeberapa banyak ruang yang digunakan komponen: compact, regular, atau roomy.
rowActivateOutputTMengirimkan baris yang dibuka dengan Enter atau klik dua kali.
cellEditOutputNuiGridEdit<T>Mengirimkan setiap edit yang diterapkan.
queryChangeOutputNuiGridQueryMengirimkan pengurutan, filter, pencarian, dan halaman setiap kali berubah.
exportCsvMetode(options?) => stringBaris yang tersaring dan terurut dari kolom yang terlihat, sebagai CSV.
focusCellMetode(row: number, col: number) => voidMemfokuskan sel; baris -1 adalah header.
clearFiltersMetode() => voidMengosongkan semua filter dan pencarian.

Input kustomisasi yang tidak Anda atur akan mengikuti atribut data-nui-* terdekat. Lihat panduan kustomisasi.

NuiGridColumn

Satu kolom. Hanya id dan header yang wajib.

NamaTipeDefaultDeskripsi
idPropertistringUnik; menjadi kunci dalam pengurutan, filter, dan status kolom.
headerPropertistringTeks header.
valuePropertikeyof T | ((row: T) => V)Properti baris, atau fungsi dari baris. Default-nya row[id].
typeProperti'text' | 'number' | 'date' | 'boolean' | 'enum''text'Menentukan perataan, pengurutan, filter, dan editor.
formatPropertiIntl options | ((value, row) => string)Opsi Intl untuk angka dan tanggal, atau fungsi yang membuat teksnya.
optionsPropertiNuiOption<V>[]Pilihan kolom enum, sebagai objek NuiOption.
width, minWidth, maxWidthPropertinumberDalam piksel.
flexPropertinumberBerbagi sisa ruang dengan kolom flex lainnya.
alignProperti'start' | 'center' | 'end'Default-nya mengikuti tipe: angka dan tanggal rata akhir.
pinned, hiddenProperti'start' | 'end', booleanPenyematan dan visibilitas awal kolom.
sortable, filterable, resizable, reorderable, hideablePropertibooleantrueMasing-masing bisa dimatikan dengan false.
compareProperti(a: V, b: V) => numberPengurutan kustom.
editable, validatePropertiboolean | ((row) => boolean), (value, row) => string | nullApakah sel bisa diedit, dan pesan saat nilai tidak valid.
setProperti(row: T, value: V) => TMembuat baris hasil edit. Default-nya salinan dengan nilai baru.

NuiGridCell

Menggambar sel-sel kolom. Konteksnya berisi baris, nilai, dan teksnya.

Selektor
ng-template[nuiGridCell]
NamaTipeDefaultDeskripsi
nuiGridCellInputstringId kolom.

NuiGridHeader

Menggambar header kolom.

Selektor
ng-template[nuiGridHeader]
NamaTipeDefaultDeskripsi
nuiGridHeaderInputstringId kolom.

NuiGridEmpty

Yang ditampilkan saat tidak ada baris. Konteksnya memberi tahu apakah filter menyembunyikannya.

Selektor
ng-template[nuiGridEmpty]