# Class: c3.Table

Defined in: | js/c3-table.coffee
Inherits: | c3.Base

## Overview

A visualization of data using HTML tables.

Like other c3 visualizations, call `redraw()` to update the table when the `data` array is changed and call `restyle()` to update the table when styles or classes in the various options are changed. If the set of `columns` is changed, then please call `render()` to update the table; this flow has not been tested yet, but I can fix any issues that come up if this is needed.

## Events

- select - Triggered when a row is selected/unselected. The event is called with an argument: single select tables are passed with their selection while multi select tables are passed with an array of the selections. Selections are references to items in the data array.
- match - Triggered when a search is performed. The event is called with the search string, the datum for the row, and the row index. If there was no match, the datum and index will be `null`.

## Extensibility

The following members are created which represent c3.Selection's:

- table - The HTML `table`
- header - The HTML table `thead` header
- headers - The individual `th` headers in the header row
- body - The HTML table `tbody` body
- rows - The HTML table `tr` rows
- cells - The HTML table `td` cells

The following additional members are also created:

- selections - [Array] The current table selections. Items point to entries in the table's `data` array.

### Author:

- Douglas Armstrong

## Variables Summary

version =

      0.1

type =

      'table'

data =

      []

  [Array] Array of data for the table to visualize. Each element that is defined would be a seperate row in the table.

key =

      undefined

  [Function] An optional callback to describe a unique key for each data element. These may be used to affect performance when updating the dataset and for animations.

filter =

      undefined

  [Function] A callback to define if data elements should be included in the table or not. For example, this could be set to a function that returns true for data elements with some non-zero value to cause elements with a zero value to not be included in the table.

columns =

      []

  [Array<c3.Table.Column>] An array of column objects which describe how to construct the table. Column objects can contain the following members:

  - header [c3.Selection.Options] Options to describe the header contents, styles, events, etc. Use `text` or `html` to define the content for the header.
  - cells [c3.Selection.Options] Options to describe the cell contents, styles, events, etc. Use `text` or `html` to define the cell contents.
  - sortable [Boolean] - Boolean to define if the counter should be user-sortable by clicking on the header.
  - value [Function] - A callback to get the value of the cell for sorting or visualization.
  - sort [Function] - A callback to get the value for sorting, if different then `value`; also sets `sortable` to true.
  - sort_ascending [Boolean] - Sort the rows based on ascending value instead of descending.
  - vis [String] Optional type of visualization for the value of the cells in this column. Options include:
    - bar - The value is represented as a horizontal bar across the cell underlying the content html. The bars may be styled using _visoptions.styles.
  - total_value [Number, Function] - Some visualizations, such as bar, show their values relative to some total value. This number or callback provides for that value. If not set, the default is to use the sum of values for all the cells in the column.
  - vis_options [c3.Selection.Options] Options that may be used by value visualizations. Using the Table-level vis_options should perform better than column-specific options.
selectable =

      false

  [Boolean] Are the table rows selectable

sortable =

      false

  [Boolean, String] True for the table rows to be selectable or a string with possible values:

  - single - A single row can be selected
  - multi - Multiple rows can be selected
sort_column =

      undefined

  [{c3.Table.Column}] The column currently used for sorting

limit_rows =

      undefined

  [Number] Limit the number of table rows to the top N

pagination =

      false

  [Boolean, Number] Page between multiple pages, each the size of `limit_rows`. Set to `true` to enable or to the page number you would like to display. This will be set to the currently active page number. The pagination footer will only render if there is more than one page.

max_pages_in_paginator =

      9

  [Number] Maximum number of pages to show at a time in the footer pagination selection. Minimum value is `3`.

searchable =

      false

  [Boolean, Function] Set to enable searching in the footer. If set to `true`, then the content of all columns will be searched. Otherwise, it can be set to an accessor function that will be called with the row data and index. This function should return the string content of the row to be used for searching. If a match is found the current page is changed so the found row is visible. The `match` event will be triggered with the search string used. If a match was found the second and third arguments will be the row data and index of the match, otherwise they will be `null`. The user may use regular expressions in their search string.

