st 表格

st 并不是在创造另一个表格组件，而是在 nz-table 基础上以可配置形式渲染表格，在中后台里这种方式可以满足绝大多数场景，但又可以更易地管理表格渲染动作。

关于数据源

data 支持三种不同格式数据源，整体分为：URL和静态数据两类；但可以透过参数的配置达到不同的效果，同时有非常多参数可通过 AlainSTConfig 重置默认值，使整个 st 组件模板达到极简。

URL

指的是通过一个 URL 字符串来获取数据。

• 通过 req.params、req.method 等参数解决请求数据格式问题

• 通过 res.reName 重置数据 key 而无须担心后端数据格式是否满足 st 需求

• 通过 res.process 可以对表格渲染前对数据进一步优化

• 通过 page.zeroIndexed 可以调整 http 请求时 pi 参数是否遵循 0 基索引，默认情况下为 1 基索引

• 若返回体的值是数组类型，则强制不分页

• 使用 _HttpClient 发起请求，因此满足 AlainThemeConfig 的配置也适用

静态数据

指的是通过指定值为 STData[] 或 Observable<STData[]>，二者都遵循以下规则：

• page.front 前端分页，默认：true

  • true 由 st 根据 data 长度受控分页，包括：排序、过滤等

  • false 由用户通过 total 和 data 参数受控分页，并维护 (change) 当分页变更时重新加载数据

• page.show 是否显示分页器；当未指定时若 ps>total 情况下自动不显示

常见问题

Cannot read property ‘text’ of undefined

若组件已经加载完毕，此时如果再次改变 columns 时可能会出现该错误，这是因为 st 每次只会根据 columns 对数据处理，当列定义发生改变后可能会因为列定义与现有数据无法配对，可能需要使用 this.st.resetColumns({ columns: [], emitReload: true }) 来更新列定义并重新加载数据。

import { STModule } from '@delon/abc/st';

代码演示

基本

快速生成表格；利用 res 可以适配后端数据格式。

