diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index ea4d6d3fc9cd20f1d3fa774edd8bd61f838d772a..0000000000000000000000000000000000000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx
index 3df4864a4cb704dbbb96d219d0a0513f385edc23..7c5371a4fbe88bfda485ce74f5ee569c9310a469 100644
--- a/src/components/detail/index.tsx
+++ b/src/components/detail/index.tsx
@@ -6,6 +6,7 @@ import ImportSubformField from './importSubform'
 import InfoDetail from './detailInfo'
 import ColorDetail from './detailColor'
 import CustomFieldComponent from './custom'
+import TableFieldComponent from './table'
 
 export default {
   text: TextField,
@@ -15,5 +16,6 @@ export default {
   import_subform: ImportSubformField,
   detail_info: InfoDetail,
   detail_color: ColorDetail,
-  custom: CustomFieldComponent
+  custom: CustomFieldComponent,
+  table: TableFieldComponent
 }
diff --git a/src/components/detail/table/index.less b/src/components/detail/table/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6eb2abab27933a985d5de22128ba508fa5f981de
--- /dev/null
+++ b/src/components/detail/table/index.less
@@ -0,0 +1,23 @@
+.ccms-antd-table {
+    &>.ccms-antd-table-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      &>.ccms-antd-table-title {
+        color: #000000d9;
+        font-weight: 500;
+        font-size: 16px;
+        display: flex;
+        &>.ccms-antd-table-title-explain {
+          margin-left: 16px;
+          font-size: 14px;
+          color: #abb7c4;
+          margin-top: 2px;
+        }
+      }
+      &>.ccms-antd-table-tableOperation {
+        margin-left: 16px;
+      }
+    }
+  }
diff --git a/src/components/detail/table/index.tsx b/src/components/detail/table/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..568cdbff85756db8746b9b4584c58e0b7b329a51
--- /dev/null
+++ b/src/components/detail/table/index.tsx
@@ -0,0 +1,142 @@
+import React from 'react'
+import { DetailTableField } from 'ccms'
+import {
+  ITableField, TableFieldConfig, ITableColumn,
+  ITableDetailOperationConfirm, ITableDetailOperationModal, ITableDetailRowOperation, ITableDetailRowOperationButton, ITableDetailRowOperationGroup, ITableDetailRowOperationGroupItem, ITableDetailTableOperation, ITableDetailTableOperationButton, ITableDetailTableOperationGroup, ITableDetailTableOperationGroupItem
+} from 'ccms/dist/src/components/detail/table'
+import { Table, Dropdown, Menu, Modal, Space } from 'antd'
+import getALLComponents from '../../tableColumns'
+import CCMS from '../../../main'
+import InterfaceHelper from '../../../util/interface'
+import styles from './index.less'
+
+export const PropsType = (props: TableFieldConfig) => { }
+
+export default class TableFieldComponent extends DetailTableField {
+  CCMS = CCMS
+  getALLComponents = (type: any) => getALLComponents[type]
+  interfaceHelper = new InterfaceHelper()
+
+  renderOperationConfirm = (props: ITableDetailOperationConfirm) => {
+    Modal.confirm({
+      getContainer: () => document.getElementById('ccms-antd') || document.body,
+      title: props.title,
+      okText: props.okText,
+      cancelText: props.cancelText,
+      onOk: () => { props.onOk() },
+      onCancel: () => { props.onCancel() }
+    })
+  }
+
+  renderComponent = (props: ITableField) => {
+    const {
+      title,
+      primary,
+      tableColumns,
+      data,
+      pagination,
+      description
+    } = props
+
+    return (
+      <div className={styles['ccms-antd-table']}>
+        <Table
+          rowKey={primary}
+          columns={tableColumns.map((column: ITableColumn, index: number) => ({
+            key: index,
+            dataIndex: column.field,
+            title: column.label,
+            align: column.align,
+            render: (value: any, record: { [field: string]: any }, index: number) => column.render(value, record, index)
+          }))}
+          dataSource={data}
+          scroll={{ x: 1000 }}
+          size="middle"
+          pagination={pagination === undefined ? false : {
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            onChange: (page, pageSize) => pagination.onChange(page, pageSize || pagination.pageSize),
+            showSizeChanger: true,
+            showTotal: (total, range) => `第 ${range[0]} - ${range[1]} 条 / 共 ${total} 条`,
+            locale: {
+              items_per_page: '条/页'
+            }
+          }}
+        />
+      </div>
+    )
+  }
+
+  renderRowOperationComponent = (props: ITableDetailRowOperation) => {
+    const {
+      children
+    } = props
+    return (
+      <Space size="middle">
+        {children}
+      </Space>
+    )
+  }
+
+  renderRowOperationButtonComponent = (props: ITableDetailRowOperationButton) => {
+    const {
+      label,
+      onClick
+    } = props
+
+    return <a onClick={() => onClick()}>{label}</a>
+  }
+
+  renderRowOperationDropdownComponent = (props: ITableDetailRowOperationGroup) => {
+    const {
+      label,
+      children
+    } = props
+    return (
+      <Dropdown
+        getPopupContainer={(node) => node.parentElement || document.body}
+        overlay={(
+          <Menu>
+            {children}
+          </Menu>
+        )}
+      >
+        <a>{label}</a>
+      </Dropdown>
+    )
+  }
+
+  renderRowOperationDropdownItemComponent = (props: ITableDetailRowOperationGroupItem) => {
+    const {
+      label,
+      disabled,
+      onClick
+    } = props
+    return (
+      <Menu.Item disabled={disabled} onClick={() => onClick()}>{label}</Menu.Item>
+    )
+  }
+
+  renderOperationModal = (props: ITableDetailOperationModal) => {
+    const {
+      title,
+      visible,
+      children,
+      onClose
+    } = props
+
+    return (
+      <Modal
+        title={title}
+        visible={visible}
+        forceRender={true}
+        getContainer={false}
+        footer={false}
+        onCancel={onClose}
+      >
+        {children}
+      </Modal>
+    )
+  }
+}
diff --git a/src/components/detail/table/props-types.tsx b/src/components/detail/table/props-types.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1826364adf2cd5bd7e009f96b452ac57235d0406
--- /dev/null
+++ b/src/components/detail/table/props-types.tsx
@@ -0,0 +1,3 @@
+import { ITable, ITableColumn, ITableStepOperationColumn, ITableStepOperationColumnButton, ITableStepOperationColumnGroup, ITableStepOperationColumnGroupItem, ITableStepOperationColumnConfirm, ITableStepOperationModal } from 'ccms/dist/src/steps/table'
+
+export const PropsType = (props: ITable ) => { };
diff --git a/src/components/detail/text/index.tsx b/src/components/detail/text/index.tsx
index 8a6d3911f904d5ff5c807b0b63c093bfdd9331de..4d55a5d559dd7bfdac42583f16842e73776b81af 100644
--- a/src/components/detail/text/index.tsx
+++ b/src/components/detail/text/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { DetailTextField } from 'ccms'
 import { ITextField, TextFieldConfig } from 'ccms/dist/src/components/detail/text'
 
