Components
Created by Smart Sparrow

Simple Table

The simple table component allows you to display information in a table, with the ability to customise the table with different colours and fonts. This table is not editable by learners, unlike the Input Table component.

 

Unique ways to use this widget

There are multiple ways you can use this widget. For example:

  • Show numerical information, such as a balance sheet
  • Show items within a classification (e.g. dog breeds vs cat breeds)
  • Ask learners to answer questions using information in the table

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. You must change the Mode to Config mode to set up the widget.
  4. Type or paste the text you want to display into the table. Note that the column (A, B, C,…) and row (1,2,3,…) labels will not be visible for students.
  5. Add rows or columns by pressing the add row/column icon, as shown in the image below.
  6. You can delete/add columns and rows by right clicking in the table and selecting insert/remove row/column.
  7. You can also edit the font size, font colour, cell colour and alignment by selecting the various options in the toolbar. For example, you choose a custom cell colour by entering a HEX code, as shown in the image below.
  8. Once you’re done, open the Options menu and change the Mode to Student.
  9. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.

 

Other options

  • The table title and summary are the only for accessibility purposes. A screen reader will read the title and summary you enter, along with the text/numbers in the table. They will not appear on the screen.
  • The size of each cell can be adjusted

 

FAQs

Q: I’ve set up my widget, but when I preview it I can’t complete the activity the way students should. A: This is because you still have the widget set to “Config” mode. Use the edit icon on the Widget’s iFrame to change it to “Student” mode. Whenever you want to make changes to the widget, switch it back to “Config” mode.

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show toolbar
Show toolbar for editiding the table
Boolean
Mode
Mode of the widget
Student
Configuration
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Direction
Language direction of the widget
LTR
RTL
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show toolbar
Show toolbar for editiding the table
Boolean
Mode
Mode of the widget
Student
Configuration
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Direction
Language direction of the widget
LTR
RTL
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show toolbar
Show toolbar for editiding the table
Boolean
Mode
Mode of the widget
Student
Configuration
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show toolbar
Show toolbar for editiding the table
Boolean
Mode
Mode of the widget
Student
Configuration
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show toolbar
Show toolbar for editiding the table
Boolean
Mode
Mode of the widget
Student
Configuration
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show toolbar
Show toolbar for editiding the table
Boolean
Mode
Mode of the widget
Student
Configuration
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Show toolbar
Show toolbar for editiding the table
Boolean
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Show toolbar
Show toolbar for editiding the table
Boolean
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Show toolbar
Show toolbar for editiding the table
Boolean
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Show toolbar
Show toolbar for editiding the table
Boolean
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services