ColumnsQuick-through

Column Quickthrough

The most simple definition for a column is a vertical series of cells.

There are 2 roles: Data Column and Meta Column

Data Columns (PblColumn)

  • All green cells belong to the column name.
  • They all share the column definitions (e.g. width).
  • They differ based on the column sub-role

There are 3 sub-roles, here in visual order of appearance:

  • 1 header cell
  • N data cells (in this example, N === 2)
  • 1 footer cell

The split is fixed, it will always be 1/N/1.

Each sub-role will have its unique

  • Rendering template (more on this later...)
  • Role CSS class name (pbl-ngrid-header-cell, pbl-ngrid-cell, pbl-ngrid-footer-cell)
  • Column data type (optional)

The CSS classes shared by all sub-roles:

  • CSS set in the column definitions definitions (css)
  • Identity CSS (pbl-ngrid-column-[Identity])

They all share a logical connection, they work as one unit:

  • If we hide the column all 3 are gone.
  • If we change the width all 3 will change.
  • If we move column all 3 will move together.
A data column is the only column that span over a vertical series of cells.

Meta Columns (PblMetaColumn)

  • All skyblue cells are meta columns
  • Except the role they share nothing.
  • The border color indicates their sub-role: Meta Header, Meta Header Group and Meta Footer

Each sub-role is hosted in a meta row of the same type, having columns from the same sub-role.

The Meta Header Group has it's own class PblColumnGroup , extending PblMetaColumn
Currently, Footer groups are not supported, this will be added in the future.

Shlomi Assaf © 2020. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.

Version 5.0.0 using angular 14.2.4 and cdk 14.2.3 (hash: 25f523f)