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

Nested objects will produce nested headers by default.

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:

Top

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.

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

Array of Objects Grid

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

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

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>

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

Object of Objects Grid

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

https://app.zingsoft.com/demos/embed/RZMW9MJV
https://app.zingsoft.com/demos/embed/RZMW9MJV

Object of Objects Grid with Defined Columns

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

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

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:

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

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:

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

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:

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

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.

For assigning remote data to the grid, you'll need to reference the src attribute. Learn more about the src attribute here.

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

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

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.

View our 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);
Top

[guides: data types]