Documentation

Easy Tables documentation

Compatibility

Easy Tables is compatible with most browsers including IE6+.

Basic configuration

The basic configuration can be made following steps 'a' to 'e'.

a. Choose a CSV file from concrete5's File Manager.

b. Type the title of your table. The title will be displayed on top of the table. If you don't want a title, you can leave it empty. Optionally, you can change the style you want to apply to the title. By default it is "Heading 3", but you can choose one of the following:

Heading 1 to Heading 6
Strong
Emphasized
Table caption
Paragraph

c. Choose wich options you want to apply to your table from:

Allow sorting. Make column header clickable, to sort data. Default is off.
Show global searh. Display a search box to filter rows containing the entered text. The end user can enter multiple words (space-separated) and will match a row containing those words, even if not in the order that was specified (this allow matching across multiple columns). Default is off.
Show table info. Something like ' Showing 1 to 10 of 120 rows'. Default is off.
Show table footer. Shows a table footer like the table header. Default is off.
Show download link. Shows a button to download the original CSV file. Default is off.
Paginated. Don't show all data but only a reduced number of records and navigate through the data using a pagination interface (much like in Google search result). Default is off.
Page length. Number of rows to show at once when pagination is enabled.
Allow changing pagination size. Display a selector with different options to select the number of rows to show at once (sizes are 5, 10, 25, 50, 100 and "All"). Default is off.
Numbered or Prev/Next navigation. Select between a navigation style with only 'Previous' and 'Next' buttons and another, more complex one, that also adds page numbers to easily jump between pages. Default is numbered.

d. Choose a base color for your table. This setting allows you to match the color scheme of your site for a well-looking, seamless result. Default is a neutral grey color. You can also select between a couple of styles, the "Default", with rounded corners and mild gradients, and the "Flat" one, with square corners and plain colors. (Just in case you know how to write CSS and want to design your own style there is an "unstyled" option.)

e. Select language. You can choose among many availables languages, or leave it as 'Auto' to match concrete5's language setting. Default is 'Auto'.

That's all what takes to have a working table in your page. But there are still more options to tweak that will allow you to get the most!

CSV options

Depending on how you created your CSV file you may need to change some options to load the data properly. There are only two parameters available: delimiter character and delimiter character.

