Class: dataTable

dc. dataTable


new dataTable(parent [, chartGroup])

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

Note: Unlike other charts, the data table (and data grid chart) use the group attribute as a keying function for nesting the data together in groups. Do not pass in a crossfilter group as this will not work.

Another interesting feature of the data table is that you can pass a crossfilter group to the dimension, 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.

Examples:

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:
Returns:
Type
dc.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 | dc.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:

|dc.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 | dc.dataTable

group(groupFunction)

Get or set the group function for the data table. The group function takes a data row and returns the key to specify to d3.nest to split rows into groups.

Do not pass in a crossfilter group as this will not work.

Parameters:
Name Type Description
groupFunction function

Function taking a row of data and returning the nest key.

Source:
Returns:
Type
function | dc.dataTable
Example
// group rows by the value of their field
chart
    .group(function(d) { return d.field; })

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 | dc.dataTable
Example
chart.order(d3.descending);

showGroups( [showGroups])

Get or set if group rows will be shown. The dataTable group function must be specified even if groups are not shown.

Parameters:
Name Type Argument Default Description
showGroups Boolean <optional>
true
Source:
Returns:
Type
Boolean | dc.dataTable
Example
chart
    .group([value], [name])
    .showGroups(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 | dc.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 | dc.dataTable
Example
chart.sortBy(function(d) {
    return d.date;
});