Advanced usage

The tech-savvy user may take advantage of some javascript objects exposed by Easy Tables and squeeze the addon beyond the possibilities given through the UI. You will need some javascript knowledge and be able to build regular expressions, otherwise this guide is not for you.

Beware! The following examples use the HTML block to insert scripts and styles in the page. A typo in the HTML block can cause errors in the page and prevent you from editing it in concrete5. This is not for the faint of heart! Do it under your own responsibility.

First example: a simple star-rating system

Let's add to Easy tables the ability to display a simple star-rating level. In the CSV we have a field containing a bunch of asterisks that we want to convert into stars. For example: we want *** to be displayed as star.pngstar.pngstar.png

All we need is to add an HTML block right before the Easy Tables block and insert the following snippet of code:

<script>
   var bb_et_formatters_page = bb_et_formatters_page || [];
   bb_et_formatters_page.push(
      {rex: /(\*)/g, 
      display: '<img src="path/to/the/image/star.png">'}
   );
</script>
<style>
   #tabdat374 td {white-space:nowrap;}
</style>

 

What this code does is to add a formatter to the table's list of formatters (in fact, it will affect to any table in the page). The formatter consist in a javascrip object holding a regular expression and a replacement string. Add as many of thenm as you need to achieve your goal! Once the data is loaded and after the default formatters applied to this table have run this formatter will:

  • check if the regular expression finds a match for every cell in the table; in this case it searches for asterisks (*)
  • replace each match with the replacement string; in ths case each asterisk will be replaced by an HTML tag to display an image of a star star.png

The CSS rule is there to prevent the images from wrapping into two lines. It could have been taken into account with one more regular expression and some of additional markup, but we wanted to keep things simple enough, as it is just an example.

The result is shown below this paragraphs. As this executes after the default formatters, would you enable the wiki syntax formatter on the same table, you'll find unwanted behaviour, since a 5-star rating (*****) will be converted by the wiky sintax into a bold asterisk (*). Take that into account. If you need both formatters you will need to use another character for the rating system (# or even an UTF character like ★), or a combination of characters (something like *-*-* or * * *), or, if you feel brave enough, use a more complex set of regular expressions (you might, for instance, detect a cell containing single bold asterisk and revert it to a ***** string).

All the default formatters in Easy Tables are built that way.

Graphic novels

TitleRatingAuthor/s
Blankets*****Craig Thompson
Maus*****Art Spiegelman
Hard Boiled**Frank Miller and Geof Darrow
The Killing Joke*Alan Moore and Brian Bolland
Sin City: The Hard Goodbye****Frank Miller
Watchmen*****Alan Moore and Dave Gibbons
300***Frank Miller
Marvels****Kurt Busiek and Alex Ross
Three Shadows****Cyril Pedrosa
I Killed Adolf Hitler**Jason
Return to the Sea****Satoshi Kon
The Long Halloween****Jeph Loeb and Tim Sale
Bone*Jeff Smith
Blacksad****Juanjo Guarnido and Juan Diaz Canales
Calvin & Hobbes*****Bill Watterson
Coraline****P. Craig Russell and Neil Gaiman
Concrete****Paul Chadwick
Persepolis****Marjane Satrapi
Contract with God****Will Eisner
Rides*****Paco Roca
V for vendetta*****Alan Moore, David Lloyd and Tony Weare

Source: None, I made it up.


 

NOTE: I know, I know, even though the term graphic novel is used really loosely nowadays, Calvin and Hobbes still can barely fit into that category, however I had to include it in the list, it's just too good!


 

Second example: show me more! show me more!

This second example shows how to initialize your formatter to add behaviour to your customized markup. Nothing special, really, just good ol' javascript.

We are going to make a formatter that allows us to split the text at some point, adds a "button" labeled "More" and hides the rest of the text. The "More" button, when cliked, will show the hidden text. There will be also a "Less" button to do the opposite.

First, add an HTML block before the Easy Table block with the following code in it:

<script>
var bb_et_formatters_page = [];
bb_et_formatters_page.push(
  {rex: /\[\.\.\.\](.+)$/g,
   display: '<span class="bb_more">More</span><span class="bb_more_text">$1</span><span class="bb_less">Less</span>'}
);
</script>
<style>
.bb_more, .bb_less {
   cursor:pointer;
   border-radius: 3px;
   background-color: #999999;
   color: #FFFFFF;
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   line-height: 14px;
   padding: 2px 4px;
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.251);
   vertical-align: baseline;
   white-space: nowrap;
}
.bb_more_text, .bb_less {display: none;}
</style>

 

See how we have changed the first line from var bb_et_formatters_page = bb_et_formatters_page || [] from the first example to var bb_et_formatters_page = []; that way we "reset" bb_et_formatters_page, and the previous formatter (the star-rating one) won't execute on this second table.

