dynamic-mat-table v1.5.40
Dynamic Table for Angular
Online Demo
You can view the table in stackblitz here:
https://stackblitz.com/edit/angular-ivy-wge9lp
version (1.3.2):
https://stackblitz.com/edit/angular-ivy-s4ne42
A full demo can be found on the github repository.
Getting Started
1. First you need to install with npm:
Write npm i dynamic-mat-table
in your terminal to install the package
2. After installation you need to include DynamicMatTableModule
in your module imports:
import { DynamicMatTableModule } from 'dynamic-mat-table';
...
imports: [
DynamicMatTableModule
],
...
How Use The Table
Creating the table html element
first you need to write the html element like so:
<dynamic-mat-table
tableName="my-table"
[columns]="columns"
[setting]="setting"
[dataSource]="dataSource$"
></dynamic-mat-table>
Full Specification:
<dynamic-mat-table
tableName="demo_table"
[scrollStrategyType]="scrollStrategyType"
[contextMenuItems]="contextMenuItems"
[showReload]="showReloadData"
[direction]="direction"
[expandComponent]="expandComponent"
[rowHeight]="rowHeight"
[columns]="fields"
[pending]="pending"
[setting]="setting"
[sticky]="stickyHeader"
[dataSource]="dataSource$"
[pagingMode]="paginationMode"
[pagination]="pagination"
[showNoData]="showNoData"
[printConfig]="printConfig"
[rowSelectionMode]="rowSelectionMode"
[rowSelectionModel]="selectionModel"
[showProgress]="showProgress"
[rowContextMenuItems]="contextMenuItems"
(onTableEvent)="tableEvent_onClick($event)"
(onRowEvent)="rowEvent_onClick($event)"
[class.conditional-class]="conditinalClass"
(settingChange)="table_onChangeSetting($event)"
(rowSelectionChange)="table_onRowSelectionChange($event)"
>
</dynamic-mat-table>
by binding the properties you can set columns, set the table settings , set a datasource and more to the table
Setting the columns
to set the columns you first need to import TableField
and creat a porpery that takes this type as an arry like so:
import { TableField } from 'dynamic-mat-table'
...
export class MyTable {
columns:TableField<any>[] = [];
}
then you can set each column as an object of this arry
...
const colusmnsConfig:TableField<any>[] = [
{
name: 'column-one', //this is a key for data
header: 'column-one', //this is the name displayed
type:'number', //type of the data
},
{
name:'column-two',
header:'column-two',
type:'number',
},
...
];
The full column type is defined as follow:
export interface TableField<R extends TableRow> extends AbstractField {
classNames?: string;
rowClass?: string | AtClassFunc;
customSortFunction?: AtSortFunc<R>;
customFilterFunction?: AtSortFunc<R>;
toPrint?: ToPrint;
toExport?: ToExport;
}
export interface AbstractField {
index?: number;
name: string; //data key
type?: FieldType; //data type
width?: number; //width of the column
header?: string; //displayed name of the column
isKey?: boolean; // turn column in to unique key column
inlineEdit?: boolean; // allows column to have inline edit
display?: FieldDisplay; // allow column to be hidden or visible
sticky?: FieldSticky; // allow column to stick in horizontal scrolling
filter?: FieldFilter; // sets data filtering mode(none: hidden filter button)
sort?: FieldSort; // set data sorting mode( none: hidden sort button)
cellClass?: string; // set a class for column cells
cellStyle?: any; //set a style for column cells
icon?: string; // displays a mat-icon in column header
iconColor?: string; // set a color for column header icon
dynamicCellComponent?: any; // set the component used in column cells
draggable?: boolean; // allows column to be rearranged with drag and drop
// filterable?: boolean; // allows column to filter its data (shows filter button)
clickable?: boolean; // allows column to have a function when clicked
clickType?: 'cell' | 'label' | 'custom'; // sets the click ability region
printable?: boolean; // allows column to print its data
exportable?: boolean; // allows column data to be exported
enableContextMenu?: boolean; // enables context menu in columns
rowSelectable?: boolean; // Coming soon...
footer?: FooterCell[]; // creates footers for column
cellEllipsisRow?: number; // maximum number of cells shown before ellipses
cellTooltipEnable?: boolean; // allows column cell to have a tooltip
headerEllipsisRow?: number; // maximum number of rows shown in column before ellipses
headerTooltipEnable?: boolean; // allows column header to have a tooltip
option?: any; // a spacial object for storing data state (like saving in inline edit)
categoryData?: any[]; // Coming soon...
toString?: (column: TableField<any>, row: TableRow) => string; // turns column data to a string (used mostly for exporting data)
customSort?: (column: TableField<any>, row: any) => string; // allows you customize data sorting in column
}
Ceateing a data source
after setting the columns you need to set the data you want to use in your table.
Your data source must be a BehaviourSubject<any[]>
so in order to creat a data source you must do so like wise:
import { BehaviourSubject } from 'rx-js';
...
type dataType = {...};
const data:dataType[] = [
{ "row": 1, "name": "Element #4", "weight": "65 KG", "color": "Magenta", "brand": "Zanjan Benz", "type": "Van" }, ...];
...
export class MyTable implements OnInit {
public dataSource$: BehaviorSubject<any[]>;
constructor(){}
ngOnInit(){
this.dataSource$.next(data);
}
}
Configureing the table settings
next thing is configuring the table settings.
to do so we need to create a property that takes the TableSetting
type like so:
import { TableSetting } from 'dynamic-mat-table';
...
export class MyTable {
settings:TableSettings = {};
}
then we can set the values of this object to customize our table.
For Exmaple:
const tableSettinsConfig:TableSetting = {
direction: 'ltr',
visibleActionMenu: actionMenu,
rowStyle: {
'background-color': '#70e181',
color: 'ffffff',
},
alternativeRowStyle: {
'background-color': 'afafaf',
color: '55fab3',
},
autoHeight: true,
}
the full interface is described below:
export interface TableSetting {
direction?: Direction; // sets the directopn of the table
columnSetting?: AbstractField[]; //
visibleActionMenu?: VisibleActionMenu; // configures the actoin menu
visibleTableMenu?: boolean; // controls the table men's visablity
alternativeRowStyle?: any; // sets a style for the odd rows
normalRowStyle?: any; // sets a style for the even rows
scrollStrategy?: TableScrollStrategy; // sets a scroll strategy
rowStyle?: any; //
enableContextMenu?: boolean; // controls the context menu visablity
autoHeight?: boolean; // allows the table to automaticly controls its height
saveSettingMode?: 'simple' | 'multi' | 'none'; // controls the saving mode
settingName?: string; // name for the setting
settingList?: TableSetting[]; //
currentSetting?: string; //
}
Adding a paginator
adding a paginator is just like columns and setting.
first we add the Property with the TablePagination type then we configure it like so:
import { TablePagination } from 'dynamic-mat-table';
...
export class MyTable {
pagination:TablePagination = {};
}
the full description for the TablePagination is as below:
export interface TablePagination {
length?: number; // total number of data records
pageIndex?: number; // initial page
pageSize?: number; // number of rows in each page
pageSizeOptions?: number[]; // page ination options
showFirstLastButtons?: boolean; // controls the first/last button display
}
How to add international
to support new language you must declare new class and implement LanguagePack for example this is persian language:
import { MatPaginatorIntl } from "@angular/material/paginator";
import {
FilterLabels,
LanguagePack,
MenuLabels,
TableLabels,
} from "dynamic-mat-table";
export class PersionLanguage implements LanguagePack {
constructor() {}
menuLabels: MenuLabels = {
saveData: "ذخیره داده ها ",
columnSetting: "تنظیمات ستون ها ",
saveTableSetting: "ذخیره تنظیمات جدول",
clearFilter: "فیلتر را پاک کنید",
jsonFile: "Json فایل",
csvFile: "CSV فایل",
printTable: "چاپ جدول",
filterMode: "نوع فیلتر",
filterLocalMode: "محلی",
filterServerMode: "سرور",
sortMode: "حالت مرتب سازی",
sortLocalMode: "سمت کاربر",
sortServerMode: "سمت سرور",
printMode: "حالت چاپ",
printYesMode: "بله",
printNoMode: "خیر",
pinMode: "حالت پین ",
pinNoneMode: "هیچ کدام",
pinStartMode: "شروع",
pinEndMode: "پایان",
};
paginatorLabels: MatPaginatorIntl = {
changes: null,
itemsPerPageLabel: "ایتم های هر صفحه:",
nextPageLabel: "صفحه بعدی:",
previousPageLabel: "صفحه قبلی:",
firstPageLabel: "اولین صفحه:",
lastPageLabel: "آخرین صفحه:",
getRangeLabel: (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) {
return `0 از ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex =
startIndex < length
? Math.min(startIndex + pageSize, length)
: startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} از ${length}`;
},
};
tableLabels: TableLabels = {
NoData: "هیچ رکوردی پیدا نشد",
};
filterLabels: FilterLabels = {
Clear: "پاک کردن",
Search: "جستجو",
And: "و",
Or: "یا",
/* Text Compare */
Text: "متن",
TextContains: "دربرگرفتن",
TextEmpty: "خالی بودن",
TextStartsWith: "شروع شدن با",
TextEndsWith: " پایان گرفتن با",
TextEquals: "مساوی بودن",
TextNotEmpty: "خالی نبودن",
/* Number Compare */
Number: "تعداد",
NumberEquals: "مساوی",
NumberNotEquals: "مساوی نبودن",
NumberGreaterThan: " بزرگ تر از",
NumberLessThan: "کم تر از ",
NumberEmpty: "خالی بودن",
NumberNotEmpty: "خالی نبودن",
/* Category List Compare */
CategoryContains: "در برگرفتن",
CategoryNotContains: "در بر نگرفتن",
/* Boolean Compare */
/* Date Compare */
};
}
and passed this class to grid so :
providers: [{ provide: TableIntl, useFactory: languageIntl }];
And
export function languageIntl() {
return new PersionLanguage();
}
6 months ago
9 months ago
10 months ago
9 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
2 years ago
2 years ago
1 year 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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago