# GridClassName

> _Since v0.1.1_

CSS class names used in the grid's DOM.
Use these when adding/removing classes or querying elements.

Classes are organized by:
- Core: Used by the grid core for structure and basic functionality
- Shared: Used by multiple features/plugins, styled by core CSS

Union of all CSS class names used in the grid's DOM.
Use `GridClasses` to access individual values by key.

```ts
type GridClassName = typeof GridClasses[keyof typeof GridClasses]
```

## Runtime Values

Use `GridClasses` to reference these values from runtime code:

```ts
const GridClasses = {
  ROOT: 'tbw-grid-root',
  HEADER: 'header',
  HEADER_ROW: 'header-row',
  HEADER_CELL: 'header-cell',
  ROWS_VIEWPORT: 'rows-viewport',
  ROWS_SPACER: 'rows-spacer',
  ROWS_CONTAINER: 'rows',
  DATA_ROW: 'data-grid-row',
  GROUP_ROW: 'group-row',
  DATA_CELL: 'cell',
  SELECTED: 'selected',
  FOCUSED: 'focused',
  EDITING: 'editing',
  EXPANDED: 'expanded',
  COLLAPSED: 'collapsed',
  DRAGGING: 'dragging',
  RESIZING: 'resizing',
  SORTABLE: 'sortable',
  SORTED_ASC: 'sorted-asc',
  SORTED_DESC: 'sorted-desc',
  HIDDEN: 'hidden',
  STICKY_LEFT: 'sticky-left',
  STICKY_RIGHT: 'sticky-right',
  PINNED_TOP: 'pinned-top',
  PINNED_BOTTOM: 'pinned-bottom',
  TREE_TOGGLE: 'tree-toggle',
  TREE_INDENT: 'tree-indent',
  GROUP_TOGGLE: 'group-toggle',
  GROUP_LABEL: 'group-label',
  GROUP_COUNT: 'group-count',
  RANGE_SELECTION: 'range-selection',
  SELECTION_OVERLAY: 'selection-overlay',
} as const;
```

| Key | Value |
| --- | ----- |
| `ROOT` | `'tbw-grid-root'` |
| `HEADER` | `'header'` |
| `HEADER_ROW` | `'header-row'` |
| `HEADER_CELL` | `'header-cell'` |
| `ROWS_VIEWPORT` | `'rows-viewport'` |
| `ROWS_SPACER` | `'rows-spacer'` |
| `ROWS_CONTAINER` | `'rows'` |
| `DATA_ROW` | `'data-grid-row'` |
| `GROUP_ROW` | `'group-row'` |
| `DATA_CELL` | `'cell'` |
| `SELECTED` | `'selected'` |
| `FOCUSED` | `'focused'` |
| `EDITING` | `'editing'` |
| `EXPANDED` | `'expanded'` |
| `COLLAPSED` | `'collapsed'` |
| `DRAGGING` | `'dragging'` |
| `RESIZING` | `'resizing'` |
| `SORTABLE` | `'sortable'` |
| `SORTED_ASC` | `'sorted-asc'` |
| `SORTED_DESC` | `'sorted-desc'` |
| `HIDDEN` | `'hidden'` |
| `STICKY_LEFT` | `'sticky-left'` |
| `STICKY_RIGHT` | `'sticky-right'` |
| `PINNED_TOP` | `'pinned-top'` |
| `PINNED_BOTTOM` | `'pinned-bottom'` |
| `TREE_TOGGLE` | `'tree-toggle'` |
| `TREE_INDENT` | `'tree-indent'` |
| `GROUP_TOGGLE` | `'group-toggle'` |
| `GROUP_LABEL` | `'group-label'` |
| `GROUP_COUNT` | `'group-count'` |
| `RANGE_SELECTION` | `'range-selection'` |
| `SELECTION_OVERLAY` | `'selection-overlay'` |