Custom Table Block

Plugins Store

Squarespace plugins that are powerful, beautiful and easy to install. We offer quick users help and support. Create amazing websites simply.

Custom Table Block

Custom Table Block

30.00

Using this plugin you may now create Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do

Add To Cart

Using this plugin you may now create Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do. Plugin hooks Markdown block and builds a HTML5 table for you based on manually added data or imported from *.csv file or synchronized with Google Spreadsheets. We also have some base table styles, mobile view and sorting feature. We allow html and markdown markup in table so you are able to add  images and other stuff to tables.

To use all table features, please copy/add this code to your Injections tab :

 
<link rel="stylesheet" href="//squarewebsites.org/assets/custom-tables/style.css">
<script src="//squarewebsites.org/assets/custom-tables/custom-table.js"></script>
 
Scoring PlaceDog NameDog BreedDog Owner NameImage
1FredMixed/MuttFranklin Roosevelt
2Mister DarcyBasset HoundJill Heath
3Estella
Wirehaired Pointing Griffon
Kyle Pemberton
4GruffBullmastiffGlen Smith
5Timmy
Golden Retriever
Hurley Plimpton
6MunchesMixed/MuttMissi Lynn
7Ralphie DeanBichonTanya Francis
8WallyBeagleGary Snoopy
9
Dr. Frankenstein
Mixed/MuttBrian Cummings
10HooperBoxerJohn Doe
11CorndogChocolate LabSi Robertson

Adding tables control in admin also need you to inject purchased javascript. So the best way is to add css styles to Header Injection while scripts may be in Footer. So your injections will look like:

 Added Custom Table Block

Added Custom Table Block

If you did Injections right you may see Table Block in Blocks Menu now and ready to create tables.

 Table Block in Blocks Menu

Table Block in Blocks Menu

Creating Tables process is the same as using our PRO Extension, so please check next "how-to" video.  

Styling Tables

Each site has own look, so plugin is not focusing on styling Tables - just giving you a way for easy manage tables on Squarespace site. But you may easy style your tables with just basic CSS knowledges, really simple. Example:

By default Table will follow general body font settings. Let's say you have many columns and need decrease font size to 10px to fit screen.

Table block has classes field, so you may type in Add custom class to your table field: fnt-size-10px, then go to Custom CSS and add a rule for this code.

table.fnt-size-10px {
    overflow: auto; /*allowing table be scrollable*/
    max-height: 70vh; /*limiting max height*/
    font-size: 10px; /*set the font size*/
    line-height: 1.4; /* set the text line-height */
    color: #000; /* set the font color */
}

That's all folks, any table you added fnt-size-10px will be affected with that rules.

Advanced using

Tables are initializing on Y.config.win.Squarespace.onInitialize event, so it should work with Ajax Templates also. For additional JS  plugins and features you may subscribe to  "table-init" custom event - it fires on table is built.

 
document.querySelector('.my-table').addEventListener('table-init', function () {
 ----Your code here---
}, false);
 

Attention: Please divide Tables Blocks with another blocks, like Spacer or Line or some another except Markdown and Table. The reason is Squarespace split nearby Markdown blocks into one and we want to keep this for compatibility.