Smart Table

References

These packages must be updated in case of a new version:

• @smartbit4all/dialog
• @smartbit4all/view-context

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:

1. 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:

1. SmartTableComponent html

2. 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.