kintone Flow のデータテーブルビュー ― 一覧画面を高機能テーブルに変える
この記事で解説すること
kintone の標準一覧には、列ヘッダーでのソート切り替えやリアルタイム検索がありません。
kintone Flow の「データテーブルビュー」を使えば、カスタマイズビューとして高機能テーブルを表示できます。ソート・ページネーション・検索フォームがワンセットで動作し、さらに条件グループを使った高度な検索や、関連レコード一覧（REFERENCE_TABLE）のフィールド検索まで設定できます。
また、エンドユーザーがフロント側で設定外の列を追加したり、表示パターンをプリセット保存することも可能です。
この記事では、案件管理アプリを例に、設定手順を一から解説します。
データテーブルビューとは
標準一覧との比較
| 機能 | 標準一覧 | データテーブルビュー |
|---|---|---|
| 1文字・半角英数の部分検索 | 不可 | 可（リアルタイム） |
| 列ヘッダーでのソート | 可 | 可（デフォルトソートの事前設定も可能） |
| 条件での絞り込み | 単純な条件で可能 | 条件グループ（AND/OR）で柔軟に構成 |
| 関連レコードのフィールド検索 | 不可 | 参照先アプリのフィールドで絞り込み |
| 列の追加・非表示・並べ替え | 不可 | 「列の管理」でユーザーが自由に変更 |
| 集計表示（合計・平均・件数等） | 不可 | 「集計対象」トグルでページ内/全体を切替 |
| ページネーション（件数設定） | 20/40/60/100 の固定 | 5〜1,000の範囲で最大5件まで設定 |
| CSVエクスポート | 別途操作が必要 | ボタン1クリック |
設定の流れ
kintone Flow の設定画面だけで完結します。kintone のアプリ設定を開く必要はありません。
- カスタマイズビューの作成（プラグイン設定画面から直接）
- データテーブル設定（列・ソート・検索・集計・表示オプション）
Step 1: データテーブル設定を作成する
kintone Flow の設定画面を開き、カスタマイズビュー設定を追加します。
- 左サイドバーの「カスタマイズビュー設定」にある 「＋ 新しいカスタマイズビュー設定」 をクリックします
- 「カスタマイズビュー機能の選択」ダイアログで 「データテーブル」 を選択します
- 「新しいデータテーブル設定」というタイトルで設定画面が開きます
- 画面左上のタイトルをクリックし、設定名を変更します（例:
案件データテーブル） - 「表示先のカスタマイズビュー」の横にある 「＋ 作成」 ボタンでビューを作成します（ビュー名:
データテーブル）
kintone のアプリ設定 → 一覧でカスタマイズビューを手動追加する手間は不要です。HTMLも不要で、kintone Flow がデータテーブルを自動レンダリングします。
Step 2: 表示列を設定する
テーブルに表示する列を指定します。ここでは 既存ビューからの取り込み と 不要列の削除 を組み合わせます。
既存ビューから取り込む
「基本設定」の「インポート元の一覧」ドロップダウンで標準一覧 「全案件」 を選択し、横の 「取込」 ボタンをクリックします。全案件ビューに設定されている列（会社名・案件名・提案商品・商談フェーズ・確度・初回商談日・受注予定日・売上・主担当）が一括で取り込まれます。
不要な列を削除する
取り込んだ列のうち、今回不要な列（提案商品・初回商談日）をゴミ箱アイコンで削除します。
最終的な7列:
| 表示ラベル | フィールドコード | フィールド種別 |
|---|---|---|
| 会社名 | 会社名 | 1行テキスト |
| 案件名 | 案件名 | 1行テキスト |
| 商談フェーズ | 商談フェーズ | ドロップダウン |
| 確度 | 確度 | ドロップダウン |
| 受注予定日 | 受注予定日 | 日付 |
| 売上 | 売上 | 数値 |
| 主担当 | 主担当 | ユーザー選択 |
このように「取込 → 削除」の流れで、効率的に列を設定できます。なお、設定画面で構成しなかったフィールドも、エンドユーザーがフロント側で追加できます（Step 8で解説）。
Step 3: ソート・ページネーションを設定する
ソート
「ソート設定」セクションでデフォルトのソート列と方向を指定します。今回は「次回アクション日の昇順」にします。
ソート対象フィールドは表示列に含まれていなくても設定可能です。ここでは「次回アクション日」を表示列に含めず、ソートだけ有効にしています。
ユーザーは一覧表示時に列ヘッダーをクリックすることで、ソートを自由に切り替えられます。
ページネーション
1ページあたりの表示件数を設定します。「ページネーション設定」セクションの 「＋ 件数を追加」 ボタンで、ユーザーが選べる件数の選択肢を登録します。
例えば 5・10・50・100・500 の5つを登録すると、エンドユーザーがテーブル下部のドロップダウンで件数を切り替えられます。最小値がデフォルトのページサイズとして使用されます。
- 最大 5件 まで登録可能（範囲: 5〜1,000）
- 値は自動的に 昇順ソート されます（例: 100, 20, 50 と入力しても → 20, 50, 100 に整列）
- 選択肢が1件のみの場合、ドロップダウンは非表示になります
Step 4: 検索フォームを設定する
データテーブルビューの検索フォームは、条件グループによる柔軟な検索設定ができます。
検索フィールドの追加
「検索設定」セクションの 「検索フォームを編集」 ボタンをクリックすると、検索フォームエディタが開きます。
「＋検索フィールドを追加」をクリックすると「検索フィールドを追加」パネルが開きます。フィールド・演算子・表示設定を指定して「追加」ボタンで確定します。「初期値をセットする」トグルはデフォルトでオフになっており、検索フォームにフィールドだけが追加されます。初期値が必要な場合はトグルをオンにして値を入力します。
例えば:
- 「案件名」— 演算子: 部分一致（テキスト検索）
- 「商談フェーズ」— 演算子: いずれかを含む（ドロップダウン選択）
条件グループ（AND / OR）
複数の条件をグループ化して、AND（すべて一致） または OR（いずれか一致） で結合できます。
「＋グループを追加」をクリックすると、グループが追加されます。グループ内の論理演算子はクリックで AND / OR を切り替えられます。
例えば「確度=100% OR 売上≥N」のようなOR条件をグループにまとめ、他の条件とはANDで結合する、といった設定が可能です。
各フィールドの表示設定
「検索フィールドを追加」パネルの下部に「表示設定」セクションがあり、検索フォームでの見た目をフィールドごとにカスタマイズできます:
- ラベル: 検索フォームに表示するラベルを上書き（空欄なら「自動」= フィールド名がそのまま使われる）
- 改行: スイッチをオンにすると、このフィールドの後に改行を挿入
Step 5: 関連レコードのフィールドで検索する
データテーブルビューでは、関連レコード一覧（REFERENCE_TABLE） や サブテーブル（SUBTABLE） のフィールドも検索条件に追加できます。
設定方法
条件エディタのフィールドピッカーで、関連レコード一覧フィールド（例: 「活動履歴」）を選択します。
通常フィールドとは異なるUIが表示されます:
- 評価スコープ: 「テーブル全体」または「同一行内」を選択
・テーブル全体: テーブル内のいずれかの行が条件に一致すればOK
・同一行内: 1つの行がすべての条件を同時に満たす必要がある - テーブル内フィールド条件: 参照先アプリのフィールドで検索条件を設定
「関連レコード内フィールドを追加」をクリックすると、参照先アプリ（活動履歴アプリ）のフィールド一覧から選択できます。
完成した検索フォーム
すべての検索フィールドを追加すると、条件ツリーの全体像は次のようになります:
案件名（部分一致）AND 商談フェーズ（いずれかを含む）AND (確度 OR 売上) AND 活動履歴（対応種別）
Step 6: 集計表示設定
数値列の合計・平均・最小・最大・件数を、テーブルの下部に集計パネルとして表示できます。
設定方法
「集計表示設定」セクションで「＋ 集計列を追加」をクリックし、集計対象のフィールドと集計関数を選択します。今回は「売上」フィールドで合計・平均・最大・最小・件数の5つすべてを有効にします。表示位置は「下部」を選択します。
集計対象の切替（ページ内 / 全体）
集計パネルの左端に「集計対象」カードがあり、トグルボタンで集計スコープを切り替えられます:
- ページ内（デフォルト）: 現在表示しているページのレコードのみで集計
- 全体: フィルタ適用後の全レコードで集計
トグルボタンの下には、ページ内と全体それぞれの件数が表示されます。選択中のトグルはプライマリカラー（水色）でハイライトされます。
ページを遷移すると「ページ内」の件数・集計値は変わりますが、「全体」の件数・集計値は変わりません。検索フォームでフィルタを適用すると、「全体」の値も連動して更新されます。
Step 7: 表示オプションを調整する
テーブルの見た目を調整するオプションがあります。
| オプション | 設定値 | 説明 |
|---|---|---|
| レコード詳細リンク | 有効/無効 | 各行にレコード詳細画面へのリンク |
| レコード編集リンク | 有効/無効 | 各行にレコード編集画面へのリンク |
| CSVダウンロード | 有効/無効 | ツールバーにCSVエクスポートボタン |
Step 8: フロント側の列管理
設定画面で構成した列以外にも、エンドユーザーがフロント側で自由に列を追加・非表示・並べ替えできます。
列の管理ダイアログ
列ヘッダーのメニューから 「列の管理」 を選択すると、ダイアログが開きます。
- 設定済み列: チェック済みの状態で表示
- 設定外フィールド: アプリの全フィールドが一覧表示され、チェックで追加可能
- 関連レコード一覧: 展開して参照先アプリの個別フィールドを列として追加可能
- ドラッグ&ドロップ: 列の表示順を自由に変更
- 検索: フィールド名で列を絞り込み
例: 「次回アクション日」列を追加する
今回の設定では「次回アクション日」を表示列に含めていませんが、ソート列には設定しています。エンドユーザーが「列の管理」で「次回アクション日」を追加すれば、ソートされている列の値を確認できます。
プリセット保存
列の構成・幅・表示順はプリセットとして名前を付けて保存できます。テーブル上部の「一覧プリセット選択」ドロップダウンと「保存」ボタンで、複数の表示パターンを切り替えて使うことが可能です。
動作確認: 検索フォームとCSVエクスポート
設定が完了したら、案件管理アプリの一覧で「データテーブル」ビューを選択して動作を確認します。
検索フォーム
テーブル上部の「詳細検索フォーム」をクリックすると、設定した検索フィールドが展開されます。通常フィールド（案件名・商談フェーズ）、テーブルフィールド（活動履歴 → 対応種別）、条件グループ（確度 OR 売上）がすべて表示されます。
テキスト検索
案件名に「ポータル」と入力して検索すると、全16件から3件にフィルタされます。
複合条件による検索
条件グループも組み合わせると、より精度の高い絞り込みが可能です。例えば案件名「ポータル」AND 売上≥5,000,000 の条件で検索すると、該当する案件だけが表示されます。
CSVエクスポート
CSVダウンロードを有効にすると、テーブル右上にCSVボタンが表示されます。クリックすると、現在の表示列・フィルタ条件のままCSVファイルがダウンロードされます。
また、関連レコード一覧の列を「列の管理」で追加している場合は、「すべて」「メインレコード」「活動履歴」のようにタブが表示され、参照先のデータも含めて閲覧・エクスポートできます。
まとめ
| 設定項目 | 内容 |
|---|---|
| kintone 側の設定 | 不要（プラグイン設定から「＋ 作成」で直接追加） |
| kintone Flow の関数 | RENDER_DATATABLE_VIEW |
| 表示列（設定） | 会社名・案件名・商談フェーズ・確度・受注予定日・売上・主担当（7列） |
| フロント列管理 | 設定外フィールドの追加・プリセット保存が可能 |
| デフォルトソート | 次回アクション日（昇順）※表示列に含めなくてもソート可能 |
| 検索フォーム | 条件グループ（AND/OR）で5フィールド＋1グループ |
| テーブルフィールド検索 | 活動履歴（REFERENCE_TABLE）の内部フィールドで検索 |
| 集計表示設定 | 売上列（合計・平均・最小・最大・件数）、「集計対象」トグルでページ内/全体切替 |
| ページネーション | 5/10/50/100/500件から切替可能 |
| CSVエクスポート | 有効 |
データテーブルビューで一覧操作が快適になったら、次はダッシュボードでデータを可視化してみましょう。棒グラフや円グラフで案件状況を一目で把握できます。
