メインコンテンツまでスキップ

ProTable コンポーネント

ProTable は、Page Designer で使用する汎用的なリモートテーブルコンポーネントです。HTTP API を直接呼び出し、列、検索ツールバー、ページネーション、行アクションをページ上で設定できます。

このガイドでは、次の設定方法を説明します。

  • Custom URL を GET または POST のページング API に接続する
  • Query Context を使用して Input などの現在値を API に渡す
  • Search ボタンで 1 ページ目から新しい検索を開始する
  • ページ移動時に現在の検索条件を維持する
  • レスポンスパス、列、一意な行キー、表示スタイルを設定する
  • Java のサンプルを使用して ProTable 対応のバックエンド API を実装する

このガイドでは Spark 組み込みの商品検索サンプルを使用します。API には 23 件の商品データがあり、keyword を使って商品コードと商品名を大文字小文字を区別せずに部分一致検索できます。

1. ProTable を使用する場面​

1.1 推奨ユースケース​

次の場面では ProTable が適しています。

  • ページから独自のバックエンド API を直接呼び出す
  • 単一の Business Object ではなく、外部サービスや集約サービスのデータを表示する
  • API 側にページネーション、フィルター、ソート、権限のロジックがある
  • ボタンで API を呼び出し、戻り値の配列を setTableData でテーブルに設定する

1.2 ProTable、DataList、TaskList の違い​

コンポーネント主なデータ適した用途
ProTableCustom URL または Model Data Source汎用 HTTP API、集約データ、独自のページネーション契約
DataListBusiness ObjectDQL、モデルフィールド、Object Action、モデルデータ権限
TaskListSpark Tasksタスクフィルター、ステータス、処理、タスクコンテキスト

ProTable は Model Data Source にも対応しており、モデルのバインド方法は DataList と同様です。Business Object、DQL、モデルフィルターについては、DataList コンポーネントガイドを参照してください。このガイドでは ProTable の Custom URL を中心に説明します。

2. このガイドのサンプル​

サンプル API：

POST https://spark.hiforce.ai/spark/api/sample/protable/products

サンプルページの設定：

  • データソース：Custom URL
  • リクエストメソッド：POST
  • デフォルトページサイズ：10 件
  • Left Toolbar：Key Word Input と Search Button
  • Query Context：Input の値を keyword リクエストフィールドにマッピング
  • Search の操作：現在の ProTable の reloadTable を呼び出す
  • 列：code、name、category、price、stock

Spark にサインインし、このアプリケーションへのアクセス権がある場合は、サンプルの Runtime ページで動作を確認できます。

3. Custom URL のページネーション契約​

3.1 POST リクエスト​

ProTable が最初のページを読み込むと、ページネーションフィールドと Query Context のパラメーターを JSON ボディにまとめます。

{
  "current": 1,
  "pageSize": 10,
  "keyword": "Graphite"
}
フィールド型説明
currentnumber現在のページ番号。1 から開始
pageSizenumber1 ページあたりの件数
keywordstringこのサンプルで Query Context から追加する検索パラメーター

current と pageSize は ProTable が自動的に管理します。Query Context に重複して追加しないでください。

3.2 GET リクエスト​

GET を選択すると、同じパラメーターが URL のクエリ文字列になります。

/spark/api/sample/protable/products?current=1&pageSize=10&keyword=Graphite

GET では undefined、null、空文字列が省略されます。配列とオブジェクトは JSON 文字列に変換されるため、バックエンド側で JSON として解析してください。

3.3 デフォルトのレスポンス構造​

サンプルは Spark 標準の ApiResult を返し、ページングデータは data に格納されます。

{
  "success": true,
  "code": 200,
  "message": "製品データを読み込みました。",
  "data": {
    "total": 1,
    "current": 1,
    "pageSize": 10,
    "requestContext": {
      "environment": "DEV",
      "renderMode": "RUNTIME"
    },
    "records": [
      {
        "id": 4,
        "code": "DSP-2002",
        "name": "Graphite Monitor 32",
        "category": "DISPLAY",
        "status": "ACTIVE",
        "price": 699.00,
        "stock": 21,
        "updatedAt": "2026-07-25T16:40:00Z"
      }
    ]
  }
}

データソースのパスは次のように設定します。

