JSFiddle - React, Tailwind, and code Playground

by draj8126

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>

CSS

tbody>tr>td {
  white-space: normal;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  font-size: .9em;
}

td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  width: 85px;
  max-width: 85px;
  height: 63px
}

.fixed {
  table-layout: fixed;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.hidden,
.already-shown {
  display: none;
}

JavaScript

var tableValue = [{
  "Item Name": "MANCHOW  V SOUP",
  "SellingPrice": 100
}, {
  "Item Name": "MANCHOW NV SOUP ",
  "SellingPrice": 125
}, {
  "Item Name": "CEASER SALAD V",
  "SellingPrice": 175
}, {
  "Item Name": "CEASER SALAD NV",
  "SellingPrice": 230
}, {
  "Item Name": "GAMBUS REBOZADAS",
  "SellingPrice": 350
}, {
  "Item Name": "PANCO FISH FINGER",
  "SellingPrice": 270
}, {
  "Item Name": "MUSHROOM DUPLEX",
  "SellingPrice": 160
}, {
  "Item Name": "FRENCH FRIES",
  "SellingPrice": 99
}, {
  "Item Name": "HONEY GARLIC PRAWN",
  "SellingPrice": 350
}, {
  "Item Name": "CHICKEN MANCHURIAN",
  "SellingPrice": 180
}, {
  "Item Name": "MUSHROOM CHILLY",
  "SellingPrice": 120
}, {
  "Item Name": "SALT N PEPPER BABY CORN",
  "SellingPrice": 120
}, {
  "Item Name": "SOUTHERN STYLE CHICKEN",
  "SellingPrice": 210
}, {
  "Item Name": "PANEER NAGGETS",
  "SellingPrice": 210
}, {
  "Item Name": "HARA BHARA KEBAB",
  "SellingPrice": 160
}, {
  "Item Name": "CHICKEN TIKKA",
  "SellingPrice": 210
}, {
  "Item Name": "KALMI KEBAB",
  "SellingPrice": 250
}, {
  "Item Name": "PIZZA MARGARITTA",
  "SellingPrice": 200
}, {
  "Item Name": "PIZZA VEG FARMHOUSE",
  "SellingPrice": 200
}, {
  "Item Name": "BBQ CHICKEN PIZZA",
  "SellingPrice": 225
}, {
  "Item Name": "CHICKEN TIKKA PIZZA",
  "SellingPrice": 225
}, {
  "Item Name": "PESTO SAUCE",
  "SellingPrice": 175
}, {
  "Item Name": "ARABIATA",
  "SellingPrice": 160
}, {
  "Item Name": "PINK SAUCE",
  "SellingPrice": 160
}, {
  "Item Name": "GARBANZO BEAN SALAD",
  "SellingPrice": 90
}, {
  "Item Name": "MASALA PAPAD",
  "SellingPrice": 50
}, {
  "Item Name": "PEANUT MASALA",
  "SellingPrice": 60
}, {
  "Item Name": "GAJAR KA HALWA",
  "SellingPrice": 90
}, {
  "Item Name": "WATERMELON MARTINI",
  "SellingPrice": 281
}, {
  "Item Name": "Kiwi martini",
  "SellingPrice": 281
}, {
  "Item Name": " Apple gin",
  "SellingPrice": 225
}, {
  "Item Name": "Cucumber  cooler ",
  "SellingPrice": 281
}, {
  "Item Name":...