GitLab

The objective is to allow browsing data like Windows explorer. (Just like FormHandler table allowed exploring data like Excel.)

Extend $().formhandler() with a table: 'grid' option. This uses a separate template that renders items in a grid instead of a table. (Implementation: use a <!-- var template_table_grid -->)

<div class="formhandler-grid">
  <div <%= classes %>>
    <%= ... same as formhandler table cell ... %>
  </div>
  <div <%= classes %>>
    ...
  </div>
  <div <%= classes %>>
    ...
  </div>
</div>

By default, this displays an image, and below that, all columns and values as a simple list. (TODO: improve aesthetics.) Crude sample code:

<div><img class="img img-responsive" src="<%= ... || 'default.png' %>"></div>
<div><strong><%= col %></strong>: <%= value %></div>
<div><strong><%= col %></strong>: <%= value %></div>
...

default.png should be committed into this repo somewhere and copied into the dist/ directory by npm run build

Attributes:

• table: 'grid' specifies the style to be a grid
• classes: string / function(row) that has the classes to be added to each table row or grid cell. For table: 'grid', this defaults to formhandler-grid-cell d-inline-block p-3 box-shadow ...
• icon: string / function(row) that returns a URL or a fa fa-<font-awesome-class>. If the string begins with fa , it is treated as a FontAwesome icon
• rowTemplate: ... specifies an optional row template to be used for each data row. For table: true, this defaults to a FormHandler template called template_row_table. For table: grid it defaults to template_row_grid. By default, template_row_table has a <tr>....</tr> (see current template_table), while template_row_grid has a <div class="...">...</div>

Use case:

• Use FormHandler directory to create a Windows explorer grid view like structure that looks good