Rows Path: data.records
Total Path: data.total
Current Page Path: data.current
Page Size Path: data.pageSize

ネストしたプロパティにはドットパスを使用します。レコード配列が result.items にある場合、Rows Path には result.items を設定します。

ページング API は現在のページ配列の長さではなく、フィルター後の総件数を返す必要があります。総件数がないと ProTable は正しいページ数を計算できません。

3.4 ページリクエストコンテキスト Header​

ProTable が Custom URL から実際の HTTP リクエストを送信するとき、2 つの標準 Header が自動的に追加されます。バックエンドでは、テストデータの選択、デザイナーからのアクセス制限、リクエスト元の記録に利用できます。

Header値説明
X-Spark-Page-EnvironmentDEV、TEST、PROD現在のページ環境。Page Designer 内のデータプレビューでは DEV を使用
X-Spark-Page-Render-ModeDESIGN_PREVIEW、RUNTIMEPage Designer、デザイナーから開く Preview、実レコードのプレビューでは DESIGN_PREVIEW、通常の実行ページでは RUNTIME を使用

環境とレンダリングモードは独立した 2 つの軸です。たとえば、開発環境の実行ページは DEV + RUNTIME を送信し、Page Designer 内で実レコードを読み込む場合は DEV + DESIGN_PREVIEW を送信します。これらは安定した列挙値です。バックエンドでページ URL や Referer から利用場面を推測しないでください。

これは ProTable や Custom URL に限らず、Page Designer と Page Runtime から送信されるすべてのバックエンドリクエストに共通する契約です。Model Data Source、Data Form、Task コンポーネント、アップロード、行アクション、Send Request も同じ Header を使用します。GET と POST の動作は同じです。Custom URL が別オリジンのサービスを参照する場合は、CORS の Access-Control-Allow-Headers で両方の Header を許可してください。

4. ProTable の追加と設定​

4.1 コンポーネントを追加する​

  1. 対象ページを Page Designer で開きます。
  2. コンポーネントパレットの Data を展開します。
  3. ProTable を配置可能なコンテナへドラッグします。
  4. ProTable に productTable など、安定した識別しやすい名前を付けます。

安定した名前を使用すると、Button の Component API で正しい対象を選択しやすくなります。

4.2 Custom URL を設定する​

ProTable の Data Source で Custom URL を選択し、次の値を入力します。

プロパティ値
URLhttps://spark.hiforce.ai/spark/api/sample/protable/products
Request MethodPOST
Rows Pathdata.records
Total Pathdata.total
Current Page Pathdata.current
Page Size Pathdata.pageSize

URL は次の 3 形式を使用できます。

https://api.example.com/products
connection://erp/products
/products                 # Connection Key も選択
  • 同一オリジンの Spark API では、完全な URL またはサイト相対パスを使用できます。
  • 外部サービスでは、アプリケーション設定で External Connection を作成し、その Connection Key を使用します。
  • シークレット、トークン、パスワードは接続設定に保存し、URL や Query Context には記述しないでください。
  • API には引き続きログイン状態、データ権限、バックエンド認可が適用されます。保護された API をブラウザーで直接開くと 401 が返る場合があります。

Response Fields を設定する​

Model Data Source は Business Object のフィールドメタデータを直接読み取れます。Custom URL では、Data Source 内で Response Fields を管理します。各項目には次の値があります。

プロパティ説明
Field Path1 レコードを基準としたフィールドパス。例：name、owner.name
LabelColumns などのフィールド選択肢に表示する名前
Data TypeTEXT、NUMBER、BOOLEAN、DATE、DATETIME、URL、OBJECT、ARRAY

プラスボタンから手動で追加するか、Test & Import をクリックして最大 20 件のレコードを取得し、検出したフィールドをマージできます。インポートには次のルールがあります。

  • 明示的にクリックした場合だけバックエンドへリクエストします。ダイアログを開くだけではリクエストしません。
  • 現在の URL、Method、Query Context、Rows Path を使用します。
  • ネストしたオブジェクトはドットパスに変換し、配列は配列フィールド自体だけを登録します。
  • 既存の Label、Data Type、順序は維持し、新しいパスだけを追加します。
  • サンプル値は保存せず、空レスポンスや失敗によって既存フィールドを上書きしません。

