Matrix-Grid-Transformation mittels Array-Slice-Paginierung in React

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>
  );
}