---
title: 键值表格
order: 10
---

## 文本类-键值表格 CarouselTable

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

const { CarouselTable } = Text;

const status = {
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  marginLeft: "20px",
};
const span = {
  display: "inline-block",
  marginRight: "10px",
  width: "8px",
  height: "8px",
  borderRadius: "50%",
  backgroundColor: "#f00",
};

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <CarouselTable
        universalStyle={{
          width: 450,
          height: 230,
          backgroundColor: "#1f3b6d"
        }}
        sliderOptions={{
          slidesToShow: 5,
          autoplay: false,
        }}
        headerOptions={{
          universalStyle: {
            backgroundColor: 'transparent',
          },
          textStyle: {
            color: '#d3e2ff',
          },
        }}
        rowOptions={{
          oddBackgroundColor: '#112854',
          evenBackgroundColor: 'transparent',
        }}
        serialNumberOptions={{
          widthRate: 0,
          textStyle: {
            color: '#d3e2ff',
          },
        }}
        column={[{
          key: 'status',
          alias: '状态',
          widthRate: 20,
          textStyle: {
            color: '#d3e2ff',
          },
          align: 'left',
          cell: (val) => <div style={status}><span style={span} />  {val}</div>,
        }, {
          key: 'pv',
          alias: '设备名称',
          widthRate: 20,
          textStyle: {
            color: '#d3e2ff',
          },
        }, {
          key: 'attribute',
          alias: '设备ID',
          widthRate: 53,
          textStyle: {
            color: '#d3e2ff',
          },
        }]}
        dataSource={[
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
        ]}
      />
    </div>
  );
}

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

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