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

商品テーブルリストブロック

ListProductsTableコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルな商品テーブルインターフェースです。モダンなデザインパターン、ソート可能なカラム、アクションドロップダウン、タブ、公開ステータス管理、ページネーションサポート、ローディング状態、高度な商品管理アプリケーション用の柔軟なカスタマイズオプションを備えた完全な表形式商品リスティング体験を提供します。

🚀 インストール​

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

📖 使用方法​

import {ListProductsTable} from '@nodeblocks/frontend-list-products-table-block';
ライブエディター
function BasicListProductsTable() {
  const [currentTab, setCurrentTab] = useState('published');
  const [isLoading, setIsLoading] = useState(false);

  const productData = [
    {
      id: '1',
      title: 'プレミアムオフィスチェア',
      category: '家具',
      createdAt: '2024-01-15T10:30:00Z',
      updatedAt: '2024-01-16T14:20:00Z',
      numberOfApplicants: '5',
      publication: {
        since: '2024-01-15T00:00:00Z',
        until: '2024-03-15T23:59:59Z',
        status: 'ACTIVE'
      }
    },
    {
      id: '2',
      title: 'ワイヤレスヘッドホン',
      category: '電子機器',
      createdAt: '2024-01-14T09:15:00Z',
      updatedAt: '2024-01-14T09:15:00Z',
      numberOfApplicants: '12',
      publication: {
        since: '2024-01-20T00:00:00Z',
        until: '2024-04-20T23:59:59Z',
        status: 'INACTIVE'
      }
    }
  ];

  const tabs = [
    { label: '公開商品' },
    { label: '下書き商品' },
    { label: 'アーカイブ商品' }
  ];

  const labels = {
    emptyStateMessage: '商品が見つかりません',
    actions: {
      createProduct: '商品を作成'
    },
    headerRow: {
      title: '商品タイトル',
      publicationPeriod: '公開期間',
      createdAt: '作成日',
      updatedAt: '更新日',
      numberOfApplicants: '申込者数'
    },
    rowActions: {
      public: '公開する',
      private: '非公開にする',
      edit: '商品を編集',
      archive: '商品をアーカイブ',
      unarchive: '商品をアーカイブ解除'
    },
    unsetData: {
      since: '未設定',
      until: '未設定',
      date: '公開期間なし'
    }
  };

  const handleProductPublic = (productId, title) => {
    console.log('商品を公開しました:', productId, title);
  };

  const handleProductPrivate = (productId, title) => {
    console.log('商品を非公開にしました:', productId, title);
  };

  const handleProductArchive = (productId, title) => {
    console.log('商品をアーカイブしました:', productId, title);
  };

  const handleProductUnarchive = (productId) => {
    console.log('商品をアーカイブ解除しました:', productId);
  };

  const handleNavigate = (path) => {
    console.log('ナビゲート先:', path);
  };

  const getRowHref = (row) => `/products/${row.id}`;
  const getUpdateRowHref = (row) => `/products/${row.id}/edit`;

  return (
    <ListProductsTable
      listProductsTableTitle="商品管理"
      labels={labels}
      isLoading={isLoading}
      onNavigate={handleNavigate}
      onProductPublic={handleProductPublic}
      onProductPrivate={handleProductPrivate}
      onProductArchive={handleProductArchive}
      onProductUnarchive={handleProductUnarchive}
      data={productData}
      rowHref={getRowHref}
      updateRowHref={getUpdateRowHref}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}
      createHref="#products/new">
      <ListProductsTable.Header style={{display: 'flex', justifyContent: 'space-between'}}>
        <ListProductsTable.Title />
        <ListProductsTable.Action />
      </ListProductsTable.Header>
      <ListProductsTable.Content>
        {isLoading ? (
          <ListProductsTable.Loader />
        ) : (
          <>
            <ListProductsTable.Tabs />
            <ListProductsTable.Table />
          </>
        )}
      </ListProductsTable.Content>
    </ListProductsTable>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
listProductsTableTitleReactNode必須商品テーブルセクションのタイトル
labelsTableLabels必須テーブルヘッダー、アクション、メッセージ用のラベルオブジェクト
isLoadingbooleanundefinedテーブルが現在ローディング中かどうか
onNavigate(to: string) => void必須ナビゲーション用のコールバック関数
onProductPublicProductAction必須商品が公開されたときのコールバック関数
onProductPrivateProductAction必須商品が非公開にされたときのコールバック関数
onProductArchiveProductAction必須商品がアーカイブされたときのコールバック関数
onProductUnarchive(productId: string) => void必須商品がアーカイブ解除されたときのコールバック関数
dataListProductsTableRowData[]必須商品データオブジェクトの配列
rowHref(row: ListProductsTableRowData) => string必須行リンクURLを生成する関数
updateRowHref(row: ListProductsTableRowData) => string必須更新行リンクURLを生成する関数
tabsTab[]必須タブ設定オブジェクトの配列
currentTabstringundefined現在アクティブなタブ識別子
onTabChange(tab: string) => voidundefinedタブが変更されたときのコールバック関数
createHrefstring必須新しい商品作成用のURL
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}コンテキストからページネーション設定
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

サブコンポーネント​

ListProductsTableコンポーネントは、独立して使用できる複数のサブコンポーネントを提供します：

ListProductsTable.Header​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトヘッダーレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

