Skip to main content

List Users Block

The ListUsers Component is a fully customizable and accessible users table interface built with React and TypeScript. It provides a complete tabular user listing experience with modern design patterns, sortable columns, tabs, status management, pagination support, loading states, and flexible customization options for advanced user management applications.

🚀 Installation​

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

📖 Usage​

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

  const userData = [
    {
      id: '1',
      name: 'John Smith',
      createdAt: '2024-01-15T10:30:00Z',
      status: 'active'
    },
    {
      id: '2',
      name: 'Sarah Johnson',
      createdAt: '2024-01-14T09:15:00Z',
      status: 'inactive'
    },
    {
      id: '3',
      name: 'Michael Brown',
      createdAt: '2024-01-12T14:45:00Z',
      status: 'active'
    }
  ];

  const tabs = [
    { label: 'Active Users' },
    { label: 'Inactive Users' },
    { label: 'All Users' }
  ];

  const labels = {
    emptyStateMessage: 'No users found',
    headerRow: {
      name: 'Name',
      createdAt: 'Created At',
      status: 'Status'
    },
    cellData: {
      statusInUse: 'Active',
      statusNotInUse: 'Inactive'
    }
  };

  const handleNavigate = (path) => {
    console.log('Navigate to:', path);
  };

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

  return (
    <ListUsers
      listUsersTitle="User Management"
      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>
  );
}
Result
Loading...

🔧 Props Reference​

Main Component Props​

PropTypeDefaultDescription
listUsersTitleReactNodeRequiredTitle for the users table section
labelsUserLabelsRequiredLabels object for table headers, status messages, and empty states
isLoadingbooleanundefinedWhether the table is currently loading
onNavigate(to: string) => voidundefinedCallback function for navigation
dataListUsersRowData[]RequiredArray of user data objects
rowHref(row: ListUsersRowData) => stringundefinedFunction to generate row link URLs
tabsTab[]undefinedArray of tab configuration objects
currentTabstringundefinedCurrently active tab identifier
onTabChange(tab: string) => voidundefinedCallback function when tab is changed
paginationPaginationPropsundefinedPagination configuration object
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Sub-Components​

The ListUsers component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

ListUsers.Header​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default header rendering
classNamestringundefinedAdditional CSS class name for styling

ListUsers.Title​

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default title rendering
classNamestringundefinedAdditional CSS class name for styling
sizeenum"3XL"Typography size for the title
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Weight of the title

ListUsers.Content​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default content rendering
classNamestringundefinedAdditional CSS class name for styling
isLoadingbooleanFrom contextLoading state from context

ListUsers.Loader​

PropTypeDefaultDescription
childrenReactNodeCircular progress indicatorCustom loading indicator content
classNamestringundefinedAdditional CSS class name for styling
directionenum"row"Flex direction for action components
alignItemsenumFrom Spacing defaultsAlignment of items in the container
gapSizeenumFrom Spacing defaultsGap between items in the container

ListUsers.Tabs​

PropTypeDefaultDescription
tabsTab[]From contextArray of tab configuration objects
currentTabstringFrom contextCurrently active tab identifier
onTabChange(tab: string) => voidFrom contextTab change callback function
tabWidthstring"stretch"Width behavior for tabs
classNamestringundefinedAdditional CSS class name for styling

ListUsers.Table​

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class name for styling
dataListUsersRowData[]From contextArray of table data
emptyState{icon: enum; message: string}From contextConfiguration for empty state
isLoadingbooleanFrom contextLoading state
onNavigate(to: string) => voidFrom contextNavigation callback function
paginationPaginationPropsFrom contextPagination configuration
rowHref(row: ListUsersRowData) => stringFrom contextFunction to generate row link URLs
labelsUserLabelsFrom contextLabels for table headers and status messages

🔧 TypeScript Support​

Full TypeScript support with comprehensive type definitions:

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: 'No users found in the system',
    headerRow: {
      createdAt: 'Date Created',
      name: 'User Name',
      status: 'Account Status',
    },
    cellData: {
      statusInUse: 'Active',
      statusNotInUse: 'Inactive',
    },
  };

  return (
    <ListUsers
      listUsersTitle="User Management Dashboard"
      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>
  );
};

Built with ❤️ using React, TypeScript, and modern web standards.