O componentă simplă de reacție pentru a converti orice obiect sau matrice JSON imbricat într-un tabel HTML.

json

Pentru această implementare, vom crea o componentă simplă în React care convertește orice obiect JSON imbricat într-un tabel HTML. Am folosit clase de bootstrap pentru a reda tabelul în acest exemplu. Dar configurarea este menținută la un nivel minim pentru a putea face modificări în funcție de nevoile dvs.

La locul de muncă, dezvoltăm multe panouri de administrare pentru soluțiile noastre de întreprindere. Una dintre problemele legate de crearea unui panou de administrare este redarea datelor din SQL în tabelele de date HTML. Deoarece devine dificil să se potrivească toate informațiile dintr-un rând de tabel și mai multe coloane răspândite pe orizontală, dezvoltatorii folosesc rânduri extensibile pentru a afișa mai multe informații și/sau pentru a crea o pagină separată de detalii care arată informațiile complete pentru entitate.

Desigur, cu cadre precum Laravel, Blade este minunat. Chiar și atunci, veți găsi acest lucru util pentru a vă converti tabelele HTML alimentate de JS.

Nu sunt multe soluții disponibile online care pot converti fără probleme JSON în tabelul HTML. Câteva open-source care există, nu funcționează bine cu bibliotecile, cum ar fi next.js, despre modul în care au gestionat CSS-ul global. Așa că am vrut să împărtășesc o simplă implementare Codepen pentru un eșantion.