Mozaic Vue

https://master--641e94a45750cc9b0f477973.chromatic.com
Admin
Mozaic Vue is a comprehensive UI component library built for Vue.js applications, offering a wide...
Tokens:10,642
Snippets:52
Trust Score:9.8
Update:10 months ago
Show doc for...
Tokens:
Raw
### Storybook Troubleshooting Guide

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/iframe_id=datatable--with-pager

Provides steps to resolve the 'No Preview' error in Storybook. It suggests checking Storybook configuration, reloading the page, and inspecting browser console or terminal logs for more detailed error messages. This is a general troubleshooting guide applicable to most Storybook setups.

```markdown
# No Preview
Sorry, but you either have no stories or none are selected somehow.
  * Please check the Storybook config.
  * Try reloading the page.


If the problem persists, check the browser console, or the terminal you've run Storybook from.
```

--------------------------------

### DataTableV2 Documentation

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

Documentation for the DataTableV2 component, featuring empty states, headers examples, nested tables, and more.

```APIDOC
## DataTableV2

### Description
Documentation for the DataTableV2 component, offering advanced features like empty states, custom headers, nested tables, and more.

### Method
GET

### Endpoint
/components/data-table-v2

### Parameters
#### Path Parameters
- **component_id** (string) - Required - The unique identifier for the DataTableV2 component.

#### Query Parameters
- **features** (array) - Optional - A list of enabled features (e.g., 'empty-states', 'headers-examples', 'nested', 'pageable', 'selectable', 'sortable', 'table-cells').

### Request Example
```json
{
  "features": ["empty-states", "sortable", "pageable"]
}
```

### Response
#### Success Response (200)
- **component_config** (object) - Configuration details for DataTableV2 based on selected features.
- **example_data** (array) - Example data suitable for the DataTableV2.

#### Response Example
```json
{
  "component_config": {
    "emptyState": {"message": "No data available"},
    "sortable": true,
    "pageable": {"pageSize": 15}
  },
  "example_data": [
    {"id": 1, "name": "Example Item 1", "status": "Active"},
    {"id": 2, "name": "Example Item 2", "status": "Inactive"}
  ]
}
```
```

--------------------------------

### Deal Data Table Structure

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/iframe_id=datatable--with-pager

Represents a structured data table with information about deals. Each row includes an index, deal name, start date, end date, a JSON object containing a 'code' property, and a stock identifier. The 'code' property typically indicates the status of the deal.

```json
{ "code": "CLOSE" }
```

```json
{ "code": "CALCULATED" }
```

```json
{ "code": "ACTIVE" }
```

--------------------------------

### Form Components Documentation

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

Documentation for various form input components including Autocomplete, Checkbox, Dropdown, TextInput, and more.

```APIDOC
## Form Components

### Description
This section details the various form input components available for use in applications.

### Method
GET

### Endpoint
/components/form

### Parameters
#### Path Parameters
- **component_type** (string) - Required - The type of form component (e.g., 'autocomplete', 'checkbox', 'textinput').

#### Query Parameters
- **theme** (string) - Optional - Specifies the theme to apply to the form component (e.g., 'leroymerlin').

### Request Example
```json
{
  "component_type": "textinput",
  "theme": "leroymerlin"
}
```

### Response
#### Success Response (200)
- **component_schema** (object) - The JSON schema defining the structure and properties of the requested form component.
- **usage_guide** (string) - Instructions or examples on how to use the component.

#### Response Example
```json
{
  "component_schema": {
    "type": "object",
    "properties": {
      "value": {"type": "string", "description": "The current value of the input field."},
      "label": {"type": "string", "description": "The label displayed for the input field."},
      "placeholder": {"type": "string", "description": "Placeholder text for the input field."}
    },
    "required": ["value", "label"]
  },
  "usage_guide": "Use the 'value' property to set or get the input's text. The 'label' is mandatory."
}
```
```

--------------------------------

### Storybook Data Table Source Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

Defines how to configure the data source for a Storybook data table. The source can be an Array, a Promise, or a Function. If a Function or Promise is used, it must resolve to an object containing 'data' (an Array of items) and 'total' (the total count of items).

