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

@m-materials/simple-grid

v1.0.1

Published

一个自带分页以及查询的功能的Table组件

Downloads

20

Readme

SimpleGrid

@m-materials/simple-grid

一个自带分页以及查询的功能的Table组件

可以通过ref调用组织中的findByPage方法手动执行查询

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | -------------- | --------------- | -------- | ------ | ------ | ---- | | columns | Table中columns |必填 | Array | 无 | |
| dataSource | 本地传入数据 |非必填 | Array | 无 | dataSource(本地数据)与store只用配置一个(远程请求)|
| pagination | 分页信息 |非必填 | Object | {current:1,pageSize:15}| |
| store | 远程数据配置 |非必填 | Object | 无 | |
| position | 分页位置 |非必填 | array | ['bottomRight'] | |

store 远程请求配置

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | -------------- | --------------- | -------- | ------ | ------ | ---- | | url | 请求地址 |必填 | string | 无 | |
| method | 请求方式 |非必填 | string | 'post' | axios请求方式 |
| params | 请求时需要传入的额外参数|非必填 | Object | | |
| resMapping | 响应数据映射 |非必填 | Object | 无 | |

resMapping 数据响应映射

  • 不同的请求接口响应数据的封装形式可能不一致,但是无论何种形式组件最终需要pagination(分页信息) 、content(数据)
  • resMapping 用于配置组件中的分页信息、以及数据应该取返回实体中的具体字段路径。

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | -------------- | --------------- | -------- | ------ | ------ | ---- | | content | 数据字段 |非必填 | object | | |
| current | 当前页 |非必填 | string | 'current' | |
| total | 总页数 |非必填 | string | 'total' | |
| pageSize | 每页多少条 |非必填 | string | 'pageSize' | |