@xbim/grid
v2.20220428.1
Published
Provides a Material grid bound to the flex state management service
Downloads
7
Readme
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);
}
}