Table · DucDZ

01

Structure and meaning

Compare information and presentation in context of use.

Set a title for the dataAssign column names, units, and cell relationships to headers using the correct table structure.Consistent number presentation makes comparisons faster than adding color to every cell.Example The “Revenue, VND” column is right-aligned and has the same format in every row.Align data by typeKeep letters, numbers, dates and status consistent; enough space between cells.Alignment and units are consistent, while keeping enough space to not misread data in two adjacent columns.Find records when neededState the scope of your search and keep the keywords and number of results clear.State the fields being looked for and check for the data represented in each field, instead of just testing the record name.Displays the order in useIf sortable, indicate the column and direction of sorting, keyboard support.

02

Interaction and usability

Try the operation, change the status and continue working.

Associate the operation with the correct rowUse usernames that have context and don't just show actions on hover.When reading action names with support tools, you need to know which row the action belongs to; don't make every button just a fix.Keep field names on narrow screensAllows horizontal scrolling or purposeful folding, without cutting off important data.If horizontal scrolling is selected, keep the column context and scrollable indication; Do not completely cut important columns.State the position in the listIf appropriateIf paging, write the total, the currently viewed range and the transition buttons clearly.After changing pages, keep the table title and record the viewing range so users understand the position in the entire result.Distinguish between load, empty and errorKeep the structure stable and give appropriate action to each cause.

03

Complete the experience

Check for details that are easy to miss when putting the design into use.

Define row styling and densitySpecify row heights, spacing, separators, and hover or selection indicators so the data remains easy to scan at the intended density.For tables with many rows, balance quick scanning with sufficient interaction space. Test both two-line cell content and selected rows.Filter by useful fieldsIf filters are available, show the active criteria and data scope and provide a way to clear them and return to the full list.Filtering and sorting are two different things; Changing the filter should not cause the user to lose track of the current order.

Table Design system

Structure and meaning

Interaction and usability

Complete the experience

How to review

Set a title for the data

Usage examples

Set a title for the data

Find a checklist

No checklists found