API React của Bảng dữ liệu

Import

import-grid.tsx

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

NuiGrid

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

NuiGrid: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`rows`Prop	`readonly T[]`		Dữ liệu. Mỗi lần sửa sẽ thay dòng tương ứng và gọi `onRowsChange`; `rows` tiếp theo mà bạn truyền vào sẽ thay thế các lần sửa.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Được gọi với các dòng sau mỗi lần sửa đã xác nhận.
`columns`Prop	`NuiGridColumn<T>[]`		Các cột, dưới dạng đối tượng `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Khóa của một dòng, dùng để chọn và theo dõi.
`label`Prop	`string`		Accessible name của bảng.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Có cho chọn dòng hay không, và chọn được bao nhiêu.
`selected` `defaultSelected` `onSelectedChange`State	`unknown[]`	`[]`	Khóa của các dòng được chọn.
`sort` `defaultSort` `onSortChange`State	`NuiGridSort[]`	`[]`	Thứ tự sắp xếp, dưới dạng đối tượng `{ column, direction }`; đối tượng đầu được ưu tiên.
`filters` `defaultFilters` `onFiltersChange`State	`Record<string, NuiGridFilter>`	`{}`	Một bộ lọc cho mỗi id cột: toán tử và giá trị.
`search` `defaultSearch` `onSearchChange`State	`string`	`''`	Các từ đều phải xuất hiện trong một dòng.
`pageSize` `defaultPageSize` `onPageSizeChange`State	`number`	`0`	Số dòng mỗi trang, hoặc 0 để hiển thị một danh sách cuộn.
`page` `defaultPage` `onPageChange`State	`number`	`0`	Trang đang hiển thị, tính từ 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Các lựa chọn trong thanh phân trang.
`virtual`Prop	`boolean \| '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.
`height`Prop	`string`		Độ dài CSS giới hạn chiều cao bảng; nội dung cuộn bên trong.
`columnState` `defaultColumnState` `onColumnStateChange`State	`NuiGridColumnState[]`	`[]`	Độ rộng, thứ tự, ghim và hiển thị của từng cột, để lưu và khôi phục.
`mode`Prop	`'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.
`total`Prop	`number`		Số dòng trên máy chủ.
`loading`Prop	`boolean`	`false`	Hiển thị thanh tiến trình, và các dòng giữ chỗ khi chưa có dòng nào.
`locale`Prop	`string`	`'en-US'`	Định dạng số và ngày, và đọc số được gõ vào.
`labels`Prop	`Partial<NuiGridLabels>`		Mọi văn bản mà bảng hiển thị hoặc đọc lên, để dịch.
`corners`Prop	`NuiCorners`		Hình dạng các góc: `round`, `squircle`, `bevel`, `scoop`, `notch` hoặc `square`.
`radius`Prop	`NuiRadius`		Mức bo góc: `none`, `small`, `medium`, `large` hoặc `full`.
`density`Prop	`NuiDensity`		Lượng không gian mà component chiếm: `compact`, `regular` hoặc `roomy`.
`groupBy`Prop	`string[]`	`[]`	Các cột để nhóm dòng, cột ngoài cùng trước.
`collapsed` `defaultCollapsed` `onCollapsedChange`State	`string[]`	`[]`	Khóa của các nhóm đang đóng; ban đầu các nhóm đều mở.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Các dòng con của một dòng: bảng hiển thị dữ liệu dạng cây.
`expanded` `defaultExpanded` `onExpandedChange`State	`unknown[]`	`[]`	Khóa của các dòng đang mở trong dữ liệu dạng cây; ban đầu chúng đều đóng.
`details` `defaultDetails` `onDetailsChange`State	`unknown[]`	`[]`	Khóa của các dòng đang mở chi tiết.
`totals, flash`Prop	`boolean`	`false`	Một dòng giá trị tổng hợp trên mọi dòng đã lọc; các ô lóe sáng khi văn bản thay đổi, ở những dòng có `rowId` cố định.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` hiển thị dòng dạng thẻ, còn `auto` làm vậy trên màn hình hẹp.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Một thanh để sắp xếp, lọc và chọn mọi dòng: luôn luôn, không bao giờ, hoặc `auto` khi hiển thị dạng thẻ.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Nội dung khi không có dòng nào; hàm được cho biết bộ lọc có ẩn chúng hay không.
`renderDetail`Render prop	`(row: T) => ReactNode`		Chi tiết của một dòng, hiển thị bên dưới dòng khi được mở. Bảng thêm một cột nút bật/tắt.
`onRowActivate`Callback	`(row: T) => void`		Được gọi với dòng được mở bằng Enter hoặc nhấp đúp.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Được gọi với mỗi lần sửa đã xác nhận.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Được gọi với sắp xếp, bộ lọc, tìm kiếm và trang mỗi khi chúng thay đổi, và một lần lúc bắt đầu.
`ref`Prop	`Ref<NuiGridHandle>`		Những gì `ref` của bảng truy cập được: xuất dữ liệu, in và focus.
`exportXlsx, print`Phương thức	`(options?) => Blob, () => void`		Các dòng đã lọc và sắp xếp, dưới dạng bảng tính; in mọi dòng.
`exportCsv`Phương thức	`(options?) => string`		Cá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.
`expandAll`Phương thức	`(open?: boolean) => void`		Mở mọi nhóm và mọi dòng có dòng con, hoặc đóng tất cả.
`focusCell`Phương thức	`(row: number, col: number) => void`		Chuyển focus vào một ô; dòng `-1` là tiêu đề.
`clearFilters`Phương thức	`() => void`		Xóa mọi bộ lọc và tìm kiếm.
`fit`Phương thức	`(id: string) => void`		Chỉnh độ rộng một cột cho vừa ô rộng nhất đã được render của nó.

State hoạt động như các trường nhập liệu của chính React: truyền một giá trị và cập nhật nó từ callback on…Change, hoặc truyền giá trị default… để component tự giữ.

Các prop 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. Nhận mọi thuộc tính của cột Angular (chỉ id và header là bắt buộc), cùng hai thuộc tính này để vẽ cột.

NuiGridColumn: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Tự vẽ các ô của cột, từ dòng, giá trị và văn bản của ô.
`renderHeader`Render prop	`(column) => ReactNode`		Tự vẽ tiêu đề của cột; `header` vẫn là tên của cột.