index.html

<style>
  canvas {
    overflow: auto;
  }
</style>
<canvas id="myCanvas"></canvas>

<script src="canvas-table.js"></script>
<script>
  function generateTableData(length) {
    var tableData = [];

    var crmData = [
      [
        "ID",
        "First Name",
        "Last Name",
        "Email",
        "Phone",
        "Company",
        "Address",
        "City",
        "State",
        "Zip",
        "Country",
        "Industry",
        "Revenue",
        "Employees",
        "Stage",
        "Source",
        "Created",
        "Modified",
        "Assigned To",
        "Lead Score",
        "Lead Grade",
        "Lead Status",
        "Opportunity Value",
        "Opportunity Stage",
        "Opportunity Source",
        "Opportunity Created",
        "Opportunity Modified",
        "Opportunity Assigned To",
        "Account Owner",
        "Account Manager",
        "Account Created",
        "Account Modified",
        "Account Assigned To",
      ],
      [
        1,
        "John",
        "Smith",
        "john@example.com",
        "555-1234",
        "ABC Company",
        "123 Main St.",
        "Anytown",
        "CA",
        "12345",
        "USA",
        "Manufacturing",
        "$10M",
        100,
        "Qualified",
        "Website",
        "2022-01-01",
        "2022-01-05",
        "Alice Smith",
        50,
        "A",
        "New",
        "$1M",
        "Prospect",
        "Referral",
        "2022-01-03",
        "2022-01-04",
        "Bob Johnson",
        "Alice Smith",
        "Jane Doe",
        "2022-01-01",
        "2022-01-02",
        "Alice Smith",
      ],
      [
        2,
        "Jane",
        "Doe",
        "jane@example.com",
        "555-5678",
        "XYZ Inc.",
        "456 Oak St.",
        "Othertown",
        "NY",
        "67890",
        "USA",
        "Software",
        "$5M",
        50,
        "Qualified",
        "Trade Show",
        "2022-01-02",
        "2022-01-06",
        "Bob Johnson",
        75,
        "B",
        "Follow-up",
        "$500K",
        "Negotiation",
        "Website",
        "2022-01-04",
        "2022-01-05",
        "Bob Johnson",
        "Bob Johnson",
        "Bob Johnson",
        "2022-01-01",
        "2022-01-03",
        "Bob Johnson",
      ],
      [
        3,
        "Bob",
        "Johnson",
        "bob@example.com",
        "555-9876",
        "Acme Corp.",
        "789 Elm St.",
        "Anycity",
        "TX",
        "34567",
        "USA",
        "Retail",
        "$2M",
        25,
        "Prospect",
        "Referral",
        "2022-01-03",
        "2022-01-07",
        "Jane Doe",
        25,
        "C",
        "New",
        "$250K",
        "Prospect",
        "Website",
        "2022-01-05",
        "2022-01-06",
        "Jane Doe",
        "Alice Smith",
        "Tom Wilson",
        "2022-01-02",
        "2022-01-05",
        "Jane Doe",
      ],
      [
        4,
        "Mary",
        "Jones",
        "mary@example.com",
        "555-4321",
        "EFG Enterprises",
        "101 Maple St.",
        "Sometown",
        "CA",
        "45678",
        "USA",
        "Healthcare",
        "$1M",
        10,
        "Contacted",
        "Website",
        "2022-01-04",
        "2022-01-08",
        "Tom Wilson",
        10,
        "D",
        "New",
        "$100K",
        "Prospect",
        "Trade Show",
        "2022-01-06",
        "2022-01-07",
        "Tom Wilson",
        "Bob Johnson",
        "Alice Smith",
        "2022-01-03",
        "2022-01-06",
        "Tom Wilson",
      ],
      // more rows...
    ];
    // Loop through the desired length and select a random row from the CRM data
    for (var i = 0; i < length; i++) {
      var randomIndex = Math.floor(Math.random() * crmData.length);
      tableData.push(crmData[randomIndex]);
    }

    return tableData;
  }

  var canvas = document.getElementById("myCanvas");

  canvasTable.render(generateTableData(1000), canvas, 800, 600);
</script>