# Táblázat létrehozása

> Lekérdezés készítése, majd a táblázat általános beállításai, oszlopai és stílusai a Tables Builderben.

## Lekérdezés készítése

A táblázat adatforrása egy JetEngine-lekérdezés. Hozz létre egyet a **JetEngine → Lekérdezéskészítő** oldalon. A példában egyszerű bejegyzéslekérdezést használunk.

1. Kattints az **Új hozzáadása** gombra.
2. Add meg a **Név** mezőben a lekérdezés nevét, például „Bejegyzések táblázathoz”.
3. A **Lekérdezés típusa** listából válaszd a **Bejegyzések lekérdezése** elemet.
4. A **Bejegyzés típusa** mezőben add meg a bejegyzéstípus slugját (például `post`). Ha üresen hagyod, minden típusú bejegyzés bekerül, az oldalak is.
5. Kattints a **Lekérdezés hozzáadása** gombra.

![Az új lekérdezés űrlapja kitöltve](./kepek/lekerdezes-uj.webp)

*Az új lekérdezés űrlapja kitöltve* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

Figyeld meg, hogy a lekérdezés típusa után megjelennek a típushoz tartozó beállítások, itt a bejegyzéslekérdezésé.

## A táblázat felvétele

Nyisd meg a **JetEngine → Tables Builder** oldalt. A lista elején az **Új hozzáadása** gomb van, alatta a már meglévő táblázatok: a nevük, a lekérdezésük, és a **Szerkesztés**, **Másolás**, **Törlés** műveletek.

![A táblázatok listája egy táblázattal](./kepek/tablak-lista.webp)

*A táblázatok listája egy táblázattal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables)

Üres listánál a „No tables found” felirat látszik.

![Az üres táblázatlista](./kepek/tablak-ures-lista.webp)

*Az üres táblázatlista* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables)

Az **Új hozzáadása** gombbal nyílik a táblaszerkesztő három füllel: **Általános beállítások**, **Oszlopok** és **Table Styles**. A szerkesztő jobb oldalán a **Create Table** gomb menti a táblázatot.

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

| Beállítás | Mit csinál |
| --- | --- |
| **Név** | A táblázat neve, ez látszik az adminisztrációs felületen és a kiválasztólistákban. |
| **Data Query** | A táblázat adatforrása: válassz egy korábban létrehozott lekérdezést. A lista alatt az **Edit selected query** hivatkozással szerkesztheted a kiválasztottat, a **Create new query** hivatkozással újat hozhatsz létre. |
| **Allow CSV Export** | Bekapcsolva a táblázat tartalma CSV-fájlként letölthető a frontenden. |
| **Fetch the data** | A **Fetch Data** gomb lekér egy mintát az adatokból, hogy megkapd az összes lehetséges oszlopot, és megjelenhessen az előnézet. Ha már lekérted, a gomb felirata **Re-fetch Data**. |

![Az Általános beállítások fül kitöltve](./kepek/tabla-altalanos.webp)

*Az Általános beállítások fül kitöltve* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

Az adatlekérést a lekérdezés kiválasztása után végezd el. Ha később másik bejegyzéstípust állítasz be a lekérdezésben, kattints újra a **Re-fetch Data** gombra, különben az oszlopok listája a régi adatokat mutatja.

## Oszlopok

Az **Oszlopok** fülön a **New column** gombbal veszel fel oszlopot. Minden oszlop külön, lenyitható blokk. A blokk fejlécében az oszlop neve látszik. A bal szélén lévő fogantyúval húzva módosíthatod az oszlopok sorrendjét, a jobb szélen pedig a másolás és a törlés ikon van.

Minden oszlopnál ezeket kell megadnod:

| Beállítás | Mit csinál |
| --- | --- |
| **Column Name** | Az oszlop neve, ez jelenik meg a táblázat fejlécében. |
| **Column Content** | A megjelenített tartalom típusa: **Raw Value** (nyers érték) vagy **Sablon**. |

### Raw Value

Ha a **Raw Value** értéket választod, megjelenik az **Adatforrás** mező. Három forrás közül választhatsz.

