Quick Start: File Grid Pagination

⚡ Implement trong 3 bước

Bước 1: Import Component

import { FileGrid } from '@/components/storage';
import { useState, useMemo } from 'react';

Bước 2: Add State

function MyStoragePage() {
  const [allFiles, setAllFiles] = useState<FileResponse[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 24; // Grid 4x6 = 24 files
  
  // Calculate pagination
  const totalPages = Math.ceil(allFiles.length / itemsPerPage);
  const paginatedFiles = useMemo(() => {
    const start = (currentPage - 1) * itemsPerPage;
    return allFiles.slice(start, start + itemsPerPage);
  }, [allFiles, currentPage, itemsPerPage]);
  
  // ... rest of your code
}

Bước 3: Enable Pagination

return (
  <FileGrid
    files={paginatedFiles}  // ← Use paginated files
    viewMode="grid"
    
    // ✨ ADD THESE PROPS:
    showPagination={allFiles.length > itemsPerPage}
    currentPage={currentPage}
    totalPages={totalPages}
    totalItems={allFiles.length}
    itemsPerPage={itemsPerPage}
    onPageChange={setCurrentPage}
    
    // Other props...
    onFilePreview={handlePreview}
    onFileDelete={handleDelete}
  />
);

✅ Done!

Pagination tự động xuất hiện ở cuối FileGrid khi showPagination={true}.

🎯 Grid Layout Recommendations

View	Items/Page	Grid Layout	Best For
Desktop	24	6 columns x 4 rows	Large screens
Desktop	18	6 columns x 3 rows	Comfortable
Tablet	12	4 columns x 3 rows	Medium screens
Mobile	6	2 columns x 3 rows	Small screens

Responsive Items Per Page

const getItemsPerPage = () => {
  if (window.innerWidth >= 1280) return 24; // Desktop
  if (window.innerWidth >= 768) return 12;  // Tablet
  return 6; // Mobile
};

const [itemsPerPage, setItemsPerPage] = useState(getItemsPerPage());

🔄 Reset Page on Filter Change

// Reset to page 1 khi search/filter thay đổi
useEffect(() => {
  setCurrentPage(1);
}, [searchQuery, sortBy, currentFolder]);

📱 Scroll to Top on Page Change

const handlePageChange = (newPage: number) => {
  setCurrentPage(newPage);
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

🎨 Visual Result

Files 1-24 of 150                    Page 1 of 7

[←] 1 [2] 3 4 ... 7 [→]  [Đi đến: │  │]
    ▲                                  └─ Jump to page (desktop)
    └─ Active page (blue)

💡 Pro Tips

Items per page = Grid columns × visible rows
- 6 columns × 4 rows = 24 items
- Clean layout, no partial rows
Even numbers work best
- 12, 24, 48, 96
- Divisible by grid columns
Don't show pagination if not needed
- showPagination={files.length > itemsPerPage}
- Cleaner UI for small lists
Loading state matters
- Pass loading={true} to disable controls
- Prevents double-clicks during fetch

🐛 Troubleshooting

Problem: Pagination không hiển thị

✅ Check: showPagination={true}
✅ Check: totalPages > 1
✅ Check: onPageChange callback provided

Problem: Wrong items shown

✅ Check: Slice calculation (page-1) * itemsPerPage
✅ Check: Array index starts at 0

Problem: Page numbers sai

✅ Check: totalPages = Math.ceil(total / itemsPerPage)
✅ Check: currentPage là 1-based (not 0-based)

📚 Full Examples

See: FILE_GRID_PAGINATION_EXAMPLE.md for complete implementations

3.5 KiB Raw Blame History Unescape Escape