grouped-rows.md

Grouped rows

Rows can be nested automatically by providing grouping configurations to the grid. For example, if you want your rows to be grouped by 'category' and then by 'company', you can configure your grid with groupings like:

grid.groupings(
  [
    {
      key: _.property('category')
    , rollup: categoryRollup
    , columnId: 'category'
    }

  , {
      key: _.property('company')
    , rollup: companyRollup
    , columnId: 'company'
    }
  ]
)

// ...

function categoryRollup(row, grouping) {
  var children = row.children
    , firstRow = children[0]
  row.category = row.children[0].category
  row.value =  children.map(_.property('value')).reduce(sum)
  return row
}

function companyRollup(row, grouping) {
  var children = row.children
    , firstRow = children[0]
  row.company = firstRow.company
  row.value =  children.map(_.property('value')).reduce(sum)
  return row
}

Where the grouping key is a function that produces a string by which the nested groups will be nested and the rollup is a function that will receive the generated grouping summary row so that you can populate its fields for display. If you define columnIds, the columns will be resorted so that they match the order of the groupings. In our example, the columns with ids category and company will be the first columns on the grid.

Note that generated roll-up rows objects will have a isRollup property set to true which you can use on your formatters to ignore certain fields if they are to be displayed on a roll-up row or the other way around. For example, if you wanted the company field to be only displayed on the roll-up rows, you could specify the column's formatter to use a formatter like

function companyFormat(row) {
  if (row.isRollup) return row.company
  return ''
}

// ...

grid.columns(
  [
  // ...
    , {
        id: 'company'
      , format: companyFormat
      , sort: compareWith(d3.ascending, _.property('company'))
      , label: 'Company'
      }
  // ...
  ]
)