strapi-data-table

A Strapi plugin that provides a flexible, customizable Data Table custom field for your content types. Easily add, edit, and manage tabular data directly in the Strapi admin panel.

Features

• Custom field for tabular data (array of objects)
• Add/remove rows and columns dynamically
• Integrates with Strapi v4+ custom fields API
• Fully typed and supports internationalization

Installation

npm install strapi-data-table
# or
yarn add strapi-data-table

Usage

1. Enable the plugin in your Strapi project:

Add the plugin to your ./config/plugins.js (or .ts) if required by your setup:

module.exports = {
  // ...
  'strapi-data-table': {
    enabled: true,
    resolve: './node_modules/strapi-data-table',
  },
};

2. Add the custom field to your content type:

In the Strapi admin panel, edit or create a content type. Add a new field and select Data Table (type: JSON, custom field).

• The field stores an array of objects (rows) as JSON.
• You can add/remove rows and columns dynamically in the UI.

3. Programmatic registration (for advanced users):

The plugin registers the custom field automatically. If you need to register it manually (e.g., in a custom plugin setup), see:

// server/src/register.ts
strapi.customFields.register({
  name: 'dataTable',
  plugin: 'strapi-data-table',
  type: 'json',
});

Development

• Build:

  npm run build
  # or
  yarn build

• Watch (dev mode):

  npm run watch
  # or
  yarn watch

• Type check:

  npm run test:ts:front
  npm run test:ts:back

Custom Field Props

The Data Table custom field receives the following props:

interface DataTableProps {
  attribute: any;
  disabled?: boolean;
  intlLabel?: { id?: string; defaultMessage?: string };
  name: string;
  onChange: (e: any) => void;
  required?: boolean;
  value: any;
}

License

MIT

Author

Muhammad Furqan Liaqat [email protected]