Merge pull request #1525 from c-eiser13/collection-data-props

Adds panelProps property to FieldCollectionData
pnp · Apr 30, 2023 · b7c9f50 · b7c9f50
2 parents 3786fcd + b2caca2
commit b7c9f50
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/docs/documentation/docs/controls/FieldCollectionData.md b/docs/documentation/docs/controls/FieldCollectionData.md
@@ -105,6 +105,7 @@ The `FieldCollectionData` control can be configured with the following propertie
 | tableClassName | string | no | Allows you to specify a custom CSS class name for the collection data table inside the panel. | |
 | itemsPerPage | number | no | Allows you to specify the amount of items displayed per page. Paging control is added automatically. | |
 | executeFiltering | (searchFilter: string, item: any) => boolean | no | Allows you to show Search Box and specify own filtering logic. | |
+| panelProps | IPanelProps | no | Allows you to pass in props of the panel such as type and customWidth to control the underlying panel. | |
 
 Interface `ICustomCollectionField`
 

diff --git a/src/controls/fieldCollectionData/FieldCollectionData.tsx b/src/controls/fieldCollectionData/FieldCollectionData.tsx
@@ -66,7 +66,8 @@ export class FieldCollectionData extends React.Component<IFieldCollectionDataPro
                type={PanelType.large}
                headerText={this.props.panelHeader}
                onOuterClick={()=>{ /* no-op; */}}
-               className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}>
+               className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}
+               { ...this.props.panelProps ?? {}} >
           {
             this.props.panelDescription && (
               <p className="FieldCollectionData__panel__description">{this.props.panelDescription}</p>

diff --git a/src/controls/fieldCollectionData/IFieldCollectionData.ts b/src/controls/fieldCollectionData/IFieldCollectionData.ts
@@ -1,4 +1,5 @@
 import { ICustomCollectionField } from "./ICustomCollectionField";
+import { IPanelProps } from "office-ui-fabric-react";
 
 export interface IFieldCollectionDataProps {
   /**
@@ -70,8 +71,12 @@ export interface IFieldCollectionDataProps {
    */
   itemsPerPage?: number;
   /**
-   * Allows you to show Search Box and specify own filtering logic.
+   * Allow overriding panel props such as size, type, layerProps, etc.
    */
+  panelProps?: IPanelProps;
+  /**
+   * Allows you to show Search Box and specify own filtering logic.
+   */  
   executeFiltering?: (searchFilter: string, item: any) => boolean; // eslint-disable-line @typescript-eslint/no-explicit-any
 
   onChanged: (value: any[]) => void; // eslint-disable-line @typescript-eslint/no-explicit-any

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1833,7 +1833,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             manageBtnLabel={"Manage"} onChanged={(value) => { console.log(value); }}
             panelHeader={"Manage values"}
             enableSorting={true}
-
+            panelProps={{ type: PanelType.custom, customWidth: "98vw" }}
             fields={[
               { id: "Field1", title: "String field", type: CustomCollectionFieldType.string, required: true },
               { id: "Field2", title: "Number field", type: CustomCollectionFieldType.number },