dc.js

Class: DataTable

DataTable

The data table is a simple widget designed to list crossfilter focused data set (rows being filtered) in a good old tabular fashion.

An interesting feature of the data table is that you can pass a crossfilter group to the dimension, if you want to show aggregated data instead of raw data rows. This requires no special code as long as you specify the order as d3.descending, since the data table will use dimension.top() to fetch the data in that case, and the method is equally supported on the crossfilter group as the crossfilter dimension.

If you want to display aggregated data in ascending order, you will need to wrap the group in a fake dimension to support the .bottom() method. See the example linked below for more details.

Note: Formerly the data table (and data grid chart) used the group attribute as a keying function for nesting the data together in sections. This was confusing so it has been renamed to section, although group still works. Examples:

new DataTable(parent [, chartGroup])

Create a Data Table.

Parameters:
Name Type Argument Description
parent String | node | d3.selection

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup String <optional>

The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Mixes In:
Source:

Classes

DataTable

Methods

beginSlice( [beginSlice])

Get or set the index of the beginning slice which determines which entries get displayed by the widget. Useful when implementing pagination.

Note: the sortBy function will determine how the rows are ordered for pagination purposes. See the table pagination example to see how to implement the pagination user interface using beginSlice and endSlice.

Parameters:
Name Type Argument Default Description
beginSlice Number <optional>
 0
Source:
Returns:
Type
Number | DataTable

columns( [columns])

Get or set column functions. The data table widget supports several methods of specifying the columns to display.

The original method uses an array of functions to generate dynamic columns. Column functions are simple javascript functions with only one input argument d which represents a row in the data set. The return value of these functions will be used to generate the content for each cell. However, this method requires the HTML for the table to have a fixed set of column headers.

chart.columns([
    function(d) { return d.date; },
    function(d) { return d.open; },
    function(d) { return d.close; },
    function(d) { return numberFormat(d.close - d.open); },
    function(d) { return d.volume; }
]);

In the second method, you can list the columns to read from the data without specifying it as a function, except where necessary (ie, computed columns). Note the data element name is capitalized when displayed in the table header. You can also mix in functions as necessary, using the third {label, format} form, as shown below.

chart.columns([
    "date",    // d["date"], ie, a field accessor; capitalized automatically
    "open",    // ...
    "close",   // ...
    {
        label: "Change",
        format: function (d) {
            return numberFormat(d.close - d.open);
        }
    },
    "volume"   // d["volume"], ie, a field accessor; capitalized automatically
]);

In the third example, we specify all fields using the {label, format} method:

chart.columns([
    {
        label: "Date",
        format: function (d) { return d.date; }
    },
    {
        label: "Open",
        format: function (d) { return numberFormat(d.open); }
    },
    {
        label: "Close",
        format: function (d) { return numberFormat(d.close); }
    },
    {
        label: "Change",
        format: function (d) { return numberFormat(d.close - d.open); }
    },
    {
        label: "Volume",
        format: function (d) { return d.volume; }
    }
]);

You may wish to override the dataTable functions _doColumnHeaderCapitalize and _doColumnHeaderFnToString, which are used internally to translate the column information or function into a displayed header. The first one is used on the "string" column specifier; the second is used to transform a stringified function into something displayable. For the Stock example, the function for Change becomes the table header d.close - d.open.

Finally, you can even specify a completely different form of column definition. To do this, override _chart._doColumnHeaderFormat and _chart._doColumnValueFormat Be aware that fields without numberFormat specification will be displayed just as they are stored in the data, unformatted.

Parameters:
Name Type Argument Default Description
columns Array.<function()> <optional>
 []
Source:
Returns:

|DataTable}

Type
Array.<function()>

endSlice( [endSlice])

Get or set the index of the end slice which determines which entries get displayed by the widget. Useful when implementing pagination. See beginSlice for more information.

Parameters:
Name Type Argument Description
endSlice Number | undefined <optional>
Source:
Returns:
Type
Number | DataTable

group(section)

Backward-compatible synonym for section.

Parameters:
Name Type Description
section function

Function taking a row of data and returning the nest key.
Source:
Returns:
Type
function | DataTable

order( [order])

Get or set sort order. If the order is d3.ascending, the data table will use dimension().bottom() to fetch the data; otherwise it will use dimension().top()

Parameters:
Name Type Argument Default Description
order function <optional>
 d3.ascending
Source:
See:
Returns:
Type
function | DataTable
Example
chart.order(d3.descending);

section(section)

Get or set the section function for the data table. The section function takes a data row and returns the key to specify to d3.nest to split rows into sections. By default there will be only one section with no name.

Set showSections to false to hide the section headers

Parameters:
Name Type Description
section function

Function taking a row of data and returning the nest key.
Source:
Returns:
Type
function | DataTable
Example
// section rows by the value of their field
chart
    .section(function(d) { return d.field; })

showGroups( [showSections])

Backward-compatible synonym for showSections.

Parameters:
Name Type Argument Default Description
showSections Boolean <optional>
 true
Source:
Returns:
Type
Boolean | DataTable

showSections( [showSections])

Get or set if section header rows will be shown.

Parameters:
Name Type Argument Default Description
showSections Boolean <optional>
 true
Source:
Returns:
Type
Boolean | DataTable
Example
chart
    .section([value], [name])
    .showSections(true|false);

size( [size])

Get or set the table size which determines the number of rows displayed by the widget.

Parameters:
Name Type Argument Default Description
size Number <optional>
 25
Source:
Returns:
Type
Number | DataTable

sortBy( [sortBy])

Get or set sort-by function. This function works as a value accessor at row level and returns a particular field to be sorted by.

Parameters:
Name Type Argument Default Description
sortBy function <optional>
 identity function
Source:
Returns:
Type
function | DataTable
Example
chart.sortBy(function(d) {
    return d.date;
});