Data Tables Particle Documentation

  • Tony
  • 3 October 2018
  • No comments
  • Docs
Build the table and place any content in the cells, rows and columns to add the schedule or the list to the layouts built with Gantry 5. See how Data Tables can be designed beautifully on Demo Page.

# Data Tables Package contents

Files Description
jldatatables.yaml Contains the Data Tables particle settings.
jldatatables.html.twig The Twig file to pull information, settings.
jquery.dataTables.min.css Contains the Data Tables CSS
jquery.dataTables.min.js /dataTables.uikit.min.js Contains the Data Tables JavaScript

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Data tables particle requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Data Tables particle (i.e: Home) -> Layout tab -> Drag and drop the Data Tables Particle from Particles panel (left corner) to the section you want to display Data Tables.

Settings

Settings Description
Table Header List Table Header items. You can add new items to the collection using the plus + icon
Table Rows List rows to appear in the table content. You can add new items to the collection using the plus + icon
Data Tables Settings Common settings for data tables
Style Select the table style.
Vertical Alignment Vertically center table cells.
Responsive Stack columns on small devices or enable overflow scroll for the container.
Search Title Customize the placeholder text for search.
Search Title Customize the placeholder text for search.
Remove Search Use this option if you wish to remove the search function
Previous Label Customize the Previous label for Pagination.
Next Label Customize the Next label for Pagination.
Show label Customize the Show label.
Entries Label Customize the entries label.
Highlight row Highlight the hovered row
Remove Padding Remove left and right table padding.
Size Define the padding between table rows.
Hide Entries Disable entries function
Hide Pagination Disable pagination
Disable Ordering Disable ordering for table
Hide Entries Result Hide entries result for data tables
CSS Classes CSS class name for the particle.

Table Header Click Items field to enable it, then you can add new table header to the collection using the plus + icon

Settings Description
Header Title Enter the header item title
Link Specify the header link.
Target Target browser window when item is clicked.
Tooltip Text Create a nice looking tooltip on hover header title.
Tooltip Position Choose one of these options to adjust the tooltip’s alignment.

Table Rows Click row field to enable it, then you can add new row and columns to the collection using the plus + icon

Click + icon to add new columns

Settings Description
Title Customize the title.
Link Specify the text link.
Target Target browser window when item is clicked.
Tooltip Text Create a nice looking tooltip on hover header title.
Tooltip Position Choose one of these options to adjust the tooltip’s alignment.
Predefined Title Color Select the text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.

Style Tab

Below is the screenshot that shows how to customize the color for Data Tables.

Settings Description
Head Style Settings Common settings for Head Style
Head Background Customize the head background color instead using default background color.
Head Text Color Customize the row content color instead using default color.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Row Style Common settings for Row Style
Row Background Customize the row background color instead using default background color.
Row Color Customize the row content color instead using default color.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Box Shadow Select the table’s box shadow size.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Video Overview

How to add data to data tables. Including header titles, columns, cells and customizing the color

Comments

Leave a Reply

You must be logged in to post a comment.

JoomLead Gantry5 Particles 2.2.10 released, new features, bug fixes and more Learn more
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now