> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/ui-ux-guide/patterns/grid-screen-guide.md).

# Grid Screen Guide

Explains the grid screens used in the X2BEE workspace and the features that can be applied to them.

New features may be added and usage may change according to grid update history.

***

## Grid Search <a href="#undefined" id="undefined"></a>

**General Search**

Allows searching data within the grid and can be used in place of the filter feature.

Used on screens that handle multiple sets of data.

<figure><img src="https://tech.x2bee.com/download/attachments/14648524/%EA%B7%B8%EB%A6%AC%EB%93%9C%20%EA%B2%80%EC%83%89_%EC%9D%BC%EB%B0%98%20%EA%B2%80%EC%83%89.png" alt=""><figcaption></figcaption></figure>

**In-Table Input Search**

Function buttons included within the table are, in principle, represented as icons.

Composed in the order: input field (normal, readonly, disabled) + \[Search] button (+ \[Delete] button).

## Grid Types <a href="#undefined" id="undefined"></a>

Grids provide guidance for two types: ‘basic query type’ and ‘data processing type.’

The basic configuration consists of a query area on top and a grid below when displaying data via search.

When data across two or more grids has a hierarchical structure, the parent information grid is placed on the left and top.

**Basic Query-Type Grid**

Used for screens whose purpose is to query data, when structuring and providing the data.

Guidelines for use are as follows.

1. Row/cell selection features are both provided within the grid, and visual feedback must be clear on selection.
   * Row-level selection: highlighted at the row level (e.g. background)
   * Cell-level selection: indicates that data is present when information exists (e.g. text underline)
2. When two or more grids are used together, visual feedback for the main grid's selected item must be clear.
3. When a count is displayed, show the number at the front of the grid as ‘No.’
4. A grid that includes a bulk delete feature for data output based on search conditions —

Basic query-type grid example

<figure><img src="https://tech.x2bee.com/download/attachments/14648524/Grid-%EA%B8%B0%EB%B3%B8%EC%A1%B0%ED%9A%8C%ED%98%95.png" alt=""><figcaption></figcaption></figure>

**Data Processing-Type Grid**

After querying the applied data, edit, delete, or add multiple rows of data at once.

1. Multiple rows of data can be edited/deleted/entered directly in the grid.
2. In a grid screen that processes multiple records, the left-most column can show a status flag to indicate change/delete/add information.
3. When editing/deleting/entering data, a status indicator appears at the front of the grid, and clicking the \[Save] button applies all changes to the DB at once.

Data processing-type grid example

<figure><img src="https://tech.x2bee.com/download/attachments/14648524/Grid-%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EC%B2%98%EB%A6%AC%ED%98%95.png" alt=""><figcaption></figcaption></figure>

## Grid Information Layout <a href="#undefined" id="undefined"></a>

1. Arrange grid columns in the order: No. (provided by default) → checkbox → content.
   * Column width: set according to the width specified by the designer, matching the length of the displayed data
   * For data with a standardized length (date, account number, phone number, resident registration number, etc.), standardize the input field length so the full data is shown
   * For unstructured/variable-length data, it is recommended to design the width to fit the max length. (\*recommended)
2. Insert a light gray background color on even-numbered rows to improve data readability.
3. Text alignment standard for the header area
   * Top header (thead-th) alignment → center-aligned
   * Left header (tbody-th) alignment → left-aligned
4. Text alignment standard for the data area
   * Center-aligned: product number, name, date, period, number (mobile, phone, fax), registration number (business, corporate, resident) — including code-type data within 14 bytes in length
   * Left-aligned: descriptive information with variable data length
   * Right-aligned: data requiring numeric comparison, such as amount, quantity

## Grid Behavior Guide <a href="#undefined" id="undefined"></a>

1. Use the checkbox in the header when you need to select/deselect all rows.
2. Apply sorting (Sortable=true) to all grids.
3. The row number 'No' (RowNumVisble=true) is shown by default; it can be omitted when unnecessary depending on the nature of the task.
4. The admin customer list format is the same; internal scrolling is recommended for handling large amounts of data, and features such as frozen columns and filtering can be used.
5. Clicking 'No' activates the row; clicking a cell activates only that cell and its 'No.'
6. Cell changes based on click/hover/over/value are as follows:
   * On hover/clicking 'No,' the row is activated; clicking a cell activates only that cell and its 'No.'
   * Hover — activates the cell (background color) and adds function buttons
   * Single click — activated (background color + box area added)
   * Double click — switches to input mode if the cell is editable/addable