Test & Import は DEV + DESIGN_PREVIEW のページリクエストコンテキストを使用します。Data Source の変更は Save をクリックした場合だけページ設定に反映され、Cancel では現在の下書きが破棄されます。

4.3 Columns を設定する​

Columns に次の列を順番に追加します。

LabelData Field
Codecode
Namename
Categorycategory
Priceprice
Stockstock

Data Field はドットパスに対応します。レコードに owner.name がある場合は、次のように入力します。

owner.name

列幅は内容に合わせて設定します。コード列は狭くできますが、名前列には広い領域が必要です。長いテキストでテーブル全体が広がらないようにしてください。

4.4 ページネーションと行キーを設定する​

推奨設定：

Pagination / Page Size: 10
Row Unique Key: id

Row Unique Key のフィールドは安定しており、一意でなければなりません。重複や変更の可能性がある名前、ステータスなどは使用しないでください。

Runtime では 10、20、50 件を切り替えられます。ページ番号またはページサイズを変更すると、現在の Query Context 条件を維持したまま API を再度呼び出します。

5. Left Toolbar に検索コントロールを追加する​

ProTable を選択し、Left Toolbar に Input を追加します。

Label: Key Word
Name: productKeywordInput
Allow Clear: true

サンプルページの Input 内部 ID は field_bfd1e2b2 です。この ID はコピーせず、FX エディターで自分が追加した Input を選択してください。

Allow Clear を有効にすると、テキストが入力されている間だけクリアアイコンが表示されます。クリア操作は値を空にするだけなので、キーワードなしで再検索するには Search をクリックします。

一般的な配置：

  • Left Toolbar：Input、Date Picker、Select、Radio、Search
  • Toolbar：Create、Import、Export などの業務アクション

検索条件と Search を同じ水平行に配置する場合は、このサンプルのように Search も Left Toolbar に追加します。

6. Query Context で keyword をバインドする​

Query Context は Runtime の値を HTTP パラメーターにマッピングします。このサンプルでは次の流れを作ります。

Input の現在値 → productKeyword 変数 → keyword リクエストフィールド

6.1 変数を追加する​

  1. ProTable の Data Source を編集します。
  2. Query Context の FX をクリックします。
  3. Add Variable をクリックします。
  4. Variable Name に productKeyword と入力します。
  5. Source で Component Value を選択します。
  6. Component で追加した Key Word Input を選択します。

6.2 リクエストパラメーターを追加する​

Query Context のパラメーター領域に追加します。

Parameter: keyword
Value: [[productKeyword]]

Runtime はリクエストの直前に Input の現在値を再取得します。未入力の場合は keyword が空になり、サンプルのバックエンドはキーワード条件を無視して全件を返します。

6.3 主な変数ソース​

Source使用場面
Component ValueInput、Select、Radio、Date Picker、Uploader などの現在値
URL Parameterブラウザー URL のクエリパラメーター
Page Contextページコンテキスト、または先行する操作で設定した値
Current Row行アクションにおける現在レコードのフィールド
Static Value固定の文字列、数値、真偽値

Target Value では、1 つの変数または複数の値を組み合わせられます。

[[productKeyword]]
prefix-[[productKeyword]]

Target Value が [[variableName]] のみの場合、Runtime は可能な限り元の型を維持します。配列、オブジェクト、数値、真偽値を事前に文字列へ変換する必要はありません。

7. Search ボタンを設定する​

Left Toolbar に Button を追加します。

Text: Search
Button Type: Primary

クリック操作を設定します。

  1. Search Button を選択して Interaction editor を開きます。
  2. Component API アクションを追加します。
  3. Target Component に productTable など現在の ProTable を選択します。
  4. Function に reloadTable を選択します。
  5. 操作を保存します。

reloadTable は新しい検索を開始します。

  1. 現在ページを 1 に戻します。
  2. Query Context のコンポーネント値を再取得します。
  3. 新しい current、pageSize、keyword で API を呼び出します。

この動作により、よくあるページ問題を防げます。2 ページ目で検索結果が 1 件だけのキーワードを入力し、current: 2 のまま送信すると API は正しく空配列を返します。Search が reloadTable を呼び出すと current: 1 になり、結果を表示できます。

通常のページ移動は新しい検索ではありません。ProTable は current だけを変更し、現在の keyword を維持します。

