Skip to main content

List Organizations Block

The ListOrganizations Component is a fully customizable and accessible organizations table interface built with React and TypeScript. It provides a complete tabular organization listing experience with modern design patterns, audit status management, search functionality, tabs, row actions, pagination support, loading states, and flexible customization options for advanced organization management applications.

🚀 Installation​

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

📖 Usage​

import {ListOrganizations} from '@nodeblocks/frontend-list-organization-block';
Live Editor
function BasicListOrganizations() {
  const [currentTab, setCurrentTab] = useState('all');
  const [isLoading, setIsLoading] = useState(false);
  const [searchValue, setSearchValue] = useState('');

  const organizationData = [
    {
      id: '1',
      createdAt: '2024-01-15T10:30:00Z',
      name: 'Acme Corporation',
      joinDate: '2024-01-15T10:30:00Z',
      auditStatus: 'approved'
    },
    {
      id: '2',
      createdAt: '2024-01-14T09:15:00Z',
      name: 'Tech Solutions Ltd',
      joinDate: '2024-01-20T14:45:00Z',
      auditStatus: 'waiting_for_review'
    },
    {
      id: '3',
      createdAt: '2024-01-13T16:20:00Z',
      name: 'Global Industries',
      joinDate: '2024-01-18T11:30:00Z',
      auditStatus: 'rejected'
    }
  ];

  const tabs = [
    { label: 'All Organizations' },
    { label: 'Approved' },
    { label: 'Pending Review' },
    { label: 'Rejected' }
  ];

  const labels = {
    emptyStateMessage: 'No organizations found',
    searchFieldPlaceholder: 'Search organizations...',
    actions: {
      headerAction: 'Add Organization',
      rowAction: 'Review'
    },
    headerRow: {
      createdAt: 'Created At',
      name: 'Organization Name',
      joinDate: 'Join Date',
      auditStatus: 'Status'
    },
    cellData: {
      statusApproved: 'Approved',
      statusRejected: 'Rejected',
      statusWaitingForReview: 'Pending Review'
    }
  };

  const handleSearchChange = (value) => {
    setSearchValue(value);
    console.log('Search changed:', value);
  };

  const handleActionClick = () => {
    console.log('Header action clicked');
  };

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

  const handleRowActionClick = (rowData) => {
    console.log('Row action clicked for:', rowData);
  };

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

  return (
    <ListOrganizations
      listOrganizationsTitle="Organizations Management"
      labels={labels}
      isLoading={isLoading}
      onSearchFieldChange={handleSearchChange}
      onActionClick={handleActionClick}
      onNavigate={handleNavigate}
      onRowActionClick={handleRowActionClick}
      data={organizationData}
      rowHref={getRowHref}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}>
      <ListOrganizations.Header style={{display: 'flex', justifyContent: 'space-between'}}>
        <ListOrganizations.Title />
        <ListOrganizations.Action />
      </ListOrganizations.Header>
      <ListOrganizations.Content>
        {isLoading ? (
          <ListOrganizations.Loader />
        ) : (
          <>
            <ListOrganizations.Tabs />
            <ListOrganizations.Table />
          </>
        )}
      </ListOrganizations.Content>
    </ListOrganizations>
  );
}
Result
Loading...

🔧 Props Reference​

Main Component Props​

PropTypeDefaultDescription
listOrganizationsTitleReactNodeRequiredTitle for the organizations table section
labelsOrganizationLabelsRequiredLabels object for table headers, actions, and messages
isLoadingbooleanundefinedWhether the table is currently loading
onSearchFieldChange(value: string) => voidRequiredCallback function when search field value changes
onActionClick() => voidRequiredCallback function for header action button
onNavigate(to: string) => voidRequiredCallback function for navigation
onRowActionClick(rowData: ListOrganizationsRowData) => voidRequiredCallback function when row action is clicked
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}undefinedPagination configuration object
dataListOrganizationsRowData[]RequiredArray of organization data objects
rowHref(row: ListOrganizationsRowData) => stringRequiredFunction to generate row link URLs
tabsTab[]RequiredArray of tab configuration objects
currentTabstringundefinedCurrently active tab identifier
onTabChange(tab: string) => voidundefinedCallback function when tab is changed
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all standard HTML div element props except children.

