COMPONENTS

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.

Data Grid Intro

The Goldman Sachs Design System data grid is built using ag-grid, a robust and feature packed JavaScript data grid. For full documentation visit the ag-Grid site.

Data Grid Anatomy
  1. Column Group
  2. Single Column
  3. Single Row
  4. Column Headers
  5. Column Filters
  6. Row Group
  7. Cell

There are three core types of data grids — read-only, partially editable and fully editable.

Alt Text

Cells are the building blocks that make up the grid. Cell type can vary depending on the requirements for the contents of the column.

Data Grid Cell Types

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.

Data Grid Row States
Data Grid Row States Editable Grid

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.

Data Grid Size

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.

Data Grid Density

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.

Data Grid

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.

Data Grid Borders

A subtle background color on alternating rows helps to create distinction between the rows in the data grid.

Data Grid Striping

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.

Data Grid Highlighting

Highlighting can be applied to individual cell values.

Data Grid Cell Highlighting

Range selection can occur over a single column or multiple columns.

Data Grid Selecting

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.

Data Grid Row Pinning
Data Grid Column Pinning

Columns with sorting enabled can be sorted by clicking on the column header text.

Data Grid Column Sorting

Filtering can be added to each column to allow the user to narrow down the displayed data.

Data Grid Filtering

When dragging rows, the gripper icon is used to designate the clickable area to hold and drag.

Data Grid Row Dragging

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.

Data Grid Columns Dragging

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.

Data Grid Column Resizing

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 MenuSelectDate Picker, and Tooltip.

Data Grid Cell Interactions

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.

Data Grid Pivot Anatomy

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.

Data Grid Column Groups

Row grouping (also called vertical pivot) provides the ability to turn a column into a grouped row.

Data Grid Row Grouping

Row spanning allows for a cell to span multiple rows.

Grid Spanning

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.

Data Grid Errors

Unique states and interactions are used for trading patterns.

The direction of a trade is highlighted through color.

Grid Trade Direction

Fulfillment status or quantities can be represented with Progress indicators.

Data Grid Trading Fill

Trading grids can have clickable buttons within cells to allow for trading actions.

Data Grid Trading Buttons

Within trading grids, columns can be enabled to have one-click trading.

Data Grid 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.

Data Grid Zero Column