# Példa: könyvek táblázata Elementorral

> Lépésről lépésre egy bejegyzéstípusból készített táblázat: hivatkozott cím, metamező és listázási sablon oszlop, majd a Dynamic Table widget.

Ebben a példában egy könyvesbolt oldalához készítesz táblázatot. A táblázat a „Könyvek” egyedi bejegyzéstípusból olvas, és három oszlopot mutat: a könyv címét (a könyv oldalára mutató hivatkozással), a szerzőjét és egy rövid ismertetőt, amit egy listázási sablon ír ki.

## Mire lesz szükséged

- Elementor (az ingyenes változat elég).
- Aktív **JetEngine**.
- Egy egyedi bejegyzéstípus (itt: **Könyvek**, slug: `konyv`), benne egy **Szerző** nevű metamezővel.
- Bekapcsolt **Dinamikus táblázatépítő** modul (**JetEngine → JetEngine → Modulok → Külső modulok**).

## 1. Lekérdezés

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra.
2. Add meg a lekérdezés nevét a **Név** mezőben, például „Könyvek táblázathoz”.
3. A **Lekérdezés típusa** legyen **Bejegyzések lekérdezése**.
4. A **Bejegyzés típusa** mezőbe kezdd el beírni a bejegyzéstípust, majd válaszd ki a listából a **Könyvek** elemet.
5. Kattints a **Lekérdezés hozzáadása** gombra.

![A Könyvek bejegyzéstípusra szűkített lekérdezés](./kepek/elso-lepesek-konyvek-lekerdezes.webp)

*A Könyvek bejegyzéstípusra szűkített lekérdezés* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=edit&id=3)

A kép a mentés után készült: a **Bejegyzés típusa** mezőben a kiválasztott **Könyvek** címke látszik.

## 2. Listázási sablon a harmadik oszlophoz

A táblázat egyik oszlopa egy kész listázási sablonból fog dolgozni. Ezt előbb el kell készítened.

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt egy új lapon, és kattints az **Új hozzáadása** gombra.
2. A felugró ablakban a listázás forrása legyen **Bejegyzések**, a bejegyzéstípus a **Könyvek**, add meg a sablon nevét (például „Könyv ismertető”), és hozd létre az elemet.
3. A sablonba tegyél egy **Dinamikus mező** widgetet, állítsd be a megjelenítendő mezőt (a példában a bejegyzés kivonata), formázd, és mentsd el.

A sablonban képet, galériát vagy gombot is elhelyezhetsz, a táblázat cellája ugyanúgy megjeleníti.

## 3. A táblázat

Nyisd meg a **JetEngine → Tables Builder** oldalt, és kattints az **Új hozzáadása** gombra.

### Általános beállítások

1. Add meg a táblázat nevét a **Név** mezőben, például „Könyvek”.
2. A **Data Query** listából válaszd ki a „Könyvek táblázathoz” lekérdezést.
3. Kattints a **Fetch Data** gombra: ez köti össze a lekérdezést a táblázattal, és ekkor derül ki, milyen oszlopok választhatók.

Ha később másik bejegyzéstípust állítasz be a lekérdezésben, kattints újra a **Re-fetch Data** gombra.

### Oszlopok

Az **Oszlopok** fülön a **New column** gombbal veszel fel három oszlopot.

**Cím, hivatkozással a könyv oldalára**

1. A **Column Name** legyen „Cím”.
2. A **Column Content** értéke **Raw Value**.
3. Az **Adatforrás** legyen **Post/Term/User/Object Field**.
4. A **Select Field** értéke **Bejegyzés ID**.
5. Kapcsold be a **Filter Column Output** kapcsolót, és a **Filter Callback** listából válaszd a **Bejegyzés/oldal hivatkozásának lekérése** elemet.

Így az oszlop a könyv címét írja ki, a könyv önálló oldalára mutató hivatkozással. Ha nem kell kattintható cím, a **Select Field** listából a **Cím** elemet válaszd, és hagyd ki a szűrést.

![A Cím oszlop beállításai](./kepek/elso-lepesek-cim-oszlop.webp)

*A Cím oszlop beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

**Szerző, metamezőből**

1. A **Column Name** legyen „Szerző”, a **Column Content** pedig **Raw Value**.
2. Az **Adatforrás** legyen **Meta mező**.
3. A **Select Field** listából válaszd ki a **Szerző** mezőt. Ha a mező nincs a listában, az **Egyéni mező kulcsa** mezőbe beírhatod a metamező kulcsát.

![A Szerző oszlop beállításai metamezővel](./kepek/elso-lepesek-szerzo-oszlop.webp)

*A Szerző oszlop beállításai metamezővel* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

**Ismertető, listázási sablonnal**

1. A **Column Name** legyen „Ismertető”.
2. A **Column Content** értéke legyen **Sablon**.
3. A **Column template** listából válaszd ki az előbb létrehozott „Könyv ismertető” sablont.

![Az Ismertető oszlop a listázási sablonnal](./kepek/elso-lepesek-sablon-oszlop.webp)

*Az Ismertető oszlop a listázási sablonnal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

### Stílus, előnézet, mentés

A **Table Styles** fülön oszloponként beállíthatod a szélességet, valamint a fejléc és a cellák függőleges és vízszintes igazítását. A **Reload Preview** gombbal megnézheted az előnézetet. Ha minden rendben van, kattints a **Create Table** gombra. Ha a táblázatot inkább az Elementorban akarod formázni, ezen a fülön ne adj meg semmit, mert az itt megadott értékek felülírják a widget stílusát.

## 4. A táblázat az oldalon

1. Hozz létre egy új oldalt (**Oldalak → Új oldal**), és nyisd meg az Elementorral.
2. Húzd be a **Dynamic Table** widgetet.
3. A **Table** listából válaszd ki a „Könyvek” táblázatot.
4. A **Tartalom** fülön kapcsold be, amit szeretnél: az oszlopneveket a fejlécben vagy a láblécben, a vízszintes görgetést sok oszlopnál.
5. A **Stílus** fülön alakítsd ki a táblázat megjelenését, a **Haladó** fülön további beállítások érhetők el.
6. Kattints a **Közzététel** gombra.

![A Dynamic Table widget beállításai az Elementor szerkesztőjében](./kepek/elso-lepesek-elementor-widget.webp)

*A Dynamic Table widget beállításai az Elementor szerkesztőjében* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

A widget beállításairól a [Táblázat megjelenítése](https://hub.hellowp.io/hu/plugins/jet-engine-dynamic-tables-module/megjelenites/) fejezetben találsz részletes leírást.

![A kész táblázat a weboldalon](./kepek/elso-lepesek-konyvek-oldal.webp)

*A kész táblázat a weboldalon* (https://minta-bolt.hu/konyvek/)

A látogató a három oszlopot látja: a címet, a szerzőt és a sablonból kirajzolt ismertetőt. A bekapcsolt **Show column names in table footer** miatt az oszlopnevek alul is megjelennek.

## Tipp

Ha a bejegyzések megjelenítéséhez több lehetőséget szeretnél, a JetElements **Posts** widgetjével is kiírhatod őket.