Tabellen im Browser – Eine Einführung in AG Grid (Teil 1)

Die heutige Datenflut hat Software und Frameworks, wie Tableau, D3 und viele andere, hervorgebracht, deren Aufgabe es ist, die Visualisierung von Daten zu verbessern. Doch trotz der teilweise sehr ausgefallenen Darstellungsformen ist manchmal die simple Auflistung in einer Tabelle die effektivste Form, die Leserlichkeit zu erhöhen.

Hierauf hat sich das Framework AG Grid spezialisiert und ermöglicht es Programmierern, mit einfachen Schritten Daten im Browser für Nutzer erkennbar zu machen. In diesem Artikel werden wir kurz AG Grid vorstellen, wofür es genutzt wird und wie man mit wenig Code viele der Features umsetzen kann.

Was ist AG Grid?

AG Grid ist ein JavaScript-Framework, das in seiner Community-Version frei unter der MIT-Lizenz nutzbar ist. Die Entwickler bezeichnen es als „das beste JavaScript-Grid-Framework der Welt“ und versprechen unvergleichbare Performance bei hohen Datenmengen sowie dynamische Änderungen bei Datenströmen. Der Hauptzweck besteht darin, Daten in Tabellenform darzustellen und mit weiteren Features die Interpretation und Leserlichkeit der Daten zu erhöhen. Um die Entwicklung zu vereinfachen, bietet AG Grid Wrapper für React, Angular und Vue an, wobei das Framework auch mit plain JS genutzt werden kann. 

AG Grid bietet viele Funktionen, die durch einfaches Setzen von Parametern aktiviert werden können. Darunter fallen Funktionen wie:

• Filtern von Zeilen nach Inhalt
• Suchen von Zeilen nach Inhalt
• Verändern der Größe von Spalten durch einfaches Ziehen
• Exportieren der Tabelle in .csv oder Excel
• Anzeigen von Tooltips

und viele weitere. Auch komplexere Aufgaben lassen sich mit wenig Programmieraufwand realisieren. Zum Beispiel können einzelne Spalten oder Zeilen mit eigenen Renderfunktionen versehen werden, um so bedingte Färbungen, Icons oder ähnliche Dinge darzustellen. Inhalte einer Zelle können auf- und zugeklappt oder gar editiert werden. Auch können die vom Nutzer vorgenommenen Anpassungen, wie zum Beispiel Filterungen oder Größenänderungen, abgespeichert werden, um so beim erneuten Aufruf genauso wieder dargestellt zu werden. Die hier aufgelisteten Funktionen beinhalten nicht alle nutzbaren Features und sollen, als Auszug, nur die Mächtigkeit des Frameworks darstellen. Abschließend sei erwähnt, dass auch eine Charting-Funktion mitgeliefert wird, um die Daten in Balkendiagrammen oder Zeitreihen darzustellen. Die Charting-Funktionen schauen wir uns jedoch in einem anderen, späteren Artikel genauer an.

Wie funktioniert AG Grid?

Hier werden wir nun ein paar der oben beschriebenen Funktionen darstellen, um die Einfachheit des Frameworks zu demonstrieren. Wir haben hierfür React und den React Wrapper verwendet, wie jedoch bereits erwähnt, ist dies auch mit Angular und Vue möglich (für beides bietet die offizielle Seite auch viel Material).

Um diese Tabelle darzustellen, benötigen wir erstmal die Daten selbst. Hier ist ein Auszug aus zwei Einträgen, die gesamten Daten sowie der Code zum Ausprobieren sind in dem zugehörigen GitHub-Projekt zu finden: https://github.com/codecentric/ag-grid-blog.

1const data = [
2 {
3   Titel: "Monty Python's Flying Circus",
4   Jahr: 1969,
5   Bewertung: 8.8,
6   Staffeln: 4,
7   Genre: "comedy",
8   Produktion: "GB",
9 },
10 {
11   Titel: "Knight Rider",
12   Jahr: 1982,
13   Bewertung: 6.9,
14   Staffeln: 4,
15   Genre: "action",
16   Produktion: "US",
17 }]

Dann die Definition der Spalten (AG Grid nennt dies ColumnDefs):

1const [columnDefs] = useState([
2   { field: "Titel" },
3   { field: "Jahr" },
4   { field: "Bewertung" },
5   { field: "Staffeln" },
6   { field: "Genre" },
7   { field: "Produktion" },
8 ]);
9</pre>

Und zum Schluss dann die Visualisierung durch React (hier mit dem Einbinden der Daten und der Verwendung der ColumnDefs):

1const FirstSample: FC = () => {
2 const [rowData] = useState([
3   {
4     Titel: "Monty Python's Flying Circus",
5     Jahr: 1969,
6     Bewertung: 8.8,
7     Staffeln: 4,
8     Genre: "comedy",
9     Produktion: "GB",
10   },
11   {
12     Titel: "Star Trek: Deep Space Nine",
13     Jahr: 1993,
14     Bewertung: 6.9,
15     Staffeln: 4,
16     Genre: "science-fiction",
17     Produktion: "US",
18   },
19 ]);
20
21 const [columnDefs] = useState([
22   { field: "Titel" },
23   { field: "Jahr" },
24   { field: "Bewertung" },
25   { field: "Staffeln" },
26   { field: "Genre" },
27   { field: "Produktion" },
28 ]);
29
30 return (
31   <div className="ag-theme-alpine" style={{ height: 400, width: 1200 }}>"
32     <AgGridReact rowData={rowData} columnDefs={columnDefs} />
33   <div>"
34 );
35};
36
37export default FirstSampel;
38</pre>

