# rg-table

> smart table for regular

Latest version **1.0.1** (published 2017-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install rg-table
pnpm add rg-table
yarn add rg-table
bun add rg-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-01-16 |
| First published | 2017-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wangdong |
| Maintainers | wangdong5 |
| Keywords | table, regular |

## Links

- npm: https://www.npmjs.com/package/rg-table
- npm.io page: https://npm.io/package/rg-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2017-01-16
- 1.0.0 — 2017-01-16

## README

## rg-table

> 基于regular的table组件,内部指定fetch进行数据请求,并且具备服务端分页、服务端搜索以及客户端全局搜索等功能,非常小巧和灵活。

### 安装

```
npm install --save-dev rg-table
```

BTW: 完美运行rg-table的前提需要`regular`、`lodash`、`font-awesome`,`apm-ui`等环境支持。

### Example

#### 安装运行

```
npm install                         # 安装依赖
puer -a ./example/mock/data.js      # mock和静态服务器,前提安装有puer
```

> 
数据测试:[`http://localhost:8000/api/blogs?limit=20&offset=0`](http://localhost:8000/api/blogs?limit=20&offset=0)
页面访问:[`http://localhost:8000/example/index.html`](http://localhost:8000/example/index.html)

### API

#### Options

| 参数 | 类型 | 默认值 | 数据流向 | 描述 | 
| ------| ------ | ------ | ------ | ------ |
| service | function |  | outer => inner | fetch服务,用于异步请求数据 |
| option  | object   |  | outer => inner | 请求url、分页参数、扩展参数       |
| option.limit   | number   |  10 | outer => inner |  分页limit      |
| option.offset  | number   |  0  | outer => inner |  分页offset     |
| option.url     | string   |     | outer => inner |  请求url        |
| option.{extends}     | string   |     | outer => inner |  扩展参数  |
| headers | object |  | outer => inner | 列表头信息 |
| headers.title | string |  | outer => inner | 列表显示标题 |
| headers.name | string |  | outer => inner | 列表名称 |

示例:

```
this.data.service = fetchService;
this.data.option = {
  limit: 10,
  offset: 0,
  url: '/api/blogs'
};
this.data.header = [{
    title: "编号",
    name: "id"
  }, {
    title: '主题',
    name: 'title'
  }, {
    title: "时间",
    name: "time"
  }];
```

#### Methods

| 方法名称 | 参数 | 描述 | 
| ------| ------ | ------ |
| refresh |  | 重置当前页,重新获取当前页数据   |
| search | object,例如{title:xx}   | 服务器端请求搜索   |

示例:

```
this.$refs.list.search({title: this.data.title});
```

---
_Source: https://npm.io/package/rg-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._