Data table · DucDZ

01

Information and structure

Compare information and presentation in context of use.

Keep titles and data consistentSet column names, units and alignment appropriate for each data type.The identifier column should also be recognized when scrolling horizontally or selecting multiple rows.Example The order code is kept constant when the user views the fee column on the right.Indicates the column being sortedDisplays ascending or descending direction and supports keyboard control.For columns with identical values, use stable sub-ordering so that rows don't change places unexpectedly between loads.Allow column customization as neededIf appropriateIf you hide or change the order, there is a way to return to the default layout.Keep the record identification column accessible; Column hiding configuration should be kept separate for the user if it is a personal preference.Indicates the selected row rangeDistinguish the current page select from the entire result and keep the counter correct.After filtering or switching pages, state clearly whether the selection remains; The bulk action must use the exact promised recordset.Hover-dependent aviation maneuversAllows keyboard access and has a username attached to the record.A button with the same name in multiple rows needs a contextual access name, for example “Edit project A”; Do not force users to hover to see the action.

02

Actions and status

Try the operation, change the status and continue working.

Keep search and filters visibleAllows you to edit or delete conditions without losing the list context.State the position and total resultKeep the page transition control clear, updating properly when the filter results change.Explanation of exported dataIf appropriateShows the selected item, the page being viewed, or all results.If the export runs in the background, indicate when the file is ready and how to reload it; Specifies the filter and limits the data in the file.Distinguish between wait, empty and errorGive appropriate status for each cause and a specific treatment path.

03

Complete the experience

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

Keep identifying columns visible in wide tablesWhen a table requires horizontal scrolling, consider pinning the name or ID column so users can still identify the record in each row.Check that the pin area does not cover the adjacent column on a narrow screen; Turn it off or change the layout if the pin takes up too much width.

Data table Web app

Information and structure

Actions and status

Complete the experience

How to review

Keep titles and data consistent

Usage examples

Keep titles and data consistent

Find a checklist

No checklists found