@pega/lists-react NPM

Welcome to @pega/lists-react

To import

import { RepeatingStructures } from '@pega/lists-react';

To consume

<RepeatingStructures
  meta={meta}
  ref={compRef}
  apiContext={{
    ...apiContext,
    stateUpdateCallback
  }}
  renderFactory={renderFactory}
  formatters={repeatFormatters}
  additionalInfo={additionalInfo}
  ...
/>

Table configuration (meta - prop)

Property	Value type	Mandatory	Default value	Notes
itemKey	String	Yes		Name of a field to use as the key of the rendered item(s) in the view. This field need not necessarily be one of the fields configured for display as part of the field definitions array. This field is directly looked up in the item data.
patchQueryFields	String array	No		Array of fields(extra) to be included in a query
sortOrder	String array	No	`['asc', 'desc', null]`	Array denoting sort operation order. Default is a tri-state sort
displayDensity	Array of options	No	`[{ name: 'Short', id: '1' }, { name: 'Medium', id: '2' },{ name: 'Tall', id: '3' },{ name: 'Full content', id: '4' }]`	A map of names(for display) and id(for persistence). The id values have specific behavior(s) associated with them
height	Object	No	`height: { minHeight: 600 }`	Height of the view. Full set of options include height: { minHeight: 600, /* Minimum height in pixels to the view /, height: 700, / Explicit height in pixels - fitHeightToElement option is ignored / fitHeightToElement: el, / Fit view to a specific HTML element (or string query selector) in the DOM heightwise / deltaAdjustment: 10 / A height adjustment value in pixels / autoSize: true / Responsively Height will be adjusted on window resize only if you have given fitHeightToElement /, maxHeight: 800, / Maximum height value in pixels to the view or a css variable (--view-height) */}
toggleFieldVisibility	Boolean	No	`true`	Allow show/hide of fields
grouping	Boolean	No	`true`	Allow grouping on fields
template	String	Yes	`Table`	Determines the view of a Repeating Structure, values:'Table','Gallery','Timeline'
basicMode	Boolean	No	`false`	Display views 'Table','Gallery','Timeline' with full or condensed toolbar. Default shows full toolbar.
editing	Boolean	No	`false`	Allow editing on fields
deleting	Boolean	No	`false`	Allow deleting of rows
personalization	Boolean	No	`true`	Allow personalization views
enableAppDefault	Boolean	No	`false`	Enable app default personalization options
nonPersonalizationViewName	String	No	`Initial view`	Name to be shown for non personalized view
reorderFields	Boolean	No	`true`	Allow field reordering through a drag and drop action
reorderItems (experimental)	Boolean	No	`false`	Allow row reordering through a drag and drop action
dragHandle (experimental)	Boolean	No	`false`	Allow to add a column for drag handle
globalSearch	Boolean	No	`true`	Brings in a search widget to allow searching across all text type fields
toolbar	Boolean	No	`true`	Display toolbar on the view
showCount	Boolean	No	`true`	Display count in toolbar
defaultRowHeight	String	No	`undefined`	Row density id value from displayDensity options
allowBulkActions	boolean	No	`false`	Renders the 'Bulk actions' button in the table toolbar, which gets enabled on row selection
dateFunctions	Object	No	`undefined`	Enables date-functions like MONTHS/WEEKS/... during Grouping and Filtering. (Object structure)
relativeDates	Boolean	No	`false`	Enables Relative Dates, such as "Last 7 days" or "Current Year", in Filtering for DateTime or Date_Only values.
footer	Boolean	No	`true`	Display footer on the view
dynamicFieldTemplates	Object	No	`dynamicFieldTemplates: [{ name: 'Comma separated', value: 'comma',selected: true }, { name: 'Space separated', value: 'space' }, { name: 'Multi line', value: 'multiline' }, { name: 'Forward slash', value: 'forwardslash' }]`	Templates for dynamic fields. See section on Dynamic fields
title	String	No	'\<label not set>'	Repeating Structure Title
icon	String	No	'picture'	Repeating Structure Icon
headerBar	Boolean	No	false	Display Header Bar
showHeaderIcons	Boolean	No	true	Display Respective Header Icons at field labels based on type
rowActions	`Array<object>`	No	[]	list of available static actions for an editable table with following properties`[{ text: 'Open in a new tab', id: 'row-new-tab', onClick: () => {} }]`
selectionMode	String	No	[]	Decides type of row selection mode (radio for single/ checkbox for multi) possible values `single / multi / multi-on-hover`
toolbarActions	`Array<Object>`	No	[]	List of available static actions at table level (shown in toolbar/ header bar) with following properties `[{ text: 'Add', tooltip: 'Add story', id: 'Add', onClick: () => {}}]`
selectionCountThreshold	Number	No		Displays select-all checkbox if selectionMode is multi-on-hover and the records count is not greater than threshold
disableSelectionOnLoad	Boolean	No	false	To Disable/Enable selection of rows
requiredOnLoad	Boolean	No	false	To show asterisk(*) symbol on table header in case of Data Reference/Embedded views. (Note: This works perfectly if the personalization is off.)
timezone	String	No		Timezone which is passed to formatter
locale	String	No	document.documentElement.lang	Locale which is passed to formatter function
refreshAction	Object	No		Action to support manual Refresh from consumer of Repeating structure. Whenever Repeating structure is notified with Refresh action It will show a banner by consuming this action info. Structure : `{id: 'uniqueId for banner', message: To show specific message on banner related to refresh notification, action : { text: Action button text, onClick: Function to be executed on click of action that will perform refresh of data based on consumer apiContext logic}}` Example: `{id: 'refreshBanner', message: 'New records have been added',action: { text: 'Click to refresh.', onClick }}`

