Mi az az OverGrid és mire jó?

Mon, Jun 16, 2025 package npm szoftver Web JS

A weboldalunkon találkozhattál már az OverGriddel, esetleg ha az ügyfelünk vagy, akkor jó eséllyel használod is felhasználóként (még ha nem is tudsz róla :) ). Ha viszont nem tudod, vagy nem teljesen érted, hogy mi ez, de amúgy érdekelne, akkor ez a cikk Neked szól.

Mi az az OverGrid?

Egy olyan felületi komponens/építőelem, amely lapozható, kereshető/szűrhető és sorrendezhető táblázatos adatmegjelenítésre képes. Nagyon leegyszerűsítve egy Excel worksheethez hasonlítható, de webes/böngészős platformra optimalizálva.

Mikor használjuk?

Lényegében bármikor, amikor egy rendszerben az adatbázisban tárolt, struktúrált adatok listaszerű megjelenítésére van szükség, tehát adminisztrációs felületeken vagy üzleti szoftverekben jó eséllyel előfordul, ha azokat mi fejlesztettük. Például, ha egy webshop adminisztrációs felületén a termékeket szeretnénk listázni, akkor ez a lista simán megvalósítható OverGriddel tök egyszerű és testreszabható módon.

Miért ezt használjuk, és nem mondjuk a DataTables-t vagy egyéb grid komponenst, ami ugyanezt tudja?

A többi hasonló csomaggal szemben van egy óriási előnye számunkra (és közvetetten az ügyfeleink számára is): mi vagyunk a fejlesztői, ami értelemszerűen azt jelenti, hogy 100% ráhatásunk van, hogy milyen irányba fejlődjön a csomag.

Ez egyben azt is jelenti, hogy pontosan azt és úgy tudunk benne megvalósítani, amit és ahogyan kértek tőlünk, ezzel 100%-ban lefedve és kielégítve az aktuális ügyféligényt. Ha jön egy ügyfél, aki rózsaszín pónikat szeretne az adatai mellé elhelyezni, akkor mi kiadunk egy olyan OverGrid verziót az npm-be, amiben lesz egy “enablePinkPonies” konfigurációs beállítás, majd ledokumentáljuk, hogy bárki használhassa később, aki hasonlót akar. Nem adunk rá több száz órás becslést és nem hekkelünk szét egy strict dobozos rendszert, hogy max. 70%-ban érjük el a kívánt célt, hanem gyorsan, hatékonyan, az OverGrid-et használva lefejlesztjük 100%-ban úgy, ahogy az ügyfél kéri, vagy ahogy Neki a legjobb.

Ez teszi az OverGridet “field tested” komponenssé, azaz kipróbált és élesben letesztelt eszközzé, ami folyamatosan fejlődik az ügyféligények mentén.

Miért jó ez Neked, ha fejlesztő vagy?

Mert Neked már nem kell ilyet fejleszteni nulláról, használhatod a miénket. Azonban ha frontend fejlesztő vagy és hiányolsz valamit belőle, szívesen látunk a contributorok között, csak írj ránk, és megosztjuk Veled a kódot. Ezért is van benne viszonylag kevés natív formatter, mert ezeket projektenként teljesen egyedileg szoktuk kiegészíteni az ügyféligények mentén. Amúgy írhatsz hozzá egyedi formattereket, http data transformereket, vagy amit akarsz, direkt úgy építettük a cuccot, hogy jó API-t adjon a bővítéshez. Ha ilyesmire adnád a fejed, szintén írj ránk - akár külön npm package is kiadható, ami overgrid formattert valósít meg. És ki tudja, akár még közös projektünk is lesz :)

Miért jó ez Neked, ha felhasználó vagy?

Azért, mert a projektek során a júzereinktől is rengeteget tanultunk, és ennek mentén fejlesztettük az UI-t, ami folyamatosan egyre jobb UX-et eredményezett és eredményez. Persze mint mindent, ezt is van még hova fejleszteni, a metodológia azonban már megvan hozzá.

Miért jó ez Neked az OverCode jelenlegi vagy leendő ügyfeleként?

Mert nem kell sem megvárnod a fejlesztését, sem kifizetned azt a komponenst, amit már korábban más projekten lefejlesztettünk, leteszteltünk és validáltattunk a userekkel. Így jelentősen csökkenthető a projekt költsége és átfutási ideje a csomag használatával, minimalizálható a bugok mennyisége, miközben továbbra is 100%-ban egyedi szoftvert kapsz, teljesen egyedi igények alapján. Olyan ez, mintha a dobozos szoftverekből és az egyedi szoftverekből is csak az előnyöket vennénk ki, a hátrányokat nem.

Ráadásul, bizonyos minor verziókig az updateket is megkapod, azaz ha egy másik ügyfelünk rendel tőlünk egy funkciót, amit utólag Te is megkívánsz, akkor egyszerűen megkapod a friss OverGrid package-t az új funkcióval. Tehát valójában tőlünk nem is szoftvert veszel, hanem szolgáltatást :)

Hülye kérdésnek tűnhet így a végére, de miért jó ez nekünk, OverCode-nak?

Mert mi programozók szeretjük úgy érezni, hogy amit egyszer megcsinálunk, az újra felhasználható máshol. Valójában ez tesz minket profibbá a munkánkban, ezzel tudunk üzletileg is fejlődni (ugyanazt a dolgot töredékidő alatt tudjuk előállítani), vissza is adunk vele a fejlesztői közösségnek, amitől egyébként nagyon sokat kapunk így is. Összességében tehát sokkal jobb érzés a lelkünknek, ha így működünk.

És mint tudjuk, a developer happiness a jó kódminőség egyik legfontosabb előfeltétele :)

Technikai részletek (fejlesztőknek)

A csomag npmből telepíthető, Vue3 projektekhez javasoljuk, TailwindCSS használata szintén ajánlott. Typescriptben íródott, a típusdefiníciókat exportálja, lásd a typedoc által generált doksiban.

NPM Package: https://www.npmjs.com/package/@overcodehungary/overgrid

Dokumentáció és DEMO: https://overgrid.overcode.hu/

Typedoc: https://overgrid.overcode.hu/typedoc/index.html

+1: Oké, de mi van a backenden?

Erre is vannak megoldásaink Javaban (Spring Boot), .NET-ben (gridify), és NestJS-ben is, melyek minden funkciót kiszolgálnak az OverGrid frontendnek. De ezek már nem publikus csomagként érhetők el, hanem mi tesszük mellé, ha egyedi szoftvert rendelsz tőlünk.

Kérdésed van? Várjuk: hello@overcode.hu