Gallery
See what others have created
waterproofowner
@waterproofowner
Table
Design a data table for a dense workspace view, not a decorative grid. It should handle a mix of short and long values, support scanning across columns, and keep alignment tight enough that repeated rows feel easy to compare.
Include a sticky header with sortable columns, clear row hover and selected states, and a simple selection pattern for single or bulk actions. If actions live in the row, keep them secondary to the data and make their placement predictable. If text is too long, show how it truncates or wraps without breaking the table.
Think through the table’s empty, loading, and no-results states as part of the same pattern. The result should make structure obvious first, then let the user sort, select, and act without losing their place.
What to deliver
- Design a table header with sortable column labels.
- Design body rows with clear row/column separation and alignment.
- Include row hover, focus, and selected states.
- Add a selection pattern for one or many rows.
- Place row actions where they stay discoverable without crowding data.
For a touch of modern design, consider subtle animations or transitions when users interact with your table, such as sorting columns or selecting rows.