{"id":15468,"date":"2017-04-24T08:00:55","date_gmt":"2017-04-24T15:00:55","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15468"},"modified":"2026-05-08T02:20:39","modified_gmt":"2026-05-08T09:20:39","slug":"make-sortable-table-rows-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/make-sortable-table-rows-uxpin\/","title":{"rendered":"Simulating Data-sorting in Prototypes Adds Interaction Where It\u2019s Needed"},"content":{"rendered":"

Many design systems include simulations of their interactive widgets, although they stop short of providing real content. That’s not their job. Their job is to play what-if.<\/p>\n

For example, while many prototyping tools won’t sort data on your behalf, you can<\/em> create a “sortable” table, if you don’t mind rearranging a few elements.<\/p>\n

Sortable tables rearrange content when people click on their headings. They’re not impossible to simulate \u2014 far from it. Here are five steps to building sortable tables.<\/p>\n

\"A<\/p>\n

1. Create random content in rows and columns<\/h2>\n

In a prototyping or design app, make each table column its own text element<\/a>. Although in some cases you’ll need a ton of content, for brevity here we’ll only create six rows with three columns. Give them sensible names like “ID”, “name”, and “status”.<\/p>\n

\"Where<\/p>\n

2. Make column headings<\/h2>\n

Give each column a title, analogous to a <th><\/code> element in HTML. As before, make each heading its own text element. Adding a dividing rule line is optional \u2014 use your best visual judgement as defined by your design system’s typography guidelines.<\/p>\n

The more specific your design system is, the more specifically you can name the columns. For example, if a system spells out how special components should behave, like lists of users or a category management system, then your system should include those headings. However, if “sortable table” could apply to anything, then generic headings are best. Don’t forget to spell out what’s allowed in the component’s notes<\/a>.<\/p>\n

3. Give the element states per column<\/h2>\n

Select all of the table data, and make a multistate element<\/a>. Create one state per column, named to reflect their heading. In this case:<\/p>\n