ztimson/ng-datatable
ztimson/ng-datatable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Update README.md
All checks were successful
Build / Build NPM Project (push) Successful in 29s
Details
Build / Tag Version (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Zakary Timson 2023-12-16 00:06:45 +00:00
parent eea71c930e
commit 263f7cad77
1 changed files with 232 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

464
README.md
View File

@ -1,232 +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/56e7adede041749f5df1d8b88b334e8c4cac38d7a4a574ccb42a624c52a35624" 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 -->
[![Version](https://img.shields.io/badge/dynamic/json.svg?label=Version&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/ng-datatable/tags&query=$[0].name)](https://git.zakscode.com/ztimson/ng-datatable/tags) [![Version](https://img.shields.io/badge/dynamic/json.svg?label=Version&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/ng-datatable/tags&query=$[0].name)](https://git.zakscode.com/ztimson/ng-datatable/tags)
[![Pull Requests](https://img.shields.io/badge/dynamic/json.svg?label=Pull%20Requests&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/ng-datatable&query=open_pr_counter)](https://git.zakscode.com/ztimson/ng-datatable/pulls) [![Pull Requests](https://img.shields.io/badge/dynamic/json.svg?label=Pull%20Requests&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/ng-datatable&query=open_pr_counter)](https://git.zakscode.com/ztimson/ng-datatable/pulls)
[![Issues](https://img.shields.io/badge/dynamic/json.svg?label=Issues&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/ng-datatable&query=open_issues_count)](https://git.zakscode.com/ztimson/ng-datatable/issues) [![Issues](https://img.shields.io/badge/dynamic/json.svg?label=Issues&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/ng-datatable&query=open_issues_count)](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)
- [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
[![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/) [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/)
[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://typescriptlang.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](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.