Tabeller i WordPress er overraskende enkle ved første øyekast. Så lenge du bare trenger ett eller to statiske rutenett for hele nettstedet, holder det med manuell HTML. Men så snart du står overfor regelmessige dataoppdateringer, import fra Excel eller Google Sheets, eller kolonnesortering, blir de innebygde metodene til endeløs kodekrangling.

Verre er det at nettstedet ditt er responsivt, men HTML-tabeller er det ikke. På mobilskjermer faller de fra hverandre, krever horisontal rulling og ødelegger hele layouten. Å legge til interaktivitet (filtre, søk, redigering i frontend) med standard WordPress-verktøy er praktisk talt umulig uten å hyre en utvikler.

wpDataTables er en plugin som løser alle disse problemene med én enkelt installasjon. Ingen kode, full responsivitet ut av boksen, dusinvis av datakilder og visualisering gjennom diagrammer. Den brukes av mer enn 80 000 selskaper, og den gratis Lite-versjonen har blitt installert over 60 000 ganger på WordPress.org. La oss se nærmere på hva den kan gjøre og hvordan du jobber med den.

💡 Rask oversikt:

• Installer wpDataTables fra CodeCanyon og aktiver den på nettstedet ditt.
• Opprett en tabell fra CSV, Excel, Google Sheets, MySQL, JSON, XML eller manuelt, alle kilder fungerer.
• Konfigurer utseendet: farger, fonter, justering, responsiv oppførsel på mobil.
• Sett inn den ferdige shortcoden i et innlegg eller en side, så vises tabellen umiddelbart med filtrering, sortering og søk.
• Om nødvendig kan du bygge et diagram basert på den samme tabellen og legge det til på samme måte.

Hva er problemet med HTML-tabeller i WordPress

Standardmåten å sette inn tabeller på er HTML-tagger i Tekstredigering-fanen. Grunnstrukturen ser slik ut:

1
<table style="width: 100%;">
2
<tbody>
3
<tr>
4
<th style="width: 33%;">First</th>
5
<th style="width: 34%;">Second</th>
6
<th style="width: 33%;">Third</th>
7
</tr>
8
<tr>
9
<td>Jack</td>
10
<td>Jackson</td>
11
<td>25</td>
12
</tr>
13
<tr>
14
<td>Jane</td>
15
<td>Jenson</td>
16
<td>30</td>
17
</tr>
18
</tbody>
19
</table>

Resultatet er en enkel tabell med tre kolonner. Ser greit ut hvis du har én på nettstedet ditt og ikke planlegger å oppdatere den.

Men tilnærmingen har tre grunnleggende problemer. For det første: HTML-tabeller er statiske. Data er hardkodet, og hver endring betyr at du må redigere koden på nytt. For det andre: responsivitet. Temaet kan være flytende, men <table> er det ikke. På en telefon ser brukerne avkuttede kolonner eller horisontal rulling. For det tredje: ingen filtre, ingen sortering, ingen søk, bare et dødt rutenett.

Nettstedet ditt er responsivt. Tabellene dine er det ikke.

Manuell dataimport fra Excel eller Google Sheets hjelper heller ikke: kopiering og liming fra regneark inn i WordPress gjør formateringen til kaos. Hvis du har mange tabeller og de oppdateres ofte, bruker du tid på å kjempe med layout i stedet for å jobbe med innhold.

Opprett tabeller uten kode med wpDataTables

wpDataTables er en premium-plugin som gjør WordPress til en fullverdig motor for arbeid med tabeller og diagrammer. Ikke en eneste linje med kode. Installer den, velg en datakilde, konfigurer utseendet, så er tabellen klar til å settes inn med en shortcode.

Pluginen distribueres via CodeCanyon etter modellen «kjøp én gang, bruk for alltid». Prisene starter på $49 per år for én domenelisens (Starter-plan). Det finnes tre høyere planer: Standard, Pro og Developer, som skiller seg i antall domener og avanserte funksjoner som tilkobling til flere databaser og WooCommerce-integrasjon. Den gratis Lite-versjonen er tilgjengelig i WordPress.org-katalogen med grunnleggende funksjonalitet.

