Needless UI

元件

資料表格

對任意數量的列進行排序、篩選、選取、編輯和捲動瀏覽。

匯入

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

NuiGrid

以原生 table 元素打造的資料表格。

選擇器
nui-grid
名稱型別預設值說明
rows雙向繫結readonly T[]資料。編輯會替換列，因此請用 [(rows)] 繫結。
columns輸入NuiGridColumn<T>[]欄，以 NuiGridColumn 物件的形式提供。
rowId輸入(row: T) => unknownrow.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雙向繫結number0每頁列數；設為 0 則顯示為單一捲動清單。
page雙向繫結number0目前顯示的頁面，從 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輸入booleanfalse顯示進度列；沒有列時顯示預留位置列。
locale輸入stringLOCALE_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 是必要的。

名稱型別預設值說明
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屬性booleantrue每一項都可以設為 false 來關閉。
compare屬性(a: V, b: V) => number自訂排序。
editable, validate屬性boolean | ((row) => boolean), (value, row) => string | null儲存格是否可編輯，以及值無效時顯示的訊息。
set屬性(row: T, value: V) => T產生編輯後的列。預設為帶有新值的副本。

NuiGridCell

繪製某一欄的儲存格。其 context 包含列、它的值和文字。

選擇器
ng-template[nuiGridCell]
名稱型別預設值說明
nuiGridCell輸入string欄的 id。

NuiGridHeader

繪製某一欄的欄標題。

選擇器
ng-template[nuiGridHeader]
名稱型別預設值說明
nuiGridHeader輸入string欄的 id。

NuiGridEmpty

沒有列時顯示的內容。其 context 會說明這些列是否被篩選條件隱藏。

選擇器
ng-template[nuiGridEmpty]