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

table-render

v2.1.4

Published

中后台表格解决方案

Downloads

353

Readme

易用且轻量的中后台列表解决方案,常用于搜索列表页快速生成

官网

https://xrender.fun/table-render

优势

  1. 开箱即用:以最简单的方式配置 API 请求和表头字段,就能生成一个好用的搜索列表。
  2. XRender 生态:搜索部分集成 FormRender,以最小成本快速生成搜索面板。
  3. 无缝对接:表格部分沿用 Ant Design Table, API 无缝对接,降低用户使用成本。
  4. 数据模版:表格列内置多种数据展示模版,减少自定义 Render 函数配置。
  5. 多种形态:支持搜索栏、工具栏、表格内容,根据业务需求相互组合展示多种形态。

何时使用

  1. 用于查看和处理多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作,常有导航到详情页面的作用。
  2. 表格列表建议将重要信息和操作展示出来,不重要信息直接收起,可以帮助用户更高效的查看、处理、查找数据。

如何使用

安装

table-render 依赖 ant design,单独使用不要忘记安装~

npm i table-render --save

代码演示

/**
 * transform: true
 * defaultShowCode: true
 * background: 'rgb(245,245,245)'
 */
import React from 'react';
import TableRender from 'table-render';
import { Button } from 'antd';
import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';

const dataSource = [];
for (let i = 0; i < 6; i++) {
  dataSource.push({
    id: i.toString(),
    title: `标题${i + 1}`,
    created_at: new Date().getTime(),
  });
}

const schema = {
  type: 'object',
  labelWidth: 70,
  properties: {
    title: {
      title: '标题',
      type: 'string'
    },
    created_at: {
      title: '创建时间',
      type: 'string',
      format: 'date'
    }
  }
};

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '创建时间',
    key: 'since',
    dataIndex: 'created_at',
    valueType: 'date',
  },
  {
    title: '操作',
    render: (row, record) => <a onClick={() => alert(row.title)}>编辑</a>,
  }
];

const Demo = () => {
  
  const api = () => {
    return {
      data: dataSource,
      total: dataSource.length
    };
  };

  return (
    <TableRender
      search={{ schema }}
      request={api}
      columns={columns}
      title='最简表格'
      toolbarRender={ 
        <>
          <Button>查看日志</Button>
          <Button>导出数据</Button>
          <Button type='primary'>
            <PlusOutlined />
            新增
          </Button>
        </>
      }
    />
  );
}

export default Demo;