tgg-table-scroll

1.0.12 • Public • Published

tgg-table-scroll

项目内部有个table的滚动需求, 于是封装了一个,方便以后再用,语言是react

Install

# With npm
npm install tgg-table-scroll
# With yarn
yarn add tgg-table-scroll

Props

props目前有4个: width, height, columns, data,

API 说明 必填 类型 默认值
width 组件的宽度 false string '100%'
height 组件的高度 false number 250
listItemHeight listItem高度 false number 50
columns 表格列的配置 false ColumnsType[] -
data 数据数组 false object[] -
handleHover hover事件回调key false Function -
currentTopIndex 回调顶部listItem key false Function -

ColumnsType[]

列配置项是固定的,目前必传字段 name 和 width

API 说明 类型 默认值
name 列名称 string -
width 列的宽度 string -

const columns: ColumnsType = [
    { name: '排名', width: '20%' },
    { name: '平台名称', width: '50%' },
    { name: '综合指数, width: '30%' },
]

Data[]

数据配置项【不是固定的字段】,用户可根据自己业务的需求,【随意传入】需要的字段,代码内部做了遍历,列项将全部渲染出来,以下是个示例:


API 说明 类型 默认值
order 排名 string
platName 平台名称 string -
cpIndex 综合指数 string -

const columns: ColumnsType = [
    { order:1 platName:'mockData1111111',cpIndex:'0.4857' },
    { order:2 platName:'mockData2222222',cpIndex:'0.3956' },
    { order:3 platName:'mockData3333333',cpIndex:'0.3615' },
    { order:4 platName:'mockData4444444',cpIndex:'0.4857' },
    { order:5 platName:'mockData5555555',cpIndex:'0.3165' },
    { order:6 platName:'mockData6666666',cpIndex:'0.517' },
    { order:7 platName:'mockData7777777',cpIndex:'0.6111 },
    { order:8 platName:'mockData8888888',cpIndex:'0.3591' },
    { order:9 platName:'mockData9999999',cpIndex:'0.2166' },
]

引用示例

<TggTableScroll
    width="60%"
    height={250}
    listItemHeight={50}
    columns={columns}
    data={addKey(shortParkList)}
    handleHover={handleHover}
    currentTopIndex={currentTopIndex}
  clickHandler={clickHandler}
/>

Image text

Readme

Keywords

none

Package Sidebar

Install

npm i tgg-table-scroll

Weekly Downloads

0

Version

1.0.12

License

ISC

Unpacked Size

14.6 kB

Total Files

5

Last publish

Collaborators

  • tiangg