```json
{
  "code": "CLOSE"
}
```

```json
{
  "code": "CALCULATED"
}
```

```json
{
  "code": "ACTIVE"
}
```

--------------------------------

### DataTable Documentation

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

Documentation for the DataTable component, including its default and advanced usage like fixed headers, row clicks, sorting, and pagination.

```APIDOC
## DataTable

### Description
Documentation for the DataTable component, covering its default and advanced usage.

### Method
GET

### Endpoint
/components/data-table

### Parameters
#### Path Parameters
- **component_id** (string) - Required - The unique identifier for the DataTable component.

#### Query Parameters
- **variant** (string) - Optional - Specifies the variant of the DataTable (e.g., 'default', 'fixed-header', 'expandable').
- **options** (object) - Optional - Configuration options for sorting, pagination, and row click handling.

### Request Example
```json
{
  "variant": "default",
  "options": {
    "allowRowClick": true,
    "sortable": true,
    "pagination": {
      "enabled": true,
      "pageSize": 10
    }
  }
}
```

### Response
#### Success Response (200)
- **component_data** (object) - Contains the data and configuration for the DataTable.
- **documentation_url** (string) - A URL pointing to more detailed documentation.

#### Response Example
```json
{
  "component_data": {
    "headers": [
      {"key": "name", "label": "Name"},
      {"key": "description", "label": "Description"},
      {"key": "default", "label": "Default"}
    ],
    "rows": [
      {"name": "propertyName", "description": "This is a short description summary", "default": "defaultValue"}
    ],
    "configuration": {
      "allowRowClick": true,
      "sortable": true,
      "pagination": {
        "enabled": true,
        "pageSize": 10,
        "currentPage": 1,
        "totalPages": 5
      }
    }
  },
  "documentation_url": "/docs/data-table"
}
```
```

--------------------------------

### Event Handling API

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-no-sort

This section details the events that can be triggered by the data table component and how to subscribe to them.

```APIDOC
## Event: headers-changed

### Description
Triggered when the headers of the data table are changed.

### Method
(Event Subscription)

### Endpoint
(N/A - Event Listener)

### Parameters
#### Event Arguments
- **(No specific arguments documented, expects object)** - The event object containing information about the header change.

### Response Example (on event trigger)
```json
{
  "newHeaders": [
    { "caption": "Updated ID", "dataFieldExpr": "id" }
  ]
}
```
```

```APIDOC
## Event: page-changed

### Description
Triggered when the current page of the data table changes.

### Method
(Event Subscription)

### Endpoint
(N/A - Event Listener)

### Parameters
#### Event Arguments
- **newPageNumber** (number) - The value of the new page number.

### Response Example (on event trigger)
```json
{
  "newPageNumber": 2
}
```
```

```APIDOC
## Event: data-changed

### Description
Triggered each time the data in the table is updated.

### Method
(Event Subscription)

### Endpoint
(N/A - Event Listener)

### Parameters
#### Event Arguments
- **updatedData** (Array) - An array of the updated data items.

### Response Example (on event trigger)
```json
{
  "updatedData": [
    { "id": 1, "name": "Updated Item 1" }
  ]
}
```
```

```APIDOC
## Event: row-click

### Description
Triggered when a row in the data table is clicked. Requires the `allowRowClick` prop to be `true`.

### Method
(Event Subscription)

### Endpoint
(N/A - Event Listener)

### Parameters
#### Event Arguments
- **clickedRowData** (object) - An object containing all the data of the clicked row.

### Response Example (on event trigger)
```json
{
  "clickedRowData": {
    "id": 1,
    "name": "Item 1",
    "status": "ACTIVE"
  }
}
```
```

```APIDOC
## Event: sort-order-changed

### Description
Triggered when a sort button in the header is clicked.

### Method
(Event Subscription)

### Endpoint
(N/A - Event Listener)

### Parameters
#### Event Arguments
- **sortInfo** (object) - An object containing all information about the header that was sorted.
  - **allowSorting** (boolean)
  - **caption** (string)
  - **cssClass** (string)
  - **dataFieldExpr** (string)
  - **sortFieldExpr** (string)
  - **sortOrder** ('asc' | 'desc' | null)

### Response Example (on event trigger)
```json
{
  "sortInfo": {
    "allowSorting": true,
    "caption": "Name",
    "cssClass": "sorted-asc",
    "dataFieldExpr": "name",
    "sortFieldExpr": "name",
    "sortOrder": "asc"
  }
}
```
```

