react实现竖向table

实现竖向表格的布局方案

在React中实现竖向表格（即表头在左侧，数据向右展开的布局）可通过CSS布局调整或组件结构重组完成。以下是几种常见方法：

使用CSS Flexbox或Grid布局

通过旋转容器或调整显示方向实现竖向效果：

// 竖向表格组件示例
const VerticalTable = ({ data }) => {
  return (
    <div style={{ display: 'flex' }}>
      {/* 表头列 */}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {Object.keys(data[0]).map((key) => (
          <div key={key} style={{ padding: '8px', border: '1px solid #ddd' }}>
            {key}
          </div>
        ))}
      </div>

      {/* 数据列 */}
      {data.map((item, index) => (
        <div key={index} style={{ display: 'flex', flexDirection: 'column' }}>
          {Object.values(item).map((value, i) => (
            <div key={i} style={{ padding: '8px', border: '1px solid #ddd' }}>
              {value}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

使用HTML表格属性调整

通过转置数据后渲染常规表格：

const VerticalTable = ({ data }) => {
  const headers = Object.keys(data[0]);
  const transposedData = headers.map(header => ({
    header,
    values: data.map(item => item[header])
  }));

  return (
    <table style={{ borderCollapse: 'collapse' }}>
      <tbody>
        {transposedData.map((row, i) => (
          <tr key={i}>
            <td style={{ border: '1px solid #ddd', padding: '8px' }}>{row.header}</td>
            {row.values.map((value, j) => (
              <td key={j} style={{ border: '1px solid #ddd', padding: '8px' }}>
                {value}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

使用第三方库

如React-Table等库支持自定义渲染方式：

import { useTable } from 'react-table';

const VerticalTable = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, rows, prepareRow } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

样式优化建议

添加以下CSS提升可读性：

.vertical-table {
  display: flex;
  overflow-x: auto;
}
.vertical-column {
  min-width: 120px;
}
.fixed-header {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

响应式处理

针对移动端可添加媒体查询：

@media (max-width: 768px) {
  .vertical-table {
    flex-direction: column;
  }
}

以上方案可根据实际需求选择，Flexbox方案适合简单布局，数据转置方案保持语义化HTML结构，第三方库方案适合复杂交互需求。