Tgg-table-scroll NPM

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	-

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