The rest of the code is the actual formatter. A regular expression to match an square bracket-enclosed elipsis "[...]" (lots of escaping here) and whatever follows it, and the replacement string to get the markup required for this trick: an span tag for the "More" button, another for the text, and a third one for the "Less" button.

The styles defined here will initially hide the text past "[...]" and the "Less" button, and make the "buttons" look somewhat stylish (which accounts for most of the CSS).

We still need to add behaviour to all this. For that purpose we add the following code after the Easy Table block (as always, we use an HTML block). It is important that it is after the Easy Tables block, so that it executes after all the formatters (including ours) and that way we can be sure that all the markup is already in place.

<script>
$(function() {
   $("table.dataTable").on("click", ".bb_more", function() {
      $(this).hide().next().show().next().show();
   });
   $("table.dataTable").on("click", ".bb_less", function() {
      $(this).hide().prev().hide().prev().show();
   })
});
</script>

 

The code is pretty self-explainatory. Just read it and then spend a minute or two giving thanks for having jQuery with you.

And here it is:

Latin American writers

WriterFacts
Julio CortázarJulio Cortázar, born Jules Florencio Cortázar (August 26, 1914 – February 12, 1984), was an Argentine novelist, short story writer, and essayist.[...] Known as one of the founders of the Latin American Boom, Cortázar influenced an entire generation of Spanish-speaking readers and writers in the Americas and Europe. He has been called a "modern master of the short story. Cortázar wrote numerous short stories, collected in such volumes as Bestiario (1951), Final del juego (1956), and Las armas secretas (1959). Cortázar also published several novels, including Los premios (The Winners, 1960), Hopscotch (Rayuela, 1963), 62: A Model Kit (62 Modelo para Armar, 1968), and Libro de Manuel (A Manual for Manuel, 1973). Cortázar also published poetry, drama, and various works of non-fiction. He also translated Edgar Allan Poe's works.
Gabriel García MárquezGabriel José de la Concordia García Márquez (born March 6, 1927) is a Colombian novelist, short-story writer, screenwriter and journalist, known affectionately as Gabo throughout Latin America.[...] Considered one of the most significant authors of the 20th century, he was awarded the 1972 Neustadt International Prize for Literature and the 1982 Nobel Prize in Literature, and is the earliest remaining living recipient.1 He pursued a self-directed education that resulted in his leaving law school for a career in journalism. From early on, he showed no inhibitions in his criticism of Colombian and foreign politics. In 1958, he married Mercedes Barcha; they have two sons, Rodrigo and Gonzalo.
Jorge Luis BorgesJorge Francisco Isidoro Luis Borges (24 August 1899 – 14 June 1986), known as Jorge Luis Borges, was an Argentine short-story writer, essayist, poet and translator born in Buenos Aires.[...] His work embraces the "character of unreality in all literature". His most famous books, Ficciones (1944) and The Aleph (1949), are compilations of short stories interconnected by common themes such as dreams, labyrinths, libraries, mirrors, animals, fictional writers, philosophy, religion and God. His works have contributed to philosophical literature and also to both the fantasy and magical realism genres. The magical realism genre reacted against the realism/naturalism of the nineteenth century. In fact, critic Ángel Flores, the first to use the term, set the beginning of this movement with Borges's A Universal History of Infamy (1935). Scholars have also suggested that Borges's progressive blindness helped him to create innovative literary symbols through imagination. His late poems dialogue with such cultural figures as Spinoza, Camões, and Virgil.
Mario Vargas LlosaJorge Mario Pedro Vargas Llosa, 1st Marquis of Vargas Llosa (born March 28, 1936) is a Peruvian-Spanish writer, politician, journalist, essayist, and recipient of the 2010 Nobel Prize in Literature.[...] Born in Peru, Vargas Llosa is one of Latin America's most significant novelists and essayists, and one of the leading writers of his generation. Some critics consider him to have had a larger international impact and worldwide audience than any other writer of the Latin American Boom. Upon announcing the 2010 Nobel Prize in Literature, the Swedish Academy said it had been given to Vargas Llosa "for his cartography of structures of power and his trenchant images of the individual's resistance, revolt, and defeat".
Pablo NerudaPablo Neruda (July 12, 1904 – September 23, 1973) was the pen name and, later, legal name of the Chilean poet, diplomat and politician Neftali Ricardo Reyes Basoalto. He chose his pen name after Czech poet Jan Neruda.[...] In 1971 Neruda won the Nobel Prize for Literature. Neruda became known as a poet while still a teenager. He wrote in a variety of styles including surrealist poems, historical epics, overtly political manifestos, a prose autobiography, and erotically-charged love poems such as the ones in his 1924 collection Twenty Love Poems and a Song of Despair. He often wrote in green ink as it was his personal symbol for desire and hope with his poetry.

