Customer Balances

type CustomerBalance = {
  customerCode: string;
  customer: string;
  outstanding: number;
  overdue: number;
  creditLimit: number;
  agingBucket: string;
};

<DataGrid
  data={loadedCustomerBalances}
  columns={balanceColumns}
  rowKey="customerCode"
  pagination={{
    mode: 'manual',
    page: 1,
    pageSize: loadedCustomerBalances.length,
    totalItems,
    hasMore,
    loading,
    showPageControls: false,
    showPageSize: false,
    onPageChange: () => undefined,
    onLoadMore: loadNextCustomerBalanceChunk,
  }}
/>;

// For backend-driven customer ledgers, keep page controls visible:
<DataGrid
  data={customerBalancePage}
  columns={balanceColumns}
  rowKey="customerCode"
  pagination={{
    mode: 'manual',
    page,
    pageSize,
    totalItems,
    loading,
    onPageChange: fetchCustomerBalancePage,
    onPageSizeChange: setPageSize,
  }}
/>;