how to add row with table column summation in react js

Deric 0
Viewed 23

Im creating a data table using react js.This is my current code output.

enter image description here

But i need to show column Summation of Net Lost and Net Returned .

Like the below visual.

enter image description here

As you can see that at the bottom there is a row, it shows the "Net Lost" and "Net Returned" summation.

Current code:

import { useState } from "react";
import "./style.css";

export default function DataTable4() {
  const rawData = [
    [7, '', 2, 1, 4, 3],
    [8, 3, '', 5, 3],
    ['', '', '', ''],
    [4, 4, '']
  ];
  
  return (
    <table>
      <thead>
        <tr>
          <th>Week</th>
          <th>1    </th>
          <th>2    </th>
          <th>3    </th>
          <th>4    </th>
          <th>Net Lost</th>
          <th>Net Returned</th>
        </tr>
      </thead>
      <tbody>
        {rawData.map((item, index) => {
          return (
            <tr>
              <th>{index + 1}</th>
              {[...Array(6 - item.length)].map((item) => {
                return <td></td>;  //for empty values
              })}
              {item.map((itm) => {
                return <td>{itm}</td>;
              })}
              
            </tr>
          );
        })}
        
      </tbody>
    </table>
  );
   
}

i tried to add another <tr> tag to do this but it throws me an error.

jsx reactjs javascript html
1 Answers

we can add new two arrays using initial rawData. Then get the summation for NetLost and Net Returned.

import { useState } from "react";
import "./style.css";

export default function DataTable4() {
  const rawData = [
    [7, '', 2, 1, 4, 3],
    [8, 3, '', 5, 3],
    ['', '', '', ''],
    [4, 4, '']
  ];

  const NetLostInitial= rawData.map(x => x[x.length-2]);
  const NetReturnedInitial= rawData.map(x => x[x.length-1]);
  
  
  const NetLost = NetLostInitial.filter(
    element => typeof element === 'number'
  );
  
  const NetReturned = NetReturnedInitial.filter(
    element => typeof element === 'number'
  );
  
  const TotalNetLost=NetLost.reduce((partialSum, a) => partialSum + a, 0);
  const TotalNetReturned=NetReturned.reduce((partialSum, a) => partialSum + a, 0);
  
  return (
    <table>
      <thead>
        <tr>
          <th>Week</th>
          <th>1    </th>
          <th>2    </th>
          <th>3    </th>
          <th>4    </th>
          <th>Net Lost</th>
          <th>Net Returned</th>
        </tr>
      </thead>
      <tbody>
        {rawData.map((item, index) => {
          return (
            <>
            <tr>
              <th>{index + 1}</th>
              {[...Array(6 - item.length)].map((item) => {
                return <td></td>;  //for empty values
              })}
              {item.map((itm) => {
                return <td>{itm}</td>;
              })}
              
            </tr>
            
            </>
          );
        })}
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{TotalNetLost}</td>
            <td>{TotalNetReturned}</td>

        </tr>
        
      </tbody>
    </table>
  );
   
}
Deric0
Related