JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div class="flex">
    <div class="column2" id="filter"></div>
    <div class="column1">
      <table id="excelDataTable" border="1">
      </table>
    </div>
  </div>

CSS

.flex {
  display: flex;
}

.column1 {
  flex: '20%';
}

.column2 {
  flex: '80%';
}

#filter {
  border: solid 1px #000;
  margin-top: 10px;
}

#filter div {
  padding: 3px 0;
  color: blue
}
.count{
  color:#000;
  font-weight:'1px'
}

JavaScript

var myList = [
  {
    "Document Title": "",
    "Document Type": "",
    "Account Id": "",
    "Client Id": "",
    "Effective Date": "",
    "Store Date": {
      "Time": ""
    },
    "Tracking ID": "",
    "FIELD8": ""
  },
  {
    "Document Title": "123.PDF",
    "Document Type": "ACCOUNT SUMMARY",
    "Account Id": "",
    "Client Id": "70981384",
    "Effective Date": "3/17/21",
    "Store Date": {
      "Time": "7/10/21 11:33"
    },
    "Tracking ID": "D21191TA00000002",
    "FIELD8": ""
  },
  {
    "Document Title": "No Title",
    "Document Type": "SPS ADV AUTO REBAL ONLINE",
    "Account Id": "133 00042907832",
    "Client Id": "70981384",
    "Effective Date": "",
    "Store Date": {
      "Time": "6/10/21 9:59"
    },
    "Tracking ID": "SAO2116105678.001",
    "FIELD8": ""
  },
  {
    "Document Title": "No Title",
    "Document Type": "CHANGE OF ADDRESS",
    "Account Id": "",
    "Client Id": "70981384",
    "Effective Date": "",
    "Store Date": {
      "Time": "4/28/21 11:57"
    },
    "Tracking ID": "21118TQ000092.001",
    "FIELD8": ""
  },
  {
    "Document Title": "AAMT_ALLOCATION_RATIONALE",
    "Document Type": "HELD AWAY SUPPORTING DOCUMENTS",
    "Account Id": "000 00000000000",
    "Client Id": "70981384",
    "Effective Date": "",
    "Store Date": {
      "Time": "5/14/21 10:12"
    },
    "Tracking ID": "AAM2113495578",
    "FIELD8": ""
  },
  {
    "Document Title": "AAMT_ALLOCATION_RATIONALE",
    "Document Type": "SUPPORTING DOCUMENTATION - ASSET ALLOCATION",
    "Account Id": "133 00042907832",
    "Client Id": "70981384",
    "Effective Date": "",
    "Store Date": {
      "Time": "4/23/21 8:15"
    },
    "Tracking ID": "AAM2111389860",
    "FIELD8": ""
  },
  {
    "Document Title": "SEPARATED DOCUMENT TEST.PDF",
    "Document Type": "ACCOUNT SUMMARY",
    "Account Id": "",
    "Client Id": "70969976 70981386",
    "Effective Date": "5/26/21",
    "Store Date": {
      "Time": "6/21/21 12:19"
    },
    "Tracking ID":...