Custom component fro table with api data

What are you trying to accomplish
i want to add a custom component for tables and my data is coming from api

Screenshots or video link

the problem am facing is the style of the table might be different and all of their data should be fetched from api data. my solution was to go with a custom component that will accept 2 BuilderBlocks one for the table heading and the other one for the table content’s but with that approach am not sure how to bind the api data with the builder builtin components any help or idea how can i approach this issue will be much appreciate thanks

Code stack you are integrating Builder with
NextJS, react

Sure, I understand that you want to create a custom table component in that can dynamically fetch data from an API and render it, while allowing the table’s header and content styles to be customizable via Builder Blocks.

Here is a step-by-step guide on how to achieve this:

Step-by-Step Guide:

  1. Create and Register the Custom Component in Your Codebase:

    • Fetch data from the API inside the component.
    • Render the table with headings and content passed as BuilderBlocks.
  2. Configure the Component in

    • Add the custom component to the Builder Visual Editor.
    • Allow the component to accept BuilderBlocks for table headers and table contents.

Example Implementation:

1. Create and Register the Custom Table Component:

First, create your custom Table component and ensure it renders with BuilderBlocks for headers and contents.

import React, { useEffect, useState } from 'react';
import { Builder, BuilderComponent, BuilderBlocks } from '';

// Replace with your actual Public API Key

const CustomTable = ({ apiEndpoint, tableHeaders, tableContents }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from the API endpoint
    async function fetchData() {
      const response = await fetch(apiEndpoint);
      const result = await response.json();
  }, [apiEndpoint]);

  return (
          <BuilderBlocks parentElementId={tableHeaders} blocks={tableHeaders} />
        {, index) => (
          <tr key={index}>
            <BuilderBlocks parentElementId={tableContents} blocks={tableContents} data={{ row }} />

// Register the CustomTable component with
Builder.registerComponent(CustomTable, {
  name: 'CustomTable',
  inputs: [
      name: 'apiEndpoint',
      type: 'string',
      defaultValue: '',
      friendlyName: 'API Endpoint',
      name: 'tableHeaders',
      type: 'uiBlocks',
      defaultValue: [],
      friendlyName: 'Table Headers',
      name: 'tableContents',
      type: 'uiBlocks',
      defaultValue: [],
      friendlyName: 'Table Contents',

export default CustomTable;

2. Use the Custom Component in a Page or Section Model:

Ensure that you have integrated into your Next.js project and then create a page that uses the custom table component:

// pages/_app.js or _app.tsx
import { Builder } from '';
import '../styles/globals.css';


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;

export default MyApp;

// pages/index.js or index.tsx
import { BuilderComponent } from '';

export default function Home() {
  return <BuilderComponent model="page" />;

3. Add the Custom Component to a Builder Page:

  1. Create a Page model or a Section model in if you haven’t done this already.
  2. Drag and Drop the CustomTable component into the Builder Visual Editor.
  3. Set the API Endpoint: Configure the API endpoint from where the table data will be fetched.
  4. Customize Table Headers and Contents:
    • For Table Headers, drag in Builder Blocks (like Text) and define the headers.
    • For Table Contents, drag in Builder Blocks and bind the data fields as needed.

Example of Table Header and Contents Binding:

In the Visual Editor, when setting up tableHeaders and tableContents:

// Define Table Headers in the Visual Editor
  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>

// Define Table Contents in the Visual Editor
  <td>{{ row.field1 }}</td>
  <td>{{ row.field2 }}</td>
  <td>{{ row.field3 }}</td>

Binding Data to Elements:

In the tableContents Builder Blocks, bind each cell to the corresponding data field from your API. For example:

<td>{{ }}</td> // assuming `name` is a field in your API data
<td>{{ row.value }}</td> // assuming `value` is another field

Final Integration and Testing:

  1. Publish the Page:

    • Once you have set up the table component and bound the required fields, publish the page.
  2. Verify the Output:

    • Ensure that the table renders correctly with the data fetched from the API.
    • Adjust styling and layout as needed directly within the Visual Editor.


  • Custom Component: Create a custom component that fetches data from an API and renders it dynamically.
  • Builder Blocks: Utilize Builder Blocks for flexible and customizable headers and contents within the table.
  • Dynamic Data Binding: Bind data fields from your API to the table rows within the Builder Visual Editor.

For more detailed information and advanced customization, you can refer to the Custom Components Setup documentation and Integrating Custom Components. These resources will provide further insights into maximizing the capabilities of for dynamic content integration.

1 Like

am going to try it … thanks for the help

1 Like