COMPONENTS
Data Grid
The data grid is an interactive tabular interface and is one of the most important and complex patterns in the Goldman Sachs Design System.
- Column Group
- Single Column
- Single Row
- Column Headers
- Column Filters
- Row Group
- Cell
There are three core types of data grids — read-only, partially editable and fully editable.
Cells are the building blocks that make up the grid. Cell type can vary depending on the requirements for the contents of the column.
There are several states available to help communicate to the user how they are able to interact with the data grid and also to help provide feedback for user actions.
Range selection can occur over a single column or multiple columns.
Pinning allows the user to lock a row or column so that it is visible when the grid is scrolled. Pinned rows appear either above or below the rest of the rows in the grid. Pinned columns appear to the left or right of the rest of the columns in the grid.
When dragging rows, the gripper icon is used to designate the clickable area to hold and drag.
Columns can be grabbed by the user and moved into a new location. There is no icon indicator to designate that the column is movable.
This can be done by dragging the top right portion of the column or by double clicking the right edge of the column, in this case the grid will determine the best width for the contents of the columns.
Additional actions for the user can be added to cells within the grid. These can be accessed by the following user actions: right click on a cell, clicking on an overflow button cell, clicking a select cell, or by hovering on a cell. For additional guidance, see Menu, Select, Date Picker, and Tooltip.
Contents