Table form

Columns and columns represent a structured set of data or content. Application: Used for large amount of data display or horizontal and vertical comparison scenarios. Not applicable: display unstructured data or scenarios without horizontal and vertical comparison. The list can be used in this scenario.

General principles

  • Tables allow static data or operations to be displayed; Allow single-column folding expansion; Batch operation allowed
  • Height ADAPTS to content
  • The importance level of information in the table decreases from left to right
  • The first column on the left is usually the title, and the action column is placed on the far right. The title bar and action bar can be fixed and only scroll the content area
  • Keep table headers concise and readable, not foldable, and avoid “…”
  • Table header can be changed into operation bar when batch operation


Constitute a

  1. operation: When there is a scroll bar, the top can be sucked.
    1. The operations in the table are displayed on the left, and the number of operations is not more than three by default. The icon can be used for the fourth operation in More. If this operation is not selected, the status of batch operation is Disable
    2. On the right are simple search box, advanced search switch, table refresh button and display column setting button
  2. header: When there is a scroll bar, the top can be sucked.
    1. Batch select (Optional) : The batch operation button is always selected by default. If selected at any time, the Disable button changes to Normal
    2. Column headings:
      1. Concise and comprehensive, do not allow folding lines, can bring units, such as “quantity ()”, more than can “…” ; No more than 6 Characters are recommended
      2. With left and right scroll bars, the first column is allowed to be fixed
    3. Operation column: it is allowed to be fixed when there are left and right scroll bars
  3. Content area: Allows scrolling up, down, left and right.
    1. Sequence/multiple (optional)
    2. Expand/fold (used when there is a tree)
    3. Single line operation: The number of operations does not exceed 4 by default. The fifth operation is added to More
  4. paging


behavior

The batch operation

  • The Checkbox column should appear when the table supports bulk operations
  • The batch operation area appears above the table
  • Action buttons allow matching ICONS







Method 1: Click the Checkbox in the table header

  • The list enters the batch operation state
  • All rows are selected
  • Click unselect all columns again to exit the batch operation state and return to the normal state





Method 2: Select a single column

  • Select the checkbox at the left of the list to enter the batch operation state
  • The all-select Checkbox in the table header is half-select
  • Click Checkbox to select all columns. Click Checkbox again to clear all selections. Exit batch operation and return to normal state



A single operation

  • Column operations typically involve general operations such as sorting, filtering, and dragging column widths
  • If the table data is empty, batch operations are unavailable
  • The supported operations include explain, sort, and filter
  • Explanation: Move the “explanation icon” to appearTooltipExplain the title



  • Sorting:
    • Click the column header or “Sort icon” to take effect
    • Click repeatedly to switch between forward row, inverted row and default sort
    • When in effect, the “Sort icon” must be displayed and highlighted to the right of the column header



  • Screening:
    • Hover column title appears “Filter icon” if the current column supports filtering
    • Click “Filter Icon” to evoke further action
    • When in effect, the filter icon must be displayed and highlighted to the right of the column header
    • When the filter rule is invalid, the filter icon disappears and returns to the default state



Adjust column width

  • When the mouse moves into the dividing line of the column title bar, you can drag the dividing line directly to adjust the width of the column
  • Single column can set the minimum/maximum width according to service requirements







A single operation

  • Operation using text button
  • By default, there are no more than four operands. Put the fifth operation in More

Unfold/fold

  • Expand fold up form cancel form zebra crossing
  • When the column is closed, click “+” to expand the next level
  • When the column is expanded, click “-” to collapse all the next levels



The container related

  • Three states: single column of Normal, Hover, Selected three states



  • Load: Content area loads



  • An empty list





style

layout

  • Can be used in standalone pages, popovers, SlidePanel
  • The alignment of table titles should be aligned with the content
  • Content line: Left-align text and ICONS. Right-align digital content if no decimal point is present. If you have a decimal point, align the decimal point