Skip to main content

List Order Table Block

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

πŸš€ Installation​

npm install @nodeblocks/frontend-list-order-table-block

πŸ“– Usage​

import {ListOrderTable} from '@nodeblocks/frontend-list-order-table-block';
Live Editor
function BasicListOrderTable() {
  const [currentTab, setCurrentTab] = useState('pending');
  const [isLoading, setIsLoading] = useState(false);

  const orderData = [
    {
      id: '1',
      createdAt: '2024-01-15T10:30:00Z',
      orderName: 'ORD-001',
      title: 'Office Supplies Order',
      status: 'pending'
    },
    {
      id: '2',
      createdAt: '2024-01-14T14:20:00Z',
      orderName: 'ORD-002',
      title: 'Software License',
      status: 'accepted'
    }
  ];

  const tabs = [
    { label: 'Pending Orders' },
    { label: 'Accepted Orders' },
    { label: 'Canceled Orders' }
  ];

  const labels = {
    emptyStateMessage: 'No orders found',
    actions: {
      headerAction: 'Create Order'
    },
    headerRow: {
      createdAt: 'Created',
      title: 'Order Title',
      orderName: 'Order ID'
    },
    rowActions: {
      accepted: 'Accept Order',
      canceled: 'Cancel Order',
      processing: 'Mark Processing'
    }
  };

  const handleOrderAccepted = (orderId, title) => {
    console.log('Order accepted:', orderId, title);
  };

  const handleOrderRejected = (orderId, title) => {
    console.log('Order rejected:', orderId, title);
  };

  const handleOrderProcessing = (orderId, title) => {
    console.log('Order processing:', orderId, title);
  };

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

  const getRowHref = (row) => `#${row.id}`;
  const getUpdateRowHref = (row) => `#${row.id}/edit`;

  return (
    <ListOrderTable
      listOrderTableTitle="Order Management"
      labels={labels}
      isLoading={isLoading}
      onNavigate={handleNavigate}
      onOrderAccepted={handleOrderAccepted}
      onOrderRejected={handleOrderRejected}
      onOrderProcessing={handleOrderProcessing}
      data={orderData}
      rowHref={getRowHref}
      updateRowHref={getUpdateRowHref}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}
      createHref="#new"
      style={{
        backgroundColor: 'white',
        padding: '8px',
      }}>
      <ListOrderTable.Header style={{display: 'flex', justifyContent: 'space-between'}}>
        <ListOrderTable.Title />
        <ListOrderTable.Action />
      </ListOrderTable.Header>
      <ListOrderTable.Content>
        {isLoading ? (
          <ListOrderTable.Loader />
        ) : (
          <>
            <ListOrderTable.Tabs />
            <ListOrderTable.Table />
          </>
        )}
      </ListOrderTable.Content>
    </ListOrderTable>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
listOrderTableTitleReactNodeRequiredTitle for the order table section
labelsTableLabelsRequiredLabels object for table headers, actions, and messages
isLoadingbooleanundefinedWhether the table is currently loading
onNavigate(to: string) => voidRequiredCallback function for navigation
onOrderAccepted(id: string) => voidRequiredCallback function when order is accepted
onOrderRejected(id: string) => voidRequiredCallback function when order is rejected
onOrderProcessing(id: string) => voidRequiredCallback function when order is marked as processing
dataListOrderTableRowData[]RequiredArray of order data objects
rowHref(row: ListOrderTableRowData) => stringRequiredFunction to generate row link URLs
updateRowHref(row: ListOrderTableRowData) => stringRequiredFunction to generate update row link URLs
tabsTab[]RequiredArray of tab configuration objects
currentTabstringundefinedCurrently active tab identifier
onTabChange(tab: string) => voidundefinedCallback function when tab is changed
createHrefstringRequiredURL for creating new orders
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}undefinedPagination configuration object
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedFunction to override default blocks or custom component rendering

Note: The main component inherits all HTML div element props.

Sub-Components​

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

ListOrderTable.Title​

PropTypeDefaultDescription
childrenReactNodeFrom contextTitle content - overrides listOrderTableTitle from context
sizeenum"2XL"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Weight of the title
classNamestringundefinedAdditional CSS class name for styling

ListOrderTable.Action​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default action rendering
createHrefstringFrom contextURL for the create action button
labelsTableLabelsFrom contextLabels for action text
directionenum"row"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
classNamestringundefinedAdditional CSS class name for styling

ListOrderTable.Header​

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

Note: This component inherits all HTML div element props.

ListOrderTable.Loader​

PropTypeDefaultDescription
childrenReactNodeCircularProgressIndicatorCustom loading indicator content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ListOrderTable.Content​

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

Note: This component inherits all HTML div element props.

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

ListOrderTable.Table​

