From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage layers.


jSignage.table( attributesObject )

Returns: jSignage Object


A table arranges content in a regular 1D or 2D pattern. It is a container layer whose child layers are positioned with a horizontal and/or vertical offset to each other. Start times of the row/column layers may be delayed to provide a visual sequence effect.

The table is part of the advanced layer type.


  • attributesObject
    Type: Plain Object.
    An object containing any of the following attributes.
    • rows
      Number of rows or an array containing the rows' heights. Default: 1.
    • columns
      Number of columns or an array containing the columns' widths. Default: 1.
    • begin, dur, repeatCount, ... , left, top, width, ... , frame, ...
      Any of the common set of layer attributes to define the screen layout and active time interval. Frame attribute can be used to decorate the table layer.
    • data
      Can be a single or two-dimensional array of data (the values are passed to the renderToSVG callback function), an array of jSignage layer objects (when renderToSVG is not defined), or null (if so, renderToSVG must be defined). Default: null.
    • primaryOrder
      Primary filling order of the table, one of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'.
      Default: 'leftToRight' unless there is only one column and multiple rows, in which case it is 'topToBottom'.
    • secondaryOrder
      Secondary filling order of the table, one of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'.
      Default: 'topToBottom' if primary order is horizontal, 'leftToRight' otherwise.
    • delay
      Additional delay between the start times of each cell. Default: 0.
    • secondaryDelay
      Additional delay between the start times of each secondary series. Default: 0.
    • cellPadding
      Additional padding between the cells as a number of pixels or percentage. A relative value refer to the greatest of the width or height dimensions. Default: 0.
    • columnPadding
      Additional padding between the columns as a number of pixels or percentage of width. Default: 0.
    • rowPadding
      Additional padding between the rows as a number of pixels or percentage of width. Default: 0.
    • renderToSVG
      Callback function to render the data items as layers. Must be defined if data is null.
      Default: function() { return this; }.


renderToSVG: function( primary, secondary, item ){ ... }

Returns: jSignage layer object or null (to skip the cell).

  • primary and secondary
    Zero-based coordinates of the cell according to the requested scan order.
  • item
    The corresponding element in the data array or null if data attribute is null. It is also accessible as this within the callback function.

The size of the table is calculated as rows * columns and this function is called once for each cell.

Depending on the type of data attribute, the item parameter is determined as following:

  • If null, then item parameter is set to null for each call.
  • If 1D array, then the content for each cell is taken from consecutive elements according to the primaryOrder parameter until a full row or column is completed, then according to secondaryOrder. If the size of the data is smaller than rows x columns, the callback function is called only for the first data.length
  • If data is a 2D array, then the inner arrays are mapped to the cells of the table according to primaryOrder, then the outer array according to secondaryOrder. This allows displaying a variable number of rows or columns.
Note Note:
If the renderToSVG callback is not defined, the data array must contain jSignage layers.


All jSignage layers share a common set of functions, such as .begin(), .end(), .show(), .hide(), .addTo(), etc. The table layer doesn't have any specific functions.


See also the JSignage tutorials page.

Multiple jSignage objects

Display 4 different jSignage objects in a table.

     data: [ $.textArea({ fontSize: 10 }).text( "Line 1" ),
             $.textArea({ fontSize: 20 }).text( "Line 2" ),     
             $.textArea({ fontSize: 30 }).text( "Line 3" ),
             $.media( { href: 'images/1.jpg' })
     rows: 4,
   }).addTo( 'svg' );


  • The table content is fully described by the data.
  • The $.textArea and $.media layers are used to construct the content.

Multiple lines of text

Display some text in a table.

     data: [ 1,2,3,4 ],
     rows: 4,
     renderToSVG: function( ) {
       return $.textArea({ fontSize: 32 }).text( "Line "+this );
   }).addTo( 'svg' );

Note: The callback renderToSVG is defined to create custom cell content based on the data

Table without data

Display a table where the table content depends only on the position of the cell.

     rows: 10,
     columns: 4,
     renderToSVG: function( primary , secondary ) {
       return $.textArea({ fontSize: 32, frame : { backColor: (primary+secondary)%2==0?'blue':'yellow' } } )
                        .text( primary +"x"+ secondary );
   }).addTo( 'svg' );

Price schedule

The primary and secondary can be used to design layout depending on the position in the table.

var schedule = [
   [ 'Quick check', 20 ],
   [ 'Winter pack', 50 ],
   [ 'Full service', 100 ]

     data: schedule,
     rows: 3,
     columns: 2,
     renderToSVG: function( primary ) {
         if ( primary==0 )
             return $.textArea({ fill: 'blue', fontSize: 32 }).text( this );
             return $.textArea({ fill: 'red', fontSize: 32 }).text( '$' + this );
   }).addTo( 'svg' );

Variable number of cells

Display a staircase table with the Fibonacci numbers. The first line will display a single cell, the second line two cells and so on.

    data: [ [1], [1,1], [1,2,1], [1,3,3,1], [1, 4, 6, 4, 1], [1, 5, 10, 10, 5, 1] ],
    rows: 6,
    columns: 6,
    renderToSVG: function( primary, secondary, item ) {
      return $.textArea({ fontSize: 32, frame : {frameColor: 'blue'} }).text( item );
  }).addTo( 'svg' );
This page was last modified on 27 July 2020, at 15:09.