API Data grid untuk React

Impor

import-grid.tsx

import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

Data grid di atas tabel native.

NuiGrid: Properti
Nama	Tipe	Default	Deskripsi
`rows`Prop	`readonly T[]`		Datanya. Pengeditan mengganti barisnya dan memanggil `onRowsChange`; `rows` berikutnya yang Anda teruskan menggantikan hasil edit.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Dipanggil dengan baris-barisnya setelah setiap edit yang diterapkan.
`columns`Prop	`NuiGridColumn<T>[]`		Kolom-kolomnya, sebagai objek `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Kunci baris, untuk pemilihan dan pelacakan.
`label`Prop	`string`		Nama aksesibel grid.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Apakah baris bisa dipilih, dan berapa banyak.
`selected` `defaultSelected` `onSelectedChange`State	`unknown[]`	`[]`	Kunci baris yang dipilih.
`sort` `defaultSort` `onSortChange`State	`NuiGridSort[]`	`[]`	Pengurutan, sebagai objek `{ column, direction }`; yang pertama diutamakan.
`filters` `defaultFilters` `onFiltersChange`State	`Record<string, NuiGridFilter>`	`{}`	Satu filter per id kolom: operator dan nilai.
`search` `defaultSearch` `onSearchChange`State	`string`	`''`	Kata-kata yang semuanya harus ada dalam satu baris.
`pageSize` `defaultPageSize` `onPageSizeChange`State	`number`	`0`	Baris per halaman, atau 0 untuk satu daftar yang bergulir.
`page` `defaultPage` `onPageChange`State	`number`	`0`	Halaman yang ditampilkan, mulai dari 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Pilihan ukuran halaman di paginator.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Hanya merender baris yang terlihat: selalu, tidak pernah, atau `auto` jika lebih dari 100 baris tanpa paginasi.
`height`Prop	`string`		Panjang CSS yang membatasi grid; isinya bergulir di dalam.
`columnState` `defaultColumnState` `onColumnStateChange`State	`NuiGridColumnState[]`	`[]`	Lebar, urutan, penyematan, dan visibilitas setiap kolom, untuk disimpan dan dipulihkan.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` menampilkan baris apa adanya dan menyerahkan pengurutan, penyaringan, serta paginasi kepada Anda.
`total`Prop	`number`		Jumlah baris di server.
`loading`Prop	`boolean`	`false`	Menampilkan bilah progres, dan baris placeholder selama belum ada baris.
`locale`Prop	`string`	`'en-US'`	Memformat angka dan tanggal, serta membaca angka yang diketik.
`labels`Prop	`Partial<NuiGridLabels>`		Semua teks yang ditampilkan atau diumumkan grid, untuk diterjemahkan.
`corners`Prop	`NuiCorners`		Bentuk sudut: `round`, `squircle`, `bevel`, `scoop`, `notch`, atau `square`.
`radius`Prop	`NuiRadius`		Seberapa bulat sudutnya: `none`, `small`, `medium`, `large`, atau `full`.
`density`Prop	`NuiDensity`		Seberapa banyak ruang yang digunakan komponen: `compact`, `regular`, atau `roomy`.
`groupBy`Prop	`string[]`	`[]`	Kolom untuk mengelompokkan baris, mulai dari yang terluar.
`collapsed` `defaultCollapsed` `onCollapsedChange`State	`string[]`	`[]`	Kunci grup yang tertutup; awalnya semua grup terbuka.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Baris-baris anak dari sebuah baris: grid menampilkan data pohon.
`expanded` `defaultExpanded` `onExpandedChange`State	`unknown[]`	`[]`	Kunci baris yang terbuka di data pohon; awalnya semuanya tertutup.
`details` `defaultDetails` `onDetailsChange`State	`unknown[]`	`[]`	Kunci baris yang detailnya terbuka.
`totals, flash`Prop	`boolean`	`false`	Baris agregat atas semua baris yang tersaring; sel yang berkedip saat teksnya berubah, pada baris dengan `rowId` yang tetap.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` menampilkan baris sebagai kartu, dan `auto` melakukannya di layar sempit.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Bilah yang mengurutkan, menyaring, dan memilih semua baris: selalu, tidak pernah, atau `auto` bersama kartu.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Yang ditampilkan saat tidak ada baris; fungsinya diberi tahu apakah filter menyembunyikannya.
`renderDetail`Render prop	`(row: T) => ReactNode`		Detail sebuah baris, ditampilkan di bawahnya saat dibuka. Grid menambahkan kolom berisi toggle.
`onRowActivate`Callback	`(row: T) => void`		Dipanggil dengan baris yang dibuka dengan Enter atau klik dua kali.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Dipanggil dengan setiap edit yang diterapkan.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Dipanggil dengan pengurutan, filter, pencarian, dan halaman setiap kali berubah, serta sekali di awal.
`ref`Prop	`Ref<NuiGridHandle>`		Yang bisa dijangkau lewat `ref` grid: ekspor, pencetakan, dan fokus.
`exportXlsx, print`Metode	`(options?) => Blob, () => void`		Baris yang tersaring dan terurut sebagai spreadsheet; mencetak semua baris.
`exportCsv`Metode	`(options?) => string`		Baris yang tersaring dan terurut dari kolom yang terlihat, sebagai CSV.
`expandAll`Metode	`(open?: boolean) => void`		Membuka setiap grup dan setiap baris yang punya anak, atau menutup semuanya.
`focusCell`Metode	`(row: number, col: number) => void`		Memfokuskan sel; baris `-1` adalah header.
`clearFilters`Metode	`() => void`		Mengosongkan semua filter dan pencarian.
`fit`Metode	`(id: string) => void`		Menyesuaikan lebar kolom dengan sel terlebar yang sudah dirender.

State bekerja seperti input bawaan React: teruskan nilai dan perbarui lewat callback on…Change-nya, atau teruskan nilai default… dan biarkan komponen yang menyimpannya.

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

NuiGridColumn

Satu kolom. Menerima semua properti kolom Angular (hanya id dan header yang wajib), serta dua properti ini yang menggambarnya.

NuiGridColumn: Properti
Nama	Tipe	Default	Deskripsi
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Untuk menggambar sel kolom sendiri, dari baris, nilai, dan teksnya.
`renderHeader`Render prop	`(column) => ReactNode`		Untuk menggambar header kolom sendiri; namanya tetap berasal dari `header`.