@my-ng-store/ngx-dynamic-table
v0.0.8
Published
Create tables with flexible structures based on user-defined data
Downloads
47
Maintainers
Readme
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: '[email protected]',
city: 'New York',
country: 'USA',
orders: 10,
totalSpent: 1200,
lastPurchase: '2023-07-15',
},
{
id: 2,
name: 'Jane Smith',
age: 32,
email: '[email protected]',
city: 'Los Angeles',
country: 'USA',
orders: 24,
totalSpent: 2800,
lastPurchase: '2023-08-02',
},
{
id: 3,
name: 'Robert Johnson',
age: 45,
email: '[email protected]',
city: 'Chicago',
country: 'USA',
orders: 16,
totalSpent: 1900,
lastPurchase: '2023-07-28',
},
{
id: 4,
name: 'Emily Brown',
age: 28,
email: '[email protected]',
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'.