@smartbit4all/table
v1.5.72
Published
These packages must be updated in case of a new version:
Downloads
42
Keywords
Readme
Smart Table
References
These packages must be updated in case of a new version:
How to use
Installation
Go to your project, open the terminal and use the following command:
npm i @smartbit4all/table
Then import it in the AppModule:
app.module.ts:
import { SmartformModule } from '@smartbit4all/form';
...
@NgModule({
declarations: [...]
imports: [
...
SmartformModule,
]
...
})
Usage
example.component.html:
<smarttable [smartTable]="exampletable"></smarttable>
example.component.ts:
export class SelectFolderContentComponent {
exampleTable: SmartTable<T>;
constructor() {
this.setUpTable();
}
setUpTable(): void {
let tableData: T[] =
[
{
tableData1: 'Table Data 1',
tableData2: 'Table Data 2',
tableData3: 'Table Data 3',
optionsToBind: [ 'Button1', 'Button2' ]
},
...
];
// Simple table without tableData3
this.table = new SmartTable<T>(
tableData
SmartTableType.INHERITED,
[
{
label: 'Table Header 1',
propertyName: 'tableData1'
},
{
label: 'Table Header 2',
propertyName: 'tableData2'
},
{
label: '',
propertyName: 'tableData3',
isHidden: true
},
],
);
// Checkbox table without tableData3
this.table = new SmartTable<T>(
tableData
SmartTableType.CHECK_BOX,
[
{
label: 'Table Header 1',
propertyName: 'tableData1'
},
{
label: 'Table Header 2',
propertyName: 'tableData2'
},
{
label: '',
propertyName: 'tableData3',
isHidden: true
},
],
);
// Custom order
this.table = new SmartTable<T>(
tableData
SmartTableType.CHECK_BOX,
[
{
label: 'Table Header 3',
propertyName: 'tableData3',
},
{
label: 'Table Header 1',
propertyName: 'tableData1'
}
{
label: 'Table Header 2',
propertyName: 'tableData2'
},
],
);
// Table with options
this.table = new SmartTable<T>(
tableData
SmartTableType.INHERITED,
[
{
label: 'Table Header 1',
propertyName: 'tableData1'
},
{
label: 'Table Header 2',
propertyName: 'tableData2'
}
],
undefined,
undefined,
[
{
label: 'Example option',
callback: () => {},
icon: 'remove'
}
]
);
// Table with menu button
this.table = new SmartTable<T>(
tableData
SmartTableType.INHERITED,
[
{
label: 'Table Header 1',
propertyName: 'tableData1'
},
{
label: 'Table Header 2',
propertyName: 'tableData2'
},
{
label: '',
propertyName: 'my_menu',
buttons: [
{
type: SmartTableButtonType.MENU,
callback: this.doSomething.bind(this),
icon: 'more_vert',
menuItemButtonsPropertyName: 'optionsToBind',
translator: this.buttonTranslator.bind(this),
args: ['exampleArg']
}
]
}
],
);
}
buttonTranslator(value: string): string {
// return the readable version of value
}
doSomething(args: any, element: any, value: any): void { ... }
}
Example output for Simple table without tableData3: | Table Header 1 | Table Header 2 | | -------------- | -------------- | | Table Data 1 | Table Data 2 | |
Example output for Checkbox table without tableData3:
| [ ] | Table Header 1 | Table Header 2 | | --- | -------------- | -------------- | | [x] | Table Data 1 | Table Data 2 |
|
Example output for Custom order: | Table Header 3 | Table Header 1 | Table Header 2 | | -------------- | -------------- | -------------- | | Table Data 3 | Table Data 1 | Table Data 1 | |
Example output for table with Options: | Table Header 1 | Table Header 2 | Options | | -------------- | -------------- | --------| | Table Data 1 | Table Data 2 | ... -> Example option |
In order to get the selected values of a Checkbox Smart Table, you can simply use the SmartTable property:
example.component.ts:
getSelectedRows(): void {
let selectedRows: SelectionModel<T> = this.table.selection;
}
Version logs
@smartbit4all/table v1.5.20
Type: Update
Table menu fix.
@smartbit4all/table v1.5.19
Type: Update
The SmartTableInterface
got a isRowDisabledPropertyName property which helps to disable rows with that property. The type of the property should be boolean.
export interface SmartTableInterface<T> {
...
isRowDisabledPropertyName?: string;
}
@smartbit4all/table v1.5.18
Type: Update
Row and row double click is supported in tables with checkboxes.
@smartbit4all/table v1.5.16
Type: Update
The constructor of the SmartTable
contains a config property which is a type of SmartTableInterface<T>
.
export class SmartTable<T> implements SmartTableInterface<T> {
constructor(config: SmartTableInterface<T>) {
...
}
}
@smartbit4all/table v1.5.2
Type: Bugfix
The Cannot convert undefined or null to object bug throwed by the getPropertyNamesDeeply
function has been solved.
@smartbit4all/table v1.5.1
Type: Update
Double click events are supported.
export interface SmartTableInterface<T> {
...
onRowDoubleClick?: (row: T) => void;
}
@smartbit4all/table v1.5.0
Type: Update
From now on the SmartTable
can work with multi level objects.
Example:
export interface MyInnerObject {
myInnerProperty: string;
}
export interface MyObject {
myProperty: MyInnerObject;
}
let exampleVariable: MyObject = {
myProperty: {
myInnerProperty: 'example :)'
}
}
...
new SmartTable(
[exampleVariable],
SmartTableType.INHERITED,
[{
label: 'My inner property',
propertyName: 'myProperty.myInnerProperty'
}]
);
@smartbit4all/table v1.4.2
Type: Update
@smartbit4all/icon
support.
@smartbit4all/table v1.4.1
Type: Feature
The SmartTableButton
in SmartTableButtonType.MENU
mode used to be identical in each rows since its descriptor was defined statically. This update makes available to use unique menus in each row depending on the row itself.
export interface SmartTableButton {
...
menuItemButtonsPropertyName?: string;
translator?: (label: string) => string;
}
@smartbit4all/table v1.3.1
Type: Feature
From now on the max number of selectable rows can be determined.
@smartbit4all/table v1.3.0
Type: Update
The SmartTable with checkbox can use all the abilities of the normal table.
@smartbit4all/table v1.2.0
Type: Feature
From now on expandable table row with custom component is supported by the Smarttable
. In order to use this new feature set the expandable and expandedComponent properties when creating the table.
export interface SmartTableInterface<T> {
...
expandable?: boolean,
expandedComponent?: any
}
The provided component has to have an @Input()
called rowData, which gets the object of the selected row.
example.component.ts:
export class ExampleComponent implements OnInit {
@Input('rowData') rowData: any;
...
}
@smartbit4all/table v1.1.13
Type: Feature
The SmartTableHeader
got a new property which helps i18n or just simply convert a string to another.
export interface SmartTableHeader {
...
translator?: (value: string) => string;
}
@smartbit4all/table v1.1.9
Type: Feature
The SmartTableHeader
got a new property which helps to insert an icon into a row.
export interface SmartTableHeader {
...
icon?: SmartTableIcon
}
export interface SmartTableIcon {
icon: string;
color?: ThemePalette;
cssClass?: string;
}
@smartbit4all/table v1.1.8
Type: Feature
From now on hover effect can be applied to Smarttable
rows by setting the hover property to true. The css class can be overriden in the styles.css of the client.
styles.css:
.smartTableRowHover:hover { ... }
@smartbit4all/table v1.1.6
Type: Update
Smart-toolbar option has been removed. New inline button option added.
Changes:
export interface SmartTableHeader {
propertyName: string;
label: string;
isHidden?: boolean;
properties?: SmartTableHeaderProperties;
buttons?: SmartTableButton[]; <======== new button option
}
export interface SmartTableButton {
icon?: string;
label?: string;
color?: ThemePalette;
type: SmartTableButtonType;
menuItemButtons?: SmartTableButton[];
callback?: (...args: any[]) => any;
args?: any[];
}
export enum SmartTableButtonType {
MENU = "MENU",
ICON = "ICON",
NORMAL = "NORMAL",
RAISED = "RAISED"
}
How to use this version: add buttons property to the customHeaders array
Menu button:
{
label: 'Operations',
propertyName: '',
buttons: [
{
label: Operation 1',
icon: '',
type: SmartTableButtonType.MENU,
menuItemButtons: [
{
label: 'Option 1',
icon: '',
callback: this.yourFunction.bind(this),
type: SmartTableButtonType.NORMAL,
args: ["Menu item"]
}
],
color: 'primary',
}
]
},
Normal or Icon button:
{
label: 'Operations',
propertyName: '',
buttons: [
{
label: Operation 1',
callback: this.yourFucntion.bind(this),
icon: '',
type: SmartTableButtonType.RAISED OR type: SmartTableButtonType.ICON
color: 'warn',
args: ["arg"]
}
]
},
@smartbit4all/table v1.1.1
Type: Feature
This update contains a major change which makes the SmartTable
to support custom datetimes and icons with conditions.
The SmartTableHeader
got a new property called properties:
export interface SmartTableHeader {
propertyName: string;
label: string;
isHidden?: boolean;
properties?: SmartTableHeaderProperties;
}
With the SmartTableHeaderProperties
you can set up the behaviour of any column.
In case of a DATE, TIME or DATETIME you can use the default formats provided by the package, however, it can be overrided by the dateFormat property.
With the icons property you can set any Material icon, moreover the icon can be set for a specific condition.
export interface SmartTableHeaderProperties {
type: SmartTableHeaderPropertyType;
dateFormat?: string;
icons?: SmartTableHeaderIcons[];
}
The SmartTableHeaderPropertyType
helps to set the desired output type.
export enum SmartTableHeaderPropertyType {
DATE, // yyyy-MM-dd
TIME, // hh:mm
DATETIME, // yyyy-MM-dd hh:mm
ICON,
}
The SmartTableHeaderIcons
helps to give conditions to a specific icon. Note that you can use only one of the conditions per SmartTableHeaderIcons object.
export interface SmartTableHeaderIcons {
icon: string;
showIconIfValueEqualsWithString?: string;
showIconIfValueEqualsWithNumber?: number;
showIconIfValueSmallerThanNumber?: number;
showIconIfValueBiggerThanNumber?: number;
showIconIfValueBoolean?: boolean;
}
@smartbit4all/table v1.0.5
Type: Feature
From now on rows can be highlighted by clicking on them. To use this feature simply set these two properties:
- highlightOnRowClick: boolean
- highlightClass: string
@smartbit4all/table v1.0.4
Type: Feature
This version contains two updates which both makes the SmartTable more easy to use.
- with the
tableOptionButtonDirection
you can set the direction of the dots in the more button - with the
onRowClick?: (row: T) => void;
you can set the onRowClick event with a custom function of yours
@smartbit4all/table v1.0.1
Type: Update
The package has been published.
@smartbit4all/table v0.1.7
Type: Feature
In this version the SmartTableComponent is able to use SmartToolbarComponent inside the table cells.
Modifications:
SmartTableComponent html
<div *ngIf="header === 'button'"> <smart-toolbar [toolbar]="element[header]"></smart-toolbar> </div>
Usage update:
To use this toolbar feature, the objects given in the tableRow array must have a SmartToolbar object inside a property named button.
Checkout the usage of the SmartToolbar: @smartbit4all/toolbar
@smartbit4all/table v0.1.4 - v0.1.6
Type: Feature
The update contains a new feature to SmartTable. In this version the package is able to generate buttons into the table cell.
Modifications:
SmartTableComponent html
New type represent a button:
export interface SmartTableButton { lable: string; icon?: string; onClick?: (args?: any[]) => void; }
Usage: The elements of the tableRow array have to contain a button property which is a SmartTableButton.
@smartbit4all/table v0.1.2 - v0.1.3
Type: Bugfix
The SmartTableHeader
had a bug which may have caused serious issues in case of a model property change.
A function described by the SmartTableInterface<T>
has been removed due to its lack of usage in the new version.
equalsIgnoreOrder: (a: string[], b: string[]) => boolean;
Instead of comparing all the properties to each other, property by property comparison has been introduced.
Old code snippet:
if (
this.customSmartTableHeaders &&
this.equalsIgnoreOrder(
this.tableHeaders,
this.customSmartTableHeaders.map((tableHeader) => tableHeader.propertyName)
)
) {
this.customSmartTableHeaders.forEach((tableHeader) => { ... }
}
New code snippet:
if (this.customSmartTableHeaders && this.customSmartTableHeaders.length) {
...
this.customSmartTableHeaders.forEach((tableHeader) => {
if (originalHeaders.includes(tableHeader.propertyName) && !tableHeader.isHidden) { ... }
}
}
@smartbit4all/table v0.1.1
Type: Feature
With this update you can easily change the order of your smartTable with custom headers.
A new SmartTableHeader type has been introduced, with which the order and visibility can be set.
The SmartTableHeader
export interface SmartTableHeader {
propertyName: string;
label: string;
isHidden?: boolean;
}
Example for creating a new SmartTable:
new SmartTable(
rows,
SmartTableType.INHERITED,
[
{
propertyName: 'uuid',
label: '',
isHidden: true
},
{
propertyName: 'name',
label: 'Full name',
}
]
);
@smartbit4all/table v0.0.3
Type: Feature
Now images can be added to the SmartTable.
In order to use this new ability, the model, which is used in the SmartTable, must contain an img: string
property which is the path of the image.
Do not forget to add the 'img' to the customTableHeaders
at the proper position.
@smartbit4all/table v0.0.2
Type: Feature
Default version. The smarttable works.