[Data grid] UI Design of Grid Table

[DanielleRameau]

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.

### Cell Type
- [ ] **Cell width** based on a percentage (Hug, 1x, 2x, 3x, 4x and expand) (do not implement, designers can do this manually, add in the documentation how this works)
- [ ] Dividers (horizontal & Vertical)
- [ ] Focus Ring

### Cell Type
- [x] Text cell (left aligned)
- [x] Numbers cell (right aligned)
- [x] Drag cell (Handle)
- [ ] Selectable cell
- [ ] Header Column cell
- [ ] Group Title cell
- [ ] Actions Row cell (Contextual row buttons)
- [ ] Input Field cell
- [ ] Avatar cell
- [ ] Slot cell

### Cell Variants (Row Variants)
- [ ] Default cells
- [ ] Header cells
- [ ] Footer cells
- [ ] Group cells

### 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.

### Tasks
- [ ] Review Designs of Magister, what can be reused
- [ ] Create contextual tokens
- [ ] Make it ready for dev first
- [ ] Finetune component for use in Figma

[DanielleRameau]

@arecuenco-dsgn place requirements for features in this issue

[DanielleRameau]

Fixed in Diana's grid finetuning branch.