# antd-graphql-table

> 🚀 antd-graphql-table

Latest version **1.9.5** (published 2020-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install antd-graphql-table
pnpm add antd-graphql-table
yarn add antd-graphql-table
bun add antd-graphql-table
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.5 |
| Published | 2020-11-19 |
| First published | 2020-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 103.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | xudong |

## Links

- npm: https://www.npmjs.com/package/antd-graphql-table
- Repository: https://github.com/shadowolfapp/antd-graphql-table
- Homepage: https://github.com/shadowolfapp/antd-graphql-table#readme
- Issues: https://github.com/shadowolfapp/antd-graphql-table/issues
- npm.io page: https://npm.io/package/antd-graphql-table

## Dependencies (6)

- [qs](https://npm.io/package/qs.md) ^6.9.4
- [antd](https://npm.io/package/antd.md) ^4.5.3
- [keyboardjs](https://npm.io/package/keyboardjs.md) ^2.6.3
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [antd-simple-table](https://npm.io/package/antd-simple-table.md) ^1.4.11
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.1

## Recent versions

- 1.9.5 (latest) — 2020-11-19
- 1.9.4 — 2020-11-12
- 1.9.3 — 2020-11-11
- 1.9.2 — 2020-11-05
- 1.9.1 — 2020-10-27
- 1.9.0 — 2020-10-26
- 1.8.4 — 2020-10-21
- 1.8.3 — 2020-10-21
- 1.8.2 — 2020-10-13
- 1.8.1 — 2020-09-14
- 1.8.0 — 2020-09-14
- 1.7.3 — 2020-09-10
- 1.7.2 — 2020-09-08
- 1.7.1 — 2020-09-08
- 1.7.0 — 2020-09-07
- … 31 more at https://npm.io/package/antd-graphql-table/versions

## README

<h1>🚀 antd-graphql-table</h1>

- [✨ 特色功能](#-特色功能)
- [📦 安装](#-安装)
- [API](#api)
  - [props](#props)
  - [hooks](#hooks)
- [🔨 使用说明](#-使用说明)
  - [筛选器配置](#筛选器配置)
  - [翻页配置](#翻页配置)
  - [graphql 请求参数设置](#graphql-请求参数设置)
    - [最简单用法](#最简单用法)
    - [自定义每次请求的 variables](#自定义每次请求的-variables)

<center>
  <a class="other-link" href="https://github.com/shadowolfapp/antd-simple-table" alt="https://github.com/shadowolfapp/antd-simple-table"><i class="fab fa-github-square fa-2x" ></i></a>
</center>

<br/>

## ✨ 特色功能

- 通过配置生成自定义的筛选器与排序器，并将参数存进 url，刷新页面会保留筛选和排序条件
- 基于 graphql 的分页，默认会帮你设置好请求需要的 first、last、 before、 after，刷新页面会停留在当前页
- 将当前筛选排序分页参数存进 localstorage，可以利用其来跳转到当前参数页

<br/>

## 📦 安装

```
npm i antd-graphql-table
```

<br/>

## API

### props

| 参数              | 说明                                                                             | 类型                                                                                                                                |
| ----------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| columns           | 列配置                                                                           | Array<GraphQLTableColumnType\<T>>                                                                                                   |
| id                | 筛选排序分页参数存进 localstorage 的 key 值为 `graphql-table-query-params:${id}` | string                                                                                                                              |
| pageSize          | 自定义每页条数，默认为 10                                                        | string \| number                                                                                                                    |
| PageInfo          | 分页需提供的参数                                                                 | { \_\_typename?: "PageInfo";startCursor?: string \| null; endCursor?: string \| null;hasPreviousPage: boolean;hasNextPage: boolean} |
| onVariablesChange | 页面第一次加载、筛选排序分页改变时触发回调事件                                   | function(variables: Variables)                                                                                                      |

<br/>

### hooks

```javascript
import { useGoBackPage } from "antd-graphql-table";

// 导出一个自定义的函数名，传入两个参数，第一个是要跳转到的表格路由，第二个为表格 id
const goBack = useGoBackPage("/shop", "id");
```

<br />

## 🔨 使用说明

### 筛选器配置

&emsp; 需要排序的列，设置 sorter 为 true。

&emsp; 需要筛选的列，设置 filterType， 如果筛选类型是单选或者多选，需要设置 filters，每项需设置 text 和 value。

```javascript
<GraphQLTable
  columns={[
    {
      title: "日期",
      key: "day",
      dataIndex: "day",
      sorter: true,
      filterType: FilterType.DATE_RANGE_PICKER,
    },
    {
      title: "颜色",
      key: "color",
      dataIndex: "color",
      filterType: FilterType.CHECKBOX,
      filters: [
        { text: "红", value: "red" },
        { text: "蓝", value: "blue" },
      ],
    },
  ]}
/>
```

FilterType 目前支持的值类型如下：

| 类型                              | 描述       |
| --------------------------------- | ---------- |
| FilterType.INPUT                  | 输入框     |
| FilterType.INPUT_NUMBER           | 数字输入框 |
| FilterType.RADIO                  | 单选       |
| FilterType.CHECKBOX               | 多选       |
| FilterType.DATE_RANGE_PICKER      | 日期（天） |
| FilterType.DATE_TIME_RANGE_PICKER | 日期（秒） |

<br/>

### 翻页配置

&emsp;需配置 **PageInfo**

```javascript
// 需使用没有缓存的策略 no-cache
const [getDiscounts, { data, loading, refetch }] = useDiscountsLazyQuery({
  notifyOnNetworkStatusChange: true,
  fetchPolicy: "no-cache",
});

<GraphQLTable id="user" PageInfo={data?.discounts.pageInfo} />;
```

<br/>

### graphql 请求参数设置

&emsp; 组件暴露出一个 **onVariablesChange** 方法，提供两个参数 **variables**、**pageInfo**，包含筛选排序和翻页（query、orderBy、after、before、first、last）

&emsp; <font color="red"> onVariablesChange 会在页面第一次加载时触发一次，不要在 useEffect 中请求第一次的数据。</font>

<br />

#### 最简单用法

```javascript
// 需使用没有缓存的策略 no-cache
const [getDiscounts, { data, loading, refetch }] = useDiscountsLazyQuery({
  notifyOnNetworkStatusChange: true,
  fetchPolicy: "no-cache",
});

// variables 默认为 first: 10, 当 url 参数包含 before，会变为 last: 10
<GraphQLTable onVariablesChange={(variables) => getDiscounts({ variables })} />;
```

<br />

#### 自定义每次请求的 variables

```javascript
<GraphQLTable
  id="user"
  onVariablesChange={(variables) =>
    getDiscounts({
      variables: {
        ...variables,
        query: `${variables.query || ""} name:"123"`.trim(),
      },
    })
  }
/>
```

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