```APIDOC
## Event: page-size-changed

### Description
Triggered when the number of rows per page selector (Pager) is updated.

### Method
(Event Subscription)

### Endpoint
(N/A - Event Listener)

### Parameters
#### Event Arguments
- **newSize** (number) - The new value for the number of rows per page.

### Response Example (on event trigger)
```json
{
  "newSize": 20
}
```
```

--------------------------------

### Table Component Properties

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

This section details the properties available to configure the table component's behavior and appearance.

```APIDOC
## Table Component Properties

### Description
These properties allow you to customize the table's functionality, such as pagination, row click behavior, fixed headers, sorting, and element styling.

### Properties

#### `pager`
- **Type**: `object`
- **Description**: Get or set pager information, including sizes, text, and current value.
- **Default**: `{}`

#### `allowRowClick`
- **Type**: `boolean`
- **Description**: Make rows clickable. Get or set if a row can be clicked.
- **Default**: `false`

#### `fixedHeader`
- **Type**: `boolean`
- **Description**: Make headers fixed. Get or set if the headers are fixed.
- **Default**: `false`

#### `sorting`
- **Type**: `object`
- **Description**: Get or set the sorting information, including the mode ('none', 'single', 'multiple').
- **Default**: `{}`

#### `itemClasses`
- **Type**: `string | function | object`
- **Description**: An object allowing to insert classes on all the rows of the component.
- **Default**: `''`

#### `size`
- **Type**: `string`
- **Description**: Allows to set the height of rows.
- **Default**: `'-'`

#### `totalElements`
- **Type**: `number`
- **Description**: Allows you to pass the total number of pages to the component. (Should only be used if the `source` value is a `Function` or a `Promise`).
- **Default**: `'-'`

#### `zIndex`
- **Type**: `number`
- **Description**: Allows you to pass the z-index for the static header.
- **Default**: `'-'`
```

--------------------------------

### Data Table Source Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'source' control for a data table, specifying that it can accept an Array, a Promise, or a Function. If a Function or Promise is used, it must resolve or return an object with 'data' (an Array of items) and 'total' (the total count of items).

```javascript
source| Get or set the source of thedata table. _The source can be an`Array` , a `Promise` or a `Function`._ If the source is a `Function` or a `Promise`, it's must be return or resolve an object like: `{ data: Array,  total: Number }`. Where `data` is an Array of items & `total` the total count of items.arrayfuncPromise| () => []| RAW
```

--------------------------------

### Storybook Data Table Paging Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

Describes the paging configuration for a Storybook data table. It includes properties for enabling paging, displaying text, and setting the current index.

```json
{
  "enabled": true,
  "index": 1,
  "text": "custom"
}
```

--------------------------------

### Storybook Data Table Headers Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

Details the structure for configuring headers in a Storybook data table. Each header object can specify a caption, data field expression, sort field expression, and whether sorting is allowed, along with the sort order.

```javascript
{
  caption: string,
  dataFieldExpr: string,
  sortFieldExpr: string,
  allowSorting: boolean,
  sortOrder: 'asc' | 'desc' | null
}[]
```

--------------------------------

### Data Table Paging Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'paging' control for a data table, enabling or disabling paging and setting the text and current index for pagination.

```javascript
paging| Get or set paging informations.{ enabled: boolean, text: string, index: number }| {}| Set object
```

--------------------------------

### Storybook Configuration Error

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

This message indicates a problem with the Storybook configuration, either no stories are defined or none are selected. It suggests checking the Storybook config, reloading the page, and inspecting the browser console or terminal for errors.

```text
Sorry, but you either have no stories or none are selected somehow.
  * Please check the Storybook config.
  * Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.
```

--------------------------------

### Data Table Size Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'size' control for a data table, used to set the height of the rows.

```javascript
size| Allows to set the height of rows.string| -| Set string
```

--------------------------------

