Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.
npm install @pega/lists-reactWelcome to @pega/lists-react
To import
``javascript`
import { RepeatingStructures } from '@pega/lists-react';
To consume
`javascript`
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 |[{ name: 'Short', id: '1' }, { name: 'Medium', id: '2' },{ name: 'Tall', id: '3' },{ name: 'Full content', id: '4' }]
| displayDensity | Array of options | No | | A map of names(for display) and id(for persistence). The id values have specific behavior(s) associated with them |height: { minHeight: 600 }
| height | Object | No | | 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) /} |true
| toggleFieldVisibility | Boolean | No | | Allow show/hide of fields |true
| grouping | Boolean | No | | Allow grouping on fields |Table
| template | String | Yes | | Determines the view of a Repeating Structure, values:['Table','Gallery','Timeline'] |false
| basicMode | Boolean | No | | Display views ['Table','Gallery','Timeline'] with full or condensed toolbar. Default shows full toolbar. |false
| editing | Boolean | No | | Allow editing on fields |false
| deleting | Boolean | No | | Allow deleting of rows |true
| personalization | Boolean | No | | Allow personalization views |false
| enableAppDefault | Boolean | No | | Enable app default personalization options |Initial view
| nonPersonalizationViewName | String | No | | Name to be shown for non personalized view |true
| reorderFields | Boolean | No | | Allow field reordering through a drag and drop action |false
| reorderItems (experimental) | Boolean | No | | Allow row reordering through a drag and drop action |false
| dragHandle (experimental) | Boolean | No | | Allow to add a column for drag handle |true
| globalSearch | Boolean | No | | Brings in a search widget to allow searching across all text type fields |true
| toolbar | Boolean | No | | Display toolbar on the view |true
| showCount | Boolean | No | | Display count in toolbar |undefined
| defaultRowHeight | String | No | | Row density id value from displayDensity options |false
| allowBulkActions | boolean | No | | Renders the 'Bulk actions' button in the table toolbar, which gets enabled on row selection |undefined
| dateFunctions | Object | No | | Enables date-functions like MONTHS/WEEKS/... during Grouping and Filtering. (Object structure) |false
| relativeDates | Boolean | No | | Enables Relative Dates, such as "Last 7 days" or "Current Year", in Filtering for DateTime or Date_Only values. |true
| footer | Boolean | No | | Display footer on the view |dynamicFieldTemplates: [{ name: 'Comma separated', value: 'comma',selected: true }, { name: 'Space separated', value: 'space' }, { name: 'Multi line', value: 'multiline' }, { name: 'Forward slash', value: 'forwardslash' }]
| dynamicFieldTemplates | Object | No | | Templates for dynamic fields. See section on Dynamic fields |Array
| title | String | No | '\
| 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 |Array
| 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 |
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 |
| 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
Presets
| Value type | Mandatory | Notes |
| ---------------------- | :-------: | -------------------------------------------- |
| Array | No | This property value comes from authorization |
Other Props
| Property | Value type | Mandatory | Default value | Notes |
| ----------------------- | ---------------------- | :-------: | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| toolBarOptions | Array | No | [] | This property extends options provided in toolbar. Object structure: { id: |null
| onViewReady | Function | No | | This function acts as a callback that is invoked when the view is ready |null
| onRowClickAction | Function | No | | This function is invoked when an item/entry is clicked. The corresponding item data is passed into the function on invocation |false
| showExportToExcelOption | Boolean | No | | This option is shown in the toolbar menu when the ListView is sourced from queryable DataPage |undefined | AdditionalInfo displayed on the toolbar is passed as is to List Toolbar component |
| additionalInfo | Object | No |
State
| Feature | Property | Value type | Example |
| ---------------- | -------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Column reorder | colOrder | Array - 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 - Array of column id | freezeColumns: ["3", "10"] |
| Column show/hide | hiddenColumns | Array - Array of column id | hiddenColumns: ["8", "9"] |
| Density | selectedHeightOption | String - id value from displayDensity table configuration property | selectedHeightOption: "4" |
| Sort | sortingOrder | Array - [{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 - [{columnId: string, level: number, order: [asc\|desc]}] | groups: [ {columnId: "F", level: 0, order: "asc"}, {columnId: "D", level: 1, order: "asc"} ] |
| Aggregation | aggregationInfo | Array - [{columnId: string, type: [Sum\|Max\|Min\|Avg]}] | aggregationInfo: [ {columnId: "D", type: "Max"}, {columnId: "11", type: "Avg"} ] |
| Merge column | customFields | Array - [{id: string - should be unique, expression: array, primaryColumnId: string, label: string }] | customFields: [ { id: 'custom4', label: 'MyCustomColumn', primaryColumnId: '2', expression: ['2', '1', ['template1'], '3', ['template2'] ] } ] |
Reference to the Component ("compRef" in below example)
APIs exposed on the component ref are accessible via compRef.current. (like compRef.current.refreshView)
| API_NAME | Default values | Notes | Example |
| ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------