dc.js

Class: dataGrid

dc. dataGrid

new dataGrid(parent [, chartGroup])

Data grid is a simple widget designed to list the filtered records, providing a simple way to define how the items are displayed.

Note: Formerly the data grid chart (and data table) 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:

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.dataGrid

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.

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

endSlice( [endSlice])

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

Parameters:
Name Type Argument Description
endSlice Number <optional>
Source:
Returns:
Type
Number | dc.dataGrid

group(groupFunction)

Backward-compatible synonym for section.

Parameters:
Name Type Description
groupFunction function

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

html( [html])

Get or set the function that formats an item. The data grid widget uses a function to generate dynamic html. Use your favourite templating engine or generate the string directly.

Parameters:
Name Type Argument Description
html function <optional>
Source:
Returns:
Type
function | dc.dataGrid
Example
chart.html(function (d) { return '<div class='item '+data.exampleCategory+''>'+data.exampleString+'</div>';});

htmlGroup( [htmlGroup])

Backward-compatible synonym for htmlSection.

Parameters:
Name Type Argument Description
htmlGroup function <optional>
Source:
Returns:
Type
function | dc.dataGrid

htmlSection( [htmlSection])

Get or set the function that formats a section label.

Parameters:
Name Type Argument Description
htmlSection function <optional>
Source:
Returns:
Type
function | dc.dataGrid
Example
chart.htmlSection (function (d) { return '<h2>'.d.key . 'with ' . d.values.length .' items</h2>'});

order( [order])

Get or set sort the order function.

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

section(section)

Get or set the section function for the data grid. The section function takes a data row and returns the key to specify to d3.nest to split rows into sections.

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

Parameters:
Name Type Description
section function

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

size( [size])

Get or set the grid size which determines the number of items displayed by the widget.

Parameters:
Name Type Argument Default Description
size Number <optional>
 999
Source:
Returns:
Type
Number | dc.dataGrid

sortBy( [sortByFunction])

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

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