ng-datatable

Deprecated: Angular Table Building Library

---

Release Notes • Report a Bug • Request a Feature

---

Table of Contents

• ng-datatable
  • About
    • Demo
    • Built With
  • Setup
    • Production
      • Development
  • Documentation
    • NgDatatableComponent
    • Column
  • License

About

Deprecated

A lightweight, feature rich table to display data. It is built with twitter bootstrap in mind so it will be automatically styled if you have the css included but its simple table structure makes it easy to style.

Features:

• Templating columns
• Sorting
• Filtering
• Pagination
• Expanding/Master Detail
• Selection Modes
• Easy CSS
• Mobile column hiding
• Checkboxes

View on NPM

Built With

Setup

Production

Prerequisites

• Node.js

Instructions

1. Install package npm install @ztimson/ng-datatable --save
2. Import into module

import {NgDatatableModule} from '@ztimsonm/ng-datatable'

@NgModule({
  imports: [
    NgDatatableModule,
    ...
  ],
  ...
})
export class AppModule { }

3. Add to template

<ng-datatable [columns]="columns" [data]="data"></ng-datatable>

Development

Prerequisites

• Node.js

Instructions

1. Install the dependencies: npm install
2. Start the Angular server: npm run start
3. Open http://localhost:4200

Documentation

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() finished: EventEmitter<any[]>	Emits when finished processing data
@Output() pageChanged: EventEmitter	New page
@Output() processing: EventEmitter<any[]>	Emits when processing begins
@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.

refresh()

Refreshes the grid

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

License

Copyright © 2023 Zakary Timson | Available under the Apache 2.0 License

See the license for more information.