https://github.com/vitocmpl/ng2-ya-table

Angular yet another table
https://github.com/vitocmpl/ng2-ya-table

angular-2 angular2 angular4 bootstrap bootstrap3 bootstrap4 bootstrap5 configuration datagrid datatable filter grid localdatasource ng2 ngx observable pagination server-side sort table

Last synced: 6 days ago
JSON representation

Angular yet another table

• Host: GitHub
• URL: https://github.com/vitocmpl/ng2-ya-table
• Owner: vitocmpl
• License: mit
• Created: 2017-03-14T10:44:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-04T07:00:08.000Z (over 1 year ago)
• Last Synced: 2024-04-25T15:20:48.944Z (5 months ago)
• Topics: angular-2, angular2, angular4, bootstrap, bootstrap3, bootstrap4, bootstrap5, configuration, datagrid, datatable, filter, grid, localdatasource, ng2, ngx, observable, pagination, server-side, sort, table
• Language: TypeScript
• Homepage: https://vitocmpl.github.io/ng2-ya-table/
• Size: 9.75 MB
• Stars: 17
• Watchers: 2
• Forks: 7
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ng2-ya-table

Angular yet another table with pagination, ordering, filtering and datasource server-side ready.

### Demo

Live Demo

![alt tag](src/assets/img/demo.gif)

## Installation

 - `angular-cli` please refer to [getting-started-with-ng-cli](https://github.com/vitocmpl/ng2-ya-table/tree/master/docs/getting-started/ng-cli.md)

 - ...

## Minimal Setup Example

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { Ng2YaTableModule } from 'ng2-ya-table';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    Ng2YaTableModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

```xml



  {{title}}



    

      


        Edit

      

    

    

      


        Delete

      

    


```

```typescript

public options: TableOptions = {

    orderMulti: false,

    className: ['table-striped'],

    language: "en"

};

public data: unknown[] = [...]; //array of data

public paging: TablePaging = {

    itemsPerPage: 10,

    itemsPerPageOptions: [10, 25, 50, 100],

    maxSize: 5

}

public columns: TableColumn[] = [

{ 

    title: 'Name', 

    name: 'name', 

    sort: true, 

    sortOrder: 'asc',  

    filter: {

        controlType: 'default',

        config: {

            placeholder: 'Filter by name'

        }

    } 

},

{ 

    title: 'Username', 

    name: 'username', 

    sort: true, 

    filter: {

        controlType: 'default',

        config: {

            placeholder: 'Filter by username'

        }

    } 

},

{ 

    title: 'Email', 

    name: 'email', 

    sort: true, 

    filter: {

        controlType: 'default',

        config: {

            placeholder: 'Filter by email'

        }

    } 

},

{ 

    sort: false, 

    title: '', 

    name: 'btnEdit',

    width: "10px"

},

{ 

    sort: false, 

    title: '', 

    name: 'btnDelete',

    width: "10px"

}];

```

## Server-Side datasource Setup Example

```xml

```

```typescript

public datasource: TableDataSource = (request: DatasourceParameters): Observable => {

    return this.service.getUsers(request);

}

```

## Further Documentation

Installation, customization and other useful articles will be available soon...

## Features

* Observable data source (client-side or server-side)

* Filtering

* Sorting

* Pagination

* Bootstrap 4 / 5 layout

## License

[MIT](LICENSE) license.