| displayFeatures | Object | No | displayFeatures:{filter:true, grouping:true, sort:true} | Allow display of features-Group, Sort, Filter |

Field configuration

fieldDefs

A mandatory array of objects with the following keys

Property	Value type	Mandatory	Default value	Notes
type	String	Yes		`number` or `text` or `date` or `datetime`
name	String	Yes		Actual field name in data
id	String	Yes		Persistent ID of the field, typically the same as the name
label	String	Yes
category	`Array<Object>`	No		Category of the field which should of the format {label:'categoryName'} where index denotes the level of category. ClassName for regular fields and association name for associated fields. `Example: category:[{label:'Bugs class'}]`
showCategoryInHeaderLabel	Boolean	No	`false`	Show category in header label. The header will be displayed in format {categoryName}.{label} where categoryName will be all the category's labels combined with .(dot) notation
tooltip	String	No	Current Field's formatted value	Defines Field whose value needs to be shown as HelperText e.g tooltip: 'pzDescription' field value for pyID field
showTooltip	Boolean	No	`true`	Enable/Disable tooltip on column
width	Number	No	`150`	Pixel width of the field
minWidth	Number	No	`90`	Minimum width in pixels, field width cannot be resized below this threshold
filter	Boolean	No	`true`	Allow filtering on this field
filterPickList	Boolean	No	`false`	Filter popup presents a pick list to choose values from
sort	Boolean	No	`true`	Allow sorting
sortDirection	String	No		`asc` or `desc`. Allows sorting on load. If this property is present, then sortPriority is mandatory
sortPriority	Number	No		Sets the priority on filed for multi sorting(`1` takes highest precedence). Allows sorting on load. If this property is present, then sortDirection is mandatory
grouping	Boolean	No	`true`	Enable grouping
resize	Boolean	No	`true`	Enable resizing
reorderFields	Boolean	No	`true`	Allows reordering of column.
freeze	Boolean	No	`true`	Enable freezing
fillAvailableSpace	Boolean	No	`false`	field will resize to available excess width. First field definition will be honoured if configured on multiple columns.
required	Boolean	No	`false`	An asterisk will be added in the table header cell right after the label
toggle	Boolean	No	`true`	Enable field show/hide
show	Boolean	No	`true`	Field shows in the view by default. Can be set to false to toggle it in later
showMenu	Boolean	No	`true`	Show/hide field level Header menu
aggregation	Boolean	No	`true`	Allow aggregation on column
combineColumn	Boolean	No	`true`	Allow combining columns
customizeColumn	Boolean	No	`true`	Allow customizing column label and formatting
noContextMenu	Boolean	No	`false`	Disable context menu at cells
contextMenuOptions	`Array<Object>`	No	`[]`	This property extends options provided on right click in a cell context. Object structure: `{ id: <string(required)>, icon: <optional>, label: <required>, show: <bool(optional)>, disabled: <bool(optional)> onClick: <Func(target, field, rowContext)(optional)> }`
cellRenderer	String	No		Name of a custom component that is made available through the render factory. Check section on cellRenderer
hierarchicalInfo	Object	No		Enable 'Hierarchical' display mode on column if hierarchicalInfo exists. Object structure: `{parentId: string, materializedPathId: string, targetId: string, sortById:<string(optional)>}`
cellAlign	String	No		Align cell to left/right/center. Values accepted: 'left', 'right', 'center'
hideGroupColumnNameLabel	boolean	No	false	Column name label in group header will be hidden when set to 'true'
filterParams	Object	No	TODO	Filter options for various field