Source: Wikipedia

Third example: responsive design

There has been a lot of info and buzz about responsive design in the Internet, since smartphones and tables started to rule the world of gadgets. Let's be in fashion and apply some responsive design to our tables.

We start with the following table, and will make it behave responsively with the only help of a few lines of CSS.


info.png

NOTICE: This table is presented to make the CSS code easier to understand and DOESN'T BEHAVE RESPONSIVELY. You will find a link to the live example below.


Sidney Lumet's filmography

Film posterYearFilmAcademy award winningNominatedIMDb ratingIMDb page
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-12_angry_men.jpg195712 Angry Mennoyes89/100http://www.imdb.com/title/tt0050083/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Stage_struck.jpg1958Stage Strucknono61/100http://www.imdb.com/title/tt0052235/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-That_Kind_of_Woman_film_poster.jpg1959That Kind of Womannono61/100http://www.imdb.com/title/tt0053349/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-FugitiveKind.JPG1959The Fugitive Kindnono71/100http://www.imdb.com/title/tt0052832/
http://files.binaryblocks.net/easy_tables/sidneylumet/200px-A_View_from_the_Bridge_cover.jpg1961A View from the Bridge/Vu du pontnono66/100http://www.imdb.com/title/tt0118901/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Poster_-_Long_Day's_Journey_into_Night.jpg1962Long Day's Journey into Nightnoyes77/100http://www.imdb.com/title/tt0056196/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Pawnbroker_ver2.jpg1964The Pawnbrokernono77/100http://www.imdb.com/title/tt0059575/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Fail_safe_moviep.jpg1964Fail-Safenono79/100http://www.imdb.com/title/tt0058083/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Hill_movieposter.jpg1965The Hillnoyes78/100http://www.imdb.com/title/tt0059274/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Group_imp.jpg1966The Groupnono65/100http://www.imdb.com/title/tt0060479/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Thedeadlyaffairmp.jpg1967The Deadly Affairnono68/100http://www.imdb.com/title/tt0061556/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-ByeByeBraverman.jpg1968Bye Bye Bravermannono57/100http://www.imdb.com/title/tt0062768/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Seagulllumetposter.jpg1968The Sea Gullnono67/100http://www.imdb.com/title/tt0063569/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Poster_of_The_Appointment.jpg1969The Appointmentnono49/100http://www.imdb.com/title/tt0064035/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-King_a_filmed_record_montgomery_to_memphis.jpg1970King: A Filmed Record... Montgomery to Memphisnoyes72/100http://www.imdb.com/title/tt0065944/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Last_of_the_mobile_hot_shots_poster.jpg1970Last of the Mobile Hot Shotsnono58/100http://www.imdb.com/title/tt0064574/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-The_Anderson_Tapes_film_poster.jpg1971The Anderson Tapesnono64/100http://www.imdb.com/title/tt0066767/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Childs_play_poster.jpg1972Child's Playnono60/100http://www.imdb.com/title/tt0068369/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Poster_of_the_movie_The_Offence.jpg1972The Offencenono70/100http://www.imdb.com/title/tt0070468/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Serpico_imp.jpg1973Serpiconoyes78/100http://www.imdb.com/title/tt0070666/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Lovin_molly_poster.jpg1974Lovin' Mollynono58/100http://www.imdb.com/title/tt0071780/
http://files.binaryblocks.net/easy_tables/sidneylumet/Murder_on_the_Orient_Express_movie_poster.jpg1974Murder on the Orient Expressyesyes73/100http://www.imdb.com/title/tt0071877/
http://files.binaryblocks.net/easy_tables/sidneylumet/Dog_Day_Afternoon_film_poster.jpg1975Dog Day Afternoonyesyes81/100http://www.imdb.com/title/tt0072890/
http://files.binaryblocks.net/easy_tables/sidneylumet/225px-Networkmovie.jpg1976Networkyesyes81/100http://www.imdb.com/title/tt0074958/
http://files.binaryblocks.net/easy_tables/sidneylumet/215px-Equusposter77.jpg1977Equusnoyes70/100http://www.imdb.com/title/tt0075995/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-The-wiz-1978.jpg1978The Wiznoyes47/100http://www.imdb.com/title/tt0078504/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Just_tell_me_what_you_want_poster.jpg1980Just Tell Me What You Wantnono55/100http://www.imdb.com/title/tt0080975/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Prince_Of_The_City_folded.jpg1981Prince of the Citynoyes75/100http://www.imdb.com/title/tt0082945/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Deathtrap_imp.jpg1982Deathtrapnono69/100http://www.imdb.com/title/tt0083806/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Verdict1.jpg1982The Verdictnoyes77/100http://www.imdb.com/title/tt0084855/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Daniel,_film_poster.jpg1983Danielnono66/100http://www.imdb.com/title/tt0085398/
http://files.binaryblocks.net/easy_tables/sidneylumet/397px-Garbo_talks_poster.jpg1984Garbo Talksnono62/100http://www.imdb.com/title/tt0087313/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Power_movie_poster.jpg1986Powernono57/100http://www.imdb.com/title/tt0091786/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Morning_after.jpg1986The Morning Afternoyes57/100http://www.imdb.com/title/tt0056668/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Running_on_Empty_movie_poster.jpg1988Running on Emptynoyes75/100http://www.imdb.com/title/tt0091554/
http://files.binaryblocks.net/easy_tables/sidneylumet/Family_Business_(movie_poster).jpg1989Family Businessnono55/100http://www.imdb.com/title/tt0096018/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Q&A_film_poster.jpg1990Q & Anono64/100http://www.imdb.com/title/tt0097328/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Stranger_among_us_poster.jpg1992A Stranger Among Usnono55/100http://www.imdb.com/title/tt0100442/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Guilty_as_sin_poster.jpg1993Guilty as Sinnono54/100http://www.imdb.com/title/tt0105483/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Night_falls_on_manhattan_poster.jpg1997Night Falls on Manhattannono65/100http://www.imdb.com/title/tt0107057/
http://files.binaryblocks.net/easy_tables/sidneylumet/critical_care.jpg1997Critical Carenono59/100http://www.imdb.com/title/tt0119783/
http://files.binaryblocks.net/easy_tables/sidneylumet/220px-Gloria_1999_poster.jpg1999Glorianono47/100http://www.imdb.com/title/tt0120683/
http://files.binaryblocks.net/easy_tables/sidneylumet/250px-100-Centre-Street.jpg2002100 Centre Street (TV series)nono77/100http://www.imdb.com/title/tt0260596/
http://files.binaryblocks.net/easy_tables/sidneylumet/Poster_of_the_movie_Strip_Search.jpg2004Strip Search (TV movie)nono64/100http://www.imdb.com/title/tt0376215/
http://files.binaryblocks.net/easy_tables/sidneylumet/FMGPoster.jpg2006Find Me Guiltynono70/100http://www.imdb.com/title/tt0419749/
http://files.binaryblocks.net/easy_tables/sidneylumet/225px-Devil_youre_dead_ver2.jpg2007Before the Devil Knows You're Deadnono73/100http://www.imdb.com/title/tt0292963/

