Table (beta)
Updated 5 years ago by Template retirement home
API information
This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.
template: _771
version: _3
Template data
There are three different formats in which you can supply data to this template. The most convenient for you to use likely depends on the source of your data, as described below.
1. Array of arrays, and a bindings object
You can supply arrays of arrays to opts.data
, which might look
like:
{ data: { rows: [ [ "RowsColumn1Value1", "RowsColumn2Value1", [ "RowsColumn1Value2", "RowsColumn2Value2", [ "RowsColumn1Value3", "RowsColumn2Value3", ... ] } }
where each array of arrays represents the rows in a data sheet.
To tell the API how the values from each column should be
associated with the keys that the template is expecting, you must also supply
an object attached to opts.bindings
. (The meanings of the
keys in the bindings object are documented
below.) The minimal bindings you can
supply for this template are as shown in this example:
{ template: "_771", version: "_3", bindings: { rows: { } }, data: { rows: [ [ "RowsColumn1Value1", "RowsColumn2Value1", [ "RowsColumn1Value2", "RowsColumn2Value2", [ "RowsColumn1Value3", "RowsColumn2Value3", ... ] } }
All possible bindings that you can supply are shown in this example:
{ template: "_771", version: "_3", bindings: { rows: { columns: [0, 1, ...], // index(es) of column(s) in your data columns_bar: [2, 3, ...], // index(es) of column(s) in your data } }, data: { rows: [ [ "RowsColumn1Value1", "RowsColumn2Value1", [ "RowsColumn1Value2", "RowsColumn2Value2", [ "RowsColumn1Value3", "RowsColumn2Value3", ... ] } }
2. Array of objects with arbitrary keys, and a bindings object
This format is most likely useful when you have data from an external source,
such as CSV data loaded from d3-dsv.
You should supply this attached to the opts.data
, which might look
like:
{ rows: [ { "RowsHeader1": ..., "RowsHeader2": ..., ... }, { "RowsHeader1": ..., "RowsHeader2": ..., ... }, { "RowsHeader1": ..., "RowsHeader2": ..., ... }, ... ] }
... but with the keys being the column headers from your
source data instead. You must also supply an object attached to
opts.bindings
. The minimal bindings you can
supply for this template are as shown in this example:
{ template: "_771", version: "_3", bindings: { rows: { } }, data: { rows: [ { "RowsHeader1": ..., "RowsHeader2": ..., ... }, { "RowsHeader1": ..., "RowsHeader2": ..., ... }, { "RowsHeader1": ..., "RowsHeader2": ..., ... }, ... ] } }
All possible bindings that you can supply are shown in this example:
{ template: "_771", version: "_3", bindings: { rows: { columns: ["RowsHeader1", "RowsHeader2", ...], columns_bar: ["RowsHeader3", "RowsHeader4", ...], } }, data: { rows: [ { "RowsHeader1": ..., "RowsHeader2": ..., ... }, { "RowsHeader1": ..., "RowsHeader2": ..., ... }, { "RowsHeader1": ..., "RowsHeader2": ..., ... }, ... ] } }
(As before, the keys containing "Header" would be replaced by column names from your data source.)
3. Array of objects with template-defined keys
There is an alternative format you can use, which is likely to be easier to
use if your data is not from a spreadsheet source. With this alternative format
you supply your data to the template as
an array of objects, attached to opts.data
, where the keys must
be those used by the template, as documented below. In this case
there is no need to supply a bindings object, since the key names are already
those expected by the template. The required properties in the data
object are as follows (scroll down for a
description of what each property is):
{ template: "_771", version: "_3", data: { rows: [ { columns: [...], columns_bar: [...] }, ... ] }, ... }
And the full list of all possible properties is as follows:
{ template: "_771", version: "_3", data: { rows: [ { columns: [...], columns_bar: [...] }, ... ] }, ... }
Meanings of the template data keys:
- rows.columns: columns
- rows.columns_bar: columns_bar
Template settings
Options for opts.state
.
Table
table_min_width number
Min width. Min: 100
table_border_color color
Border color.
table_border_width number
Border thickness.
sorting.enabled boolean
Enable sorting.
pagination_enabled boolean
Allowed values:
- true (Enabled)
- false (Disabled)
pagination_amount number
Number of rows.
pagination_amount_search number
Number of rows (after search).
Cell styles
cell_height number
Height.
cell_padding number
Padding.
cell_fill_1 color
Background.
cell_fill_2 color
cell_wrap boolean
Wrap text in cell.
cell_border_color color
Color.
cell_border_width number
Thickness.
cell_border_style string
Style. Allowed values:
cell_font_color color
Color.
cell_font_size number
Size.
column_width_mode string
Allowed values:
- auto (Auto)
- fixed (Fixed)
column_widths string
Column widths.
Header styles
header_font_weight string
Text weight. Allowed values:
header_fill color
Background.
header_font_color color
Color.
header_style_default boolean
Allowed values:
- true (Inherit styles)
- false (Custom)
header_height number
Height.
header_padding number
Padding.
header_border_default boolean
Allowed values:
- true (Inherit styles)
- false (Custom)
header_border_color color
Color.
header_border_width number
Thickness.
header_border_style string
Style. Allowed values:
header_font_default boolean
Allowed values:
- true (Inherit styles)
- false (Custom)
header_font_size number
Size.
Search
search_enabled boolean
Allowed values:
- true (Enabled)
- false (Disabled)
search_placeholder string
Placeholder.
search_columns string
Columns to search in. On default, the search bar will only search through the first column of your data. If you want to include more columns, add them here. Just write down the column names, separated by a ;
no_results_text string
Text when there are no results.
Mobile
mobile.view boolean
Mobile view. Allowed values:
mobile.breakpoint number
Mobile breakpoint width. Min: 10
mobile.cell_font_size number
Text size. Min: 1
mobile.pagination_amount number
Pagination Amount. Min: 1
Header
header.title string
Title.
header.subtitle string
Subtitle.
header.color color
Color.
header.align string
Alignment. Allowed values:
header.margin number
Margin.
header.margin_advanced boolean
Advanced margin settings.
header.margin_top number
Top.
header.margin_right number
Right.
header.margin_bottom number
Bottom.
header.margin_left number
Left.
Footer
footer.source_name string
Source name.
footer.source_url string
Source url.
footer.multiple_sources boolean
Multiple sources.
footer.source_name_2 string
Source name.
footer.source_url_2 string
Source url.
footer.source_name_3 string
Source name.
footer.source_url_3 string
Source url.
footer.source_label string
Source label.
footer.note string
Note.
footer.size number
Size.
footer.color color
Color.
footer.align string
Alignment. Allowed values:
footer.margin number
Overall.
footer.margin_top number
Top.
footer.margin_right number
Right.
footer.margin_bottom number
Bottom.
footer.margin_left number
Left.
footer.margin_advanced boolean
Advanced.
Number formatting
localization.input_decimal_separator string
Decimal separator in data sheet. Used for interpreting your data. Only change if data is not displaying on the chart as expected. Allowed values:
localization.output_separators string
Number format to display. How the numbers should appear on chart labels Allowed values: