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

@fantai/table

v0.0.17

Published

``` import { FtTable, FtTableColumn, FtTableStockColumn } from '@fantai/table';

Downloads

22

Readme

使用方式

import { FtTable, FtTableColumn, FtTableStockColumn } from '@fantai/table';

<ft-table :items="data">
    <ft-table-column title="名称" field="ZhongWenJianCheng">
        <template v-slot:header="{ column }">标题</template>
        <template v-slot:cell="{ column, item }">...</template>
    </ft-table-column>
</ft-table>

table 参数

items: any[] 表格数据

itemId: string | (item) => string 行的id来源,用作生成数据行的key,可以是字符串(取item中对应字段),可以是通过一个function获取

itemAdaptor: string | (item) => object 行数据的适配器,可以将行数据做些修改后返回,只对当前显示数据调用该方法,比如在数据量大的列表中,table的items尽量不要频繁变化,避免表格整体重新渲染,这时设置itemAdaptor只对显示中的部分数据做处理

hideHeader: boolean 是否隐藏表头

fixedHeader: boolean 是否固定表头

columnWidth: string 所有列的统一列宽

simulateScrollX: boolean 是否横向使用模拟滚动,ios默认为true

table 监听事件

range: ({ current: number, count: number, start: number, end: number}) 表格纵向滚动时显示区域变化时触发,current 当前显示的第一条数据index,count 当前显示数据个数,start 数据缓存(渲染的数据)开始位置,end 数据缓存(渲染的数据)结束位置

part: (partItems: any[]) 表格纵向滚动时当前渲染数据变化时触发,partItems 当前渲染的部分数据

itemClick: (item: any, event: Event) 点击行数据时触发,item 点击的行数据

table-column 参数

id: string 列的id,用作生成列的key,默认等于field

title: string 默认显示的表头标题

field: string 默认显示的数据字段名

fixed: boolean 是否固定列

align: string | undefined 列数据的对齐方式,取值left|right|center

table-column 监听事件

cellClick: ({ item: any, column: any, event: Event }) 点击某格数据时触发

table-stock-column 参数

继承table-column所有参数

sortable: boolean 列是否可以排序

sortableField: string 排序的字段,默认等于列的field

updownStyle: boolean 是否自动设置涨跌样式

relateField: string 涨跌相关数据字段,根据对应字段数据值大于小于0判断涨跌,默认和field相同,指定compareField则和compareField值做比较

compareField: string 涨跌比较数据字段,比较当前值和对应字段的值大小判断涨跌('last'表示和上一次值比较)

type: string 数据格式化类型,取值 price|volume|ratio|text ,默认不设置按照price保留两位小数格式化,volume超过万/亿会加上单位,ratio按照百分数格式化后加上%,text则不做数据格式化按照文本输出

precision: number 格式化时保留小数位数

unit: string 数据按照指定单位自动格式化后添加单位,取值 ''|'K'|'M'|'B'|'K/M'|'K/M/B'|'万'|'亿'|'万/亿'|'%'

useDefault: string | boolean 是否使用默认值,默认显示--,字符串类型表示需要显示的默认值

isAutoPrec: boolean 是否自动进行精度控制,true时 对于不到单位转换的情况时直接取整

isAbs: boolean 是否显示数字绝对值

withSign: boolean 是否显示正负符号

updown: number 涨跌平设置,大于0上涨(添加class up),小于0下跌(添加class down)

table-stock-column 监听事件

sort: ({ field: string, desc: boolean, event: Event }) 点击排序表头触发的排序事件,field对应字段,desc排序方向true为降序,false为升序,undefined为不排序