---
title: "CRUD Read | Docs"
description: "ZingGrid has a predefined set of default behavior for CRUD functionality. This CRUD functionality can be extended or overridden."
url: https://www.zinggrid.com/docs/crud/read
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/crud/read.md
mode: provenance
representation: markdown
origin_response_id: ed51f71c5d5c77c516854d9d30278ee6
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.662Z
version_nonce: 3cdd4a88640a684b1d279b971a89cb8c
generated_at_utc: 2026-10-31T09:21:58.981Z
response_nonce: 7edb4fd4ac2819991b1f91e9b3e68185
```

# CRUD Read

ZingGrid has default behavior for **read** actions. There are expected inputs and outputs for a **read** action. You can, of course, extend or override this default behavior by adjusting the `src` attribute and other attributes in the `<zg-param>` element.

## CRUD Defaults

The default send and return values for CRUD actions are:

CRUD Defaults

| Action | Type | Response Codes: Success | Response Codes: Error | Returns |
| --- | --- | --- | --- | --- |
| Create row | POST | 200 - 299 | \>= 400 | **Expected Return Contents**
• Entire dataset
• Single record **or** ID of record |
| Read data | GET | 200 - 299 | \>= 400 | Expects a JSON or dataset response. |
| Update row | PUT | 200 - 299 | \>= 400 | Response is not read. |
| Update cell | PATCH | 200 - 299 | \>= 400 | Response is not read. |
| Delete row | DELETE | 200 - 299 | \>= 400 | Response is not read. |

## Override Defaults

If you need to override any default **read** actions, you can use `readOptions` to adjust all actions against the initial and subsequent fetches from the grid. [You can read more about available `readOptions` values here](https://www.zinggrid.com/docs/api-zg-param#zg-param-name-readOptions).

> **Note:** Remember, since `value` is an HTML attribute, it must be in valid JSON format and stringified.

Here is a list of available `readOptions`:

```javascript
{
  // to change the read method of the action to POST
  "method": "POST",
  // takes a JSON packet to be sent to the server in place of the action
  // in this case user_id is always one.
  "body": {user_id:1},
  "requestType": "application/json",
  "exclude": "",
  "headers": {"Authorization": "Basic super-secrete-key"},
  "mode": "no-cors",
  "responseType": "",
  "src": "",
  "queryString": ""
}
```

The body value can be a static JSON, like so:

```html
<!-- basic read option with static body -->
<zg-param name="readOptions" value='{"body": {"user_id":1}}'></zg-param>
```

The body value can also be a function which returns an object, like so:

```html
<!-- basic read option with function reference for body -->
<zg-param name="readOptions" value='{"body": "_fncStringReference"}'></zg-param>
```
```javascript
// function returns an object
function _fncStringReference(record) {
  return {
    // to change the read method of the action to POST
    method: 'POST',
    // takes a JSON packet to be sent to the server in place of the action
    // in this case user_id is always one.
    body: {user_id:1},
    requestType: 'application/json',
    exclude: '',
    headers: {"Authorization": "Basic super-secrete-key"},
    mode: 'no-cors',
    responseType: '',
    src: '',
    queryString: ''
  }
}
```

## GET Data

For a GET request to work, you will need to point your grid to a remote data source. You can achieve this through the `src` attribute or a combination of `<zg-data>` and `<zg-param>` tags. We have extensive docs about connecting to remote data sources in our [Getting Started section](https://www.zinggrid.com/docs/remote-data#connecting-data).

You can point to a top level data structure, like so:

```html
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/users"></zg-data>
</zing-grid>
```

You can also use `recordPath` to point to a nested data structure, like so:

```html
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/company">
    <zg-param name="recordPath" value="employees"></zg-param>
  </zg-data>
</zing-grid>
```

### Remote Data Grid

Here is our complete grid pointing to a remote data source:

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

## Authorization

If you need to add an Authorization header, you can achieve this by adding a `<zg-param>` element and adding a `header` attribute to it. [You can read more about available `<zg-param>` values here](https://www.zinggrid.com/docs/api-zg-param#zg-param-name-headers).

You can directly add the Authorization header in the markup with the `header` value (see below). This will set the Authorization header for **ALL** requests from this grid.

```html
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/company">
    <zg-param name="recordPath" value="users"></zg-param>
    <zg-param name="header" value='{"Authorization": "Basic super=secret=hash"}'></zg-param>
  </zg-data>
</zing-grid>
```

## API Key

If you need to add an API token header, you can achieve this by adding a `<zg-param>` element and adding a `header` attribute to it. [You can read more about available `<zg-param>` values here](https://www.zinggrid.com/docs/api-zg-param#zg-param-name-headers).

You can directly add the header in the markup with the `header` value. This will set the `API-key` header for **ALL** requests from this grid.

```html
<zing-grid>
  <zg-data src="https://zinggrid-docs-crud-basics.glitch.me/company">
    <zg-param name="recordPath" value="users"></zg-param>
    <zg-param name="header" value='{"API-key": "super=secret=hash"}'></zg-param>
  </zg-data>
</zing-grid>
```

> **Note:** If you are using a third party API and have an API token, it is best practice to use a server as a proxy so you don't expose the API key to the client. You can use the following [glitch example](https://glitch.com/~zinggrid-freshdesk) as a way to abstract an API key away.