Skip to content

Conversation

@JoeBuildsStuff
Copy link

Database-Level Column Selection for Tasks Table

Overview

This PR enhances the table component by adding support for true database-level column selection via URL search parameters. Previously, the data-table-view-options component only controlled column visibility in the UI after fetching all columns from the database. Now, it dynamically determines which columns to retrieve from the database, improving query performance and reducing data transfer.

Implementation

  • Modified the getTasks function to filter database queries based on the columns search parameter
  • Repurposed DataTableViewOptions to control both UI visibility and database field selection
  • Added configurable column definitions with user-friendly labels in page.tsx
  • Set sensible default columns in validations.ts when none are specified in the URL
  • Ensured critical columns (like "actions") are always available in the UI regardless of selection

Benefits

  • Performance: Only fetches the data actually needed, reducing database load and transfer size
  • Flexibility: Users can customize which columns they need through the UI or URL parameters
  • Consistency: Same column selection controls both database fetching and UI display
  • Developer-friendly: Maintains the same clean API while adding this optimization

Example Usage

Users can now:

  1. Use the "View" button in the table toolbar to select which columns to display
  2. The selection is reflected in the URL as ?columns=id,title,status
  3. When the page loads with these parameters, only those columns are fetched from the database

Technical Notes

  • The implementation maintains backward compatibility - all columns are fetched if none are specified
  • The column selection state is persisted in the URL, making it shareable and bookmarkable
  • Works seamlessly with existing filtering, sorting, and pagination features

This enhancement is particularly valuable for tables with many columns or those containing large text fields, as it can significantly reduce the amount of data transferred from the database.

Demo

SelectColumnsFromDB.mp4

- Add column selection via search parameters to define database queries instead of select() all in queries.ts for getTasks
- Create configurable column management with user-friendly labels that will specify all columns available for retrieval for the db from client side
- Update data fetching logic to only retrieve selected columns using the data-table-view-options.tsx component
@vercel
Copy link

vercel bot commented Apr 14, 2025

@JoeBuildsStuff is attempting to deploy a commit to the sadmann7 Team on Vercel.

A member of the Team first needs to authorize it.

@officiallerio
Copy link

any updates regarding on this one? like will it approved and get merged?

@officiallerio
Copy link

@sadmann7 highly apperciate if you could check this out!

@JoeBuildsStuff
Copy link
Author

@sadmann7 thoughts/feedback/suggestions... delete and reject?

@sadmann7
Copy link
Owner

sadmann7 commented Jun 8, 2025

i haven't got much free time for a while.

i can take a look next week.

can you fix the merge conflicts please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants