Hands-on lab · table: demo_items (data jsonb)

Sai CRUD Operations Lab

Mundhu columns/fields select cheyyandi — form and table automatic ga generate avutayi. Taruvatha Insert / Fetch / Update / Delete press chesthe, mee data browser nunchi database varaku ela veltundo animation and asalu SQL query lo kanipistundi.

Step 1 · Columns ni nuvvu design cheyyi

3 fields

Ee list nunchi field add chesthe kinda form and table automatic ga regenerate avutayi.

  • Aa

    Name

    data->>'name' · text

  • 12

    Quantity

    data->>'qty' · numeric

  • 0/1

    Done

    data->>'done' · boolean

Step 2 · Auto-generated form

3 inputs

Step 3 · Auto-generated table

0 rows · 3 cols
NameQuantityDoneactions
Table empty ga undi — pina form fill chesi Insert row press cheyyandi.

Step 4 · Data flow

IDLE

1. Dynamic form

Nuvvu design chesina fields lo type chesina data

2. App code

React values ni JSON object ga marchi client ni call chestundi

3. Cloud API

Secure API request DB ki velthundi

4. demo_items table

data jsonb column lo row insert / update / delete avutundi

Behind the scenes (SQL log + line-by-line meaning)

Inka action cheyyaledu. Item add / edit / delete cheste, ikkada asalu DB ki velle query and daani prathi clause artham kanipistundi.