Search をクリック：1 ページ目に戻る + 最新の検索条件を使用
ページをクリック：ページ番号を変更 + 現在の検索条件を維持

8. Java バックエンドのサンプル​

Spark リポジトリの完全な実装：

spark-sample/src/main/java/hiforce/spark/sample/protable/

spark-console は spark-sample を取り込むため、この API は Spark Console と一緒に公開されます。以下は Custom URL に必要な主要コードです。

8.1 リクエスト DTO​

package hiforce.spark.sample.protable.model;

import lombok.Getter;
import lombok.Setter;

import java.math.BigDecimal;

@Getter
@Setter
public class ProTableProductQueryRequest {

    private Integer current = 1;
    private Integer pageSize = 10;
    private String keyword;
    private String category;
    private String status;
    private BigDecimal minPrice;
    private BigDecimal maxPrice;
}

keyword のほか、カテゴリ、ステータス、価格範囲のフィールドを用意しています。リポジトリの完全な実装には汎用 conditions と sortBy も含まれます。

8.2 行 DTO とページ結果​

package hiforce.spark.sample.protable.model;

import lombok.AllArgsConstructor;
import lombok.Getter;

import java.math.BigDecimal;
import java.time.Instant;
import java.util.List;

@Getter
@AllArgsConstructor
public class ProTableProductDTO {
    private final Long id;
    private final String code;
    private final String name;
    private final String category;
    private final String status;
    private final BigDecimal price;
    private final Integer stock;
    private final Instant updatedAt;
}

@Getter
@AllArgsConstructor
public class ProTablePageResult<T> {
    private final long total;
    private final int current;
    private final int pageSize;
    private final List<T> records;
}

実際のプロジェクトでは、2 つの public クラスをそれぞれ同名のファイルに置いてください。ここでは契約をまとめて示すため、1 つのコードブロックに記載しています。

8.3 Controller​

package hiforce.spark.sample.protable.web;

import hiforce.spark.base.model.result.ApiResult;
import hiforce.spark.base.web.SparkApiResultHelper;
import hiforce.spark.sample.protable.model.ProTablePageResult;
import hiforce.spark.sample.protable.model.ProTableProductDTO;
import hiforce.spark.sample.protable.model.ProTableProductQueryRequest;
import hiforce.spark.sample.protable.service.ProTableProductService;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Locale;

@RestController
@RequestMapping("/spark/api/sample/protable/products")
public class ProTableProductController {

    private final ProTableProductService productService;

    public ProTableProductController(ProTableProductService productService) {
        this.productService = productService;
    }

    @PostMapping
    public ApiResult<ProTablePageResult<ProTableProductDTO>> query(
            @RequestBody(required = false) ProTableProductQueryRequest request,
            @RequestHeader(value = "Accept-Language", required = false) String language) {
        Locale locale = SparkApiResultHelper.resolveLocale(language);
        return SparkApiResultHelper.success(
                locale,
                productService.query(request),
                "SPARK-SAMPLE-PROTABLE-0001");
    }
}

Controller は DTO とページ結果を ApiResult で返します。利用者向けの成功メッセージは Controller に直接書かず、Lattice Message Code SPARK-SAMPLE-PROTABLE-0001 でローカライズします。

8.4 部分一致検索とページネーション​

package hiforce.spark.sample.protable.service;

import hiforce.spark.sample.protable.model.ProTablePageResult;
import hiforce.spark.sample.protable.model.ProTableProductDTO;
import hiforce.spark.sample.protable.model.ProTableProductQueryRequest;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;

import java.math.BigDecimal;
import java.time.Instant;
import java.util.ArrayList;
import java.util.Comparator;
import java.util.List;

@Service
public class ProTableProductService {

    private static final int MAX_PAGE_SIZE = 100;

