npm

@alilc/pro-table

1.0.0 • Public • Published

title

deep-table

intro component

API

参数名 说明 类型 默认值
width table 宽度 Number/String -
height table 高度 Number/String -
loading 表格是否在加载中 Boolean false
device 渲染视图 可选值 'desktop', 'tablet', 'desktop' String 'desktop'
data 表格展示的数据源 Array []
onFetchData 动态加载数据 Function -
columns 列配置项 Array
mobileMode 移动端模式, 可选值'normal', 'card' String 'normal'
actionBar table 顶部操作按钮组 Array []
isPagination 是否显示分页 Boolean true
pagination 翻页器配置项 Object -
showMiniPager 顶部是否显示迷你版翻页器 仅pc端支持 Boolean -
actionColumn table 操作列 Array []
actionTitle 操作列标题title String -
actionType 操作按钮的类型 可选值 'link' , 'button' String -
actionFixed 操作列是否固定, 可选值 'none', 'right' String -
actionWidth 操作列宽度 Number/String -
showActionBar 是否显示顶部操作按钮 Boolean -
actionBar 顶部操作按钮配置 Array []
showSearch 是否显示搜索项 Boolean -
searchBarPlaceholder 搜索项 Placeholder String -
showCustomColumn 是否显示自定义列 Boolean -
showLinkBar 是否显示外链条 Boolean -
linkBar 外链条配置项 Array []
customBarItem 自定义栏配置 Function -
actionHidden 隐藏操作动作 Boolean -
rowOrder 行排序配置 Object -
mobileExpandViewMode 手机端存在嵌套表格时的展示模式,可选值'normal'嵌套内容直接在行里面收缩展示,'detail'嵌套内容由点击单行进入详情展示 String -
primaryKey dataSource当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中 String 'id'
theme 表格主题 表格是否具有边框: border, 表格是否是斑马线: zebra, 可选值: 'zebra', 'border', 'split', String 'split'
hasHeader 表格是否具有头部 Boolean true
fixedHeader 表头是否固定,该属性配合maxBodyHeight使用,当内容区域的高度超过maxBodyHeight的时候,在内容区域会出现滚动条 Boolean -
maxBodyHeight 最大内容区域的高度,在fixedHeader为true的时候,超过这个高度会出现滚动条 Number/String -
stickyHeader 表头是否是sticky Boolean -
isTree 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table Boolean -
indent 在tree模式下的缩进尺寸, 仅在isTree为true时候有效 Number -
showRowSelector 是否启用选择模式 Boolean -
onSelect Function(selected:Boolean, record:Object, records:Array) 用户手动选择/取消选择某行的回调 Function -
onSelectAll Function(selected:Boolean, records:Array) 用户手动选择/取消选择所有行的回调 Function -
rowSelector 选择selection的模式, 可选值 'checkboxSelector', 'radioSelector' String 'checkboxSelector'
isRowSelectorDisabled 选择行是否禁用 Function -
onRowClick 点击表格每一行触发的事件
签名:
Function(record: Object, index: Number, e: Event) => void
参数:
record: {Object} 该行所对应的数据
index: {Number} 该行所对应的序列
e: {Event} DOM事件对象
Function () => {}
onRowMouseEnter 悬浮在表格每一行的时候触发的事件
签名:
Function(record: Object, index: Number, e: Event) => void
参数:
record: {Object} 该行所对应的数据
index: {Number} 该行所对应的序列
e: {Event} DOM事件对象
Function () => {}
onRowMouseLeave 离开表格每一行的时候触发的事件
签名:
Function(record: Object, index: Number, e: Event) => void
参数:
record: {Object}该行所对应的数据
index: {Number} 该行所对应的序
e: {Event} DOM事件对象
Function () => {}
onResizeChange 重设列尺寸的时候触发的事件
签名:
Function(dataIndex: String, value: Number) => void
参数:
dataIndex: {String} 指定重设的字段
value: {Number} 列宽变动的数值
Function () => {}
onColumnsChange 自定义列变更时的回调 Function (columns) => {}
loadingComponent 自定义 Loading 组件
请务必传递 props, 使用方式: loadingComponent={props => <Loading {...props}/>}
签名:
Functio(props: Object) => void
参数:
props: {Object} 当前点击行的key
Function -
expandedRowIndent 额外渲染行的缩进 Array -
hasExpandedRowCtrl 是否显示点击展开额外渲染行的+号按钮 Boolean -
expandedRowRender 额外渲染行的渲染函数
签名:
Function(record: Object, index: Number) => Element
参数:
record: {Object} 该行所对应的数据
index: {Number} 该行所对应的序列
返回值: {Element} 渲染内容
Function -
onRowOpen 在额外渲染行或者Tree展开或者收起的时候触发的事件
签名:
Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void
参数:
openRowKeys: {Array} 展开的渲染行的key
currentRowKey: {String} 当前点击的渲染行的key
expanded: {Boolean} 当前点击是展开还是收起
currentRecord: {Object} 当前点击额外渲染行的记录
Function -
onShowSearch 显示搜索框之后的回调,仅移动端生效。
签名:
Function(table) => void
Function -
onHideSearch 隐藏搜索框之后的回调,仅移动端生效。
签名:
Function(table) => void
Function -

