Hobo Cookbook

View Source

Rapid

<table>

<table> is extended in Rapid to provide a shorthand way to output a set of fields for a given collection. This is enabled using the field attribute (without the field attribute this is just the regular HTML <table> tag)

Parameters

  • thead
    • field-heading-row
      • #{scope.field_name}-heading
  • tbody
    • tr
      • #{scope.field_name.to_s.sub('?', '').gsub('.', '-')}-view
      • controls
        • edit-link
        • delete-button
  • tfoot

Usage

If the context is an array of blog posts…

<table fields="name, created_at, description"/>

This will output a header row containing “Name”, “Created At” and “Description” followed by a row for each record in the collection. By default, the <view/> tag is called for each field in the row. This can be altered with the field-tag attribute, e.g.

<table fields="name, created_at, description" field-tag="input"/>

This will use <input/> as the tag in each table cell instead of <view/>

Additional Notes

  • <table> provides parameters based on the names of the fields which can be used to further customise the output. For each field a heading parameter is provided, e.g. name-heading, created-at-heading, description-heading. These can be used to customise the headings:

      <table fields="name, created_at, description">
        <created-at-heading:>Creation Date</created-at-heading:>
      </table>
  • Similarly, “view” parameters are provided as an additional way to customise the table cells of the table body, e.g. name-view, created-at-view, description-view:

      <table fields="name, created_at, description">
        <created-at-view:><view format="%d %B %Y"/></created-at-view:>
      </table>
  • By adding an empty control parameter, the default control column is enable adding an edit link and delete button for each table row:

      <table fields="name, created_at, description">
        <controls:/>
      </table>

    The controls can be further customised using the “edit-link” and “delete-button” parameters:

      <table fields="name, created_at, description">
        <controls:/>
        <delete-button: label="Nuke Me"/>
      </table>

    or by providing completely new content for the control column:

      <table fields="name, created_at, description">
        <controls:>my controls!</controls:>
      </table>

Show Source

Comments

No Comments to display