# nylas-list-configurations

Source: https://developer.nylas.com/docs/reference/ui/list-configurations/

The `nylas-list-configurations` component displays a list of scheduling pages.

## Overview

- **Tag**: `<nylas-list-configurations>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-list-configurations></nylas-list-configurations>
```

### React

```jsx
import { NylasListConfigurations } from '@nylas/react';

export default function Example() {
  return <NylasListConfigurations />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `configurations` | `configurations` | (Configuration \| GroupConfiguration)[] | `[]` | No | The list of configurations to display. |
| `listConfigurationsNextCursor` | `list-configurations-next-cursor` | null \| string \| undefined | - | No | The next cursor for list configurations, if any. |
| `schedulerPreviewLink` | `scheduler-preview-link` | string | `''` | No | The scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link. |
| `selectedLanguage` | `selected-language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined | - | No | The selected language. |
| `themeConfig` | `theme-config` | undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; } | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `createButtonClick` | HTMLNylasListConfigurationsElement | Event emitted when the user clicks the create event button. |
| `deleteButtonClick` | { host: HTMLNylasListConfigurationsElement; configuration: Configuration \| GroupConfiguration; } | Event emitted when the user clicks the delete event button. |
| `dismissNotification` | { id: string; host: HTMLNylasListConfigurationsElement; } | Event emitted when the user dismisses the error notification. |
| `editButtonClick` | { host: HTMLNylasListConfigurationsElement; configuration: Configuration \| GroupConfiguration; } | Event emitted when the user clicks the edit event button. |
| `initListConfigurations` | { host: HTMLNylasListConfigurationsElement; cursor?: string \| undefined; } | Event emitted when the component is initialized. |
| `nylasSchedulerError` | { notification: Notification; host: HTMLElement; } | This event is fired when there is an error in the component. |

## Methods

### `getState`

**Signature**: `getState() => Promise<"error" | "loading" | "loaded">`

**Returns**: `Promise<"error" | "loading" | "loaded">`

### `hideDeleteConfirmation`

**Signature**: `hideDeleteConfirmation() => Promise<void>`

**Returns**: `Promise<void>`

### `hideEditButtonLoading`

**Signature**: `hideEditButtonLoading() => Promise<void>`

**Returns**: `Promise<void>`

### `registerCallback`

**Signature**: `registerCallback() => Promise<void>`

**Returns**: `Promise<void>`

### `setError`

**Signature**: `setError(error: { message: string; type: NotificationType; category: ErrorCategory; title: string; }) => Promise<void>`

**Returns**: `Promise<void>`

### `setState`

**Signature**: `setState(state: "loading" | "loaded" | "error") => Promise<void>`

**Returns**: `Promise<void>`

## CSS shadow parts

| Part | Description |
| --- | --- |
| `actions-Copy` | The copy action menu item. |
| `actions-Delete` | The delete action menu item. |
| `actions-Preview` | The preview action menu item. |
| `actions__dropdown` | The actions dropdown container. |
| `actions__dropdown-button` | The actions dropdown button. |
| `actions__dropdown-content` | The actions dropdown content. |
| `nfbf__button-outline` |  |
| `nfbf__cancel-cta` |  |
| `nfbf__close-button` |  |
| `nfbf__reschedule-cta` |  |
| `nfbf__title` |  |
| `nlc__card-modal` | The modal dialog container. |
| `nlc__card-wrapper` | The modal overlay wrapper. |
| `nlc__configurations` | The configurations table container. |
| `nlc__create-new-cta` | The create new configuration CTA. |
| `nlc__header` | The header section with title and actions. |
| `nlc__pagination` | The pagination controls container. |
| `nlc__table` | The configurations table element. |
| `nlc__table-container` | The scrollable table wrapper. |

## Dependencies

This component uses the following child components:

- [`<eye-icon>`](/docs/reference/ui/eye-icon/)
- [`<copy-icon>`](/docs/reference/ui/copy-icon/)
- [`<delete-icon>`](/docs/reference/ui/delete-icon/)
- [`<nylas-notification>`](/docs/reference/ui/notification/)
- [`<button-component>`](/docs/reference/ui/button-component/)
- [`<calendar-icon>`](/docs/reference/ui/calendar-icon/)
- [`<edit-icon>`](/docs/reference/ui/edit-icon/)
- [`<select-dropdown>`](/docs/reference/ui/select-dropdown/)
- [`<chevron-icon>`](/docs/reference/ui/chevron-icon/)
- [`<close-icon>`](/docs/reference/ui/close-icon/)

## Used by

This component is used inside:

- [`<nylas-scheduler-editor>`](/docs/reference/ui/scheduler-editor/)