© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

SCROLLABLE TABLE

Create a scrollable table with fixed column headers.

STEP 1: SETUP

In the training document, open the page named "Scrollable Table". On the canvas are a table widget and three rectangle widgets that will serve as the fixed column headers for the table.


In the Outline pane, right-click the table widget and select "Convert to Dynamic Panel" in the context menu. Then, on the canvas, drag the bottom edge of the newly created dynamic panel widget up until only the first four items in the contained table are visible.

STEP 3: PREVIEW

Preview the page and scroll the dynamic panel up and down in the web browser to view the other rows of the table.

MORE RESOURCES

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

 

STEP 2: ADD SCROLLBARS TO DYNAMIC PANEL

To make the dynamic panel scrollable, we'll need to enable scrollbars on it.


Select the dynamic panel widget on the canvas or in the Outline pane. In the Properties tab of the Inspector, scroll down to the "Scrollbars" dropdown menu. In the dropdown, select "Vertical as Needed". Alternatively, you can right-click the dynamic panel and select "Scrollbars > Show Vertical Scrollbar as Needed".

Product

Category

Price

Apples

Produce

1.00

Broccoli

Produce

1.29

Cheese

Dairy

3.99

Cherries

Produce

5.99

Grapes

Produce

4.99

Ice Cream

Dairy

2.50

Milk

Dairy

3.49

Pears

Produce

1.25

Pho

Produce

6.50

Pineapple

Produce

2.99

TRY IT!