This demo showcases the basic functionality of PivotTable - a table of
statistics that summarizes tabular data.
);
}
export default App;
```
--------------------------------
### Get dateStart property
Source: https://www.htmlelements.com/docs/gantt-api
Accesses the start date of the first task.
```javascript
const ganttchart = document.querySelector('smart-gantt-chart');
```
```javascript
let dateStart = ganttchart.tasks[0].dateStart;
```
--------------------------------
### Angular Grid Component Setup
Source: https://www.htmlelements.com/docs/angular-grid
Basic setup for the Smart Angular Grid component, including data source and column definitions. Ensure the 'smart-webcomponents-angular' package is installed.
```typescript
import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { GridComponent, GridColumn, DataAdapter, Smart } from 'smart-webcomponents-angular/grid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
datasource = new Smart.DataAdapter(
{
dataSource: [{ "id": 0, "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte", "price": 3.8, "quantity": 6, "total": 22.799999999999997 }, { "id": 1, "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 2, "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea", "price": 1.5, "quantity": 2, "total": 3 }, { "id": 3, "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte", "price": 3.8, "quantity": 2, "total": 7.6 }, { "id": 4, "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna", "price": 3.25, "quantity": 4, "total": 13 }, { "id": 5, "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano", "price": 2.5, "quantity": 4, "total": 10 }, { "id": 6, "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 7, "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano", "price": 2.5, "quantity": 6, "total": 15 }, { "id": 8, "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna", "price": 3.25, "quantity": 3, "total": 9.75 }, { "id": 9, "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea", "price": 1.5, "quantity": 9, "total": 13.5 }, { "id": 10, "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle", "price": 1.75, "quantity": 6, "total": 10.5 }, { "id": 11, "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist", "price": 4, "quantity": 11, "total": 44 }],
dataFields:
[
'id: number',
'firstName: string',
'lastName: string',
'productName: string',
'quantity: number',
'price: number',
'total: number'
]
})
columns: GridColumn[] = [
{
label: 'First Name', dataField: 'firstName', columnGroup: 'name'
},
{ label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
{ label: 'Product', dataField: 'productName', columnGroup: 'order' },
{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
{
label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) {
const rowId = settings.row;
const columnDataField = settings.column;
const template = settings.template;
const cell = settings.cell!;
if (settings.value >= 4) {
cell.background = '#00A45A';
cell.color = '#fff';
}
else if (settings.value < 2) {
cell.background = '#DF3800';
cell.color = '#fff';
}
else {
cell.background = '#FFFDE1';
cell.color = '#333';
}
settings.value = '$' + new Number(settings.value).toFixed(2);
}
},
{
label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) {
const rowId = settings.row;
const columnDataField = settings.column;
const template = settings.template;
const cell = settings.cell!;
if (settings.value >= 20) {
cell.background = '#00A45A';
cell.color = '#fff';
}
else if (settings.value <= 5) {
cell.background = '#DF3800';
cell.color = '#fff';
}
else {
cell.background = '#FFFDE1';
cell.color = '#333';
}
settings.value = '$' + new Number(settings.value).toFixed(2);
}
}
]
ngOnInit(): void {
}
ngAfterViewInit(): void {
}
}
```
--------------------------------
### Initialize Smart.Router with Routes
Source: https://www.htmlelements.com/docs/router
Sets up the router instance with defined paths and templates, then triggers an initial route to the home view.
```javascript
window.onload = function () {
const router = new Smart.Router('mainView', './');
router.setRoutes([
{ path: '/', template: 'homeTemplate', title: 'Home' },
{ path: '/about', template: 'aboutTemplate', title: 'About' },
{ path: '/contacts', template: 'contactsTemplate', title: 'Contacts' }
]);
router.route('/');
};
```
--------------------------------
### Get minDateStart Property of a Task
Source: https://www.htmlelements.com/docs/gantt-api
Retrieves the minimum start date allowed for the first task. This property defines the lower limit for a task's start date.
```javascript
const ganttchart = document.querySelector('smart-gantt-chart');
```
```javascript
let minDateStart = ganttchart.tasks[0].minDateStart;
```
--------------------------------
### dragStart Event Example
Source: https://www.htmlelements.com/docs/listbox-api
Example code for setting up an event handler for the dragStart event.
```APIDOC
## dragStart Event
### Description
This event is related to drag-and-drop functionality. The example shows how to capture drag start events and access associated data.
### Example
```javascript
const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('dragStart', function (event) {
const detail = event.detail,
container = detail.container,
data = detail.data,
item = detail.item,
originalEvent = detail.originalEvent,
previousContainer = detail.previousContainer,
target = detail.target;
// event handling code goes here.
})
```
```
--------------------------------
### Get maxDateStart Property of a Task
Source: https://www.htmlelements.com/docs/gantt-api
Retrieves the maximum start date allowed for the first task. This property defines the upper limit for a task's start date.
```javascript
const ganttchart = document.querySelector('smart-gantt-chart');
```
```javascript
let maxDateStart = ganttchart.tasks[0].maxDateStart;
```
--------------------------------
### Setup Angular Environment
Source: https://www.htmlelements.com/docs/qrcode
Commands to initialize an Angular project for use with Smart UI components.
```bash
npm install -g @angular/cli
```
```bash
ng new smart-angular-qrcode
```
```bash
cd smart-angular-qrcode
```
--------------------------------
### Angular Component Setup for Smart.ColorInput
Source: https://www.htmlelements.com/docs/angular-npm-packages
A standard Angular component structure. This example shows the basic setup for an Angular component, including lifecycle hooks like ngOnInit and ngAfterViewInit. No specific setup for ColorInput is shown here, but it serves as the host for the template.
```typescript
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {
ngOnInit(): void {
// onInit code.
}
ngAfterViewInit(): void {
// afterViewInit code.
this.init();
}
init(): void {
// init code.
}
}
```
--------------------------------
### Kanban Properties
Source: https://www.htmlelements.com/docs/kanban-api
Examples of how to get and set the 'name' and 'users' properties of the Kanban component.
```APIDOC
## Kanban Properties
### Get 'name' property
```javascript
const kanban = document.querySelector('smart-kanban');
let name = kanban.users[0].name;
```
### Set 'users' property (HTML Attribute)
```html