PropTypeDefaultDescription
onOrderAccepted(id: string) => voidFrom contextCallback function when order is accepted
onOrderRejected(id: string) => voidFrom contextCallback function when order is rejected
onOrderProcessing(id: string) => voidFrom contextCallback function when order is marked as processing
classNamestringundefinedAdditional CSS class name for styling
dataListOrderTableRowData[]From contextArray of table data
labelsTableLabelsRequiredLabels object for table headers, actions, and messages
dropdownMenuItems(cell: ListOrderTableRowData) => Array<DropDownMenuItems>From contextFunction to generate dropdown menu items
dropdownMenuState{openedDropdownMenuId: string}From contextCurrently opened dropdown menu
setDropdownMenuState({openedDropdownMenuId: string}) => voidFrom contextCallback function when the opened dropdown menu changes
emptyState{icon?: IconType; message: string}From contextConfiguration for empty state
isLoadingbooleanFrom contextLoading state
onNavigate(to: string) => voidFrom contextNavigation callback function
pagination{currentPage: number; onPageChange: (page: number) => void; totalPages: number}From contextPagination configuration
rowHref`(cell: ListOrderTableRowData) => stringundefinednull`

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {ListOrderTable} from '@nodeblocks/frontend-list-order-table-block';
import {ComponentProps, ReactNode} from 'react';

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

interface DropDownMenuItems {
  text: string;
  onClick: () => void;
  closeMenu: () => void;
  href: string;
  icon?:  IconType;
  showSeparator: boolean;
}

// Main component interface
interface ListOrderTableProps extends Omit<ComponentProps<'div'>, 'children'> {
  listOrderTableTitle: ReactNode;
  labels: TableLabels;
  isLoading?: boolean;
  onNavigate: (to: string) => void;
  onOrderAccepted: DropdownItemAction;
  onOrderRejected: DropdownItemAction;
  onOrderProcessing: DropdownItemAction;
  data: ListOrderTableRowData[];
  rowHref: (row: ListOrderTableRowData) => string;
  updateRowHref: (row: ListOrderTableRowData) => string;
  tabs: ComponentProps<typeof ListOrderTable.Tabs>['tabs'];
  currentTab?: string;
  onTabChange?: (tab: string) => void;
  createHref: string;
  pagination?: {
    className: string;
    currentPage: number;
    onPageChange: (page: number) => void;
    totalPages: number;
  };
  className?: string;
}

// Row data interface
export interface ListOrderTableRowData {
  createdAt: string;
  id: string;
  orderName: string;
  title: string;
  status: string;
}

// Action callback type
export type DropdownItemAction = (
  order: ListOrderTableRowData['id'],
  title?: ListOrderTableRowData['title'],
) => void;

// Labels interface
interface TableLabels {
  emptyStateMessage: string;
  actions?: {
    headerAction: string;
  };
  headerRow: {
    createdAt: string;
    title: string;
    orderName: string;
  };
  rowActions: {
    canceled: string;
    processing: string;
    accepted: string;
  };
}

// Usage example with full typing
interface CustomOrderTableProps {
  orders: ListOrderTableRowData[];
  onAcceptOrder: DropdownItemAction;
  onRejectOrder: DropdownItemAction;
  onProcessOrder: DropdownItemAction;
  tableTabs: Array<Tab>;
  currentActiveTab: string;
  onTabSwitch: (tab: string) => void;
  isTableLoading: boolean;
}

const OrderTableComponent = ({
  orders,
  onAcceptOrder,
  onRejectOrder,
  onProcessOrder,
  tableTabs,
  currentActiveTab,
  onTabSwitch,
  isTableLoading,
}: CustomOrderTableProps) => {
  const tableLabels: TableLabels = {
    emptyStateMessage: 'No orders available',
    actions: {headerAction: 'New Order'},
    headerRow: {
      createdAt: 'Date Created',
      title: 'Order Title',
      orderName: 'Order Number',
    },
    rowActions: {
      accepted: 'Accept',
      canceled: 'Reject',
      processing: 'Process',
    },
  };

  return (
    <ListOrderTable
      listOrderTableTitle="Orders Dashboard"
      labels={tableLabels}
      isLoading={isTableLoading}
      onNavigate={path => console.log('Navigate:', path)}
      onOrderAccepted={onAcceptOrder}
      onOrderRejected={onRejectOrder}
      onOrderProcessing={onProcessOrder}
      data={orders}
      rowHref={row => `/orders/${row.id}`}
      updateRowHref={row => `/orders/${row.id}/edit`}
      tabs={tableTabs}
      currentTab={currentActiveTab}
      onTabChange={onTabSwitch}
      createHref="/orders/create">
      <ListOrderTable.Header />
      <ListOrderTable.Content />
      <ListOrderTable.Table />
    </ListOrderTable>
  );
};

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