# @zym-com/table-carousel

> 轮播表格

Latest version **0.0.1** (published 2023-12-21) · 0 weekly downloads

## Install

```sh
npm install @zym-com/table-carousel
pnpm add @zym-com/table-carousel
yarn add @zym-com/table-carousel
bun add @zym-com/table-carousel
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-12-21 |
| First published | 2023-12-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 137.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zhuym |
| Keywords | table-carousel |

## Links

- npm: https://www.npmjs.com/package/@zym-com/table-carousel
- npm.io page: https://npm.io/package/@zym-com/table-carousel

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@feige0629/debug-console](https://npm.io/package/@feige0629/debug-console.md) ^0.1.4
- [@feige0629/react-2d-compiler-sevice](https://npm.io/package/@feige0629/react-2d-compiler-sevice.md) ^0.1.48

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.0.1 (latest) — 2023-12-21

## README

## Install

```bash
npm install @zym-com/@zym-com/table-carousel
```

or

```bash
yarn add @zym-com/@zym-com/table-carousel
```

## Import

```js
import TableCarousel from "@zym-com/table-carousel";
import "@zym-com/table-carousel/dist/style.css";
```

## Basic Usage

```js
import TableCarousel from "@zym-com/table-carousel";
import "@zym-com/table-carousel/dist/style.css";


function App() {
  const options = {
    "configuration": {
        "switchState": false,
        "waitTime": 2000,
        "carousel": "single",
        "hoverPause": true,
        "defalutImageShow": true,
        "headerShow": true,
        "headerHeight": 38,
        "headerStyleType": "default",
        "headertextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 14,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "fontStyle": "normal"
        },
        "headerbgColorSelect": "BgImage",
        "headersolidBgColor": "rgba(0,186,255,1)",
        "headerAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "headerImage": "",
        "headerBGSize": {
            "headerBGSizeW": 100,
            "headerBGSizeH": 100
        },
        "headerBGPosition": {
            "headerBGPositionW": 50,
            "headerBGPositionH": 50
        },
        "headerborderRadius": 0,
        "rowNum": 5,
        "rowStyleType": "default",
        "rowBgColorSelect": "BgImage",
        "oddRowBgsolidBgColor": "rgba(0,59,81,1)",
        "evenRowBgsolidBgColor": "rgba(10,39,50,1)",
        "rowBgsolidBgColorHover": "rgba(255,255,255,0.5)",
        "oddRrowBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "evenRrowBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "rowBgAnamorphismHover": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "oddRowBgImage": "",
        "evenRowBgImage": "",
        "rowBgImageHover": "",
        "rowBgBGSize": {
            "rowBgBGSizeW": 100,
            "rowBgBGSizeH": 80
        },
        "rowBgBGPosition": {
            "rowBgBGPositionW": 50,
            "rowBgBGPositionH": 50
        },
        "borderRadiusName": 0,
        "rowOpacity": 1,
        "indexHeader": "序号",
        "indexcolumnWidth": 120,
        "indexalignselect": "center",
        "indexTextWidth": "80%",
        "indexTextHeight": "50%",
        "indextextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 14,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "indexOpacity": 1,
        "indexBorderWidth": 0,
        "indexBorderType": "solid",
        "indexBorderColor": "rgba(0,59,81,1)",
        "indexPadding": {
            "top": 0,
            "bottom": 0,
            "right": 0,
            "left": 0
        },
        "indexBorderRadius": 0,
        "indexceilPrefixStyleSelect": "image",
        "indexceilPrefixImage": "",
        "indexceilPrefixWH": {
            "indexceilPrefixW": "10px",
            "indexceilPrefixH": "10px"
        },
        "indexceilPrefixborderRadius": 0,
        "indexceilPrefixinput": "$",
        "indexceilPrefixTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 14,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "indexceilPrefixMR": 5,
        "indexceilSuffixStyleSelect": "image",
        "indexceilSuffixImage": "",
        "indexceilSuffixWH": {
            "indexceilSuffixW": "10px",
            "indexceilSuffixH": "10px"
        },
        "indexceilSuffixborderRadius": 0,
        "indexceilSuffixinput": "$",
        "indexceilSuffixTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 14,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "indexceilSuffixML": 5,
        "indexBgColorSelect": "solidBgColor",
        "indexBgsolidBgColor": "rgba(0,59,81,1)",
        "indexBgAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "indexBgImage": "",
        "indexBgBGSize": {
            "indexBgBGSizeW": 100,
            "indexBgBGSizeH": 80
        },
        "indexBgBGPosition": {
            "indexBgBGPositionW": 50,
            "indexBgBGPositionH": 50
        },
        "headerStyleSeries": [],
        "rowStyleSeries": [],
        "ceilSeries": [],
        "indexStyle": false,
        "indexceilPrefixStyle": false,
        "indexceilSuffixStyle": false,
        "indexBgStyle": false
    },
    "base": {
        "width": 400,
        "height": 240
    },
    "dataSource": [
        {
            "id": "1",
            "name": "张三",
            "age": "18",
            "value": 100
        },
        {
            "id": "2",
            "name": "李四",
            "age": "20",
            "value": 200
        },
        {
            "id": "3",
            "name": "王五",
            "age": "60",
            "value": 500
        },
        {
            "id": "4",
            "name": "赵六",
            "age": "18",
            "value": 100
        },
        {
            "id": "5",
            "name": "孙七",
            "age": "20",
            "value": 200
        },
        {
            "id": "6",
            "name": "钱八",
            "age": "60",
            "value": 500
        }
    ],
    bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
  }
  return (
    <>
      <TableCarousel {...options} />
    </>
  );
}

export default App;
```

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