import { Component, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
@Component({
  selector: 'components-st-basic',
  template: `
    <button nz-button nzType="primary" (click)="setRow()">setRow Method</button>
    <st #st [widthMode]="{ type: 'strict' }" [data]="url" [req]="{ params: params }" [columns]="columns"></st>
  `,
})
export class ComponentsStBasicComponent {
  url = `/users?total=2&field=list`;
  params = { a: 1, b: 2 };
  @ViewChild('st', { static: false }) private st: STComponent;
  columns: STColumn[] = [
    { title: '编号', index: 'id', width: 80 },
    { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
    { title: '邮箱', index: 'email', width: 80 },
    { title: '电话', index: 'phone' },
    { title: { text: '佣金', optional: '（单位：元）', optionalHelp: '计算公式=订单金额 * 0.6%' }, index: 'price', type: 'currency' },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
  setRow(): void {
    this.st.setRow(0, { price: 100000000 })
  }
}

自定义数据

data 属性支持 STData[]、Observable 数据类型。

import { Component, OnInit } from '@angular/core';
import { STColumn, STChange } from '@delon/abc/st';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
@Component({
  selector: 'components-st-custom-data',
  template: `
    <div class="mb-md">
      <button (click)="st.clear()" nz-button>Clear Data</button>
      <button (click)="st.reload()" nz-button>Reload Data</button>
      <button (click)="st.clearStatus(); st.reload()" nz-button>Clear Status</button>
    </div>
    <st #st [data]="users" [columns]="columns" (change)="change($event)"></st>
  `,
})
export class ComponentsStCustomDataComponent implements OnInit {
  users: any[] = [];
  columns: STColumn[] = [
    {
      title: '编号',
      index: 'id',
      type: 'checkbox',
      selections: [
        {
          text: '小于25岁',
          select: data => data.forEach(item => (item.checked = item.age < 25)),
        },
        {
          text: '大于25岁',
          select: data => data.forEach(item => (item.checked = item.age >= 25)),
        },
      ],
    },
    {
      title: '姓名',
      index: 'name',
      sort: {
        compare: (a, b) => a.name.length - b.name.length,
      },
      filter: {
        type: 'keyword',
        fn: (filter, record) => !filter.value || record.name.indexOf(filter.value) !== -1,
      },
    },
    {
      title: '年龄',
      index: 'age',
      sort: {
        compare: (a, b) => a.age - b.age,
      },
      filter: {
        menus: [{ text: '20岁以下', value: [0, 20] }, { text: '20-25岁', value: [20, 25] }, { text: '25岁以上', value: [25, 100] }],
        fn: (filter, record) => record.age >= filter.value[0] && record.age <= filter.value[1],
        multiple: false,
      },
    },
    {
      title: '状态',
      type: 'badge',
      index: 'status',
      badge: {
        1: { text: 'Success', color: 'success' },
        2: { text: 'Error', color: 'error' },
        3: { text: 'Processing', color: 'processing' },
        4: { text: 'Default', color: 'default' },
        5: { text: 'Warning', color: 'warning' },
      },
    },
  ];
  ngOnInit(): void {
    of(
      Array(100)
        .fill({})
        .map((_item: any, idx: number) => {
          return {
            id: idx + 1,
            name: `name ${idx + 1}`,
            age: Math.ceil(Math.random() * 10) + 20,
            status: Math.floor(Math.random() * 5) + 1,
          };
        }),
    )
      .pipe(delay(500))
      .subscribe(res => (this.users = res));
  }
  change(e: STChange) {
    console.log(e);
  }
}

列类型

支持十种不同列类型：行号、多选、单选、徽标、标签、图片、数字、货币、日期、布尔徽章、枚举。也可以使用自定义列完成更复杂渲染。

import { Component } from '@angular/core';
import { STColumn, STColumnBadge, STColumnTag } from '@delon/abc/st';
const BADGE: STColumnBadge = {
  1: { text: '成功', color: 'success' },
  2: { text: '错误', color: 'error' },
  3: { text: '进行中', color: 'processing' },
  4: { text: '默认', color: 'default' },
  5: { text: '警告', color: 'warning' },
};
const TAG: STColumnTag = {
  1: { text: '成功', color: 'green' },
  2: { text: '错误', color: 'red' },
  3: { text: '进行中', color: 'blue' },
  4: { text: '默认', color: '' },
  5: { text: '警告', color: 'orange' },
};
const r = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
@Component({
  selector: 'components-st-type',
  template: `
    <button nz-button (click)="reload()">Reload</button>
    <st #st [data]="users" [columns]="columns" [page]="{ position: 'both' }"></st>
  `,
})
export class ComponentsStTypeComponent {
  users: any[] = [];
  columns: STColumn[] = [
    { title: '行号', type: 'no' },
    { title: '姓名', index: 'name' },
    { title: '年龄', index: 'age', type: 'number' },
    { title: 'tag', index: 'tag', type: 'tag', tag: TAG },
    { title: 'badge', index: 'badge', type: 'badge', badge: BADGE },
    { title: 'Enum', index: 'enum', type: 'enum', enum: { 1: '壹', 2: '贰', 3: '叁' } },
    { title: 'yn', index: 'yn', type: 'yn' },
  ];
  reload() {
    this.users = Array(10)
      .fill({})
      .map((_item: any, idx: number) => {
        return {
          id: idx + 1,
          name: `name ${idx + 1}`,
          age: r(10, 50),
          tag: r(1, 5),
          badge: r(1, 5),
          enum: r(1, 3),
          yn: [true, false][r(1, 5) % 2],
        };
      });
  }
  constructor() {
    this.reload();
  }
}

可选择

利用 change 监听所选的数据。

import { Component } from '@angular/core';
import { STColumn, STData, STChange } from '@delon/abc/st';
@Component({
  selector: 'components-st-checkbox',
  template: `<st [data]="url" [columns]="columns"
        [req]="{params: params}" [res]="{process: dataProcess}"
        (change)="change($event)"></st>`,
})
export class ComponentsStCheckboxComponent {
  url = `/users?total=100`;
  params = { a: 1, b: 2 };
  columns: STColumn[] = [
    { title: '编号', index: 'id.value', type: 'checkbox' },
    { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'phone' },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
  change(e: STChange) {
    console.log('change', e);
  }
  dataProcess(data: STData[]) {
    return data.map((i: STData, index: number) => {
      i.disabled = index === 0;
      return i;
    });
  }
}

搜索表单

配合 load() & reset() 实现搜索表单。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-form',
  template: `
  <div class="mb-md">
    <input nz-input [(ngModel)]="params.name" name="name" nzPlaceHolder="请输入姓名" style="width: 100px;" class="mr-sm">
    <button nz-button (click)="st.load(1)" [nzType]="'primary'">搜索</button>
    <button nz-button (click)="params = {}; st.reset()">重置</button>
  </div>
  <st #st [data]="url" [req]="{params: params}" [columns]="columns"></st>
  `,
})
export class ComponentsStFormComponent {
  url = `/users?total=100`;
  params: any = { name: 'asdf' };
  // mock
  columns: STColumn[] = [
    { title: '编号', index: 'id', default: '-' },
    { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'phone' },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
}

行事件

利用 (change) 实现点击行回调，因于DOM事件在同一元素上无法区分单或双击，若明确不需要双击事件，可以设定 rowClickTime 值为 0 以防止 200ms 迟延。

打开控制面板了解打印明细。

import { Component } from '@angular/core';
import { STColumn, STChange } from '@delon/abc/st';
@Component({
  selector: 'components-st-row-click',
  template: `
  <st [data]="url"
    [req]="{params: params}" [columns]="columns"
    (change)="_click($event)"></st>`,
})
export class ComponentsStRowClickComponent {
  url = `/users?results=3`;
  params = { a: 1, b: 2 };
  // mock
  columns: STColumn[] = [
    { title: '编号', index: 'id' },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'phone' },
    {
      title: '',
      buttons: [
        {
          text: 'btn',
          type: 'link',
          click: (e: any) => console.log('btn click', e),
        },
      ],
    },
  ];
  _click(e: STChange) {
    console.log(e);
  }
}

单选框

利用 change 监听所选的数据。

import { Component } from '@angular/core';
import { STColumn, STData, STChange } from '@delon/abc/st';
@Component({
  selector: 'components-st-radio',
  template: `<st [data]="url" [columns]="columns"
        [req]="{params: params}" [res]="{process: dataChange}"
        (change)="change($event)"></st>`,
})
export class ComponentsStRadioComponent {
  url = `/users?total=300`;
  params = { a: 1, b: 2 };
  columns: STColumn[] = [
    { title: '编号', index: 'id', type: 'radio' },
    { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'phone' },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
  change(ret: STChange) {
    console.log('change', ret);
  }
  dataChange(data: STData[]) {
    return data.map((i: STData, index: number) => {
      i.disabled = index === 0;
      i.hidden = index === 1;
      return i;
    });
  }
}

后端筛选和排序

利用 multiSort 支持多字段排序。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-sort',
  template: `
    <button nz-button (click)="st.reset()">重置</button>
    <st #st [data]="url" [req]="{ params: params }" [columns]="columns" multiSort></st>
  `,
})
export class ComponentsStSortComponent {
  url = `/users?total=200`;
  params = { a: 1, b: 2 };
  columns: STColumn[] = [
    { title: '编号', index: 'id' },
    { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
    {
      title: '姓名',
      index: 'name.last',
      format: (item, _col, index) => `${index + 1}: ${item.name.last} ${item.name.first}`,
      sort: true,
    },
    {
      title: '国家',
      index: 'nat',
      filter: {
        menus: [{ text: '中国', value: 'CH' }, { text: '美国', value: 'US' }, { text: '德国', value: 'DE' }],
      },
      sort: true,
    },
    {
      title: '性别',
      index: 'gender',
      filter: {
        menus: [{ text: 'male', value: 'male' }, { text: 'female', value: 'female' }],
        multiple: false,
      },
      sort: true,
    },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
}

可展开

使用 #expand 模板实现可展开，允许接收 item、index、column 三个值。附加可实现：嵌套子表格。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-expand',
  template: `
    <st [data]="users" [columns]="columns" [expand]="expand" expandRowByClick expandAccordion>
      <ng-template #expand let-item let-index="index" let-column="column">
        {{ item.description }}
      </ng-template>
    </st>
  `,
})
export class ComponentsStExpandComponent {
  users: any[] = Array(10)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        name: `name ${idx + 1}`,
        age: Math.ceil(Math.random() * 10) + 20,
        // 是否显示展开按钮
        showExpand: idx !== 0,
        description: `${idx + 1}. My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.`,
      };
    });
  columns: STColumn[] = [
    { title: '编号', index: 'id' },
    { title: '姓名', index: 'name' },
    { title: '年龄', index: 'age' },
    {
      buttons: [
        {
          text: 'Button',
        },
      ],
    },
  ];
}

