designed DisplayItem and ItemsDisplay so it now renders a pretty table

1 files changed, 50 insertions, 16 deletions

diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 766d16f..7026530 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -1,29 +1,63 @@
 import React from "react";
 import "./Display.css";
+import DisplayItem from "./DisplayItem";
 
 const ItemsDisplay = (props) => {
   const items = props.items;
+  let itemNumber = 0;
+
 
   return (
-    <div className={"ItemsDisplay"}>
-      <ol>
-        {items.map( (item) => {
+    <table className={"ItemsDisplay"}>
+      <tr className="legend">
+        <th>S. Num</th>
+        <th className={"leftAlign"}>Item</th>
+        <th className={"leftAlign"}>Description</th>
+        <th>Quantity(NOS)</th>
+        <th>Price</th>
+        <th>Discount(%)</th>
+        <th>GST(%)</th>
+      </tr>
+
+      {items.map( 
+        (item) => {
+          itemNumber++
           return (
-            <li>
-              <ul>
-                <li key={item.Model}>{item.Model}</li>
-                <li key={item.Description}>{item.Description}</li>
-                <li key={item.Quantity}>{item.Quantity}</li>
-                <li key={item.Price}>{item.Price}</li>
-                <li key={item.Discount}>{item.Discount}</li>
-                <li key={item.GST}>{item.GST}</li>
-              </ul>
-            </li>
+            <DisplayItem itemNumber={itemNumber} item={item}/>
           );
-        })}
-      </ol>
+        }
+      )}
+    </table>
+  )
+
+
+  /*return (
+    <div className={"ItemsDisplay"}>
+      <div className={"legend"}>
+        <ul>
+          <li className={"num"}>S. Num.</li>
+          <li className={"text"}>Name</li>
+          <li className={"text"}>Description</li>
+          <li className={"num"}>Quantity</li>
+          <li className={"num"}>Price</li>
+          <li className={"num"}>Discount</li>
+          <li className={"num"}>GST</li>
+        </ul>
+      </div>
+
+      <div className={"items"}>
+        {items.map( 
+          (item) => {
+            itemNumber++
+            return (
+              <DisplayItem itemNumber={itemNumber} item={item}/>
+            );
+          }
+        )}
+      </div>
+
     </div>
-  );
+  );*/
 }
 
 export default ItemsDisplay;