React Table #1: Het maken van een simpele data tabel in React – CBI Analytics | Power BI | Web development | Tutorials | Django

In deze serie posts vertellen we u meer over het gebruik van React Table. Deze bibliotheek stelt ons in staat om krachtige data tabellen te maken binnen React JS. We laten u zien hoe u een simpele tabel kan maken, hoe u vervolgens filters, sorteeropties, en pagination kan toevoegen, en hoe u de tabel kan stylen zodat het aantrekkelijk is voor gebruikers in uw applicatie. In deze post laten we u zien hoe u een simpele tabel kan maken met uw data. In latere posts gaan we dieper in op hoe we de data kunnen filteren, sorteren, en pagineren.

Installatie en data

In deze tutorial gebruiken we React Table. Deze bibliotheek is erg populair binnen React, zo is het pakket deze week al 559.000 keer gedownload. Om deze bibliotheek te gebruiken dienen we eerst een installatie uit te voeren.

  Installatie van react table 
  npm install react-table --save

Let op: React Table kan alleen gebruikt worden React v16.8 of hoger. De volledige documentatie vindt u hier. We nemen in deze post aan dat u React al gedownload heeft, en dat u reeds een project opgestart heeft.

We hebben natuurlijk ook data nodig voor onze tabel. Ik heb in mijn project een bestand aangemaakt genaamd Data.js. Hierin heb ik de volgende datapunten aangemaakt:

Data.js
export const clubData = [
  {
    naam: "NAC Breda",
    land: "NL",
    divisie: "KKD",
    stadion: "Rat Verlegh"
  },
  {
    naam: "De Graafschap",
    land: "NL",
    divisie: "KKD",
    stadion: "De Vijverberg"
  },
  {
    naam: "Ajax",
    land: "NL",
    divisie: "Eredivisie",
    stadion: "De Johan Cruijff Arena"
  },
  {
    naam: "PSV",
    land: "NL",
    divisie: "Eredivisie",
    stadion: "Philips Stadion"
  },
  {
    naam: "Anderlecht",
    land: "BE",
    divisie: "Pro League",
    stadion: "Lotto Park"
  },
  {
    naam: "Lommel SK",
    land: "BE",
    divisie: "Eerste klasse B",
    stadion: "Soeverein stadion"
  }
];

Onze datapunten bevatten enkele voetbalclubs, met daarbij de vermelding van de naam, land, divisie, en het stadion waar de clubs spelen. Deze data gaan we gebruiken voor het maken van onze tabel.

Definïeren van kolommen

In deze stap gaan we aan de slag met het maken van kolommen. Om het overzichtelijk te houden heb ik een nieuwe folder aangemaakt genaamd Tabel, hierin heb ik een bestand aangemaakt genaamd Tabel.js. Daarin plakken we de volgende code:

Tabel/Tabel.js

import React, { useMemo } from "react";
import "../styles.css";
import { clubData } from "../Data";


function Tabel() {
 const data = clubData
 const columns= useMemo(
    () => [
      {
        Header: "Clubnaam",
        accessor: "naam"
      },
      {
        Header: "Divisie",
        accessor: "divisie"
      },
      {
        Header: "Land",
        accessor: "land"
      },
      {
        Header: "Stadion",
        accessor: "stadion"
      }
    ],
    []
  );
  

  return (
    <div>

    </div>
  );
}

export default Tabel;

Allereerst heb ik bovenaan de data uit ons Data.js bestand geïmporteerd. In de functie genaamd tabel heb ik vervolgens een constante gemaakt genaamd data, die gelijk is aan de naam van de data uit ons Data.js bestand. Dit zorgt ervoor dat we straks toegang hebben tot onze data.

Ook heb ik een constante aangemaakt genaamd columns. Hierin vermelden we voor elke kolom die we willen zien in onze tabel een Header en een accessor. De Header is de naam die zichtbaar word in de kop van de tabel. De accessor is de naam van het datapunt. De namen van de constanten (columns en data) heb ik niet toevallig gekozen. Dit zijn namen die React Table herkent. Het is dus ook verstandig om deze namen aan te houden.

Voorbeeld kolommen: In de eerste kolom willen we in de kop Clubnaam zien. Het datapunt uit ons Data.js bestand die daar bij hoort heet naam.

Gebruik van de useTable hook

We hebben nu onze data en onze kolommen gemaakt. Om ervoor te zorgen dat alles zichtbaar word in onze tabel dienen we de useTable hook te gebruiken, deze hook zorgt ervoor dat we onze tabel kunnen bouwen. We gaan nu in ons Tabel.js bestand een constante toevoegen, daarnaast voegen we een lege html tabel toe. De volledige code en uitleg hierover vindt u hieronder. Alle groene code is nieuw.

