Implement Volunteer Table Main Functionalities#97
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
LeandroHamaguchi
left a comment
LeandroHamaguchi
left a comment
There was a problem hiding this comment.
Just these changes are missing, otherwise it looks good to me!
| resetSelection, | ||
| } = useCellSelection(table); | ||
|
|
||
| // TODO: Modify to use proper filtering |
There was a problem hiding this comment.
Not currently, but it will be when in the filter modal PR is merged; I left it originally if anyone was going to work on it in the future 👍
| > | ||
| <ArrowUpDown className="w-4 h-4" /> | ||
| <span>Sort</span> | ||
| </button> |
There was a problem hiding this comment.
Missing the buttons to add new volunteers and import csv
| @@ -0,0 +1,19 @@ | |||
| import type { Config } from "tailwindcss"; | |||
|
|
|||
| const config: Config = { | |||
There was a problem hiding this comment.
From Cursor:
Custom colors defined in variables.css using the @theme directive (like --color-primary-purple, --color-tag-yellow, etc.) are not registered in tailwind.config.ts. While the CSS variables are defined, they won't be available as Tailwind utility classes (e.g., bg-primary-purple, bg-tag-yellow). These utilities are used throughout the codebase in volunteer components, but Tailwind won't generate the corresponding CSS rules. The colors need to be registered in the theme's extend section with colors configuration.
There was a problem hiding this comment.
I could be wrong, but Cursor thinks we're using Tailwind v3 when we're using Tailwind v4, which is set up differently.
LeandroHamaguchi
left a comment
LeandroHamaguchi
left a comment
There was a problem hiding this comment.
Forgot to add a few more things:
- You can remove the "position" column in the table. TRCC asked for this to be removed.
- We want to make the cells editable as well, but we will do that with a separate ticket after this PR is merged.
1michhu1
left a comment
1michhu1
left a comment
There was a problem hiding this comment.
Other than Leandro's requested changes which he's already commented on, I think this table lgtm 👍! Didn't realize that the filtering, searching and sorting were their own separate tickets, so there isn't a need to implement that functionality within this ticket.
| width: header.getSize(), | ||
| minWidth: "max-content", | ||
| }} | ||
| onClick={(e) => { |
There was a problem hiding this comment.
Since the sorting feature is a future feature implementation, sorting on header click might not be necessary here? But might want to double-check on that and see how it might mesh with the future sort button
There was a problem hiding this comment.
Pull request overview
Implements the Volunteer Tracking table UI (Issue #61) using TanStack Table, including interactive cell selection/copy, basic search/sort/pagination, and supporting styling updates (Tailwind v4 + Manrope font).
Changes:
- Added
VolunteersTableUI with selection, copy-to-clipboard, searching, column sorting/resizing, and pagination. - Introduced volunteer table utilities/types/hooks (
useCellSelection, tag coloring, etc.) plus a/volunteerspage for viewing. - Updated styling/tooling: Tailwind v4/PostCSS config, design tokens, and switched app font to Manrope.
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Tailwind configuration (content paths, Manrope as font-sans). |
| src/styles/variables.css | Adds Tailwind v4 @theme tokens for tag + purple UI colors. |
| src/lib/api/getVolunteersTable.ts | Marks the API function as server-only ("use server"). |
| src/components/volunteers/utils.ts | Adds cell formatting + tag color class mapping. |
| src/components/volunteers/useCellSelection.ts | Implements cell selection/dragging + clipboard copy behavior. |
| src/components/volunteers/types.ts | Defines Volunteer type used by the table UI. |
| src/components/volunteers/VolunteersTable.tsx | Main table component (columns, fetching, selection, UI controls, pagination). |
| src/components/volunteers/VolunteerTag.tsx | Chip/tag component for multi-value fields. |
| src/components/volunteers/HeaderWithIcon.tsx | Table header label + icon helper. |
| src/app/volunteers/page.tsx | Temporary route to view the volunteers table. |
| src/app/layout.tsx | Switches global font from Geist to Manrope. |
| src/app/globals.css | Adds Tailwind imports and moves base styles into @layer base. |
| postcss.config.mjs | Configures PostCSS to run Tailwind v4 via @tailwindcss/postcss. |
| package.json | Adds Tailwind v4 + TanStack Table + icons + clsx deps. |
| package-lock.json | Lockfile updates for added dependencies. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
a1-su
left a comment
a1-su
left a comment
There was a problem hiding this comment.
Made my changes, hopefully it fixes all the issues 👍; I'll update the filter modal PR as well to reflect them.
| resetSelection, | ||
| } = useCellSelection(table); | ||
|
|
||
| // TODO: Modify to use proper filtering |
There was a problem hiding this comment.
Not currently, but it will be when in the filter modal PR is merged; I left it originally if anyone was going to work on it in the future 👍
| @@ -0,0 +1,19 @@ | |||
| import type { Config } from "tailwindcss"; | |||
|
|
|||
| const config: Config = { | |||
There was a problem hiding this comment.
I could be wrong, but Cursor thinks we're using Tailwind v3 when we're using Tailwind v4, which is set up differently.
There was a problem hiding this comment.
Pull request overview
Implements the main Volunteer Tracking table UI (Issue #61), including data fetching (via getVolunteersTable), interactive cell selection/copy, and table controls, along with the styling foundation needed to match the Figma design.
Changes:
- Added a TanStack Table-based
VolunteersTablewith tagging, search, sorting, pagination, and multi-cell selection/copy behaviors. - Added a
/volunteerspage to view the table. - Updated styling stack (Tailwind v4 + theme tokens) and switched the app font to Manrope; added icon/table helper deps.
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Adds Tailwind content paths and sets fontFamily.sans to Manrope variable. |
| src/styles/variables.css | Defines Tailwind v4 @theme color tokens used for table UI/tag styling. |
| src/lib/api/getVolunteersTable.ts | Marks the API function module as server-only ("use server"). |
| src/components/volunteers/utils.ts | Adds cell formatting + label-to-color mapping for tags. |
| src/components/volunteers/useCellSelection.ts | Implements multi-cell selection and clipboard copy behavior. |
| src/components/volunteers/types.ts | Defines table/view-model types for volunteers/cohorts/roles. |
| src/components/volunteers/VolunteersTable.tsx | Main volunteer table implementation and data transformation from API → UI shape. |
| src/components/volunteers/VolunteerTag.tsx | Renders colored tags/chips for multi-value fields. |
| src/components/volunteers/HeaderWithIcon.tsx | Small header component for icon + label. |
| src/app/volunteers/page.tsx | Adds a temporary page to render the table. |
| src/app/layout.tsx | Switches global font to Manrope. |
| src/app/globals.css | Wires Tailwind v4 import + theme variables import; moves base styles into @layer base. |
| postcss.config.mjs | Adds Tailwind v4 PostCSS plugin config. |
| package.json | Adds Tailwind v4 + TanStack Table + Lucide + clsx (and PostCSS deps). |
| package-lock.json | Lockfile updates for the added dependencies. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Implements the main Volunteer Tracking table UI (Issue #61) using TanStack Table, including data fetching from getVolunteersTable, interactive cell selection/copy behavior, and updated styling (Tailwind + Manrope) to match the Figma/TRCC design direction.
Changes:
- Added the VolunteersTable component with TanStack Table features (search, sort, pagination, column resizing) and cell selection/copy support.
- Introduced tag/chip rendering utilities and color tokens for cohort/role/pronoun display.
- Updated global styling setup (Tailwind v4 + PostCSS) and switched the app font to Manrope; added a temporary
/volunteerspage for viewing.
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Adds Tailwind config (content globs + Manrope as font-sans). |
| src/styles/variables.css | Defines Tailwind v4 @theme color tokens used by tag/chip UI. |
| src/lib/api/getVolunteersTable.ts | Marks the API module as "use server" for Next server-action/server-only usage. |
| src/components/volunteers/utils.ts | Adds helpers for formatting cell data and mapping tag labels to color classes. |
| src/components/volunteers/useCellSelection.ts | Implements multi-cell selection + clipboard copy behavior. |
| src/components/volunteers/types.ts | Defines frontend Volunteer shape extending Supabase row types with role/cohort arrays. |
| src/components/volunteers/VolunteersTable.tsx | Main table UI, data loading (backend/mock/empty), selection visuals, and controls. |
| src/components/volunteers/VolunteerTag.tsx | Renders a colored tag/chip for multi-value fields. |
| src/components/volunteers/HeaderWithIcon.tsx | Renders column headers with icons. |
| src/app/volunteers/page.tsx | Adds a temporary page to view the volunteer table. |
| src/app/layout.tsx | Switches global font setup from Geist to Manrope. |
| src/app/globals.css | Migrates to Tailwind v4 CSS import approach + base layer tweaks. |
| postcss.config.mjs | Configures Tailwind v4 PostCSS plugin. |
| package.json | Adds dependencies for Tailwind v4, TanStack Table, clsx, lucide-react, PostCSS tooling. |
| package-lock.json | Lockfile updates for the new dependencies. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| @@ -0,0 +1,271 @@ | |||
| import { useState, useRef, useEffect, useCallback } from "react"; | |||
| import { Table, Cell } from "@tanstack/react-table"; | |||
1zhaohel
requested review from
1zhaohel and
Copilot
and removed request for
Copilot
1zhaohel
force-pushed
the
frontend/volunteer-table
branch
from
f41f11a to
fb4b927
Compare
There was a problem hiding this comment.
Pull request overview
Implements the main Volunteer Tracking table UI (Issue #61) using TanStack Table, including cell selection/copy interactions, and updates styling infrastructure (Tailwind + font) to match the intended design direction.
Changes:
- Added a
/volunteerspage and aVolunteersTablecomponent with sorting/searching/pagination and custom cell selection + clipboard copy. - Introduced volunteer table UI helpers (tag rendering/coloring, header-with-icon, selection hook, shared types).
- Updated styling setup (Tailwind v4/PostCSS config, theme variables, and switched global font to Manrope); marked
getVolunteersTableas a server action for client usage.
Reviewed changes
Copilot reviewed 14 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Adds Tailwind config and Manrope-backed fontFamily.sans. |
| postcss.config.mjs | Enables Tailwind via @tailwindcss/postcss. |
| src/styles/variables.css | Defines Tailwind v4 theme variables used by the table (tag + purple palette). |
| src/app/globals.css | Imports Tailwind + theme variables and moves base styles into @layer base. |
| src/app/layout.tsx | Switches default app font to Manrope and applies font-sans. |
| src/lib/api/getVolunteersTable.ts | Adds "use server" to allow calling from a client component. |
| src/components/volunteers/VolunteersTable.tsx | Main table implementation (fetch/transform data, search/sort/paginate, resize, selection UI). |
| src/components/volunteers/useCellSelection.ts | Drag/multi-select + clipboard copy behavior for cells. |
| src/components/volunteers/utils.ts | Cell formatting + tag color mapping. |
| src/components/volunteers/VolunteerTag.tsx | Tag/chip rendering for multi-value fields. |
| src/components/volunteers/HeaderWithIcon.tsx | Column header label + icon helper. |
| src/components/volunteers/types.ts | Frontend volunteer row type including derived arrays for cohorts/roles. |
| src/app/volunteers/page.tsx | Temporary page to view the table. |
| package.json / package-lock.json | Adds dependencies for TanStack Table, Lucide icons, Tailwind/PostCSS tooling, and clsx. |
| src/lib/api/index.ts | Fixes formatting/indentation for one export line. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
This pull request implements the main body of the Volunteer Table, which resolves the volunteer table issue. Currently, it is a draft as the
getVolunteersTableAPI (#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
ag-gridlibrary, I have switched toreact-table, or Tanstack Table, to implement the functionalityreact-tablelibrarytailwindinstallation in the project for the visuals of the tablelucide-reactlibrary for the icons in the table columns and the search bar + filter + sorting componentsQuestions and Comments
Currently, this ticket depends on the
getVolunteersTableAPI (Implemented getVolunteersTable API function #80 #82), which is why it is a draftThe issue states:
However, neither the Figma nor
Volunteerreturn type fromgetVolunteersTableAPI contain the columnfuture_interest, and the API response also doesn't containprior_roleseither; I currently have them added since they are in the issue description, although I'm not sure if that's intentionalThe 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
/volunteersendpoint 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 easilyThe 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
