# CRUD Operations with the Data Grid

You can connect a [data grid widget](https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/data-grid) to a table (from [internal Postgres / external SQL database](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database)) to perform create, read, update, and delete (CRUD) operations directly from the UI. The provided template contains all necessary widget bindings, logic functions, and UI feedback configurations out of the box.

Reference videos: [Part 1](#part-1-data-grid-widget-and-crud-operations) | [Part 2](#part-2-toast-widget-configuration)

## Step-by-Step Guide

{% stepper %}
{% step %}

#### Download the example template

Download the `data-grid-crud.hwt` template file to your local machine.

{% file src="<https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FmljJFeRSCB2CwqWZu454%2Fdata-grid-crud.hwt?alt=media&token=4520c425-1421-4d9f-8f4f-519c9db25726>" %}
{% endstep %}

{% step %}

#### Import the template

1. Open the App Builder.
2. Click on the [versioning tags](https://docs.heisenware.com/app-builder/manage-app-lifecycle#versioning-tags-snapshots) menu.
3. Select Import and upload the `data-grid-crud.hwt` file.
4. Select the imported template and confirm the switch in the popup dialog.
   {% endstep %}

{% step %}

#### Configure the data source

Because the template handles the logic and data bindings, you only need to define your target table (e.g., a `maintenanceTasks` table) and ensure your database is accessible.

1. Select each function and update the table name parameter to match your specific table.
2. Verify your database connection. If using an external SQL database, ensure the connection is active.
3. If you are starting from scratch and do not have an existing table, you can execute the [`defineTable`](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database#definetable) and [`addRows`](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database#addrows) functions once to initialize the schema and write the initial records.
   {% endstep %}
   {% endstepper %}

## Template Architecture

While the template is plug-and-play, understanding the underlying wiring is necessary if you plan to adapt it for more complex requirements.

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FbNhxU1esg4B7WvWx2EpW%2Fimage.png?alt=media&#x26;token=88085ead-1847-4b6b-8854-2a496e57bafe" alt=""><figcaption></figcaption></figure>

* **Data population:** The data output of the [`getTableData`](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database#gettabledata) function binds directly to the data property of the data grid widget to populate the UI.
* **Data grid interactions:** Users interact exclusively with the data grid UI. The grid's native `onInsert`, `onUpdate`, and `onDelete` events bind directly to the inputs of the [`addRow`](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database#addrow), [`updateRow`](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database#updaterow), and [`deleteRow`](https://docs.heisenware.com/app-builder/build-backend/functions-library/storage/relational-database#deleterow) functions.
* **User feedback:** [Modifiers](https://docs.heisenware.com/app-builder/build-backend/modifier) trigger on the execution of the CRUD functions and pass adjustable strings to a [toast widget](https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/toast) to display immediate confirmation or error messages to the operator.

## Reference Videos

### Part 1: Data Grid Widget and CRUD Operations

{% embed url="<https://www.youtube.com/watch?v=m76VLWgqNaw>" %}

### Part 2: Toast Widget configuration

{% embed url="<https://www.youtube.com/watch?v=2tz0Kj0uNbY>" %}