自定义列

创建一个带有 st-row="custom-name" 的 ng-template，并在列描述 render: 'custom-name' 指定名称；模板允许接收 item、index、column 三个值。

如果指定 type="title" 表示是对标题自定义列。附加可实现：表头分组。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-render',
  template: `
  <div class="mb-md">
    <nz-checkbox-group [(ngModel)]="customColumns" name="customColumns" (ngModelChange)="st.resetColumns({ emitReload: true })"></nz-checkbox-group>
  </div>
  <st #st [data]="users" [columns]="columns">
    <ng-template st-row="customTitle" type="title" let-c>
      {{ c.title.text }}
      <span nz-dropdown [nzDropdownMenu]="menuTpl" nzTrigger="click" [nzClickHide]="false" nzPlacement="bottomRight">
        <i nz-icon nzType="down"></i>
      </span>
      <nz-dropdown-menu #menuTpl="nzDropdownMenu">
        <div class="ant-table-filter-dropdown p-sm">
          <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" name="searchValue" class="width-sm mr-sm">
          <button nz-button [nzType]="'primary'" (click)="st.load(2)">Search</button>
        </div>
      </nz-dropdown-menu>
    </ng-template>
    <ng-template st-row="custom" let-item let-index="index">
      <span nz-tooltip [nzTooltipTitle]="'年龄：' + item.age">tooltip: {{item.age}}-{{index}}</span>
    </ng-template>
  </st>
  `,
})
export class ComponentsStRenderComponent {
  searchValue: string;
  users: any[] = Array(10)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        name: `name ${idx + 1}`,
        age: Math.ceil(Math.random() * 10) + 20,
      };
    });
  columns: STColumn[] = [
    { title: '编号', index: 'id' },
    { title: '姓名', index: 'name', iif: () => this.isChoose('name') },
    { title: '年龄', index: 'age', iif: () => this.isChoose('age') },
    {
      title: '自定义',
      renderTitle: 'customTitle',
      render: 'custom',
      iif: () => this.isChoose('custom'),
    },
  ];
  customColumns = [
    { label: '姓名', value: 'name', checked: true },
    { label: '年龄', value: 'age', checked: true },
    { label: '自定义', value: 'custom', checked: true },
  ];
  isChoose(key: string): boolean {
    return !!this.customColumns.find(w => w.value === key && w.checked);
  }
}

