@xbim/grid

xbim Flex grid

The xbim Flex grid provides a grid component based on the Material table that can be bound to the flex state management service.

Usage

import { AssetModelEntityState, EntityComparer } from '@xbim/flex-webkit';}

@Component({
  selector: 'app-yourTeamlist',
  template: `<flex-table
    [stateType]="stateType"
    [displayedColumns]="orderedColumns"
    [columnDefinitions]="definedColumns"
    (rowSelected)="previewModel($event)"
    (rowDblClick)="openModel($event)"
    [comparer]="comparer"
    allowMultipleSelection="true"
    ></flex-table>`
})
export class ModelListComponent {

  constructor() { }

  // The NGXS state to bind the grid to
  public stateType = AssetModelEntityState;
  public comparer = new EntityComparer();

  // define the column meta data
  definedColumns: GridColumnDefinition[] = [
    {
      id: 'Name',
      title: 'Model Name',
      isPrimary: true,
      prefixIcon: 'document'
    },
    {
      id: 'Revision',
      title: 'Email',
    },
    {
      id: 'ModelSize',
      title: 'Bytes'
    },
    {
      id: 'DateUploaded',
      title: 'Uploaded'
    }
  ];

  // define the visible columns
  orderedColumns = ['Name', 'Revision', 'ModelSize'];

  openModel(row: AssetModel) {
    // Navigate to model
    console.log('Open', row);
    // e.g.
    // this.store.dispatch([
    //   new SetActive(AssetModelEntityState, row.AssetModelId),
    //   new Navigate(['../viewer'], null, { relativeTo: this.route })
    // ]);
  }

  previewModel(row: AssetModel) {
      console.log('Preview', row);
  }
}