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.

type GridClassName = typeof GridClasses[keyof typeof GridClasses]

Runtime Values

Use GridClasses to reference these values from runtime code:

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'