ConfigurationGroupField

ConfigurationGroupField shows the count of currently configured items and a button to open the ConfigurationGroupBuilderModal. The modal type is controlled by the configurationGroup prop, which determines which kind of items the builder handles (fields, slots, filters, header actions, list actions, divider groups, import columns, or export columns).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | any | Yes | — | Current configuration data (typically an array of items). | | onChange | (value?: any) => void | Yes | — | Called with the updated data when the modal closes with saved data. | | configurationGroup | 'fields' \| 'slots' \| 'filters' \| 'headerActions' \| 'listActions' \| 'dividerGroups' \| 'importCols' \| 'exportCols' | Yes | — | Determines which configuration builder is opened in the modal. | | label | string | No | — | Label rendered above the field. | | description | string | No | — | Helper text rendered below the field. | | modalTitle | string | No | '' | Title displayed in the builder modal. | | modalSubtitle | string | No | '' | Subtitle displayed in the builder modal. | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the field body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. |

Usage

Basic

import React, { useState } from 'react';
import ConfigurationGroupField from '@/components/fields/ConfigurationGroupField';

export default function Example() {
  const [fields, setFields] = useState([]);

  return (
    <ConfigurationGroupField
      label="Form fields"
      configurationGroup="fields"
      value={fields}
      onChange={setFields}
      modalTitle="Configure fields"
    />
  );
}

Configuring export columns

<ConfigurationGroupField
  label="Export columns"
  configurationGroup="exportCols"
  value={exportCols}
  onChange={setExportCols}
  modalTitle="Select columns to export"
  modalSubtitle="Drag to reorder"
/>