EditableItemsList UI Component
npm i @synerise/ds-editable-items-list
or
yarn add @synerise/ds-editable-items-list
import EditableItemsList from '@synerise/ds-editable-items-list'
<EditableItemsList />
| Property | Description | Type | Default |
|---|---|---|---|
| renderRowElement | Function to render each row. Invoked with item index and item object. | (index: number, item: T) => ReactElement | - |
| items | Array of items to be rendered, each should have a unique id. | T[] | - |
| addButtonLabel | Text or custom component for the "Add" button. | string | ReactNode | - |
| addButtonIcon | Custom icon for the "Add" button. | ReactElement | - |
| addButtonProps | Additional props for the "Add" button. It can override default style. | Partial<ButtonProps> | - |
| onAdd | Callback function called when the "Add" button is clicked. | () => void | - |
| minRowLength | The minimum number of rows to display. | number | 1 |
| maxRowLength | The maximum number of rows allowed. | number | - |
| deleteTooltip | Tooltip text for the delete button. | string | - |
| onDelete | Callback function called when a row's delete button is clicked. It receives the ID and index of the row to delete. | (id: string, index: number) => void | - |