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

ユーザーリストブロック

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

🚀 インストール​

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

📖 使用法​

import {ListUsers} from '@nodeblocks/frontend-list-users-block';
ライブエディター
function SimpleListUsers() {
  const users = [
    {
      id: '1',
      name: '田中太郎',
      status: 'in_use',
      createdAt: '2023-01-15',
    },
    {
      id: '2',
      name: '佐藤花子',
      status: 'in_use',
      createdAt: '2023-02-20',
    },
    {
      id: '3',
      name: '山田次郎',
      status: 'not_in_use',
      createdAt: '2023-03-10',
    },
  ];

  const pagination = {
    currentPage: 1,
    totalPages: 1,
    onPageChange: newPage => console.log('ページ:', newPage),
  };

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

  return (
    <ListUsers
      listUsersTitle="チームメンバー"
      data={users}
      isLoading={false}
      pagination={pagination}
      onNavigate={href => console.log('ナビゲート:', href)}
      rowHref={row => `/users/${row.id}`}
      labels={labels}
    >
      <ListUsers.Header />
      <ListUsers.Table />
    </ListUsers>
  );
}
結果
Loading...

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

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

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

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

サブコンポーネント​

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

ListUsers.Title​

プロパティ型デフォルト説明
listUsersTitleReactNodeコンテキストから表示するタイトルコンテンツ
childrenReactNodeコンテキストからデフォルトタイトルレンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
variantstring"h4"MUI Typographyバリアント
componentstring"h1"レンダリングするHTML要素

注意: このコンポーネントはMUI TypographyProps を拡張します。

ListUsers.Header​

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

注意: このコンポーネントはMUI BoxProps を拡張します。

ListUsers.Content​

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

注意: このコンポーネントはMUI BoxProps を拡張します。

ListUsers.Loader​

プロパティ型デフォルト説明
childrenReactNode<CircularProgress />カスタムローディングインジケーターコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxPropsundefinedカスタムスタイリング用のMUI sxプロパティ

注意: このコンポーネントはデフォルト alignItems: 'center' を持つMUI StackProps を拡張します。

ListUsers.Tabs​

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

注意: このコンポーネントはMUI TabsProps（value、onChange、variant を除く）を拡張します。内部で variant="fullWidth" を使用します。

ListUsers.Table​

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

注意: このコンポーネントはMUI StackProps を拡張します。

🎨 設定例​

カスタムタイトルスタイリング​

<ListUsers.Title
  variant="h3"
  sx={{
    color: 'primary.main',
    fontWeight: 'bold',
    textTransform: 'uppercase',
  }}
>
  カスタムユーザータイトル
</ListUsers.Title>

ページネーションセットアップ​

<ListUsers
  listUsersTitle="ページネーション付きユーザー"
  labels={labels}
  data={userData}
  pagination={{
    currentPage: 1,
    totalPages: 10,
    onPageChange: (page) => console.log('ページ:', page),
  }}
/>

カスタム空状態メッセージ​

const labels = {
  emptyStateMessage: '検索条件に一致するユーザーが見つかりません',
  headerRow: {
    name: 'フルネーム',
    createdAt: '登録日',
    status: 'アカウント状態',
  },
  cellData: {
    statusInUse: 'アクティブ',
    statusNotInUse: '非アクティブ',
  },
};

ブロックオーバーライドパターン​

<ListUsers listUsersTitle="ユーザー" labels={labels} data={userData}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      header: (
        <ListUsers.Header
          sx={{
            p: 3,
            borderBottom: '1px solid #e2e8f0',
            '& .nbb-list-users-title': {
              fontSize: 24,
              fontWeight: 700,
              color: '#1e293b',
            },
          }}
        />
      ),
      tabs: (
        <ListUsers.Tabs
          sx={{
            px: 3,
            borderBottom: '1px solid #e2e8f0',
            '& .MuiTab-root': {
              textTransform: 'none',
              fontWeight: 500,
              color: '#64748b',
              '&.Mui-selected': {
                color: '#6366f1',
                fontWeight: 600,
              },
            },
          }}
        />
      ),
      table: (
        <ListUsers.Table
          sx={{
            '& .MuiTableHead-root': {
              bgcolor: '#f8fafc',
            },
          }}
        />
      ),
    },
    blockOrder: defaultBlockOrder,
  })}
</ListUsers>

カスタムスタイリング​

