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

組織リストブロック

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

🚀 インストール​

npm install @nodeblocks/frontend-list-organization-block@0.2.1

📖 使用法​

import {ListOrganizations} from '@nodeblocks/frontend-list-organization-block';
ライブエディター
function SimpleListOrganizations() {
  const organizationData = [
    {
      id: '1',
      name: 'アクメ株式会社',
      createdAt: '2021-03-15',
      joinDate: '2024-01-10',
      auditStatus: 'approved',
    },
    {
      id: '2',
      name: 'テック・スタートアップ株式会社',
      createdAt: '2022-06-20',
      joinDate: '2024-01-12',
      auditStatus: 'waiting_for_review',
    },
    {
      id: '3',
      name: 'デザインスタジオ',
      createdAt: '2023-01-05',
      joinDate: '2024-01-14',
      auditStatus: 'rejected',
    },
  ];

  const tabs = [{label: 'すべて'}];

  const labels = {
    emptyStateMessage: '組織が見つかりません',
    searchFieldPlaceholder: '組織を検索...',
    actions: {
      headerAction: '組織を作成',
      rowAction: '詳細を表示',
    },
    headerRow: {
      createdAt: '作成日',
      name: '組織名',
      joinDate: '参加日',
      auditStatus: 'ステータス',
    },
    cellData: {
      statusApproved: '承認済み',
      statusRejected: '拒否済み',
      statusWaitingForReview: '審査待ち',
    },
  };

  return (
    <ListOrganizations
      data={organizationData}
      labels={labels}
      tabs={tabs}
      listOrganizationsTitle="マイ組織"
      onSearchFieldChange={value => console.log('検索:', value)}
      onActionClick={() => console.log('作成がクリックされました')}
      onNavigate={to => console.log('ナビゲート先:', to)}
      onRowActionClick={row => console.log('行アクション:', row.id)}
      rowHref={row => `/organizations/${row.id}`}
    >
      <ListOrganizations.Header />
      <ListOrganizations.Table />
    </ListOrganizations>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
listOrganizationsTitleReactNode必須組織テーブルセクションのタイトル
labelsOrganizationLabels必須テーブルヘッダー、アクション、メッセージのラベルオブジェクト
isLoadingbooleanundefinedテーブルが現在読み込み中かどうか
onSearchFieldChange(value: string) => void必須検索フィールドの値が変更されたときのコールバック関数
onActionClick() => void必須ヘッダーアクションボタンのコールバック関数
onNavigate(to: string) => void必須ナビゲーション用のコールバック関数
onRowActionClick(rowData: ListOrganizationsRowData) => void必須行アクションがクリックされたときのコールバック関数
dataListOrganizationsRowData[]必須組織データオブジェクトの配列
rowHref(row: ListOrganizationsRowData) => string必須行リンクURLを生成する関数
tabsTabData[]必須タブ設定オブジェクトの配列
currentTabstringundefined現在アクティブなタブラベル
onTabChange(tab: string) => voidundefinedタブが変更されたときのコールバック関数
paginationPaginationPropsundefinedページネーション設定オブジェクト
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドする関数

注意: メインコンポーネントはMUI Stack プロパティを継承します。ルートコンテナはデフォルトで spacing={3} と sx={{ p: 3 }} を使用します。

サブコンポーネント​

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

ListOrganizations.Header​

タイトルとアクションコンポーネントを含むヘッダーのコンテナです。

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

注意: このコンポーネントはMUI Stack プロパティを継承します。デフォルト justifyContent: 'space-between'。

ListOrganizations.Title​

組織セクションのタイトルを表示します。

プロパティ型デフォルト説明
childrenReactNodeコンテキストからタイトルをオーバーライドするカスタムコンテンツ
listOrganizationsTitleReactNodeコンテキストからchildrenが提供されていない場合のタイトルテキスト
variantTypographyProps['variant']"h4"MUI Typographyバリアント
componentElementType"h1"レンダリングするHTML要素
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Typography プロパティを継承します。

ListOrganizations.Action​

検索フィールドとアクションボタンのコンテナです。

プロパティ型デフォルト説明
childrenReactNodeundefinedデフォルトアクションレンダリングをオーバーライドするカスタムコンテンツ
onActionClick() => voidコンテキストからアクションボタンのコールバック
onSearchFieldChange(value: string) => voidコンテキストから検索入力のコールバック
labelsOrganizationLabelsコンテキストからアクションテキストとプレースホルダーのラベル
directionStackProps['direction']"row"フレックス方向
spacingnumber2要素間のStackスペーシング
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stack プロパティを継承します。

ListOrganizations.Content​

メインコンテンツエリア（ローダー、タブ、テーブル）のコンテナです。

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

注意: このコンポーネントは spacing={3} を持つMUI Stack プロパティを継承します。読み込み中は Loader を、それ以外は Tabs + Table をレンダリングします。

ListOrganizations.Loader​

ローディングインジケーターを表示します。

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

注意: このコンポーネントはMUI Stack プロパティを継承します。デフォルトの整列は alignItems: 'center'、justifyContent: 'center' です。

ListOrganizations.Tabs​

組織をフィルタリングするためのタブナビゲーションを表示します。

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

注意: このコンポーネントはMUI Tabs プロパティを継承します（value、onChange、variant を除く）。デフォルトで variant="fullWidth" を使用します。

ListOrganizations.Table​

組織データをテーブル形式で表示します。

プロパティ型デフォルト説明
labelsOrganizationLabelsコンテキストからテーブルヘッダーとアクション用のラベル
dataListOrganizationsRowData[]コンテキストから組織データの配列
rowHref(row: ListOrganizationsRowData) => stringコンテキストから行リンクを生成する関数
onNavigate(to: string) => voidコンテキストから行クリック時のナビゲーションコールバック
onRowActionClick(row: ListOrganizationsRowData) => voidコンテキストから行アクションがクリックされたときのコールバック
paginationPaginationPropsコンテキストからページネーション設定
spacingnumber3要素間のStackスペーシング
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stack プロパティを継承します。

🎨 Configuration examples​

Custom Header Styling​

<ListOrganizations.Header 
  sx={{ 
    bgcolor: 'primary.main', 
    color: 'white',
    borderRadius: 2,
    p: 3
  }} 
/>

Custom Title Styling​

<ListOrganizations.Title 
  variant="h3"
  sx={{ 
    fontWeight: 700,
    color: 'primary.main'
  }} 
/>

Custom Status Labels with JSX​

const labels = {
  // ... other labels
  cellData: {
    statusApproved: <Chip label="承認済み" color="success" size="small" />,
    statusRejected: <Chip label="拒否済み" color="error" size="small" />,
    statusWaitingForReview: <Chip label="保留中" color="warning" size="small" />
  }
};

Using Block Override Pattern​

<ListOrganizations {...props}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      header: customHeader,
      content: customContent,
    },
    blockOrder: defaultBlockOrder,
  })}
