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

ListProductsTableブロック

ListProductsTable は、MUI の Table プリミティブ上に構築された包括的な表形式リストブロックです。固定列、タブ、閉じられる検索チップフィルター、行アクション、複合子ブロックまたは関数ベースのブロックオーバーライドによる深いレイアウト構成をサポートします。

インストール​

npm install @nodeblocks/frontend-list-products-table-block

必要なもの​

項目用途
listProductsTableTitleテーブルヘッダーのタイトルまたは React ノード
createHref「商品を作成」アクションボタンの遷移先リンク/ハッシュ
dataListProductsTableRowData に一致する行データの配列
labelsテーブルヘッダー、プレースホルダー、アクションボタン、空状態/フォールバック状態をマッピングする完全なラベルオブジェクト
制御コンポーネント

ListProductsTable はプレゼンテーション用で、フィルター、検索キーワード、タブ選択、ページネーションの内部状態を管理しません。タブの変更はアクティブなタブ状態のみを更新します。行を変更したい場合は、テーブルに渡す data を自分でフィルタリングするか、onTabChange や onPageChange などのコールバックに応じて新しいリストをクエリしてデータを更新してください。

コード例​

ライブエディター
function Example() {
  const [currentTab, setCurrentTab] = React.useState('published');
  const [page, setPage] = React.useState(1);
  const [lastAction, setLastAction] = React.useState('ナビゲーションと行アクションがここに表示されます。');

  const products = [
    {
      id: '1',
      tab: 'draft',
      category: '家具',
      title: 'プレミアムオフィスチェア',
      publication: { status: 'PUBLISHED', since: '2026-01-12', until: '2026-02-12' },
      createdBy: 'マーティ',
      createdAt: '2026-01-10T09:21:00Z',
      updatedBy: 'アリス',
      updatedAt: '2026-01-11T10:30:00Z',
      favoritesCount: 14,
      ordersCount: 22,
    },
    {
      id: '2',
      tab: 'published',
      category: '電子機器',
      title: 'ワイヤレスヘッドホン',
      publication: { status: 'PUBLISHED', since: '2026-01-03', until: '2026-03-03' },
      createdBy: 'ケン',
      createdAt: '2026-01-02T09:21:00Z',
      updatedBy: 'マーティ',
      updatedAt: '2026-01-05T10:30:00Z',
      favoritesCount: 34,
      ordersCount: 13,
    }
  ];

  const visibleProducts = products.filter((product) => product.tab === currentTab);

  const tabs = [
    { key: 'draft', label: '下書き' },
    { key: 'published', label: '公開済み' },
    { key: 'archived', label: 'アーカイブ' },
  ];

  const labels = {
    emptyStateMessage: '商品が見つかりません',
    searchFieldPlaceholder: '商品を検索',
    actions: {
      createProduct: '商品を作成',
      createProductShort: '作成',
      filter: 'フィルター',
    },
    headerRow: {
      productTitle: '商品タイトル',
      publicationPeriod: '公開期間',
      created: '作成',
      updated: '更新',
      favorites: 'お気に入り',
      orders: '注文',
    },
    rowActions: {
      edit: '商品を編集',
      archive: '商品をアーカイブ',
      restore: '商品を復元',
    },
    cellData: {
      sinceUnset: '未設定',
      untilUnset: '未設定',
      dateUnset: '公開期間なし',
    },
  };

  return (
    <div style={{ minHeight: 450 }}>
      <ListProductsTable
        listProductsTableTitle="商品管理"
        createHref="#create"
        labels={labels}
        data={visibleProducts}
        tabs={tabs}
        currentTab={currentTab}
        onTabChange={setCurrentTab}
        onNavigate={(to) => setLastAction(`遷移先: ${to}`)}
        pagination={{
          currentPage: page,
          totalPages: 1,
          onPageChange: setPage,
        }}
      />
      <div style={{marginTop: 12, color: '#475569', fontSize: 13}}>{lastAction}</div>
    </div>
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
dataListProductsTableRowData[]はい-表示する商品データオブジェクトの配列
isLoadingbooleanいいえundefinedtrue のときテーブルレイアウトをローダーモードに切り替える
onNavigate(to: string) => voidいいえundefinedクリックアクション（行クリックや作成ボタンなど）で呼び出されるナビゲーションコールバック
onProductEdit(productId: string, title: string) => voidいいえundefined行メニューの「編集」アクションがクリックされたときに呼び出されるコールバック
onProductArchive(productId: string, title: string) => voidいいえundefined行メニューの「アーカイブ」アクションがクリックされたときに呼び出されるコールバック
onProductUnarchive(productId: string) => voidいいえundefined行メニューの「復元」アクションがクリックされたときに呼び出されるコールバック
resolveRowAction(row: ListProductsTableRowData) => ('edit' | 'archive' | 'restore')[] | undefinedいいえundefined行をアクティブなメニューアクションにマッピングする評価コールバック
shouldShowDropdownMenu(row: ListProductsTableRowData) => booleanいいえundefined行メニューのドロップダウンボタンを表示または非表示にする条件チェック
paginationPaginationPropsいいえundefined状態付きページネーションコントロール: { currentPage, totalPages, onPageChange, className? }

コンテンツプロパティ​

プロパティ型必須デフォルト説明
listProductsTableTitleReactNodeはい-Title サブブロック内にレンダリングされるタイトルテキストまたはノード
createHrefstringはい-「商品を作成」アクションクリック時に onNavigate コールバックへ渡される href
labels{ emptyStateMessage: string; searchFieldPlaceholder: string; actions: { createProduct: string; createProductShort?: string; filter: string }; headerRow: { productTitle: string; publicationPeriod: string; created: string; updated: string; favorites: string; orders: string }; rowActions?: { edit: string; archive: string; restore: string }; cellData: { sinceUnset: string; untilUnset: string; dateUnset: string } }はい-UI テキスト設定を含む直接マップ
rowHref(row: ListProductsTableRowData) => stringいいえundefinedカスタム行リンク生成コールバック
ordersHref(row: ListProductsTableRowData) => stringいいえundefined注文数に適用される直接リンク生成コールバック
tabs{ key: string; label: string; isDisabled?: boolean; subtitle?: string }[]いいえundefined商品フィルタリング用タブ定義
currentTabstringいいえundefined現在アクティブ/選択されているタブのキー
onTabChange(tab: string) => voidいいえundefined別のタブがクリックされたときに呼び出される切り替えコールバック
searchValuestringいいえundefinedアクティブな検索入力値
onSearchFieldChange(value: string) => voidいいえundefined検索入力フィールド内で入力したときに呼び出されるコールバック
onSearchSubmit() => voidいいえundefined検索入力で Enter を押すか検索ボタンをクリックしたときに呼び出される
onFilterButtonClick() => voidいいえundefined検索横のフィルターボタンをクリックしたときに呼び出されるコールバック
searchChipsTitleReactNodeいいえundefined検索チップコンテナの横に表示されるラベル
searchChipsBaseTableSearchChip[]いいえundefinedチップとしてレンダリングされるアクティブフィルター: { key, label }
onSearchChipDelete(chip: BaseTableSearchChip, index: number, event: SyntheticEvent) => voidいいえundefinedアクティブなフィルターチップを閉じたときに呼び出されるコールバック

labels の構造​

labels プロパティ内で次の構造に一致する翻訳と上書きを提供します:

{
  emptyStateMessage: string;
  searchFieldPlaceholder: string;
  actions: {
    createProduct: string;
    createProductShort?: string;
    filter: string;
  };
  headerRow: {
    productTitle: string;
    publicationPeriod: string;
    created: string;
    updated: string;
    favorites: string;
    orders: string;
  };
  rowActions?: {
    edit: string;
    archive: string;
    restore: string;
  };
  cellData: {
    sinceUnset: string;
    untilUnset: string;
    dateUnset: string;
  };
}

レイアウトと構成プロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefined複合子要素またはオーバーライド関数子
classNamestringいいえundefinedルート要素に適用されるカスタムスタイルクラス
sxSxPropsいいえundefined外側の Stack に渡される MUI SX スタイル上書き

ListProductsTable は StackProps（children を除く）をすべて継承します。デフォルトのブロック順は ['header', 'searchChips', 'tabs', 'content', 'pagination']（defaultBlockOrder）です。

デフォルト UI ブロック​

ブロックベース備考
ListProductsTable (ルート)BaseTableテーブルコンテキスト全体をラップするメインの表形式ラッパーレイアウト
ListProductsTable.HeaderBaseTable.Headerタイトルとアクションを保持する Flex コンテナ
ListProductsTable.TitleBaseTable.Header.Titleセクションヘッダーをレンダリング
ListProductsTable.ActionBaseTable.Header.Actions検索入力、フィルター、作成アクションを保持する Flex コンテナ
ListProductsTable.SearchChipsBaseTable.SearchChipsアクティブな検索フィルターを閉じられるチップとしてレンダリング
ListProductsTable.TabsBaseTable.Tabsテーブルフィルタリングに使用するレスポンシブタブ
ListProductsTable.ContentBaseTable.Contentテーブルとローディングスピナー用の外側ブロックラッパー
ListProductsTable.LoaderBaseTable.Content.Loader状態遷移中に表示されるスピナー
ListProductsTable.TableBaseTable.Content.Grid商品メタデータと行アクションを表示するプライマリテーブルグリッド
ListProductsTable.PaginationBaseTable.Paginationフッターのページネーションコントロール

TypeScript​

import { ListProductsTable } from '@nodeblocks/frontend-list-products-table-block';
import type { ListProductsTableRowData } from '@nodeblocks/frontend-list-products-table-block';

const products: ListProductsTableRowData[] = [
  {
    id: 'prod-001',
    category: '家電',
    title: 'スマートオーブン Pro',
    publication: { status: 'PUBLISHED', since: '2026-05-15T00:00:00Z' },
    createdBy: 'システム管理者',
    createdAt: '2026-05-10T09:21:00Z',
    updatedBy: 'システム管理者',
    updatedAt: '2026-05-11T10:30:00Z',
    favoritesCount: 15,
    ordersCount: 3,
  }
];

const tabs = [
  { key: 'published', label: '公開済み商品' }
];

const labels = {
  emptyStateMessage: '項目がありません',
  searchFieldPlaceholder: 'カタログを検索',
  actions: { createProduct: '新規', filter: 'フィルター' },
  headerRow: {
    productTitle: '商品',
    publicationPeriod: '期間',
    created: '作成',
    updated: '更新',
    favorites: 'お気に入り',
    orders: '注文',
  },
  cellData: { sinceUnset: '-', untilUnset: '-', dateUnset: 'スケジュールなし' },
};

<ListProductsTable
  listProductsTableTitle="アプリダッシュボード"
  createHref="#new"
  labels={labels}
  data={products}
  tabs={tabs}
  currentTab="published"
/>;