Task Table

Appearance

@idealworld/task-table v0.1.0-beta.1 / IwProps / SimpleTableProps

Interface: SimpleTableProps ​

简单表格属性

Simple table props

这是入口配置属性，用于定义一个表格的所有属性。

This is the entry configuration property, which is used to define all properties of a table.

Example ​

ts
const simplifiedTableProps: SimpleTableProps = {                                                                   // 简单表格属性示例 / Simple table props example
  pkColumnName: 'no',
  columns: [                                                                                                       // 列定义 / Column definition
    { name: 'no' },
    { name: 'name' },
  ],
  layouts: [                                                                                                       // 布局定义 / Layout definition
    {
      title: 'list demo',
    }
  ],
  events: {                                                                                                        // 实现必要的事件 / Implement necessary events
    loadData: async (quickSearchContent?: string, filter?: IwProps.FilterDataProps,
           sort?: IwProps.SortDataProps, group?: IwProps.GroupDataProps, agg?: IwProps.AggDataProps,
           hideSubData?: boolean, byGroupValue?: any, slice?: IwProps.DataQuerySliceReq,
           returnColumnNames?: string[],  returnOnlyAgg?: boolean
       ): Promise<IwProps.DataResp | IwProps.DataGroupResp[]> => {
      ...
    }
  }
}

const tableProps: SimpleTableProps = {                                                                             // 相对完整的表格属性示例 / Relatively complete table props example
  pkColumnName: 'no',
  parentPkColumnName: 'pno',                                                                                       // 父主键列名 / Parent primary key column name
  columns: [
    { name: 'no', title: 'ID', dataKind: IwProps.DataKind.NUMBER, width: 80, styles: { cursor: 'pointer' } },      // 自定义样式的列 / Column with custom style
    { name: 'pno', title: '父ID', dataKind: IwProps.DataKind.NUMBER, hide: true },                                 // 隐藏列 / Hidden column
    { name: 'name', title: '名称', width: 300,
     render: (record: { [columnName: string]: any }, layoutKind: IwProps.LayoutKind) => {                          // 自定义渲染函数 / Custom render function
      if (layoutKind === IwProps.LayoutKind.LIST) {
        return record.stats.includes('risk') ? `<span style='color:red'>${record.name}</span>` : record.name
      }
      else {
        return record.name
      }
    } },
    { name: 'creator', title: '创建人', useDict: true },                                                           // 使用字典的列 / Use dictionary column
    { name: 'stats', title: '状态', useDict: true, multiValue: true },                                             // 有多个值的列 / Column with multiple values
    { name: 'avatar', title: '头像', dataKind: IwProps.DataKind.IMAGE },                                           // 图片列 / Image column
    { name: 'attachment', title: '附件', dataKind: IwProps.DataKind.FILE },                                        // 文件列 / File column
    { name: 'planStartTime', title: '计划开始时间', dataKind: IwProps.DataKind.DATETIME },                         // 日期时间列 / Date-time column
    { name: 'planEndTime', title: '计划结束时间', dataKind: IwProps.DataKind.DATETIME },
    { name: 'actualStartTime', title: '实际开始时间', dataKind: IwProps.DataKind.DATETIME },
    { name: 'actualEndTime', title: '实际结束时间', dataKind: IwProps.DataKind.DATETIME },
    { name: 'disabled', title: '是否禁用', dataKind: IwProps.DataKind.BOOLEAN },                                   // 布尔列 / Boolean column
  ],
  events: {
    loadData: async (quickSearchContent?: string, filter?: IwProps.FilterDataProps,
           sort?: IwProps.SortDataProps, group?: IwProps.GroupDataProps, agg?: IwProps.AggDataProps,
           hideSubData?: boolean, byGroupValue?: any, slice?: IwProps.DataQuerySliceReq,
           returnColumnNames?: string[],  returnOnlyAgg?: boolean
       ): Promise<IwProps.DataResp | IwProps.DataGroupResp[]> => {
      ...
    }
  },
  quickSearch: {                                                                                                   // 启用快速搜索 / Enable quick search
    placeholder: '请输入姓名',
  },
  slice: {
    fetchNumber: 10,
    fetchNumbers: [5, 10, 20, 30, 50],                                                                             // 自定义数据分片 / Custom data slice
  },
  showSelectColumn: true,
  actionColumn: {                                                                                                  // 启用操作列 / Enable action column
    render: (record: { [columnName: string]: any }, _layoutKind: IwProps.LayoutKind) => {
      return `<button class="btn-row-delete" style="margin-right:2px" data-id='${record.no}'>删除</button>`
    },
    width: 100,
  },
  gantt: {                                                                                                         // 启用甘特图 / Enable Gantt chart
    timelineWidth: 500,
    planStartTimeColumnName: 'planStartTime',
    planEndTimeColumnName: 'planEndTime',
    actualStartTimeColumnName: 'actualStartTime',
    actualEndTimeColumnName: 'actualEndTime',
  },
  filter: {                                                                                                        // 启用过滤 / Enable filter
    enabledColumnNames: ['no', 'name', 'creator', 'stats', 'planStartTime', 'planEndTime'],
  },
  sort: {
    enabledColumnNames: ['no', 'name', 'creator', 'stats', 'planStartTime', 'planEndTime'],
  },
  group: {
    enabledColumnNames: ['creator', 'stats', 'disabled'],
  },
  agg: {
    enabledColumnNames: ['name', 'creator', 'stats', 'planStartTime', 'planEndTime'],
    items: [
      { columnName: 'name', aggKind: IwProps.AggregateKind.MIN },
      { columnName: 'stats', aggKind: IwProps.AggregateKind.MIN },
    ],
  },
  edit: {
    enabledColumnNames: ['name', 'creator', 'stats', 'planStartTime', 'disabled'],
    markEditable: true,
  },
  layouts: [
    {
      id: 'hi1',
      title: 'gantt demo',
      layoutKind: IwProps.LayoutKind.GANTT,                                                                       // 甘特图布局 / Gantt layout
    },
    {
      id: 'hi2',
      title: 'list demo',
      layoutKind: IwProps.LayoutKind.LIST,
      columns: [{                                                                                                 // 布局可重定义需要的列 / Layout can redefine the required columns
        name: 'name',
      }, {
        name: 'stats',
      }, {
        name: 'creator',
      }, {
        name: 'avatar',
      },
      ...
      ],
      agg: {                                                                                                       // 布局可重定义公共功能属性 / Layout can redefine common function properties
        enabledColumnNames: ['name', 'creator', 'stats', 'planStartTime', 'planEndTime'],
        items: [
          { columnName: 'name', aggKind: IwProps.AggregateKind.MIN },
        ],
      }
    }
  ],
}