By default, Easy Tables will make the table scroll horizontally when there is not enough room to show all the columns. That behaviour works well unless the with of the screen becomes too small, in which case there are much better solutions. We will explore one of them here.

The following CSS code can be used to make the table responsive. Just add the code in an HTML block.

The first part of the code will handle the change in the layout. The last few rules add the column titles to the redesigned table (since the column headers are hidden). You will need to adapt this part to your particular case. Also, if there is more than one table in the same page, use a more specific selector to add the right titles to each one.

<style>
 
/* Media query */
@media only screen and (max-width: 760px), (min-device-width: 768px) and 
(max-device-width: 1024px) {
   .easy_table table, .easy_table thead, .easy_table th, 
   .easy_table tr, .easy_table td {
      display: block;
   }
 
   table.easy_table {
      /* do not let 'Autowidth' option interfere
      with our responsive layout */
      width: 100%!important;
   }
 
   /* Hide table headers (but not display:none, for accessibility) */
   .easy_table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }
 
   .easy_table td {
      /* Behave like a row */
      padding-left: 50% !important;
      position: relative;
   }
 
   .easy_table td:before {
      /* Now, like a table header */
      position: absolute;
      /* Top / left values mimic padding */
      top: 6px; left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      font-weight: bold;
   }
 
   /* Add column titles to the responsive layout */
   .easy_table td:nth-of-type(1):before { content: "Film poster"; }
   .easy_table td:nth-of-type(2):before { content: "Year"; }
   .easy_table td:nth-of-type(3):before { content: "Film"; }
   .easy_table td:nth-of-type(4):before { content: "Academy award winning"; }
   .easy_table td:nth-of-type(5):before { content: "Nominated"; }
   .easy_table td:nth-of-type(6):before { content: "IMDb rating"; }
   .easy_table td:nth-of-type(7):before { content: "IMDb page"; }
}
</style>

 

And that's all. You can see the result here.

The responsive layout will be used only for narrow windows, so remember to shrink your browser window below 760 pixel wide, to see the effect.


important.png

THE USUAL DISCLAIMER: This example is presented here only as a convenient starting point for you to design your own, complete, responsive solution and might not work properly or adapt to your particular case. We do not provide support to fix any error or make any improvements to this example.


And just in case you don't feel like trying it by yourself, here you have a screenshot of the result:

Responsive table result screenshot