自定义按钮组

透过简单的配置产生一组日常按钮组（目标组件示例：DemoModalComponent、DemoDrawerComponent）。

对话框由ModalHelper处理，抽屉由DrawerHelper处理。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
import { NzMessageService } from 'ng-zorro-antd/message';
import { DemoModalComponent, DemoDrawerComponent } from '@shared';
@Component({
  selector: 'components-st-buttons',
  template: `
    <st [data]="users" [columns]="columns"></st>
  `,
})
export class ComponentsStButtonsComponent {
  constructor(private message: NzMessageService) {}
  users: any[] = Array(10)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        name: `name ${idx + 1}`,
        age: Math.ceil(Math.random() * 10) + 20,
      };
    });
  columns: STColumn[] = [
    { title: '序号', type: 'no' },
    { title: '编号', index: 'id' },
    { title: '姓名', index: 'name' },
    { title: '年龄', index: 'age' },
    {
      title: '操作区',
      buttons: [
        {
          text: 'Edit',
          icon: 'edit',
          type: 'modal',
          modal: {
            component: DemoModalComponent,
          },
          click: (_record, modal) => this.message.success(`重新加载页面，回传值：${JSON.stringify(modal)}`),
        },
        {
          text: 'Drawer',
          type: 'drawer',
          drawer: {
            title: '编辑',
            component: DemoDrawerComponent,
          },
          click: (_record, modal) => this.message.success(`重新加载页面，回传值：${JSON.stringify(modal)}`),
        },
        {
          icon: 'check-circle',
          click: record => this.message.info(`check-${record.name}`),
          iif: record => record.id % 2 === 0,
          iifBehavior: 'disabled',
          tooltip: `Is disabled button`,
        },
        {
          icon: 'delete',
          type: 'del',
          pop: {
            title: 'Yar you sure?',
            okType: 'danger',
            icon: 'star',
          },
          click: (record, _modal, comp) => {
            this.message.success(`成功删除【${record.name}】`);
            comp!.removeRow(record);
          },
          iif: record => record.id % 2 === 0,
        },
        {
          text: '更多',
          children: [
            {
              text: record => (record.id === 1 ? `过期` : `正常`),
              click: record => this.message.error(`${record.id === 1 ? `过期` : `正常`}【${record.name}】`),
            },
            {
              text: `审核`,
              click: record => this.message.info(`check-${record.name}`),
              iif: record => record.id % 2 === 0,
              iifBehavior: 'disabled',
              tooltip: 'This is tooltip',
            },
            {
              type: 'divider',
            },
            {
              text: `重新开始`,
              icon: 'edit',
              click: record => this.message.success(`重新开始【${record.name}】`),
            },
          ],
        },
      ],
    },
  ];
}

