We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Table (CSV)

A Table stack which loads CSV data

Features

  • Use any CSV file - resource or external
  • Use any delimiter
  • Responsive
  • Sortable columns
  • Columns can be omitted

  • Special column formats for numbers and dates
  • Fixed width columns
  • Data can be paginated
  • Multiple display options, such as striped, narrow, hoverable

Example

Tabulated data are sometimes needed, it's even better when it's responsive

Concept

You can link to a CSV file, either in RapidWeaver resources or through a URL. When using the latter be careful to respect SOP, otherwise there will be CORS errors.
At the same time you can also specify the field delimiter. The default is a ";" (semicolon).

Layout

If you have a bigger table, you can turn on the pagination option. This lets you specify how many items per page will be displayed. Additionally you can specify a particular page which will be selected on page load.

Design

There are several more options which influence the table layout:
  • Bordered: border around all cells
  • Striped: rows have alternating background
  • Narrowed: makes all cells narrower
  • Hoverable: rows are highlighted when hovering
  • Mobile Cards: rows appear as cards on mobile
  • Focusable: the table can be focused and rows are highlighted when hovering

Data

By adding columns stacks, you describe the setup of your table. For each column you specify:
  • Field Name - the field name as it appears in the CSV file.
    Important: do NOT use spaces here!
  • Label - the header text for the field/column
  • Format - sets the output format and determines whether the data in the coiumn is of type Numeric, Date or Text. If you choose Numeric, the column will be aligned right with the sort icon on the left; if you choose Date, the data will be formatted according to the user's locale, you can also specify your own locale.
  • Fixed Width - lets you specify a fixed width for the column, otherwise the width will be determined automatically.
  • Sortable - makes the column sortable
  • Centered - specifies centered alignment for the column
  • Visible - toggles the visibility of the column
No spaces in Field Name!
Mandatory Date Source Format: YYYY/MM/DD
Formatting will be done using the locale!
By arranging the columns to your liking, you are not tied to their original sequence in the CSV file. You can also choose to omit certain columns.

Locales

Getting Around CORS

We are giving some hints for an Ubuntu based Apache2 configuration here.
(1) In the Apache 2 config file at /etc/apache2/apache2.conf change this configuration 
<Directory /var/www/>
	Options Indexes FollowSymLinks
	AllowOverride None
	Require all granted
</Directory>

to 
<Directory /var/www/>
	Options Indexes FollowSymLinks
	AllowOverride FileInfo
	Require all granted
</Directory>

(2) If not already activated, activate module mod_headers with command
a2enmod headers
Follow this with a restart of Apache:
systemctl restart apache2
(3) Create a .htaccess file in the folder which you want to "open" with the following contents: 
Header set Access-Control-Allow-Origin "*"
On AWS S3
Follow the instructions provided here.
TL;DR
In order to give read permissions to all sources, create an XML file with the following content on the respective bucket: 
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Platform Icon

Made with Platform