API Context

API	Arguments	Mandatory	Notes
stateUpdateCallback	state: updated state from the component	No	This api gets called with updated state whenever it gets modified
setSelectedRows	selectedRows: selected rows data on the table	Yes	This api sets the selected rows data on the state
getSelectedRows			This api gets the selected rows data from the state

Formatters

Value type	Mandatory	Notes
`Object`	No	Object of formatter functions mapping where each function accepts 2 parameters, (inputValue, Options). Options is an object having properties: `{locale, timezone, rowData, fieldDef, translate}`

Render Factory

Prop key	Mandatory	Description	Return type
renderFactory	No	This should be a factory function which receives two arguments where second argument is optional. First argument value is the cell renderer name (if added in fieldDefs of that column). Second argument value is metadata which contains info configured for that column. It should return a component definition (or an object that contains component definition --> see Return type). This component definition will be used by RepeatingStructures to render a cell with the component provided by renderFactory. If component definition is not provided from render factory or renderFactory is not provided to Repeating structures then cell will be rendered directly with value derived for the cell or the formatted value(if formatter is provided for that column)	Repeating structures currently support 2 return types from renderFactory function a component definition function. (OR) an object that contains 2 keys {props: props that you want to be passed to component along with cellProps, component: a component definition function}

Presets

Value type	Mandatory	Notes
`Array<Array<Object>>`	No	This property value comes from authorization

Other Props

Property	Value type	Mandatory	Default value	Notes
toolBarOptions	`Array<Array<Object>>`	No	`[]`	This property extends options provided in toolbar. Object structure: `{ id: <string(required)>, icon: <optional>, label: <required>, show: <bool(optional)> , onClick: <Func(optional)> }`
onViewReady	Function	No	`null`	This function acts as a callback that is invoked when the view is ready
onRowClickAction	Function	No	`null`	This function is invoked when an item/entry is clicked. The corresponding item data is passed into the function on invocation
showExportToExcelOption	Boolean	No	`false`	This option is shown in the toolbar menu when the ListView is sourced from queryable DataPage
additionalInfo	Object	No	`undefined \| AdditionalInfo displayed on the toolbar is passed as is to List Toolbar component

State

Feature	Property	Value type	Example
Column reorder	colOrder	`Array<string>` - Array of column id	`colOrder: ["A", "custom1590925631168", "2", "3", "D", "10", "11"]`
Column resize	columnWidths	`Object` - key: columnId, value: column width	`columnWidths: {10: 132.5, 11: 132.5, 12: 132.5, 2: 235.5, 3: 353}`
Column freeze	freezeColumns	`Array<string>` - Array of column id	`freezeColumns: ["3", "10"]`
Column show/hide	hiddenColumns	`Array<string>` - Array of column id	`hiddenColumns: ["8", "9"]`
Density	selectedHeightOption	`String` - id value from displayDensity table configuration property	`selectedHeightOption: "4"`
Sort	sortingOrder	`Array<object>` - [{columnId: string, order: `[asc\\|desc]`, sequence: number}]	`javascript sortingOrder: [ {columnId: "2", order: "asc", sequence: 1}, {columnId: "A", order: "desc", sequence: 2} ]`
Filter	filterExpression	`Object` - output of condition builder	Refer - Condition builder documentation
Group	groups	`Array<object>` - [{columnId: string, level: number, order: `[asc\\|desc]`}]	`groups: [ {columnId: "F", level: 0, order: "asc"}, {columnId: "D", level: 1, order: "asc"} ]`
Aggregation	aggregationInfo	`Array<object>` - [{columnId: string, type: `[Sum\\|Max\\|Min\\|Avg]`}]	`aggregationInfo: [ {columnId: "D", type: "Max"}, {columnId: "11", type: "Avg"} ]`
Merge column	customFields	`Array<object>` - {id: string - should be unique, expression: array, primaryColumnId: string, label: string }	`customFields: [ { id: 'custom4', label: 'MyCustomColumn', primaryColumnId: '2', expression: ['2', '1', ['template1'], '3', ['template2'] ] } ]`