0.1.1 • Published 2 years ago

ngb5-simple-table v0.1.1

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

Getting Started

ngb5-simple-table provides simple datatable component powered by Angular. It uses Bootstrap 5 so, you need to include Bootstrap 5 with your angular app or use CSS link.

Installation

Install ngb5-simple-table from npm:

npm install ngb5-simple-table --save

Usage

Add Ngb5SimpleTableModule to your App module's imports

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

import { Ngb5SimpleTableModule } from 'ngb5-simple-table';

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

@NgModule({
  imports: [BrowserModule, Ngb5SimpleTableModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Add component to your page:

<ngb5-simple-table  [title]="'Todo List'"
                    [dataList]="todoList" 
                    [columns]="todoColumns" 
                    [staticPagination]="true">
</ngb5-simple-table>

You will also need to add Bootstrap 5 to you app. Either add CSS to your index.html or you can npm install Bootstrap.

  • Bootstrap 5
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Running Demo server

  1. Run npm run lib:build to build the library.
  2. Run ng serve for a running demo server.

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

For Development

  • Run npm run lib:build-watch
  • Run npm run demo:serve

Make live changes to project lib "ngb5-simple-table" and test.

Note: Check package.json for more info

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.