自定义小部件

类型为 widget 自定义小部件，例如点击头像处理。

import { Component, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
@Component({
  selector: 'components-st-widget',
  template: `
    <div class="mb-md">
      <button (click)="st.clear()" nz-button>Clear Data</button>
      <button (click)="st.reload()" nz-button>Reload Data</button>
      <button (click)="st.clearStatus(); st.reload()" nz-button>Clear Status</button>
      <button (click)="changeImg()" nz-button>Change Img Data</button>
    </div>
    <st #st [data]="url" [columns]="columns"></st>
  `,
})
export class ComponentsStWidgetComponent {
  url = `/users?total=100`;
  @ViewChild('st', { static: false }) private st: STComponent;
  columns: STColumn[] = [
    { title: '编号', index: 'id', width: 80 },
    {
      title: '自定义头像',
      type: 'widget',
      widget: { type: 'img', params: ({ record }) => ({ img: record.picture.thumbnail }) },
      width: 150,
    },
    { title: '邮箱', index: 'email' },
  ];
  changeImg(): void {
    this.st.setRow(0, { picture: { thumbnail: 'https://ng-alain.com/assets/img/logo-color.svg' } }, { refreshSchema: true, emitReload: false });
  }
}

固定列

对于列数很多的数据，可以使用 left 和 right 固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。

固定列使用了 sticky 属性，浏览器支持情况可以参考这里

• 若列头与内容不对齐或出现列重复，请指定列的宽度 width

• 建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-fixed',
  template: `
    <st [data]="users" [columns]="columns" [scroll]="{x: '1300px'}"></st>
  `,
})
export class ComponentsStFixedComponent {
  users: any[] = Array(10)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        name: `name ${idx + 1}`,
        age: Math.ceil(Math.random() * 10) + 20,
      };
    });
  columns: STColumn[] = [
    { title: '编号1', index: 'id', fixed: 'left', width: 100 },
    { title: '编号2', index: 'id', fixed: 'left', width: 100 },
    { title: '编号3', index: 'id', fixed: 'left', width: 100 },
    { title: '编号4', index: 'id' },
    { title: '编号5', index: 'id' },
    { title: '编号6', index: 'id' },
    { title: '编号7', index: 'id' },
    { title: '编号8', index: 'id' },
    { title: '编号8', index: 'id' },
    { title: '编号8', index: 'id' },
    { title: '编号8', index: 'id' },
    { title: '编号8', index: 'id' },
    { title: '姓名10', index: 'name', fixed: 'right', width: 100 },
    { title: '姓名11', index: 'name', fixed: 'right', width: 100 },
    { title: '年龄12', index: 'age', fixed: 'right', width: 100 },
  ];
}

