Display Tables: CSV / Excel or Database / SQL¶

Display a database table or a general SQL-Query result¶

In this first Quickstart Guide we will choose a Database table and display a few columns of the selected table in the frontend.

Install cag_tables using the TYPO3 Extension Manager and Create a new page

Insert plugin (there are two plugins – one for displaying a CSV / Excel – table and one for displaying a SQL – Query result). In this Quickstart Guide we will query the Database – so we will choose the first plugin “Display Database Table”

Click on the Tab Plugin and have a look at the options:

Choose the table be_users from the dropdown box “Database Table”. The dropdown box lists all tables in your TYPO3 database.

Once you have done that the form will reload . Please click on the tab “ **Plugin** ” again to return to the form we are just configuring.

Choose the table columns you want to display by clicking on them in the list of “Items”.

Optional: You can choose table columns you wish to see in your detail view (detail view is shown when user clicks on a table row). Detail view is optional. If you don't select any column, the link to detail view will not be displayed.

Click the button “Autocreate configuration”. The Extension will now write an SQL-Statement according to your selection and it will create a standard configuration for you on a basis of your selected columns. You can adapt the autocreated configuration as you like. It is listed in the textfield below called “Table display configuration”.

Press “Save” and look at the result in the Frontend. That's it – you are up and running. Adapt the “Table display configuration” to your cause. The configuration includes a list of all commands and options and examples at the bottom as comments. As you see comments in the configuration start with a “#”.

Display a CSV / Excel – File as a table¶

In this second Quickstart Guide we will choose a CSV-File and display a few columns of the selected file in the frontend.

Install cag_tables using the TYPO3 Extension Manager and Create a new page

Insert plugin (there are two plugins – one for displaying a CSV / Excel – table and one for displaying a SQL – Query result). In this Quickstart Guide we will display a CSV-File – so we will choose the first plugin “Display CSV Table”

Click on the Tab Plugin and have a look at the options:

We will be using the included example CSV file. So for now don't change the “CSV- / Excel- File”

Just press the “Save” button on top of the page.

The form will reload. If you have chosen the right data delimiter according to your CSV-File you will now see all column names in the csv files. The column names must be in the first line of the CSV-File.The delimiter in the included example CSV-File is “;”.

Choose the columns you want to display by clicking on them in the list of “Items”:

Optional: You can choose table columns you wish to see in your detail view (detail view is shown when user clicks on a table row). Detail view is optional. If you don't select any column, the link to detail view will not be displayed:

Click the button “Autocreate configuration”. The Extension will create a standard configuration for you on a basis of your selected columns. You can adapt the auto created configuration as you like. It is listed in the textfield below called “Table display configuration”.

Press “Save” and look at the result in the Frontend. That's it – you are up and running. Adapt the “Table display configuration” to your cause. The configuration includes a list of all commands and options and examples at the bottom as comments. As you see comments in the configuration start with a “#”.

Configuration options and Commands in the “Table display configuration”:¶

Notice: In addition to this manual, all commands are listed as comments at the bottom of any auto generated configuration in the “Table display configuration”. You thereby have a reference inside the plugin.

There is **no TypoScript configuration** necessary. Configuration is done in the Flexform in the field **“Table display configuration”** inside the plugin. All options are listed in the Reference below:

Table / Searchresult view:¶

All HTML-Code for the table / searchresult view is located in between “<!-- ###SEARCHRESULT### begin -->” and <!-- ###SEARCHRESULT### end -->

• Please note that building the table it is a highly automated process. Only change HTML if you know what you are doing.
• You may change or remove the default inline CSS styles and adapt it to your design

Detail View (optional):¶

The detail view of a record is shown when clicking on a table row. You must explicitly configure the detail view. The detail view uses the following HTML-Subpart from “<!-- ###DETAIL_VIEW### begin -->” to “<!-- ###DETAIL_VIEW### end -->”.

Please note that the generation of the detail view automated process. Only change HTML if you know what you are doing.

You may change or remove the default inline CSS styles and adapt it to your design

The detail view HTML-snipplet is shwon below. There are two ways of displaying the selected data.

1. Generically display all selected data (default)

2. Explicitly display fields by setting markers in the template. The marker names must be exactly the same as the selected fields in the SQL-statement. Example if you “select title from pages” you can use the marker ###TITLE### in the detail view. Furthermore you can use a subpart called “###IFEXISTS_{MYFIELDNAME}###”. Data:underline:inside the subpart is only displayed if the data is not empty. This can be useful if you don't want to display parts of the HTML if the selected data / field is empty. See example below.

<!-- ###DETAIL_VIEW### begin -->

<style type="text/css">

div.cagtables_details {

border: 1px dotted;

}

div.even0 {

/** background: #e0e0e0; **/

border-top: 1px dotted;

}

div.even1 {

/** background: #ffffff; **/

border-top: 1px dotted;

}

div.highlight {

background: #ffffa0;

border-top: 1px dotted;

}

</style>

<!-- Example for displaying some fields explicitly

###IFEXISTS_TITLE###<h1>Titel: ###TITLE###</h1>###IFEXISTS_TITLE###

###IFEXISTS_UID###<h1>UID: ###UID###</h1>###IFEXISTS_UID###

###IFEXISTS_SUBTITLE###<h1>SUbtitle: ###SUBTITLE###</h1>###IFEXISTS_SUBTITLE###

-->

<!-- Display all fields generically (remove if you are displaying fields explicitly as in example above) -->

<div class="cagtables_details">

###ROWS###

<div class="cagtables_detail_row even###ROW_EVEN###" onMouseOver="this.className='cagtables_detail_row highlight'" onMouseOut="this.className='cagtables_detail_row even###ROW_EVEN###'">

<h3>###LABEL###</h3>

<p>###COLUMN_CONTENT###</p>

</div>

###ROWS###

</div>

<div class="cagtables_details_backlink">

<p><br /><a href="javascript:history.back()">&lt;&lt; Back</a></p>

</div>

<!-- ###DETAIL_VIEW### end -->