JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

JavaScript

var ctx = 
{
   "Grid":[
      [
         {
            "Item":{
               "Id":"e65ca6ae-530b-4e67-8040-04a8659987d0",
               "Font":"Courier New,ArialUnicode,Arial,Helvetica,sans-serif",
               "FontColor":null,
               "FontSize":7,
               "FontWeight":"400",
               "FontStyle":"normal",
               "Data":"C2032VA-WE",
               "ExtendedData":[
                  {
                     "SourceTextRectangleId":"c8ceeb78-26cc-4daf-a7f1-924c0271edb0",
                     "Data":"Please"
                  },
                  {
                     "SourceTextRectangleId":"673778b1-75f6-4e48-801b-75b9af6c8829",
                     "Data":"note"
                  },
                  {
                     "SourceTextRectangleId":"f5aa8641-6a85-48aa-86cd-7d555d293b3d",
                     "Data":"FREE"
                  },
                  {
                     "SourceTextRectangleId":"5e93d1e6-4af8-4be1-8968-6b1c3787f440",
                     "Data":"local"
                  }
               ],
               "ClusterId":71,
               "OverlayId":0,
               "Hidden":false,
               "FieldType":0,
               "FieldTypeIn":0,
               "CanonicalValue":"InvoiceLines-InvoiceLine-Product-SupplierProductId",
               "DataType":null,
               "DetectionMethod":null,
               "FormattedData":null,
               "DataRank":null,
               "SuggestedCanonicalValue":"",
               "SuggestedFieldCategory":"",
               "SuggestedPairId":0,
               "Rules":null,
               "SuggestedRules":null,
               "PageNumber":1,
               "X1":54,
               "Y1":530,
               "X2":83,
               "Y2":541
            },
            "RowIndex":20,
            "ColumnIndex":1,
            "Alignment":"unknown",
            "IsMapped":true
         },
         {
            "Item":{
              ...