# DataGrid

A table with superpowers, the Data Grid display sets of data across rows and columns.

## Variants

### Basic Table
<!-- Data Grid Story with controls that only show a simple table -->
This table can be used inside cards to display a small set of data

### Data Grid
<!-- Data Grid Story with controls that only show Data Grid with complex data -->
This table can be used along with filters, or to display large and complex datasets

## Usage Guidelines

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data.

Data tables can contain:

- Interactive components (such as chips, buttons, or menus)
- Non-interactive elements (such as badges)
- Tools to query and manipulate data

### Examples

<!-- Data Grid Story with checkboxSelection={true} -->
**Bulk Capabilities**
Data Grids can have checkboxes so users can select multiple items to perform bulk actions such as editing, archiving, or deleting.
When the top checkbox is selected, it should only select the list of items on the page the user is

<!-- Data Grid Story with pagination enabled -->
**Pagination**
Pagination for the Data Grid is set to 20 items. Although Material Design tables include a way for users to change the value, the Data Grid will have the pagination fixed to make the grid less complex.

<!-- story with initialState={{
rowGrouping: {} -->
**Expandable Rows**
For nested items, the table uses indentation to differentiate between first and second level.

<!-- Data Grid Story showing sorting-->
**Sortable Columns**
Columns can be sorted either by ascendant or descendant. It is recommended to not have sorted columns by default.

<!-- Data Grid Story with <LinearProgress /> -->
**Loading State**
When sorting or filtering is taking place, the Data Grid shows a progress bar and the content is faded to communicate is unavailable until the sorting or filtering is done. The Data Grid

<!-- Data Grid Story with chips, progress, icon -->
**Cell Types**
Based off Zenput use cases, there are multiple cell types that the Data Grid. From left to right:
- Progress bars
- Chips
- Images
- Sensors (tbd)

<!-- Data Grid Story with Empty state -->
**Empty State**
When there are no items created for the table to display, an empty state can be shown to communicate how to proceed.

<!-- Data Grid with Inline Actions -->
**Row Actions**
When a table row has inline actions, the icon button should always be visible to improve findability.

<!-- Data Grid with Fixed column (pinColumn) -->
**Fixed Column**
When a table has multiple columns that produce horizontal scrolling, the first column can be fixed so users don’t lose context about the item or row they’re reviewing data from.

<!-- Data Grid with <DataGrid getRowHeight={() => 'auto'} /> -->
**Multiple Lines**
When there is limited space to display a table, rows with long names or titles can span multiple lines to avoid text truncation. However, the height of the cell should not grow to more than three lines. Text should be always aligned to the top (instead of center-aligned).

### Writing Guidelines
-
-
-