Datatable Thingyyy

Hey there! Welcome to this little project. It's a powerful datatable built with React that showcases some pretty tricky selection logic. If you've ever wondered how to handle selecting thousands of rows, deselecting some, and then adding a few more from other pages, you're in the right place.

This isn't just another table component. It's a deep dive into managing complex state in a way that feels simple and intuitive for the user.

What's Inside?

This project is packed with a few key features that make it interesting:

• Dynamic Data Fetching: The table loads data page by page from an API, so it's fast and doesn't bog down your browser.
• Two Selection Modes:
  1. Manual Mode: The classic click-to-select-a-row. Simple.
  2. "Select N" Mode: A power-user feature. You can tell the app, "Select the first 5,000 rows," and it does just that, without fetching all 5,000 rows at once.
• Smart Exception Handling: This is the core of the project. Once you've selected a large number of rows, you can easily go to any page, deselect a few items, or even select a few new ones that weren't in your original selection. The app keeps track of all of it seamlessly.
• Real-time Count: The total number of selected items is always accurate, no matter how complex your selections get.

The Tech Stack

I kept things modern and straightforward. No corporate fluff.

• React (with TypeScript)
• Vite for a super-fast development experience
• PrimeReact for the rock-solid UI components (DataTable, Buttons, etc.)
• pnpm for efficient package management

Getting It Running

Wanna play with it yourself? It's easy.

1. Clone the repo:

   git clone https://github.com/Nylite-soda/datatable.git
   cd datatable

2. Install dependencies: I'm using pnpm, so you should too.

   pnpm install

3. Start the dev server:

   pnpm run dev

   And that's it! The app should be running on your localhost.

The Logic Behind the Selection Magic

So, how does the "Select N" mode work without getting confused?

The old way tried to use a single "exceptions" list to track both items you deselected from the main group and items you added from outside it. It was messy and led to bugs.

The new, smarter way uses two separate, dedicated lists:

1. deselectedIds: A simple list of all the items inside your "Select N" range that you've manually unchecked.
2. selectedIds: A list of all the items outside your "Select N" range that you've manually checked.

With these two lists, calculating the total number of selected items is always a simple, correct formula: Initial 'N' Count - (Size of deselectedIds) + (Size of selectedIds)

This keeps the state clean, the logic simple, and the app bug-free.

---

Feel free to poke around the code, especially in src/components/TableDisplay.tsx, to see how it all comes together.

Cheers, Nylite-soda