---
title: 组件示例
order: 2
---

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DemoWrapper, CarouselTable, config } from '@linkdesign/screen';

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-CarouselTable">
        <CarouselTable
          sliderOptions={{
            slidesToShow: 5,
          }}
          // header={{
          //   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",
            },
          ]}
        />
      </DemoWrapper>
    );
  }
}

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