Table.html 3.69 KB
<div className="ant-table-wrapper">
    <div className={"ant-table ant-table-"+state.size}>
        <div className="ant-table-content">
            <table>
                <thead className="ant-table-thead">
                    <tr>
                        {rowSelection &&<th className="ant-table-selection-column">
                            {!rowSelection.hideSelectAll && <span className="ant-table-header-column">
                                <div>
                                    <span className="ant-table-column-title">
                                        <div className="ant-table-selection">
                                            <antd-checkbox onChange={this.handleSelectAll.bind(this, event)}
                                                checked={state.isSelectAll} />
                                        </div>
                                    </span>
                                </div>
                            </span>}
                        </th>}
                        {columns.map(function (column, key) {
                            return <th key="key" className="ant-table-cell ant-table-column-has-sorters" 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">
                                            <antd-icon type="CaretUpOutlined" className={"ant-table-column-sorter-up"+(state.sorter.field===column.key&&state.sorter.order==="ascend"?" active":"")}></antd-icon>
                                            <antd-icon type="CaretDownOutlined" className={"ant-table-column-sorter-down"+(state.sorter.field===column.key&&state.sorter.order==="descend"?" active":"")}></antd-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]+'-'+$index">
                        {rowSelection && <td className="ant-table-selection-column">
                            <span>
                                <antd-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">
                                    <antd-slot content="{{record[column.key]}}" context="antdTable.getContext().$parent" />
                                </td>
                            })}
                    </tr>
                    })}
                    {state.dataSource.length === 0 && <tr className="ant-table-placeholder">
                        <td colspan={rowSelection?columns.length+1:columns.length}>
                            <antd-empty image="presented_image_simple"></antd-empty>
                        </td>
                    </tr>}
                </tbody>
            </table>
        </div>
    </div>
</div>