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

注文テーブルリストブロック

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

🚀 インストール​

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

📖 使用方法​

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

  const orderData = [
    {
      id: '1',
      createdAt: '2024-01-15T10:30:00Z',
      orderName: 'ORD-001',
      title: 'オフィス用品注文',
      status: 'pending'
    },
    {
      id: '2',
      createdAt: '2024-01-14T14:20:00Z',
      orderName: 'ORD-002',
      title: 'ソフトウェアライセンス',
      status: 'accepted'
    }
  ];

  const tabs = [
    { label: '保留中の注文' },
    { label: '承認済み注文' },
    { label: 'キャンセル済み注文' }
  ];

  const labels = {
    emptyStateMessage: '注文が見つかりません',
    actions: {
      headerAction: '注文作成'
    },
    headerRow: {
      createdAt: '作成日',
      title: '注文タイトル',
      orderName: '注文ID'
    },
    rowActions: {
      accepted: '注文承認',
      canceled: '注文キャンセル',
      processing: '処理中にマーク'
    }
  };

  const handleOrderAccepted = (orderId, title) => {
    console.log('注文が承認されました:', orderId, title);
  };

  const handleOrderRejected = (orderId, title) => {
    console.log('注文が拒否されました:', orderId, title);
  };

  const handleOrderProcessing = (orderId, title) => {
    console.log('注文処理中:', orderId, title);
  };

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

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

  return (
    <ListOrderTable
      listOrderTableTitle="注文管理"
      labels={labels}
      isLoading={isLoading}
      onNavigate={handleNavigate}
      onOrderAccepted={handleOrderAccepted}
      onOrderRejected={handleOrderRejected}
      onOrderProcessing={handleOrderProcessing}
      data={orderData}
      rowHref={getRowHref}
      updateRowHref={getUpdateRowHref}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}
      createHref="#new"
      style={{
        backgroundColor: 'white',
        padding: '8px',
      }}>
      <ListOrderTable.Header style={{display: 'flex', justifyContent: 'space-between'}}>
        <ListOrderTable.Title />
        <ListOrderTable.Action />
      </ListOrderTable.Header>
      <ListOrderTable.Content>
        {isLoading ? (
          <ListOrderTable.Loader />
        ) : (
          <>
            <ListOrderTable.Tabs />
            <ListOrderTable.Table />
          </>
        )}
      </ListOrderTable.Content>
    </ListOrderTable>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
listOrderTableTitleReactNode必須注文テーブルセクションのタイトル
labelsTableLabels必須テーブルヘッダー、アクション、メッセージのラベルオブジェクト
isLoadingbooleanundefinedテーブルが現在読み込み中かどうか
onNavigate(to: string) => void必須ナビゲーション用のコールバック関数
onOrderAccepted(id: string) => void必須注文が承認されたときのコールバック関数
onOrderRejected(id: string) => void必須注文が拒否されたときのコールバック関数
onOrderProcessing(id: string) => void必須注文が処理中としてマークされたときのコールバック関数
dataListOrderTableRowData[]必須注文データオブジェクトの配列
rowHref(row: ListOrderTableRowData) => string必須行リンクURLを生成する関数
updateRowHref(row: ListOrderTableRowData) => string必須更新行リンクURLを生成する関数
tabsTab[]必須タブ設定オブジェクトの配列
currentTabstringundefined現在アクティブなタブ識別子
onTabChange(tab: string) => voidundefinedタブが変更されたときのコールバック関数
createHrefstring必須新規注文作成用のURL
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}undefinedページネーション設定オブジェクト
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドまたはカスタムコンポーネントレンダリングするための関数

注意: メインコンポーネントはすべてのHTML div 要素プロパティを継承します。

サブコンポーネント​

ListOrderTableコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ListOrderTable.Title​

プロパティ型デフォルト説明
childrenReactNodeコンテキストからタイトルコンテンツ - コンテキストのlistOrderTableTitleをオーバーライド
sizeenum"2XL"タイトルのタイポグラフィサイズ
typeenum"heading"タイポグラフィタイプ
colorenum"low-emphasis"タイトルのカラーテーマ
weightenum"bold"タイトルの太さ
classNamestringundefinedスタイリング用の追加CSSクラス名

ListOrderTable.Action​

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

ListOrderTable.Header​

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

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ListOrderTable.Loader​

プロパティ型デフォルト説明
childrenReactNodeCircularProgressIndicatorカスタムローディングインジケーターコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ListOrderTable.Content​

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

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ListOrderTable.Tabs​

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

