Docs

Data Types

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: {}}}

Nested objects will produce nested headers by default.

Arrays of Arrays

[
  [
    "Aquarius",
    "January 20 - February 18",
    "Air"
  ] ...
]

Arrays of Objects

[
  {
    "Aquarius",
    "January 20 - February 18",
    "Air"
  } ...
]

Objects of Objects

{
  "entry1": {
    "sign": "Aquarius",
    "date": "January 20 - February 18",
    "element": "Air"
  } ...
}

Nested Objects

[
  "entry1": {
    "sign": "Aquarius",
    "info": {
      "date": "January 20 - February 18",
      "element": "Air"
      }
  } ...
]
Top

[data] Attribute

ZingGrid provides data attribute to assign string data to the grid. This datamust a valid JSON structure. This is per HTML spec when passing Objects to attributes.

For assiging remote data to the grid please reference src attribute here.

HTML String Data

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

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

[data] Assigment

We recommend using markup attributes and elements when building your grid. However, there may 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

Assigning data through Javascript as an object is the most practical use of assigning data. You can achieve that through direct attribute manipulation. This will assign a string to the HTML attribute so the data string will be in the markup. 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

Use API method setData(). This is the most efficient way as it is not attribute manipulation, but property assignment. This means data is being assigned to the internal ZingGrid component data property directly.

View the API docs to see all of the data methods.

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

Array of Arrays

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.

Sample Data

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

Array of Objects

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 capitalized: Name and Number.

Sample Data

[
  {
    "name": "Philip",
    "number": 123
  },
  {
    "name": "Bender",
    "number": 456
  }
]
https://app.zingsoft.com/demos/embed/XS3BVAYG
https://app.zingsoft.com/demos/embed/XS3BVAYG
Top

Camel-case (employeeName) and underscore (employee_name) property names will output as Employee Name.

Object of Objects

Sample Data

{
  "Philip": {
    "age": 34,
    "location": "San Diego"
  },
  "Bender": {
    "age": 54,
    "location": "San Francisco"
  }
}
https://app.zingsoft.com/demos/embed/RZMW9MJV
https://app.zingsoft.com/demos/embed/RZMW9MJV
Top

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

<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>
https://app.zingsoft.com/demos/embed/CX9BJBAB
https://app.zingsoft.com/demos/embed/CX9BJBAB
Top

You can see the complete list of options to customize grid columns on the API Elements page.

Nested Objects

Nested objects can be used with either Arrays or Objects.
The property chain becomes a hierarchical header for the nested properties (nested headers).

Array - Sample Data

[
  {
    "name": "Philip",
    "number": 123,
    "colors": {
      "primary": "red",
      "secondary": "chartreuse"
    }
  },
  {
    "name": "Bender",
    "number": 456,
    "colors": {
      "primary": "black",
      "secondary": "yellow"
    }
  }
]
https://app.zingsoft.com/demos/embed/Y9TR42B0
https://app.zingsoft.com/demos/embed/Y9TR42B0
Top

Accessing Nested Objects

You can access nested index values by explicitly defining columns and use dot syntax in your index value.

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

https://app.zingsoft.com/demos/embed/R9G0I90E
https://app.zingsoft.com/demos/embed/R9G0I90E
Top

Object - Sample Data

{
  "Philip": {
    "number": 123,
    "colors": {
      "primary": "red",
      "secondary": "chartreuse"
    }
  },
  "Bender": {
    "number": 456,
    "colors": {
      "primary": "black",
      "secondary": "yellow"
    }
  },
}
https://app.zingsoft.com/demos/embed/MGC6Y12I
https://app.zingsoft.com/demos/embed/MGC6Y12I
Top