npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alilc/pro-table

v1.0.0

Published

表格

Downloads

25

Readme

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} 展开的渲染行的keycurrentRowKey: {String} 当前点击的渲染行的keyexpanded: {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" : "[email protected]",
            "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,
    }