I would venture to say the Table/Grid is the most misunderstood and underdeveloped single UI control used today, especially in B2B applications. I thought it would be a good idea to detail it out. Warning: It’s thorough!

Note: AG-Grid is an excellent React/Vue-friendly table system with all of these features. I would suggest using it as your application component.

I’ve organized the patterns based on where they are used, mainly Tables, Columns, Rows, and Cells. Loose ends at the end. For terminology, I use the words table and grid interchangeably.

Table functions

Pin Header and Footer

Tables should not be floating in the middle of your design. You shouldn’t have to scroll up and down to see the header and footer. When the user is looking at a datagrid, they should easily know which column they are looking at or how many rows are selected.

This means that the contents should have both horizontal and vertical scrollbars. Imagine a spreadsheet. You can scroll in both directions if the contents require it.

Designer note: It is always surprising to me how often I see tables floating on the page. It’s so obviously a poor experience. Don’t do it.

Footer Info

At the bottom of every table there should be an indicator of how many rows are being displayed. This footer can be used for other functions, but this is the minimum. The only exception is when the amount is unknowable. I once had to make that number “on-demand” because it cost too much to calculate.

Export

Tables should always have the ability to download their contents as a CSV file. Users often want to do manual manipulation of data and the export button is an easy outlet for that. I usually put the link in the bottom right of all tables, in the footer.

Column functions

Filtering

This is the #1 feature that is essential for all tables. Rather than separate out the filtering/searching functionality, just bake it into the header of each column. The original design of these kinds of filters was Microsoft Excel when you were in Data mode.

Designer Tip: Microsoft Excel is one of the most used programs in the world. Incredibly powerful with some unique UI. Steal from it liberally.

I typically design the filters to be a little more pleasant to look at, but the idea is the same as Excel.

Notice how different column types (string, number, data, true/false, etc) are handled differently. Even the icons are different. This is easy to accomplish from an engineering point of view, but really makes a difference from the user perspective.

There are many styles on how to specifically render the filters. All are legitimate. The trade-offs are often application specific. The key is just to make it robust. Filtering is very important. Example from AG-Grid below.

Sorting

This one is included in most table components. Typically, you just click the header once to sort and again to reverse sort. In the design shown earlier, I combined it into the header filter UI. However, it can be a simple as a little arrow.

However, notice they use the wrong icon. In the case above, the sort is A->Z but the icon says Z-A. Make different icons to express the way its suppose to work.

One function that is uncommon is the multi-sort. This is typically confusing to users but may be essential depending on the data. Basically, it just means sorting one column first and then a second column after it.

When faced with this problem, you may need to add “Segmentation” logic which allows a more advanced way to get the results you want.

Resizing

When column values get too long, you can’t just rely on horizontal scrolling. You should be able to resize the column which would automatically truncate the value in the cells and add an ellipses. (…) This is often left out of many “off the shelf” table components, but it is crucial for situations when the user would want to shorten the length of a cell without it wrapping.

Reordering

It drives me crazy when a UI insists that I reorder the columns using a modal or other control. Just let me drag them around. Easy peasy, lemon squeazy.

Pinning

Pinning a column is also known as freezing a column. It means the horizontal scrollbar shows up to the right of the pinned/frozen column. You use this when the first column acts as an “index” which must be seen to understand the other columns. Typically, this is only useful when there are many columns that go offscreen.

Row functions

Single/Multi select

With many data tables, you want to perform actions on the rows. Having checkbox selection can be very helpful. There are two modes. Single select is when you may only select one row, not 2 or more. This is akin to a radio button set in a form. The second mode is multi-select which lets you select any number. Typically, by holding shift you can select many rows at once. Try it in GMail.

Warning: When using pagination, multi-select can become very confusing. I recommend using viewport scrolling instead (below).

Grouping

This is also known as a Tree Grid. It means taking the value of one column and then grouping the results in a tree like structure. This can be very useful depending on the content.

Scrolling

There are multiple models for scrolling. Pagination, Infinite scrolling and Viewport scrolling.

Pagination

I hate pagination. I’ve hated it my whole life. It’s such an engineering approach to the problem of too much data.

The problem with pagination is that users hardly ever go to page 2. Also, if they are looking for something, they have no idea what page it’s on. Imagine if Excel or Google Sheets had pagination. It would be impossible to use.

Designer tip: Engineers will always default to pagination. You have to get to them early and insist on another scrolling model.

Infinite Scrolling

This method removed pagination. Instead you scroll down and the system just keeps adding rows to the bottom. This is how “feeds” like Twitter and Instagram work. You scroll and it keeps loading. The problem with infinite scrolling is that there is no way to jump to the end. It’s most useful for a feed that has no real end. Something like an error log might be good for this style of scrolling.

Use this method when the length of the data is constantly changing. The scrollbar will look like its moving as you scroll. It seems to go to the bottom and then it moves up as the new bottom is loaded.

Viewport scorlling

This is the preferred way to scroll normal data that has a fixed length. It works by focusing on where the users viewport (the part that is visible on the screen) is currently pointing and then shows the data for that section. In other words, it only loads what is in the viewport at the time. You scroll and it replaces the rows with new rows.

This allows for the system to not be overloaded with too much data, but also let’s the user scroll as if all of the data was already loaded. Spreadsheets currently work this way.

The scrollbar doesn’t move in this case. All the way down goes to the true end of the table. Middle is the middle. Therefore, you need to know the number of rows in advance.

Cell functions

Custom rendering

Cells shouldn’t just have numbers. You should be able to put in bar charts, sparklines, icons, and more.

Additionally, you should be able to take formats like timestamps and currency and render them in custom locales format. Sometimes you will even want to wrap the contents of a cell onto two lines and double up the height of the row.

Inline editing

Often data is editable in a grid. It is effective for a user to edit the value directly rather than have to go somewhere else to edit, such as a modal. Inline editing comes in various flavors depending on the content. (String, Boolean, Number, Date, etc). The UI should adapt to the cell contents.

Sometimes, the cell contents of a row must be edited as a block rather than one cell at a time. You can pop up a modal or do inline forms like this example from ExtJS.

Spreadsheet functionality

This is obviously an advanced case, but sometimes you want to allow users to paste data in directly from a spreadsheet or even a list in notepad. Additionally, the ability to drag a small handle on the bottom right of a cell to replicate the values down can be handy in certain circumstances.

Use this functionality only if your use case demands it.

Loose Ends

Pivot Functionality

AG-Grid allows for a full blown pivot mode. At this point, it has evolved well past a simple data grid. This is an incredibly powerful way to explore data, but typically requires a power user familiar with this user interface.

Execution notes

When you are a designer, engineer, or product manager deciding which table component to use, it may be tempting to take any open source component since all you need is the raw basics at first. My advice is to over-invest in this component right from the start. The cost is much lower in the beginning than it is later when you want to swap the component out.

AG-Grid is not free, but it is far cheaper than the manpower required to make the functionality on a true open source alternative.

Last note is that these tools get upgraded over time. All components have this problem. Plan on regular upgrades otherwise you will create tech and ux debt that will eventually make you paralyzed.

I think that’s everything I know about grids. Did I miss anything?

Note: I am not sponsored by anyone, so these opinions come from my experience only. If you know of other libraries for grids that do all of this, please let me know.

Further reading: Tree Pattern