Can this be done in Axure? (complex tables)

I want to create a table with 20+ columns. Since this will cause the table to scroll horizontally, I want to be able to filter (add/remove) columns.

I also want it styled in material with pagination.
(See attached).

I would like to know if this is possible in Axure before I start this.

Yes, this can be done. You’ll want to use a repeater widget to do this. You can style the contents of the repeater just like any widget, and you can style the repeater itself with vertical or horizontal layouts, alternating backgrounds (“zebra striping”), pagination, and cell spacing. There are a set of repeater actions which allow you to update the contents, add or remove rows, and filter rows. In your case, you’ll probably want a horizontal layout, which will make the repeater rows appear as columns so that you can filter the table columns.

You can learn how to use repeater widgets on this reference page (as well as searching this forum):
https://www.axure.com/support/reference/repeater-widgets

If you get stuck along the way, reply to this thread (or start new one) with specific questions, attach your .rp file and forum users will be able to help.

Thanks for the reply.

I am able to create it (see attached), but I am not able to do the interaction I want, which is:

  1. add/remove column from the checkboxes on the left
  2. make the pagination to work (at least first 2 pages)

I am looking for examples online, and I can’t find any.

Would you happen to have an example? table interactive.rp (75.2 KB)

What you created was with a Table widget and not a Repeater widget. There is no way in Axure to control Table widgets like you need. But, Repeater widgets can be used to create flexible and dynamic tables.

Here is an updated .rp file. See the repeater scrolling page:
table interactive.rp (270.4 KB)

I recreated your table as a repeater. I styled the default box widget in the repeater to match your table, then just duplicated it for each of your columns. In the OnItemLoad event, each “column cell” is assigned text based on the repeater datasheet. Very basic repeater setup. I then styled the whole repeater widget, setting it to Item Background: Alternating (and then realizing I had to set all the box widgets in the repeater to no fill so that the background shows up!) I also assigned Pagination: Multiple Pages, 10 Items per page. Oh yes, I also added a column to show the row number, which just makes it easier to test and demonstrate the pagination features.

Repeaters can be filtered to hide/show content but only for rows, not columns. To implement the column “add/remove” via checkboxes. I hide the corresponding “column widget” in the header and repeater when a checkbox is unselected, and show it when the checkbox is selected. I included the “push/pull widgets to the right” option so there aren’t gaps when a column is hidden.

The pagination controls work like this:

  • I created a droplist with several choices for “Rows per page”. When that droplist value changes, it updates the repeater with the “Set Items per Page” action (and for good measure, updates the “page details” text (“x - y of n”) .) To account for the change in height of the repeater, I change the height of the dynamic panel (containing the repeater) to the height of the repeater plus the horizontal scrollbar and move the “pagination” group to the bottom of that dynamic panel.

  • I rotated your caret buttons so they reflect the up/down nature of moving through the table pages.

  • The “page down” button basically sets the current page of the repeater to “Next” and the “page up” button sets it to “Previous”.

  • There is some complexity in updating the “page details” text, especially for the last page (but is fairly straightforward logic.) The numbers are dynamically calculated based on the repeater’s current page index and number of items per page.

One surprise I encountered is that changing the repeater page seems to forget which columns are hidden. To fix this I put in a hack of sorts to “Move checkbox (1-15) by (0,0)” --This means the checkboxes are not actually moved anywhere, but it triggers each of their OnMove events. This in turn tests if the checkbox is unselected (meaning that row is hidden) and if so fires its own “OnUnselected” event and hides the appropriate widget in the repeater (again.) It works, but it does slow things down a bit.

Yes this is awesome. Been cracking my brain and trying to figure out my solution, but yours is just perfect. Thanks, you’re the true master! :slight_smile:

The style is my only issue, because its not completely material, for example the pagination dropdown is not the same. I’m assuming this can be styled, but I’ll see if I can change it.

The droplist in my example is not stylable. In general any of the Axure widgets in the HTML group use web-standard HTML forms and cannot be styled. You can build your own droplist and style it exactly as you need. Axure has a tutorial for this:
https://www.axure.com/support/training/custom-droplist-tutorial

Got that. Thanks for the advice!!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.