lytenyte-grid

高度な機能を備えた React データグリッドです。並べ替え、フィルタリング、列の固定、セルの選択、 行の選択、サーバーデータの読み込み、無限データ読み込み、行のグループ化と集計、ピボットなど、 さまざまな機能を利用できます。

LyteNyte Grid は、ヘッドレスまたはスタイル適用済みの React データグリッドで、次の 2 つのエディションがあります。

• Core — @1771technologies/lytenyte-core（Apache 2.0、無料、ライセンス不要）
• PRO — @1771technologies/lytenyte-pro（商用、Core の上位版）

PRO のライセンス: PRO は評価目的であれば無料でインストールして使用できます。試用にライセンスキーは必要ありません。キーが設定されていない場合は、「評価用」という透かしが表示されます。

運用ルール

• まず、ユーザーが Core と PRO のどちらを使用しているかを確認します。不明な場合は、要求された機能に PRO が必要な場合に限り、例では PRO を使用します。それ以外は、Core 互換の API を使用します。
• 下記の表から、関連するリファレンスファイルのみを読み込みます。最初にすべてのリファレンスを読み込まないでください。
• LyteNyte の API と用語を優先します。明示的な比較を行う場合を除き、AG Grid、TanStack Table、MUI DataGrid、または汎用的なグリッド API に置き換えないでください。
• React の例では、インポート、GridSpec、データソースの設定、列の状態、CSS のインポート、サイズを指定したグリッドコンテナーを含む、完全な TypeScript コードを提示します。
• 関連する CSS のインポートと、明示的に高さを指定したラッパーを必ず含めます。
• デバッグ時は、まず次の点を確認します。パッケージのエディション、CSS のインポート、コンテナーの高さ、列 ID、制御された状態のハンドラー、データソースの型、そしてその機能が Core と PRO のどちらに属するか。

本番環境へのデプロイで透かしを削除するには、ライセンスキーが必要です。ライセンスの検証はオフラインで行われ、 ネットワークリクエストは発生しません。ユーザーが開発やプロトタイピングを行っていて、まだライセンスを設定していなくても問題ありません。 公開前に追加できます。

クイックスタート

1. LyteNyte Grid と関連する CSS ファイルをインポートします。

   import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
   import "@1771technologies/lytenyte-pro/grid-full.css";
   

   LyteNyte Grid Core を使用する場合：

   import { Grid, useClientDataSource } from "@1771technologies/lytenyte-core";
   import "@1771technologies/lytenyte-core/grid-full.css";
   

2. LyteNyte Grid に、表示するデータの型を指定する Grid Spec 型を作成します。

   interface GridSpec {
     readonly data: { name: string; price: number };
   }
   

3. LyteNyte パッケージからエクスポートされる Grid コンポーネントを使用して LyteNyte Grid をレンダリングするコンポーネントを作成します。

   function MyGrid() {
     const ds = useClientDataSource({ data: myData });
   
     const [columns, setColumns] = useState<Grid.Column<GridSpec>[]>([
       { id: "name", name: "Name" },
       { id: "price", name: "Price", type: "number" },
     ]);
   
     return (
       <div className="ln-light ln-grid" style={{ height: 500 }}>
         <Grid<GridSpec> rowSource={ds} columns={columns} onColumnsChange={setColumns} rowHeight={40} />
       </div>
     );
   }
   

   ここでは、コンポーネント内で列も定義しています。LyteNyte Grid の列には、最低限 id プロパティが必要です。 このプロパティは、すべての列で一意でなければなりません。詳しくは列のリファレンスをご覧ください。

必要に応じてリファレンスを読み込む

タスクで必要な場合にのみ、リファレンスファイルを読み込んでください。最初にすべてのファイルを読み込まないでください。

タスクに含まれる内容…	このファイルを読み込む
インストール、ライセンス、CSS のインポート、CDN、ウォーターマークのエラー	refs/installation.md
グリッドのセットアップ、コンテナーのサイズ設定、リアクティビティ、API リファレンス、apiExtension、usePiece、ヘッドレスモード、イベントシステム（cell／row／viewport イベント）、行／列のアニメーション、suppressScrollFlash、viewportInitialWidth／viewportInitialHeight	refs/grid-core.md
TypeScript、GridSpec、レンダラーの型、RowNode の型ガード	refs/typescript.md
列 — id／name／field、サイズ設定、固定表示、グループ、ヘッダーレンダラー、スパン	refs/columns.md
行 — 高さ、マスターディテール（行の詳細）、全幅行、行のスパン、行のドラッグ、行のバンディング、ゼブラストライプ、rowAlternateAttr	refs/rows.md
行の選択 — チェックボックス、SelectAll、連動と独立、状態の制御	refs/row-selection.md
クライアントサイドデータ — useClientDataSource、ソート、フィルター、グループ化、集計、ピボット、行の追加／削除	refs/client-data-source.md
サーバーサイドデータ — useServerDataSource、DataRequest／DataResponse、読み込み状態、更新	refs/server-data-source.md
ツリーデータ — useTreeDataSource、ネストされたオブジェクト、rowRootFn／rowChildrenFn	refs/tree-data-source.md
サーバーデータの無限スクロールまたはページネーション	refs/infinite-paginated-source.md
セルレンダラー、ツールチップ、差分の点滅、仮想化の警告、セル範囲の選択（cellSelectionMode、cellSelections、複数範囲、クリップボード）	refs/cells.md
セルの編集 — 編集モード、バリデーター、編集レンダラー、一括編集	refs/cell-editing.md
フィルタリング — テキスト、数値、日付、セット、クイック検索のフィルターパターン	refs/filtering.md
式 DSL — Evaluator、ExpressionEditor、式フィルター	refs/expressions.md
ピボット — pivotMode、PivotModel、メジャー、総計	refs/pivoting.md
データのエクスポート — CSV、Excel、Parquet、Arrow、クリップボード	refs/export.md
アノテーション — セルのハイライト、セルノート、マーキングアリ、カスタムオーバーレイ、annotations プロパティ	refs/annotations.md
UI コンポーネント — SmartSelect、Menu、Popover、Dialog、PillManager、ColumnManager、TreeView、RowGroupCell、オーバーレイ、ViewportShadows	refs/components.md
テーマ設定 — ビルド済みテーマ、data-ln-* 属性、CSS トークン、Tailwind、CSS Modules、Emotion	refs/theming.md
shadcn/ui — CLI によるインストール、ln-shadcn テーマ、レンダラー／エディター／フィルターとしての shadcn コンポーネントの使用、ダークモード、cn ユーティリティ	refs/shadcn.md
キーボードショートカット、RTL、アクセシビリティ、React Compiler、バンドル、セキュリティ、バージョニング	refs/misc.md

