React Table 添加底部汇总行：CO2/kg 总量示例教程-html教程-PHP中文网

React Table 添加底部汇总行：CO2/kg 总量示例教程

心靈之曲

发布： 2025-10-08 13:47:00

原创

594人浏览过

react table 添加底部汇总行：co2/kg 总量示例教程

React Table 是构建数据表格的常用组件，但有时我们需要在表格底部添加一行，用于显示某些列的汇总信息，例如 CO2/kg 的总和。以下是如何在 React Table 中添加底部汇总行的详细步骤：

首先，我们引用上面的摘要：本教程旨在解决 React Table 中添加底部汇总行，特别是计算并显示 CO2/kg 列总和的需求。我们将通过 Array.reduce 方法，结合表格的结构，在表格底部添加一行，专门用于展示 CO2/kg 列的汇总值。本教程将提供清晰的代码示例，帮助开发者快速实现该功能。

1. 计算 CO2/kg 总和

使用 Array.reduce 方法计算 descrition 数组中 carbon 属性的总和。这需要在渲染表格之前完成，以便将计算结果传递给表格的底部行。

const totalCarbon = descrition.reduce((acc, item) => {
  return acc + item.carbon;
}, 0);

登录后复制

这段代码遍历 descrition 数组，并将每个元素的 carbon 属性值累加到 acc 变量中。初始值为 0。

2. 修改表格结构

在 <table> 元素中，在 <tbody> 之后添加一个 <tfoot> 元素。<tfoot> 元素用于包含表格的页脚内容，也就是我们的汇总行。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<table className="table mt-5 text-center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>UOM</th>
      <th>Density</th>
      <th>CO2/kg</th>
      <th>Carbon</th>
      <th>Footprint</th>
    </tr>
  </thead>
  <tbody>
    {descrition.map((descrition) => (
      <tr key={descrition.id}>
        <td>{descrition.food}</td>
        <td>{descrition.quantity}</td>
        <td>{descrition.uom}</td>
        <td>{descrition.density}</td>
        <td>{descrition.carbon}</td>
        <td>{carbonCategory(descrition.carbon)}</td>
        <td>{carbonCategory(descrition.carbon)}</td>
      </tr>
    ))}
  </tbody>
  <tfoot>
    <tr>
      <td colSpan="4">Total</td>
      <td>{totalCarbon}</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

登录后复制

在 <tfoot> 元素中，我们创建一行 <tr>。第一列 <td> 使用 colSpan="4" 属性，使其跨越前四列，并显示文本 "Total"。第五列 <td> 显示之前计算的 totalCarbon 值。剩余的列留空。

3. 完整代码示例

以下是一个完整的 React 组件示例，展示了如何实现底部汇总行：

import React from 'react';

const MyTable = ({ descrition }) => {
  const totalCarbon = descrition.reduce((acc, item) => {
    return acc + item.carbon;
  }, 0);

  const carbonCategory = (carbonValue) => {
      // Your carbon category logic here
      return "Category"; // Placeholder
  };

  return (
    <table className="table mt-5 text-center">
      <thead>
        <tr>
          <th>Name</th>
          <th>Quantity</th>
          <th>UOM</th>
          <th>Density</th>
          <th>CO2/kg</th>
          <th>Carbon</th>
          <th>Footprint</th>
        </tr>
      </thead>
      <tbody>
        {descrition.map((item) => (
          <tr key={item.id}>
            <td>{item.food}</td>
            <td>{item.quantity}</td>
            <td>{item.uom}</td>
            <td>{item.density}</td>
            <td>{item.carbon}</td>
            <td>{carbonCategory(item.carbon)}</td>
            <td>{carbonCategory(item.carbon)}</td>
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr>
          <td colSpan="4">Total</td>
          <td>{totalCarbon}</td>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  );
};

export default MyTable;

登录后复制