DataTable

DataTable 用来以表格的形式展示数据。

Data table 示例

底层使用 Ant Design Table 开发，但是提供了以下附加的功能：

开箱支持 DataCollectionStore
强大的过滤器
支持操作按钮（即 CRUD 操作）

同时，<DataTable> 通过 tableProps 和 columnDefinitions 属性为开发者提供了底层 Table 的完全访问（见下例）。

使用 <DataTable> API 示例：

<DataTable dataCollection={this.dataCollection}
           columnDefinitions={[
             'item',
             'manufacturer',
             {
               field: 'price',
               columnProps: {
                 align: 'right'
               }
             }
           ]}
           onRowSelectionChange={this.handleRowSelectionChange}
           buttons={buttons}
           tableProps={{
             bordered: true
           }}
/>

dataCollection - DataCollectionStore 实例
columnDefinitions - 描述需要展示的列。下面有更详细解释。
onRowSelectionChange - 回调函数，使用当前选中行（可以是多行）的 id 作为参数。能与 buttons 一起使用，比如进行 CRUD 操作。
buttons - React 元素数组，表示要添加到表格上方的控制按钮
tableProps - 可以用来覆盖任何底层表格的属性

废弃的属性（使用 columnDefinitions 代替）：

fields - 需要展示的属性名称
columnProps - 可以用来覆盖底层列属性，应用到每一列

columnDefinitions 更灵活并且提供了更强大自定义列的功能。如果同时使用，columnDefinitions 的配置将会覆盖 fields 和 columnProps 的配置。

columnDefinitions

columnDefinitions 描述需要显示的列。列可以展示实体的属性，也可以展示其他内容（比如，操作按钮列、计算字段列等）。

有三种定义列的方式：

直接设置 字符串 类型的属性名称。此时，DataTable 会用默认的配置渲染该属性列。

<DataTable
       dataCollection={this.dataCollection}
       columnDefinitions={[
         'manufacturer',
         // 其他列
       ]}
/>

如果您希望自定义默认列，可以使用 ColumnDefinition 对象，其中 field 是属性名称，columnProps 是 Antd ColumnProps 对象。设置在 columnProps 的属性名称会覆盖默认的属性。

<DataTable
       dataCollection={this.dataCollection}
       columnDefinitions={[
         {
           field: 'manufacturer', // 属性名
           columnProps: { // Ant Design ColumnProps 对象
             align: 'right'
           }
         },
         // 其他列
       ]}
/>

如果对于某些列，您不需要绑定至实体属性，可以用 columnProps 单独创建，不要指定 field 即可。

<DataTable
       dataCollection={this.dataCollection}
       columnDefinitions={[
         {
           columnProps: { // Ant Design ColumnProps 对象
             render: (text, record) => { /* 渲染一些自定义的内容 */ }
           }
         },
         // 其他列
       ]}
/>

如果您需要控制更底层的东西，比如您想使用 vanilla Antd Table，可以看看 DataTableHelpers 中 export 出来的函数。这些函数用来创建 DataTable 的自定义功能，比如自定义过滤器。或许您也可以直接查阅 DataTableCustomFilter。注意，这两个方案都需要对 DataTable 的内部工作原理有深入了解。

API: DataTableProps, DataTableCustomFilterProps, DataTableHelpers.