Skip to main content

Tables

Introduction

Tables are a common way of displaying data in enterprise applications. Tables are compact and include useful ways to sort, filter, and group data. There are a few critical points for implementation of tables that you should know. Watch the video to learn more.

Video

Transcript

Tables are a common way of displaying data in enterprise applications. Tables are compact and include useful ways to sort, filter, and group data. There are a few critical points for implementation of tables that you should know. A table — tabular data — allows a user to compare data horizontally and vertically.

Make sure table row heights are compact enough to allow a user to easily compare values vertically. If the rows are too tall a user will have trouble comparing values, thus defeating one of the primary purposes of a table. These row heights are much too tall. We often see row height issues when using an embedded section of other UI in a table cell. This is a risky practice and not recommended. When you embed a section of UI into a table cell, you run the risk of multiple alignment issues and column width and height issues.

Developers sometimes embed a section into a table cell as a way of creating show/hide logic within a table cell. It’s better to move that logic to the data itself—in other words, source the data according to needed logic, rather than via an embedded piece of UI.

We should provide the correct width for columns contextual to the data in those columns. For instance, if a column includes an ID, and we know that IDs will never be longer than, say, fifteen characters, we should present the initial width of the ID column to be no wider than fifteen characters. If there is another column that may be associated with longer data, for example an applicant name column, we should set the widths for the other columns and set applicant name column to ‘fill the rest’ of the available space.n this example we see a lot of inefficient column widths. Here the ‘applicant ID’ and ‘grade’ columns are far too wide, leaving less room for the ‘applicant name’ and ‘start date’ columns, and leading to wrapped headings.

We prefer column headings that do not wrap. This may not always be possible but providing clear and concise columns headings is the right place to start. The alignment of data in tables is important because proper alignment makes the comparison of tabular data easier. 

This illustrates multiple issues. The display of numbers in a table column should be right-justified, and the column heading should always match the justification of the column data. Lastly, tabular data in columns should have consistent rounding: in other words, they should have the same number of decimal points for each value.

This is the same table with numbers right-justified, correct column heading justification, and consistent rounding. Notice how much tighter and easier it is to read the table is now.

Note: Dates should not typically be right-justified, as date data can be formatted as non-numeric.

Progressive scroll of a table is preferred, with the initial display set to 100 rows in most use-cases. List-based filtering should only be used for columns of data that have less than 50 unique values. If more than 50 unique values, only the text search filter should be used, as performance will otherwise suffer. Dates and numbers should always be filtered using the range filter.

Check your knowledge with the following interaction.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice