Displaying Loops in Table format with search feature

Loops & Logic
1

Are there any examples of how we can display the loop results in table form and have search capability?

I have created a table output with HTML and have the styling looking good, but want to be able to have pagination in place, as well as search that isn’t restricted to the current page only.

2

Hi Chris!
This is an as yet undocumented feature and is potentially prone to change as we finalize it so I don’t recommend you use it on live sites just yet, but you can actually set up a sortable, filterable table with pagination like so:

<Table per_page=3 sort=title sort_order=desc>

  <Filter>
    <div>
      <input type="text"  action="search"  columns="user,title"   placeholder="Search"  >
    </div>
  </Filter>

  <Head>
    <Col name=entry_id sort_type=string>ID</Col>
    <Col name=title sort_type=string>Title</Col>
    <Col name=user sort_type=string>Author</Col>
    <Col name=entry_date sort_type=string>Date</Col>
  </Head>

  <RowLoop type=post>
    <Col>
      <Field id />
    </Col>
    <Col>
      <Field title />
    </Col>
    <Col>
      <Loop type="user" id="{Field author_id}">
        <Field full_name /><br/>
      </Loop>
    </Col>
    <Col>
      <Field publish_date />
    </Col>
  </RowLoop>

  <Paginate>
    Page <Field current /> of <Field total />
  </Paginate>

  <Empty>
    <p>Empty</p>
  </Empty>

</Table>

You can see it in action in this demo

1 Like
3

That’s perfect thank you - we will test this out

1 Like
4

Followup question if I may:

using RowLoop how can I filter further by custom field value.

For example, the following is placed on a post (posttypeA), I want it to only show results where the current post ID matches <Field customfield2>

<RowLoop type=posttypeB>
    <Col>
      <a href="{Field url}"><Field cusotmfield1 /></a>
    </Col>
    <Col>
      <Field cusotmfield2 />
    </Col>   
   </RowLoop>
5

I imagine regular post loop attributes would work, but I haven’t tested to be sure.
If that’s the case I would do this:

<RowLoop type=posttypeB custom_field=customfield2 custom_field_value="{Field id}">
  <Col>
    <a href="{Field url}"><Field customfield1 /></a>
  </Col>
  <Col>
    <Field customfield2 />
  </Col>   
</RowLoop>
2 Likes
6

This worked - thank you

Does it support multiple filters, and if so how would I do that?

1 Like
7

Also interested to know this one.