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@0.0.8

---

📖 Usage

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

Basic Usage

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>
  );
}

Advanced Usage

function AdvancedOrderTable() {
  const [currentTab, setCurrentTab] = useState('pending');
  const [isLoading, setIsLoading] = useState(false);

  const orderData = [
    {
      id: '1',
      createdAt: '2024-01-15T10:30:00Z',
      orderName: '📦 ORD-2024-001',
      title: 'Premium Office Supplies Package',
      status: 'pending'
    },
    {
      id: '2',
      createdAt: '2024-01-14T14:20:00Z',
      orderName: '💻 ORD-2024-002',
      title: 'Software License Renewal Bundle',
      status: 'accepted'
    },
    {
      id: '3',
      createdAt: '2024-01-13T09:15:00Z',
      orderName: '🔧 ORD-2024-003',
      title: 'IT Equipment Maintenance Contract',
      status: 'processing'
    }
  ];

  const tabs = [
    { label: '⏳ Pending Orders', key: 'pending' },
    { label: '✅ Accepted Orders', key: 'accepted' },
    { label: '🚫 Canceled Orders', key: 'canceled' }
  ];

  const labels = {
    emptyStateMessage: 'No orders found in this category',
    actions: {
      headerAction: '✨ Create New Order'
    },
    headerRow: {
      createdAt: 'Order Date',
      title: 'Order Description',
      orderName: 'Order Reference'
    },
    rowActions: {
      accepted: '🎯 Accept Order',
      canceled: '❌ Cancel Order',
      processing: '⚡ Start Processing'
    }
  };

  return (
    <ListOrderTable
      listOrderTableTitle="🛒 Enterprise Order Dashboard"
      labels={labels}
      isLoading={isLoading}
      onNavigate={(path) => console.log('Navigate to:', path)}
      onOrderAccepted={(id, title) => console.log('Accepting order:', title)}
      onOrderRejected={(id, title) => console.log('Canceling order:', title)}
      onOrderProcessing={(id, title) => console.log('Processing order:', title)}
      data={orderData}
      rowHref={(row) => `#${row.id}`}
      updateRowHref={(row) => `#${row.id}/edit`}
      tabs={tabs}
      currentTab={currentTab}
      onTabChange={setCurrentTab}
      style={{
        backgroundColor: 'white',
        padding: '8px',
      }}
      createHref="#new">
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          // Enhanced header with gradient styling
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              style: {
                background: 'white',
                borderRadius: '20px',
                padding: '32px',
                color: 'white',
                width: 'calc(100% - 48px)',
                margin: '0 auto',
                marginTop: '12px',
                boxShadow: '0 15px 35px rgba(0,0,0,0.1)',
                border: '0.5px solid rgb(0, 0, 0)',
              }
            }
          },
          // Enhanced content with modern styling
          content: {
            ...defaultBlocks.content,
            props: {
              ...defaultBlocks.content.props,
              style: {
                background: 'white',
                borderRadius: '16px',
                padding: '24px',
                boxShadow: '0 10px 30px rgba(0,0,0,0.05)',
                width: 'calc(100% - 48px)',
                margin: '0 auto',
                marginTop: '24px',
                borderRadius: '16px',
                border: '0.5px solid rgb(0, 0, 0)',
              }
            }
          }
        },
        blockOrder: defaultBlockOrder
      })}
    </ListOrderTable>
      );
}

---

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
listOrderTableTitle	ReactNode	Required	Title for the order table section
labels	TableLabels	Required	Labels object for table headers, actions, and messages
isLoading	boolean	undefined	Whether the table is currently loading
onNavigate	(to: string) => void	Required	Callback function for navigation
onOrderAccepted	(id: string) => void	Required	Callback function when order is accepted
onOrderRejected	(id: string) => void	Required	Callback function when order is rejected
onOrderProcessing	(id: string) => void	Required	Callback function when order is marked as processing
data	ListOrderTableRowData[]	Required	Array of order data objects
rowHref	(row: ListOrderTableRowData) => string	Required	Function to generate row link URLs
updateRowHref	(row: ListOrderTableRowData) => string	Required	Function to generate update row link URLs
tabs	Tab[]	Required	Array of tab configuration objects
currentTab	string	undefined	Currently active tab identifier
onTabChange	(tab: string) => void	undefined	Callback function when tab is changed
createHref	string	Required	URL for creating new orders
pagination	{currentPage: number; onPageChange: (page: number) => void; totalPages: number}	undefined	Pagination configuration object
className	string	undefined	Additional CSS class name for styling the container
children	BlocksOverride	undefined	Function 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

Prop	Type	Default	Description
children	ReactNode	From context	Title content - overrides listOrderTableTitle from context
size	enum	"2XL"	Typography size for the title
type	enum	"heading"	Typography type
color	enum	"low-emphasis"	Color theme for the title
weight	enum	"bold"	Weight of the title
className	string	undefined	Additional CSS class name for styling

ListOrderTable.Action

Prop	Type	Default	Description
children	ReactNode	undefined	Custom content to override default action rendering
createHref	string	From context	URL for the create action button
labels	TableLabels	From context	Labels for action text
direction	enum	"row"	Flex direction for action buttons
alignItems	enum	"stretch"	Alignment of items in the container
gapSize	enum	"S"	Gap between items in the container
className	string	undefined	Additional CSS class name for styling

ListOrderTable.Header

Prop	Type	Default	Description
children	ReactNode	undefined	Custom content to override default header rendering
className	string	undefined	Additional CSS class name for styling

Note: This component inherits all HTML div element props.

ListOrderTable.Loader

Prop	Type	Default	Description
children	ReactNode	CircularProgressIndicator	Custom loading indicator content
className	string	undefined	Additional CSS class name for styling

Note: This component inherits all HTML div element props.

ListOrderTable.Content

Prop	Type	Default	Description
children	ReactNode	undefined	Custom content to override default content rendering
isLoading	boolean	From context	Loading state from context
className	string	undefined	Additional CSS class name for styling

Note: This component inherits all HTML div element props.

ListOrderTable.Tabs

Prop	Type	Default	Description
tabs	Tab[]	From context	Array of tab configuration objects
currentTab	string	From context	Currently active tab identifier
onTabChange	(tab: string) => void	From context	Tab change callback function
tabWidth	string	"stretch"	Width behavior for tabs
className	string	undefined	Additional CSS class name for styling

ListOrderTable.Table

Prop	Type	Default	Description
onOrderAccepted	(id: string) => void	From context	Callback function when order is accepted
onOrderRejected	(id: string) => void	From context	Callback function when order is rejected
onOrderProcessing	(id: string) => void	From context	Callback function when order is marked as processing
className	string	undefined	Additional CSS class name for styling
data	ListOrderTableRowData[]	From context	Array of table data
labels	TableLabels	Required	Labels object for table headers, actions, and messages
dropdownMenuItems	(cell: ListOrderTableRowData) => Array<DropDownMenuItems>	From context	Function to generate dropdown menu items
dropdownMenuState	{openedDropdownMenuId: string}	From context	Currently opened dropdown menu
setDropdownMenuState	({openedDropdownMenuId: string}) => void	From context	Callback function when the opened dropdown menu changes
emptyState	{icon?: IconType; message: string}	From context	Configuration for empty state
isLoading	boolean	From context	Loading state
onNavigate	(to: string) => void	From context	Navigation callback function
pagination	{currentPage: number; onPageChange: (page: number) => void; totalPages: number}	From context	Pagination configuration
rowHref	`(cell: ListOrderTableRowData) => string	undefined	null`

---

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