---
title: 排序列表
order: 9
---

## 文本类-排序列表 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,
          backgroundColor: "#1f3b6d"
        }}
        sliderOptions={{
          slidesToShow: 5,
        }}
        headerOptions={{ heightRate: 0 }}
        rowOptions={{
          oddBackgroundColor: 'transparent',
          evenBackgroundColor: 'transparent',
        }}
        serialNumberOptions={{
          radiusRate: 50,
          textStyle: {
            color: '#d3e2ff',
          },
        }}
        column={[{
          key: 'status',
          alias: '状态',
          widthRate: 70,
          align: 'left',
          textStyle: {
            color: '#d3e2ff',
          },
        }, {
          key: 'pv',
          alias: '设备名称',
          widthRate: 13,
          align: 'right',
          textStyle: {
            fontFamily: 'HelveticaNeue-CondensedBold',
            color: '#d3e2ff',
          },
        }]}
        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',
          },
        ]}
      />
    </div>
  );
}

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

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