https://github.com/laijuthomas/angular-table
A simple bootstrap based dynamic table component.
https://github.com/laijuthomas/angular-table
angular angular-table angular2
Last synced: 4 months ago
JSON representation
A simple bootstrap based dynamic table component.
- Host: GitHub
- URL: https://github.com/laijuthomas/angular-table
- Owner: laijuthomas
- License: mit
- Created: 2021-07-08T07:17:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-16T08:41:14.000Z (almost 2 years ago)
- Last Synced: 2025-09-03T12:40:40.571Z (4 months ago)
- Topics: angular, angular-table, angular2
- Language: TypeScript
- Homepage:
- Size: 194 KB
- Stars: 0
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# AngularTable
A bootstrap based table component for Angular 2+
## Getting Started
### Installation
Install via [npm][npm] package manager
```bash
npm install @laijuthomas/angular-table --save
```
### Usage
Import `angular-table` module
```js
import { HttpClientModule} from '@angular/common/http';
import { AngularTableModule } from '@laijuthomas/angular-table';
@NgModule({
imports: [ HttpClientModule, AngularTableModule ]
})
```
Then in HTML
```html
No data available in table
```
### Inputs
| Input | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| totalResults | `number` | `` | yes | Set the total count of the data array |
| loading | `boolean` | `false` | no | Set to show loader in the table |
| params | `HttpParams` | `-` | no | Set existing data params |
| columns | `array` | `-` | yes | Set table header column data |
| page | `number` | `-` | no | Set current page number |
| data | `array` | `-` | no | Set data to show in the table |
| [config] | `AngularTableConfig` | `default config` | no | config for the table |
### Outputs
| Output | Description |
| ------------- | ------------- |
| (paramsChanged) | Fired when pagination, search, sort etc. changes |
### Other
Name | Type | Description |
| ------------- | ------------- | ------------- |
| AngularTableConfig | configuration | Configuration for the AngularTable component.|
### Configuration
| Input | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| paging | `boolean` | `true` | no | Set pagination enabled or not |
| search | `boolean` | `true` | no | Set search enabled or not |
| sorting | `boolean` | `yes` | no | Set table sort enabled or not |
| responsive | `boolean` | `false` | no | Set bootstrap table responsive class |
| limit | `boolean` | `false` | no | Set whether to show the option to change the row count |
| additionalFilters | `boolean` | `false` | no | Set additional filter block enabled or not |
| defaultRowCount | `number` | `25` | no | Set number of rows to show in the table |
| className | `string` | `` | no | Set additional css class to the table component |
| theadClassName | `string` | `` | no | Set css class to the table head |
| searchClassName | `string` | `` | no | Set css class to the table search block |
## What's included
Within the download you'll find the following directories and files. You'll see something like this:
```
angular-table/
└── projects/
├── angular-table/
└── angular-table-app/
```
`angular-table/` - library
`angular-table-app/` - demo application
## Creators
**Laiju Thomas**
*