NgWaTable

The NgWaTable is a powerful library to create unique and basic table using Angular. The goal is to avoid code duplication while keeping the table flexible enough to handle different types of data. Basically, create a custom table as bellow,

Features

• Background styling in the headers,search and filters
• Text alignment in headers and columns(top, right, bottom, left)
• Style changes(text color, background color, padding)
• Filter Options
• Table Search bar
• Table data Sorting
• Table data Loader through ngx-skeleton-loader

Angular Version

Developed for version 18 .

Installation

npm install ng-wa-table

How To Use

1. Import NGX Skeleton loader npm library to your project.
2. Install Bootstrap 5 via CDN and jquery-3.5.1 into your project.
3. Install jquery-3.5.1 via CDN in your index.html file.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

4. Import the NgWaTableModule into your app.module.ts file like this,

  import { CommonModule } from '@angular/common';
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgWaTableModule } from 'projects/ng-wa-table/src/public-api';
  import { AppComponent } from './app.component';
  import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';

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

4. Then use the bellow code into your component.html file.

<ng-wa-table [isDataLoaded]="isDataLoaded" [tableHeaders]="tableHeaders" [tableColumns]="tableColumns" [tableData]="items" 
[noItemsAvailable]="noItemsAvailable" [headerFontSize]="'30px'" [bodyFontSize]="'14px'" [tableHeaderColor]="'#ECF3FF'" 
(onEditClick)="onEditClick($event)" (onDeleteClick)="onDeleteClick($event)"></ng-wa-table>

Remember:- Properties should be same but assign value names can be change.

Available Props

These properties can be used to customize your rows and columns of the table,

Name	Type	Description
tableHeaders	array	An array of objects that each describe a headers
tableColumns	array	An array of objects that each describe a each column
tableData	array	An array of objects that each describe a your table items/data
tableAction	array	An array of objects that each describe a actions
isDataLoaded	boolean	Show the loader
filterAvailability	boolean	Availability of Filter categories
filterSearchAvailability	boolean	Availability Search option
noItemsAvailable	string	Show message when no item is available in the table
itemSort	function	Function used to sort the items in the table
mainContainerPadding	string	Assign the values to main container padding
tableHeaderColor	string	Assign the color(Hex or name)
headerFontSize	string	Assign the size value (px)
headerTxtColor	string	Assign the text color (Hex or name)
bodyFontSize	string	Assign the size value (px)
bodyTxtColor	string	Assign the text color (Hex or name)
tableHeight	string	Assign the size value
onEditClick	function	Function used to edit data
onDeleteClick	function	Function used to delete data
onViewClick	function	Function used to view data
search	function	Function used to search the items in the table
searchBarColor	string	Assign the color(Hex or name)
searchBarTxtColor	string	Assign the text color (Hex or name)
searchPlaceholderColor	string	Assign the text color (Hex or name)
searchIconColor	string	Assign the icon color (Hex or name)
filterIconColor	string	Assign the icon color (Hex or name) to filter button
filterTextColor	string	Assign the text color (Hex or name) to filter button
filterBackgroundColor	string	Assign the background color (Hex or name) to filter button
filterTags	array	Array of strings
tagsColor	string	Assign the tag color (Hex or name) to filter tags
tagActiveTextColor	string	Assign the text color (Hex or name)
tagInActiveTextColor	string	Assign the text color (Hex or name)
tagPressed	function	Function to Filter tag
tagActive	String	Assign the active tag for Filter box
checkboxSelector	function	Function used to get all checkboxes selected
selectedItems	array	Function used to get all checkboxes selected
selectItem	function	Function used to get a checkbox that selected

Table Headers

In here you need to config an object consist with these properties:

• id - Used to identify the object unique
• header - Name of the table column header and if you don't want to mention the a name then leave it as a empty string
• sort(Boolean) - Boolean value that indicate sort icons should display or not.
• type - Only use when you have actions like edit, delete or view.
• classType - To align the header name specify the type. There are 3 types as,
  • tableHeader-left - Align the header to left.
  • tableHeader-right - Align the header to right.
  • tableHeader-center - Align the header to center.
  • actions - Align action icons to center.
• checkbox(Boolean) - This will enable checkbox and it will select all the checkboxes in the table rows.

  tableHeaders: Array<object> = [
    { id: 1, header: '', checkbox: true, classType: '' },
    { id: 2, header: 'SKU', classType: 'tableHeader-left' },
    { id: 3, header: 'Item Name', sort: false, classType: 'tableHeader-center',
    },
    { id: 4, header: 'Category', classType: 'tableHeader-center' },
    { id: 5, header: 'Item Type', classType: 'tableHeader-center' },
    { id: 6, header: 'Status', classType: 'tableHeader-center' },
    { id: 7, type: 'Action', classType: 'actions' },
  ];

Table Data

In the "tableData" property you can assigning an array of objects to show data in your table. It's look like this,