</ListOrganizations>

🔧 TypeScript サポート​

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

import {ListOrganizations} from '@nodeblocks/frontend-list-organization-block';
import { StackProps } from '@mui/material';
import { ReactNode } from 'react';

// タブデータインターフェース
interface TabData {
  key?: string;
  label: string;
  isDisabled?: boolean;
  subtitle?: string;
}

// 行データインターフェース
interface ListOrganizationsRowData {
  id: string;
  createdAt: string;
  name: string;
  joinDate: string;
  auditStatus: string;
}

// ページネーションプロパティインターフェース
interface PaginationProps {
  className?: string;
  currentPage: number;
  onPageChange: (page: number) => void;
  totalPages: number;
}

// ラベルインターフェース
interface OrganizationLabels {
  emptyStateMessage: string;
  searchFieldPlaceholder: string;
  actions: {
    headerAction: ReactNode;
    rowAction: ReactNode;
  };
  headerRow: {
    createdAt: string;
    name: string;
    joinDate: string;
    auditStatus: string;
  };
  cellData: {
    statusApproved: ReactNode;
    statusRejected: ReactNode;
    statusWaitingForReview: ReactNode;
  };
}

// メインコンポーネントプロパティインターフェース
interface ListOrganizationsProps<T extends TabData[]> extends Omit<StackProps, 'children'> {
  listOrganizationsTitle: ReactNode;
  labels: OrganizationLabels;
  isLoading?: boolean;
  onSearchFieldChange: (value: string) => void;
  onActionClick: () => void;
  onNavigate: (to: string) => void;
  onRowActionClick: (rowData: ListOrganizationsRowData) => void;
  data: ListOrganizationsRowData[];
  rowHref: (row: ListOrganizationsRowData) => string;
  tabs: T;
  currentTab?: T[number]['label'];
  onTabChange?: (tab: T[number]['label']) => void;
  pagination?: PaginationProps;
  children?: BlocksOverride;
}

