数据表格 API · Needless UI

导入

import-grid.ts

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

NuiGrid

基于原生 table 元素的数据表格。

选择器: nui-grid

NuiGrid: 属性
名称	类型	默认值	说明
`rows`双向绑定	`readonly T[]`		数据。编辑会替换行，因此请用 `[(rows)]` 绑定。
`columns`输入	`NuiGridColumn<T>[]`		列，以 `NuiGridColumn` 对象的形式提供。
`rowId`输入	`(row: T) => unknown`	`row.id ?? row`	行的 key，用于选择和跟踪。
`label`输入	`string`		表格的可访问名称。
`selection`输入	`'none' \| 'single' \| 'multiple'`	`'none'`	行是否可选，以及可选几行。
`selected`双向绑定	`unknown[]`	`[]`	所选行的 key。
`sort`双向绑定	`NuiGridSort[]`	`[]`	排序，以 `{ column, direction }` 对象的形式提供；排在前面的优先。
`filters`双向绑定	`Record<string, NuiGridFilter>`	`{}`	按列 id 设置的筛选条件：一个运算符和一个值。
`search`双向绑定	`string`	`''`	必须全部出现在同一行中的词。
`pageSize`双向绑定	`number`	`0`	每页行数；设为 0 则显示为一个滚动列表。
`page`双向绑定	`number`	`0`	当前显示的页，从 0 开始。
`pageSizes`输入	`number[]`	`[10, 25, 50, 100]`	分页器中可选的每页行数。
`virtual`输入	`boolean \| 'auto'`	`'auto'`	只渲染可见的行：始终、从不，或 `auto`（不分页且超过 100 行时启用）。
`height`输入	`string`		限制表格高度的 CSS 长度，内容在表格内部滚动。
`columnState`双向绑定	`NuiGridColumnState[]`	`[]`	每列的宽度、顺序、固定和可见性，用于保存和恢复。
`mode`输入	`'client' \| 'server'`	`'client'`	`server` 按原样显示收到的行，把排序、筛选和分页交给你处理。
`total`输入	`number`		服务器上的总行数。
`loading`输入	`boolean`	`false`	显示进度条；没有行时显示占位行。
`locale`输入	`string`	`LOCALE_ID`	用于格式化数字和日期，以及解析输入的数字。
`labels`输入	`Partial<NuiGridLabels>`		表格显示或播报的所有文本，供翻译使用。
`corners`输入	`NuiCorners`		边角的形状：`round`、`squircle`、`bevel`、`scoop`、`notch` 或 `square`。
`radius`输入	`NuiRadius`		边角的大小：`none`、`small`、`medium`、`large` 或 `full`。
`density`输入	`NuiDensity`		占用的空间：`compact`、`regular` 或 `roomy`。
`rowActivate`输出	`T`		按 Enter 键或双击打开某行时，发出该行。
`cellEdit`输出	`NuiGridEdit<T>`		每次提交编辑时发出该编辑。
`queryChange`输出	`NuiGridQuery`		排序、筛选、搜索或页码变化时发出它们。
`exportCsv`方法	`(options?) => string`		以 CSV 格式返回筛选和排序后的行，只包含可见的列。
`focusCell`方法	`(row: number, col: number) => void`		让某个单元格获得焦点；第 `-1` 行是表头。
`clearFilters`方法	`() => void`		清除所有筛选条件和搜索。

用于自定义的输入属性如果未设置，会沿用最近的 data-nui-* 属性。详见自定义指南。

NuiGridColumn

一列。只有 id 和 header 是必需的。

NuiGridColumn: 属性
名称	类型	默认值	说明
`id`属性	`string`		唯一值；也是排序、筛选和列状态中使用的 key。
`header`属性	`string`		表头文本。
`value`属性	`keyof T \| ((row: T) => V)`		行的某个 key，或以行为参数的函数。默认为 `row[id]`。
`type`属性	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	决定对齐方式、排序、筛选和编辑器。
`format`属性	`Intl options \| ((value, row) => string)`		用于数字和日期的 `Intl` 选项，或生成文本的函数。
`options`属性	`NuiOption<V>[]`		`enum` 列的选项，以 `NuiOption` 对象的形式提供。
`width, minWidth, maxWidth`属性	`number`		单位为像素。
`flex`属性	`number`		与其他 `flex` 列分配剩余的空间。
`align`属性	`'start' \| 'center' \| 'end'`		默认值取决于类型：数字和日期对齐到末端。
`pinned, hidden`属性	`'start' \| 'end', boolean`		列初始的固定和可见状态。
`sortable, filterable, resizable, reorderable, hideable`属性	`boolean`	`true`	都可以设为 `false` 来关闭。
`compare`属性	`(a: V, b: V) => number`		自定义排序。
`editable, validate`属性	`boolean \| ((row) => boolean), (value, row) => string \| null`		单元格是否可编辑，以及值无效时显示的提示。
`set`属性	`(row: T, value: V) => T`		生成编辑后的行。默认为带有新值的副本。

NuiGridCell

绘制某列的单元格。上下文中包含行、它的值和文本。

选择器: ng-template[nuiGridCell]

NuiGridCell: 属性
名称	类型	默认值	说明
`nuiGridCell`输入	`string`		列的 id。

NuiGridHeader

绘制某列的表头。

选择器: ng-template[nuiGridHeader]

NuiGridHeader: 属性
名称	类型	默认值	说明
`nuiGridHeader`输入	`string`		列的 id。

NuiGridEmpty

没有行时显示的内容。上下文会说明这些行是否被筛选条件隐藏。

选择器: ng-template[nuiGridEmpty]