Data Grid - IRobot1/ng3-vr-examples GitHub Wiki

Used to display rows of data with customizable columns.

image

Data Grid

Rows of data with optional header and footer

Data Grid Code

Inputs

Name Type Default Description
vmargin number or Vector2 0.01 Margin to add before and after a cell
hmargin number or Vector2 0.01 Margin to add above and below a cell
datasource Array empty The source of data that can be shown in each row of cells
rowcount number 5 Number of rows to display
rowheight number 0.1 Height of a row in meters
width number 0 Read-only calculated width taken up by grid in meters
height number 0 Read-only calculated height taken up by grid in meters
displaycolumns Array empty Array of column names and order to display them
pivot boolean false Pivot the data so columns are rows and rows are columns

Outputs

Name Type Description
widthchange number Triggered when width of data grid changes
heightchange number Triggered when height of data grid changes

Methods

addcolumn(column: FlatUIDataGridColumn) // add column definition at runtime
firstindex(): number  // read-only index in data source of first row being displayed
refresh() // force display to update
movefirst() // refresh display to first row in data source
moveprevious() // refresh display to previous row at top
movenext() // refresh display to next row at top
movelast() // refresh display to show last row count of data

Data Grid Column

Defines a column to render in a data grid

Data Grid Column Code

Inputs

Name Type Default Description
name string undefined Name of column
width number 0.5 Width taken up by column in meters

Paginator

Optionally include in a grid to navigate data in the grid. The paginator is excluded from horizontal or vertical layout and must be positioned programmatically. Must also use [appendTo] in order to attach the paginator to the grid.

Paginator Code

Inputs

Name Type Default Description
showlabel boolean true When true, show row position information - of . When false, row position info is hidden
showfirstlast boolean true When true, show first and last navigation buttons. When false, buttons are removed
buttonsize number 0.1 Size of navigation buttons in meters
buttonspacing number 0.01 Space between buttons
selectable InteractiveObjects undefined Add to list of objects ray caster can test for overlap

Outputs

None

Methods

width(): number // read-only width taken up by paginator.  Useful for position relative to grid

Example

The following example also shows how lines can be added around the header, footer and rows.

<flat-ui-data-grid #grid [vmargin]="vmargin" [hmargin]="hmargin"
                    [datasource]="elements" [displaycolumns]="['Name','Weight', 'Symbol','Description']"
                    [rowcount]="rowcount" 
                    (widthchange)="widthchange($event)" (heightchange)="heightchange($event)">

  <flat-ui-paginator #page [visible]="showpaging" [showlabel]="showpagelabel"
                      [showfirstlast]="showfirstlast" [buttonsize]="pagebuttonsize" [selectable]="selectable"
                      [position]="[0, -grid.height-pagebuttonsize/2, 0]" [appendTo]="grid.instance.value">
  </flat-ui-paginator>

  <!-- heading -->
  <ng-template #columnHeader let-column="column" let-index="index" let-parent="parent">
    <ngt-group [appendTo]="parent">
      <flat-ui-label [visible]="showheading" [width]="column.width" [text]="column.name" [height]="showheading ? headingheight : 0" [labelmaterial]="blackmaterial.instance.value"></flat-ui-label>

      <ngt-line *ngIf="index==0 && showhlines" [position]="[-column.width/2, showheading ? -headingheight/2 : 0, 0]" [geometry]="hline" [material]="blackmaterial.instance.value"></ngt-line>
      <ngt-line *ngIf="index==0 && showheading && showhlines" [position]="[-column.width/2, headingheight/2, 0]" [geometry]="hline" [material]="blackmaterial.instance.value"></ngt-line>

      <ngt-group *ngIf="showvlines">
        <ngt-line *ngIf="index==0" [position]="[-column.width/2, showheading ? headingheight/2 : 0, 0]" [geometry]="vline" [material]="blackmaterial.instance.value"></ngt-line>
        <ngt-line [position]="[column.width/2, showheading ? headingheight/2 : 0, 0]" [geometry]="vline" [material]="blackmaterial.instance.value"></ngt-line>
      </ngt-group>
    </ngt-group>
  </ng-template>

  <!-- columns -->
  <flat-ui-data-grid-column [name]="'Name'">
    <ng-template #columnRow let-row="row" let-column="column" let-parent="parent">
      <ngt-group [appendTo]="parent">
        <flat-ui-label [width]="column.width" [height]="rowheight" [text]="row.name"></flat-ui-label>

        <ngt-line *ngIf="showhlines" [visible]="row.name" [position]="[-column.width/2, -rowheight/2-vmargin, 0]" [geometry]="hline"></ngt-line>
      </ngt-group>
    </ng-template>
  </flat-ui-data-grid-column>

  <flat-ui-data-grid-column [name]="'Weight'">
    <ng-template #columnRow let-row="row" let-column="column" let-parent="parent">
      <ngt-group [appendTo]="parent">
        <flat-ui-label [width]="column.width" [height]="rowheight" [text]="row.weight"></flat-ui-label>
      </ngt-group>
    </ng-template>
  </flat-ui-data-grid-column>

  <flat-ui-data-grid-column [name]="'Symbol'">
    <ng-template #columnRow let-row="row" let-column="column" let-parent="parent">
      <ngt-group [appendTo]="parent">
        <flat-ui-label [width]="column.width" [fontsize]="0.2" [height]="rowheight" [text]="row.symbol"></flat-ui-label>
      </ngt-group>
    </ng-template>
  </flat-ui-data-grid-column>

  <flat-ui-data-grid-column [name]="'Color'">
    <ng-template #columnRow let-row="row" let-column="column" let-parent="parent">
      <ngt-group [appendTo]="parent">
        <flat-ui-input-color [width]="column.width" text="rgb({{row.r}},{{row.g}},{{row.b}})"></flat-ui-input-color>
      </ngt-group>
    </ng-template>
  </flat-ui-data-grid-column>

  <flat-ui-data-grid-column [name]="'Description'" [width]="2.7">
    <ng-template #columnRow let-row="row" let-column="column" let-parent="parent">
      <ngt-group [appendTo]="parent">
        <flat-ui-label [enabled]="false" [width]="column.width" [height]="rowheight" [text]="row.description"></flat-ui-label>
      </ngt-group>
    </ng-template>
  </flat-ui-data-grid-column>

  <!-- footer -->
  <ng-template #columnFooter let-column="column" let-index="index" let-parent="parent">
    <ngt-group [appendTo]="parent">
      <flat-ui-label *ngIf="index==1" [visible]="showfooter" [width]="column.width" [height]="showfooter ? footerheight :0" [text]="totalweight" [labelmaterial]="blackmaterial.instance.value"></flat-ui-label>
      <flat-ui-label *ngIf="index!=1" [visible]="showfooter" [width]="column.width" [height]="showfooter ? footerheight :0" [text]="''"></flat-ui-label>

      <ngt-group *ngIf="showfooter && showhlines">
        <ngt-line *ngIf="index==0" [position]="[-column.width/2, -footerheight/2, 0]" [geometry]="hline" [material]="blackmaterial.instance.value"></ngt-line>
        <ngt-line *ngIf="index==0" [position]="[-column.width/2, footerheight/2, 0]" [geometry]="hline" [material]="blackmaterial.instance.value"></ngt-line>
      </ngt-group>
    </ngt-group>

  </ng-template>
</flat-ui-data-grid>
⚠️ **GitHub.com Fallback** ⚠️