Single row click for table and open details

#1

Hello all, I am struggling with Axure RP row click option. I am new to AXURE.
I am trying to create row click option for table component. Where once user will click one row details will open and push down the other rows. I could create till row clicking. Details are overlapping. How do I push other rows down?RowClickTable.rp (66.8 KB)

#2

You’re not going to be able to do this with a Table widget. What you’ve set up makes sense, but Table widgets just don’t support your needs. They are one widget–although you can refer to individual table cells by name, they are still within one widget, so rows don’t respond individually to “push/pull widgets”. They also have limited dynamic interactions, so will be very difficult to impossible to implement other functionality you have stubbed, like sorting, filtering, pagination, etc.

You can create your “table” with basic rectangle widgets, grouping rows together (or using a dynamic panel instead of a group.) I’ve demonstrated this in the updated file below.
RowClickTable.rp (117.6 KB)

  • I created this by dragging in a “Box 1” rectangle widget
  • Used the format painter to copy&paste the style from your table cell
  • Duplicated this widget for each column and sized the width to match your table cells
  • Copy&pasted content from your table to the widgets
  • I then duplicated the hidden details dynamic panel and placed it below this new set of widgets
  • I set this new dynamic panel to be shown by default (this helps with placing all rows to ensure the push/pull works properly)
  • I added a Loaded event to this details panel to hide itself, pulling widgets below it. (I’ve found this method makes it easier and more reliable to set up your hide/show with the push/pull option, versus trying to place things in front or behind hidden widgets.)
  • I selected all these new widgets, including the details panel and grouped them, naming the group “row1”
  • I added a Click or Tap event to Show/Hide toggle visibility of Details1 (the dynamic panel inside this group) with a transition animation and push/pull widgets option.
  • I then duplicated this group several times, naming the groups “row2” and “row3”
  • I added a header and footer to kind of finish out the demonstration table

A better way to implement this table is with a Repeater widget. I won’t go into all the details of how I made this, but you can inspect it to see how it works. Repeaters are fairly advanced Axure stuff, but very powerful and extensible. I added functionality to sort the ID column and filter the Client Name column. Repeaters also support pagination, adding/removing rows, etc. Here is the Axure documentation for Repeaters:

https://docs.axure.com/axure-rp/reference/repeaters/

#3

Hi Thank you. I am using this for prototype but not able to salve this for nested table inside table. Appreciate your help.

#4

so far I could do with this file. But could not file details linking and I am trying to click on row and it isnot getting selected after after click.

#5

I worked on it for for more features to show in prototype. While doing this I couldnt find details text. So again got stuck.

#6

Axure does not allow repeaters to be nested inside other repeaters. Do you have a specific example of what you are trying to achieve? There is probably a different way to solve it.

#7

Sorry, I don’t understand. Could you provide more information about what you are trying to do?

#8

What does this mean? What is “details text”?