Inputs & Textarea
Pull to Refresh
React Grid Layout
The data grid is an interactive tabular interface and is one of the most important and complex patterns in the Goldman Sachs Design System.
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.
Grid is available in three sizes large, medium and small. Size corresponds to the font size of text within the cells and uses typography tokens from within the design system. Large is 16px (body-01), medium is 14px (body-02) and small is 12px (body-03). Size is combined with density to create the final row height of a grid. The examples below are using standard density.
There are three densities available — standard, compact and extra compact. Density controls the padding within the cells of a grid and is combined with type size to create the final height of a row in the grid.
To accommodate a variety of screen sizes the data grid can be set to fit any outer container width and/or height, both pixel or percentage based. By default, the data grid will scroll within the outer container to allow for viewing of all the rows and columns inside the container.
Borders can be used between rows, between columns or on all sides of a cell. Borders can be used to distinguish groupings. To create more distinction, use borders in conjunction with striping.
A subtle background color on alternating rows helps to create distinction between the rows in the data grid.
Highlighting can be used to designate important information quickly to the viewer. When choosing colors keep contrast and legibility in mind and reference Colors.
Highlighting can be applied to entire rows or columns.
Highlighting can be applied to individual cell values.
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.
Columns with sorting enabled can be sorted by clicking on the column header text.
Filtering can be added to each column to allow the user to narrow down the displayed data.
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.
Pivot mode allows a user to take the values from a column and convert them into dynamically created columns to help analyze data and see patterns and trends. Pivoting is used in conjunction with aggregation. In the example below the user is pivoting by direction of trade and measuring the average trade price for each direction.
Column grouping allows for the data grid to have multiple levels of columns in the header and to expand or collapse the columns within the group.
Row grouping (also called vertical pivot) provides the ability to turn a column into a grouped row.
Row spanning allows for a cell to span multiple rows.
Alerts and errors within the grid are shown at two levels, the row and the cell. The row-level error messaging uses the left-most zero column to display an icon indicating the type of error. The cell-level error uses cell highlighting and/or a tooltip message to indicate where the error is specifically occurring and provide user feedback.
Unique states and interactions are used for trading patterns.
The direction of a trade is highlighted through color.
Fulfillment status or quantities can be represented with Progress indicators.
Trading grids can have clickable buttons within cells to allow for trading actions.
Within trading grids, columns can be enabled to have one-click trading.
The zero column is used to display important information about the row. It is the left-most column of the grid unless a selector column is appended to the left.