<ListUsers
  listUsersTitle="ユーザー"
  data={users}
  isLoading={false}
  pagination={pagination}
  onNavigate={console.log}
  rowHref={row => `/users/${row.id}`}
  labels={labels}
  sx={{
    bgcolor: 'grey.900',
    color: 'grey.100',
    borderRadius: 2,
  }}
>
  <ListUsers.Header
    sx={{
      p: 2,
      borderBottom: '1px solid',
      borderColor: 'grey.700',
      '& .MuiTypography-root': {
        color: 'grey.100',
      },
    }}
  />
  <ListUsers.Table
    sx={{
      '& .MuiTableCell-root': {
        color: 'grey.300',
        borderColor: 'grey.700',
      },
      '& .MuiTableHead-root .MuiTableCell-root': {
        color: 'grey.400',
        bgcolor: 'grey.800',
      },
    }}
  />
</ListUsers>

サブタイトル付きタブ​

const tabs = [
  {label: 'アクティブ', subtitle: '(24)'},
  {label: '非アクティブ', subtitle: '(8)'},
  {label: '保留中', subtitle: '(3)', isDisabled: true},
];

<ListUsers tabs={tabs} currentTab="アクティブ" onTabChange={setTab} /* ... */ />

🔧 TypeScriptサポート​

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

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

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

interface PaginationConfig {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

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

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

function TypedListUsers() {
  const userData: UserData[] = [
    {
      id: 'u1',
      name: '田中太郎',
      status: 'in_use',
      createdAt: '2023-01-15',
    },
    {
      id: 'u2',
      name: '佐藤花子',
      status: 'in_use',
      createdAt: '2023-02-20',
    },
    {
      id: 'u3',
      name: '山田次郎',
      status: 'not_in_use',
      createdAt: '2023-03-10',
    },
  ];

  const paginationConfig: PaginationConfig = {
    currentPage: 1,
    totalPages: 1,
    onPageChange: newPage => console.log('ページが変更されました:', newPage),
  };

  const tabConfig: TabConfig[] = [
    {key: 'all', label: 'すべてのユーザー'},
    {key: 'active', label: 'アクティブ'},
    {key: 'inactive', label: '非アクティブ'},
  ];

  const labelsConfig: LabelsConfig = {
    emptyStateMessage: 'チームメンバーが見つかりません',
    headerRow: {
      createdAt: '参加日',
      name: 'フルネーム',
      status: 'ステータス',
    },
    cellData: {
      statusInUse: 'アクティブ',
      statusNotInUse: '非アクティブ',
    },
  };

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

  return (
    <ListUsers
      listUsersTitle="チーム管理"
      data={userData}
      isLoading={false}
      pagination={paginationConfig}
      onNavigate={handleNavigate}
      rowHref={(row: UserData) => `/users/${row.id}`}
      tabs={tabConfig}
      currentTab="すべてのユーザー"
      onTabChange={tab => console.log('タブが変更されました:', tab)}
      labels={labelsConfig}
      spacing={2}
      sx={{
        maxWidth: 1000,
        mx: 'auto',
        border: '1px solid #e5e7eb',
        borderRadius: 2,
      }}
    >
      <ListUsers.Header />
      <ListUsers.Tabs />
      <ListUsers.Table />
    </ListUsers>
  );
}

📝 注意事項​

  • コンポーネントはMUIの Stack コンポーネントをベースとして使用し、柔軟なレイアウトオプションを提供します
  • デフォルトスペーシングは 3（24px）、デフォルトパディングは p: 3（24px）です
  • すべてのサブコンポーネントはメインコンポーネントからコンテキスト値を自動的に受け取ります
  • 日付フォーマットは luxon ライブラリを使用し、表示形式は yyyy/M/d です
  • 完全な日時はホバー時に title 属性で表示されます
  • Tabs コンポーネントは内部でMUIの variant="fullWidth" を使用します
  • 空状態はラベルの emptyStateMessage と人物アイコンを表示します
  • 行ホバーエフェクトは rowHref が提供されている場合のみ適用されます
  • 行をクリックすると rowHref が返すhrefで onNavigate がトリガーされます
  • デフォルトブロック: title、header、content、tabs、table
  • CSSクラスはBEMスタイルの命名に従います: nbb-list-users-container、nbb-list-users-title など
  • Loader コンポーネントはデフォルトでMUI CircularProgress をレンダリングします

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