ListOrderTable.Table​

プロパティ型デフォルト説明
onOrderAccepted(id: string) => voidコンテキストから注文が承認されたときのコールバック関数
onOrderRejected(id: string) => voidコンテキストから注文が拒否されたときのコールバック関数
onOrderProcessing(id: string) => voidコンテキストから注文が処理中としてマークされたときのコールバック関数
classNamestringundefinedスタイリング用の追加CSSクラス名
dataListOrderTableRowData[]コンテキストからテーブルデータの配列
labelsTableLabels必須テーブルヘッダー、アクション、メッセージのラベルオブジェクト
dropdownMenuItems(cell: ListOrderTableRowData) => 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: ListOrderTableRowData) => stringundefinednull`

🔧 TypeScript サポート​

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

import {ListOrderTable} from '@nodeblocks/frontend-list-order-table-block';
import {ComponentProps, ReactNode} from 'react';

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

interface DropDownMenuItems {
  text: string;
  onClick: () => void;
  closeMenu: () => void;
  href: string;
  icon?:  IconType;
  showSeparator: boolean;
}

// メインコンポーネントインターフェース
interface ListOrderTableProps extends Omit<ComponentProps<'div'>, 'children'> {
  listOrderTableTitle: ReactNode;
  labels: TableLabels;
  isLoading?: boolean;
  onNavigate: (to: string) => void;
  onOrderAccepted: DropdownItemAction;
  onOrderRejected: DropdownItemAction;
  onOrderProcessing: DropdownItemAction;
  data: ListOrderTableRowData[];
  rowHref: (row: ListOrderTableRowData) => string;
  updateRowHref: (row: ListOrderTableRowData) => string;
  tabs: ComponentProps<typeof ListOrderTable.Tabs>['tabs'];
  currentTab?: string;
  onTabChange?: (tab: string) => void;
  createHref: string;
  pagination?: {
    className: string;
    currentPage: number;
    onPageChange: (page: number) => void;
    totalPages: number;
  };
  className?: string;
}

// 行データインターフェース
export interface ListOrderTableRowData {
  createdAt: string;
  id: string;
  orderName: string;
  title: string;
  status: string;
}

// アクションコールバック型
export type DropdownItemAction = (
  order: ListOrderTableRowData['id'],
  title?: ListOrderTableRowData['title'],
) => void;

// ラベルインターフェース
interface TableLabels {
  emptyStateMessage: string;
  actions?: {
    headerAction: string;
  };
  headerRow: {
    createdAt: string;
    title: string;
    orderName: string;
  };
  rowActions: {
    canceled: string;
    processing: string;
    accepted: string;
  };
}

// 完全な型付けを使用した使用例
interface CustomOrderTableProps {
  orders: ListOrderTableRowData[];
  onAcceptOrder: DropdownItemAction;
  onRejectOrder: DropdownItemAction;
  onProcessOrder: DropdownItemAction;
  tableTabs: Array<Tab>;
  currentActiveTab: string;
  onTabSwitch: (tab: string) => void;
  isTableLoading: boolean;
}

const OrderTableComponent = ({
  orders,
  onAcceptOrder,
  onRejectOrder,
  onProcessOrder,
  tableTabs,
  currentActiveTab,
  onTabSwitch,
  isTableLoading,
}: CustomOrderTableProps) => {
  const tableLabels: TableLabels = {
    emptyStateMessage: '利用可能な注文がありません',
    actions: {headerAction: '新規注文'},
    headerRow: {
      createdAt: '作成日',
      title: '注文タイトル',
      orderName: '注文番号',
    },
    rowActions: {
      accepted: '承認',
      canceled: '拒否',
      processing: '処理',
    },
  };

  return (
    <ListOrderTable
      listOrderTableTitle="注文ダッシュボード"
      labels={tableLabels}
      isLoading={isTableLoading}
      onNavigate={path => console.log('ナビゲート:', path)}
      onOrderAccepted={onAcceptOrder}
      onOrderRejected={onRejectOrder}
      onOrderProcessing={onProcessOrder}
      data={orders}
      rowHref={row => `/orders/${row.id}`}
      updateRowHref={row => `/orders/${row.id}/edit`}
      tabs={tableTabs}
      currentTab={currentActiveTab}
      onTabChange={onTabSwitch}
      createHref="/orders/create">
      <ListOrderTable.Header />
      <ListOrderTable.Content />
      <ListOrderTable.Table />
    </ListOrderTable>
  );
};

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