f. Select the character to be used as delimiter in your CSV file. By default it is the comma character (,) (that's why they are called comma-separated values, after all). If you export your CSV data from Excel, probably you will need to use a semicolon instead (;).

g. Choose the text enclosing character used in your CSV file. By default is a double quote mark (").

Formatters

Easy Tables has many availables formatters to enhance how your data is displayed. See the demo page for examples of each of them.

h. You can select any combination of the available formatters:

Email directions to links. When a cell content is detected as an e-mail direction, it is converted to a link, so that when clicked it will launch the user's mail composer application: ready to write to that e-mail direction with just one click!

Load images. When a cell content is detected as an image file path it is inserted into the table.

Load images as thumbnails (100px/75px/50px/32/px). When a cell content is detected as an image file path it is inserted into the table but resized so that its largest side won't exceed the desired measure (in IE6 only height is restricted). When the thumbnail is clicked the image is shown full-sized in a lightbox.

Take into account that despite the fact it is shown in small size, actually the large image is downloaded during the page loading. That makes this feature practical for a moderate number of not-too-large images, but not for many or very large images. This is specially relevant if your page is aimed to mobile devices, wich may count with limited bandwidth. To support those cases you can use the wiki formatting feature for more versatile (not automatic, though) thumbnails (see below) that don't happen to have such limitations.

Youtube link to thumbnail. When a cell content is detected to be a link to a Youtube video it is inserted into the table as a thumbnail that links to the Youtube's video page.

URL to link. When a cell content is detected to be an URL it is inserted into the table as a clickable link. You can choose between opening the link in the same or another browser window.

States (yes/no/?). When this option is enabled you can create visually enhanced tri-state tables where the states yes, no and unknown are replaced by pictures.

Progress bar (x% or x/y). Cells containing percentages (e.g.: 25%) or fractions (e.g: 7/10) are shown as progress bars.

Wiki-like syntax. This option enables an easy-to-use, unobtrusive formatting syntax, similar to that used in many wiki software. The followiong formatting options are availables:

Break lines (Syntax: \\ ) Write text in bold (Syntax: **bold**)
Write text in italics (Syntax: ''italics'') (those are two single quotes ' not double quotes " )
Insert inlined images in your text (Syntax: {{URL to image}} or {{URL to image|Alt text}} )
Insert links in your text (Syntax: [[link]] or [[link|text to display]] ). It is able to diferentiate between relative internal links and external links (absolute URL); internal links open in the same page, and the external ones in a new page. Links to images are created so that, when clicked, the image is shown full-sized in a lightbox-like manner. This way, combined with inlined images you can create more versatile thumbnails than with the automatic thumbnail feature.
Escape formatting character The character ~ can be used to escape a formatting character (just in case you want to display text wich usually would get formatted, but without formatting it.

Even though you can choose any combination of formatters, take into acount that some of them are mutually exclusive, for instance if you choose to load images as 100px thumbnails it makes no sense to select any other size of thumbnail as well, since only the first one will take effect. The same applies to load images/load images as thumbnails (any size) and URL to link same window/new window.

Additional

This section includes some options that modifies the behaviour of the table, but that are not considered "basic" in the sense that they are needed only in some special cases. Visit our demos if you want to see this features in action.

Allow changing column visibility. Adds a menu in the top right corner to allow your visitors to show/hide columns. Default is off.
Add column filters. Adds search boxes at every column, in the footer. The term entered will filter the rows to show only those containing that text in that column. Default is off.
Group rows using first column. Groups the rows by the value of he first column. If sorting is enabled the rows will be sorted prior to grouping, otherwise the rows will be grouped in the order they appear in the CSV (a group header will be added with every change in the value). Default is off.

Use only the first letter. The grouping will take into consideration only the first letter, instead of the whole cell value. Default is off.
Collapsible groups. The groups are clickable and can be collapsed/expanded. Default is off.
Two levels (use the second column too). A second level of aggregation is added using the values of the second column. The previous settings do not affect this second level of grouping. Default is off.

Advanced configuration

This is the last set of options. You can usually leave it as is.

i. Select wether you want to allow HTML code inside the CSV or not with the option Don't allow insertion of HTML code in the CSV. When checked any HTML code in the CSV is not interpreted, but shown as plain text. When disabled you can write HTML in the CSV (for instance, you can put a text between <strong> and </strong> to make it bold). Default is off (HTML allowed). Some particular workflows may require it as a security measure, but in most cases there is no need to enable this feature.

j. Automatic width lets you disable automatic column width calculation. This can be disabled as an optimisation (it takes some time to calculate the widths) but unless you have a large number of rows or columns you can leave it on. Default is on. When 'Automatic width' is disabled all the columns are given the same width regardless of their content.

k. Finally there is an option (File encoding) to select the code page of the CSV file. Don't change it unless you see gibberish in your tables and you know what you are doing. Even in that case, the best and recommended option would be using UTF8 for your files. File encoding conversion relies on iconv php module. The actual list of supported encodings is version-dependant; the list is based on GNU libiconv's list of supported encodings.

Working with non-English characters

If you want to use Easy Tables to display non-English characters you will have to take into account the CSV file encoding that was used (see the Advanced configuration section).

In those cases we recommend using LibreOffice (website) to create the CSV files since it has a very configurable exporter that helps to avoid most problems.

This explains the recommended way of exporting your CSV file using LibreOffice's spreadsheet: Calc.

To open the exporter options you must check "Edit filter settings" in the "Save" dialog.

The exporter let you choose, among other parameters, the file encoding (any should work, but if possible, use UTF-8 files), and the delimiter and separator (defaults are fine).

Also, there is an option to always enclose the text fields in quotes, even if not strictly necessary. If you are working with non-English characters we recommend that you check that option, that will solve some occasional problems.