Skip to main content

List Users Block

ListUsers is a controlled user-directory table block built on MUI.

Installation​

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

What You Need​

ItemWhy it matters
listUsersTitleHeading text or React Node for the table section
dataArray of user records matching ListUsersRowData (id, name, createdAt, status)
labelsText labels object mapping headers, search placeholders, row actions, and empty states
Presentational component

ListUsers does not maintain list state. Manage parameters like current page, active search values, search chips, and tab filters in your application state and handle them in callback events.

Code Examples​

Live Editor
function Example() {
  const [page, setPage] = React.useState(1);

  const users = [
    {
      id: '1',
      name: 'John Smith',
      createdAt: '2026-01-15T10:30:00Z',
      status: 'active'
    },
    {
      id: '2',
      name: 'Sarah Johnson',
      createdAt: '2026-01-14T09:15:00Z',
      status: 'inactive'
    }
  ];

  const labels = {
    emptyStateMessage: 'No users found',
    searchFieldPlaceholder: 'Search users...',
    headerRow: {
      name: 'Name',
      createdAt: 'Created At',
      status: 'Status',
    },
    cellData: {
      statusActive: 'Active',
      statusInactive: 'Inactive',
    },
  };
  const [lastAction, setLastAction] = React.useState('Navigation feedback will appear here.');

  return (
    <div style={{ minHeight: 400 }}>
      {/** Inline feedback for navigation */}
      <ListUsers
        listUsersTitle="User Directory"
        labels={labels}
        data={users}
        onNavigate={(to) => setLastAction(`Navigating: ${to}`)}
        rowHref={(row) => `#users/${row.id}`}
        pagination={{
          currentPage: page,
          totalPages: 1,
          onPageChange: setPage,
        }}
      />
      <div style={{marginTop: 12, color: '#475569', fontSize: 13}}>{lastAction}</div>
    </div>
  );
}
Result
Loading...

Important Props​

Core Props​

PropTypeRequiredDefaultDescription
dataListUsersRowData[]Yes-Array of user record objects
isLoadingbooleanNo-Renders the circular loader instead of default content area when true
onNavigate(to: string) => voidNo-Navigation callback triggered on click actions (such as row clicks)
onItemActivate(rowId: string) => voidNo-Callback triggered when selecting the "Activate" action dropdown option
onItemDeactivate(rowId: string) => voidNo-Callback triggered when selecting the "Deactivate" action dropdown option
resolveRowAction(row: ListUsersRowData) => ('activate' | 'deactivate')[] | undefinedNo-Direct check evaluating active account options per row
shouldShowDropdownMenu(row: ListUsersRowData) => booleanNo-Check deciding whether to show action dropdown buttons entirely
statusMatch{ inUse: string; notInUse: string }No{ inUse: 'active', notInUse: 'inactive' }Maps raw row.status values to active/inactive text in the generated status column
paginationPaginationPropsNo-Stateful pagination controls: { currentPage, totalPages, onPageChange, className? }

Content Props​

PropTypeRequiredDefaultDescription
listUsersTitleReactNodeYes-Heading text or component rendered inside the Title sub-block
labels{ emptyStateMessage: string; searchFieldPlaceholder: string; rowActions?: { activate: string; deactivate: string }; headerRow: { createdAt: string; name: string; status: string }; cellData: { statusActive: string; statusInactive: string } }Yes-Direct layout translation and wording mappings
rowHref(row: ListUsersRowData) => stringNo-Direct row href URL generator callback
tabs{ key: string; label: string; isDisabled?: boolean; subtitle?: string }[]No-Tab filter category items
currentTabstringNo-Currently selected tab identifier
onTabChange(tab: string) => voidNo-Callback triggered on category tab clicks
searchValuestringNo-Value of search text input
onSearchFieldChange(value: string) => voidNo-Callback triggered when typing into search text input
onSearchSubmit() => voidNo-Triggered on search button clicks or Enter submits
searchChipsTitleReactNodeNo-Label displayed next to active chip filter badges
searchChipsBaseTableSearchChip[]No-Filters mapped inside the dismissible search chips bar
onSearchChipDelete(chip: BaseTableSearchChip, index: number, event: SyntheticEvent) => voidNo-Callback triggered on active chip dismissals

labels Structure​

Provide exact wording keys inside the labels object matching this layout structure:

{
  emptyStateMessage: string;
  searchFieldPlaceholder: string;
  rowActions?: {
    activate: string;
    deactivate: string;
  };
  headerRow: {
    createdAt: string;
    name: string;
    status: string;
  };
  cellData: {
    statusActive: string;
    statusInactive: string;
  };
}

Layout and Composition Props​

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNo-Compound child elements or override function child
classNamestringNo-Styling class applied on the outer container
sxSxPropsNo-MUI SX styling overrides passed to the outer Stack

ListUsers inherits all StackProps (except children). Default block order is ['header', 'searchChips', 'content', 'pagination'] (defaultBlockOrder).

Default UI Blocks​

BlockBuilt onNotes
ListUsers (root)BaseTableDirect table wrapper establishing theme contexts
ListUsers.HeaderBaseTable.HeaderFlex container holding Title and search Actions
ListUsers.TitleBaseTable.Header.TitleRenders the main head text
ListUsers.ActionBaseTable.Header.ActionsWraps user search input components
ListUsers.SearchChipsBaseTable.SearchChipsContainer holding active search filters
ListUsers.TabsBaseTable.TabsAvailable for compound/override layouts; reads tab definitions from root tabs
ListUsers.ContentBaseTable.ContentContainer block holding loaders or tabular data grids
ListUsers.LoaderBaseTable.Content.LoaderProgress spinner shown during loadings
ListUsers.TableBaseTable.Content.GridPresents user name, creation date, status cells, and actions
ListUsers.PaginationBaseTable.PaginationStandard pagination controls mapped at bottom

TypeScript​

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

const users: ListUsersRowData[] = [
  {
    id: 'usr_001',
    name: 'Kenji Sato',
    createdAt: '2026-05-27T01:00:00Z',
    status: 'active',
  }
];

const labels = {
  emptyStateMessage: 'No employees found',
  searchFieldPlaceholder: 'Search database',
  rowActions: { activate: 'Enable', deactivate: 'Suspend' },
  headerRow: {
    name: 'Member',
    createdAt: 'Joined',
    status: 'Status',
  },
  cellData: { statusActive: 'Active', statusInactive: 'Suspended' },
};

<ListUsers
  listUsersTitle="Corporate Registry"
  labels={labels}
  data={users}
/>;