PrimeReact DataTable Assignment

This project implements a paginated data table using PrimeReact DataTable component with server-side pagination and persistent row selection functionality.

Features

• ✅ React app created with Vite and TypeScript
• ✅ PrimeReact DataTable component integration
• ✅ Server-side pagination (fetches data from API on page change)
• ✅ Row selection with checkboxes
• ✅ Custom selection panel with overlay
• ✅ Persistent selection across pages
• ✅ Memory efficient (no storing all rows in memory)

API Integration

The application fetches data from the Art Institute of Chicago API:

• API Endpoint: https://api.artic.edu/api/v1/artworks?page={pageNumber}
• Fields Displayed: title, place_of_origin, artist_display, inscriptions, date_start, date_end
• Pagination: Server-side pagination with 12 records per page

Installation & Setup

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Build for production:

   npm run build

Key Components

App.tsx

• Main application component with DataTable
• Handles API data fetching
• Manages pagination state
• Implements row selection logic
• Custom selection panel functionality

Features Implementation

1. Server-Side Pagination

• Fetches data only for the current page
• No memory storage of all rows
• API call triggered on page change

2. Row Selection

• Checkbox selection for individual rows
• "Select All" functionality for current page
• Selection state persists across page navigation

3. Custom Selection Panel

• Chevron-down icon (▼) in the Title column header only
• Clicking the chevron opens overlay panel with input field
• Input field for specifying number of records to select
• Distributes selection across multiple pages by fetching actual data
• Maintains selection state when navigating between pages
• Loading state during selection process
• Select All and Clear All buttons for current page

4. Loading States

• Global loading overlay with spinner during data fetching
• Header spinner indicator during page loads
• Button loading states with spinners
• Custom selection progress indicator
• Smooth animations and transitions

5. Memory Efficiency

• Only stores current page data (12 records max)
• Selection tracking uses only IDs (not full objects)
• No accumulation of data from previous pages
• Server-side pagination prevents memory leaks

Technical Stack

• React 18 with TypeScript
• Vite for build tooling
• PrimeReact for UI components
• PrimeIcons for icons
• CSS for styling

Project Structure

src/
├── App.tsx          # Main application component
├── App.css          # Component styles
├── index.css        # Global styles
└── main.tsx         # Application entry point

Usage

1. Open the application in your browser
2. Navigate through pages using the paginator
3. Select individual rows using checkboxes
4. Use the chevron-down icon to open custom selection panel
5. Enter number of records to select and submit
6. Navigate between pages to see persistent selection

Compliance with Requirements

✅ Memory Efficiency: No variable holding all rows from different pages

• Only stores current page data (12 records max)
• Selection tracking uses only IDs (Set) not full objects
• No accumulation of data from previous pages

✅ Server-Side Pagination: API called on every page change

• Always calls API: https://api.artic.edu/api/v1/artworks?page=${page + 1}
• No caching of previous page data
• Fresh data fetch on every page navigation

✅ Persistent Selection: Row selection persists across page navigation

• Uses Map<number, Set> to track selections by page
• Stores only artwork IDs to minimize memory usage
• Selections restored when returning to visited pages

✅ TypeScript: Full TypeScript implementation ✅ PrimeReact: Uses DataTable component as specified ✅ Custom Selection Panel: Chevron icon in Title column header

Development

The application is built with modern React patterns:

• Functional components with hooks
• TypeScript for type safety
• Efficient state management
• Responsive design with PrimeReact components

Browser Support

• Modern browsers supporting ES2020+
• React 18+ compatibility
• PrimeReact component support