This can be especially helpful if your table is going to be viewed on a mobile device or includes many columns of data. Possibly there is an opportunity to combine data from 2 cells to 1 cell and stack the content horizontally or vertically. Tooltip with a top beak displaying truncated text on hover Include a left, right, bottom, and top beak for your tooltip components so you can assure the tooltip appears where the user can read it. This could be overkill for the entire table, so consider this tactic for your headers only.
Use tooltips on hover, to display truncated text. Hide and reorder columns (drop and drag) to save as a default view Include adjustable and customizable columns so the user can create and save their own default view of the table.Įllipses indicating truncated text and adjustable columnsĪllow the user to hide and reorder columns. Instead, use centered ellipses to indicate text has been truncated. It may be tempting to wrap text so users can see every character, but this will make your table harder to scan and visually overwhelming.
If you do need to design your table for mobile or various screen resolutions, Pixplicity has a DP/PT/PX Converter and Human Interface Guidelines includes a pt to px chart per device. Since large data set tables are typically viewed on a desktop and not a mobile device, we can design for those specifications. For purposes of this article, you can simply translate 1 px to 1 dp. Ok great, but what do they mean by dp and how do I translate that to the design tool I’m using in pixels? Material UIs use density-independent pixels to display elements consistently on screens with different densities. There is 32dp or more of padding between columns and 16dp padding on the left and right side of each header name. The baseline row height is 52dp, and the column header row height is 56dp (4dp taller than regular rows). Material.io Data Table anatomy provides specifics and visuals if you’re not sure where to start: The proper padding and height will increase legibility. Use a slightly darker color and bold text for table headers. The only exception is your headers should be slightly larger and contrast with the rest of the data. Chances are, your enterprise product table contains quite a bit of data. Cell Padding and Heightīe consistent with cell padding and height throughout your table. Maybe they would if it looked less intimidating and was easier to use. Is it still relevant? How is this data being used? Is it correct? How many columns are there? Can some of them be combined or removed? Are you adding new data points? Can you easily scan the data? Can you filter or manipulate the data in a way a user would need to? Have you witnessed a user interacting with this table? Maybe your users aren’t using your table at all. Look at each column of data in the table. Now it’s your worst UX design nightmare.Īll data tables aren’t created equally and you may not need every single feature recommended in your table. Somehow, this table grew into a monster- “we need to quickly add this, or that for stakeholders- done”. Data isn’t aligned, columns are not consistent in size, the various colored icons remind you of sprinkles on a cupcake and you’re not sure if there is a rhyme or reason to the information architecture. Your designer eye is telling you this is a mess, you need to determine what is practical with your development team and within a reasonable time frame. Possibly you’re looking at it wondering where to begin. Are you redesigning a data table for enterprise software? Suddenly you’re feeling overwhelmed.