Table

live example

Explore the API in the live example.

api reference

Table(name[, parent])

The table widget. This widget extends the following components:

BottomAxis
Description
Font
Highlight: Table rows, columns, cells and any combination of these can be highlighted by passing 'row-<row number>', 'column-<column ID>' or 'cell-<row number>-<column ID>' to the highlight method. The default highlight style uses the header color as background for the highlighted cells.
Mouse: When interacting with a table cell, an object with three keys are passed to the mouse callback: row, column and value representing the row number, column ID and value of the table cell. These values can be used to highlight rows, columns or cells in the table.
Placeholder
Widget

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

Table.color([color])

Sets the table theme color.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `#888`.

Returns

Table

Reference to the Table API.

Examples

// Set color to royalblue.
const table = dalian.Table('my-table')
  .color('royalblue')
  .render()

// Reset color to default.
table.color()
  .render()

Table.data(data)

Sets the table content. This method clears the table and re-populates it with the new data. Note that a schema has to be defined for the data using the schema method.

Parameters

Name	Type	Description
data	Object[]	Array of objects representing the rows of the table. Each row is an object with the column IDs as property names and cell values as values.

Returns

Table

Reference to the Table API.

Examples

const table = dalian.Table('my-table')
  .data([
    {name: 'Alice',   id: 1, year: '1985-02-01'},
    {name: 'Bob',     id: 2, year: '1993-05-13'},
    {name: 'Charlie', id: 3, year: '1968-07-08'},
    ...
  ])
  .render()

Table.paging(size)

Enables/disables paging functionality.

Parameters

Name	Type	Description
size	number	Number of rows in a single page.

Returns

Table

Reference to the Table API.

Examples

// Set paging with 5 rows per page.
const table = dalian.Table('my-table')
  .paging(5)
  .render()

// Disable paging.
table.paging()
  .render()

Table.schema(schema)

Sets the table schema. The schema contains column names and types.

Parameters

Name	Type	Description
schema	Object[]	Array of objects representing the columns. Each column must have a `key` and `name` properties. Also, the column can have the following optional properties: `type`: Type of the column, used for sorting. Supported values: string, number, date. Default value is string. `format`: Formatting function to use when displaying the column values. Default value is the string representation of the value.

Returns

Table

Reference to the Table API.

Examples

const table = dalian.Table('my-table')
  .schema([
    {key: 'name', name: 'Player name'},
    {key: 'id', name: 'Identifier', type: 'number'},
    {key: 'year', name: 'Year born', format: d => new Date(d).getFullYear()}
  ])
  .render()