You can use the table widget to create a report within your dashboard. This widget can display data from one data source as multiple columns.

A screenshot showing an example with three table widgets

In the sidebar

A screenshot showing an example of the general properties of the table widget

General: use the general properties of the sidebar to adjust the widget’s general appearance.

  • Choose whether the title of the widget should be displayed. If you enable this, then you can provide a title and icon for the widget and specify the font sizefont colour and text alignment.
  • Choose whether a subtitle for the widget should be displayed. If you enable this, then you can add a subtitle for the widget and specify the font sizefont colour and text alignment.
  • Specify the widget width within the section where it appears.
  • Choose the background and border colour for the widget.

A screenshot showing an example of the instructions properties for the table widget

Instructions: here you can add static informational content which will appear below the title of the widget. This can include text, images, tables, links and other common content tools.

A screenshot showing an example of the data properties for the table widget

Data: to connect your table with a data source, use the table data properties to add and filter a data source.

A screenshot showing an example of the column properties for the table widget

Columns: use the table columns properties to display fields from your data source as different columns.

In the general column settings, you can:

  • Add a column title.
  • Choose a data field from your data source.
  • Choose the data type that you want the field to display as. You can choose from date, number, string or image. If you select the image data type (which will display an image field from an event form), clicking on the image will also expand it to full-screen.
  • Depending on the data type selected for your column, you can adjust the format. For example, dates can be shown in mm/dd/yyyy or dd/mm/yyyy, and numbers can have any number of decimal places.

A screenshot showing an example of the columns advanced properties for the table widget

In the advanced column settings, you can:

  • Set the text alignment of the column. This applies to both the header and the data in that column.
  • Choose the column width. If no width is selected, the table will automatically keep each column at an even width. Keep in mind that if you set the width of some columns but not others, the size of the screen the dashboard is being viewed on may impact the way the table will look. If the width of all columns is greater than the screen width when viewing your dashboard, you can scroll sideways to view the entire table.
  • Apply a conditional formatting ruleset. Conditional formatting can be applied on a column by column basis and affects each table cell background and icon. If your conditional ruleset involves a range of different colours, you may wish to enable legible foreground colour. With this enabled, the dashboard will automatically choose a legible text and icon colour, depending on the colour of each individual cell in that column.

A screenshot showing an example of the summary row properties for the table widget

Summary rows: use the summary rows properties to display any aggregated values you’d like to see for the table. The aggregated values are calculated based on the entire content of the table, including any rows that are paginated.

A screenshot showing an example of the style properties for the table widget

Style: you can use the table style properties to alter the appearance of your table cells and rows. These settings include text and cell colours, font size and cell padding.

A screenshot showing an example of the avatar properties for the table widget

Avatar settings: if you want to include pictures, you can use the avatar settings to display the image associated with each user’s account. The avatars will be added to whichever column you choose in the properties. You can also opt to only display the avatar (and hide the column value), and adjust the size of the avatars.

A screenshot showing an example of the sorting properties for the table widget

Sorting: the column sorting properties can be used to choose a default column for sorting purposes (ascending or descending). If you want your default sorting choices to be re-applied after someone interacts with your dashboard (for example, choosing a different athlete from a select box widget that is acting as a filter for the table data), then you can leave the sorting reset enabled.

A screenshot showing an example of the interaction properties for the table widget

Interaction: if you want to provide users with more information about the data displayed in a table, you can set up different interactions using the interaction properties.

A screenshot showing an example of a record card

There are two interactions you can enable for a table widget – record cards and record click-through.

  • Record cards: when record cards are enabled, then the card fields that are set will be shown in a pop-up screen when a table cell is selected. For the table widget, record cards are set up for the entire table, and cannot be customised for each column.
  • Record click-through: this property can only be enabled when the record card property is also enabled. Turning on record click-through means that people can navigate from the record card to the event form record that the relevant data is sourced from. If multiple records are shown in the record card (for example, when data from a group of athletes is shown in the chart), then the user will need to select a specific record from the record card before clicking through to that particular record.

A screenshot showing an example of the advanced properties for the table widget

Advanced properties: use the advanced properties for customising your table further. Advanced properties for the table widget allow you to:

  • Set a max height for the table (this is measured in pixels).
  • Apply pagination and rows per page.
  • Print all pages (ensures all data will be printed, even if pagination or a max height is set).
  • Customise the text display when no data is available.
  • Hide the widget if no data is available (based on data source and filter settings).

A screenshot showing an example of the data preview properties for the table widget

Data preview: the table widget has properties that allow you to choose how you want to preview your table. When using the dashboard builder, you’re not able to view real data entered by athletes, coaches or other users of your Smartabase site. So the dashboard builder shows you simulated data in order for you to see how your table might appear.