---
title: 轮播表格
order: 8
---

## 文本类-轮播表格 CarouselTable

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Text, STYLE_PREFIX } from '@linkdesign/screen';

const { CarouselTable } = Text;

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <CarouselTable
        universalStyle={{
          width: 450,
          height: 230
        }}
        sliderOptions={{
          slidesToShow: 5,
          // autoplay: false,
        }}
        header={{
          textStyle: {
            color: '#d3e2ff',
          },
        }}
        serialNumberOptions={{
          // widthRate: 0,
          textStyle: {
            color: '#d3e2ff',
          },
        }}
        column={[{
          key: 'area',
          alias: '地区',
          widthRate: 20,
          textStyle: {
            color: '#d3e2ff',
          },
        }, {
          key: 'pv',
          alias: '流量(pv)',
          widthRate: 20,
          textStyle: {
            color: '#d3e2ff',
          },
        }, {
          key: 'attribute',
          alias: '用户行为特征',
          widthRate: 53,
          textStyle: {
            color: '#d3e2ff',
          },
        }]}
        dataSource={[
          {
            "area": "中国",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "美国",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "俄罗斯",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "德国",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "吉尔吉斯斯坦",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "英国",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "日本",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "南非",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "巴西",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "印度",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "新加坡",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "加拿大",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "澳大利亚",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "阿根廷",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "area": "西班牙",
            "pv": 688,
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
        ]}
      />
    </div>
  );
}

ReactDOM.render((
  <App />
), mountNode);
````

````css
.container {
  position: relative;
}
````
