Permalink
Browse files

searchable-sortable-table

## Improve the project page with a searchable, sortable table

The project page is currently workable, but we can easily improve it a lot. Rapid provides a tag `<table-plus>` which renders a table with support for sorting by clicking on the headings, and a built-in search bar for filtering the rows displayed. Searching and sorting are done server-side so we need to modify the controller as well as the view for this enhancement.

As with the user's show-page, to get started put a simple call to `<show-page/>` in `app/views/projects/show.dryml`

To see what this page is doing, take a look at `<def tag="show-page" for="Project">` in `pages.dryml` (in `app/views/taglibs/auto/rapid`). Notice this tag:

    <collection:stories param/>
{: .dryml}


That's the part we want to replace with the table. Note that when a `param` attribute doesn't give a name, the name defaults to the same name as the tag. Here's how we would replace that `<collection>` with a simple list of links:

	<show-page>
	  <collection: replace>
	    <div>
	      <repeat:stories join=", "><a/></repeat>
	    </div>
	  </collection:>
	</show-page>
{: .dryml}

You should now see that in place of the story cards, we now get a simple comma-separated list of links to the stories. Not what we want of course, but it illustrates the concept of replacing a parameter.

Here's how we get the table-plus:

SHOW_PATCH

The `fields` attribute to `<table-plus>` lets you specify a list of fields that will become the columns in the table. We could have said `fields="title, status"` which would have given us the same content in the table, but by saying `this`, the first column contains links to the stories, rather than just the title as text.
  • Loading branch information...
bryanlarsen authored and iox committed Jun 3, 2013
1 parent ebb5a26 commit 11c68ad19dceae1c842ef3cb37067530eba7cce5
Showing with 7 additions and 0 deletions.
  1. +7 −0 app/views/projects/show.dryml
@@ -0,0 +1,7 @@
<show-page>
<collection: replace>
<table-plus:stories fields="this, status">
<empty-message:>No stories match your criteria</empty-message:>
</table-plus>
</collection:>
</show-page>

0 comments on commit 11c68ad

Please sign in to comment.