el-table v1.3.2

#EL-TABLE form Ellie-Component (┐「ε:)❤

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Col} from 'el-table';

const list = [{
    id: 1,
    name: 'Eleanor',
    sex: 'female'
}, {
    id: 2,
    name: 'Alexander',
    sex: 'male'
}];

ReactDOM.render(
<Table data={list} isKey="id">
    <Col dataField="id">id</Col>
    <Col dataField="name">name</Col>
    <Col dataField="sex">sex</Col>
</Table>, document.getElementById('#app'));

api

Table

• dataArray data you want display on table
• isKeyString key of column(required)
• remoteBoolean if set true , which means you want to handle data change, el-table will give control of onPageChange, onSortChange, sortName, sortOrder to parent component
• dataSizeNumber total size of data, only useful when remote enabled
• sortOrderString sort order, asc or desc
• sortNameString sort field in table
• onSortChangeFunction(sortName, sortOrder) sort function, sortOrder will be asc or desc
• topPaginationBoolean default is false, set true to enable pagination in top
• paginationBoolean default is false, set true to enable pagination in bottom
• optionsObject configuration of pagination
  • pageNumber means the page you want to show as default
  • prevLabelString | Number | Node customize previous page button
  • nextLabelString | Number | Node customize next page button
  • startLabelString | Number | Node customize page button of back to first page
  • endLabelString | Number | Node customize page button of back to last page
  • sizePerPageNumber size per page, default is 10
  • paginationSizeNumber pagination bar length, default is 6
  • showTotalPagesBoolean default id true, whether show total pages or not
  • onPageChangeFunction(page, sizePerPage) callback when page changed
  • paginationShowsTotalBoolean | Function(start, to , total) display a text that the total number and current lines displayed, default is false
• selectRowObject configuration of row selection (be sure isTree is false）
  • mode'none', 'radio', 'checkbox' type of selector, default is none
  • bgColorString background color of tag tr when selected
  • selectedArray selected row keys
  • hideSelectColumnBoolean hide select column or not default is false
  • onSelectFunction(isSelected, row) callback when select
  • onSelectAllFunction(isSelected, data) callback when select all
• noDataTextString | Number | Node default is 暂无数据, text show when there is no data
• lineWrapellipsis || break default is ellipsis
• stripedBoolean default is false
• hoverBoolean default is true
• hoverStyleObject default is {backgroundColor: '#f4f5f9'}, will effect tag tr
• widthNumber | String width
• heightNumber | String height
• titleFunction(data) | String | Number | Node table title
• footerFunction(data) | String | Number | Node table footer
• nestedHeadArray nestedHead([[],[]]), string or {label: '', colspan: 1, rowspan: 1}

Col

• dataFieldString key of column
• dataAlignString text align of column
• dataFixedString this column will be fixed when table scroll, left, right or auto, default is auto
• dataSortBoolean enable table sorting, default is false(only sort the first level of data when isTree)
• dataFormatFunction(cell, row, index, colIndex, col) customize format function
• renderFunction(rowIndex) render function to set colspan and rowspan attribute for tr, it's return an object {rowspan: value, colspan: value}. value = 0 means don't render this cell
• colSpanNumber set attribute colspan to table head column
• hiddenBoolean hide this column or not, default is false
• widthNumber | String width of column

Pagination

• currentNumber current page, default 1
• dataSizeNumber total size of data
• sizePerPageNumber size per page, default is 10
• paginationSizeNumber pagination bar length, default is 6
• hideEndLabelNumber default id false, whether show end label or not
• hideStartLabelNumber default id false, whether show start label or not
• showTotalPagesNumber default id true, whether show total pages or not
• prevLabelString | Number | Node customize previous page button
• nextLabelString | Number | Node customize next page button
• startLabelString | Number | Node customize page button of back to first page
• endLabelString | Number | Node customize page button of back to last page

SimplePagination

• currentNumber current page, default 1
• dataSizeNumber total size of data
• sizePerPageNumber size per page, default is 10
• showTotalPagesNumber default id true, whether show total pages or not
• prevLabelString | Number | Node customize previous page button
• nextLabelString | Number | Node customize next page button

Dropdown

• listArray list of dropdown menus ,like: [1, 2 ,3, 4], or [{href: '/', label: 'index'}]
• childrenArray content of dropdown button
• onClickFunction(node) invoke when click menu items