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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@aurouscia/table-label-enhance

v0.1.0

Published

sorting, searching on existing html table elements without any dependency. 向html页面上已有的table元素添加排序,搜索,求和,平均数功能,无依赖项。

Readme

sorting, searching on existing html table elements without any dependency.
向html页面上已有的table元素添加排序,搜索,求和,平均数功能,无依赖项。

English: see README.en.md

preview.png

用法

npm install @aurouscia/table-label-enhance
    //引入本模块
    import { TableLabelEnhancer } from '@aurouscia/table-label-enhance';
    //获取表格dom对象
    const target = document.getElementById('target');
    //启动
    const obj = new TableLabelEnhancer(target,{noSortCols:[2],areaToBottom:1});
    // 第二参数为设置对象
    // areaToTop: 数据是从第几行开始的(0为第一行,1为第二行) (默认为1)
    // areaToBottom: 数据是在倒数第几行结束的(0为最后一行,1为倒数第二行) (默认为0)
    // useSort: 使用排序功能 (默认为true)
    // useSearch: 使用搜索功能 (默认为true)
    // noSortCols: 哪些列不要排序功能 (默认为[])
    // noSearchCols: 哪些列不要搜索功能 (默认为[])
    // 关于启用求和、平均数的更多设置见源代码/demo/index.html文件

    //引入自带样式(可选)
    import '@aurouscia/table-label-enhance/styles.css'

会发生什么?

TableLabelEnhancer 对象被构造时,表格的数据部分(由构造函数第二参数设置)的上方会新出现行,里面有排序按钮和搜索输入框。
数据部分必须每行的单元格数量一致,不能有单元格合并,否则模块将拒绝执行。

试用

  1. 克隆本项目
  2. npm install (稍微有点大,有dom单元测试)
  3. npm run preview
  4. 访问显示的url

关于搜索

如果启用搜索功能:

  • 单元格为字符串
    检查搜索词在不在单元格的值中(大小写不敏感)
  • 单元格为数字
    • 准确值
      直接搜索12=12==12将准确匹配
    • 大于小于
      搜索>12<12,将找出所有该列>12 或 <12的行
    • 大于等于,小于等于
      搜索>=12<=12
    • 模糊搜索
      搜索~=12~12,将找出所有>11且<13的数(与目标距离<1)