如何在React中将过长表格拆分为两个并排表格

一、拆分表格数据 #

1. 分割数据源
   先把ProcessInfo数组分成两个部分，用数组的slice方法即可实现：

   // 在组件内部计算分割点
   const midPoint = Math.ceil(ProcessInfo.length / 2);
   const firstHalf = ProcessInfo.slice(0, midPoint);
   const secondHalf = ProcessInfo.slice(midPoint);
   

2. 复用表格组件
   把原有表格抽成可复用组件，避免重复代码：

   const ProcessTable = ({ data }) => {
     return (
       <table className='table table-striped' aria-labelledby="tabelLabel">
         <thead>
           <tr style={{ backgroundColor: 'black', color: 'white' }}>
             <th>Process Name</th>
             <th>Status</th>
           </tr>
         </thead>
         <tbody>
           {data.map(item => {
             // 直接计算状态图标，替代原有的IIFE写法
             let sourceStr;
             if (item.errorLevel === 0) {
               sourceStr = greenDot;
             } else if (item.errorLevel <= 3) {
               sourceStr = yellowDot;
             } else if (item.errorLevel <= 5) {
               sourceStr = redDot;
             } else {
               sourceStr = blackDot;
             }
             return (
               <tr key={item.application}>
                 <td><h1>{item.application}</h1></td> {/* 修正原代码中的McProcessInfo笔误 */}
                 <td className='dot-box'>
                   <div>
                     <img src={sourceStr} height="15" width="15" />
                   </div>
                 </td>
               </tr>
             );
           })}
         </tbody>
       </table>
     );
   };
   

3. 渲染两个表格
   在父组件中调用复用组件，传入分割好的数据源：

   <div className="table-container">
     <ProcessTable data={firstHalf} />
     <ProcessTable data={secondHalf} />
   </div>
   

二、实现表格并排显示 #

给包裹表格的容器添加CSS样式，用Flexbox是最简便的方式：

.table-container {
  display: flex;
  gap: 24px; /* 两个表格之间的间距 */
  flex-wrap: wrap; /* 屏幕较小时自动换行 */
}

.table-container table {
  flex: 1; /* 让两个表格平分可用宽度 */
  min-width: 300px; /* 防止表格过窄 */
}

如果更偏好Grid布局，也可以这样写：

.table-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

三、相关文档查找方向 #

• React部分：
  • 查找数组操作方法（如slice）的官方说明，掌握数组分割的逻辑
  • 查找组件复用相关内容，学习通过props传递数据实现组件复用的思路
• CSS部分：
  • 查找Flexbox布局或CSS Grid布局的详细用法，掌握多元素并排的实现方式
  • 查找表格样式调整的内容，优化表格在并排场景下的显示效果

内容的提问来源于stack exchange，提问作者webstergem