Skip to main content

Write Your First Widget

Create a widget that fetches data from a connected data source and displays it as a simple table.

Prerequisites: You have at least one data connection set up in your organization. If not, ask your admin or see Connect to a Tulip Table first.

Steps​

1. Create a new widget​

  1. Go to Widgets in the left sidebar.
  2. Click New Widget.
  3. Enter a name for your widget (e.g., "Production Summary").

2. Connect a data source​

  1. Click the Data tab in the left panel.
  2. Click Add Connection and select a data connection from the list.
  3. Note the connection name — you'll use this in your code.

3. Write the HTML​

Switch to the Code tab, then the HTML sub-tab. Add a container for your table:

<div id="widget">
  <h3>Loading...</h3>
  <table id="data-table">
    <thead id="table-head"></thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

4. Write the JavaScript​

Switch to the JavaScript sub-tab. Fetch data and populate the table:

// Replace "My Connection" with your actual connection name
const data = await getData("My Connection");

if (!data || data.length === 0) {
  document.getElementById("widget").innerHTML = "<p>No data found.</p>";
} else {
  // Build table header from the first row's keys
  const columns = Object.keys(data[0]);
  const thead = document.getElementById("table-head");
  thead.innerHTML = "<tr>" + columns.map((col) => `<th>${col}</th>`).join("") + "</tr>";

  // Build table rows
  const tbody = document.getElementById("table-body");
  tbody.innerHTML = data
    .map((row) => "<tr>" + columns.map((col) => `<td>${row[col] ?? ""}</td>`).join("") + "</tr>")
    .join("");

  document.querySelector("h3").textContent = `${data.length} records`;
}

5. Add some CSS​

Switch to the CSS sub-tab and add basic styling:

#widget {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

th,
td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background: #f5f5f5;
  font-weight: 600;
}

6. Preview​

Look at the right side of the editor. Your widget should render automatically with live data from your connection. If you see "Loading..." or errors, check the Console tab for details.

You should see a table with column headers matching your data source fields and one row per record.

7. Save​

Click Save at the top of the editor.

Next steps​