ag-grid/docs/best-angularjs-2-grid/sampleAppComponent.html

Advanced Javascript Datagrid. Supports raw Javascript, AngularJS 1.x, AngularJS 2.0 and Web Components

<div style="width: 800px;">
    <div style="padding: 4px;">
        <div style="float: right;">
            <input (keyup)="onQuickFilterChanged($event)" type="text" id="quickFilterInput" placeholder="Type text to filter..."/>
            </div>
        <div>
            <b>Employees Skills and Contact Details</b> 
            {{rowCount}}
            </div>
        </div>
    <div style="clear: both;"/>
    <div style="padding: 4px;" class="toolbar">
        <span>
            Grid API:
            <button (click)="agGrid.api.selectAll()">Select All</button>
            <button (click)="agGrid.api.deselectAll()">Clear Selection</button>
        </span>
        <span style="margin-left: 20px;">
            Column API:
            <button (click)="agGrid.columnApi.hideColumn('country', true)">Hide Country Column</button>
            <button (click)="agGrid.columnApi.hideColumn('country', false)">Show Country Column</button>
        </span>
    </div>
    <div style="padding: 4px;" class="toolbar">
        <label>
            <input type="checkbox" (change)="showToolPanel=$event.target.checked"/>
            Show Tool Panel
        </label>
        <button (click)="createRowData()">Refresh Data</button>
    </div>

    <ag-grid-ng2 #ag-grid style="width: 100%; height: 350px;" class="ag-fresh"

                 [grid-options]="gridOptions"
                 [column-defs]="columnDefs"
                 [show-tool-panel]="showToolPanel"
                 [row-data]="rowData"

                 enable-col-resize
                 enable-sorting
                 enable-filter
                 group-headers
                 suppress-row-click-selection
                 tool-panel-suppress-pivot
                 tool-panel-suppress-values
                 row-height="22"
                 row-selection="multiple"
                 pinned-column-count="3"

                 (model-updated)="onModelUpdated()"
                 (cell-clicked)="onCellClicked($event)"
                 (cell-double-clicked)="onCellDoubleClicked($event)"
                 (cell-context-menu)="onCellContextMenu($event)"
                 (cell-value-changed)="onCellValueChanged($event)"
                 (cell-focused)="onCellFocused($event)"
                 (row-selected)="onRowSelected($event)"
                 (selection-changed)="onSelectionChanged()"
                 (before-filter-changed)="onBeforeFilterChanged()"
                 (after-filter-changed)="onAfterFilterChanged()"
                 (filter-modified)="onFilterModified()"
                 (before-sort-changed)="onBeforeSortChanged()"
                 (after-sort-changed)="onAfterSortChanged()"
                 (virtual-row-removed)="onVirtualRowRemoved($event)"
                 (row-clicked)="onRowClicked($event)"
                 (ready)="onReady($event)"

                 (column-everything-changed)="onColumnEvent($event)"
                 (column-pivot-changed)="onColumnEvent($event)"
                 (column-value-changed)="onColumnEvent($event)"
                 (column-moved)="onColumnEvent($event)"
                 (column-visible)="onColumnEvent($event)"
                 (column-group-opened)="onColumnEvent($event)"
                 (column-resized)="onColumnEvent($event)"
                 (column-pinned-count-changed)="onColumnEvent($event)"
    />
</div>