Performance considerations with Tables

@ngbracket/ngx-layout performs extremely well for most usage scenarios EXCEPT large tables.

Developers generating dynamic tables (using @for) should be aware of performance impacts using Flex-Layout directives.

For small number of rows (e.g. < 100), @ngbracket/ngx-layout is a excellent choice for layouts. Consider the table definition below were each row has column elements; each using a fxFlex. Since the directives apply styles inline for each element in each row, large tables may manifest performance impacts with dynamic inline stylings.

@for(obj of data; track obj.origin){
<div fxLayout fxLayout.xs="column">
  <div fxFlex="40">{{obj.origin}}</div>
  <div fxFlex="40">{{obj.destination}}</div>
  <div fxFlex="20">{{obj.price}}</div>
</div>
}

Note that both the initial and media-query-triggered layout phase manifest redraw-performance issues.

Impacts of "column" flex-direction

Dynamic-inline-styling performance impacts are especially noticeable for column layouts.

Developers should note that FlexBox CSS with flex-direction = "column" requires significantly more webkit engine processing to properly adjust column heights and layout the composition. Reduce the demo viewport size to < 600px (to force a column direction layout).

Use Responsive Class API for large Tables

For responsive table layouts with large number of rows, developers should use the responsive class API to specify a flexbox CSS style class instead of inline flexbox styles.

Below we are using the responsive class and class.xs API to specify class names. Notice that mobile devices will use a flow-direction == "column":

<div *ngFor="let obj of data" class="flow row" class.xs="flow column">
  <div class="item_40">{{obj.origin}}</div>
  <div class="item_40">{{obj.destination}}</div>
  <div class="item_20">{{obj.price}}</div>
</div>

Custom Flexbox CSS

.flow {
  display: flex;
  box-sizing: border-box;
  -webkit-box-direction: normal;

  .row {
    flex-direction: row;
    -webkit-box-orient: horizontal;
  }

  .column {
    flex-direction: column;
    -webkit-box-orient: vertical;
    height: 100px; /*  important for sizing of row heights */
    margin-bottom: 20px;
  }
}

.item_40,
.item_20 {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
}

.row .item_40 {
  max-width: 40%;
}
.row .item_20 {
  max-width: 20%;
}

.column .item_40 {
  max-height: 40%;
}
.column .item_20 {
  max-height: 20%;
}

This class-based approach performs very well by leveraging stylesheets instead of inline-styles. Here is an online StackBlitz - Flex-Layout Performance that demonstrates the issue (see Use fxLayout button) and solution (see Use CSS button).