Deprecated: Angular Table Building Library
Go to file
ztimson 2523cdacbf
Some checks failed
Build / Build NPM Project (push) Failing after 25s
Build / Tag Version (push) Has been skipped
Updated icon
2023-12-13 23:20:24 -05:00
.github/workflows fixed build 2023-12-13 23:19:01 -05:00
projects/ng-datatable Trimmed package down 2023-12-13 22:56:23 -05:00
src Updated readme 2023-12-13 23:09:34 -05:00
.editorconfig Configure if columns can select row (Fixes #7) 2018-09-17 11:21:14 -04:00
.gitignore initial commit 2018-06-07 08:22:21 -04:00
angular.json Trimmed package down 2023-12-13 22:56:23 -05:00
LICENSE Added some licensing 2018-06-18 21:26:21 -04:00
package-lock.json Init 2018-06-07 12:17:36 -04:00
package.json Trimmed package down 2023-12-13 22:56:23 -05:00
README.md Updated icon 2023-12-13 23:20:24 -05:00
tsconfig.json Trimmed package down 2023-12-13 22:56:23 -05:00


Logo

ng-datatable

Deprecated: Angular Table Building Library

Version Pull Requests Issues



Table of Contents

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

Angular TypeScript

Setup

Production

Prerequisites

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 { }
  1. Add to template
<ng-datatable [columns]="columns" [data]="data"></ng-datatable>

Development

Prerequisites

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.