Invoices

Here is the app's Invoices page, with a cached subset of data. To view the table full-width, and optionally make changes, use the

icon to pop out to the full XMLUI playground.

<App>
  <Invoices />
</App>

<App>
  <Invoices />
</App>

The Create Invoice button is disabled for this part of the demo.

Here is the Invoices component.

<Component name="Invoices">

  <HStack>
    <H1>Invoices</H1>
    <SpaceFiller/>
    <Button label="Create Invoice" onClick="navigate('/invoices/new')"/>
  </HStack>

  <Table data="/api/invoices">
    <Column bindTo="invoice_number"/>
    <Column bindTo="client"/>
    <Column bindTo="issue_date"/>
    <Column bindTo="due_date"/>
    <Column bindTo="paid_date"/>
    <Column bindTo="total">
      ${$item.total}
    </Column>
    <Column bindTo="status">
      <StatusBadge status="{$item.status}"/>
    </Column>
    <Column canSort="{false}" header="Details">
      <Icon name="doc-outline" onClick="detailsDialog.open($item)"/>
    </Column>
  </Table>

  <ModalDialog id="detailsDialog" maxWidth="50%">
    <InvoiceDetails details="{$param}"/>
  </ModalDialog>

</Component>

A ModalDialog

The id attribute of the ModalDialog maps to the onClick handler of the Details column. We'll see later how, when clicked, it loads the InvoiceDetails component into a ModalDialog.

When enabled, the CreateInvoice button uses the global function navigate to go to the page defined by the CreateInvoice component.

Two of the columns in the table, Status and Details, show how a Column can contain XMLUI markup that may include user-defined (StatusBadge) and/or built-in (Icon) components.