@zym-com/table-carousel v0.0.1

Install

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

or

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

Import

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

Basic Usage

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;