Needless UI

コンポーネント

データグリッド

何行あっても、並べ替え、絞り込み、グループ化、編集、エクスポートができます。

インポート

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

NuiGrid

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

名前型デフォルト説明
rowsプロップreadonly T[]データ。編集すると行が置き換わり、onRowsChange が呼び出されます。次に渡した rows で、編集内容は置き換えられます。
onRowsChangeコールバック(rows: readonly T[]) => void編集が確定するたびに、編集後の行を引数に呼び出されます。
columnsプロップNuiGridColumn<T>[]列。NuiGridColumn オブジェクトで指定します。
rowIdプロップ(row: T) => unknownrow.id ?? row行のキー。選択と追跡に使います。
labelプロップstringグリッドのアクセシブルな名前。
selectionプロップ'none' | 'single' | 'multiple''none'行を選択できるかどうかと、選択できる数。
selected
defaultSelected
onSelectedChange状態		unknown[][]選択された行のキー。
sort
defaultSort
onSortChange状態		NuiGridSort[][]並べ替え。{ column, direction } オブジェクトで指定し、先頭のものが優先されます。
filters
defaultFilters
onFiltersChange状態		Record<string, NuiGridFilter>{}列 id ごとのフィルター。演算子と値で指定します。
search
defaultSearch
onSearchChange状態		string''行にすべて含まれている必要がある語。
pageSize
defaultPageSize
onPageSizeChange状態		number01ページあたりの行数。0 にすると、スクロールする1つのリストになります。
page
defaultPage
onPageChange状態		number0表示するページ。0 から数えます。
pageSizesプロップnumber[][10, 25, 50, 100]ページャーの選択肢。
virtualプロップboolean | 'auto''auto'表示範囲の行だけをレンダリングします。常に行う、行わない、ページングなしで100行を超えたら行う auto のいずれか。
heightプロップstringグリッドの高さを制限する CSS の長さ。内部がスクロールします。
columnState
defaultColumnState
onColumnStateChange状態		NuiGridColumnState[][]各列の幅、順序、固定、表示状態。保存と復元に使います。
modeプロップ'client' | 'server''client'server は受け取った行をそのまま表示し、並べ替え、絞り込み、ページングはアプリ側に任せます。
totalプロップnumberサーバー上の行数。
loadingプロップbooleanfalseプログレスバーを表示し、行がない間はプレースホルダーの行を表示します。
localeプロップstring'en-US'数値と日付の書式設定、および入力された数値の読み取りに使うロケール。
labelsプロップPartial<NuiGridLabels>グリッドが表示または読み上げるすべてのテキスト。翻訳に使います。
cornersプロップNuiCorners角の形：round、squircle、bevel、scoop、notch、square のいずれか。
radiusプロップNuiRadius角の大きさ：none、small、medium、large、full のいずれか。
densityプロップNuiDensity占めるスペースの広さ：compact、regular、roomy のいずれか。
groupByプロップstring[][]行をグループ化する列。外側から順に指定します。
collapsed
defaultCollapsed
onCollapsedChange状態		string[][]閉じているグループのキー。グループは最初は開いています。
getChildrenプロップ(row: T) => T[] | undefined行の子。指定すると、グリッドはツリーデータを表示します。
expanded
defaultExpanded
onExpandedChange状態		unknown[][]ツリーデータで開いている行のキー。行は最初は閉じています。
details
defaultDetails
onDetailsChange状態		unknown[][]詳細を開いている行のキー。
totals, flashプロップbooleanfalse絞り込まれたすべての行を集計する行と、テキストが変わると一瞬光るセル。後者は、更新後も変わらない rowId を持つ行が対象です。
layoutプロップ'table' | 'list' | 'auto''table'list は行をカードとして表示し、auto は狭い画面でだけそうします。
toolbarプロップboolean | 'auto''auto'行の並べ替え、絞り込み、全選択を行うバー。常に表示する、表示しない、カード表示のときに表示する auto のいずれか。
renderEmptyレンダープロップ(filtered: boolean) => ReactNode行がないときに表示する内容。フィルターで行が隠れたかどうかを受け取ります。
renderDetailレンダープロップ(row: T) => ReactNode行の詳細。開くとその行の下に表示されます。グリッドにはトグルの列が加わります。
onRowActivateコールバック(row: T) => voidEnter キーまたはダブルクリックで開かれた行を引数に呼び出されます。
onCellEditコールバック(edit: NuiGridEdit<T>) => void編集が確定するたびに、その編集を引数に呼び出されます。
onQueryChangeコールバック(query: NuiGridQuery) => void並べ替え、フィルター、検索、ページが変わるたびに、それらを引数に呼び出されます。最初にも1回呼び出されます。
refプロップRef<NuiGridHandle>グリッドの ref から使える機能。エクスポート、印刷、フォーカスです。
exportXlsx, printメソッド(options?) => Blob, () => void前者は絞り込みと並べ替えを適用した行をスプレッドシートとして書き出し、後者はすべての行を印刷します。
exportCsvメソッド(options?) => string絞り込みと並べ替えを適用した行の、表示中の列を CSV で返します。
expandAllメソッド(open?: boolean) => voidすべてのグループと、子を持つすべての行を開くか、すべて閉じます。
focusCellメソッド(row: number, col: number) => voidセルにフォーカスします。行 -1 はヘッダーです。
clearFiltersメソッド() => voidすべてのフィルターと検索をクリアします。
fitメソッド(id: string) => void列の幅を、レンダリングされているセルのうち最も幅の広いものに合わせます。

状態は React のフォーム入力と同じように扱えます。値を渡して on…Change コールバックで更新するか、default… の値を渡してコンポーネントに保持させます。

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

NuiGridColumn

1つの列。Angular の列のすべてのプロパティ（必須なのは id と header だけです）と、列を描画する次の2つを受け取ります。

名前型デフォルト説明
renderCellレンダープロップ({ row, value, text, column }) => ReactNode列のセルを自分で描画します。行、その値、テキストを受け取ります。
renderHeaderレンダープロップ(column) => ReactNode列のヘッダーを自分で描画します。列の名前には引き続き header が使われます。