ListProductsTable.Title​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトタイトルレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sizeenum"3XL"タイトルのタイポグラフィサイズ
colorenum"low-emphasis"タイトルのカラーテーマ
weightenum"bold"タイトルの太さ

ListProductsTable.Action​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトアクションレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
createHrefstringコンテキストから作成アクションボタンのURL
labelsTableLabelsコンテキストからアクションテキスト用のラベル
directionenum"row"アクションボタンのフレックス方向
alignItemsenum"stretch"コンテナ内のアイテムの整列
gapSizeenum"S"コンテナ内のアイテム間のギャップ

ListProductsTable.Content​

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトコンテンツレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
isLoadingbooleanコンテキストからコンテキストからのローディング状態

ListProductsTable.Loader​

プロパティ型デフォルト説明
childrenReactNode円形プログレスインジケーターカスタムローディングインジケーターコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
directionenum"row"アクションボタンのフレックス方向
alignItemsenum"stretch"コンテナ内のアイテムの整列
gapSizeenum"S"コンテナ内のアイテム間のギャップ

ListProductsTable.Tabs​

プロパティ型デフォルト説明
tabsTab[]コンテキストからタブ設定オブジェクトの配列
currentTabstringコンテキストから現在アクティブなタブ識別子
onTabChange(tab: string) => voidコンテキストからタブ変更コールバック関数
tabWidthstring"stretch"タブの幅動作
classNamestringundefinedスタイリング用の追加CSSクラス名

ListProductsTable.Table​

プロパティ型デフォルト説明
classNamestringundefinedスタイリング用の追加CSSクラス名
onProductPublic(id: string, title: string) => voidコンテキストから商品が公開されたときのコールバック関数
onProductPrivate(id: string, title: string) => voidコンテキストから商品が非公開にされたときのコールバック関数
onProductArchive(id: string, title: string) => voidコンテキストから商品がアーカイブされたときのコールバック関数
onProductUnarchive(id: string) => voidコンテキストから商品がアーカイブ解除されたときのコールバック関数
dataListProductsTableRowData[]コンテキストからテーブルデータの配列
dropdownMenuItems(cell: ListProductsTableRowData) => Array<DropDownMenuItems>コンテキストからドロップダウンメニューアイテムを生成する関数
dropdownMenuState{openedDropdownMenuId: string}コンテキストから現在開いているドロップダウンメニュー
setDropdownMenuState({openedDropdownMenuId: string}) => voidコンテキストから開いているドロップダウンメニューが変更されたときのコールバック関数
emptyState{icon?: IconType; message: string}コンテキストから空状態の設定
isLoadingbooleanコンテキストからローディング状態
onNavigate(to: string) => voidコンテキストからナビゲーションコールバック関数
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}コンテキストからページネーション設定
rowHref`(cell: ListProductsTableRowData) => stringundefinednull`
updateRowHref`(cell: ListProductsTableRowData) => stringundefinednull`

🔧 TypeScript サポート​

包括的な型定義による完全なTypeScriptサポート:

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

interface Tab {
  isDisabled?: boolean;
  key?: string;
  label: string;
  subtitle?: string;
}

interface ListProductsTableRowData {
  category: string;
  createdAt: string;
  id: string;
  numberOfApplicants: string;
  publication?: {
    since?: string;
    status?: string;
    until?: string;
  };
  title: string;
  updatedAt: string;
}

interface CustomProductTableProps {
  products: ListProductsTableRowData[];
  onPublishProduct: (productId: string) => void;
  onUnpublishProduct: (productId: string) => void;
  onArchiveProduct: (productId: string) => void;
  onRestoreProduct: (productId: string) => void;
  tableTabs: Array<Tab>;
  currentActiveTab: string;
  onTabSwitch: (tab: string) => void;
  isTableLoading: boolean;
}

const ProductTableComponent = ({
  products,
  onPublishProduct,
  onUnpublishProduct,
  onArchiveProduct,
  onRestoreProduct,
  tableTabs,
  currentActiveTab,
  onTabSwitch,
  isTableLoading,
}: CustomProductTableProps) => {
  const tableLabels = {
    emptyStateMessage: '利用可能な商品がありません',
    actions: {createProduct: '新しい商品'},
    headerRow: {
      title: '商品名',
      publicationPeriod: '公開日',
      createdAt: '作成日',
      updatedAt: '最終更新',
      numberOfApplicants: '総申込者数',
    },
    rowActions: {
      public: '公開',
      private: '非公開',
      edit: '編集',
      archive: 'アーカイブ',
      unarchive: '復元',
    },
    unsetData: {
      since: '開始日未設定',
      until: '終了日未設定',
      date: '公開期間が設定されていません',
    },
  };

  return (
    <ListProductsTable
      listProductsTableTitle="商品ダッシュボード"
      labels={tableLabels}
      isLoading={isTableLoading}
      onNavigate={path => console.log('ナビゲート:', path)}
      onProductPublic={onPublishProduct}
      onProductPrivate={onUnpublishProduct}
      onProductArchive={onArchiveProduct}
      onProductUnarchive={onRestoreProduct}
      data={products}
      rowHref={row => `/products/${row.id}`}
      updateRowHref={row => `/products/${row.id}/edit`}
      tabs={tableTabs}
      currentTab={currentActiveTab}
      onTabChange={onTabSwitch}
      createHref="/products/create">
      <ListProductsTable.Header />
      <ListProductsTable.Content />
    </ListProductsTable>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。