表头分组

columns[n] 可以内嵌 children，以渲染分组表头。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-grouping-columns',
  template: ` <st #st [data]="url" [req]="{ params: params }" [columns]="columns" bordered size="middle"> </st>`,
})
export class ComponentsStGroupingColumnsComponent {
  url = `/users?total=2&field=list`;
  params = { a: 1, b: 2 };
  columns: STColumn[] = [
    { title: '编号', index: 'id', sort: true },
    {
      title: 'Other',
      children: [
        { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
        { title: '邮箱', index: 'email' },
        {
          title: '姓名',
          sort: true,
          children: [
            { title: 'first', index: 'name.first', sort: true },
            { title: 'last', index: 'name.last' },
          ],
        },
      ],
    },
  ];
}

响应式

小屏幕下将以响应模式堆叠显示，responsiveHideHeaderFooter 属性可以使大屏幕不显示头和尾，反之。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-responsive',
  template: `
  <st [data]="url" [req]="{params: params}" [columns]="columns"
    header="The header" footer="The footer" responsiveHideHeaderFooter>
  </st>`,
})
export class ComponentsStResponsiveComponent {
  url = `/users?total=100`;
  params = { a: 1, b: 2 };
  columns: STColumn[] = [
    { title: '编号', index: 'id' },
    { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'phone' },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
}

统计

支持 count、distinctCount、sum、average、max、min、自定义统计方法。

import { Component } from '@angular/core';
import { STColumn } from '@delon/abc/st';
@Component({
  selector: 'components-st-statistical',
  template: `
    <button nz-button (click)="data = []">Clean Data</button>
    <st #st [data]="data" [columns]="columns" [body]="bodyTpl">
      <ng-template #bodyTpl let-s>
        <ng-container *ngIf="st.count > 0">
          <tr>
            <td>合计</td>
            <td>{{ s.len.text }} 个</td>
            <td>{{ s.dc.text }}</td>
            <td class="text-right">{{ s.sum.text }}</td>
            <td class="text-right">{{ s.avg.text }}</td>
            <td class="text-right">{{ s.min.text }}</td>
            <td class="text-right">{{ s.max.text }}</td>
            <td class="text-right">{{ s.custom.text }}</td>
          </tr>
          <tr class="bg-grey-lighter">
            <td colspan="3">性别平均值</td>
            <td class="text-right">{{ s.sum.value / s.dc.value | _currency }}</td>
            <td colspan="4"></td>
          </tr>
        </ng-container>
      </ng-template>
    </st>
  `,
})
export class ComponentsStStatisticalComponent {
  data: any[] = Array(100)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        price: ~~(Math.random() * 100),
        age: ~~(Math.random() * 100) > 50 ? '女' : '男',
      };
    });
  columns: STColumn[] = [
    { title: '行号', type: 'no' },
    { title: '编号', index: 'id', statistical: 'count', key: 'len' },
    { title: '性别', index: 'age', statistical: 'distinctCount', key: 'dc' },
    { title: 'Sum', index: 'price', type: 'currency', statistical: 'sum', key: 'sum' },
    { title: 'Average', index: 'price', type: 'currency', statistical: 'average', key: 'avg' },
    { title: 'Min', index: 'price', type: 'currency', statistical: 'min', key: 'min' },
    { title: 'Max', index: 'price', type: 'currency', statistical: 'max', key: 'max' },
    {
      title: 'Custom',
      index: 'price',
      type: 'currency',
      statistical: { type: values => ({ value: values[0], text: `**${values[0]}` }), currency: false },
      key: 'custom',
    },
  ];
}

