Listings

It is recommendable to put a data-type attribute to all data tables.

<table class="zebra-striped align-middle" data-type="invoices">
<table class="zebra-striped align-middle" data-type="estimates">
<table class="zebra-striped align-middle" data-type="recurring-invoices">

Selectable listings

To make a selectable listing:

• Add a <th class="check"> with a <input type="checkbox" name="all" /> inside the <thead>'s <tr>.
• Add <td class="check"> with a <input type="checkbox" name="yourparam[]" value="{{ object.id }}" /> to each <tbody>'s <tr>.

When a row becomes selected it will have the CSS class selected. If the table has a data-type then its rows will be styled if selected.

<table class="zebra-striped align-middle" data-type="invoices">
  <thead>
    <tr>
      <th class="check">
        <input type="checkbox" name="all" />
      </th>
      ...
    </tr>
  </thead>
  <tbody>
    {% for invoice in table_rows %}
      <tr data-link="{{ path('invoice_show', { 'id': invoice.id }) }}">
        <td class="check">
          <input type="checkbox" name="id[]" value="{{ invoice.id }}" />
        </td>
        ...
      </tr>
    {% endfor %}
  </tbody>
</table>

Clickable rows

If you add a data-link attribute to a <tbody>'s <tr>, when clicking a <td> from the row, the browser location will be changed to the value of that attribute. It will perform as a link. <td.no-click>, <td.check> and <td.payments> do not follow this behavior.

<tr data-link="{{ path('invoice_show', { 'id': invoice.id }) }}">

Thoughts on Infinite Scrolling

Considering the use of this script from Kyle Neath or this one from I Make Web Things.

• The actions bar will be fixed to the right of the listing, to be always available to the user.

• Results could be added inside additional <tbody> nodes in groups of N rows, with an added first row containing a <th> with information about the results shown to make easier to the user to know where he is. I.E.: 10 to 20 - Go to top - Hide...

   <tbody>
     <tr class="info">
       <th colspan="6">Results from 10 to 20</th>
       <th><a href="#top">Back to top</a></th>
       <th><a href="#" rel="hide">Hide these results</a></th>
     </tr>
     <tr>
       <td></td>
       <td></td>
       ...
     </tr>
   </tbody>
  

• There should be a fixed button to let the user back to top.