移动端卡片模式专用

参数名 说明 类型 默认值
mobileDefaultCardColumns 移动端卡片模式 最多显示内容条数 Number
mobileActionsStyle 移动端卡片模式 操作列是否使用button模式,为false的情况下,显示的是右上角...模式 Boolean false

pagination 翻页器 API

参数名 说明 类型 默认值
size 分页组件大小 可选值: 'small', 'medium', 'large' Enum 'medium'
type 分页组件类型 可选值: 'normal', 'simple', 'mini' Enum 'normal'
shape 前进后退按钮样式 可选值: 'normal', 'arrow-only', 'arrow-prev-only', 'no-border' Enum 'normal'
pageShowCount 页码显示的数量,更多的使用...代替 Number 5
pageSize 一页中的记录数 Number 10
pageSizeSelector 每页显示选择器类型 可选值: false, 'filter', 'dropdown' Enum false
pageSizeList 每页显示选择器可选值 Array/Array [5, 10, 20]
pageNumberRender 自定义页码渲染函数,函数作用于页码button以及当前页/总页数的数字渲染
签名:
Function(index: Number) => ReactNode
参数:
index: {Number} 分页的页码,从1开始
返回值: {ReactNode} 返回渲染结果
Function index => index
pageSizePosition 每页显示选择器在组件中的位置 可选值: 'start', 'end' Enum 'start'
useFloatLayout 存在每页显示选择器时是否使用浮动布局 Boolean false
hideOnlyOnePage 当分页数为1时,是否隐藏分页器 Boolean false
showJump type 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域 Boolean true
link 设置页码按钮的跳转链接,它的值为一个包含 {page} 的模版字符串,如:http://www.taobao.com/{page} String -
popupProps 弹层组件属性,透传给Popup Object -
paginationPosition 翻页器显示位置 可选值: 'left', 'right' String 'right'

数据源配置例子

{
    "data":[
        {
            "contractDate" : {
                "start" : 1534942658570,
                "end" : 1534944858570,
            },
            "entryDate" : 1534942658570,
            "name" : "王小",
            "id" : 1,
            "salary" : 35000,
            "email" : "xw_1@abc.com",
            "moneyRange" : {
                "lower" : 108,
                "upper" : 944,
            },
        }
        ...
    ],
    "currentPage":1,
    "totalCount":30,
}

columns 配置的例子

"columns" : [
                {
                  //分组
                  isGroup: true,
                  title: 'xxxx',
                  children: [
                    {/*{},*/}
                    {/*{}*/}
                  ]
                },
                {
                    "dataKey" : "name", //value的字段名
                    "editType" : "text",//编译状态下的编辑类型,目前支持select,text,radio,date,custom(自定义编辑)
                    "dataType" : "text",//渲染格式化的类型,目前支持text,timestamp,cascadeTimestamp,money,moneyRange
                    "width" : 150,
                    "title" : "姓名",//标题b
                    "align" : "right", //对齐
                    "sortable" : true, //可排序
                    "hidden" : false,//是否隐藏列
                    "highlight" : true,//是否着重突出显示,字体加粗,仅限手机端
                     "editProps" : {    //编辑状态下的配置
                        rules: [{  //校验规则,当saveRow的时候会调用
                            required: true,
                            message: 'can not be empty',
                            trigger: ['blur','onChange']
                        }]
                     },
                    "canEdit":(rowData)=>{//动态控制列是否可以编辑
                        return true;
                    },
                },
                {
                     "dataKey" : "sex",
                    "editType" : "radio",
                     "width" : 150,
                     "title" : "性别",
                     "editProps" : {
                         "dataSource" : [ //
                                {label:'男', value:'男'},
                                  {label:'女', value:'女'},
                    ]
                    },
                 },
                {
                     "dataKey" : "level",
                    "editType" : "select",
                     "width" : 150,
                     "title" : "级别",
                     "editProps" : {
                         "dataSource" : [
                                {label:'高级', value:'高级'},
                                  {label:'中级', value:'中级'},
                                {label:'初级', value:'初级'},
                    ]
                    },
                 },
                {
                    "dataKey" : "entryDate",
                    "editType" : "date",
                    "dataType" : "timestamp",
                    "width" : 180,
                    "title" : "入职日期",
                    "timeFormatter" : "YYYY-MM-DD",//
                },
                {
                    "dataKey" : "salary",
                    "dataType" : "money",
                    "width" : 150,
                    "title" : "月薪",
                    "editType" : "custom",
                    "editProps" : {
                        renderField:(props)=>{  //定义如何渲染自定义编辑组件
                            return <Input {...props}/>;
                        },
                        rules: [{  //
                            required: true,
                            message: 'can not be empty',
                            trigger: []
                        }]
                     },
                },
                {
                    "dataKey" : "test1",
                    "width" : 150,
                    "title" : "自定义列",
                    "render" : function (value, index, rowData) {  //自定义渲染
                        return "我是自定义列";
                    },
                },
                {
                    "dataKey" : "contractDate",
                    "dataType" : "cascadeTimestamp", //
                    "width" : 200,
                    "title" : "合同日期",
                    "timeFormatter" : "YYYY-MM-DD",
                },
            ],

