Implement Volunteer Table Main Functionalities

[a1-su]

This pull request implements the main body of the Volunteer Table, which resolves the volunteer table issue. Currently, it is a draft as the getVolunteersTable API (#82) that this PR depends on has not yet been merged.

Screenshots

Initial State (using mock data)

Selecting Cells

Loading State

Empty State

Description / Notes

• Since we opted out of using the original ag-grid library, I have switched to react-table, or Tanstack Table, to implement the functionality
• Allows for the following selection functionality:
  • Selecting a single cell
  • Ctrl/Cmd + click to add unselected cell to current selection
  • Ctrl/Cmd + click to remove selected cell from current selection
  • Dragging to select multiple cells
  • Ctrl/Cmd + dragging to add additional cells to the current selection when starting drag on an unselected cell
  • Ctrl/Cmd + dragging to remove additional cells from current selection when starting drag on a selected cell
• When you copy (Ctrl/Cmd + C) from the table, you copy a space and newline-separated list of the selected cells, from left to right, then top-down
• The position, and membership in cohorts and rows are displayed as tags/chips, in accordance to the colour scheme in the Figma
• The table itself supports basic searching and column-level sorting that was implemented as part of the react-table library
• The columns themselves can be resized by dragging the edges between the columns
• The table is also paginated, should the number of rows get too big
• I updated the tailwind installation in the project for the visuals of the table
• I added the lucide-react library for the icons in the table columns and the search bar + filter + sorting components

Questions and Comments

• Currently, this ticket depends on the getVolunteersTable API (Implemented getVolunteersTable API function #80 #82), which is why it is a draft

• The issue states:

  Build a data table with columns: full name, pseudonym, pronouns, email, phone, position, cohort, prior role, current role, future interest, notes

  However, neither the Figma nor Volunteer return type from getVolunteersTable API contain the column future_interest, and the API response also doesn't contain prior_roles either; I currently have them added since they are in the issue description, although I'm not sure if that's intentional

• The filter is temporarily implemented as a dropdown that allows the user to select the source of their data: from the backend API, temporary mock data, or no data, in order to demonstrate the functionality of the table

• The is a temporary page in the /volunteers endpoint to view the table, which presumably will be implemented properly later on; for now, it's here so anyone reviewing the PR can view the table easily

• The original application used Geiss as the main font, which I have changed to match the Figma and the TRCC design that uses Manrope, but let me know if setting it as Geiss was intentional

• I have mostly matched the design of the Figma, including the colour of the search bar and filter/sort buttons, but let me know if I should change it to match it exactly

• In the Figma dashboard update section, there are two different colours for the "Spring" cohort - I have opted to keep the spring colours the same across multiple years for clarity but let me know if this should be changed, and if so, how the colours of the cohorts are decided
  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
trcc	Ignored		Feb 25, 2026 9:01pm