refactor(wells, contacts): move list pages onto shadcn DataTable - #347
Draft
jirhiker wants to merge 2 commits into
Draft
refactor(wells, contacts): move list pages onto shadcn DataTable#347jirhiker wants to merge 2 commits into
jirhiker wants to merge 2 commits into
Conversation
Preview DeploymentPreview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
jirhiker
changed the title
jirhiker
changed the title
jirhiker
marked this pull request as draft
August 17, 2026 20:54
Preview DeploymentPreview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
Replaces the MUI DataGrid on the Wells and Contacts lists with a shared shadcn table built on TanStack Table, following the denser table style introduced by the Projects work in #344. - Adds src/components/DataTable: table renderer, sortable/filterable column headers, column visibility menu, filter chips, pager, and a useRefineDataTable hook bridging Refine's useTable server state (paging, sorting, filtering) to TanStack's manual mode. - Column filters cover text, single-select, and numeric/date comparison operators; PostHog events keep the names the DataGrid pages emitted (<prefix>_sorted, _filter_applied, _column_visibility_changed). - Wells: same columns, tooltips, project filter chip, server search, batch field sheets and CSV export; now defaults to newest first (created_at desc, the closest field the API exposes to "last updated"). - Contacts: rows now select instead of navigating, so the email, phone and address cards open below the table; the name cell links to the contact page. - Adds ListPageShell for the page chrome the DataTable pages share, and moves the row navigation helpers next to the DataTable (re-exported from ListPage). Density toggle is not carried over; the shadcn table is already compact. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The wells and contacts assertions still looked for the DataGrid's explicit role attributes; the shadcn table renders th/tr, same as the projects list already asserted. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
jirhiker
force-pushed
the
refactor/wells-contacts-shadcn-table
branch
from
August 17, 2026 21:04
26070fc to
7877e0b
Compare
Preview DeploymentPreview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
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
1 participant
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.
Stacked on #344 — targets
BDMS-1133, so the diff here is only the Wells/Contacts refactor.Replaces the MUI DataGrid on the Wells and Contacts lists with a shared shadcn table built on TanStack Table, following the denser table style #344 introduced for Projects.
What's here
New
src/components/DataTable(TanStack Table v8 over shadcnui/table)DataTable— rows, loading skeletons, empty state, row href with modifier-click new-window, selected-row stateDataTableColumnHeader— tri-state sort plus a filter popover: text, single-select, and numeric/date comparisons (=≥≤><)DataTableViewOptions— column visibility menu (replaces the DataGrid "Columns" button)DataTableToolbar— search input, dismissible filter chips, record countDataTablePagination— page size select and pageruseRefineDataTable— bridges Refine'suseTableserver state (paging, sorting, filtering) to TanStack's manual mode, hides permanent filters from the chips, and keeps the PostHog event names the DataGrid pages emitted (<prefix>_sorted,_filter_applied,_column_visibility_changed)Pages
Supporting
ui/popover.tsxadded from the shadcn registryListPageShellholds the breadcrumb/title/header-button chrome the DataTable pages shareListPage@tanstack/react-table@^8.21.3Notes for review
created_at desc. The ask was "last updated first", butThingResponseexposes no update timestamp —created_atis the closest field. Easy to switch if the API acceptssort=updated_at.useListPageDataGridAnalyticsis now unused. Left in place rather than editingsrc/hooks/index.ts, which has unrelated in-flight work; worth deleting in a follow-up.Verification
Against the dev API: wells list loads newest-first (
GET /thing/water-well?...&sort=created_at&order=desc), a name filter narrows to 2 records and shows a dismissible chip, contacts paginate server-side through 2,273 records, header clicks issue sorted requests, and the contact detail cards populate on row select. No console errors.tscandbiome checkare clean. 14 new tests cover the DataTable renderer and the Refine/TanStack bridge; the pre-existing contract-test failures need the prism mock server on :4010.🤖 Generated with Claude Code