ngx-dynamic-table-component

ngx-dynamic-table-component is an Angular component that generates a dynamic table using Bootstrap. The component accepts an input data which can be a string[][] or a TableOptions.

Table of Contents

• Features
• Installation
• Usage
  • Example Usage
• API
  • Inputs
  • TableOptions
• Examples
  • Basic Example
  • Advanced Example with TableOptions
• Support
• More Information

Features

• Dynamic table generation using Bootstrap
• Supports both string[][] and TableOptions inputs
• Customizable headers, footers, and cell styles
• Sortable columns

Installation

To install the library, run:

npm install ngx-dynamic-table-component

Usage

Import the module in your Angular application:

import { NgxDynamicTableComponent } from 'ngx-dynamic-table-component';

@NgModule({
  imports: [
    // other modules
    NgxDynamicTableComponent
  ],
  // other components, services, etc.
})
export class AppModule { }

Add the bootstrap and bootstrap-icons styles to your global styles file styles.css or styles.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~bootstrap-icons/font/bootstrap-icons.css';

Example Usage

import { Component } from '@angular/core';
import { TableOptions } from 'ngx-dynamic-table-component';

@Component({
  selector: 'app-root',
  template: `
    <ngx-dynamic-table [data]="tableData"></ngx-dynamic-table>
  `
})
export class AppComponent {
  tableData: string[][] = [
    ['Header 1', 'Header 2', 'Header 3'],
    ['Row 1 Col 1', 'Row 1 Col 2', 'Row 1 Col 3'],
    ['Row 2 Col 1', 'Row 2 Col 2', 'Row 2 Col 3']
  ];

  // Or using TableOptions
  tableOptions: TableOptions = {
    header: [
      { text: 'Header 1', sortable: true },
      { text: 'Header 2', sortable: false },
      { text: 'Header 3', sortable: true }
    ],
    body: [
      [
        { text: 'Row 1 Col 1', bold: true },
        { text: 'Row 1 Col 2' },
        { text: 'Row 1 Col 3', italic: true }
      ],
      [
        { text: 'Row 2 Col 1' },
        { text: 'Row 2 Col 2', class: 'custom-class' },
        { text: 'Row 2 Col 3' }
      ]
    ],
    footer: [
      [
        { text: 'Footer 1' },
        { text: 'Footer 2' },
        { text: 'Footer 3' }
      ]
    ],
    class: 'table-class'
  };
}

API

Inputs

• data: string[][] | TableOptions - The data to be displayed in the table.

TableOptions

• header: CellHeaderOptions[] - Table header content.
• body: CellOptions[][] - Table body content.
• footer: CellOptions[][] - Table footer contents.
• class: string - Custom class for the table.

Examples

Basic Example

@Component({
  selector: 'app-basic',
  template: `
    <ngx-dynamic-table [data]="basicData"></ngx-dynamic-table>
  `
})
export class BasicComponent {
  basicData: string[][] = [
    ['Header 1', 'Header 2', 'Header 3'],
    ['Row 1 Col 1', 'Row 1 Col 2', 'Row 1 Col 3']
  ];
}

Advanced Example with TableOptions

@Component({
  selector: 'app-advanced',
  template: `
    <ngx-dynamic-table [data]="advancedOptions"></ngx-dynamic-table>
  `
})
export class AdvancedComponent {
  advancedOptions: TableOptions = {
    header: [
      { text: 'Header 1', sortable: true },
      { text: 'Header 2', sortable: false },
      { text: 'Header 3', sortable: true }
    ],
    body: [
      [
        { text: 'Row 1 Col 1', bold: true },
        { text: 'Row 1 Col 2' },
        { text: 'Row 1 Col 3', italic: true }
      ],
      [
        { text: 'Row 2 Col 1' },
        { text: 'Row 2 Col 2', class: 'custom-class' },
        { text: 'Row 2 Col 3' }
      ]
    ],
    footer: [
      [
        { text: 'Footer 1' },
        { text: 'Footer 2' },
        { text: 'Footer 3' }
      ]
    ],
    class: 'table-class'
  };
}

Support

If you encounter any issues or have questions, please open an issue on GitHub.

More Information

For more details, contributions, and license information, please visit the GitHub repository.