items = [
    {
      id: 300001,
      name: 'Chicken Fried Rice',
      image_url:
        'https://rs-menus-api.roocdn.com/images/062f785d-a54e-4789-9350-0e2e1a5ea1a2/image.jpeg',
      status: true,
      statusValue: 'Active',
      sku: '00123',
      categoryList: [
        {
          id: 200003,
          title: 'Fried Rice',
        },
      ],
      is_modifier: true,
    },

    {
      id: 300002,
      name: 'Vanilla Ice Cream',
      image_url:
        'https://rs-menus-api.roocdn.com/images/062f785d-a54e-4789-9350-0e2e1a5ea1a2/image.jpeg',
      status: false,
      statusValue: 'Inactive',
      sku: '00124',
      categoryList: [
        {
          id: 200003,
          title: 'Dessert',
        },
      ],
      is_modifier: false,
    },
]

Table Columns

In order to bind tableData values to each column, you can assign an object that consist with these properties:

• id - Used to identify the object unique
• header - Mention exact property name from your tableData array as the header and If it is an action column, then pass "action" as the header.
• type - There are different types of values in your tableData array. They can be numbers, titles, true or false values, arrays or a status label. In here you need to mention what type of data should bind to each column. Those types are,
  1. String - The values that doesn't change & display as it is in the tableData array.
  2. Array - If there is an array of objects.
  3. Boolean - If true or false deciding a value we need to show in the column.
  4. Status - If you need to show a label, then use this type.
  5. Checkbox - If you need to show a checkbox in every row.
• classType - To align the cell name specify the type. There are 3 types as,
  • tableColumnData-left - Align the cell data to left.
  • tableColumnData-right - Align the cell data to right.
  • tableColumnData-center - Align the cell data to center.
• check(Only needed if type is a Array or a Boolean) - You can define a function that specify what need to be do from the value you get. As in the below example, For the type Boolean, if it is true return the 'Modifier' or else return 'Item'.
• value - Mention a property from your tableData array, for the value that need to show inside the status label.

If Status label column exist then the object look like this,

 {
      id: 5,
      header: 'status',
      value: 'statusValue',
      type: 'Status',
      classType: 'tableDataStatus',
    },

These properties should be passed,

• header(boolean) - Mention exact property name from your tableData.
• type - Type will be status.
• value(String) - Mention exact property name from your tableData to display as the label value.

To get the data as in the example table image you need to assign column object like this,

  tableColumns: Array<object> = [
    { id: 1, header: 'id', type: 'Checkbox', classType: '' }, 
    { id: 2, header: 'sku', type: 'String', classType: 'tableColumnData-left' },
    {
      id: 3,
      header: 'name',
      type: 'String',
      classType: 'tableColumnData-center',
    },
    {
      id: 4,
      header: 'categoryList',
      type: 'Array',
      check: function (test) {
        for (let key of test) {
          return key.title;
        }
      },
      classType: 'tableColumnData-center',
    },
    {
      id: 5,
      header: 'is_modifier',
      type: 'Boolean',
      check: function (test) {
        return test ? 'Modifier' : 'Item';
      },
      classType: 'tableColumnData-center',
    },
    {
      id: 5,
      header: 'status',
      value: 'statusValue',
      type: 'Status',
      classType: 'tableDataStatus',
    },
    { id: 6, header: 'action'},
  ];

Table Actions

You need to pass an array of object and each object need to have these properties:

• id - Used to identify the object unique
• type - View, Edit and Delete. (Currently we are supporting only these 3 actions)
• fontAwesomeIcon - Mention the Font Awesome class for a particular icon.

Overall tableAction array should look like this,

 tableAction: Array<object> = [
    { id: '1', type: 'View', fontAwesomeIcon: 'fas fa-eye' },
    { id: '2', type: 'Edit', fontAwesomeIcon: 'fas fa-pen ' },
    { id: '3', type: 'Delete', fontAwesomeIcon: 'fas fa-trash' },
  ];

Filters

If you want to add filter option to the table then "filterAvailability" should be true. In order to work it properly these are the props that you need to send. They are,

• filterTags - You need to send a array of Strings which you need to add as filter options.
• tagPressed - Function to Filter tags
• tagActive - You need to pass 'All' as the Initial value for tagActive. After that, assign the return value of tagPressed function to tagActive.

In order to style the filter box you can include these properties,

• filterIconColor - Assign the icon color (Hex or name) to filter button
• filterTextColor - Assign the text color (Hex or name) to filter button
• filterBackgroundColor - Assign the background color (Hex or name) to filter button
• tagsColor - Assign the tag color (Hex or name) to filter tags
• tagActiveTextColor - Assign the text color (Hex or name)
• tagInActiveTextColor - Assign the text color (Hex or name)

Support this package!

If you like this package and want to support it, you can give it a review or a github star ⭐

Also, PR's are welcome!

License

MIT