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

@beisen-platform/ux-standard-table

v1.0.20

Published

用于大量结构化的数据展示,有排序、分页、自定义操作列,支持头部冻结、首尾列冻结;宽度有紧凑、始终、宽松三种模式

Downloads

94

Readme

属性说明

| 属性 | 说明 | 类型 | 默认值 | | ----- | ---- | ---- | ---- | | loading | table组件loading状态 | bool | false| | singleChecked | table是否是单选 | bool | false | | selectedData | table默认选中数据的ids | array | [] | | onSelect | table行选中之后的回调函数,selectedItems:table选中行的所有数据,与metadata中的biz_data中行记录结构一致,outsideSelectedIds是selectedData的子集,排除了table操作过程中取消选中的那部分selectedData的数据 | function (selectedItems, outsideSelectedIds) {} | - | | reloadData | 重新加载table列表数据 | function (tableMetaData, reloadReson) {} | [] | | onCrossPageSelectChanged | table跨页全选点击回调 | function (isActive) {} | bool | | tableSize | table组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部 | string | Auto | | tableContainer | 配置tableSize为stretch的时候使用,父容器的DOM | DOM | table组件所在的parentElement | | containerHeight | 给table一个计算好的显式高度 | int | - | | containerWidth | 给table一个计算好的显式宽度 | int | - | | ext_genColDef | 重写某个列 | function (colData, index, column) {} | - | | ext_getColumns | 重写列(拿到所有的列) | function (columns) {} | - | | columnConfigUrl | 获取表格列配置项接口URL | string | /api/v2/UI/CustomListView | | defaultExpandKeys | 默认展开行的key数组 | array | [] | 否 | | | expandColumnKeys | 可点击展开列的字段名数组 | array | [] | 否 | | | expandedRowRender | 设置展开的行渲染内容 | function(rowData, rowIndex) | 无 | 否 | 如果是可展开,此项是必填 | | ellipsis | 内容超过单元格宽度是否显示...,默认为false,也就是会换行 | boolean | false | 否 | 强烈建议不要设置为true,会导致性能问题(数据量过大) |

DataTable使用方式

<DataTable
  {...this.tableDefin}   //table的元数据,平台配置生成
  loading={this.state.isTableFetching} //table组件loading状态
  singleChecked={this.props.singleChecked} //table是否是单选
  onSelect={this.handleDataRowChecked.bind(this)} //table 行选中之后的回调
  selectedData={this.props.resultsData} //当前table已经选中的数据
  reloadData={this.reloadDataTable.bind(this)} //重新刷新当前table
  onCrossPageSelectChanged={this.handleDataTableCrossPageSelect.bind(this)} //跨页全选状态选择后的回调实践
  tableSize={this.props.stretch ? 'stretch' : 'Auto'} //table组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部
  tableContainer={this.props.tableContainer || dataGrid.parentElement}
  containerHeight={this.props.containerHeight} //提供一个计算好的高度,table渲染到这个高度内
  containerWidth={this.props.containerWidth} //提供一个计算好的宽度,table选择到这个宽度内
  mainObjectContext={this.props.mainObjectContext || null} //上下文相关,用于当当前table数据属于子对象的时候,mainObjectContext传递是主对象相关的信息,包含PObjectDataID,parentDataId,parentMetaObjName,用于行操作的逻辑处理
  ext_genColDef={this.genCustomColDef}
  ext_getColumns={this.genCustomColumns}
/>

自定义列渲染

  // 请参考参考基础表格columns属性配置
  let column = {
    dataIndex: string, //列唯一ID
    name: string, //列名
    title: string, //列表头显示
    sorter: string, //列唯一ID
    visible: bool, //是否可见
    fixed: string, // left/right
    width: number, // 后端接口给的宽度居然是 string 转换成数字再传递
    toolTip:bool/function // 省略号时显示的tooltip
    };

  // v:当前列数据,data:当前行数据,index:当前行序号,isExpand:当前行的展开状态
  column.render = (v, data, index, isExpand) => {
      return (<div onClick={() => {
        // 自定义列是否支持点击打开
        handleExpand(data, isExpand)
      }}>
        自定义渲染
      </div>);
  }