# @gaopeng123/rc-paginated-list

> 分页加载列表

Latest version **1.3.7-alpha.1** (published 2024-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gaopeng123/rc-paginated-list
pnpm add @gaopeng123/rc-paginated-list
yarn add @gaopeng123/rc-paginated-list
bun add @gaopeng123/rc-paginated-list
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.7-alpha.1 |
| Published | 2024-08-08 |
| First published | 2022-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 42.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | ligaopeng123 |
| Maintainers | gaopeng123 |
| Keywords | h5, pagination, list |

## Links

- npm: https://www.npmjs.com/package/@gaopeng123/rc-paginated-list
- Repository: https://github.com/ligaopeng123-npm/web-components-repo
- Homepage: https://github.com/ligaopeng123-npm/web-components-repo#readme
- Issues: https://github.com/ligaopeng123-npm/web-components-repo/issues
- npm.io page: https://npm.io/package/@gaopeng123/rc-paginated-list

## Dependencies (3)

- [react-window](https://npm.io/package/react-window.md) ^1.8.7
- [@gaopeng123/hooks.use-boolean](https://npm.io/package/@gaopeng123/hooks.use-boolean.md) ^0.5.0
- [@gaopeng123/hooks.use-pagination](https://npm.io/package/@gaopeng123/hooks.use-pagination.md) ^0.5.0

## Recent versions

- 1.3.7-alpha.1 (latest) — 2024-08-08
- 1.3.5 — 2024-01-30
- 1.3.0 — 2023-12-04
- 1.2.18 — 2023-09-22
- 1.2.15 — 2023-08-17
- 1.2.13 — 2023-08-02
- 1.2.12 — 2023-08-02
- 1.2.11 — 2023-08-01
- 1.0.3 — 2023-03-17
- 1.0.2 — 2023-03-08
- 1.0.2-alpha.10 — 2023-03-08
- 1.0.2-alpha.9 — 2023-03-08
- 1.0.2-alpha.6 — 2023-03-08
- 1.0.2-alpha.5 — 2023-03-08
- 1.0.2-alpha.4 — 2023-03-08
- … 24 more at https://npm.io/package/@gaopeng123/rc-paginated-list/versions

## README

# `rc-paginated-list`

> TODO: 滚动分页表格
>
> [在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-rcpaginatedlist--props)  

## 参数

| 参数         | 说明                      | 类型                                                         | 默认值                   |
| ------------ | ------------------------- | ------------------------------------------------------------ | ------------------------ |
| request      | 数据请求函数              | (params: PaginationProps, abortController: AbortController) => Promise<DataSource> |                          |
| render       | 渲染行数据                | (record: any, style: React.CSSProperties) => ReactNode;      |                          |
| params       | 传递的参数                | {}                                                           | {}                       |
| pagination   | 分页数据                  | PaginationProps = {     pageSize?: number;     current?: number; }; | {current:1, pageSize:20} |
| height       | 表格高度                  | number                                                       | 600                      |
| itemSize     | 每一行数据高度            | number                                                       | 40                       |
| primaryColor | 主要颜色，用户loading加载 | string                                                       | #31CD70                  |

## Usage

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RcPaginatedList, RcDownLoading, RcTopLoading } from "../src";
import "@gaopeng123/rc-paginated-list/rc-paginated-list.cjs.development.css"

const App = () => {
    const request = (params: any, abortController)=> {
        // @ts-ignore
        return new Promise<any>((resolve, reject)=> {
            setTimeout(() => {
                resolve({
                // @ts-ignore
                    data: new Array(20).fill({}).map((item:any, index)=> {
                        return {
                            name: `name-${index * params.current}`
                        }
                    }),
                    total: 100
                })
            }, 1000);
        })
    }
    return (
        <>
            <RcPaginatedList
                request={request}
                render={(record, style)=> {
                    return <div style={style}>{record.name}</div>
                }}
            />
        </>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));
```

---
_Source: https://npm.io/package/@gaopeng123/rc-paginated-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._