Angular Data Grid
Columns for Angular Data Grid

Define columns

Users can define the needed columns explicitly in a Data Grid. Enhance the appearance of columns by setting the header text, text alignment, cell value format, and width.

Auto generate columns

Generate column definitions automatically from the data source when a column collection is not configured. Automatic column generation is suitable for grids that derive their initial column structure directly from bound data.

• Column auto generation documentation

AutoFit columns width

Users can interactively auto-size column widths to show their full content by double-clicking on column borders. Data Grid supports programmatically auto-sizing columns. The Autofit feature displays columns based on their defined width. If the total column width is less than the grid width, white space will appear instead of columns auto-adjusting to fill the grid.

• AutoFit columns width documentation

Cell attributes

Users can decorate each cell element of the Data Grid with their own attributes by customizing styles, adding additional class names, and more.

• Cell attribute documentation

Text wrap

Wrap header or content text onto multiple lines when it exceeds the available cell width. Text wrapping is suitable for columns that require longer values to remain visible within the configured column width.

• Example for text wrap

Column chooser

The column chooser provides a list of column names paired with check boxes, allowing users to toggle visibility on the fly. This helps users control column visibility through an interactive UI.

• Example for column chooser

Reorder columns

Reorder columns through drag-and-drop interaction or programmatically. Column reordering is suitable for grids that require the displayed column sequence to be changed at runtime.

• Example for column reorder

Resize

Column resize allows changing the column width on the fly by simply dragging the right corner of the column header. A scroll bar appears when the Data Grid content width exceeds the element width.

• Example for column resize

Column menu

Perform supported column actions through the built-in column menu and customize the menu items that are displayed. Column menu configuration is suitable for grids that require column-specific commands to be available from the header.

• Example for column menu

Column spanning

Span adjacent cells based on defined row or column criteria. Cell spanning is suitable for grid layouts that require related values to occupy multiple neighboring cells.

• Example for column spanning

Foreign key column

Display values from an external or lookup data source by mapping foreign key fields to corresponding display values. Foreign key columns support applicable Data Grid operations such as sorting, filtering, editing, and grouping on lookup-based data.

• Example for foreign key column binding

Value accessors

The value accessors specify how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object.

• Value accessor documentation

Cell styling

Customize Data Grid cell styles programmatically or with CSS. Cell styling is suitable for grids that require visual formatting based on application-defined conditions or presentation requirements.

• Cell styling documentation