feat: participants table redesign#322
Merged
Merged
Conversation
maciejkrol18
changed the title
ShadowCatP
marked this pull request as ready for review
March 14, 2026 13:46
maciejkrol18
requested changes
Mar 22, 2026
Member
There was a problem hiding this comment.
Infinite scroll: Nie wykorzystujemy wirtualizacji. Gdy powiedzmy że załadowanych jest wszystkich 500 wierszy to wydajność resizingu kolumn bardzo cierpi. Choć ogólnie z taką ilością wierszy scrollowanie działa płynnie, no to właśnie przy resizingu zaczyna się wszystko zacinać. Chciałbym zobaczyć refaktor z użyciem TanStack Virtual - powinno pomóc.
UI: Nie ma fade outu na ostatnim widocznym rzędzie jak na designie.
Konflikty: Trzeba rozwiązać.
ShadowCatP
force-pushed
the
feature/participants-table-redesign
branch
from
April 2, 2026 18:08
be6b54b to
57ba630
Compare
maciejkrol18
requested changes
Apr 11, 2026
maciejkrol18
left a comment
maciejkrol18
left a comment
Member
There was a problem hiding this comment.
Fajnie zrobiona wirtualizacja, teraz o wiele płynniej działa resize'owanie.
Pozostałe komentarze nie do konkretnych linijek/plików
- Cały czas (przynajmniej u mnie) pokazuje się taki błąd przy wejściu na tabelę:
- Dalej nie ma tego fade outu na dole jak na designie
- Zarówno w poziomie i pionie nie ma customowych scrollbarów ze
ScrollArea, tylko są te defaultowe przeglądarki
maciejkrol18
requested changes
Apr 18, 2026
maciejkrol18
left a comment
maciejkrol18
left a comment
Member
There was a problem hiding this comment.
Oba poniższe problemy naprawiłem u siebie na szybko cofając stan participants-table.tsx na commit (df43642) - dalsze commity mają te problemy ale jako że był forcepush to nie jestem pewien czy to info coś daje
Zbugowane scrollowanie
W przypadku dużego datasetu jak wydarzenie z 500 uczestnikami, zaczyna się bugować scrollowanie w pionie - przy próbie scrolla cały czas przeskakuje. Problem nie występuje dla wydarzenia z 10 uczestnikami, gdzie wówczas też jest scroll. Nie dotyczy scrolla w poziomie.
2026-04-18.21-15-50.mp4
Scrollbary ze ScrollArea
Jak widać na filmiku wyżej, dalej ich nie ma i są te defaultowe z przeglądarki
maciejkrol18
requested changes
May 2, 2026
| const row = rows[virtualRow.index]; | ||
|
|
||
| return ( | ||
| <TableRow key={row.id}> |
Member
There was a problem hiding this comment.
Niedziałający scrolling jest spowodowany niepoprawną wirtualizacją rzędów tabeli
<TableRow key={virtualRow.key} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
Contributor
There was a problem hiding this comment.
Pull request overview
Redesigns the event participants table to a new “core” architecture with virtualized rendering and richer table tooling (column sizing/order, bulk actions), while adjusting attribute option typing and updating the test/mocking setup to match the new structure.
Changes:
- Replaces the legacy participants table implementation with a virtualized, resizable table core and updated column/cell components.
- Adds/updates table UI features: column visibility + drag ordering (persisted), bulk edit, export, improved search toolbar, and updated selection UX.
- Updates attribute option types to support
{label, value}options and refactors related UI + tests/mocks accordingly.
Reviewed changes
Copilot reviewed 47 out of 58 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.setup.ts | Adds IntersectionObserver mock for unit tests. |
| tests/msw/node.ts | Points MSW server setup to new handlers location. |
| src/types/attributes.ts | Expands attribute options typing to `string |
| src/hooks/use-participants-table.ts | Reworks table hook for new columns/meta + column order persistence. |
| src/hooks/use-participants-data.ts | Simplifies participant mutations and adds bulk-delete toasts. |
| src/components/ui/scroll-area.tsx | Extends scroll area API (viewport ref/class) and scrollbar styling. |
| src/components/ui/input-group.tsx | New input group component used by toolbar search. |
| src/components/forms/event/attributes/attribute-item.tsx | Adapts attribute option handling for new option shape. |
| src/components/attribute-input.tsx | Renders select/multiselect options using {label,value} when provided. |
| src/app/dashboard/events/[id]/participants/table/tests/remove-participant.test.tsx | Removes legacy participant removal tests (old structure). |
| src/app/dashboard/events/[id]/participants/table/table-row-form.tsx | Removes legacy expanded-row edit form implementation. |
| src/app/dashboard/events/[id]/participants/table/table-pagination.tsx | Removes legacy pagination component. |
| src/app/dashboard/events/[id]/participants/table/sort-button.tsx | Removes legacy sort button/icon components. |
| src/app/dashboard/events/[id]/participants/table/participants-table.tsx | Removes legacy participants table component. |
| src/app/dashboard/events/[id]/participants/table/expand-row-cell.tsx | Removes legacy row expand cell. |
| src/app/dashboard/events/[id]/participants/table/expand-all-header.tsx | Removes legacy expand-all header. |
| src/app/dashboard/events/[id]/participants/table/edit-button.tsx | Removes legacy edit button component. |
| src/app/dashboard/events/[id]/participants/table/delete-dialog.tsx | Removes legacy single-delete dialog component. |
| src/app/dashboard/events/[id]/participants/table/core/utils.ts | Extends value formatting (incl. multiselect parsing). |
| src/app/dashboard/events/[id]/participants/table/core/participants-table.tsx | New virtualized participants table renderer with row resizing. |
| src/app/dashboard/events/[id]/participants/table/core/data.ts | New participant flattening utilities. |
| src/app/dashboard/events/[id]/participants/table/core/columns.tsx | New column factory for redesigned table (filters/sort/edit col). |
| src/app/dashboard/events/[id]/participants/table/components/table-ui/table-toolbar.tsx | New toolbar layout with InputGroup search + action buttons. |
| src/app/dashboard/events/[id]/participants/table/components/table-ui/table-selection-info.tsx | Updates selection info for non-paginated/filtered selection. |
| src/app/dashboard/events/[id]/participants/table/components/table-ui/table-column-header.tsx | New header cell (sorting aria + resize handle). |
| src/app/dashboard/events/[id]/participants/table/components/table-ui/sort-header.tsx | New sortable header button + icons. |
| src/app/dashboard/events/[id]/participants/table/components/table-ui/editable-cell.tsx | New editable cell renderer for inline editing. |
| src/app/dashboard/events/[id]/participants/table/components/table-ui/column-settings-dropdown.tsx | Adds column visibility + drag reorder UI (DND). |
| src/app/dashboard/events/[id]/participants/table/components/inputs/attribute-value-input.tsx | New attribute editor input for table inline/bulk edit. |
| src/app/dashboard/events/[id]/participants/table/components/dialogs/send-mail-form.tsx | Adjusts imports + disables send when no recipients, adds tooltip. |
| src/app/dashboard/events/[id]/participants/table/components/dialogs/help-dialog.tsx | New help dialog for table usage tips. |
| src/app/dashboard/events/[id]/participants/table/components/dialogs/delete-many-dialog.tsx | New bulk delete dialog with tooltip/disabled state. |
| src/app/dashboard/events/[id]/participants/table/components/dialogs/bulk-edit-dialog.tsx | New bulk edit dialog for updating an attribute across selections. |
| src/app/dashboard/events/[id]/participants/table/components/buttons/table-menu.tsx | Replaces pagination UI with column settings dropdown. |
| src/app/dashboard/events/[id]/participants/table/components/buttons/filter-button.tsx | Updates filter options to support {label,value} options. |
| src/app/dashboard/events/[id]/participants/table/components/buttons/export-button.tsx | New export button wired to participants export action. |
| src/app/dashboard/events/[id]/participants/table/components/buttons/edit-button.tsx | New inline edit/save/cancel button for each row. |
| src/app/dashboard/events/[id]/participants/table/components/buttons/drawing-preview-button.tsx | Updates action import path after refactor. |
| src/app/dashboard/events/[id]/participants/table/components/buttons/download-file-attribute-button.tsx | Updates action import path after refactor. |
| src/app/dashboard/events/[id]/participants/table/columns.tsx | Removes legacy column generation + expand fetching logic. |
| src/app/dashboard/events/[id]/participants/table/tests/utils.tsx | Refactors test harness to new hooks + core table rendering. |
| src/app/dashboard/events/[id]/participants/table/tests/sorting.test.tsx | Updates sorting tests to new header/button structure. |
| src/app/dashboard/events/[id]/participants/table/tests/send-mail.test.tsx | Adds send mail tests for new dialogs/UX. |
| src/app/dashboard/events/[id]/participants/table/tests/remove-participant.test.tsx | Adds bulk delete tests for new dialog flow. |
| src/app/dashboard/events/[id]/participants/table/tests/providers.tsx | Adds test providers for intl/react-query/toasts. |
| src/app/dashboard/events/[id]/participants/table/tests/mocks/test-cases-data.ts | Updates test case data for new columns/visibility. |
| src/app/dashboard/events/[id]/participants/table/tests/mocks/mocks.ts | Adds shared MSW mock helpers for participants endpoints. |
| src/app/dashboard/events/[id]/participants/table/tests/mocks/mocked-data.ts | Adds mocked participants/attributes dataset for tests. |
| src/app/dashboard/events/[id]/participants/table/tests/mocks/handlers.ts | New MSW handlers for table-related actions in tests. |
| src/app/dashboard/events/[id]/participants/table/tests/filtering.test.tsx | Updates filtering tests for new UI structure. |
| src/app/dashboard/events/[id]/participants/table/tests/export.test.tsx | Adds export tests for new export button. |
| src/app/dashboard/events/[id]/participants/table/tests/edit-participant.test.tsx | Updates edit tests for new inline edit UX. |
| src/app/dashboard/events/[id]/participants/participants-loader.tsx | Integrates new table core + menu into participants page loader. |
| src/app/dashboard/events/[id]/participants/actions.ts | Changes updateParticipant API to accept a payload object. |
| package.json | Adds DnD + virtualization deps; bumps some package versions. |
| messages/pl.json | Adds/updates table i18n strings for new UX. |
| messages/en.json | Adds/updates table i18n strings for new UX. |
Comments suppressed due to low confidence (1)
src/app/dashboard/events/[id]/participants/table/components/table-ui/table-toolbar.tsx:53
bg-background!is not valid Tailwind syntax for!important(Tailwind uses a leading!, e.g.!bg-background). As written, this class likely won't apply any background styling.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I still need to adjust css style of things, but the functionality is finished. Also Imo participant details page should be moved to a separate issue, because there is still not enough info on how it will function and it is strictly related to the table itself.