    private static final List<ProTableProductDTO> PRODUCTS = List.of(
            product(1, "SPK-1001", "SparkBook Air", "COMPUTING", "ACTIVE", "999.00", 32,
                    "2026-07-27T14:20:00Z"),
            product(2, "SPK-1002", "SparkBook Pro", "COMPUTING", "ACTIVE", "1599.00", 18,
                    "2026-07-28T09:10:00Z"),
            product(3, "DSP-2001", "Aurora Monitor 27", "DISPLAY", "ACTIVE", "499.00", 45,
                    "2026-07-26T08:30:00Z"),
            product(4, "DSP-2002", "Graphite Monitor 32", "DISPLAY", "ACTIVE", "699.00", 21,
                    "2026-07-25T16:40:00Z"),
            product(5, "ACC-3001", "Pulse Mechanical Keyboard", "ACCESSORY", "ACTIVE", "129.00", 86,
                    "2026-07-24T11:00:00Z"),
            product(6, "ACC-3002", "Flow Wireless Mouse", "ACCESSORY", "ACTIVE", "79.00", 120,
                    "2026-07-23T13:15:00Z"),
            product(7, "ACC-3003", "Runtime Dock", "ACCESSORY", "ACTIVE", "219.00", 38,
                    "2026-07-22T09:45:00Z"),
            product(8, "STO-4001", "Core SSD 1TB", "STORAGE", "ACTIVE", "149.00", 64,
                    "2026-07-21T15:20:00Z"),
            product(9, "STO-4002", "Core SSD 2TB", "STORAGE", "ACTIVE", "269.00", 41,
                    "2026-07-20T10:05:00Z"),
            product(10, "NET-5001", "Lattice Router", "NETWORK", "ACTIVE", "189.00", 27,
                    "2026-07-19T17:25:00Z"),
            product(11, "NET-5002", "Mesh Access Point", "NETWORK", "ACTIVE", "139.00", 54,
                    "2026-07-18T12:35:00Z"),
            product(12, "CMP-6001", "Build Station", "COMPUTING", "DRAFT", "2399.00", 7,
                    "2026-07-17T08:50:00Z"),
            product(13, "DSP-2003", "Silk Portable Display", "DISPLAY", "ACTIVE", "329.00", 33,
                    "2026-07-16T14:10:00Z"),
            product(14, "ACC-3004", "Spark AI Headset", "ACCESSORY", "ACTIVE", "199.00", 49,
                    "2026-07-15T10:45:00Z"),
            product(15, "ACC-3005", "Console Camera", "ACCESSORY", "ACTIVE", "159.00", 72,
                    "2026-07-14T09:35:00Z"),
            product(16, "STO-4003", "Archive Drive 8TB", "STORAGE", "ACTIVE", "289.00", 25,
                    "2026-07-13T18:20:00Z"),
            product(17, "NET-5003", "Secure Gateway", "NETWORK", "DRAFT", "799.00", 5,
                    "2026-07-12T07:30:00Z"),
            product(18, "CMP-6002", "Runtime Server", "COMPUTING", "ACTIVE", "3499.00", 4,
                    "2026-07-11T16:00:00Z"),
            product(19, "ACC-3006", "USB-C Travel Hub", "ACCESSORY", "DISCONTINUED", "59.00", 0,
                    "2026-07-10T11:40:00Z"),
            product(20, "DSP-2004", "Aurora Display Mini", "DISPLAY", "DRAFT", "279.00", 12,
                    "2026-07-09T13:05:00Z"),
            product(21, "PRN-7001", "Flow Label Printer", "OFFICE", "ACTIVE", "249.00", 28,
                    "2026-07-08T08:25:00Z"),
            product(22, "AUD-8001", "Aurora Conference Speaker", "AUDIO", "ACTIVE", "349.00", 16,
                    "2026-07-07T15:35:00Z"),
            product(23, "PWR-9001", "Core Power Station", "POWER", "DRAFT", "899.00", 9,
                    "2026-07-06T10:15:00Z"));

    public ProTablePageResult<ProTableProductDTO> query(ProTableProductQueryRequest request) {
        ProTableProductQueryRequest query = request == null
                ? new ProTableProductQueryRequest()
                : request;

        int current = Math.max(query.getCurrent() == null ? 1 : query.getCurrent(), 1);
        int pageSize = Math.min(
                Math.max(query.getPageSize() == null ? 10 : query.getPageSize(), 1),
                MAX_PAGE_SIZE);
        String keyword = StringUtils.trimToNull(query.getKeyword());

        List<ProTableProductDTO> filtered = PRODUCTS.stream()
                .filter(product -> keyword == null
                        || StringUtils.containsIgnoreCase(product.getCode(), keyword)
                        || StringUtils.containsIgnoreCase(product.getName(), keyword))
                .sorted(Comparator.comparing(ProTableProductDTO::getCode))
                .toList();

        long requestedOffset = (long) (current - 1) * pageSize;
        int fromIndex = (int) Math.min(requestedOffset, filtered.size());
        int toIndex = Math.min(fromIndex + pageSize, filtered.size());

        return new ProTablePageResult<>(
                filtered.size(),
                current,
                pageSize,
                new ArrayList<>(filtered.subList(fromIndex, toIndex)));
    }

