3

I have a table where a lot data is repeated (see the competition, players and date columns).

table with repeating columns

The endless rows of the same stuff draws the eye and makes it seem like the most important thing in the table and distracts from the interesting (varying) stuff.

Is the a good way to display the same information over over like this? It does vary further down the table.

2

If they are often grouped, then using some indication that this is all the same and only printing the label on the first one could work, would take some handy coding though. The other option that came to mind was to simply make any repeated line have less contrast (possibly return to full contrast on hover?).

Something Like These Example of treating repeated info in Table

  • Good ideas, thanks. A pale background color will really make it obvious what is going on there. – Thomas David Baker Oct 31 '16 at 10:16
1

Luke's suggestion is good. Another option, if space and the data allows, is to have 'Penny Dreadful Thursdays 1.01' vertical. But that would break quickly if there aren't enough entries. Looking at the chart too it may not be necessary to have a Top 8 - simply have a dividing line between the two. Of course, if the data is able to be sorted by any other column all our ideas break ;)

  • 1
    Interesting idea. The table is sortable by all of its columns but I am considering writing the all-singing all-dancing javascript solution to make sure it always looks right post-sort. If I can work out what "looks right" is :) – Thomas David Baker Oct 31 '16 at 10:16
  • 2
    Wow. That's going to be the Cirque du Soleil of JavaScript 😳🙃 Good luck! – Daniel Oct 31 '16 at 10:20
  • I ended up with this that adds the class 'repeat' to any cell that has the same text as the cell above: var current, previous; $(this).find('td').find('*').addBack().removeClass('repeat'); $(this).find('tr').each(function() { current = $(this).find('td').toArray(); if (previous) { for (i = 0; i < current.length; i++) { if ($(current[i]).text() == $(previous[i]).text()) { $(current[i]).find('*').addBack().addClass('repeat'); } } } previous = current; }) – Thomas David Baker Nov 6 '16 at 7:15
  • This ended up taking up to 2 seconds on really big tables (10,000 rows) so I just removed it from the site. Sad, but I want the 2 seconds back :) – Thomas David Baker Nov 27 '17 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.