1.5.13 • Published 2 months ago
rt-table-moving v1.5.13
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
}
}
1.5.12
2 months ago
1.5.11
2 months ago
1.5.13
2 months ago
1.5.9
2 months ago
1.5.8
2 months ago
1.5.7
2 months ago
1.5.6
2 months ago
1.5.5
2 months ago
1.5.4
2 months ago
1.5.3
2 months ago
1.5.2
2 months ago
1.5.1
2 months ago
1.5.10
2 months ago
1.5.0
2 months ago
1.4.9
2 months ago
1.4.10
2 months ago
1.4.8
7 months ago
1.4.7
7 months ago
1.4.6
7 months ago
1.4.5
7 months ago
1.3.6
8 months ago
1.4.4
8 months ago
1.3.5
8 months ago
1.4.3
8 months ago
1.3.4
8 months ago
1.4.2
8 months ago
1.3.3
8 months ago
1.4.1
8 months ago
1.3.2
8 months ago
1.4.0
8 months ago
1.3.1
8 months ago
1.3.0
8 months ago
1.2.6
9 months ago
1.2.5
9 months ago
1.2.4
9 months ago
1.2.3
9 months ago
1.2.2
9 months ago
1.2.1
9 months ago
1.2.0
9 months ago
1.1.0
11 months ago
1.0.16
11 months ago
1.0.15
11 months ago
1.0.14
11 months ago
1.0.13
11 months ago
1.0.12
11 months ago
1.0.11
11 months ago
1.0.10
11 months ago
1.0.9
11 months ago
1.0.8
11 months ago
1.0.7
11 months ago
1.0.6
11 months ago
1.0.5
11 months ago
1.0.4
11 months ago
1.0.3
11 months ago
1.0.2
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago