javascript / intermediate
Snippet
Matrix-Grid-Transformation mittels Array-Slice-Paginierung in React
Die Umwandlung flacher Datenlisten in mehrdimensionale Matrix-Zeilen für gerenderte Rasteransichten in React wird sauber durch verschachtelte `Array.prototype.slice`-Operationen gelöst. Durch die Kapselung in `useMemo` werden Array-Slices und Chunk-Zuweisungen nur dann ausgeführt, wenn sich Paginierungsparameter ändern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useMemo } from 'react';export function PaginatedDataGrid({ items, columnsPerRow = 3, currentPage = 0, pageSize = 6 }) {const paginatedRows = useMemo(() => {const startIdx = currentPage * pageSize;const activeSlice = items.slice(startIdx, startIdx + pageSize);const rows = [];for (let i = 0; i < activeSlice.length; i += columnsPerRow) {rows.push(activeSlice.slice(i, i + columnsPerRow));}return rows;}, [items, columnsPerRow, currentPage, pageSize]);return (<div className="grid-container">{paginatedRows.map((row, rowIndex) => (<div key={`row-${rowIndex}`} className="grid-row">{row.map((cell) => (<span key={cell.id} className="grid-cell">{cell.label}</span>))}</div>))}</div>);}
react
Erklärung
1
const activeSlice = items.slice(startIdx, startIdx + pageSize);
Extrahiert eine flache Kopie der Datensätze, die zur aktuellen Paginierungsseite gehören.
2
for (let i = 0; i < activeSlice.length; i += columnsPerRow) {
Iteriert in Schritten der gewünschten Spaltenanzahl, um Elemente in Zeilen zu gruppieren.
3
rows.push(activeSlice.slice(i, i + columnsPerRow));
Schneidet jeden Chunk aus dem Seitendatensatz heraus und speichert ihn als Zeilen-Unterarray.