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: Unlike other charts, the data grid chart (and data table) 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.

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)

Get or set the group function for the data grid. 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; })

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])

Get or set the function that formats a group label.

Parameters:
Name Type Argument Description
htmlGroup function <optional>
Source:
Returns:
Type
function | dc.dataGrid
Example
chart.htmlGroup (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);

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;
});