kit

Pane divider

Built revision v17.10.0

Phoenix
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Shell, List

Pane divider

Invoices awaiting payment
InvoiceHirerNoteAmount due
INV-001
Priya Shah
Reminder sent. She asked to pay once her last booking of the term has taken place.
£84.00
INV-002
Oakmere Primary School
Paid by bank transfer on Friday, not yet arrived.
£126.00

The divider stands at the Side panel's edge on Shell with a preview beside the List and Shell with work beside the List.

Source
<div class="specimen-table-contained">
  <Kit.Phoenix.Table.rows_table>
    <:caption>Invoices awaiting payment</:caption>
    <:subject_heading label="Invoice" />
    <:column_headings label="Hirer" id="pane-divider-hirer" width_event="column_width">Hirer</:column_headings>
    <:column_headings label="Note">Note</:column_headings>
    <:column_headings label="Amount due" kind="amount">Amount due</:column_headings>
    <:row facts={[
      %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content("Priya Shah")},
      %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content("Reminder sent. She asked to pay once her last booking of the term has taken place.")},
      %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00")))])}
    ]}><a href="#role-pane-divider"><code>INV-001</code></a></:row>
    <:row facts={[
      %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content("Oakmere Primary School")},
      %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content("Paid by bank transfer on Friday, not yet arrived.")},
      %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "126.00")))])}
    ]}><a href="#role-pane-divider"><code>INV-002</code></a></:row>
  </Kit.Phoenix.Table.rows_table>
</div>
<p>The divider stands at the Side panel's edge on <a href="../shell/desk/side-panel/">Shell with a preview beside the List</a> and <a href="../shell/desk/side-panel/work/">Shell with work beside the List</a>.</p>