#
!title

Sg-Table Component

This package is used to load table from api returning the JSON Array.

You just need to provide the data-url which returns JSON Array, It will load and display table with pagination, search, print options. You can also customize the options and themes based on your needs.

Getting Started

Use the below command to add your package in your application

``



npm i sg-json-table



you can consume it in your application as shown below:





Options



| Property      | Attribute        |  Type      | Description                                                           |

| ------------- | ---------------- | --------- | :-----------------------------------------------------------------:    |

|

dataUrl | data-url | string

  | (Required) API url to load the data as an JSON Array                         |

|

info | info| boolean

  | (Optional) It gives the end user information about what is being shown in the table, Default: false    |

|

ordering | ordering | boolean

  | (Optional) Enable or disable ordering of columns, Default: false   |

|

paging | paging | boolean

  | (Optional) Enable and disable the pagination button and total entries dropdown. Total number of records shown in the page is 10 as default, Default: false    |

|

print | print | boolean

  | (Optional) Enable and disable the print options. It will provide options to print the current page. Default: false    |

|

searching | searching | boolean

  | (Optional) Enable or disable the search filter textbox. Default: false    |

|

theme | theme | string

 | (Optional) Used to change the background of the table header. You can use 3 themes . "red , green and blue". Default: White





Example:





!screenshot-1





Usage



Now we will see how to integrate this libiary in your applications.





Angular



Step 1:  Add an import to

main.js



import { defineCustomElements} from '../node_modules/sg-json-table/loader';



And somewhere near the bottom we'll call this function.



defineCustomElements();





Step 2: Next, in

app.module.ts add the CUSTOM_ELEMENTS_SCHEMA



import {CUSTOM_ELEMENTS_SCHEMA} from

@angular/core



and then



schemas: [

    CUSTOM_ELEMENTS_SCHEMA

]



Your

app.module.ts

 should look like this:



import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';



@NgModule({

  declarations: [],

  imports: [],

  schemas: [ CUSTOM_ELEMENTS_SCHEMA],

  providers: [],

  bootstrap: [AppComponent]

})



export class AppModule { }



Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.



Step 3: Now, in

app.component.html

 you utilize your new custom element.





$3



Step 1:

Now we'll add an import to

index.js



import { defineCustomElements} from '../node_modules/sg-json-table/loader';



And somewhere near the bottom we'll call this function.



defineCustomElements();



Step 2:

Next, in

app.js

 you utilize your new custom element



function App() {

  return (

    

      

        

        

        

        

      

    

  );

}



$3

Add defineCustomElements to one of our main files. Specifically

main.js

 for Vue.



import { defineCustomElements} from '../node_modules/sg-json-table/loader';



And somewhere near the bottom we'll call this function.



defineCustomElements();









Next, in

App.Vue

 you consume the custom element.

Please Note:

 If you are using multiple component then you can define the defineCustomElements as shown below:



import { defineCustomElements as defineCustomElements1} from '../node_modules/sg-copyright/loader';

import { defineCustomElements as defineCustomElements2} from '../node_modules/sg-avatar/loader';

import { defineCustomElements as defineCustomElements3} from '../node_modules/sg-json-table/loader';

.

.

.

defineCustomElements1();

defineCustomElements2();

defineCustomElements3();

``
Click Here for live demo.

#
!title

Sg-Table Component

Getting Started

Use the below command to add your package in your application

``



npm i sg-json-table



you can consume it in your application as shown below:





Options



| Property      | Attribute        |  Type      | Description                                                           |

| ------------- | ---------------- | --------- | :-----------------------------------------------------------------:    |

|

dataUrl | data-url | string

  | (Required) API url to load the data as an JSON Array                         |

|

info | info| boolean

  | (Optional) It gives the end user information about what is being shown in the table, Default: false    |

|

ordering | ordering | boolean

  | (Optional) Enable or disable ordering of columns, Default: false   |

|

paging | paging | boolean

  | (Optional) Enable and disable the pagination button and total entries dropdown. Total number of records shown in the page is 10 as default, Default: false    |

|

print | print | boolean

  | (Optional) Enable and disable the print options. It will provide options to print the current page. Default: false    |

|

searching | searching | boolean

  | (Optional) Enable or disable the search filter textbox. Default: false    |

|

theme | theme | string

 | (Optional) Used to change the background of the table header. You can use 3 themes . "red , green and blue". Default: White





Example:





!screenshot-1





Usage



Now we will see how to integrate this libiary in your applications.





Angular



Step 1:  Add an import to

main.js



import { defineCustomElements} from '../node_modules/sg-json-table/loader';



And somewhere near the bottom we'll call this function.



defineCustomElements();





Step 2: Next, in

app.module.ts add the CUSTOM_ELEMENTS_SCHEMA



import {CUSTOM_ELEMENTS_SCHEMA} from

@angular/core



and then



schemas: [

    CUSTOM_ELEMENTS_SCHEMA

]



Your

app.module.ts

 should look like this:



import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';



@NgModule({

  declarations: [],

  imports: [],

  schemas: [ CUSTOM_ELEMENTS_SCHEMA],

  providers: [],

  bootstrap: [AppComponent]

})



export class AppModule { }



Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.



Step 3: Now, in

app.component.html

 you utilize your new custom element.





$3



Step 1:

Now we'll add an import to

index.js



import { defineCustomElements} from '../node_modules/sg-json-table/loader';



And somewhere near the bottom we'll call this function.



defineCustomElements();



Step 2:

Next, in

app.js

 you utilize your new custom element



function App() {

  return (

    

      

        

        

        

        

      

    

  );

}



$3

Add defineCustomElements to one of our main files. Specifically

main.js

 for Vue.



import { defineCustomElements} from '../node_modules/sg-json-table/loader';



And somewhere near the bottom we'll call this function.



defineCustomElements();









Next, in

App.Vue

 you consume the custom element.

Please Note:

 If you are using multiple component then you can define the defineCustomElements as shown below:



import { defineCustomElements as defineCustomElements1} from '../node_modules/sg-copyright/loader';

import { defineCustomElements as defineCustomElements2} from '../node_modules/sg-avatar/loader';

import { defineCustomElements as defineCustomElements3} from '../node_modules/sg-json-table/loader';

.

.

.

defineCustomElements1();

defineCustomElements2();

defineCustomElements3();

``
Click Here for live demo.