### Data Table Total Elements Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'totalElements' control for a data table, used to specify the total number of pages. This is typically used when the 'source' is a Function or Promise.

```javascript
totalElements| Allows you to pass the total number of pages to the component. _(Should only be used if the`source` value is a `Function` or a `Promise`)_.number| -| Set number
```

--------------------------------

### Website Data Management API

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-no-sort

This API allows for the retrieval and manipulation of website-related data. It supports operations for fetching data, setting various configurations like sorting and headers, and handling events related to data changes.

```APIDOC
## GET /websites/master--641e94a45750cc9b0f477973_chromatic/data

### Description
Retrieves the data associated with the website. The source can be an Array, a Promise, or a Function. If it's a Function or Promise, it must resolve to an object with `data` (Array) and `total` (Number) properties.

### Method
GET

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/data

### Parameters
#### Query Parameters
- **source** (Array | Promise | Function) - Optional - The source of the data table. Can be a function or promise resolving to { data: Array, total: Number }.

### Response
#### Success Response (200)
- **data** (Array) - An array of data items.
- **total** (Number) - The total count of items.

#### Response Example
```json
{
  "data": [
    { "code": "CLOSE" },
    { "code": "CALCULATED" },
    { "code": "ACTIVE" }
  ],
  "total": 99
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/source

### Description
Sets the source of the data table.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/source

### Parameters
#### Request Body
- **source** (Array | Promise | Function) - Required - The source of the data. If a Function or Promise, it must return or resolve an object like: `{ data: Array, total: Number }`.

### Request Example
```json
{
  "source": [
    { "id": 1, "name": "Item 1" },
    { "id": 2, "name": "Item 2" }
  ]
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Source updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/sorting

### Description
Sets the sorting mode for the data table.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/sorting

### Parameters
#### Request Body
- **mode** (string) - Required - The sorting mode. Possible values: 'none', 'single', 'multiple'.

### Request Example
```json
{
  "mode": "single"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Sorting configuration updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/dataKeyExpr

### Description
Sets the data key expression (identity) for the data table.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/dataKeyExpr

### Parameters
#### Request Body
- **dataKeyExpr** (string) - Required - The name of the identity field.

### Request Example
```json
{
  "dataKeyExpr": "itemId"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Data key expression updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/headers

### Description
Sets or updates the headers for the data table.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/headers

### Parameters
#### Request Body
- **headers** (Array) - Required - An array of header objects. Each object should have properties like `caption`, `dataFieldExpr`, `sortFieldExpr`, `allowSorting`, and `sortOrder`.

### Request Example
```json
{
  "headers": [
    { "caption": "ID", "dataFieldExpr": "id", "allowSorting": true },
    { "caption": "Name", "dataFieldExpr": "name", "allowSorting": true, "sortOrder": "asc" }
  ]
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Headers updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/pager

### Description
Sets or updates the pager information for the data table.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/pager

### Parameters
#### Request Body
- **pager** (object) - Required - An object containing pager information, such as `sizes`, `text`, and `value`.

### Request Example
```json
{
  "pager": {
    "sizes": [10, 20, 50],
    "text": "Rows per page",
    "value": 10
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Pager configuration updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/paging

### Description
Sets or updates the paging information for the data table.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/paging

### Parameters
#### Request Body
- **paging** (object) - Required - An object containing paging information, such as `enabled`, `text`, and `index`.

### Request Example
```json
{
  "paging": {
    "enabled": true,
    "text": "Page",
    "index": 1
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Paging configuration updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/allowRowClick

### Description
Enables or disables row click functionality.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/allowRowClick

### Parameters
#### Request Body
- **allowRowClick** (boolean) - Required - `true` to make rows clickable, `false` otherwise.

### Request Example
```json
{
  "allowRowClick": true
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Row click configuration updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/fixedHeader

### Description
Enables or disables fixed header functionality.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/fixedHeader

### Parameters
#### Request Body
- **fixedHeader** (boolean) - Required - `true` to fix the header, `false` otherwise.

### Request Example
```json
{
  "fixedHeader": true
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Fixed header configuration updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/itemClasses

### Description
Applies CSS classes to all rows of the component.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/itemClasses

### Parameters
#### Request Body
- **itemClasses** (string | Function | Object) - Required - CSS classes to apply to rows. Can be a string, function, or object.

### Request Example
```json
{
  "itemClasses": "my-row-class"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Item classes updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/size

### Description
Sets the height of rows.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/size

### Parameters
#### Request Body
- **size** (string) - Required - The desired row height (e.g., 'small', 'medium', 'large').

### Request Example
```json
{
  "size": "medium"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Row size updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/totalElements

### Description
Sets the total number of pages, typically used when the source is a Function or Promise.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/totalElements

### Parameters
#### Request Body
- **totalElements** (number) - Required - The total number of elements/pages.

### Request Example
```json
{
  "totalElements": 100
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Total elements updated successfully."
}
```
```

```APIDOC
## POST /websites/master--641e94a45750cc9b0f477973_chromatic/config/zIndex

### Description
Sets the z-index for the static header.

### Method
POST

### Endpoint
/websites/master--641e94a45750cc9b0f477973_chromatic/config/zIndex

### Parameters
#### Request Body
- **zIndex** (number) - Required - The z-index value for the static header.

### Request Example
```json
{
  "zIndex": 1000
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Z-index updated successfully."
}
```
```

--------------------------------

### Table Component Slots

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

This section describes the available slots for customizing the table's content and structure.

```APIDOC
## Table Component Slots

### Description
These slots allow for advanced customization of the table's rendered output, including headers, individual items, and empty states.

### Slots

#### `default`
- **Description**: Default slot for custom content.
- **Scope**: Unknown

#### `header.${header.dataFieldExpr}`
- **Description**: Custom header for a specific column identified by `dataFieldExpr`.
- **Scope**: Unknown

#### `item.${header.dataFieldExpr}`
- **Description**: Custom rendering for items within a specific column identified by `dataFieldExpr`.
- **Scope**: Unknown

#### `no-data`
- **Description**: Slot to render custom content when no data is available in the table.
- **Scope**: Unknown

#### `pager.text`
- **Description**: Custom template for the pager text.
- **Scope**: Unknown

#### `paging.text`
- **Description**: Custom template for the paging text.
- **Scope**: Unknown
```

--------------------------------

### Data Table Sorting Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'sorting' control for a data table, specifying the sorting mode ('none', 'single', or 'multiple').

```javascript
sorting| Get or set the sorting informations.{ mode:'none' | 'single' | 'multiple'}| {}| Set object
```

--------------------------------

### Data Table Z-Index Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'zIndex' control for a data table, used to set the z-index for the static header.

```javascript
zIndex| Allows you to pass the z-index for the static header.number| -| Set number
```

--------------------------------

### Data Table Properties API

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-single-sort

This section details the configurable properties of the Data Table component.

```APIDOC
## Data Table Properties

### Description
Properties to configure the behavior and appearance of the Data Table.

### Properties

#### `source`
- **Type**: `Array` | `Promise` | `Function`
- **Description**: Get or set the source of the data table. If the source is a `Function` or a `Promise`, it must return or resolve an object with `data` (Array) and `total` (Number) properties.
- **Default**: `() => []`

#### `sorting`
- **Type**: `{ mode: 'none' | 'single' | 'multiple' }`
- **Description**: Get or set the sorting information. `mode` can be 'none', 'single', or 'multiple'.
- **Default**: `{}`

#### `dataKeyExpr`
- **Type**: `string`
- **Description**: Get or set the name of the identity field for rows.
- **Default**: `'id'`

#### `headers`
- **Type**: `Array<{ caption: string, dataFieldExpr: string, sortFieldExpr: string, allowSorting: boolean, sortOrder: 'asc' | 'desc' | null }>`
- **Description**: Get or set the headers information for the data table.
- **Default**: `[]`

#### `pager`
- **Type**: `{ sizes: number[], text: string, value: number }`
- **Description**: Get or set pager information, including available sizes, text, and current value.
- **Default**: `{}`

#### `paging`
- **Type**: `{ enabled: boolean, text: string, index: number }`
- **Description**: Get or set paging information, including enabled status, text, and current index.
- **Default**: `{}`

#### `allowRowClick`
- **Type**: `boolean`
- **Description**: Determines if rows are clickable.
- **Default**: `false`

#### `fixedHeader`
- **Type**: `boolean`
- **Description**: Determines if the table header is fixed.
- **Default**: `false`

#### `itemClasses`
- **Type**: `string` | `Function` | `object`
- **Description**: Allows inserting CSS classes on all rows of the component.
- **Default**: `''`

#### `size`
- **Type**: `string`
- **Description**: Allows setting the height of rows.
- **Default**: `'-'`

#### `totalElements`
- **Type**: `number`
- **Description**: Allows passing the total number of pages to the component. Should only be used if `source` is a `Function` or `Promise`.
- **Default**: `'-'`

#### `zIndex`
- **Type**: `number`
- **Description**: Allows passing the z-index for the static header.
- **Default**: `'-'`

```

--------------------------------

### Data Table Pager Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'pager' control for a data table, allowing configuration of page sizes, text, and the current page value.

```javascript
pager| Get or set pager informations.{ sizes: number[], text: string, value: number }| {}| Set object
```

--------------------------------

### Data Table Properties

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-pager

This section details the properties that can be set on the data table component to customize its behavior and appearance.

```APIDOC
## Data Table Component Properties

### `source`

- **Description**: Get or set the source of the data table. The source can be an `Array`, a `Promise`, or a `Function`. If the source is a `Function` or a `Promise`, it must return or resolve an object like: `{ data: Array, total: Number }`.
- **Type**: `Array | Function | Promise`
- **Default**: `() => []`

### `paging`

- **Description**: Get or set paging information.
- **Type**: `Object`
- **Properties**:
  - `enabled` (boolean) - Indicates if paging is enabled.
  - `text` (string) - Text for pagination controls.
  - `index` (number) - The current page index.
- **Default**: `{}`

### `pager`

- **Description**: Get or set pager information.
- **Type**: `Object`
- **Properties**:
  - `sizes` (Array<number>) - Available page sizes.
  - `text` (string) - Text for the page size selector.
  - `value` (number) - The currently selected page size.
- **Default**: `{}`

### `dataKeyExpr`

- **Description**: Get or set the name of the identity field for data items.
- **Type**: `string`
- **Default**: `'id'`

### `headers`

- **Description**: Get or set the headers information for the data table columns.
- **Type**: `Array<Object>`
- **Properties**:
  - `caption` (string) - The display text for the header.
  - `dataFieldExpr` (string) - The field name in the data items to display.
  - `sortFieldExpr` (string) - The field name to use for sorting.
  - `allowSorting` (boolean) - Whether sorting is allowed for this column.
  - `sortOrder` ('asc' | 'desc' | null) - The current sort order.
- **Default**: `[]`

### `allowRowClick`

- **Description**: Make rows clickable. Get or set if a row can be clicked.
- **Type**: `boolean`
- **Default**: `false`

### `fixedHeader`

- **Description**: Make headers fixed. Get or set if the headers are fixed.
- **Type**: `boolean`
- **Default**: `false`

### `sorting`

- **Description**: Get or set the sorting mode.
- **Type**: `Object`
- **Properties**:
  - `mode` ('none' | 'single' | 'multiple') - The sorting mode.
- **Default**: `{}`

### `itemClasses`

- **Description**: An object allowing to insert classes on all the rows of the component.
- **Type**: `string | Function | Object`
- **Default**: `''`

### `size`

- **Description**: Allows to set the height of rows.
- **Type**: `string`
- **Default**: `-`

### `totalElements`

- **Description**: Allows you to pass the total number of pages to the component. Should only be used if the `source` value is a `Function` or a `Promise`.
- **Type**: `number`
- **Default**: `-`

### `zIndex`

- **Description**: Allows you to pass the z-index for the static header.
- **Type**: `number`
- **Default**: `-`
```

--------------------------------

### Data Table Header Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'headers' control for a data table. It accepts an array of header objects, where each object can specify caption, dataFieldExpr, sortFieldExpr, allowSorting, and sortOrder.

```javascript
headers| Get or set the headers informations.{ caption: string, dataFieldExpr: string, sortFieldExpr: string, allowSorting: boolean, sortOrder: 'asc' | 'desc' | null }[] | []| Set object
```

--------------------------------

### Data Table Events

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-pager

This section outlines the events emitted by the data table component, which can be used to react to user interactions and data changes.

```APIDOC
## Data Table Component Events

### `headers-changed`

- **Description**: Triggered at each headers change.
- **Arguments**: `Set object`

### `page-changed`

- **Description**: Triggered at each page change.
- **Arguments**: `number` - the value of the new page

### `data-changed`

- **Description**: Triggered each time the data is updated.
- **Arguments**: `array` - an array of updated data

### `row-click`

- **Description**: Triggered each time a row is clicked. Requires the `allowRowClick` prop to be `true`.
- **Arguments**: `object` - An object containing all the data of the clicked line.

### `sort-order-changed`

- **Description**: Triggered each time a sort button is clicked.
- **Arguments**: `object` - an object containing all the information of the header concerned by the sorting action.
  - **`value`**: `{ allowSorting: boolean, caption: string, cssClass: string, dataFieldExpr: string, sortFieldExpr: string, sortOrder: string }`

### `page-size-changed`

- **Description**: Triggered each time the value of the rows per page selector (Pager) is updated.
```

--------------------------------

### Data Table Update Headers Action

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

This represents an action to update the headers of the data table.

```javascript
update:headers| | -| Set object
```

--------------------------------

### Data Table Row Click Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'allowRowClick' control for a data table, which determines if rows should be clickable. When enabled, the 'row-click' event will be triggered.

```javascript
allowRowClick| Make rows clickable. Get or set if row can clickable.boolean| false| Set boolean
```

--------------------------------

### Data Table Item Classes Configuration

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

Defines the 'itemClasses' control for a data table, allowing custom CSS classes to be applied to all rows.

```javascript
itemClasses| An object allowing to insert classes on all the rows of the component.stringfuncobject| ''| Set object
```

--------------------------------

### Table Component Events

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-paging

This section lists the events emitted by the table component in response to user interactions or data changes.

```APIDOC
## Table Component Events

### Description
These events are emitted by the table component to notify about various occurrences such as data updates, page changes, sorting actions, and row clicks.

### Events

#### `headers-changed`
- **Description**: Triggered at each headers change.
- **Arguments**: None specified.
- **Value**: `object`

#### `page-changed`
- **Description**: Triggered at each page change.
- **Arguments**: `number` - the value of the new page.
- **Value**: `object`

#### `data-changed`
- **Description**: Triggered each time the data is updated.
- **Arguments**: `array` - an array of updated data.
- **Value**: `object`

#### `row-click`
- **Description**: Triggered each time a row is clicked. (Requires `allowRowClick` prop to be `true`).
- **Arguments**: `object` - An object containing all the data of the clicked line.
- **Value**: `object`

#### `sort-order-changed`
- **Description**: Triggered each time a sort button is clicked.
- **Arguments**: `object` - an object containing all the information of the header concerned by the sorting action.
- **Value**: `{ allowSorting: boolean, caption: string, cssClass: string, dataFieldExpr: string, sortFieldExpr: string, sortOrder: string }`

#### `page-size-changed`
- **Description**: Triggered each time the value of the rows per page selector (Pager) is updated.
- **Arguments**: `number` - the new value for the number of rows per page.
- **Value**: `object`
```

--------------------------------

### Data Table Page Size Changed Event

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

The 'page-size-changed' event is triggered when the number of rows per page is updated via the pager control.

```javascript
page-size-changed| Triggered each time the value of the rows per page selector _(Pager)_ is updated.
  * @event **page-size-changed**
  * @arg {number} - the new value for the number of rows per page

| -| Set object
```

--------------------------------

### Data Table Events API

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-single-sort

This section details the events that can be triggered by the Data Table component.

```APIDOC
## Data Table Events

### Description
Events emitted by the Data Table component in response to user interactions or data changes.

### Events

#### `headers-changed`
- **Description**: Triggered at each headers change.
- **Arguments**: None
- **Handler**: `(newHeaders) => void`

#### `page-changed`
- **Description**: Triggered at each page change.
- **Arguments**: `number` - the value of the new page
- **Handler**: `(newPageNumber) => void`

#### `data-changed`
- **Description**: Triggered each time the data is updated.
- **Arguments**: `Array` - an array of updated data
- **Handler**: `(updatedData) => void`

#### `row-click`
- **Description**: Triggered each time a row is clicked. Requires `allowRowClick` prop to be `true`.
- **Arguments**: `object` - An object containing all the data of the clicked row.
- **Handler**: `(rowData) => void`

#### `sort-order-changed`
- **Description**: Triggered each time a sort button is clicked.
- **Arguments**: `object` - an object containing all the information of the header concerned by the sorting action.
  - `allowSorting`: `boolean`
  - `caption`: `string`
  - `cssClass`: `string`
  - `dataFieldExpr`: `string`
  - `sortFieldExpr`: `string`
  - `sortOrder`: `'asc' | 'desc' | null`
- **Handler**: `(sortInfo) => void`

#### `page-size-changed`
- **Description**: Triggered each time the value of the rows per page selector (Pager) is updated.
- **Arguments**: `number` - the new value for the number of rows per page
- **Handler**: `(newPageSize) => void`

#### `update:headers`
- **Description**: Custom event for updating headers.
- **Arguments**: None
- **Handler**: `() => void`

```

--------------------------------

### Data Table Page Changed Event

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

The 'page-changed' event is triggered when the page of the data table changes. It provides the new page number as an argument.

```javascript
page-changed| Triggered at each page change.
  * @event **page-changed**
  * @arg {number} - the value of the new page

| -| Set object
```

--------------------------------

### Data Table Default Slot

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

This describes the default slot for the data table component, which is currently marked as 'unknown'.

```javascript
default| unknown| -| Set object
```

--------------------------------

### Data Table Headers Changed Event

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

The 'headers-changed' event is triggered whenever the headers of the data table are modified.

```javascript
headers-changed| Triggered at each headers change.
  * @event **headers-changed**

|  -| Set object
```

--------------------------------

### Data Table Row Click Event

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

The 'row-click' event is triggered when a row in the data table is clicked. This requires the 'allowRowClick' prop to be true. It returns an object containing all data for the clicked row.

```javascript
row-click| Triggered each time a row is clicked.
  * @event **row-click**
  * @arg {object} - An object containing all the data of the clicked line. _(Need the prop`allowRowClick` to be `true`)_

| -| Set object
```

--------------------------------

### Extracting JSON from Table Data

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/iframe_id=datatable--with-paging

This snippet demonstrates how to extract JSON objects from a table. It assumes the JSON data is present within a specific column of the table. This is useful for parsing structured data from web pages.

```javascript
function extractJsonFromTable(tableElement) {
  const data = [];
  const rows = tableElement.querySelectorAll('tbody tr');
  rows.forEach(row => {
    const cells = row.querySelectorAll('td');
    if (cells.length > 4) {
      try {
        const jsonString = cells[4].textContent;
        const jsonData = JSON.parse(jsonString);
        data.push(jsonData);
      } catch (e) {
        console.error('Failed to parse JSON:', e);
      }
    }
  });
  return data;
}
```

--------------------------------

### Data Table Data Changed Event

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

The 'data-changed' event is triggered each time the data within the data table is updated.

```javascript
data-changed| Triggered each time the data is updated.
  * @event **data-changed**
  * @arg {array} - an array of updated data

| -| Set object
```

--------------------------------

### Data Table Sort Order Changed Event

Source: https://master--641e94a45750cc9b0f477973.chromatic.com/index_path=%2Fstory%2Fdatatable--with-fixed-header

The 'sort-order-changed' event is triggered when the sort order of a data table column is changed. It provides an object with details about the concerned header.

```javascript
sort-order-changed| Triggered each time a sort button is clicked.
  * @event **sort-order-changed**
  * @arg {object} - an object containing all the information of the header concerned by the sorting action
  * @value - { allowSorting: boolean, caption: string, cssClass: string, dataFieldExpr: string, sortFieldExpr: string, sortOrder: string }

| -| Set object
```
Tokens:
Raw