A grid table is a structured layout for displaying tabular data. This component presents large data sets in a way that is easy to scan, understand, and manipulate. A data table typically consists of three main parts: row headers (column headers), data rows, and footer rows.
### Cell Type
- [ ] **Cell width** based on a percentage (Hug, xs, sm, md, lg and fill) or (Hug, 1x, 2x, 3x, 4x and expand)
- [ ] Dividers (horizontal & Vertical)
- [ ] Focus Ring
### Row Height
- [ ] **Vertical Adjustment:** Provide a fixed or adaptable height property toggle. Then, the designer can choose how the row behaves to the content.
- [ ] **Top Alignment:** By default, The rows are vertically aligned to the centre. The vertical alignment changes to the top when the row exceeds 3 line heights.
### Row Styling
- [ ] Grid border
- [ ] Density (Compact, Condense and Relaxed)
- [ ] Zebra styling (Only Rows)
- [ ] Column Dividers only for Column Headers
- [ ] Row Dividers
### Scrolling Related
- [ ] **Sticky column header** must be sticky with the top of the grid container. But, when the user scrolls the page, the headers must be visible while the Grid is visible.
- [ ] **Sticky Group header** rows are also sticky to the top, but they stack below the header row and swap between each other when the next group reaches the top of the container.
- [ ] **Sticky Columns**, the leftmost column needs to be fixed when there is a horizontal overflow.
- [ ] **Sticky Actions** must always be visible. When the grid overflows, they are sticky at the container's right.
- [ ] **Overflow Actions** In mobile screens, the actions buttons condense in a contextual menu.
### Others
- [ ] Create UI based on contribution and requirements
- [ ] Create tokens for SL light
Grid Table
A grid table is a structured layout for displaying tabular data. This component presents large data sets in a way that is easy to scan, understand, and manipulate. A data table typically consists of three main parts: row headers (column headers), data rows, and footer rows.