機能の利用可否と参照先の振り分け

次の項目を判断するときは、まずこのファイルを参照してください。

1. ユーザーが Core と PRO のどちらを必要としているか
2. 次にどの参照ファイルを読み込むか

ルール

• リクエストされた機能が PRO 限定の場合は、PRO を使用してください。
• エディションを決定したら、以下に記載された最も具体的な参照ファイルを読み込んでください。
• すべての参照ファイルを読み込まないでください。

PRO 限定機能

ユーザーのリクエスト	エディション	読み込むファイル
サーバー側データ、サーバーでの並べ替え／フィルタリング／グループ化、useServerDataSource	PRO	refs/server-data-source.md
無限スクロール、ページネーション付きサーバー行	PRO	refs/infinite-paginated-source.md
ツリーデータ、ネストされたオブジェクトの行、useTreeDataSource	PRO	refs/tree-data-source.md
ピボットテーブル、ピボットモード、メジャー、総計	PRO	refs/pivoting.md
式、式フィルター、式エディター	PRO	refs/expressions.md
ラベルフィルター、HAVING フィルター	PRO	refs/filtering.md
SmartSelect、PillManager、Menu、Dialog、TreeView、ColumnManager、RowGroupCell、SelectAll	PRO	refs/components.md
注釈、セルノート、マーチングアンツ、カスタムオーバーレイ、annotations プロパティ	PRO	refs/annotations.md

Core 対応機能

ユーザーのリクエスト	エディション	読み込むファイル
インストール、ライセンス、ウォーターマーク、パッケージマネージャー、CDN	Core/PRO	refs/installation.md
グリッドの設定、リアクティビティ、イベント、API 拡張、ヘッドレスモード、アニメーション、スクロールフラッシュ、初期ビューポート	Core/PRO	refs/grid-core.md
TypeScript、GridSpec、行ノード型	Core/PRO	refs/typescript.md
列、サイズ変更、固定、表示／非表示、グループ、ヘッダー	Core/PRO	refs/columns.md
行の高さ、行の固定、行のドラッグ、全幅行、マスターディテール、行のバンディング、ゼブラストライプ	Core/PRO	refs/rows.md
行選択、チェックボックス選択、連動／独立選択	Core/PRO	refs/row-selection.md
クライアントデータ、並べ替え、フィルタリング、グループ化、集計	Core/PRO	refs/client-data-source.md
セルレンダラー、ツールチップ、差分フラッシュ、セル／範囲選択、クリップボード	Core/PRO	refs/cells.md
セル編集、検証、エディター、一括編集	Core/PRO	refs/cell-editing.md
テキスト／数値／日付／セット／ツリーセットフィルター、クイック検索	Core/PRO	refs/filtering.md
CSV、Excel、Parquet、Arrow、クリップボードへのエクスポート	Core/PRO	refs/export.md
テーマ、CSS トークン、Tailwind、CSS Modules、Emotion	Core/PRO	refs/theming.md
shadcn/ui の設定または ln-shadcn	Core/PRO	refs/shadcn.md
キーボード、アクセシビリティ、RTL、React Compiler、バンドル、セキュリティ	Core/PRO	refs/misc.md

曖昧なユーザーリクエスト

ユーザーの発言	意図の解釈	読み込むファイル
“advanced filter”	set/tree-set フィルターと PRO の expression/having フィルターのどちらを指すか確認します	refs/filtering.md、必要に応じて refs/expressions.md
“tree”	TreeView コンポーネントまたはツリーデータを指す可能性があります	refs/components.md または refs/tree-data-source.md
“grouping”	通常は、サーバーサイドデータについて言及されていない限り、クライアント側の行グループ化を指します	refs/client-data-source.md
“pagination”	通常はサーバー側のページ分割された行を指します	refs/infinite-paginated-source.md
“context menu”	組み込みの Menu コンポーネントを指します	refs/components.md
“custom visibility panel”	カスタム Core 実装または PRO の ColumnManager を指します	refs/columns.md、必要に応じて refs/components.md