🧩 ReactNoCodeTableControl

A lightweight React component that provides a no-code interface for dynamically adding, removing, and editing rows and columns in an HTML <table> element.

This control is ideal for visual table manipulation inside low-code or no-code builders, dashboards, or CMS-like UIs.

🚀 Features

• Add or remove rows and columns dynamically.
• Works directly with any <table> element via a ref.
• Automatically updates the table structure (thead & tbody).
• Triggers a callback when the table changes (onChanged).
• Simple integration — just pass a ref to your table.

📦 Installation

You can copy the component directly into your React project or add it as part of your UI builder.

# If it's part of your codebase
# place ReactNoCodeTableControl.jsx in your components folder

Installation

npm install  react-no-code-table-control

yarn add react-no-code-table-control

🧠 Usage Example

Here’s how to use the ReactNoCodeTableControl inside your app:

import React, { useRef } from "react";
import ReactNoCodeTableControl from "react-no-code-table-control";

export default function App() {
  const tableref = useRef();

  const handleResults = () => {
    console.log("div-table changed");
  };

  return (
    <>
    

      <div   id="myDivTable"
        ref={tableref} div-table="" data-canvas-item-type="table" data-canvas-item="" draggable="true"
              data-canvas-action-prevent-drop="true">
              <div div-thead="" data-canvas-item-type="thead"
                  data-canvas-action-prevent-drop="false">
                  <div div-row="" data-canvas-item-type="tr">
                      <div div-cell="" data-canvas-item data-canvas-item-type="th" data-canvas-action-prevent-drag="true"
                          data-canvas-action-prevent-drop="false">
                          <div data-canvas-item-type="text" data-canvas-item="" draggable="true">
                              Header 1
                          </div>
                      </div>
                  </div>
              </div>
  
              <div div-tbody="" data-canvas-item-type="tbody">
                  <div div-row="" data-canvas-item-type="tr">
                      <div div-cell="" data-canvas-item data-canvas-item-type="td" data-canvas-action-prevent-drag="true"
                          data-canvas-action-prevent-drop="false">
                          <div data-canvas-item-type="text" data-canvas-item draggable="true">
                              Cell 1
                          </div>
                      </div>
                  </div>
              </div>
          </div>


      <ReactNoCodeTableControl targetNode={tableref} onChanged={handleResults} />
    </>
  );
}

⚙️ Props

| Prop | Type | Default | Description | |------|------|----------|-------------| | targetNode | React.RefObject<HTMLTableElement> | null | Reference to the target <table> | | onChanged | Function | () => {} | Callback triggered when the table structure changes |

🧩 How It Works

• The control reads the <table> structure using the provided ref.
• You can choose to add or remove rows or columns with dropdowns.
• The component updates the DOM directly and calls onChanged() each time the user makes a modification.

🧱 Styling

Basic class names are provided for customization:

• .ui-builder-table-controls
• .ui-builder-table-col-group
• .ui-builder-table-select-group
• .ui-builder-table-select
• .ui-builder-table-btn

You can apply your own CSS or Tailwind utilities for styling.