Customizing the Display of GridIron Data

GridIron offers a range of layout options to help you present your imported data in a format that’s visually appealing, easy to navigate, and tailored to your website’s design. Whether you need a searchable table, an elegant list, or a modern masonry grid, GridIron gives you the flexibility to choose the layout that best suits your content.

This article explains the different layout options available, how to add them, and where to find the relevant settings.

Layouts Overview

GridIron separates data sources from data presentation. Once your data (CSV, Excel, Google Sheets, etc.) is loaded into the GridIron stack, you must add a layout stack to define how that data should appear on the page.

Important: Without a layout stack added, nothing will be displayed. Always include a layout by clicking the blue + button in Edit Mode.

Available Layouts and Their Features

Below is a breakdown of each supported layout in GridIron 4:

1. Simple Table

• A lightweight HTML <table> output with optional borders, background, and sizing options.
• Includes a built-in search box for quick client-side filtering.
• Ideal for small-to-medium datasets when minimal styling is required.

Sidebar Settings:

• Enable/disable search
• Choose table border, background, color, and sizing options
• Optionally mark the header row in bold and change its color

2. Bootstrap Table

• Similar to Simple Table, but styled using the Bootstrap CSS framework.
• Offers improved spacing, colors, and responsiveness with no additional setup.
• Ideal for users already using Bootstrap themes or looking for consistent styling.

Sidebar Settings:

• Select table style (light, dark, striped, hover)
• Toggle search box visibility
• Integrates nicely with other Bootstrap-based content

3. DataTables

• A full-featured, interactive table powered by the DataTables JavaScript library.

• Ideal for large datasets or when providing users with the ability to search and sort content directly on the page.

• Includes advanced features like:

  • Pagination
  • Column sorting
  • Multi-field search
  • Responsive collapse
  • Export buttons (CSV, Excel, PDF, Print)

Sidebar Settings:

• Choose which features to enable
• Control paging, sorting, and search behaviour
• Toggle table responsiveness and column visibility
• Show header, footer, info panel

4. Simple DataTables

• A simplified version of the full DataTables layout.
• Offers the most commonly used features with fewer settings for quicker setup.
• Recommended for users who want good functionality without the complexity of the full DataTables options.

Sidebar Settings:

• Basic controls for search, paging, sorting
• Customize most aspects of table borders, backgrounds, and colors

5. CSS Columns

• Displays each row or item inside a “box”, arranged using CSS multi-column layout.
• Similar to how newspaper columns wrap content.
• Especially effective for short, visually repetitive data like names, short bios, or product snippets.
• A good alternative when tables feel too rigid or text-heavy.

Sidebar Settings:

• Number of columns on different screen widths
• Box padding and borders
• Font size and color

6. Isotope (Masonry Grid)

• Uses the Isotope layout engine to present each row as a “card” in a responsive, masonry-style grid.
• Boxes automatically reposition themselves to fill space optimally, creating an engaging, Pinterest-style layout.
• Perfect for portfolios, directory-style listings, or showcasing a visually rich dataset.

Sidebar Settings:

• Card width and spacing
• Filter tags (optional)
• Sort controls
• Mobile responsiveness options

7. Simple List

• Renders your data as a traditional HTML unordered<ul> or numbered <ol> list.
• Can display each cell as a list item, or group each row into one list item.
• Best used for small datasets or single-column lists like menus, staff names, or announcements.

Sidebar Settings:

• Choose grouping: row vs individual cell
• Bullet/number style options
• Font size, spacing, and layout tweaks

How to Add a Layout

1. In Edit Mode, locate your GridIron 4 stack on the page.
2. Click the blue + button inside the stack to add a child layout.
3. Choose from the available layout stacks in the pop-up menu.
4. Configure the layout’s settings in the right-hand sidebar.

Common Customisation Options

Each layout stack includes its own settings in the Stacks sidebar. Typical options include:

• Search and pagination options (where applicable)
• Styling controls like borders, background colours, text alignment
• Responsive breakpoints for grids and columns

All settings have informational tooltips on mouseover to guide you as to what each setting does.

Advanced Tip: Custom CSS & Classes

If you need finer design control, many layouts allow for:

• Custom CSS class names for wrapper elements
• Applying your own theme styles
• Overriding visual styles with your own custom CSS

These are optional, but useful for designers and developers looking to deeply integrate GridIron content into their site’s aesthetic. Use the web developer tools to view the selector names applied to the GridIron DOM.

Summary