---
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
          universalStyle={{
            width: 450,
          }}
          sliderOptions={{
            slidesToShow: 5,
          }}
          headerOptions={{ universalStyle: {height: 0} }}
          rowOptions={{
            oddBackgroundColor: 'transparent',
            evenBackgroundColor: 'transparent',
          }}
          column={[{
            key: '$index',
            alias: '排序',
            widthRate: 20,
            align: 'left',
            textStyle: {
              paddingLeft: 10,
            },
          }, {
            key: 'status',
            alias: '状态',
            widthRate: 60,
            align: 'left',
          }, {
            key: 'pv',
            alias: '设备名称',
            widthRate: 20,
            align: 'right',
            textStyle: {
              fontFamily: 'HelveticaNeue-CondensedBold',
              paddingRight: 10,
            },
          }]}
          dataSource={[
            {
              status: '梅岭北路，118弄，1号积水点',
              pv: '200mm',
            },
            {
              status: '梅岭北路，118弄，1号积水点',
              pv: '200mm',
            },
            {
              status: '梅岭北路，118弄，1号积水点',
              pv: '200mm',
              attribute: 'xxxxxxxxxxxxxxxxxxx',
            },
            {
              status: '梅岭北路，118弄，1号积水点',
              pv: '200mm',
              attribute: 'xxxxxxxxxxxxxxxxxxx',
            },
            {
              status: '梅岭北路，118弄，1号积水点',
              pv: '200mm',
              attribute: 'xxxxxxxxxxxxxxxxxxx',
            },
          ]}
        />
    
      </DemoWrapper>
    );
  }
}

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