🔗 Mer om wpDataTables | 🔗 Live-demo

Utviklerne fokuserte på tre ting: kildefleksibilitet, dyp tilpasning og arbeid med levende data. La oss gå gjennom nøkkelfunksjonene.

Flere datakilder

Pluginen henter data fra hvor som helst. Excel, CSV, Google Sheets, XML, JSON, serialiserte PHP-arrays og direkte MySQL-spørringer er alle tilgjengelige når du oppretter en tabell. Du kan fylle en tabell manuelt fra bunnen av via backend-redigeringsverktøyet. Eller koble til en sanntidskilde slik at tabellen oppdateres dynamisk ved hver sideinnlasting.

MySQL fortjener spesiell omtale. Du skriver en spørring, og pluginen gjengir resultatet som en sorterbar tabell med søk. Separate tilkoblinger til MS SQL og PostgreSQL støttes, der hver tabell kan hente data fra sin egen server. For prosjekter med distribuert arkitektur løser dette problemet med datakonsolidering uten mellomliggende ETL.

Avansert tilpasning og responsiv layout

Tabelldesign settes sammen med avkrysningsbokser og fargevelgere, ingen CSS nødvendig. Innstillingene omfatter typografi, justering, dato- og tidsformater og grensesnittspråk. Det finnes ferdige tabellskall: lilla, mørk, blå. For komplekse tilfeller finnes det felt for egendefinert JS og CSS.

Responsivitet er implementert uten kompromisser. Utvidelsen presser ikke bare tabellen til skjermbredden, du bestemmer hvordan den oppfører seg på mobil. Du kan aktivere fleksibel kolonneskjuling, legge til horisontal rulling eller begrense maksimal bredde. Tabellen forblir lesbar på alle enheter.

Filtre for effektivt søk

Når du oppretter en tabell, aktiverer du filtre, og brukerne får muligheten til umiddelbart å avgrense utvalget etter hvilken som helst kolonne. For store datasett endrer dette opplevelsen radikalt: i stedet for å rulle over tre skjermer, taster en person inn en parameter og ser bare relevante rader.

Filtrene fungerer på tjenersiden. Hver brukerhandling øker beregningsbelastningen på databasen, så utvidelsen lar deg deaktivere filtrering der den er overflødig. Balansen mellom hastighet og bekvemmelighet konfigureres per tabell.

MySQL-redigering fra frontend

En unik funksjon: ved å aktivere et alternativ på Redigeringsfanen lar du brukere redigere data direkte fra nettstedets frontend. Dette er ikke bare kosmetisk, endringer skrives til databasen. Tilgang konfigureres etter roller: alle besøkende, bare registrerte brukere eller bestemte grupper.

Det finnes mange scenarioer: kunder oppdaterer sine oppføringer i en CRM-tabell, ansatte markerer oppgavestatuser, abonnenter legger til i et delt register. Ikke noe separat adminpanel, ingen opplæring av brukere i WordPress.

Visualisering gjennom diagrammer

Folk leser visualiseringer størrelsesordener raskere enn tall i tabellform. wpDataTables bygger dynamiske diagrammer basert på Google Charts, HighCharts eller Chart.js, du angir ganske enkelt kildetabellen og kobler kolonner til diagramaksene.

Det finnes mer enn et dusin diagramtyper: linje, sektor, kolonne, histogram, spredning. Etter konfigurasjon får diagrammet sin egen kortkode og settes inn i et innlegg uavhengig av tabellen. Oppdateres kildedataene, tegnes diagrammet automatisk på nytt. Perfekt for bloggere med månedlige inntektsrapporter og for bedriftsdashbord.

Hvordan lage en responsiv tabell: trinn-for-trinn-guide

Teorien er klar, la oss gå over til praksis. Tre trinn skiller deg fra en fungerende tabell på nettstedet ditt.

Trinn 1: installer wpDataTables

Utvidelsen kjøpes på CodeCanyon. Etter betaling går du til Nedlastinger-delen på kontoen din, finner wpDataTables og laster ned filen merket «Installable WordPress file only». I WordPress-administrasjonen går du til Utvidelser → Legg til ny → Last opp utvidelse, velger den nedlastede ZIP-filen og aktiverer.

