npm package: @smartbit4all/table
Description: These packages must be updated in case of a new version:
Latest version: 1.5.72

# Smart Table

## References

These packages must be updated in case of a new version:

-   [_@smartbit4all/dialog_](https://www.npmjs.com/package/@smartbit4all/dialog)
-   [_@smartbit4all/view-context_](https://www.npmjs.com/package/@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<T> 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](https://www.npmjs.com/package/@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.