Rt table moving

About

• Version 1.0.5 - Add endEdited output
• Version 1.0.6 - Rename output from endEdited to endEditing
• Version 1.0.7 - Remove basic color variables
• Version 1.0.8 - Tweak cell styles for long text
• Version 1.0.9 - Tweak cell styles. Change box-sizing to border-box
• Version 1.0.10 - Tweak header styles. Fix position of the remove button
• Version 1.0.11 - Update rt-overflow-tooltip to 1.0.3
• Version 1.0.12 - Update rt-overflow-tooltip to 1.0.4
• Version 1.0.13 - Update rt-overflow-tooltip to 1.0.5, Fix tooltip visibility
• Version 1.0.14 - Fix updating dynamicItemsOnPage
• Version 1.0.15 - Fix updating dynamicItemsOnPage
• Version 1.0.16 - Fix updating dynamicItemsOnPage
• Version 1.1.0 - Add validation
• Version 1.2.0 - Add isClick output
• Version 1.2.1 - Add interface for isClick output
• Version 1.2.3 - Fix hideControls input
• Version 1.2.4 - Add trackBy to ngFor
• Version 1.2.5 - Optimization
• Version 1.2.6 - Fix bug related with update date
• Version 1.3.1 - Add autoHideControls input
• Version 1.3.2 - Rebuild
• Version 1.3.3 - Add detect condition for autoHideControls after change data
• Version 1.3.4 - Change condition for autoHideControls after change data
• Version 1.3.5 - Change condition for autoHideControls after change data
• Version 1.3.6 - Set autoHideControls to true by default
• Version 1.4.0 - Add whiteSpace for table data interface
• Version 1.4.1 - Tweak whiteSpace styles
• Version 1.4.2 - Set whiteSpace to nowrap by default
• Version 1.4.3 - Tweak rt-overflow-tooltip directive
• Version 1.4.4 - Tweak htmlParser
• Version 1.4.5 - Add tooltip field
• Version 1.4.6 - Add input for matTooltipClass
• Version 1.4.7 - Tweak trackBy
• Version 1.4.8 - Tweak trackBy
• Version 1.5.0 - Add property isClickable
• Version 1.5.1 - Add property for sync height columns
• Version 1.5.11 - Tweak calculate height for columns
• Version 1.5.12 - Tweak calculate height for columns
• Version 1.5.13 - Tweak calculate height for columns

Install

npm i rt-table-moving

yarn add rt-table-moving

Usages

Styles

Add color variables to your global styles.scss

:root {
  --primary-200: #41789b;
  --primary-800: #25495b;
  --text-border-light: #E5E5E5;
  --text-background: #F7F7F7;
}

add config to your angular.json in assets section

...
"assets": [
...
{
"glob": "**/*",
"input": "node_modules/rt-table-moving/src/lib/assets/",
"output": "/assets/rt-table-moving/"
}
]
...

name	type	interface	description
autoHideControls	input	boolean
hideControls	input	boolean
dynamicItemsOnPage	input	number	Number of visible columns
data	input	RtTableMovingModel
isSyncHeightColumns	input	boolean
changedData	output	RtTableMovingChangedData	If remove column or edit item
endEdited	output	RtTableMovingChangedData	End edit item
isValid	output	boolean	Validation
isClick	output

If you want to reproduce the following table

Static [subTitle]	[x] Dynamic
S1	D1 (editable, required)
S2	D2
S3	D3

Then the data will be as follows

Table data:

{
  staticData: [
    {header: {title: 'Static', subTitle: 'subTitle'}, data: 'S1'},
    {header: {title: 'Static', subTitle: 'subTitle'}, data: 'S2'},
    {header: {title: 'Static', subTitle: 'subTitle'}, data: 'S3'},
  ],
    dynamicData
:
  [
    {
      header: {title: 'Dynamic', isRemovable: true}, data: 'D1',
      isEditable: true,
      validators: [Validators.required], errorMessages: {required: 'This field is required'},
    },
    {header: {title: 'Dynamic', isRemovable: true}, data: 'D2'},
    {header: {title: 'Dynamic', isRemovable: true}, data: 'D3'},
  ]
}
;

For example

<rt-table-moving
  [data]="tableData$ | async"
  (changedData)="changedItems($event)"
  (endEdited)="endEditing($event)"
  [dynamicItemsOnPage]="3">

</rt-table-moving>

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable, of }                             from 'rxjs';

@Component({
  selector: 'app-component',
  templateUrl: './app-component.html',
  styleUrls: ['./app-component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {

  tableData$: Observable<RtTableMovingModel>;

  ngOnInit(): void {

    this.tableData$ = of({
      staticData: [
        {
          header: {
            title: 'Static', width: 350, isRemovable: true,
            subTitle: 'SubTitle',
          },
          data: 'S1',
          isEditable: true,

        },
        {
          header: {
            title: 'Static', width: 350,
          },
          data: 'S2',
        },
        {
          header: {
            title: 'Static 2', width: 350,
          },
          data: 'S3',
        },
        {
          header: {
            title: 'Static 2', width: 350,
          },
          data: 'S4',
        },
      ],

      dynamicData: [

        {header: {title: 'Dynamic 1'}, data: 'D1', isEditable: true},
        {header: {title: 'Dynamic 1'}, data: 'D2'},
        {header: {title: 'Dynamic 1'}, data: 'D3'},
        {header: {title: 'Dynamic 1'}, data: 'D4'},
        {header: {title: 'Dynamic 2'}, data: 'D5'},
        {header: {title: 'Dynamic 3'}, data: 'D6'},
        {header: {title: 'Dynamic 4'}, data: 'D7'},

      ],
    });


  }


  changedItems($event: RtTableMovingModel) {
    // this is the result of the table moving changes
  }

  endEdited($event: RtTableMovingModel) {
    // this is the result of the table moving changes
  }
}