For automatiske oppdateringer må du oppgi varekjøpskoden fra CodeCanyon. Du trenger den også for tilgang til premium support det første året etter kjøp.

Trinn 2: opprett en tabell

Et nytt menyelement kalt wpDataTables dukker opp i sidefeltmenyen i WordPress. Klikk på det, deretter på den blå Legg til-knappen. Utvidelsen vil tilby deg å velge en metode for tabellopprettelse: importer fra CSV/Excel, koble til Google Sheets, opprett manuelt, SQL-spørring eller lenke til et eksternt API.

For demonstrasjonens skyld, la oss ta CSV. Last opp filen, utvidelsen gjenkjenner skilletegn automatisk og viser en forhåndsvisning. På neste skjermbilde angir du tabellnavnet og redigerer kolonner om nødvendig: gi nytt navn, slett unødvendige, legg til nye.

Det siste skjermbildet er finjustering. Her aktiverer du tabellverktøy (utskrift, kopier, eksport til PDF/Excel), filtrering og frontend-redigering. Alle endringer vises i live-forhåndsvisningen til høyre. Klikk Lagre, tabellen er klar.

Trinn 3: sett inn kortkoden i et innlegg eller en side

Etter lagring vil utvidelsen gi deg en kortkode som [wpdatatable id=X]. Kopier den og lim den inn i et hvilket som helst WordPress-innlegg eller -side, det er alt. Tabellen vil vises på nettstedet med alle aktiverte funksjoner: sortering, søk, filtre.

Resultatet ser du i skjermbildet over: filtrering er aktiv, søk fungerer, kolonner sorteres ved klikk. Ikke en eneste kodelinje utover en kort kortkode. Du ville brukt en time på å bygge den samme tabellen med HTML, og fortsatt uten interaktivitet.

Hvordan bygge et diagram basert på en tabell

Når tabellen er klar, åpner du den i listen og klikker Opprett et diagram. Velg en visualiseringstype: kolonne, sektor, linje, punkt, mer enn et dusin varianter tilgjengelig totalt.

I neste trinn angir du kildetabellen og mapper kolonner til akser. For et kolonnediagram trenger du minst to kolonner: kategorier og verdier. Numeriske kolonner kan filtreres med en områdeglidebryter, nyttig når tabellen har hundrevis av rader, men du bare trenger å vise en del av dem i diagrammet.

Det tredje skjermbildet er visuelle innstillinger. Bredde, høyde, bakgrunn, rammer, skrifttyper, seriefarger, etiketter, verktøytips ved musepeker. Konfigurer, lagre, kopier diagramkortkoden og sett den inn i innhold ved siden av tabellen eller separat.

Diagrammer er dynamisk koblet til tabellen. Kildedata endres, diagrammet bygger seg selv opp på nytt. Ingen eksport til Excel, manuell oppdatering av skjermbilder eller annen rutine.

Utvidelser for tilleggsfunksjonalitet

Grunnfunksjonaliteten er nok for de fleste oppgaver. Men hvis du trenger spesifikke ting, dekker økosystemet av tillegg nisjescenarioer.

Kraftfulle filtre. Kaskadefiltrering (venstre mot høyre: valgt kategori, underkategorifilter oppdateres), fasettsøk, skjuling av tabellen inntil parametere er valgt, og live-søk mens du skriver. Aktiveres med én avkrysningsboks i innstillingene.

Rapportbygger genererer Word- eller Excel-dokumenter direkte fra tabelldata. Scenario: ansatte fylte ut tabellen via frontend, du klikket på en knapp, ferdig månedsrapport for utskrift. Nyttig for timelister, fakturaer og regelmessig analyse.

Formidable Forms. Skjemaer samler data fra brukere, programtillegget gjør automatisk hver innsending om til en tabellrad. Skjemafelt, tabellkolonne. Ingen mellomliggende eksport.

