Strapi Table Custom Field

A custom field which allow to build table structured data sets

A Strapi plugin that adds a custom field that handles dynamic creation and handling of table structured data sets.

📋 Table of Contents

• ✨ Features
• 📋 Requirements
• 📦 Installation
• 🚀 Usage
• 💾 Data Structure
• 👨‍💻 Development & Testing
• 🔗 Links
• 💬 Community Support
• 📄 License

✨ Features

• Custom field type for creating table structured data
• Dynamic column management - add/remove columns with labels
• Dynamic row management - add/remove rows
• Editable cells with text input
• Data stored as JSON in Strapi database
• Seamless integration with Strapi Content Types
• Responsive and intuitive UI
• No external dependencies or services required

📋 Requirements

• Strapi v5.0.0 or later
• Node.js 18+

📦 Installation

npm install @sensinum/strapi-table-field@latest
# or
yarn add @sensinum/strapi-table-field@latest

After installation, the plugin will be automatically available in your Strapi admin panel.

🚀 Usage

Adding Table Field to Content Type

1. Go to Content-Type Builder in your Strapi admin panel
2. Select an existing content type or create a new one
3. Click Add another field
4. Select Table from the Custom Fields section
5. Configure the field name and settings
6. Save and restart the server if prompted

Working with Table Data

Once added to a content type, you can:

• Add Columns: Click the + button in the column header area
• Remove Columns: Click the trash icon on any column header (minimum 1 column required)
• Add Rows: Click the "Add row" button below the table
• Remove Rows: Click the trash icon on any row (minimum 1 row required)
• Edit Cells: Simply click and type in any cell

The table data is automatically saved with your content entry.

💾 Data Structure

The table field stores data as JSON with the following structure:

{
  columns: [
    {
      label: string,      // Column header label
      type: string,       // Field type (currently 'text')
      required: boolean   // Whether field is required
    }
  ],
  rows: [
    [string, string, ...] // Array of cell values matching column order
  ]
}

Example Data

{
  "columns": [
    { "label": "Name", "type": "text", "required": false },
    { "label": "Age", "type": "text", "required": false },
    { "label": "City", "type": "text", "required": false }
  ],
  "rows": [
    ["John Doe", "30", "New York"],
    ["Jane Smith", "25", "London"],
    ["Bob Johnson", "35", "Paris"]
  ]
}

Accessing Data in API Responses

When you query content with a table field, the data will be included in the response as JSON:

{
  "data": {
    "id": 1,
    "myTableField": {
      "columns": [...],
      "rows": [...]
    }
  }
}

👨‍💻 Development & Testing

• Build: yarn build
• Test backend: yarn test:server
• Test frontend: yarn test:ts:front
• Watch mode: yarn watch

🔗 Links

• Strapi website

💬 Community support

• GitHub (Bug reports, contributions)

You can also used official support platform of Strapi, and search [VirtusLab] prefixed people (maintainers)

• Discord (For live discussion with the Community and Strapi team)
• Community Forum (Questions and Discussions)

📄 License

See the MIT License file for licensing information.