Skip to content

Dynamic Tables

Dynamic Tables

Setup

  • Navigate to the desired view and edit
  • If Unformated List is not already selected do so now
  • Next within the Advanced section, under CSS class apply row-fluid
    • Note:Though this step is not required it is a fail-safe to insure that the view properly utilizes the width of the page
  • Now click Settings under Format
  • Under Row class apply span12 and apply the changes
  • After apply span classes to the desired view fields to create the appropriate table layout
  • Save the view
  •  
  • apply styling as needed

Note on applying span classes to desired fields

There a two ways to apply span classes to acheive the desired table layout:

Apply directly to the view fields

  • Click the field which will be edited
  • Under the Style Settings check the Customize field HTML check box
  • Then click the Create a CSS class and apply the desired span class
  • Repeat the above step for the other fields to acheive the desired layout.

Available span classes function within a range of span1 through span12. With span12 representing utilizing all the space provided.

EX: Simple two column table

Title (class="span6") Description (class="span6")

EX: Simple two column table with smaller first cell

image (class="span3") Description (class="span9")

Create a container for multiple fields

This is especially useful when creating tables that visually contain many fields.

  • Add a field by clicking the Add button
  • Search for Global: Custom text check the box and apply to the view
  • Within the Text box apply the desired fields you wish to use. A simple manner in order to do this is by using the Replacement Patterns drop down. This will show you all available fields in order to use
  • After this has been done use the following example and apply the block to the view
    • EX:
      Title

      [date]

      [body_text]

  • Apply the block and save the changes