// Usage example with full typing
function TypedListOrganizations() {
  const [page, setPage] = useState(1);
  const [currentTab, setCurrentTab] = useState('すべて');

  const organizationData: ListOrganizationsRowData[] = [
    {
      id: 'org-1',
      name: 'テックカンパニー',
      createdAt: '2020-05-10',
      joinDate: '2024-01-15',
      auditStatus: 'approved',
    },
    {
      id: 'org-2',
      name: 'スタートアップ株式会社',
      createdAt: '2022-08-20',
      joinDate: '2024-01-18',
      auditStatus: 'waiting_for_review',
    },
  ];

  const tabs: TabData[] = [
    {key: 'all', label: 'すべて'},
    {key: 'approved', label: '承認済み'},
    {key: 'pending', label: '保留中'},
  ];

  const labels: OrganizationLabels = {
    emptyStateMessage: '組織が見つかりません',
    searchFieldPlaceholder: '組織を検索...',
    actions: {
      headerAction: '組織を作成',
      rowAction: '管理',
    },
    headerRow: {
      createdAt: '設立日',
      name: '組織名',
      joinDate: 'メンバー登録日',
      auditStatus: '監査ステータス',
    },
    cellData: {
      statusApproved: '承認済み',
      statusRejected: '拒否済み',
      statusWaitingForReview: '審査中',
    },
  };

  const handleSearchChange = (value: string): void => {
    console.log('検索値:', value);
  };

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

  const handleRowAction = (row: ListOrganizationsRowData): void => {
    console.log('組織を管理:', row.id);
  };

  const pagination: PaginationProps = {
    currentPage: page,
    totalPages: 5,
    onPageChange: newPage => setPage(newPage),
  };

  return (
    <ListOrganizations
      data={organizationData}
      labels={labels}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={tab => setCurrentTab(tab)}
      listOrganizationsTitle="組織リスト"
      onSearchFieldChange={handleSearchChange}
      onActionClick={() => console.log('作成がクリックされました')}
      onNavigate={handleNavigate}
      onRowActionClick={handleRowAction}
      rowHref={row => `/organizations/${row.id}`}
      pagination={pagination}
      isLoading={false}
      sx={{
        maxWidth: 800,
        mx: 'auto',
        p: 3,
        border: '1px solid #e5e7eb',
        borderRadius: 2,
      }}
    >
      <ListOrganizations.Header />
      <ListOrganizations.Tabs />
      <ListOrganizations.Table />
    </ListOrganizations>
  );
}

📝 注意事項​

  • ルートコンポーネントはデフォルトで spacing={3} と sx={{ p: 3 }} のパディングを持つMUIの Stack を使用します
  • MUI Table、TableContainer、TableHead、TableBody、TableRow コンポーネントを使用します
  • 日付フォーマットは luxon ライブラリを使用し、表示には yyyy/M/d フォーマットを使用します
  • 行アクションボタンは auditStatus: 'waiting_for_review' の行にのみ表示されます
  • 空状態はラベルの emptyStateMessage と共にpersonアイコン（SVG）を表示します
  • ページネーションは variant="outlined" と shape="rounded" を持つMUI Pagination コンポーネントを使用します
  • rowHref が有効なURLを返す場合、テーブル行はクリック可能です（カーソルがポインターに変わります）
  • タブはデフォルトで variant="fullWidth" を持つMUI Tabs コンポーネントを使用します
  • ListOrganizations.Title はデフォルトで variant="h4" と component="h1" を持つMUI Typographyを使用します
  • 検索フィールドはエンドアドーンメントに検索アイコンを持つMUI TextField を使用します
  • アクションボタンは variant="outlined" と size="medium" を持つMUI Button を使用します
  • すべてのサブコンポーネントはそれぞれのMUIコンポーネントプロパティを継承し、スタイリング用の sx プロパティをサポートします
  • ブロックオーバーライドパターンにより、デフォルトブロックのカスタマイズ、置換、並べ替えが可能です

React、TypeScript、MUIを使用して❤️で構築されました。