Skip to main content

List Invites Block

The ListInvites Component is a fully customizable and accessible invite management interface built with React, TypeScript, and MUI. It provides a complete tabular invite listing experience with modern design patterns, action dropdowns, pagination support, loading states, and flexible customization options for advanced invite management applications.

πŸš€ Installation​

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

πŸ“– Usage​

import {ListInvites} from '@nodeblocks/frontend-list-invites-block';
Live Editor
function SimpleListInvites() {
  const inviteData = [
    {
      id: '1',
      name: 'John Doe',
      email: 'john@example.com',
      status: 'Pending',
    },
    {
      id: '2',
      name: 'Jane Smith',
      email: 'jane@example.com',
      status: 'Accepted',
    },
    {
      id: '3',
      name: 'Bob Wilson',
      email: 'bob@example.com',
      status: 'Expired',
    },
  ];

  const labels = {
    emptyStateMessage: 'No invitations found',
    actions: {
      inviteUser: 'Invite User',
    },
    headerRow: {
      name: 'Name',
      email: 'Email',
      status: 'Status',
    },
    rowActions: {
      reject: 'Reject',
    },
    unsetDateMessage: 'Not set',
  };

  return (
    <ListInvites
      data={inviteData}
      labels={labels}
      listInvitesTitle="Team Invitations"
      onNavigate={to => console.log('Navigate to:', to)}
      onClickAction={() => console.log('Invite action clicked')}
      onItemReject={id => console.log('Reject invite:', id)}
      rowHref={row => `/invites/${row.id}`}
    >
      <ListInvites.Header />
      <ListInvites.Content />
    </ListInvites>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
listInvitesTitleReactNodeRequiredTitle for the invites section
labelsTableLabelsRequiredLabels object for table headers, actions, and messages
isLoadingbooleanundefinedWhether the table is currently loading
onNavigate(to: string) => voidRequiredCallback function for navigation
onClickAction() => voidRequiredCallback function for the main action button
onItemReject(inviteId: string) => voidRequiredCallback function when invite is rejected
dataListInvitesRowData[]RequiredArray of invite data objects
rowHref(row: ListInvitesRowData) => stringRequiredFunction to generate row link URLs
shouldShowDropdownMenu(row: ListInvitesRowData) => booleanundefinedFunction to conditionally show dropdown menu per row
paginationPaginationPropsundefinedPagination configuration
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedFunction to override default blocks

Note: The main component inherits MUI Stack props. Root container uses spacing={3} and sx={{ p: 3 }} by default.

Sub-Components​

The ListInvites 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.

ListInvites.Header​

Container for the header including title and action button.

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

Note: This component inherits MUI Box props. Contains a Stack with direction="row" and justifyContent: 'space-between'.

ListInvites.Title​

Displays the invites section title.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override title
listInvitesTitleReactNodeFrom contextTitle text when children not provided
variantTypographyProps['variant']"h4"MUI Typography variant
componentElementType"h1"HTML element to render
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Typography props.

ListInvites.Action​

Container for the action button.

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default action rendering
onClickAction() => voidFrom contextCallback for the action button
labelsTableLabelsFrom contextLabels for action text
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props (except direction which is fixed to "row"). Default alignment is alignItems: 'center'.

ListInvites.Content​

Container for the main content area (loader or table).

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

Note: This component inherits MUI Box props. Renders Loader when loading, Table otherwise.

ListInvites.Loader​

Displays a loading indicator.

PropTypeDefaultDescription
childrenReactNodeCircularProgressCustom loading indicator content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props. Default alignment is alignItems: 'center'.

ListInvites.Table​

Displays the invites data in a table format.

PropTypeDefaultDescription
labelsTableLabelsFrom contextLabels for table headers and actions
dataListInvitesRowData[]From contextArray of invite data
rowHref(row: ListInvitesRowData) => stringFrom contextFunction to generate row links
onNavigate(to: string) => voidFrom contextNavigation callback for row clicks
onItemReject(id: string) => voidFrom contextCallback when rejecting an invite
shouldShowDropdownMenu(row: ListInvitesRowData) => booleanFrom contextFunction to conditionally show dropdown
paginationPaginationPropsFrom contextPagination configuration
spacingnumber3Stack spacing between elements
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props.

🎨 Configuration examples​

Custom Styled Example​

<ListInvites
  data={inviteData}
  labels={labels}
  listInvitesTitle="Invitations"
  onNavigate={console.log}
  onClickAction={() => console.log('Action clicked')}
  onItemReject={console.log}
  rowHref={row => `/invite/${row.id}`}
  sx={{
    bgcolor: 'grey.900',
    color: 'grey.100',
    p: 3,
    borderRadius: 2,
  }}
>
  <ListInvites.Header
    sx={{
      '& .MuiTypography-root': {
        color: 'grey.100',
      },
    }}
  />
  <ListInvites.Content
    sx={{
      '& .MuiTableCell-root': {
        color: 'grey.100',
        borderColor: 'grey.700',
      },
    }}
  />
</ListInvites>

Using Block Override Pattern​

<ListInvites {...props}>
  {({defaultBlocks, defaultBlockOrder}) => {
    const customHeader = (
      <div style={{padding: '24px', borderBottom: '1px solid #e2e8f0'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <div>
            <div style={{fontSize: '24px', fontWeight: '700', color: '#1e293b'}}>
              Team Invitations
            </div>
            <p style={{fontSize: '14px', color: '#64748b', margin: 0}}>
              Manage pending and past team invitations
            </p>
          </div>
          <button
            onClick={handleInviteAction}
            style={{
              padding: '12px 24px',
              borderRadius: '10px',
              background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
              color: '#ffffff',
              border: 'none',
              cursor: 'pointer',
            }}
          >
            <span>+</span> Invite Member
          </button>
        </div>
      </div>
    );

    return {
      blocks: {
        ...defaultBlocks,
        header: customHeader,
      },
      blockOrder: defaultBlockOrder,
    };
  }}
</ListInvites>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

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

// Row data interface
interface ListInvitesRowData {
  id: string;
  name: string;
  email: string;
  status: string;
}

// Pagination props interface
interface PaginationProps {
  className?: string;
  currentPage: number;
  onPageChange: (page: number) => void;
  totalPages: number;
}

// Labels interface
interface TableLabels {
  emptyStateMessage: string;
  actions: {
    inviteUser: string;
  };
  headerRow: {
    name: string;
    email: string;
    status: string;
  };
  rowActions: {
    reject: string;
  };
  unsetDateMessage: string;
}

// Main component props interface
interface ListInvitesProps extends Omit<StackProps, 'children'> {
  listInvitesTitle: ReactNode;
  labels: TableLabels;
  isLoading?: boolean;
  onNavigate: (to: string) => void;
  onClickAction: () => void;
  onItemReject: (inviteId: string) => void;
  data: ListInvitesRowData[];
  rowHref: (row: ListInvitesRowData) => string;
  shouldShowDropdownMenu?: (row: ListInvitesRowData) => boolean;
  pagination?: PaginationProps;
  children?: BlocksOverride;
}

// Usage example with full typing
function TypedListInvites() {
  const [page, setPage] = useState(1);

  const inviteData: ListInvitesRowData[] = [
    {
      id: 'inv-1',
      name: 'Developer One',
      email: 'developer@company.com',
      status: 'Pending',
    },
    {
      id: 'inv-2',
      name: 'Designer Two',
      email: 'designer@company.com',
      status: 'Accepted',
    },
  ];

  const labels: TableLabels = {
    emptyStateMessage: 'No team invitations found',
    actions: {
      inviteUser: 'Invite Team Member',
    },
    headerRow: {
      name: 'Full Name',
      email: 'Email Address',
      status: 'Invitation Status',
    },
    rowActions: {
      reject: 'Reject Invitation',
    },
    unsetDateMessage: 'Date not set',
  };

  const handleNavigate = (to: string): void => {
    console.log('Navigating to:', to);
  };

  const handleInviteAction = (): void => {
    console.log('Opening invite dialog');
  };

  const handleReject = (id: string): void => {
    console.log('Rejecting invitation:', id);
  };

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

  return (
    <ListInvites
      data={inviteData}
      labels={labels}
      listInvitesTitle="Team Invitations"
      onNavigate={handleNavigate}
      onClickAction={handleInviteAction}
      onItemReject={handleReject}
      rowHref={row => `/invitations/${row.id}`}
      pagination={pagination}
      isLoading={false}
      sx={{
        maxWidth: 800,
        mx: 'auto',
        p: 3,
        border: '1px solid #e5e7eb',
        borderRadius: 2,
      }}
    >
      <ListInvites.Header />
      <ListInvites.Table />
    </ListInvites>
  );
}

πŸ“ Notes​

  • The root component uses MUI's Stack with default spacing={3} and sx={{ p: 3 }} padding
  • Uses MUI Table, TableContainer, TableHead, TableBody, and TableRow components
  • Row actions are displayed in a dropdown menu using MUI Menu and MenuItem with a block icon
  • Empty state displays a person icon (Material Symbols) with the emptyStateMessage from labels
  • Pagination uses MUI Pagination component with variant="outlined" and shape="rounded"
  • Table rows are clickable when rowHref returns a valid URL (cursor changes to pointer)
  • The shouldShowDropdownMenu prop allows conditional display of the action menu per row
  • Default action button uses MUI Button with variant="contained" and a people_outline icon
  • ListInvites.Title uses MUI Typography with default variant="h4" and component="h1"
  • All sub-components inherit their respective MUI component props and support the sx prop for styling
  • Block override pattern allows customizing, replacing, or reordering default blocks

Built with ❀️ using React, TypeScript, and MUI.