    private static ProTableProductDTO product(long id, String code, String name,
                                               String category, String status, String price,
                                               int stock, String updatedAt) {
        return new ProTableProductDTO(
                id, code, name, category, status,
                new BigDecimal(price), stock, Instant.parse(updatedAt));
    }
}

重要な動作は次の 3 点です。

  1. StringUtils.trimToNull は空白のキーワードを null に変換し、キーワードフィルターを無効にします。
  2. containsIgnoreCase は商品コードと商品名を検索するため、Graphite で Graphite Monitor 32 が一致します。
  3. フィルター後に total を計算し、current と pageSize で現在ページを切り出します。

keyword の流れを明確にするため、上の Service では完全な実装にあるカテゴリ、ステータス、価格、汎用条件、複数フィールドソートを省略しています。23 件の商品とページネーションの動作は実際のサンプルと同じです。

8.5 GET API の追加​

GET にも対応する場合は、クエリパラメーターから同じ Request DTO を作成し、POST の検索処理を再利用します。

@GetMapping
public ApiResult<ProTablePageResult<ProTableProductDTO>> queryByGet(
        @RequestParam(defaultValue = "1") Integer current,
        @RequestParam(defaultValue = "10") Integer pageSize,
        @RequestParam(required = false) String keyword,
        @RequestHeader(value = "Accept-Language", required = false) String language) {
    ProTableProductQueryRequest request = new ProTableProductQueryRequest();
    request.setCurrent(current);
    request.setPageSize(pageSize);
    request.setKeyword(keyword);
    return query(request, language);
}

実際の API は次の任意パラメーターにも対応しています。

パラメーター説明
category大文字小文字を区別しないカテゴリの完全一致
status大文字小文字を区別しないステータスの完全一致
minPrice / maxPrice価格範囲
conditions汎用条件の配列
sortByフィールド名から asc または desc への順序付き Map

GET では conditions と sortBy が URL エンコードされた JSON 文字列になります。POST では JSON 配列またはオブジェクトを直接送信します。

9. 詳細設定​

9.1 複数の検索条件​

Left Toolbar に Category Select、Status Radio、Price Input などを追加し、Query Context で各値をマッピングできます。

{
  "keyword": "[[productKeyword]]",
  "category": "[[productCategory]]",
  "status": "[[productStatus]]",
  "minPrice": "[[minimumPrice]]",
  "maxPrice": "[[maximumPrice]]"
}

空値を「フィルターしない」と解釈するかはバックエンドが決定します。任意文字列には trimToNull、任意数値には特殊文字列ではなく null を使用してください。

9.2 Row Actions​

Row Actions に View、Edit、Delete などを追加できます。行アクションは現在レコードのコンテキストを持つため、FX から id や code などを取得できます。

更新成功後は現在の ProTable の reloadTable を呼び出し、サーバーから最新データを取得します。危険な操作には確認を追加し、権限と業務ルールはバックエンドでも検証してください。

9.3 setTableData​

ボタンが別の API を呼び出して完全なレコード配列を取得済みの場合は、次の関数を使用できます。

setTableData(data)

指定した配列でローカルテーブルデータを置き換え、ページを 1 に戻します。データは永続化されず、外側のレスポンスから data.records を自動的に抽出することもありません。引数にはレコード配列自体を渡してください。

通常のリモートページネーションでは reloadTable を使用し、条件、総件数、ページング処理をバックエンドで一元管理します。

9.4 表示プロパティ​

プロパティ説明
Enable Row Number先頭列にページをまたいだ連続行番号を表示
Table Sizelarge、middle、small の密度を設定
Show Header列ヘッダー行の表示を切り替え
Borderedテーブル境界線の表示を切り替え
Row Unique Key各行の一意な識別フィールド。デフォルトは id

10. サンプルを検証する​

