# ng-table-crud

`ng-table-crud` is a customizable and reusable Angular library for displaying tables with support for CRUD operations, auxiliary data, and modal forms. It is designed for rapid application development (RAD) with a focus on simplicity and flexibility.

## Keywords

`crud`, `angular`, `RAD`, `table`

## Installation

To install the library, run:

```bash
npm install ng-table-crud

Usage

Importing the Library

Using Angular Modules

First, import the NgTableCrudModule into your Angular module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgTableCrudModule } from 'ng-table-crud';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgTableCrudModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using Standalone Components

If you're using standalone components, import the TabelaComponent directly:

import { Component } from '@angular/core';
import { TabelaComponent, DataTableConfig } from 'ng-table-crud';
import { provideHttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TabelaComponent],
  providers: [provideHttpClient()],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  tableConfig: DataTableConfig<User> = {
    title: 'User Information',
    apiUrl: 'http://localhost:3000/users',
    tableHeaders: [
      { key: 'name', title: 'Name' },
      { key: 'age', title: 'Age' },
      { key: 'email', title: 'Email' },
      { key: 'subscribe', title: 'Subscribe' },
      { key: 'provinceId', title: 'Province', displayProperty: 'name' }
    ],
    formStructure: [
      { key: 'name', label: 'Name', type: 'text' },
      { key: 'age', label: 'Age', type: 'number' },
      { key: 'email', label: 'Email', type: 'email' },
      { key: 'subscribe', label: 'Subscribe', type: 'checkbox' },
      { key: 'provinceId', label: 'Province', type: 'select', displayProperty: 'name' }
    ],
    data: [],
    auxiliaryApiUrls: {
      province: 'http://localhost:3000/provinces'
    }
  };
}

Using TabelaComponent

You can use the TabelaComponent in your templates by passing the appropriate configuration.

<!-- app.component.html -->
<app-tabela [config]="tableConfig"></app-tabela>

Configuration

The TabelaComponent takes a configuration object with the following structure:

export interface DataTableColumn {
  key: keyof any;
  title: string;
  displayProperty?: string;
}

export interface FormField {
  key: string;
  label: string;
  type: 'text' | 'number' | 'email' | 'checkbox' | 'select';
  displayProperty?: string;
}

export interface DataTableConfig<T> {
  title: string;
  apiUrl: string;
  tableHeaders: DataTableColumn[];
  formStructure: FormField[];
  data: T[];
  auxiliaryApiUrls?: { [key: string]: string

```markdown
  title: string;
  apiUrl: string;
  tableHeaders: DataTableColumn[];
  formStructure: FormField[];
  data: T[];
  auxiliaryApiUrls?: { [key: string]: string };
}

• title: The title of the table.
• apiUrl: The URL of the API to fetch the main data.
• tableHeaders: The columns to display in the table, each with a key for the data property, a title for the column header, and an optional displayProperty for nested object display.
• formStructure: The structure of the form used in the modal, with a key for the data property, a label for the form field, a type for the input type, and an optional displayProperty for nested object display in select fields.
• data: The initial data to display in the table.
• auxiliaryApiUrls: Optional URLs for fetching auxiliary data (e.g., lists of options for select fields).

Example

Below is an example configuration object for DataTableConfig:

const tableConfig: DataTableConfig<User> = {
  title: 'User Information',
  apiUrl: 'http://yourapi/users',
  tableHeaders: [
    { key: 'name', title: 'Name' },
    { key: 'age', title: 'Age' },
    { key: 'email', title: 'Email' },
    { key: 'subscribe', title: 'Subscribe' },
    { key: 'provinceId', title: 'Province', displayProperty: 'name' }
  ],
  formStructure: [
    { key: 'name', label: 'Name', type: 'text' },
    { key: 'age', label: 'Age', type: 'number' },
    { key: 'email', label: 'Email', type: 'email' },
    { key: 'subscribe', label: 'Subscribe', type: 'checkbox' },
    { key: 'provinceId', label: 'Province', type: 'select', displayProperty: 'name' }
  ],
  data: [],
  auxiliaryApiUrls: {
    province: 'http://yourapi/provinces'
  }
};

Customization

You can customize the TabelaComponent and ModalComponent by passing different configurations and styles as needed. The library is designed to be flexible and extensible to suit various use cases.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.