dc.js Class: dataTable (original) (raw)

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.

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

• Nasdaq 100 Index
• dataTable on a crossfilter group(source)

Parameters:

Mixes In:

• dc.baseMixin

Source:

• data-table.js,line 1

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 exampleto see how to implement the pagination user interface using beginSlice and endSlice.

Parameters:

Source:

• data-table.js,line 263

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:

Source:

• data-table.js,line 302

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:

Source:

• data-table.js,line 285

Returns:

Type

Number|dc.dataTable

group(groupFunction)

Backward-compatible synonym for section.

Parameters:

Source:

• data-table.js,line 235

Returns:

Type

function|dc.dataTable

order( [order])

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

Parameters:

Source:

• data-table.js,line 410

See:

• d3.ascending
• d3.descending

Returns:

Type

function|dc.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.nestto 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:

Source:

• data-table.js,line 210

Returns:

Type

function|dc.dataTable

Example

// section rows by the value of their field chart .section(function(d) { return d.field; })

showGroups( [showGroups])

Parameters:

Source:

• data-table.js,line 451

Returns:

Type

Boolean|dc.dataTable

showSections( [showSections])

Get or set if section header rows will be shown.

Parameters:

Source:

• data-table.js,line 431

Returns:

Type

Boolean|dc.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:

Source:

• data-table.js,line 247

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:

Source:

• data-table.js,line 389

Returns:

Type

function|dc.dataTable

Example

chart.sortBy(function(d) { return d.date; });