Gravity Forms. Samme mekanikk, men for den mest populære WordPress-skjemabyggeren. Etter integrasjon blir Gravity Forms en ekstra datakilde når du oppretter en tabell. Frontend-redigering av poster opprettet via skjemaer støttes.

Abonnementsplan og priser

wpDataTables har et enkelt prisoppsett med fire nivåer:

Alle planer inkluderer ett år med premium support og månedlige oppdateringer. Lisensen er livsvarig: hvis du ikke fornyer, fortsetter programtillegget å fungere, men du mister tilgang til oppdateringer og support. Det er en 15-dagers pengene-tilbake-garanti.

Den beste måten å evaluere programtillegget før kjøp er den live sandkassen på wpDataTables-nettstedet. Du får full tilgang til backend: opprett tabeller, bygg diagrammer, eksperimenter med innstillinger. Ingen videodemoer og skjermbilder, ekte prøvekjøring i nettleseren.

For en rask start finnes det en gratis Lite-versjon på WordPress.org (60 000+ aktive installasjoner). Funksjonaliteten er begrenset, men tilstrekkelig til å forstå om programtillegget passer din oppgave.

⁉️🤔 Ofte stilte spørsmål

Må jeg kunne kode for å jobbe med wpDataTables?

Nei, alle tabeller og diagrammer opprettes gjennom et visuelt grensesnitt, en veiviser guider deg fra kildevalg til innsetting av shortcode. Felt for egendefinert JS og CSS finnes, men de er valgfrie. Utviklere vil sette pris på muligheten til å skrive egne SQL-spørringer, koble til eksterne databaser og bruke REST API for å hente data fra tredjepartstjenester.

Hva skjer med tabeller etter fjerning av programtillegget?

Som standard lagres tabeller i databasen selv om du deaktiverer eller sletter wpDataTables. Ved reinstallering gjenopprettes de. Dette kan konfigureres: i alternativer kan du velge fullstendig sletting av data sammen med programtillegget. Tabeller er ikke permanent knyttet til programtillegget, du kan alltid eksportere data til CSV og overføre dem til et annet verktøy.

Hvordan skiller betalversjonen seg fra Lite?

Lite-versjonen tillater opprettelse av tabeller fra CSV, Excel, Google Sheets, JSON og XML, samt manuelt. Grunnleggende sortering og søk er tilgjengelig. Men mangler: MySQL-spørringer, tilkobling til flere databaser, diagrammer, frontend-redigering, filtrering, WooCommerce-integrasjon og alle tillegg. Hvis du håndterer data fra eksterne kilder og ønsker å bygge diagrammer, trenger du betalversjonen. For statiske tabeller vil Lite sannsynligvis være tilstrekkelig.

Støtter programtillegget WooCommerce?

Ja, fra og med Standard-planen. Du kan opprette dynamiske produkttabeller som automatisk oppdateres når WooCommerce-katalogen endres. Kunder får en sorterbar, filtrerbar produktliste med gjeldende priser og lagerbeholdning. For butikker med store vareutvalg erstatter dette et eget katalogtillegg.

Hvor mange tabeller kan jeg opprette?

Så mange du trenger. Ingen plan begrenser antall tabeller og diagrammer. Den eneste lisensbegrensningen er antall domener der programtillegget er aktivert.

Hva du bør velge for din oppgave

wpDataTables dekker hele spekteret av arbeid med tabeller i WordPress, fra enkel CSV-visning til distribuerte databasespørringer med diagramvisualisering. Og det gjør dette uten å kreve kode, noe som er sjeldent for WordPress-økosystemet.

Mekanikken er enkel: velg en kilde, konfigurer design, sett inn shortcode. Deretter lever tabellen sitt eget liv: oppdateres når kilden endres, filtrerer ved brukerklikk, sorterer etter hvilken som helst kolonne, og forblir lesbar på mobil. Ikke en linje med HTML, ingen separat mobillayout.

Programtillegget er betalt, men med en gratis prøvekjøring i sandkassen og en Lite-versjon for enkle scenarioer. Startpakken til $49 per år tilsvarer en time eller to av en utviklers arbeid og gir deg et verktøy for året som kommer.

🔗 Last ned Lite-versjonen fra WordPress.org