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

ユーザーリストブロック

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

🚀 インストール​

npm install @nodeblocks/frontend-list-users-block@0.1.0

📖 使用方法​

import {ListUsers} from '@nodeblocks/frontend-list-users-block';
function BasicListUsers() {
  const [currentTab, setCurrentTab] = useState('active');
  const [isLoading, setIsLoading] = useState(false);

  const userData = [
    {
      id: '1',
      name: '田中太郎',
      createdAt: '2024-01-15T10:30:00Z',
      status: 'active'
    },
    {
      id: '2',
      name: '佐藤花子',
      createdAt: '2024-01-14T09:15:00Z',
      status: 'inactive'
    },
    {
      id: '3',
      name: '山田次郎',
      createdAt: '2024-01-12T14:45:00Z',
      status: 'active'
    }
  ];

  const tabs = [
    { label: 'アクティブユーザー' },
    { label: '非アクティブユーザー' },
    { label: '全ユーザー' }
  ];

  const labels = {
    emptyStateMessage: 'ユーザーが見つかりません',
    headerRow: {
      name: '名前',
      createdAt: '作成日',
      status: 'ステータス'
    },
    cellData: {
      statusInUse: 'アクティブ',
      statusNotInUse: '非アクティブ'
    }
  };

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

  const getRowHref = (row) => `/users/${row.id}`;

  return (
    <ListUsers
      listUsersTitle="ユーザー管理"
      labels={labels}
      isLoading={isLoading}
      onNavigate={handleNavigate}
      data={userData}
      rowHref={getRowHref}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}>
      <ListUsers.Header>
        <ListUsers.Title />
      </ListUsers.Header>
      <ListUsers.Content>
        {isLoading ? (
          <ListUsers.Loader />
        ) : (
          <>
            <ListUsers.Tabs />
            <ListUsers.Table />
          </>
        )}
      </ListUsers.Content>
    </ListUsers>
  );
}

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

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

プロパティ型デフォルト説明
listUsersTitleReactNode必須ユーザーテーブルセクションのタイトル
labelsUserLabels必須テーブルヘッダー、ステータスメッセージ、空状態用のラベルオブジェクト
isLoadingbooleanundefinedテーブルが現在ローディング中かどうか
onNavigate(to: string) => voidundefinedナビゲーション用のコールバック関数
dataListUsersRowData[]必須ユーザーデータオブジェクトの配列
rowHref(row: ListUsersRowData) => stringundefined行リンクURLを生成する関数
tabsTab[]undefinedタブ設定オブジェクトの配列
currentTabstringundefined現在アクティブなタブ識別子
onTabChange(tab: string) => voidundefinedタブが変更されたときのコールバック関数
paginationPaginationPropsundefinedページネーション設定オブジェクト
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

サブコンポーネント​

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

ListUsers.Header​

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

ListUsers.Title​

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

ListUsers.Content​

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

ListUsers.Loader​

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

ListUsers.Tabs​

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

ListUsers.Table​

プロパティ型デフォルト説明
classNamestringundefinedスタイリング用の追加CSSクラス名
dataListUsersRowData[]コンテキストからテーブルデータの配列
emptyState{icon: enum; message: string}コンテキストから空状態の設定
isLoadingbooleanコンテキストからローディング状態
onNavigate(to: string) => voidコンテキストからナビゲーションコールバック関数
paginationPaginationPropsコンテキストからページネーション設定
rowHref(row: ListUsersRowData) => stringコンテキストから行リンクURLを生成する関数
labelsUserLabelsコンテキストからテーブルヘッダーとステータスメッセージ用のラベル

🔧 TypeScript サポート​

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

import {ListUsers} from '@nodeblocks/frontend-list-users-block';

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

interface ListUsersRowData {
  id: string;
  createdAt: string;
  name: string;
  status: string;
}

interface UserLabels {
  emptyStateMessage: string;
  headerRow: {
    createdAt: string;
    name: string;
    status: string;
  };
  cellData: {
    statusInUse: string;
    statusNotInUse: string;
  };
}

interface CustomUserTableProps {
  users: ListUsersRowData[];
  onNavigateToUser: (path: string) => void;
  tableTabs: Array<Tab>;
  currentActiveTab: string;
  onTabSwitch: (tab: string) => void;
  isTableLoading: boolean;
  paginationConfig?: {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
  };
}

const UserTableComponent = ({
  users,
  onNavigateToUser,
  tableTabs,
  currentActiveTab,
  onTabSwitch,
  isTableLoading,
  paginationConfig,
}: CustomUserTableProps) => {
  const tableLabels: UserLabels = {
    emptyStateMessage: 'システムにユーザーが見つかりません',
    headerRow: {
      createdAt: '作成日',
      name: 'ユーザー名',
      status: 'アカウント状態',
    },
    cellData: {
      statusInUse: 'アクティブ',
      statusNotInUse: '非アクティブ',
    },
  };

  return (
    <ListUsers
      listUsersTitle="ユーザー管理ダッシュボード"
      labels={tableLabels}
      isLoading={isTableLoading}
      onNavigate={onNavigateToUser}
      data={users}
      rowHref={row => `/users/${row.id}`}
      tabs={tableTabs}
      currentTab={currentActiveTab}
      onTabChange={onTabSwitch}
      pagination={paginationConfig}>
      <ListUsers.Header>
        <ListUsers.Title />
      </ListUsers.Header>
      <ListUsers.Content>
        {isTableLoading ? (
          <ListUsers.Loader />
        ) : (
          <>
            <ListUsers.Tabs />
            <ListUsers.Table />
          </>
        )}
      </ListUsers.Content>
    </ListUsers>
  );
};

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