Question

What are some of the good UX designs for showing up a grid with a large number of columns? ===========================================================================
I am sure many of the columns will be absolutely needed for viewing but some might be required very infrequently. But there is no way that we can get rid of those columns from the grid. We can show-hide some columns.
I am looking for any specific UX designs on the grid itself instead of showing a checkbox outside of the grid which decides whether the grid shows that column... I also need to find out how it can implemented or which framework can help me with that.
I mostly plan to use ASP.NET MVC along with Angular, jQuery but I am free to use any open source frameworks out there...

Was it helpful?

Solution

  1. If the columns can be collected into groups (e.g. for a table of customers, there might be several financial columns and several address columns) then put controls outside the table that show/hide a whole group of columns at once
  2. When one column is calculated based on several others, just show the calculated column by default, but add an icon in the column heading (e.g. a triangle that toggles between two orientations, right or down). Clicking that icon will show the contributing columns to the right.
  3. The same principle can be used whenever there is a group of columns in which one column can act as a summary. You could even introduce fake placeholder columns with the group name. e.g. a column with the value "Address" in every row. When the user clicks on that label, the address columns (street, city, postcode etc) are revealed to the right. Perhaps apply a different background colour to visually distinguish between label and data columns.
  4. Use a Freeze columns option like Excel does to keep the left-most columns visible when the user scrolls to the right.
  5. Allow the table to split into two (or more) parts with separate horizontal scroll bars for each section.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top