searchable_if_not_paginated =

      true

  [Boolean] Allow table to be searchable even if it isn't paginated

table_options =

      undefined

  [c3.Selection.Options] Options for the `table` node.

table_header_options =

      undefined

  [c3.Selection.Options] Options for the table `thead` header.

header_options =

      undefined

  [c3.Selection.Options] Options for the table `th` headers. Callbacks are called with two arguments: The first is the column object and the second is the column index.

footer_options =

      undefined

  [c3.Selection.Options] Options for the table `caption` footer used for pagination.

table_body_options =

      undefined

  [c3.Selection.Options] Options for the table `tbody`.

row_options =

      undefined

  [c3.Selection.Options] Options for the table `tr` rows. Callbacks are called with two arguments. The first is the data element, the second is the row index.

  A `column_options` options could be created using `col` to specify options for each column instead of manually specifying in each column object in `columns`. If this is needed, just let me know.

cell_options =

      undefined

  [c3.Selection.Options] Options for the table `td` cells. Callbacks are called with three arguments. The first is the data element, the second is the column index, and the third is the row index.

vis_options =

      undefined

  [c3.Selection.Options] Options for any `vis` visualizations, such as inline bar charts. Callbacks are called with the first argument as the data element, the second as the column index, and the third as the row index.

### Variable inherited from c3.Base

anchor height width anchor_styles handlers

## Class Method Summary

- . (Array) set_select(set, item, multi_select) Helper logic for selecting an item in a multiple-select list with a click or ctrl-click

## Instance Method Summary

- # (void) _init() Bound
- # (void) _update_headers() Bound
- # (void) _update(origin) Bound
- # (void) _style(style_new) Bound
- # (void) sort(column, ascending) Bound Sort the table
- # (void) highlight(selections = @selections) Bound Update the visual selection in the table without triggering selection event
- # (void) select(selections = @selections) Bound Select items in the table and trigger the selection event

## Inherited Method Summary

### Methods inherited from c3.Base

#render #resize #redraw #restyle #init #_prep #_init #size #_size #update #_update #draw #_draw #style #_style

## Class Method Details

. (Array) set_select(set, item, multi_select)

Helper logic for selecting an item in a multiple-select list with a click or ctrl-click

### Parameters:

- set ( `Array` ) — An array of items that represents the current selection
- item ( `Object` ) — A new item to add or remove from the current selection
- multi_select ( `Boolean` ) — Indicate if multiple selections are allowed

### Returns:

- ( `Array` ) — This returns the new set, but also modifys the set passed in, so old references are still valid

## Constructor Details

# (void) constructor()

## Instance Method Details

# (void) _init() Bound

# (void) _update_headers() Bound

# (void) _update(origin) Bound

# (void) _style(style_new) Bound

# (void) sort(column, ascending) Bound

Sort the table

### Parameters:

- column ( `column` ) — A reference to the column object to sort on
- ascending ( `Boolean` ) — True to sort top to bottom based on ascending values, otherwise alternate on subsequent calls to sorting on the same column.

# (void) highlight(selections = @selections) Bound

Update the visual selection in the table without triggering selection event

### Parameters:

- selections ( `Array` ) — An array of items to select referencing items in the data array

# (void) select(selections = @selections) Bound

Select items in the table and trigger the selection event

### Parameters:

- selections ( `Array` ) — An array of items to select referencing items in the data array

Quickly fuzzy find classes, mixins, methods, file:

- T Open fuzzy finder dialog

Control the navigation frame:

- L Toggle list view
- C Show class list
- I Show mixin list
- F Show file list
- M Show method list
- E Show extras list

You can focus and blur the search input:

- S Focus search input
- Esc Blur search input