Data

ZingGrid applies data in many formats. As long as the data is in a JavaScript array or object, we can probably handle it.

We accept five types of data structures:

1. Array of Arrays [[]]
2. Array of Objects [{}]
3. Object of Objects {key: {}}
4. Array of Nested Objects [{key: {}}]
5. Object of Nested Objects{key: {key: {}}}

Array of Arrays

[
  [ "Philip", 123 ],
  [ "Bender", 456 ]
]

The column headers for the grid default to the index of the field in the data. Keep in mind that arrays in JavaScript have a zero-based index, so the first header will be 0, the second will be 1, and so on.

Array of Arrays Grid

Here is our complete grid with an array of arrays data structure:

Array of Objects

[
  {
    "name": "Philip",
    "number": 123
  },
  {
    "name": "Bender",
    "number": 456
  }
]

The column headers for the grid default to the attribute name of the field in the data. In this example, the headers will be the object properties name and number capitalized.

Array of Objects Grid

Here is our complete grid with an array of objects data structure:

Object of Objects

{
  "Philip": {
    "age": 34,
    "location": "San Diego"
  },
  "Bender": {
    "age": 54,
    "location": "San Francisco"
  }
}

The column headers for the grid default to the record value attribute name. In this example, the headers will be the object properties age and location capitalized.

Note: If you need to render the record key "Philip" and "Bender", you'll need to define your own grid columns, like so:

<zing-grid data='{
  "Philip": {
    "age": 34,
    "location": "San Diego"
  },
  "Bender": {
    "age": 54,
    "location": "San Francisco"
  }
}'>
  <zg-colgroup>
    <zg-column index="recordkey" header="Name"></zg-column>
    <zg-column index="age"></zg-column>
    <zg-column index="location"></zg-column>
  </zg-colgroup>
</zing-grid>

Object of Objects Grid

Here is our complete grid with an object of objects data structure:

Object of Objects Grid with Defined Columns

Here is our complete grid with an object of objects data structure and defined grid columns:

Array of Nested Objects

[
  {
    "name": "Philip",
    "number": 123,
    "colors": {
      "primary": "red",
      "secondary": "chartreuse"
    }
  },
  {
    "name": "Bender",
    "number": 456,
    "colors": {
      "primary": "black",
      "secondary": "yellow"
    }
  }
]

Array of Nested Objects Grid

Here is our complete grid with an array of nested objects data structure:

Object of Nested Objects

{
  "Philip": {
    "number": 123,
    "colors": {
      "primary": "red",
      "secondary": "chartreuse"
    }
  },
  "Bender": {
    "number": 456,
    "colors": {
      "primary": "black",
      "secondary": "yellow"
    }
  },
}

Object of Nested Objects Grid

Here is our complete grid with an object of nested objects data structure:

Accessing Nested Objects

You can access nested index values by explicitly defining columns and using dot syntax in your index value, like so:

<zg-column index="colors.primary" header="colors.primary"></zg-column>
<zg-column index="colors.secondary" header="colors.secondary"></zg-column>

Nested Objects Grid with Defined Columns

Here is our complete grid with defined columns:

data Attribute

ZingGrid provides the data attribute to assign data to the grid. This data must have a valid JSON structure. This is per HTML spec when passing objects to attributes.

Assigning inline data in markup is the most basic form of assigning data.

<zing-grid data='[{key: "value"}]'></zing-grid>

Dynamic Data Assignment

We recommend using markup attributes and elements when building your grid. However, there can be times when you need to interact with the grid with JavaScript. To set the grid's data dynamically, there are two supported ways: attribute manipulation and via the ZingGrid API.

Attribute Manipulation

Assigning data through JavaScript as an object is the most practical use of assigning data and you can achieve this through direct attribute manipulation (see below). This will assign a string to the HTML attribute so the data string will be in the markup. Note: this is not good for large datasets.

const zgRef = document.querySelector('zing-grid');
const data = [{key: 'value'}];
// target attribute directly and stringify your data structure
zgRef.setAttribute('data', JSON.stringify(data));

ZingGrid API

The most efficient way of assigning dynamic data is by using the API method setData() (see below). This method is property assignment (instead of attribute manipulation), which means data is being assigned to the internal ZingGrid component data property directly.

const zgRef = document.querySelector('zing-grid');
const data = [{key: 'value'}];
// target grid and assign data directly
zgRef.setData(data);