ページを保存し、Preview と Runtime で次を確認します。

  1. キーワードを空にすると、初回は 1 ページ目が表示され、総件数が 23 になります。
  2. 2 ページ目に移動すると、次のデータが表示されます。
  3. 2 ページ目で Graphite と入力し、Search をクリックします。
  4. リクエストは current: 1 を使用し、DSP-2002 / Graphite Monitor 32 のみが返ります。
  5. Input をクリアして Search をクリックすると、1 ページ目から 23 件すべてが再表示されます。
  6. 複数ページに一致するキーワードを検索してからページを移動し、後続リクエストにもキーワードが含まれることを確認します。

ブラウザーの開発者ツールで POST Request Payload を確認します。

{
  "current": 1,
  "pageSize": 10,
  "keyword": "Graphite"
}

レスポンスの data.total、data.current、data.pageSize、data.records がリクエストと整合していることを確認します。

11. トラブルシューティング​

11.1 2 ページ目から Graphite を検索すると見つからない​

Search が ProTable の reloadTable ではなく通常のリクエストになっている可能性があります。

Interaction: Component API
Target Component: 現在の ProTable
Function: reloadTable

reloadTable はページを 1 に戻します。通常のページ移動では現在の条件が維持されます。

11.2 キーワードを入力してもデータが変わらない​

次の順で確認します。

  1. Query Context に keyword パラメーターがある。
  2. productKeyword が正しい Input の Component Value を参照している。
  3. Target Value が [[productKeyword]] になっている。
  4. バックエンド DTO のフィールド名も keyword になっている。
  5. Search が現在の ProTable の reloadTable を呼び出している。

11.3 Input にクリアアイコンが表示されない​

Allow Clear が有効で、Runtime の Input にテキストがあることを確認します。空の Input にはアイコンが表示されません。クリア後に Search をクリックしてください。

11.4 API にデータがあるのにテーブルが空になる​

Rows Path を確認します。このサンプルのレコード配列は次の場所にあります。

data.records

誤ったカスタムパスを設定した場合、ProTable は別のパスを推測せず、空配列を表示します。

11.5 総件数またはページ番号が正しくない​

次を確認します。

  • Total Path がフィルター後の総件数を指している
  • Current Page Path がサーバーの現在ページを指している
  • Page Size Path がサーバーで実際に使用した件数を指している
  • バックエンドのページ番号が 1 から始まる

11.6 API が 401、403、CORS エラーを返す​

  • 401：セッションが無効、または API が認証を必要としています。
  • 403：現在の利用者に API またはデータの権限がありません。
  • CORS：外部サービスが現在の Spark オリジンを許可していません。

外部システムには External Connection または管理されたバックエンドプロキシを使用してください。ページ設定に長期認証情報を公開しないでください。

11.7 GET の conditions を解析できない​

GET は配列とオブジェクトを JSON 文字列にします。URL デコード後に JSON パーサーで解析し、複雑なオブジェクトをカンマで分割しないでください。複雑な条件には POST を推奨します。

11.8 Custom URL の Data Field に候補が表示されない​

Data Source を開き、Response Fields を設定して保存してください。手動で追加するか、Test & Import を使用できます。Response Fields はデータソース契約の一部です。テーブルのプレビューデータを 1 件読み込んでも、フィールド一覧が一時的に変わることはありません。

12. 設定チェックリスト​

  • ProTable に安定した一意のコンポーネント名がある
  • Data Source が Custom URL になっている
  • Response Fields を手動で設定、または Test & Import でインポートして保存した
  • URL、Request Method、認証が正しい
  • Rows、Total、Current Page、Page Size のパスがレスポンスと一致している
  • Columns の Data Field がレコードのフィールドと一致している
  • Row Unique Key が安定して一意である
  • Query Context のパラメーター名がバックエンド DTO と一致している
  • FX 変数が正しい Component Value を参照している
  • Search が現在の ProTable の reloadTable を呼び出している
  • 新しい検索で 1 ページ目に戻る
  • 通常のページ移動で現在の条件が維持される
  • 空、一致あり、一致なしのキーワードを検証した
  • Preview と Runtime の両方でツールバー、テーブル、ページネーションを確認した

以上の設定により、ProTable は独自 HTTP API の安定した一覧画面として、検索コントロール、サーバー側ページネーション、ページ操作を正しく連携できます。

に最終更新