React + TypeScript + Vite + PrimeReact DataTable

This project is a React application built with Vite and TypeScript featuring a PrimeReact DataTable with server-side pagination, row selection, and a custom row selection panel. It demonstrates how to efficiently manage large datasets while keeping selections persistent across pages.

---

Demo & Repository

• GitHub Repository: https://github.com/pranavmakesitcool24k/GrowMeOrganic-internship-task
• Live Demo: https://68dd5826b5225258d9b7ce20--statuesque-hamster-f28246.netlify.app/

---

Features

• React + TypeScript + Vite setup for fast development and HMR.
• PrimeReact DataTable for interactive tables.
• Server-side pagination: fetches data for each page dynamically.
• Pagination controls for navigating pages.
• Row selection checkboxes: select individual or all rows.
• Custom row selection panel: shows selected rows and persists selection across pages.
• Efficient memory usage: does not store all rows in memory.

---

Installation

1. Clone the repository:

git clone https://github.com/pranavmakesitcool24k/GrowMeOrganic-internship-task.git

2. Navigate to the project folder:

cd GrowMeOrganic-internship-task

3. Install dependencies:

npm install

4. Start development server:

npm run dev

• Open your browser at http://localhost:5173.

---

Build for Production

npm run build

• The production-ready files will be in the dist folder.

---

Deployment

This app can be deployed on Netlify, Cloudflare Pages, or any static site hosting service.

---

React Compiler

The React Compiler is not enabled in this template for performance reasons. To enable it, see React Compiler Installation.

---

ESLint Configuration

If you are developing a production application, update ESLint for type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      tseslint.configs.recommendedTypeChecked,
      tseslint.configs.strictTypeChecked,
      tseslint.configs.stylisticTypeChecked,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
])

For React-specific lint rules, install eslint-plugin-react-x and eslint-plugin-react-dom. Example configuration:

import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      reactX.configs['recommended-typescript'],
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
])

---

Technologies Used

• React 18
• TypeScript
• Vite
• PrimeReact (DataTable, pagination, checkboxes)
• CSS / Styling libraries
• Axios / Fetch API for server requests

---

Usage

• View table data on initial load.
• Navigate pages with server-side pagination.
• Select rows individually or all at once.
• Manage selections in the custom row selection panel.
• Selections persist across page changes.

---

Notes

• This project does not store all rows in memory, ensuring efficient performance for large datasets.
• Selection and deselection of rows persist even when switching between pages.