Update README.md
This commit is contained in:
parent
2523cdacbf
commit
71e39dd9d8
465
README.md
465
README.md
@ -1,233 +1,232 @@
|
|||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div id="top" align="center">
|
<div id="top" align="center">
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<img src="https://git.zakscode.com/repo-avatars/066f56124662dc95ddacf70bdc8839b98462c885e106728b342abe8bfb5be36a" alt="Logo" width="200" height="200">
|
<img src="https://git.zakscode.com/repo-avatars/066f56124662dc95ddacf70bdc8839b98462c885e106728b342abe8bfb5be36a" alt="Logo" width="200" height="200">
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
### ng-datatable
|
### ng-datatable
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
**Deprecated:** Angular Table Building Library
|
**Deprecated:** Angular Table Building Library
|
||||||
|
|
||||||
<!-- Repo badges -->
|
<!-- Repo badges -->
|
||||||
[](https://git.zakscode.com/ztimson/ng-datatable/tags)
|
[](https://git.zakscode.com/ztimson/ng-datatable/tags)
|
||||||
[](https://git.zakscode.com/ztimson/ng-datatable/pulls)
|
[](https://git.zakscode.com/ztimson/ng-datatable/pulls)
|
||||||
[](https://git.zakscode.com/ztimson/ng-datatable/issues)
|
[](https://git.zakscode.com/ztimson/ng-datatable/issues)
|
||||||
|
|
||||||
<!-- Links -->
|
<!-- Links -->
|
||||||
|
|
||||||
---
|
---
|
||||||
<div>
|
<div>
|
||||||
<a href="https://git.zakscode.com/ztimson/ng-datatable/releases" target="_blank">Release Notes</a>
|
<a href="https://git.zakscode.com/ztimson/ng-datatable/releases" target="_blank">Release Notes</a>
|
||||||
• <a href="https://git.zakscode.com/ztimson/ng-datatable/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
|
• <a href="https://git.zakscode.com/ztimson/ng-datatable/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
|
||||||
• <a href="https://git.zakscode.com/ztimson/ng-datatable/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
|
• <a href="https://git.zakscode.com/ztimson/ng-datatable/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
---
|
---
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
- [ng-datatable](#top)
|
- [ng-datatable](#top)
|
||||||
- [About](#about)
|
- [About](#about)
|
||||||
- [Demo](#demo)
|
- [Built With](#built-with)
|
||||||
- [Built With](#built-with)
|
- [Setup](#setup)
|
||||||
- [Setup](#setup)
|
- [Production](#production)
|
||||||
- [Production](#production)
|
- [Development](#development)
|
||||||
- [Development](#development)
|
- [Documentation](#documentation)
|
||||||
- [Documentation](#documentation)
|
- [NgDatatableComponent](#ngdatatablecomponent)
|
||||||
- [NgDatatableComponent](#ngdatatablecomponent)
|
- [Column](#column)
|
||||||
- [Column](#column)
|
- [License](#license)
|
||||||
- [License](#license)
|
|
||||||
|
## About
|
||||||
## About
|
|
||||||
|
**Deprecated**
|
||||||
**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.
|
||||||
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:
|
||||||
Features:
|
|
||||||
|
- Templating columns
|
||||||
- Templating columns
|
- Sorting
|
||||||
- Sorting
|
- Filtering
|
||||||
- Filtering
|
- Pagination
|
||||||
- Pagination
|
- Expanding/Master Detail
|
||||||
- Expanding/Master Detail
|
- Selection Modes
|
||||||
- Selection Modes
|
- Easy CSS
|
||||||
- Easy CSS
|
- Mobile column hiding
|
||||||
- Mobile column hiding
|
- Checkboxes
|
||||||
- Checkboxes
|
|
||||||
|
[View on NPM](https://www.npmjs.com/package/@ztimson/ng-datatable)
|
||||||
[View on NPM](https://www.npmjs.com/package/@ztimson/ng-datatable)
|
|
||||||
|
### Built With
|
||||||
### Built With
|
[](https://angular.io/)
|
||||||
[](https://angular.io/)
|
[](https://typescriptlang.org/)
|
||||||
[](https://typescriptlang.org/)
|
|
||||||
|
## Setup
|
||||||
## Setup
|
|
||||||
|
<details>
|
||||||
<details>
|
<summary>
|
||||||
<summary>
|
<h3 id="production" style="display: inline">
|
||||||
<h3 id="production" style="display: inline">
|
Production
|
||||||
Production
|
</h3>
|
||||||
</h3>
|
</summary>
|
||||||
</summary>
|
|
||||||
|
#### Prerequisites
|
||||||
#### Prerequisites
|
- [Node.js](https://nodejs.org/en/download)
|
||||||
- [Node.js](https://nodejs.org/en/download)
|
|
||||||
|
#### Instructions
|
||||||
#### Instructions
|
1. Install package `npm install @ztimson/ng-datatable --save`
|
||||||
1. Install package `npm install @ztimson/ng-datatable --save`
|
2. Import into module
|
||||||
2. Import into module
|
|
||||||
|
```Typescript
|
||||||
```Typescript
|
import {NgDatatableModule} from '@ztimsonm/ng-datatable'
|
||||||
import {NgDatatableModule} from '@ztimsonm/ng-datatable'
|
|
||||||
|
@NgModule({
|
||||||
@NgModule({
|
imports: [
|
||||||
imports: [
|
NgDatatableModule,
|
||||||
NgDatatableModule,
|
...
|
||||||
...
|
],
|
||||||
],
|
...
|
||||||
...
|
})
|
||||||
})
|
export class AppModule { }
|
||||||
export class AppModule { }
|
```
|
||||||
```
|
|
||||||
|
3. Add to template
|
||||||
3. Add to template
|
|
||||||
|
```HTML
|
||||||
```HTML
|
<ng-datatable [columns]="columns" [data]="data"></ng-datatable>
|
||||||
<ng-datatable [columns]="columns" [data]="data"></ng-datatable>
|
```
|
||||||
```
|
</details>
|
||||||
</details>
|
|
||||||
|
<details>
|
||||||
<details>
|
<summary>
|
||||||
<summary>
|
<h3 id="development" style="display: inline">
|
||||||
<h3 id="development" style="display: inline">
|
Development
|
||||||
Development
|
</h3>
|
||||||
</h3>
|
</summary>
|
||||||
</summary>
|
|
||||||
|
#### Prerequisites
|
||||||
#### Prerequisites
|
- [Node.js](https://nodejs.org/en/download)
|
||||||
- [Node.js](https://nodejs.org/en/download)
|
|
||||||
|
#### Instructions
|
||||||
#### Instructions
|
1. Install the dependencies: `npm install`
|
||||||
1. Install the dependencies: `npm install`
|
2. Start the Angular server: `npm run start`
|
||||||
2. Start the Angular server: `npm run start`
|
3. Open [http://localhost:4200](http://localhost:4200)
|
||||||
3. Open [http://localhost:4200](http://localhost:4200)
|
|
||||||
|
</details>
|
||||||
</details>
|
|
||||||
|
## Documentation
|
||||||
## Documentation
|
|
||||||
|
### NgDatatableComponent
|
||||||
### NgDatatableComponent
|
|
||||||
|
Exported As: `NgDatatableComponent`
|
||||||
Exported As: `NgDatatableComponent`
|
|
||||||
|
Selector: `ng-datatable`
|
||||||
Selector: `ng-datatable`
|
|
||||||
|
#### Properties
|
||||||
#### Properties
|
|
||||||
|
| Name | Description |
|
||||||
| Name | Description |
|
| --------------------------------------------------------- | --------------------------------------------------------- |
|
||||||
| --------------------------------------------------------- | --------------------------------------------------------- |
|
| @Input() cssClass: string | Class added to the main table element |
|
||||||
| @Input() cssClass: string | Class added to the main table element |
|
| @Input() columns: Column[] | Columns to display on table |
|
||||||
| @Input() columns: Column[] | Columns to display on table |
|
| @Input() expandedTemplate: TemplateRef<any> | An Angular template to render expanded rows |
|
||||||
| @Input() expandedTemplate: TemplateRef<any> | An Angular template to render expanded rows |
|
| @Input() mobileBreakpoint: number | Hide mobile columns past this point. Default: 768px |
|
||||||
| @Input() mobileBreakpoint: number | Hide mobile columns past this point. Default: 768px |
|
| @Input() pageLength: number | Number of rows per page. Default 20 |
|
||||||
| @Input() pageLength: number | Number of rows per page. Default 20 |
|
| @Input() page: number | Current page |
|
||||||
| @Input() page: number | Current page |
|
| @Input() paginate: boolean | Paginate rows or display all at once. Default true |
|
||||||
| @Input() paginate: boolean | Paginate rows or display all at once. Default true |
|
| @Input() paginateCssClass: string | Class added to the paginator |
|
||||||
| @Input() paginateCssClass: string | Class added to the paginator |
|
| @Input() selectionMode: null/'single'/'multi' | Allow selecting none, single or multiple rows at once |
|
||||||
| @Input() selectionMode: null/'single'/'multi' | Allow selecting none, single or multiple rows at once |
|
| @Input() showCheckbox: boolean | Show checkbox' for mass selecting |
|
||||||
| @Input() showCheckbox: boolean | Show checkbox' for mass selecting |
|
| @Input() tableLayout: 'auto'/'fixed' | CSS table layout. Defaults to 'auto' |
|
||||||
| @Input() tableLayout: 'auto'/'fixed' | CSS table layout. Defaults to 'auto' |
|
| @Output() filterChanged: EventEmitter<(a, b) => 1/0/-1[]> | Applied filters |
|
||||||
| @Output() filterChanged: EventEmitter<(a, b) => 1/0/-1[]> | Applied filters |
|
| @Output() finished: EventEmitter<any[]> | Emits when finished processing data |
|
||||||
| @Output() finished: EventEmitter<any[]> | Emits when finished processing data |
|
| @Output() pageChanged: EventEmitter<number> | New page |
|
||||||
| @Output() pageChanged: EventEmitter<number> | New page |
|
| @Output() processing: EventEmitter<any[]> | Emits when processing begins |
|
||||||
| @Output() processing: EventEmitter<any[]> | Emits when processing begins |
|
| @Output() selectionChanged: EventEmitter<any[]> | Selected rows |
|
||||||
| @Output() selectionChanged: EventEmitter<any[]> | Selected rows |
|
| pagedData: any[] | Array of rows on current page after sorting and filtering |
|
||||||
| pagedData: any[] | Array of rows on current page after sorting and filtering |
|
| processedData: any[] | Array of remaining rows after sorting and filtering |
|
||||||
| processedData: any[] | Array of remaining rows after sorting and filtering |
|
| selectedRows: Set<number> | Index numbers of rows currently selected |
|
||||||
| selectedRows: Set<number> | Index numbers of rows currently selected |
|
|
||||||
|
#### Methods
|
||||||
#### Methods
|
|
||||||
|
##### addFilter(...filters)
|
||||||
##### addFilter(...filters)
|
|
||||||
|
Add function to filter rows by.
|
||||||
Add function to filter rows by.
|
|
||||||
|
| paramater | Description |
|
||||||
| paramater | Description |
|
| ----------------------------------- | ------------------------- |
|
||||||
| ----------------------------------- | ------------------------- |
|
| ...filters: (el, i, arr) => boolean | Filters to add to dataset |
|
||||||
| ...filters: (el, i, arr) => boolean | Filters to add to dataset |
|
|
||||||
|
##### changePage(page)
|
||||||
##### changePage(page)
|
|
||||||
|
Change the current selected page.
|
||||||
Change the current selected page.
|
|
||||||
|
| paramater | Description |
|
||||||
| paramater | Description |
|
| ------------ | ----------------- |
|
||||||
| ------------ | ----------------- |
|
| page: number | Page to change to |
|
||||||
| page: number | Page to change to |
|
|
||||||
|
##### clearFilters(update)
|
||||||
##### 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.
|
||||||
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 |
|
||||||
| paramater | Description |
|
| --------------- | ----------------------- |
|
||||||
| --------------- | ----------------------- |
|
| update: boolean | Clear filters imedietly |
|
||||||
| update: boolean | Clear filters imedietly |
|
|
||||||
|
##### clearSelected()
|
||||||
##### clearSelected()
|
|
||||||
|
Clear all selected rows.
|
||||||
Clear all selected rows.
|
|
||||||
|
#### refresh()
|
||||||
#### refresh()
|
|
||||||
|
Refreshes the grid
|
||||||
Refreshes the grid
|
|
||||||
|
##### selectAll()
|
||||||
##### selectAll()
|
|
||||||
|
Select all rows. Ignores pagination but not filtering.
|
||||||
Select all rows. Ignores pagination but not filtering.
|
|
||||||
|
##### sort(columnIndex: number, desc?: boolean)
|
||||||
##### sort(columnIndex: number, desc?: boolean)
|
|
||||||
|
Sort the grid by column index
|
||||||
Sort the grid by column index
|
|
||||||
|
| paramater | Description |
|
||||||
| paramater | Description |
|
| ------------------- | ---------------------------- |
|
||||||
| ------------------- | ---------------------------- |
|
| columnIndex: number | Column index to sort by |
|
||||||
| columnIndex: number | Column index to sort by |
|
| desc: boolean | Sort ascending or descending |
|
||||||
| desc: boolean | Sort ascending or descending |
|
|
||||||
|
##### updateSelected(index)
|
||||||
##### updateSelected(index)
|
|
||||||
|
Virtually click on row causing selection/expanding/collapsing
|
||||||
Virtually click on row causing selection/expanding/collapsing
|
|
||||||
|
| paramater | Description |
|
||||||
| paramater | Description |
|
| ------------- | ------------- |
|
||||||
| ------------- | ------------- |
|
| index: number | Row to select |
|
||||||
| index: number | Row to select |
|
|
||||||
|
### Column
|
||||||
### Column
|
|
||||||
|
Exported As: `Column`
|
||||||
Exported As: `Column`
|
|
||||||
|
#### Properties
|
||||||
#### Properties
|
|
||||||
|
| Name | Description |
|
||||||
| Name | Description |
|
| -------------------------- | ----------------------------------- |
|
||||||
| -------------------------- | ----------------------------------- |
|
| cssClass: string | Style to add to column header |
|
||||||
| cssClass: string | Style to add to column header |
|
| hide: boolean | Hide column |
|
||||||
| hide: boolean | Hide column |
|
| hideMobile: boolean | Hide column on mobile devices |
|
||||||
| hideMobile: boolean | Hide column on mobile devices |
|
| initialSort: 'asc'/'desc' | Sort the column initially |
|
||||||
| initialSort: 'asc'/'desc' | Sort the column initially |
|
| label: string | Column header label |
|
||||||
| label: string | Column header label |
|
| property: string | Property to display in dot notation |
|
||||||
| property: string | Property to display in dot notation |
|
| sort: boolean | Enable/Disable sorting |
|
||||||
| sort: boolean | Enable/Disable sorting |
|
| sortFn: (a, b) => 1/0/-1 | Custom function to sort rows by |
|
||||||
| sortFn: (a, b) => 1/0/-1 | Custom function to sort rows by |
|
| template: TemplateRef<any> | Template to render row with |
|
||||||
| template: TemplateRef<any> | Template to render row with |
|
| width: number/string | CSS width property |
|
||||||
| width: number/string | CSS width property |
|
|
||||||
|
|
||||||
|
## License
|
||||||
## License
|
Copyright © 2023 Zakary Timson | Available under the Apache 2.0 License
|
||||||
Copyright © 2023 Zakary Timson | Available under the Apache 2.0 License
|
|
||||||
|
See the [license](./LICENSE) for more information.
|
||||||
See the [license](./LICENSE) for more information.
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user