Backgrid.js - Grouped columns

Warning! This extension is not production ready yet, just a mere proof of concept. It lacks documentation, automatic testing and edge-case tests.

To discuss this extension, see this backgrid issue.

Demo

Online demo can be found here

Browser support (tested)

• IE8+
• Firefox
• Chrome

Features

• Easily replace current header with grouped version.
• Generates html5 compliant header elements
• You can either use a seperate top-down column definition to determine the layout or...
• use a bottom-up hierarchy definition

Example

// Set up a grid to use the pageable collection
// Grouped column definition
var colLayout = [
  {
    name: "rowSelect"
  },
  {
    name: "id"
  },
  {
    name: "Personal info",
    label: "Personal information",
    children: [
      {
        name: "name"
      },
      {
        name: "Physical info",
        children: [
          {
            name: "age"
          },
          {
            name: "gender"
          },
          {
            name: "eyeColor"
          }
        ]
      },
      {
        name: "Contact",
        children: [
          {
            name: "Analog",
            children: [
              {
                name: "phone"
              },
              {
                name: "address"
              }
            ]
          },
          {
            name: "Digital",
            children: [
              {
                name: "email"
              }
            ]
          }
        ]
      },
      {
        name: "company"
      }
    ]
  },
  {
    name: "Balance sheet",
    children: [
      {
        name: "Revenues",
        children: [
          {
            name: "domestic"
          },
          {
            name: "exports"
          },
          {
            name: "total"
          }
        ]
      },
      {
        name: "expenditure"
      },
      {
        name: "profits"
      }
    ]
  },
  {
    name: "registered"
  },
  {
    name: "isActive"
  },
  {
    name: "Location",
    children: [
      {
        name: "latitude"
      },
      {
        name: "longitude"
      }
    ]
  }
];

var groupedHeader = Backgrid.Extension.groupedHeader.extend({
  columnLayout: colLayout // Only needed in case of a top-down definition
});

var pageableGrid = new Backgrid.Grid({
  header: groupedHeader,
  columns: columns,
  collection: pageableTerritories
});

// If you want to use the bottom-up definition, the 'nesting' property is supported on the column definition
// Example (same balance sheet structure as above):
var columnDef = [
...
{
  ...
  name: "domestic",
  nesting: ["Revenues", "Balance sheet"]
  ...
},
{
  ...
  name: "exports",
  nesting: ["Revenues", "Balance sheet"]
  ...
},
{
  ...
  name: "total",
  nesting: ["Revenues", "Balance sheet"]
  ...
},
{
  ...
  name: "expenditure",
  nesting: ["Balance sheet"]
  ...
},
{
  ...
  name: "profits",
  nesting: ["Balance sheet"]
  ...
}
...
];

License

Copyright © 2014 Fortes Solutions.

Licensed under the MIT license.

Authors

This extension was created by Wilbert van de Ridder and is currently maintained by Fortes Solutions Team.