Die eigentliche Einstellung der Tabelle funktioniert an zwei Stellen. Hierfür können die ColumnDefs angepasst werden, um so Details wie Farbe oder Skalierbarkeit der Spalte anzupassen.

So kann dies dann aussehen:

Hier wurde die Reihenfolge der Spalten geändert, die Tabelle alphabetisch sortiert und die Bewertungs-, sowie Produktionsspalte haben sich etwas verändert. Auch ist zu sehen, wie ein Filter für die Jahresspalte angeklickt wurde und befüllt werden kann.

Um diese Funktionalität zu ermöglichen, muss im Code nicht viel geändert werden:

1import { AgGridReact } from "ag-grid-react";
2import React, { useMemo, useState, FC } from "react";
3import { TextMatcherParams } from "ag-grid-community/dist/lib/filter/provided/text/textFilter";
4import { CellClassParams, ICellRendererParams } from "ag-grid-community";
5
6const SecondSample: FC = () => {
7 const [rowData] = useState([
8   {
9     Titel: "Monty Python's Flying Circus",
10     Jahr: 1969,
11     Bewertung: 8.8,
12     Staffeln: 4,
13     Genre: "comedy",
14     Produktion: "GB",
15   },
16   {
17     Titel: "Star Trek: Deep Space Nine",
18     Jahr: 1993,
19     Bewertung: 6.9,
20     Staffeln: 7,
21     Genre: "science-fiction",
22     Produktion: "US",
23   },
24 ]);
25
26 const [columnDefs] = useState([
27   {
28     field: "Titel",
29     filter: "agTextColumnFilter",
30     filterParams: {
31       textMatcher: ({ value, filterText }: TextMatcherParams) => {
32         const title = ((value as string) || "")
33           .split(":")
34           .join("")
35           .toLowerCase();
36         const filter = (filterText || "")
37           .split(":")
38           .join("")
39           .toLowerCase();
40         return title.includes(filter);
41       },
42     },
43   },
44   { field: "Jahr", filter: "agNumberColumnFilter" },
45   {
46     field: "Bewertung",
47     cellStyle: (params: CellClassParams) => {
48       if (params.value < 7) {
49         return { color: "red" };
50       }
51       if (params.value < 8.5) {
52         return { color: "orange" };
53       }
54       return { color: "green" };
55     },
56   },
57   { field: "Staffeln", filter: "agNumberColumnFilter" },
58   { field: "Genre" },
59   {
60     field: "Produktion",
61     cellRenderer: (params: ICellRendererParams): any => {
62       return (
63         <img
64           width="15"
65           height="10"
66           src={`https://flags.fmcdn.net/data/flags/mini/${params.value.toLowerCase()}.png`}
67         />
68       );
69     },
70   },
71 ]);
72
73 const defaultColDef = useMemo(
74   () => ({
75     sortable: true,
76     filter: true,
77     resizable: true,
78   }),
79   []
80 );
81 return (
82   <div className="ag-theme-alpine" style={{ height: 400, width: 1200 }}>
83     <AgGridReact
84       rowData={rowData}
85       columnDefs={columnDefs}
86       defaultColDef={defaultColDef}
87     />
88   </div>
89 );
90};
91
92export default SecondSampel;
93</pre>

In einem neuen Objekt, der defaultColDef, haben wir Anpassungen vorgenommen, die für alle Columns gültig sind (außer wenn explizit anders notiert). In unserem Fall sollen alle Spalten filterbar, sortierbar sowie skalierbar sein. Zusätzlich haben dann in den spezifischen ColumnDefs die Spalten Filter erhalten, die von AG Grid für ihre Datentypen mitgeliefert werden. Beim Titel wurde dieser Filter aber exemplarisch angepasst. Der Filter erhält einen *filterText *(die Eingabe des Nutzers) sowie einen *value *(der Inhalt der Zelle) und wir können verändern, wie die Werte verglichen werden sollen. In unserem Fall heißt das, dass bei beiden Strings die Doppelpunkte entfernt werden, um so die Suche für Titel, die Untertitel haben, etwas zu erleichtern (als Beispiel hier: Star Trek: Deep Space Nine). Der Nutzer findet den Titel jetzt also unabhängig davon, ob er den Doppelpunkt eintippt oder nicht.

Für die Bewertungsspalte wurde eine dynamische Änderung der Farbe hinzugefügt. Je nach Wert wird der Text in verschiedenen Farben dargestellt, um die Leserlichkeit zu erhöhen. Diese und weitere „style“-Änderungen, die sonst auch im CSS vorgenommen werden, können im cellStyle angepasst werden. Um Inhalte darzustellen, die keine Strings sind, kann der cellRenderer verwendet werden, der hier genutzt wurde, um das Produktionsland durch seine Flagge darzustellen.

Diese kurze Einführung in die Funktionen AG Grid und wie diese implementiert werden ist natürlich bei Weitem nicht vollständig. Ein Blick auf die Dokumentation von AG Grid selbst https://www.ag-grid.com/react-data-grid/ zeigt hier die Mächtigkeit, die vor allem noch durch die Enterprise-Version erhöht wird. Dort können Spalten dynamisch ein- und ausgeblendet werden (welches in der Community-Version zwar auch geht, aber nicht sehr nutzerfreundlich), zusätzliche Informationen über die Tabelle angezeigt werden (die Anzahl der gesamten Zeilen und die der aktuell, nach der Filterung dargestellten Zeilen) sowie viele andere Dinge. Alles in allem ist aber bereits die Community-Version mächtig genug, um einen ausgiebigen Blick zu rechtfertigen, wenn ihr das nächste Mal eine Tabelle darstellen wollt.