| Adatforrás | Mit választhatsz |
| --- | --- |
| **Fetched Column** | A korábban lekért oszlopok egyike (például `ID`, `post_title`, `post_date`). A **Select Column** mezőben jelölöd ki. Ha a lista elavult, kattints a **Re-fetch Data** gombra az **Általános beállítások** fülön. |
| **Post/Term/User/Object Field** | Az aktuális objektum egy mezője, például a bejegyzés címe, dátuma, tartalma, kivonata vagy a kifejezés, illetve a felhasználó adatai. A **Select Field** mezőben jelölöd ki. |
| **Meta mező** | Egy JetEngine metamező, amelyet az oszlopban meg akarsz jeleníteni. |

A **Fetched Column** nem működik WooCommerce-szel, mert a WooCommerce más adatszerkezetet használ, és az adatbázisból így nem olvasható ki az érték. WooCommerce-adatokhoz használd a **Post/Term/User/Object Field** vagy a **Meta mező** forrást.

Minden **Raw Value** oszlopnál két további kapcsoló van:

| Beállítás | Mit csinál |
| --- | --- |
| **Filter Column Output** | Bekapcsolva megjelenik a **Filter Callback** lista, ahonnan visszahívási függvényt választhatsz az érték átalakításához (például **Dátum formázása**, **Szám formázása**). |
| **Customize Column Output** | Bekapcsolva megjelenik az **Output Format** mező, ahol az oszlop tartalmának formátumát adod meg. Az érték helyére írj `%s` jelet. Ha az értéket többször is meg akarod jeleníteni, használd a `%1$s` jelölést. |

Az **Output Format** mezőbe például ezt írhatod: `Közzétéve: %s`.

![Három oszlop a táblaszerkesztőben, a harmadiknál bekapcsolt szűrővel és formátummal](./kepek/tabla-oszlop-szuro.webp)

*Három oszlop a táblaszerkesztőben, a harmadiknál bekapcsolt szűrővel és formátummal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

A képen az első oszlop **Fetched Column** forrást használ, a másik kettő a **Post/Term/User/Object Field** forrást. A harmadiknál a **Filter Column Output** és a **Customize Column Output** is be van kapcsolva: a **Dátum formázása** visszahívás mellett megjelenik a **Formátum** mező, ahová a dátum kívánt formátumát írhatod. Üresen hagyva az alapértelmezett formátum érvényes.

### Sablon

A **Sablon** tartalomtípusnál egy listázási sablont (például JetEngine-listaelemet) választasz, és az oszlop minden cellája ezzel a sablonnal készül. Ezt általában képek vagy gombok megjelenítésére használják.

## Table Styles

A **Table Styles** fülön az oszlopok szélességét és a cellák igazítását adhatod meg. Az oszlopok neve szerinti lenyitható blokkokban találod a beállításokat.

| Beállítás | Mit csinál |
| --- | --- |
| **Szélesség** | Az oszlop legnagyobb szélessége. Bármilyen CSS-érték megadható, például `100px`, `20%` vagy `10vw`. |
| **Címsor** és **Cell** fül | Külön állíthatod a fejléc és a törzs celláinak igazítását. |
| **Vertical Align** | A cella függőleges igazítása: **Felül**, **Középen**, **Alul**. |
| **Horizontal Align** | A cella vízszintes igazítása: **Bal**, **Középre**, **Jobb**. |

![A Table Styles fül egy oszlop beállításaival](./kepek/tabla-stilusok.webp)

*A Table Styles fül egy oszlop beállításaival* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

Itt megadott stílusok felülírják a Dynamic Table widget, blokk vagy elem stílusait, ezért ha a táblázatot csak a szerkesztőben akarod formázni, ne állíts be itt semmit.

## Előnézet és mentés

A **Reload Preview** gombbal bármikor frissítheted az előnézetet. A táblázat a szerkesztő alatt jelenik meg, ugyanazokkal az oszlopokkal és formátummal, mint később az oldalon.

![A táblázat előnézete a szerkesztő alatt](./kepek/tabla-eloenezet.webp)

*A táblázat előnézete a szerkesztő alatt* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-tables&table_action=add)

Ha elégedett vagy az eredménnyel, kattints a **Create Table** gombra. Meglévő táblázat szerkesztésekor ugyanez a gomb menti a módosításokat.