# Tabular Grid

Bundle name: `"components/tabular-grid"`

Implementation: [tabular-grid.css](./tabular-grid.css)

## Classes

### `combo-box`

Applies to the components: `ch-combo-box-render`

Combo box styling included within the tabular grid bundle for inline cell editing. See combo-box component documentation for details

### `input`

Applies to the components: `ch-edit`

Input styling included within the tabular grid bundle for inline cell editing. See edit component documentation for details

### `property-grid`

Applies to the components: `ch-property-grid`

A property grid component for displaying and editing property-value pairs in a structured layout. Uses a two-column format with property names and their corresponding values

### `property-grid-cell`

Applies to the components: Cells within `ch-property-grid`

Styles individual cells in the property grid component

### `property-grid-column`

Applies to the components: Column definitions within `ch-property-grid`

Defines column styling for the property grid layout

### `property-grid-column-set`

Applies to the components: Column set container within `ch-property-grid`

Groups column definitions in the property grid

### `property-grid-property-readonly`

Applies to the components: Property cells within `ch-property-grid`

Styles the property name column in read-only mode with specific text styling

### `property-grid-row`

Applies to the components: Row elements within `ch-property-grid`

Styles individual rows in the property grid

### `property-grid-row-actions`

Applies to the components: Row action containers within `ch-property-grid`

Styles the action buttons or controls area for each row in the property grid

### `property-grid-rowset`

Applies to the components: Rowset grouping elements within `ch-property-grid`

Groups related rows together in the property grid

### `property-grid-rowset-legend`

Applies to the components: Rowset legend elements within `ch-property-grid`

Styles the legend/header for a rowset group in the property grid

### `property-grid-value-edited`

Applies to the components: Value cells within `ch-property-grid`

Styles the value column when it has been edited, providing visual indication of modified values

### `property-grid-value-editing`

Applies to the components: Value cells within `ch-property-grid`

Styles the value column when it is currently in edit mode

### `property-grid-value-readonly`

Applies to the components: Value cells within `ch-property-grid`

Styles the value column in read-only mode with specific text styling

### `tabular-grid`

Applies to the components: `ch-tabular-grid`

A grid-table component designed to display data in a structured, tabular format. It organizes information into rows and columns, making it easy for users to view, compare, and analyze data efficiently. Supports row selection (none, single, multiple), keyboard navigation, row sets, and row actions

### `tabular-grid-align-cells-block-center`

Applies to the components: `ch-tabular-grid-column`

Aligns cell content to the vertical center within the column

### `tabular-grid-align-cells-block-end`

Applies to the components: `ch-tabular-grid-column`

Aligns cell content to the bottom within the column

### `tabular-grid-align-cells-block-start`

Applies to the components: `ch-tabular-grid-column`

Aligns cell content to the top within the column

### `tabular-grid-align-cells-inline-center`

Applies to the components: `ch-tabular-grid-column`

Aligns cell content to the horizontal center within the column

### `tabular-grid-align-cells-inline-end`

Applies to the components: `ch-tabular-grid-column`

Aligns cell content to the right (inline-end) within the column

### `tabular-grid-align-cells-inline-start`

Applies to the components: `ch-tabular-grid-column`

Aligns cell content to the left (inline-start) within the column

### `tabular-grid-cell`

Applies to the components: `ch-tabular-grid-cell`

Styles individual data cells within the tabular grid rows

### `tabular-grid-column`

Applies to the components: `ch-tabular-grid-column`

Defines column headers and their styling in the tabular grid

### `tabular-grid-column-set`

Applies to the components: `ch-tabular-grid-column-set`

Groups column definitions together in the tabular grid header

### `tabular-grid-row`

Applies to the components: `ch-tabular-grid-row`

Styles individual data rows in the tabular grid. Each row contains cells and can be selectable

### `tabular-grid-row-actions`

Applies to the components: Action container within `ch-tabular-grid-row`

Styles the row actions area that appears on hover or selection, typically containing action buttons

### `tabular-grid-rowset`

Applies to the components: `ch-tabular-grid-rowset`

Groups related rows together with an expandable/collapsible container

### `tabular-grid-rowset-legend`

Applies to the components: Legend element within `ch-tabular-grid-rowset`

Styles the legend/header for a rowset group in the tabular grid

### `tabular-grid-show-node-icons`

Applies to the components: `ch-tabular-grid`

Modifier class that enables the display of tree node icons in hierarchical tabular grid configurations