Extends ​

  • SimpleCommonFunctionProps

Properties ​

actionColumn? ​

optional actionColumn: ActionColumnProps

操作列

Action column

Inherited from ​

SimpleCommonFunctionProps.actionColumn

Defined in ​

props/kernelProps.ts:114

agg? ​

optional agg: SimpleAggDataProps

聚合

Aggregate

Inherited from ​

SimpleCommonFunctionProps.agg

Defined in ​

props/kernelProps.ts:145

columns ​

columns: SimpleTableColumnProps[]

列

Columns

Defined in ​

props/kernelProps.ts:497

edit? ​

optional edit: SimpleEditDataProps

编辑

Edit

Inherited from ​

SimpleCommonFunctionProps.edit

Defined in ​

props/kernelProps.ts:151

events ​

events: TableEventProps

事件

Events

Defined in ​

props/kernelProps.ts:509

filter? ​

optional filter: SimpleFilterDataProps

过滤

Filter

Inherited from ​

SimpleCommonFunctionProps.filter

Defined in ​

props/kernelProps.ts:127

gantt? ​

optional gantt: SimpleGanttLayoutProps

甘特图

Gantt chart

Inherited from ​

SimpleCommonFunctionProps.gantt

Defined in ​

props/kernelProps.ts:120

group? ​

optional group: SimpleGroupDataProps

分组

Group

Inherited from ​

SimpleCommonFunctionProps.group

Defined in ​

props/kernelProps.ts:133

id? ​

optional id: string

ID

ID

Defined in ​

props/kernelProps.ts:479

layouts ​

layouts: SimpleLayoutProps[]

布局

Layouts

Defined in ​

props/kernelProps.ts:503

mini? ​

optional mini: boolean

迷你模式

Mini mode

启用后只会显示第一个布局，且不会显示过滤、分组、排序、表格配置等功能。

After enabling, only the first layout will be displayed, and functions such as filter, group, sort, and table configuration will not be displayed.

Defined in ​

props/kernelProps.ts:533

parentPkColumnName? ​

optional parentPkColumnName: string

父主键列名

Parent primary key column name

Defined in ​

props/kernelProps.ts:491

pkColumnName ​

pkColumnName: string

主键列名

Primary key column name

Defined in ​

props/kernelProps.ts:485

quickSearch? ​

optional quickSearch: QuickSearchProps

快速搜索

Quick search

Defined in ​

props/kernelProps.ts:522

showSelectColumn? ​

optional showSelectColumn: boolean

是否显示选择列

Whether to show the select column

Inherited from ​

SimpleCommonFunctionProps.showSelectColumn

Defined in ​

props/kernelProps.ts:101

slice? ​

optional slice: Partial<DataSliceProps>

分片

Slice

Inherited from ​

SimpleCommonFunctionProps.slice

Defined in ​

props/kernelProps.ts:95

sort? ​

optional sort: SimpleSortDataProps

排序

Sort

Inherited from ​

SimpleCommonFunctionProps.sort

Defined in ​

props/kernelProps.ts:139

styles? ​

optional styles: Partial<TableStyleProps>

样式

Styles

Defined in ​

props/kernelProps.ts:515

subDataShowKind? ​

optional subDataShowKind: SubDataShowKind

子数据显示方式

Sub-data display method

Inherited from ​

SimpleCommonFunctionProps.subDataShowKind

Defined in ​

props/kernelProps.ts:107