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 eerdere post hebben we al een basistabel gemaakt en een sorteerfunctie toegevoegd. In deze post gaan we door met het toevoegen van een kolomfilter. Aan het einde van deze post vindt u een werkend voorbeeld in onze Sandbox.
Filteren in React JS
Er zijn twee verschillende soorten filter hooks die je kan gebruiken in React JS. UseFilters en useGlobalFilters. useFilters wordt gebruikt voor het filteren van je rijen in specifieke kolommen. Met useGlobalFilters filter je de data uit alle kolommen tegelijk. Je kan beide filteropties door elkaar heen gebruiken, en in deze serie posts laten we dan ook zien hoe u dit kan doen.
In deze post zoomen we in op kolomfilters. In volgende posts behandelen we globale filters, en andere versies van kolomfilters zoals dropdown filters en min/max filters.
Extra data en kolommen
In deze post gebruiken we opnieuw demografische data van verschillende voetbalclubs. In de voorgaande posts gebruikten we enkel de naam, divisie, land, en het stadion van clubs, hier hebben we in het data bestand en in de kolommen nu een id en stadioncapaciteit aan toegevoegd. Ons volledige databestand (Data.js) en de veranderingen aan onze kolommen zijn te vinden in onze Sandbox. Deze vindt u onderaan dit artikel.
Kolomfilter maken
We gaan eerst aan de slag met de hook useFilter, hiermee kunnen we de respectievelijke kolommen gaan filteren. De documentatie van React laat binnen deze categorie verschillende soorten filters zien. Een tekstfilter, een slicer, een min/max filter, en een dropdown keuzefilter. We gaan in deze post alleen een voorbeeld laten zien van de tekstfilter, in volgende posts bespreken we ook de overige soorten.
1. Maken van de tekstfilter
Onderstaand de code voor de TekstFilter. Onder deze code vindt u ook de uitleg over de werking van deze filter.
Tabel.js
import React from "react";
export const TekstFilter = ({
column: {
filterValue,
setFilter,
preFilteredRows: { length }
}
}) => {
return (
<input
value={filterValue || ""}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
placeholder={`Zoeken (${length}) ...`}
/>
);
};- In onze constante zien we dat we de column als eigenschap in onze functie plaatsen. Deze eigenschap linkt de filter aan onze column. In deze kolom hebben we onder meer het datapunt vermeld, door het vermelden van column weten we dus welke kolom we moeten hebben, en welk datapunt er aan vast zit.
- In column gebruiken we drie functies, filterValue, setFilter, en prefFilteredRows.
- FilterValue representateerd de waarde die zichtbaar is in onze filter. Wanneer de gebruiker typt veranderd dus ook de filterValue.
- Elke keer dat er een verandering plaatsvind word de onChange geactiveerd. Elke keer dat dit gebeurd wordt de setFilter functie uitgevoerd. De naam zegt het al, de setFilter functie stelt de filter opnieuw in. Dit doet hij door de filterValue van de input te pakken, en deze te communiceren naar de filter.
- De preFilteredRows geeft het aantal rijen aan dat beschikbaar is voordat de filter wordt toegepast. Door hier length achter te vermelden weten we na elke vernieuwing van de filter hoeveel rijen er nog over zijn.
Kort gezegd is de waarde die de gebruiker typt gelijk aan de filterValue. Elke keer dat er een verandering plaatsvind in de input (dus als een gebruiker iets veranderd in het tekstveld) word de filter opnieuw ingesteld door de setFilter functie. Deze pakt de waarde en geeft die door aan de filter.
2. Importeren en toevoegen aan kolommen
We gaan nu onze tekstfilter importeren, en ervoor zorgen dat de filter word toegepast in onze kolommen. Voeg eerst boveen het Tabel.js bestand de volgende imports toe.
Tabel.js
import { useTable, useSortBy, useFilters} from "react-table";
import { TekstFilter } from "./Filters";
Nu dienen gaan we in hetzelfde bestand een aanpassing maken aan onze useTable constante. Eerst voegen we de useFilters hook toe aan de constante. Daarna stellen we een defaultColumn in die gelijk is aan onze filter genaamd TekstFilter. Dit zorgt ervoor dat de filter standaard in elke kolom wordt toegepast. Zonder deze instelling werkt de tabel niet. Ik laat zo ook zien hoe je kolommen kan uitsluiten.
Tabel.js
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable(
{ columns, data, defaultColumn: { Filter: TekstFilter } },
useFilters,
useSortBy
);3. Filter toevoegen aan tabel
We gaan nu de filter toevoegen aan de tabel. Dit kan op twee manieren. Je kan in je table header onder de Header naam de filter toevoegen zoals in het onderstaande voorbeeld. Dit heeft echter niet mijn voorkeur omdat het soms irritant werkt met de sorteerfunctionaliteit. Soms klik je op het formulier, maar omdat je dan ook in de header klikt word de tabel gesorteerd.
Tabel.js
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
<div> {column.render("Filter")}</div>
<span>
{column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : ""}
</span>
</th>
))}
</tr>
))}
</thead>Wat ik dan ook vaak doe is de gehele code binnen de <thead> kopïeren, en opnieuw plakken, zodat ik twee table headers krijg. Uit de eerste header verwijder ik de filter. In de tweede header verwijder ik de span tag met de icoontjes, de header naam, en alle properties in de th tag. Nu heb ik een eerste header met daarin de kolomnaam en de sorteerfunctionaliteit, en de tweede header met daarin alleen de filter zonder sorteer functionaliteit.
Tabel.js
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
<span>
{column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : ""}
</span>
</th>
))}
</tr>
))}
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
<div>{column.canFilter ? column.render("Filter") : null}</div>
</th>
))}
</tr>
))}
</thead>Je zou nu het gewenste resultaat moeten zien!
4. Kolommen zonder filter
We hebben nu aangegeven dat we overal de TekstFilter willen zien, maar in sommige velden wil je misschien helemaal geen filter zien. Dit kan opgelost worden in onze kolommen. Daar kunnen we met behulp van de eigenschap disableFilter ervoor zorgen dat er geen filter beschikbaar is. In ons voorbeeld hebben we dit gedaan voor de velden id en capaciteit.
Tabel.js
const columns = useMemo(
() => [
{
Header: "Id",
accessor: "id",
disableFilters: true
},
{
Header: "Clubnaam",
accessor: "naam"
},
{
Header: "Land",
accessor: "land"
},
{
Header: "Stadion",
accessor: "stadion"
},
{
Header: "Capaciteit",
accessor: "capaciteit",
disableFilters: true
}
],
[]
);Eindresultaat
Dit was de tutorial over het invoegen van een kolomfilter in React JS. De volgende blogpost zullen dieper ingaan op andere versies van kolomfilters, zoals dropdowns en min-max filters. Daarnaast zullen we ook een artikel wijden aan globale filters, en gaan we aan de slag met pagination. Zoals je kan zien is de tabel nog erg lelijk. Ook dit gaan we nog aanpassen in de volgende blogposts. Onderstaand de volledige code en het werkende voorbeeld in onze sandbox.
