@my-ng-store/ngx-dynamic-table

ngx-dynamic-table

Build dynamic tables with buttons and images in Angular!

Features

• Create tables with flexible structures based on user-defined data.
• Include buttons and images within table cells for enhanced interactivity.
• Customize table content and presentation using a clear interface.

Installation

npm install @my-ng-store/ngx-dynamic-table

Usage

1. Import the Component:

This is a standalone component and so it can be imported directly to the component where it is needed or to the module

import { TableComponent } from '@my-ng-store/ngx-dynamic-table';

@NgModule({
  imports: [
    // ...
    TableComponent,
  ],
  // ...
})
export class AppModule {}

import { TableComponent } from '@my-ng-store/ngx-dynamic-table';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  imports: [TableComponent],
})
export class MyAppComponent {}

2. Use the component in your template:

<ngx-dynamic-table [inputData]="myTableData"></ngx-dynamic-table>

Input

The component takes in a input [inputData] of type ITableData which can be imported from the library.

3. Provide the table data:

import { ITableData, ITableProps, ITableValues } from '@my-ng-store/ngx-dynamic-table';

// ...

myTableData: ITableData = {
  // ... (your table data here)
};

Output Events

• (onButtonClick): Emits the value of the clicked button's key property.
• (onImageClick): Emits the value of the clicked image's key property.

<ngx-dynamic-table [inputData]="myTableData" (onButtonClick)="handleButtonClick($event)" (onImageClick)="handleImageClick($event)"></ngx-dynamic-table>

handleButtonClick(value: string) {
  console.log('Button clicked with value:', value);
}

handleImageClick(value: string) {
  console.log('Image clicked with value:', value);
}

Example Usage

Here's a more detailed example showcasing various features:

myTableData: ITableData = {
  headers: ['User Info', 'Address', 'Net Spent', 'Total Orders', 'Latest Activity', 'Download'],
  values: [
    {
      id: 1,
      name: 'John Doe',
      age: 25,
      email: '[e-mail]',
      city: 'New York',
      country: 'USA',
      orders: 10,
      totalSpent: 1200,
      lastPurchase: '2023-07-15',
    },
    {
      id: 2,
      name: 'Jane Smith',
      age: 32,
      email: '[e-mail]',
      city: 'Los Angeles',
      country: 'USA',
      orders: 24,
      totalSpent: 2800,
      lastPurchase: '2023-08-02',
    },
    {
      id: 3,
      name: 'Robert Johnson',
      age: 45,
      email: '[e-mail]',
      city: 'Chicago',
      country: 'USA',
      orders: 16,
      totalSpent: 1900,
      lastPurchase: '2023-07-28',
    },
    {
      id: 4,
      name: 'Emily Brown',
      age: 28,
      email: '[e-mail]',
      city: 'Houston',
      country: 'USA',
      orders: 7,
      totalSpent: 800,
      lastPurchase: '2023-07-10',
    },
  ],
  props: [
    {
      values: [{ title: '', key: 'name' }],
    },
    {
      values: [
        { title: '', key: 'city' },
        { title: '', key: 'country' },
      ],
    },
    {
      values: [{ title: 'Spent Amount', key: 'totalSpent' }],
    },
    {
      values: [{ title: 'Activity', key: 'lastPurchase' }],
    },
    { values: [{ title: '', key: 'orders' }] },
    {
      values: [{ key: '', imageSource: '/assets/download.svg', type: 'IMAGE' }],
    },
  ],
};

This data will generate a table with:

• Columns for user info, address, net spent, total orders, latest activity, and a download button.
• User info column displaying only the name.
• Address column displaying city and country.
• Net spent column with a custom title "Spent Amount".
• Latest activity column with a custom title "Activity".
• Download column with an image button using the provided image source.

Input data Interfaces

ITableData {
headers: Array<string>;
values: Array<Record<string, string | boolean | number>>;
props: Array<ITableProps>;
}

ITableProps {
values: Array<ITableValues>;
}

ITableValues {
title?: string;
key: string;
type?: 'IMAGE' | 'BUTTON';
buttonText?: string;
imageSource?: string;
}

ITableData Interface

• headers: Array of strings representing table headers.
• values: Array of objects containing row values.
• props: Array of ITableProps defining additional properties for each row.

ITableProps Interface

• values: Array of ITableValues defining values for a single row.

ITableValues Interface

• title: Optional title for a specific cell value.
• key: Key from the object given in values in ITableData.
• type: Type of content to display in the cell ('IMAGE' or 'BUTTON').
• buttonText: Text for the button if type is 'BUTTON'.
• imageSource: Source file if type is 'IMAGE'.

Demo

Demo of ngx-dynamic-table