Next.js Discord

Discord Forum

Flexible Table Design with Filterable Data

Unanswered
Caleb posted this in #help-forum
Open in Discord
I'm currently trying to create a flexible table design which displays player statistics from several matches in a tournament (or event window). I've tried to follow the example at https://ui.shadcn.com/docs/components/data-table.

Currently, the way I get the correct data from my PostgreSQL (using Prisma) is very sloppy. What it currently displays is cumulatives from all 6 matches in the current event window (the page is only concerned with the current event window).

You'll want to briefly look over my schema (attached image) before continuing.

What I have in mind:
- the columns included should be selectable (single-select dropdown) (currently only eliminations and damage)
- in addition to cumulative stats, I want to be able to filter by match (multi-select dropdown)
- filter stats displayed by distance (slider with two movable points)
- filter stats displayed by timestamp (slider with two movable points)
- filter stats display by weapon type (multi-select dropdown)

I'm new to this, and completely lost on how to design this in my app. Any help would be appreciated, thanks.

0 Replies