Needless UI

コンポーネント

データグリッド

何行あっても、並べ替え、絞り込み、選択、編集、スクロールができます。

インポート

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

NuiGrid

ネイティブのテーブルで構築したデータグリッド。

セレクター
nui-grid
名前型デフォルト説明
rows双方向readonly T[]データ。編集すると行が置き換わるため、[(rows)] でバインドします。
columns入力NuiGridColumn<T>[]列。NuiGridColumn オブジェクトで指定します。
rowId入力(row: T) => unknownrow.id ?? row行のキー。選択と追跡に使います。
label入力stringグリッドのアクセシブルな名前。
selection入力'none' | 'single' | 'multiple''none'行を選択できるかどうかと、選択できる数。
selected双方向unknown[][]選択された行のキー。
sort双方向NuiGridSort[][]並べ替え。{ column, direction } オブジェクトで指定し、先頭のものが優先されます。
filters双方向Record<string, NuiGridFilter>{}列 id ごとのフィルター。演算子と値で指定します。
search双方向string''行にすべて含まれている必要がある語。
pageSize双方向number01ページあたりの行数。0 にすると、スクロールする1つのリストになります。
page双方向number0表示するページ。0 から数えます。
pageSizes入力number[][10, 25, 50, 100]ページャーの選択肢。
virtual入力boolean | 'auto''auto'表示範囲の行だけをレンダリングします。常に行う、行わない、ページングなしで100行を超えたら行う auto のいずれか。
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出力TEnter キーまたはダブルクリックで開かれた行を出力します。
cellEdit出力NuiGridEdit<T>編集が確定するたびに、その編集を出力します。
queryChange出力NuiGridQuery並べ替え、フィルター、検索、ページが変わるたびに、それらを出力します。
exportCsvメソッド(options?) => string絞り込みと並べ替えを適用した行の、表示中の列を CSV で返します。
focusCellメソッド(row: number, col: number) => voidセルにフォーカスします。行 -1 はヘッダーです。
clearFiltersメソッド() => voidすべてのフィルターと検索をクリアします。

カスタマイズ用の入力のうち、設定しなかったものは最も近い data-nui-* 属性に従います。詳しくはカスタマイズガイドをご覧ください。

NuiGridColumn

1つの列。必須なのは id と header だけです。

名前型デフォルト説明
idプロパティstring一意の値。並べ替え、フィルター、列の状態でキーとして使われます。
headerプロパティstringヘッダーのテキスト。
valueプロパティkeyof T | ((row: T) => V)行のキー、または行を受け取る関数。デフォルトは 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

列のセルを描画します。コンテキストには行、その値、テキストが入っています。

セレクター
ng-template[nuiGridCell]
名前型デフォルト説明
nuiGridCell入力string列の id。

NuiGridHeader

列のヘッダーを描画します。

セレクター
ng-template[nuiGridHeader]
名前型デフォルト説明
nuiGridHeader入力string列の id。

NuiGridEmpty

行がないときに表示する内容。コンテキストから、フィルターで行が隠れたかどうかがわかります。

セレクター
ng-template[nuiGridEmpty]