Sub-Components​

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

ListOrganizations.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

ListOrganizations.Action​

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default action rendering
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

ListOrganizations.Header​

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

Note: This component inherits all props from the HTML div element.

ListOrganizations.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

ListOrganizations.Content​

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

Note: This component inherits all props from the HTML div element.

ListProductsTable.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

ListOrganizations.Table​

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class name for styling
labelsOrganizationLabelsFrom contextLabels for table headers and actions
isLoadingbooleanFrom contextLoading state
dataListOrganizationsRowData[]From contextArray of table data
rowHref(row: ListOrganizationsRowData) => stringFrom contextRow link function
onNavigate(to: string) => voidFrom contextNavigation callback function
onRowActionClick(rowData: ListOrganizationsRowData) => voidFrom contextRow action callback function
paginationPaginationPropsFrom contextPagination configuration
emptyState{icon: enum, message: string}From contextConfiguration for empty state

🔧 TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {ListOrganizations} from '@nodeblocks/frontend-list-organization-block';

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

interface ListOrganizationsRowData {
  id: string;
  createdAt: string;
  name: string;
  joinDate: string;
  auditStatus: string;
}

interface OrganizationLabels {
  emptyStateMessage: string;
  searchFieldPlaceholder: string;
  actions: {
    headerAction: ReactNode;
    rowAction: ReactNode;
  };
  headerRow: {
    createdAt: string;
    name: string;
    joinDate: string;
    auditStatus: string;
  };
  cellData: {
    statusApproved: ReactNode;
    statusRejected: ReactNode;
    statusWaitingForReview: ReactNode;
  };
}

interface CustomOrganizationTableProps {
  organizations: ListOrganizationsRowData[];
  onSearch: (query: string) => void;
  onAddOrganization: () => void;
  onReviewOrganization: (org: ListOrganizationsRowData) => void;
  tableTabs: Array<Tab>;
  currentActiveTab: string;
  onTabSwitch: (tab: string) => void;
  isTableLoading: boolean;
}

const OrganizationTableComponent = ({
  organizations,
  onSearch,
  onAddOrganization,
  onReviewOrganization,
  tableTabs,
  currentActiveTab,
  onTabSwitch,
  isTableLoading,
}: CustomOrganizationTableProps) => {
  const tableLabels: OrganizationLabels = {
    emptyStateMessage: 'No organizations available',
    searchFieldPlaceholder: 'Search by organization name...',
    actions: {
      headerAction: 'New Organization',
      rowAction: 'Review Application',
    },
    headerRow: {
      createdAt: 'Date Created',
      name: 'Organization Name',
      joinDate: 'Join Date',
      auditStatus: 'Audit Status',
    },
    cellData: {
      statusApproved: <span style={{color: 'green'}}>Approved</span>,
      statusRejected: <span style={{color: 'red'}}>Rejected</span>,
      statusWaitingForReview: <span style={{color: 'orange'}}>Under Review</span>,
    },
  };

  return (
    <ListOrganizations
      listOrganizationsTitle="Organization Management Dashboard"
      labels={tableLabels}
      isLoading={isTableLoading}
      onSearchFieldChange={onSearch}
      onActionClick={onAddOrganization}
      onNavigate={path => console.log('Navigate:', path)}
      onRowActionClick={onReviewOrganization}
      data={organizations}
      rowHref={row => `/organizations/${row.id}`}
      tabs={tableTabs}
      currentTab={currentActiveTab}
      onTabChange={onTabSwitch}>
      <ListOrganizations.Header />
      <ListOrganizations.Content />
    </ListOrganizations>
  );
};

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