Angular Datatable SM

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

Installation

npm i angular-datatable-sm

Usage

Import

Step 1:

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

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

Step 2:

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

ng generate service services/tableData/table-data

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

Step 3:

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

<lib-angular-datatable-sm
  [pagination]="true"
  [itemsPerPage]="5"
  [tableDataService]="tableDataService">    <!-- Passing Service you have created-->
</lib-angular-datatable-sm>

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

Step 4:

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

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: '[email protected]', progress: 10, emp_number: '245', ratings: 4.5 },
      { id: 2, name: 'Jane Doe', age: 28, email: '[email protected]', progress: 50, emp_number: '246', ratings: 4 },
      { id: 3, name: 'Michael Smith', age: 35, email: '[email protected]', progress: 20, emp_number: '247', ratings: 1.5 },
      { id: 4, name: 'Emily Johnson', age: 25, email: '[email protected]', progress: 80, emp_number: '248', ratings: 2.25 },
      { id: 5, name: 'James Brown', age: 32, email: '[email protected]', progress: 97, emp_number: '249', ratings: 3.58 },
      { id: 6, name: 'John Doe', age: 30, email: '[email protected]', progress: 53, emp_number: '250', ratings: 3.50 },
      { id: 7, name: 'Jane Doe', age: 28, email: '[email protected]', progress: 91, emp_number: '251', ratings: 4 },
      { id: 8, name: 'Michael Smith', age: 35, email: '[email protected]', progress: 63, emp_number: '252', ratings: 4.5 },
      { id: 9, name: 'Emily Johnson', age: 25, email: '[email protected]', progress: 25, emp_number: '253', ratings: 4.85 },
      { id: 10, name: 'James Brown', age: 32, email: '[email protected]', 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: [email protected]

License

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