-export const PropsType = (props: TextFieldConfig) => {}
+export const PropsType = (props: TextFieldConfig) => { }
 
 export default class TextFieldComponent extends DetailTextField {
   renderComponent = (props: ITextField) => {
diff --git a/src/components/formFields/select/multiple/index.tsx b/src/components/formFields/select/multiple/index.tsx
index 991e5bdf214b5faec93980fd0c5af53892f2c182..c8069ad4cd947a8b7108a4c969f1da557ea988c8 100644
--- a/src/components/formFields/select/multiple/index.tsx
+++ b/src/components/formFields/select/multiple/index.tsx
@@ -5,7 +5,7 @@ import { ISelectMultipleField, SelectMultipleFieldConfig } from 'ccms/dist/src/c
 import InterfaceHelper from '../../../../util/interface'
 export default class SelectSingleFieldComponent extends SelectMultipleField {
   interfaceHelper = new InterfaceHelper()
-  
+
   renderDorpdownComponent = (props: ISelectMultipleField) => {
     const {
       value,
@@ -16,13 +16,15 @@ export default class SelectSingleFieldComponent extends SelectMultipleField {
       readonly,
       placeholder
     } = props
-    
+
     return (
       <Select
+        optionFilterProp="label"
         getPopupContainer={(ele) => ele.parentElement || document.body}
         disabled={disabled || readonly}
         placeholder={placeholder}
         value={value}
+
         onChange={(value) => onChange(value)}
         style={{ minWidth: '100px' }}
         dropdownMatchSelectWidth={false}
@@ -31,7 +33,7 @@ export default class SelectSingleFieldComponent extends SelectMultipleField {
         onClear={() => onClear !== undefined && onClear()}
       >
         {options.map((option) => (
-          <Select.Option key={option.value as any} value={option.value as any}>{option.label}</Select.Option>
+          <Select.Option key={option.value as any} value={option.value as any} label={option.label}>{option.label}</Select.Option>
         ))}
       </Select>
     )
diff --git a/src/index.tsx b/src/index.tsx
index 99c688d96eebb91a2df556c0a8c43ef628d93e8b..375c4af431f513a3b2f45e5090f93ce85bbe33ac 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,4 +13,5 @@ export { default as Table } from './steps/table'
 export { default as Fetch } from './steps/fetch'
 export { default as DetailStep } from './steps/detail'
 export { default as DetailGroupField } from './components/detail/group'
-export { default as DetailTextField } from './components/detail/text'
\ No newline at end of file
+export { default as DetailTextField } from './components/detail/text'
+export { default as DetailTableField } from './components/detail/table'