dc6ee49467c2e87dcee7ad67e128e8f72189ab65
ng-datatable
A lightweight, feature rich table to display data. It is built with twitter bootstrap in mind but its simple table structor makes it easy to style.
Features:
- Templating columns
- Sorting
- Filtering
- Pagination
- Expanding/Master Detail
- Selection Modes
- Easy CSS
- Mobile column hiding
- Checkboxes
Installing
- Install package
npm install @ztimson/ng-datatable --save - Import into module
import {NgDatatableModule} from '@ztimsonm/ng-datatable'
@NgModule({
imports: [
NgDatatableModule,
...
],
...
})
export class AppModule { }
- Add to template
<ng-datatable [columns]="columns" [data]="data"></ng-datatable>
API
NgDatatableComponent
Exported As: NgDatatableComponent
Selector: ng-datatable
Properties
| Name | Description |
|---|---|
| @Input() cssClass: string | Class added to the main table element |
| @Input() columns: Column[] | Columns to display on table |
| @Input() expandedTemplate: TemplateRef | An Angular template to render expanded rows |
| @Input() mobileBreakpoint: number | Hide mobile columns past this point. Default: 768px |
| @Input() pageLength: number | Number of rows per page. Default 20 |
| @Input() page: number | Current page |
| @Input() paginate: boolean | Paginate rows or display all at once. Default true |
| @Input() paginateCssClass: string | Class added to the paginator |
| @Input() selectionMode: null/'single'/'multi' | Allow selecting none, single or multiple rows at once |
| @Input() showCheckbox: boolean | Show checkbox' for mass selecting |
| @Input() tableLayout: 'auto'/'fixed' | CSS table layout. Defaults to 'auto' |
| @Output() filterChanged: EventEmitter<(a, b) => 1/0/-1[]> | Applied filters |
| @Output() pageChanged: EventEmitter | New page |
| @Output() selectionChanged: EventEmitter<any[]> | Selected rows |
| pagedData: any[] | Array of rows on current page after sorting and filtering |
| processedData: any[] | Array of remaining rows after sorting and filtering |
| selectedRows: Set | Index numbers of rows currently selected |
Methods
addFilter(...filters)
Add function to filter rows by.
| paramater | Description |
|---|---|
| ...filters: (el, i, arr) => boolean | Filters to add to dataset |
changePage(page)
Change the current selected page.
| paramater | Description |
|---|---|
| page: number | Page to change to |
clearFilters(update)
Clear filters being applied to. Update can be set to false to prevent instant filtering in cases where you may be applying filters right after.
| paramater | Description |
|---|---|
| update: boolean | Clear filters imedietly |
clearSelected()
Clear all selected rows.
selectAll()
Select all rows. Ignores pagination but not filtering.
sort(columnIndex: number, desc?: boolean)
Sort the grid by column index
| paramater | Description |
|---|---|
| columnIndex: number | Column index to sort by |
| desc: boolean | Sort ascending or descending |
updateSelected(index)
Virtually click on row causing selection/expanding/collapsing
| paramater | Description |
|---|---|
| index: number | Row to select |
Column
Exported As: Column
Properties
| Name | Description |
|---|---|
| cssClass: string | Style to add to column header |
| hide: boolean | Hide column |
| hideMobile: boolean | Hide column on mobile devices |
| initialSort: 'asc'/'desc' | Sort the column initially |
| label: string | Column header label |
| property: string | Property to display in dot notation |
| sort: boolean | Enable/Disable sorting |
| sortFn: (a, b) => 1/0/-1 | Custom function to sort rows by |
| template: TemplateRef | Template to render row with |
| width: number/string | CSS width property |
Description
Languages
TypeScript
87.9%
HTML
11.9%
CSS
0.2%