虚拟滚动

虚拟滚动，结合 cdk scrolling 的虚拟滚动，用于巨量数据加载。可以通过获得 cdkVirtualScrollViewport 进行进一步操作，见本示例及 API。

import { Component, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
import { STColumn, STPage, STComponent } from '@delon/abc/st';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
  selector: 'components-st-virtual',
  template: `
    <button nz-button (click)="scrollToIndex(200)">Scroll To Index 200</button>
    <st #st [data]="data" [columns]="columns" [page]="page" virtualScroll [scroll]="{ x: '1300px', y: '240px' }"></st>
  `,
})
export class ComponentsStVirtualComponent implements AfterViewInit, OnDestroy {
  private destroy$ = new Subject();
  @ViewChild('st', { static: false }) st: STComponent;
  page: STPage = {
    front: false,
    show: false,
  };
  data: any[] = Array(2000)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        price: ~~(Math.random() * 100),
      };
    });
  columns: STColumn[] = [
    { title: '编号', index: 'id', width: 100 },
    { title: '价格1', index: 'price', width: 100 },
    { title: '价格2', index: 'price', width: 100 },
    { title: '价格3', index: 'price', width: 100 },
    { title: '价格4', index: 'price', width: 100 },
    { title: '价格5', index: 'price', width: 100 },
    { title: '价格6', index: 'price', width: 100 },
    { title: '价格7', index: 'price', width: 100 },
    { title: '价格8', index: 'price', width: 100 },
    { title: '价格9', index: 'price', width: 100 },
    { title: '价格10', index: 'price', width: 100 },
  ];
  scrollToIndex(index: number): void {
    this.st.cdkVirtualScrollViewport.scrollToIndex(index);
  }
  ngAfterViewInit(): void {
    this.st.cdkVirtualScrollViewport.scrolledIndexChange.pipe(takeUntil(this.destroy$)).subscribe(data => {
      console.log('scroll index to', data);
    });
  }
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

导出Excel

将表格数据保存为 Excel。

import { Component, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
@Component({
  selector: 'components-st-export',
  template: `
    <button nz-button (click)="st.export()">Export</button>
    <button nz-button (click)="st.export(true)">Export Filtered Data</button>
    <button nz-button (click)="st.export(data, { filename: 'via-data.xlsx', sheetname: 'user' })">Export via data</button>
    <st #st [data]="data" [columns]="columns" class="mt-sm"></st>
  `,
})
export class ComponentsStExportComponent {
  @ViewChild('st', { static: false }) st: STComponent;
  data: any[] = Array(10000)
    .fill({})
    .map((_item: any, index: number) => {
      return {
        id: index + 1,
        picture: {
          thumbnail: `https://randomuser.me/api/portraits/thumb/women/${Math.min(index + 1, 30)}.jpg`,
        },
        email: `e${index + 1}@qq.com`,
        phone: `phone - ${index + 1}`,
        price: Math.ceil(Math.random() * 10000000) + 10000000,
        registered: new Date(),
      };
    });
  columns: STColumn[] = [
    { title: '编号', index: 'id' },
    {
      title: '头像',
      type: 'img',
      width: 60,
      index: 'picture.thumbnail',
      exported: false,
    },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'phone' },
    {
      title: '数字',
      index: 'price',
      type: 'number',
      sort: {
        compare: (a, b) => a.price - b.price,
      },
    },
    { title: '货币', index: 'price', type: 'currency' },
    { title: '注册时间', type: 'date', index: 'registered' },
  ];
}

API

st