---
title: "Object Basics | Docs"
description: "Learn how to use the Object Constructor for our web component. There is the component instantiation in markup and the object instantiation in JavaScript."
url: https://www.zinggrid.com/docs/guides/object-basics
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/guides/object-basics.md
mode: provenance
representation: markdown
origin_response_id: 2c52004eeeff82aea0291720bd286f8a
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.721Z
version_nonce: 494f7932dc6f973ca5d6a306d955b9dd
generated_at_utc: 2026-10-23T02:06:59.521Z
response_nonce: 31ce92729eef3e52044c4c752c2cb58c
```

# Object Instantiation
ZingGrid supports component based data instantiation (in HTML) and object based data instantiation (in JavaScript). This exists mostly for convenience for JavaScript developers. We all <del>like</del> **love** JavaScript here! This strong passion for JavaScript is why we offer both solutions to our users. Let's go over some of the basics.

## Object Constructor
The object constructor for ZingGrid is `new ZingGrid(...)`. There are three official parameters for the object constructor. **Their order does not matter**, so you can use the ES6 spread operator `new ZingGrid(...params)` to create the parameters. The order mainly doesn't matter because each argument is a different type, so there can only be one of each type in the constructor at any given time.

Here is an example of what the constructor code would look like:

```javascript
let zgRef = new ZingGrid('gridQuerySelector', {});
```

> **Warning:** When using object instantiation, the ZingGrid library takes care of creating a ``<zing-grid>`` tag and inserting it in the DOM as a child of the container object. What this means is your container _must_ be a ``
``, not a ``<zing-grid>``

### Constructor Arguments

These are the arguments for ZingGrid's object constructor:

Object Constructor Arguments

| Name | Type | Description |
| --- | --- | --- |
| container | String \| DOM Node Ref | If you pass a string as an argument, it will try and search that under document.getElementById(). If you pass a Node reference, it will directly insert a grid into that reference. This should NOT be a ``<zing-grid>`` element. |
| config | Object | An `object` defining the data and configuration properties of your grid. The properties allowed in this object are the same as the reflected attributes. |

### Constructor Argument `config`
Here is an example of what to pass for the constructor argument `config`. The `config` is an object containing reflected attributes to add features to the grid.

> **Note:** The full list of attributes can be found under [`<zing-grid>` attributes](https://www.zinggrid.com/docs/api/tags/zing-grid).

```javascript
let gridConfig = {
  caption: 'Hello World',
  columns: [],
  data: [],
  editor: true,
  filter: true,
  height: '90%',
  infinite: false,
  infiniteSize: 50,
  layout: 'row',
  layoutControls: true,
  pager: 'top',
  pageSize: 5,
  search: true,
  selector: false,
  sort: true,
  src: '/path/to/your.json',
  theme: 'android'
};
```

### Full Object Constructor Example
Here is a full example of how to use the object constructor. First, we define a variable containing the `config` for ZingGrid. In this example, the first argument is `container`, where you want to insert ZingGrid. Then we pass the variable containing the `config` as the second argument.

```javascript
let gridConfig = {
  caption: 'Hello World',
  editor: true,
  pager: true,
  data: [
    {
      "name": "Philip",
      "number": 123
    },
    {
      "name": "David",
      "number": 456
    },
    {
      "name": "Felicity",
      "number": 789
    }
  ]
};
let grid = new ZingGrid(document.querySelector('#yourFirstGrid'), gridConfig);
```

### Alternative Constructors
The following constructors all produce the same functionality as the above sample block. As mentioned earlier, order does not matter. ZingGrid is smart enough to figure out what each argument is (see below); therefore, there is no need memorize the order. So, you can focus on where to place the grid and what you want in it!

```javascript
let gridConfig = {...};

// let grid = new ZingGrid(document.querySelector('#yourFirstGrid'), gridConfig);

// alternative constructors
let grid = new ZingGrid(gridConfig, 'yourFirstGrid');

let grid = new ZingGrid(true, gridConfig, 'yourFirstGrid');
```

### Constructor Reference
The last caveat of the constructor is that omitting string and DOM Node references will cause the constructor to return a reference to the `<zing-grid>` object created. You can then manipulate this object's attributes, like the `config` above, and insert the element into the DOM, like so:

```javascript
let gridConfig = {
  data: [
    {
      "name": "Philip",
      "number": 123
    },
    {
      "name": "David",
      "number": 456
    },
    {
      "name": "Felicity",
      "number": 789
    }
  ]
};
let grid = new ZingGrid(gridConfig);

console.log(`--- Your Grid Reference ${grid} ----`);

grid.element.caption = 'Hello World';
grid.element.editor = true;
grid.element.pager = true;

document.querySelector('#yourFirstGrid').appendChild(grid.element);
```

### Manipulating with API Methods
With the object's reference saved, another way to manipulate ZingGrid is through the library's API methods (see below). ZingGrid provides many methods to turn on features and control grid interactions. [A full list of ZingGrid's methods can be found here](https://www.zinggrid.com/docs/api-methods).

```javascript
let gridConfig = {
  data: [
    {
      "name": "Philip",
      "number": 123
    },
    {
      "name": "David",
      "number": 456
    },
    {
      "name": "Felicity",
      "number": 789
    }
  ]
};
let grid = new ZingGrid(gridConfig);

console.log(`--- Your Grid Reference ${grid} ----`);

grid.setCaption = 'Hello World';
grid.setEditor = true;
grid.setPager = true;

document.querySelector('#yourFirstGrid').appendChild(grid.element);
```

## Loop Use Case
To display multiple grids, create ZingGrids with a for-loop. First, create a `config` containing the data and features you want for the grids. Then, place the object constructor in a for-loop to create multiple grids (see below). Try out the following code and see for yourself!

```javascript
const GridConfig = (data) => {
  return {
    editor: true,
    pager: true,
    pageSize:3,
    data
  }
}

let dbDocument = [
  {
    data: [
      [
        "Philip",
        123
      ],
      [
        "David",
        456
      ],
      [
        "Felicity",
        789
      ]
    ]
  },
  {
    data: [
      {
        "name": "Philip",
        "number": 123
      },
      {
        "name": "David",
        "number": 456
      },
      {
        "name": "Felicity",
        "number": 789
      }
    ]
  },
  {
    data: {
      "entry1": {
        "name": "Philip",
        "number": 123
      },
      "entry2": {
        "name": "David",
        "number": 456
      },
      "entry3": {
        "name": "Felicity",
        "number": 789
      }
    }
  },
  {
    data: [
      {
        "name": "Philip",
        "number": 123,
        "colors": {
          "primary": "red",
          "secondary": "chartreuse"
        }
      },
      {
        "name": "David",
        "number": 456,
        "colors": {
          "primary": "black",
          "secondary": "yellow"
        }
      },
      {
        "name": "Felicity",
        "number": 789,
        "colors": {
          "primary": "blue",
          "secondary": "orange"
        }
      }
    ]
  }
];

// loop through database object
dbDocument.forEach((curVal) => {
  let gridConfig = GridConfig(curVal.data);
  let gridRef = new ZingGrid(gridConfig);
  document.querySelector('#yourFirstGrid').appendChild(gridRef.element)
});
```

### Multiple Grids Example

Here is an example of how a for-loop can be used to display multiple grids at once:

[Example code](https://app.zingsoft.com/demos/embed/P2GHY8YN)