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

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:

List of members of the european parliament

Parameters:

Name	Type	Argument	Description
parent	String\|node	d3.selection
chartGroup	String		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:

dc.baseMixin

Source:

data-grid.js,line 1

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		0

Source:

data-grid.js,line 148

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

Source:

data-grid.js,line 165

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:

data-grid.js,line 136

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

Source:

data-grid.js,line 198

Returns:

Type

function|dc.dataGrid

Example

chart.html(function (d) { return '<div class='item '+data.exampleCategory+''>'+data.exampleString+'';});

htmlGroup( [htmlGroup])

Parameters:

Name	Type	Argument	Description
htmlGroup	function

Source:

data-grid.js,line 236

Returns:

Type

function|dc.dataGrid

htmlSection( [htmlSection])

Get or set the function that formats a section label.

Parameters:

Name	Type	Argument	Description
htmlSection	function

Source:

data-grid.js,line 218

Returns:

Type

function|dc.dataGrid

Example

chart.htmlSection (function (d) { return '

'.d.key . 'with ' . d.values.length .' items

'});

order( [order])

Get or set sort the order function.

Parameters:

Name	Type	Argument	Default	Description
order	function		d3.ascending

Source:

data-grid.js,line 268

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

data-grid.js,line 112

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		999

Source:

data-grid.js,line 182

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

Source:

data-grid.js,line 247

Returns:

Type

function|dc.dataGrid

Example

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