@squareconcepts/smart-table v1.0.0
UNDER CONSTRUCTION
This package is still under construction and isn't working properly.
SQUAREConcepts Smart table
Provides a smart datatable that displays data received via http requests.
Compatible
This version of smart table is compatible with
todo
Install
To install this package simply run
npm install @squareconcepts/smart-table
In case of any dependency errors try installing without dependencies. In this case you have to install @sreyaj/ng-shimmer
manually.
npm install @squareconcepts/smart-table @sreyaj/ng-shimmer --legacy-peer-deps
Usage
Module
// root app NgModule
import {SmartTableModule} from "@squareconcepts/smart-table";
imports: [
SmartTableModule,
]
Or in case you would like to change any of the options
// root app NgModule
import {SmartTableModule} from "@squareconcepts/smart-table";
imports: [
SmartTableModule.forRoot(
{
createNewButtonText: 'Create',
actionsColumnTitle: 'Actions',
searchButtonText: 'Search',
perPageText: 'Per page',
pageText: 'Page',
totalText: 'Total',
previousText: 'Previous',
nextText: 'Next'
})
]
Component
import {Component, OnInit, ViewChild} from '@angular/core';
import {SmartTableComponent} from '@squareconcepts/sc-smart-table';
import {ApiService} from './services/api.service';
@Component({
selector: 'app-table-page',
templateUrl: './table-page.component.html',
styleUrls: ['./table-page.component.scss']
})
export class TablePageComponent implements OnInit {
@ViewChild('smartTable') private smartTable: SmartTableComponent; //Optional
public settings = {
actionsColumnTitle: 'Other title', //Can be set to default in module
defaultSorting: {
column: 'id',
direction: 'ASC'
},
searchButtonText: 'Search',
createNewButtonText: 'Create new',
customCardButtons:[{
buttonContent: '<i class="fa fa-download"></i> Export data',
loadingState: boolean,
method: () => {
//do something
},
},],
columns: {
title: {
title: 'Title',
filter: true
},
description: {
title: 'Description',
filter: true
},
create_at: {
title: "Create date",
type: 'date|dd-MM-yyy', // First is type name second is format as Angular Date
filter: {
display: true,
type: 'date'
},
},
time: {
title: 'Van',
type: 'date|HH:mm',
filter: {
display: true,
type: 'time'
},
valuePrepareFunction: (cell, row) => {
return row.created_at;
},
},
some_html: {
title: 'Html in field',
type: 'html',
sort: false,
filter: true,
valuePrepareFunction: (cell, row) => {
return '<p> with some html</p>'
},
}
},
create: true,
edit: true,
delete: {buttonContent: '<i class="fa fa-trash"></i>'},
actions: [ //Custom buttons that will be added to the actions column
{
title: '<p>this can contain html</p>',
method: (row) => {
//do something on click. Function will provide the entire row.
},
}
]
};
constructor(
public apiService: ApiService
) {
}
editClicked(rowId: number){
//do something when edit is clicked
}
deleteClicked(rowId: number){
//do something when delete is clicked
}
createClicked(){
//do something when create is clicked
}
}
Service
Make sure the service implements ScSmartTableInterface
import {ScSmartTableInterface} from "@squareconcepts/sc-smart-table.interface";
@Injectable({
providedIn: 'root'
})
export class ServiceName implements ScSmartTableInterface {
//impement methods
}
Options
<sc-smart-table
[title]="'title'"
[noItemsFoundString]="'No items found'"
[service]="service"
[settings]="settings"
(editClicked)="editClicked($event)"
(createClicked)="creteClicked($event)"
(deleteClicked)="editClicked($event)"
#smartTable
></sc-smart-table>
Explanation of options
Option | Type | Required | Description |
---|---|---|---|
title | string | true | The title of the page |
notItemsFoundString | string | false | String shown in case of no items |
settings | object | true | Settings object that will be used to build the table. |
service | ScSmartTableInterface | true | A service to get the data from your api. The service has to implement the ScSmartTableInterface |
#smartTableComponent | Identifier | false | Can be edit to perform a method on the smart table |
Explanation of methods
Function | Parameter | Description |
---|---|---|
CreateClicked | boolean | Wil be emitted when the new item button is clicked |
editClicked | rowId: number | Wil be emitted when the edit button is clicked |
deleteClicked | rowId: number | Wil be emitted when the delete button is clicked |
Settings options
Field | Required | Options | Description |
---|---|---|---|
actionsColumnTitle | false | Any String | Title displayed in the table head in the actions column. Default will be Actions This can be change in the Module.forRoot method |
createButtonText | false | Any String | Text that is showed in the create button. Default: Create new |
searchButtonText | false | Any String | Text that is showed in the search button. Default: Search |
actionsColumnTitle | false | Any String | Title displayed in the table head in the actions column. |
customCardButtons | false | [] of customCardActions {buttonContent: string, loadingState: boolean, method: () => {}} | Buttons that will be displayed at the top right corner of the card |
defaultSorting | false | {column: 'id', direction: 'ASC'} | Adds default sorting to the request on the initial data. |
columns | true | Fields is in See Colums options | Fields to fill the table See Colums options |
create | true | true or false | Whether or not to display the add new button |
edit | true | true/false or {buttonContent: string} (html is allowed) | Whether or not to display the edit button and/if with content |
delete | true | true/false or {buttonContent: string} (html is allowed) | Whether or not to display the delete button and/if with content |
actions | false | [] of actions {title: string, method: Function} | Custom actions that need to be added to the actions column. |
rowClassFunction | false | (row) => {//function} | class will be added to the row. |
Column Options
Field | Required | Options | Description |
---|---|---|---|
title | true | true or false | Title will be displayed in the table had. |
filter | false | true or false or {display: boolean, type: string} Default: true | Will display a input on to filter. |
sort | false | true or false | Can be sorted by this field. |
type | false | date [pipe] dd-MM-yyyy or rating or html | what type of data will be displayed in the column. |
valuePrepareFunction | false | (cell, row) => {return value you like to display} | The data needs to be displayed differently. |
Filter Type Options
Option | Description | Example |
---|---|---|
list | Shows a dropdown | filter: { 'type': 'list', 'config': { 'placeholder': '', 'selectText': 'Select an item', 'list': [{title: 'first item', value: 'item 1'}]}}, |
date | Shows a date field | filter: {type: date: display: true} |
time | Shows time field | filter: {type: time: display: true} |
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago