modern-teal

Using Table as a Scoreboard

I am using Tanstack Table v8 as a scoreboard in a table format. Each row in my table represents a competitor in the competition with a score column. I am wanting to display a gold, silver, and bronze star next to the rows in 1st, 2nd, and 3rd place. My table allows for sorting and filtering. Is there a way for me to place the star in the an additional left-most column? Can I keep the start associated with the correct rows even if a user changes the filtering or sorting values on the table?

6 Replies

genetic-orange•3y ago

Are you using column helpers or the raw object for defining columns?

modern-tealOP•3y ago

I am defining my columns and passing them into my call to useReactTable() like the following:

const table = useReactTable({
    data,
    columns,
    state: {
      columnFilters,
      sorting,
    },
    enableMultiSort: true,
    enableGlobalFilter: false,
    getCoreRowModel: getCoreRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    getFacetedMinMaxValues: getFacetedMinMaxValues(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    onSortingChange: setSorting,
  });

const table = useReactTable({
    data,
    columns,
    state: {
      columnFilters,
      sorting,
    },
    enableMultiSort: true,
    enableGlobalFilter: false,
    getCoreRowModel: getCoreRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    getFacetedMinMaxValues: getFacetedMinMaxValues(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    onSortingChange: setSorting,
  });

genetic-orange•3y ago

alright so as for the column you basically have to add a display column and then use the cell function on that column to then display the medals if you're using column helpers it would be a bit like this

const columns = [
  columnHelpers.display({ header: 'Medals', cell: (cell) => {
    if (cell.row.original.yourRankProp === 1) {
      // your actual logic here
    }
  }),
  // the rest of your columns
]

const columns = [
  columnHelpers.display({ header: 'Medals', cell: (cell) => {
    if (cell.row.original.yourRankProp === 1) {
      // your actual logic here
    }
  }),
  // the rest of your columns
]

the

    if (cell.row.original.yourRankProp === 1) {
      // your actual logic here
    }

    if (cell.row.original.yourRankProp === 1) {
      // your actual logic here
    }

part would be the one rendering the medals

modern-tealOP•3y ago

Yes that makes sense. Since my table will be sortable, the user can change the sort of the table. The competition however is going to be based on a score column and another column to handle tie breaks. The initial sort state of the table will sort competitors based on how they are ranked. So, the person in first place would have a medal (🥇) displayed next to their name. If the user changes the sort state, I still want this user to have the (🥇) next to their name. I don't want the person who meets the user's new sort criteria to have the medal. If that makes sense? I'm terrible at trying to explain what I want. My underlying data does not have a rank property.

genetic-orange•3y ago

ah does the underlying data come sorted according to the rank? oh wait yeah that i dont think my idea will work

modern-tealOP•3y ago

No. It does not. I appreciate the ideas though! Maybe I go that route. Or maybe I don't allow the end user to change the sorting. Or maybe I don't do anything and see if anyone complains that there isn't a medal, haha. This was more of a "nice to have feature" that I thought of.

Gaming

Programming

Using Table as a Scoreboard

Did you find this page helpful?