actionBar 配置的例子

    "actionBar" : [
        {
            "title" : "操作1",
            "callback" : function () {
                console.log('操作1', arguments);
            },
        },
        {
            "title" : "操作2",
            "callback" : function () {
                console.log('操作2', arguments);
            },
        },
    ],

actionColumn 配置的例子

    "actionColumn" : [
         {
             "title" : "编辑",
             "callback" :  (rowData)=> {
                 return me.tableRef.current.getInstance().editRow(rowData);
             },
             "device":["desktop"]
         },
         {
             "title" : "保存",
             "callback" : (rowData)=> {
                 return me.tableRef.current.getInstance().saveRow(rowData); //必须return Promise,因为校验是异步过程
             },
             "mode":"EDIT"
         },
         {
             "title" : "重置",
             "callback" : (rowData)=> {
                 return me.tableRef.current.getInstance().resetRow(rowData);
             },
             "mode":"EDIT"
         },
         {
             "title" : "详情",
             "callback" : function () {
                 console.log('详情', arguments);
             },
         },
         {
             "title" : "删除",
             "callback" : function () {
                 console.log('删除', arguments);
             },
         },
         {
             "title" : "复制",
             "callback" : function () {
                 console.log('复制', arguments);
             },
         },
         {
             "title" : "下架",
             "callback" : function () {
                 console.log('下架', arguments);
             },
             "isDisabled" : function (item, index, actionRowData) {
                 console.log('isDisabled', arguments);
                 return true;
             },
              "mode":"EDIT"
         },
     ],

actionBar 配置的例子

    "linkBar" : [
        {
            "title" : "外链1",
            "callback" : function () {
                console.log("外链1", arguments);
            },
        },
        {
            "title" : "外链2",
            "callback" : function () {
                console.log("外链2", arguments);
            },
        },
    ],

行排序配置例子

    "rowOrder" : {
        "defaultValue" : {
            "text" : '排序方式一',
            "value" : '123',
        },
        "items" : [
            {
                "text" : '排序方式一',
                "value" : '123',
            },
            {
                "text" : '排序方式二',
                "value" : '456',
            },
        ],
        "onChange" : function (data) {
            console.log(data);
        },
    },

自定义栏配置例子

    "customBarItem" : {
        "render" : function () {
            return (
                <div style={{color : 'red'}} onClick={(e) => {
                    console.log(e);
                }}>自定义内容</div>
            );
        },
        "rightRender": () { },
        "bottomRender": () {}
    },

混合模式 配置的例子

    props:{
        "expandedRowRender" : (record, index) => {
            return (
                <div style={{lineHeight : '22px'}}>
                    我是展开的内容 <br/>
                    我是展开的内容 <br/>
                </div>
            );
        },
        "expandedRowIndent" : [2, 2],
        "onRowOpen" : (openRowKeys, currentRowKey, expanded, currentRecord) => {
            console.log(openRowKeys, currentRowKey, expanded, currentRecord)
        },
    }

pagination 配置的例子

 'pagination' : {
        'size' : "medium",
        'type' : "normal",
        'shape' : "arrow-only",
        'pageSize' : 10,
        'pageSizeSelector' : false,
        'pageSizeList' : "5,10,20",
        'pageSizePosition' : "end",
        "paginationPosition" : "right",
        'hideOnlyOnePage' : false,
        'showJump' : true,
    }

Readme

Keywords

Package Sidebar

Install

npm i @alilc/pro-table

Weekly Downloads

7

Version

1.0.0

License

MIT

Unpacked Size

4.57 MB

Total Files

180

Last publish

Collaborators

  • 1ncounter
  • leoyuan
  • whatever_lll
  • yang1996
  • jun.li
  • qingniaotonghua
  • woshilaoge
  • jack.lianjie
  • otakuxv
  • zyy7259
  • sun2ama
  • hujiulong
  • liujuping123
  • akirakai
  • xingmolu
  • eternalsky
  • mark-ck
  • hzd822
  • clarencep
  • alvarto
  • leoyuan88