Angular Datatable SM

Dynamic Datatable SM generation based on your requirement i.e. Table heading with number of columns & its table data.

src="projects/angular-datatable-sm/src/lib/assets/Screeenshot/data-table.gif" />

src="projects/angular-datatable-sm/src/lib/assets/Screeenshot/data-table1.PNG" />

Installation

``sh
npm i angular-datatable-sm
`

Usage

Import

$3

`ts
import { AngularDatatableSmModule } from 'angular-datatable-sm';

@NgModule({
...
imports: [
...
AngularDatatableSmModule
],
...
})
`

$3

Create a service file in your project & copy the template provided for your project - table-data.service


or with mock JSON available below: Service File with JSON



`terminal
ng generate service services/tableData/table-data
`



& import it inside component where you want to use our "angular-datatable-sm" package:

`ts
import { TableDataService } from './services/tableData/table-data.service';

constructor(public tableDataService: TableDataService) { }
`

make sure "public tableDataService: TableDataService" must be public to pass to package.

Fundamental Usage

$3

Add in same component html file, where you have imported "TableDataService":

`html
[pagination]="true"
[itemsPerPage]="5"
[tableDataService]="tableDataService">

`

Fundamentals

| Property/Method | Type | Default | Description |
| ---------------- | :-----: | :-------: | -------------------------------------------------------------------------------------- |
| pagination | boolean | false | Parent flag to showcase pagination for data table |
| itemsPerPage | number | 10 | Mandatory field with "pagination" to show number of items per page |
| tableDataService | service | - | Service file having api calling methods & return observale which can subscribe further |

Configuration - JSON/Object

$3

Values with dummy data is mentioned below, to recieve as required response:
Service file methods must return below format as response, to pass & "angular-datatable-sm" to work properly

`ts
let tableData = {
data: {
headers: [
{ id: 1, name: 'id', checked: true },
{ id: 2, name: 'name', checked: true },
{ id: 3, name: 'age', checked: false },
{ id: 4, name: 'email', checked: true },
{ id: 4, name: 'progress', checked: true },
{ id: 4, name: 'emp_number', checked: false },
{ id: 4, name: 'ratings', checked: false },
],
entries: [
{ id: 1, name: 'John Doe', age: 30, email: 'john@example.com', progress: 10, emp_number: '245', ratings: 4.5 },
{ id: 2, name: 'Jane Doe', age: 28, email: 'jane@example.com', progress: 50, emp_number: '246', ratings: 4 },
{ id: 3, name: 'Michael Smith', age: 35, email: 'michael@example.com', progress: 20, emp_number: '247', ratings: 1.5 },
{ id: 4, name: 'Emily Johnson', age: 25, email: 'emily@example.com', progress: 80, emp_number: '248', ratings: 2.25 },
{ id: 5, name: 'James Brown', age: 32, email: 'james@example.com', progress: 97, emp_number: '249', ratings: 3.58 },
{ id: 6, name: 'John Doe', age: 30, email: 'john@example.com', progress: 53, emp_number: '250', ratings: 3.50 },
{ id: 7, name: 'Jane Doe', age: 28, email: 'jane@example.com', progress: 91, emp_number: '251', ratings: 4 },
{ id: 8, name: 'Michael Smith', age: 35, email: 'michael@example.com', progress: 63, emp_number: '252', ratings: 4.5 },
{ id: 9, name: 'Emily Johnson', age: 25, email: 'emily@example.com', progress: 25, emp_number: '253', ratings: 4.85 },
{ id: 10, name: 'James Brown', age: 32, email: 'james@example.com', progress: 13, emp_number: '254', ratings: 5 }
],
permissions: {
searchVisibility: true,
exportToCsvVisibility: true,
filterTableHeadersVisibility: true,
filterBtnTableContentVisibility: true,
showcaseActionButtons: ['edit', 'delete']
},
dependentKeys: {
progressColumn: 'progress',
progressBarType: 'bar',
ratingsColumn: 'ratings',
filterColumn: 'name',
maxRating: 5,
editSaveActionButtonBgColor: '#007bff3b',
deleteActionButtonBgColor: '#ff73003b',
closeActionButtonBgColor: '#ff73003b'
},
extras: {
uncheckAllStatus: false,
dropdownButtonText: 'Table Columns',
filterBoxArrowStatus: true
}
},
status: 200,
message: "Fetched Successfully!"
};
``

or you can try it with json files importing in your service file as well:


Load Table Data JSON Link


Edit Table Data JSON Link


Delete Table Data JSON Link


& modify your Table Data Service file in this way: Delete Table Data JSON Link

Properties

| Property | Type | Description |
| ---------------- | :--------: | ---------------------------------------------------------------------------------------- |
| headers | Arr of Obj | "id", "name" & "checked" are mandatory fields required to showcase a table heading|
| entries | Arr of Obj | Fields name should be exactly same to "header.name" value, to make table in sync |
| permissions | Object | It contains parent properties mostly for visibility - Show/Hide |
| dependentKeys | Object | It contains properties mostly dependent upon "permissions" properties |
| extras | Object | It contains extra properties to update/handle |

Properties - Elaborated & Its dependencies on each other:

1. permissions.searchVisibility:

Show/Hide Search functionality on the top of the table.

Dependent Properties: No

2. permissions.exportToCsvVisibility:

Show/Hide export to csv button.

Dependent Properties: No

3. permissions.filterTableHeadersVisibility:

Show/Hide filter for header button.

Dependent Property 1: "extras.dropdownButtonText"(Optional) - To update Dropdown Button text, otherwise default - "Table Columns"

Dependent Property 2: "extras.uncheckAllStatus" - To maintain uncheck All status in overall Table for headers dropdown.

4. permissions.filterBtnTableContentVisibility:

Show/Hide filter icon for column wise filteration.

Dependent Properties: "dependentKeys.filterColumn" - To add column wise filter functionality to the table & mention particular field name from "entries" - Array of Object, likewise - "name".

5. permissions.showcaseActionButtons:

Mention 'edit' to enable edit functionality & 'delete' to enable delete button in Array.

Dependent Properties: "dependentKeys.editSaveActionButtonBgColor", "dependentKeys.deleteActionButtonBgColor" & "dependentKeys.closeActionButtonBgColor"(optionals) - To add background colors to button, by default transparent.

6. dependentKeys.progressColumn:

Mention column/property - exact field from "entries", to enable progressbar to particular column/field. It should be numeric value.

Dependent Properties: "dependentKeys.progressBarType" - "bar" or "circle" to represent in such form.

7. dependentKeys.ratingsColumn:

Mention column/property - exact field from "entries", to enable ratings to particular column/field (Gained ratings). It should be numeric value.

Dependent Properties: "dependentKeys.maxRating" - Maximum Stars to represent.

8. extras.filterBoxArrowStatus:

Show/Minimize Filter box at the top of the table, on load.

Dependent Properties: No

Author

You can contact me via. mail for any modiciations/updations for this package.


Suraj Motwani - Email: suraj.motwani1306@gmail.com

License

Dynamic Datatable SM is available under the MIT license. See the LICENSE file for more info.