React表中的垂直标题

基础概念

React表中的垂直标题通常是指在一个表格（Table）组件中，列标题（Column Headers）以垂直方向显示，而不是传统的水平方向。这种设计可以节省空间，特别是在移动设备或需要紧凑布局的场景中。

类型

固定列标题：无论表格内容如何滚动，列标题始终可见。
滚动列标题：当表格内容滚动时，列标题也会随之滚动。

应用场景

移动应用：在移动设备上，垂直标题可以更好地适应屏幕尺寸。
数据密集型应用：在需要展示大量数据的场景中，垂直标题可以帮助用户更快地浏览和理解数据。
仪表盘：在需要紧凑布局的仪表盘中，垂直标题可以节省空间并提升美观度。

示例代码

以下是一个简单的React示例，展示如何实现垂直标题的表格：

import React from 'react';
import './VerticalTable.css';

const VerticalTable = () => {
  const data = [
    { name: 'Alice', age: 25, city: 'New York' },
    { name: 'Bob', age: 30, city: 'Los Angeles' },
    { name: 'Charlie', age: 35, city: 'Chicago' },
  ];

  const columns = ['Name', 'Age', 'City'];

  return (
    <div className="vertical-table">
      <div className="header">
        {columns.map((column, index) => (
          <div key={index} className="header-item">
            {column}
          </div>
        ))}
      </div>
      <div className="body">
        {data.map((row, rowIndex) => (
          <div key={rowIndex} className="row">
            {columns.map((column, colIndex) => (
              <div key={colIndex} className="cell">
                {row[column.toLowerCase()]}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};

export default VerticalTable;

CSS样式

.vertical-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 10px;
}

.header-item {
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 5px;
}

.body {
  overflow-y: auto;
  flex: 1;
}

.row {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.cell {
  flex: 1;
  padding: 10px;
}