<div className="ant-table-wrapper">
      <es-spin spinning="{{loading}}">
          <div className="ant-table ant-table-default">
              <div className="ant-table-content">

                  <table>
                      <thead className="ant-table-thead">
                          <tr>
                              {rowSelection &&<th className="ant-table-selection-column">
                                  <span className="ant-table-header-column">
                                      <div>
                                          <span className="ant-table-column-title">
                                              <div className="ant-table-selection">
                                                  <es-checkbox onChange={this.handleSelectAll.bind(this, event)}
                                                      checked={state.isSelectAll} />

                                              </div>
                                          </span>

                                      </div>
                                  </span>
                              </th>}
                              {columns.map(function (column, key) {
                                  return <th className="ant-table-cell ant-table-column-has-sorters" key="key" style={{ width: column.width }}>
                                      {!column.sorter && <span>{column.title}</span>}
                                      {column.sorter && <div className="ant-table-column-sorters" onClick={this.handleSorter.bind(this, column.key)}>
                                          <span className="ant-table-column-title">{column.title}</span>
                                          <span className="ant-table-column-sorter ant-table-column-sorter-full">
                                              <span className="ant-table-column-sorter-inner">
                                                  <es-icon type="CaretUpOutlined" className={"ant-table-column-sorter-up"+(state.sorter.field===column.key&&state.sorter.order==="ascend"?" active":"")}></es-icon>
                                                  <es-icon type="CaretDownOutlined" className={"ant-table-column-sorter-down"+(state.sorter.field===column.key&&state.sorter.order==="descend"?" active":"")}></es-icon>
                                              </span>
                                          </span>
                                      </div>}
                                  </th>

                              })}

                          </tr>
                      </thead>
                      <tbody className="ant-table-tbody">
                          {state.dataSource.map(function (record, key) {
                              return <tr className="ant-table-row" key="record[state.rowKey]">
                              {rowSelection && <td className="ant-table-selection-column">
                                  <span>
                                      <es-checkbox checked="record.checked" disabled="record.disabled"
                                          onChange={this.handleSelect.bind(this, event, $index)} />
                                  </span>
                              </td>}
                                  {columns.map(function (column, key) {
                                      return <td data-key="{{column.key}}" key="key">
                                          <es-slot content="{{record[column.key]}}" context="esTable.getContext().$parent" />
                                      </td>
                                  })}
                          </tr>
                          })}
                          {state.dataSource.length === 0 && <tr className="ant-table-placeholder">

                              <td colspan={columns.length}>
                                  <es-empty image="presented_image_simple"></es-empty>
                              </td>

                          </tr>}
                      </tbody>
                  </table>

              </div>
          </div>
      </es-spin>
  </div>