Tabel.js

import React, { useMemo } from "react";
import "../styles.css";

import { useTable } from "react-table";

function Tabel() {
  const data = clubData;
  const columns = useMemo(
    () => [
      {
        Header: "Clubnaam",
        accessor: "naam"
      },
      {
        Header: "Divisie",
        accessor: "divisie"
      },
      {
        Header: "Land",
        accessor: "land"
      },
      {
        Header: "Stadion",
        accessor: "stadion"
      }
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });      
 

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default Tabel;

We importeren bovenaan het bestand useTable van react-table zodat we een tabel kunnen bouwen.
In de functie Tabel hebben we een nieuwe constante aangemaakt. De namen tussen de accolades (bv. getTableProps, getTableBodyprops) gaan we later gebruiken om onze tabel tot leven te wekken. Je ziet dat alles tussen de accolades uiteindelijk gelijk is aan onze useTable hook. Hierin specificeren we onze columns, en data, zodat de tabel straks weet welke kolommen en datapunten gepakt moeten worden.
In het return statement zie je de html voor een tabel zonder inhoud. We gaan de variabelen tussen de accolades zo toevoegen aan deze tabel.

Toevoegen van data aan onze tabel

In dit deel gaan we de variabelen binnen de accolades van de useTable constante toewijzen aan de html tabel. Dit kan erg complex overkomen. Ik ga alle deelgebieden uitleggen zodat het hopelijk duidelijk is wat er precies gebeurd. De gekleurde code is nieuw. Aan de hand van de kleur leggen we onderaan uit wat er gebeurd.

Tabel.js
import React, { useMemo } from "react";
import "../styles.css";
import { clubData } from "../Data";
import { useTable } from "react-table";

function Tabel() {
  const data = clubData;
  const columns = useMemo(
    () => [
      {
        Header: "Clubnaam",
        accessor: "naam"
      },
      {
        Header: "Divisie",
        accessor: "divisie"
      },
      {
        Header: "Land",
        accessor: "land"
      },
      {
        Header: "Stadion",
        accessor: "stadion"
      }
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });

  return (
    <table {...getTableProps()} className="tabel">
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default Tabel;

{…getTableProps()}: Dit stukje code zorgt ervoor dat alle properties van React Table die nodig zijn in je tabel worden geladen.
className = “tabel”: Definieert de class van de tabel. Dit is later handig als we de tabel gaan formatten.
Headergroups.map: Deze gehele functie zorgt ervoor dat de table headers correct gemaakt worden. Eerst zie je een headerGroups.map functie. Die functie zorgt ervoor dat er een table row (tr) word aangemaakt voor elke header die we hebben. In dit geval is dit er maar 1. Vervolgens zie je binnen de table row (tr) nog een map functie. Deze functie kijkt naar onze columns constante, en zorgt er voor dat er een table header (th) word aangemaakt voor elke Header die we gedefinieerd in onze columns constante. Voor elke header (zie gele markering in de onderstaande afbeelding) uit onze constante word dus een table head aangemaakt (th).

{…getTableBodyProps()}: Deze code zorgt ervoor dat alle properties van React table voor de table body aanwezig zijn.
Rows.map: Dit stukje code zorgt ervoor dat de rijen van je tabel worden gemaakt. Voor elke rij word een table row gemaakt. Binnen deze table row worden de verschillende table data tags geladen (td). Hierin zit de data van onze tabel, die we hebben gedefïnieerd in de accessor.

Je tabel weergeven

De tabel is nu gemaakt, maar we willen hem natuurlijk ook laten zien in onze app. Om die reden importeer ik de tabel naar mijn App.js bestand, en render ik de tabel in een div zodat alles zichtbaar is. Je kan deze tabel natuurlijk overal importeren, dit hoeft niet perse in het App.js bestand.

App.js
import React, { useState, useEffect } from "react";
import "./styles.css";
import Tabel from "./Tabel/Tabel";

function App() {
  return (
    <div>
      <div className="container">
        <h1 className="titel"> CBI Analytics: Voorbeeld React table </h1>
      </div>

      <div className="tabelcontainer">
        <Tabel/>
      </div>
    </div>
  );
}

export default App;

Eindresultaat in de Sandbox

De onderstaande Sandbox laat zien hoe de tabel er uiteindelijk uit dient te zien. De tabel is nu nog ontzettend lelijk. In de volgende blogposts over React Table gaan we aan de slag met niet alleen het sorteren, filteren, en pagineren van de tabel, maar ook met de styling.