Hello, and welcome
to this video tutorial. We’ll show you how to use
the web application Awesome Table. This tool displays data
from Google Spreadsheets into various types
of nice views: cards, maps, table
or gantt view. Add filters and styles
to customize the view, and implement those views
on your websites. In our example, we will deal
with a contact directory. Here are the data
we want to display. The contact details
are in a Google Spreadsheet, in a sheet named Data. Go to Awesome Table’s website
at this address and sign-in
with your Google account. You can create new
Awesome Table views, browse them and edit them. Click on ‘new’ to create a new view. We are now in the configuration
panel of a view. In the sheet configuration panel
just below: 1st, copy and paste the URL
of the sheet so AT knows where to look
for the data to display. Write the name of the sheet
in case there are more than one. Here, the name of the sheet
is ‘Data’. Select the range of the view
to indicate the columns and rows
to be included in the view. Here, the view will display data
from columns A to J. Next, in the view panel: Choose one the views
Awesome Table has to offer. Select the ‘Table view’,
which is a standard view. Then, write the number of item
to be displayed in the view. It’s not practical to display all rows
if there are a lot. Make sure the selected range
contains all the columns of the sheet that we want to display. Last,
go to the general settings panel. Give a name to the view
to identify it and find it easily in the views list. Save, and the data in the Spreadsheet
will be displayed. We now see a preview
of the Awesome Table view. The selected columns and rows
are all there, items are displayed
ten at a time. Notice that
the column headers merged with the 1st data
in the Spreadhseet. To avoid it and properly display
the content, add a second row to the table. This row can later be used
for additional configuration. Then, click on ‘Save’
to refresh the view. We just displayed the data
in a classic table way. But there are many columns,
it’s not quite user-friendly. We can do more. We can add filters sort out
and go through data more efficiently. They are set up in the 2nd row
of the sheet. Let’s add one right now: a category filter
on the department’s data. Elect one kind of department
at a time or mix different types
of departments. It’s possible to add several filters and to combine them
to narrow the research. To customize the view,
we apply a specific style to improve the look
of our directory. To do so, we will want
to use templates. They separate the data
and the display layout, keeping the spreadsheet
organized and functional. Let’s begin with a simple display. In this template,
the syntax is pretty simple. It’s a mix of HTML and markers designating the label
of the column headers to display. Here, we want to show
the 1st and last name in green, and the last name will also
appear in bold To apply this template,
it’s quite simple. In the advanced parameters, fill the ‘template range’ field, with the name of the sheet
containing the template, and the cell
containing the code. This way, we indicate to AT
where to look for, using the same syntax
as in classic spreadsheets. Here, the template sheet
is name ‘Basic template’ and the cell is A1. Now we can see
the display has changed and matches the code
inside the template. 1st and last names appear in green and the last name
is also in bold. The template has replaced
the existing columns displayed. But we can do much better than this. We select a more complex template for a more beautiful display. Let’s update
the advanced parameters using the name of the new
template sheet. Now, we save. This display is more sophisticated
than the previous one. Here, we’re using
the basic template mode, it’s just a glympse of
what’s possible with Awesome Table. Share the view’s link and give people a read access
to the Spreadsheet so they can display the data. Then, they will directly see
the directory. That’s it for now! If you’re intrigued by what
Awesome Table can do, go check its homepage
to learn more about it: you’ll get access
to the documentation, see demos
of the different views available, download ready-to-use
sheets and templates and find infos on how to use
more complex templates. If you liked this video, please vote for it and share it. Thank you for your attention.