Grid Custom Field

A Penta-b MNA smart-forms custom field (gridfield) for Editing Plugin forms. It renders a repeatable-row grid whose columns are the nested form-designer fields configured for the field (text, dropdown, date, etc.), with built-in sorting, filtering, and pagination, and saves each row's data into the form data under the field's mnaKey.

Designer configuration

The field type is registered as gridfield (component name customGrid). Its schema is built from getFormDesignerFieldsWithConfig(), so any field type available in the form designer can be placed as a column inside a grid row.

| Setting | Meaning | | --- | --- | | mnaKey | Key the grid's row data is saved under. | | nested fields | The fields placed inside the grid definition become the grid's columns; each row is one instance of that nested field set. | | fieldValidationsTypes | gridValidate, maxGridRows, minGridRows — row-count and per-row validation. |

Fields listed in an internal exclusion list (richTextArea, attachment, multiattachment, rating, colorpicker, wizard, grid, tabs, accordion, disclaimer, apidisclaimer) are skipped for column filtering/sorting since they don't have a sensible scalar representation.

Saved value shape

initialData (or the existing data[mnaKey]) is parsed as JSON and stored as an array of row objects, one per grid row, keyed by each column's own mnaKey.

Installing as an npm package

The package ships the prebuilt UMD bundle (dist/build/customField-smartForm-gridField.js) as its entry point. Importing it registers the field with the smart-forms loader as a side effect:

import "@penta-b/customfield-smartform-gridfield";

react, react-dom, redux, react-redux, @penta-b/ma-lib and @penta-b/mna-penta-smart-forms are peer dependencies — the host application must provide them (they are marked as webpack externals and are not bundled).

To test locally without publishing:

npm run plugin:prod
npm pack                                            # produces penta-b-customfield-smartform-gridfield-1.0.0.tgz
npm install ../customfield-smartform-gridfield-1.0.0.tgz   # from the consuming app

To publish (runs the build automatically via prepublishOnly):

npm publish

Development

• npm run plugin:dev — development build.
• npm run plugin:devServer — dev server (webpack-dev-server).
• npm run plugin:prod — UMD bundle to dist/build/customField-smartForm-gridField.js.
• npm run storybook — Storybook on port 6006.