> ## Documentation Index
> Fetch the complete documentation index at: https://prismeai-legacy.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# DataTable Block

> Display tabular data with sorting, filtering, and pagination.

[Demo](https://demo.pages.prisme.ai/en/DataTable)

## Minimal usage

```yaml theme={null}
# Page/Block
- slug: DataTable
  data:
    - label: foo
      value: 42
    - label: bar
      value: 12
```

### data

`data` is an array of object. A column for each keys of each object will be automatically displayed.

## Advanced usage

### columns

`columns` forces the columns you want and format their rows content. It's an array of objects with following attributes:

* `key` is the name of the object key in your data. This example should displys three columns "label", "value" and "anotherValue" but with this configuration will display only the two first columns.
  ```yaml theme={null}
  # Page/Block
  - slug: DataTable
    data:
      - label: foo
        value: 42
        anotherValue: will not be displayed
      - label: bar
        value: 12
        anotherValue: will not be displayed
    columns:
      - key: label
      - key: value
  ```
* `label` is the text displayed in column header. It can be as string or a localized string. This example wil show two columns with translated name:
  ```yaml theme={null}
  # Page/Block
  - slug: DataTable
    data:
      - label: foo
        value: 42
        anotherValue: will not be displayed
      - label: bar
        value: 12
        anotherValue: will not be displayed
    columns:
      - key: label
        label:
          fr: Libellé
          en: Label
      - key: value
        label:
          fr: Valeur
          en: Value
  ```
* `description` displays a tooltip with a (i) button next to the column name.
  ```yaml theme={null}
  # Page/Block
  - slug: DataTable
    data:
      - label: foo
        value: 42
        anotherValue: will not be displayed
      - label: bar
        value: 12
        anotherValue: will not be displayed
    columns:
      - key: label
        label:
          fr: Libellé
          en: Label
        description:
          fr: Le libellé
          en: The label
      - key: value
        label:
          fr: Valeur
          en: Value
        description:
          fr: La valeur
          en: The value
  ```
* `type` change the value type. Default is string but you can force a type to get a specific display. Type can take a value from:
  * string
  * number
  * boolean
  * date
  * tags
  ```yaml theme={null}
  # Page/Block
  - slug: DataTable
    data:
      - label: foo
        value: 42
        createdAt: 2025-01-01
      - label: bar
        value: 12
        createdAt: 2025-01-02
    columns:
      - key: label
        type: string
      - key: value
        type: number
      - key: createdAt
        type: date
  ```
* `format` can format a number or a date value with a custom format. Value can be:
  * Options of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
  * Options of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)
  ```yaml theme={null}
  # Page/Block
  - slug: DataTable
    data:
      - label: foo
        value: 42
        createdAt: 2025-01-01
      - label: bar
        value: 12
        createdAt: 2025-01-02
    columns:
      - key: label
        type: string
      - key: value
        type: number
        format:
          minimumSignificantDigits: 3
      - key: createdAt
        type: date
        format:
          dateStyle: full
  ```
* `sortable` set if the column can be sorted. Default is true. If false, the column header cannot be clicked.

```yaml theme={null}
  # Page/Block
  - slug: DataTable
    data:
      - label: foo
        value: 42
      - label: bar
        value: 12
    columns:
      - key: label
        sortable: false
      - key: value
```

### loading

`loading` display a placeholder while loading data from an automation. Update the value while sending the data:

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  onInit: init data table
  updateOn: update data table
  loading: '{{data.loading}}'
```

```yaml theme={null}
# Automation
- emit:
    event: update data table
    payload:
      data:
        loading: true
  - fetch data:
      output: items
  - emit:
    event: update data table
    payload:
      data:
        loading: false
        items: '{{items}}
```

### pagination

`pagination` set the pagination which can be managed on client side with the current data list or on server side by exchanging events. It's an object with the following options:

* `event` is the event send when clicking a button in the pagination component. It takes `page` attribute in payload.
* `payload` is a custom payload which will be merged with the `page` value when sending the `event`.
* `page` is the current displayed page.
* `itemCount` is the total of items. It's mandatory to display the correct number of pages.
* `pageSize` is the number of items per page. Default is 10.

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  pagination:
    event: paginate data list
    payload:
      foo: bar
    itemCount: '{{data.total}}'
    pageSize: 25
```

If you have a lot of data in a single load, so without server side pagination, but you want to display only a few lines at a time, you can set a client side pagination by filling any of this options but `event`.

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  pagination:
    pageSize: 25
```

### displayPerPage

`displayPerPage` display the "items per page" selector. Value can be `true` or an array of number you want to propose to your user. Default is `[10, 20, 50, 100]`.

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  onSort: sort data list
  displayPerPage: true
- slug: DataTable
  data: '{{data.items}}'
  onSort: sort data list
  displayPerPage:
    - 10
    - 25
```

### onSort

`onSort` is an event name fired when clicking a sortable column header. It can be a string or an object with `event` and `payload`.

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  onSort: sort data list
- slug: DataTable
  data: '{{data.items}}'
  onSort:
    event: sort data list
    payload:
      foo: bar
```

### bulkActions

When `bulkActions` is set, rows can be selected and a menu with actions set in this attribute will be displayed. Value is an array of object containing:

* `onSelect` is an event name or on object with `event` and `payload`.
* `label` is the label displayed. Value is a string or a localized string

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  bulkActions:
    - onSelect: duplicate rows
      label: Duplicate selection
    - onSelect:
        event: delete rows
        payload:
          foo: bar
      label:
        fr: Supprimer la sélection
        en: Delete selection
```

### onBulkChange

`onBulkChange` is an event name or on object with `event` and `payload` fired each
time the bulk selection changes. USefull if you want to change something in your interface when a selection exists.\
The event payload contains `selectedRowKeys` and `selectedRows`. First one is an array of selected row keys, the other is an array of selected items data.

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  bulkActions:
    - onSelect: duplicate rows
      label: Duplicate selection
  onBulkChange:
    event: update button
- slug: Button
  updateOn: update button
  content: Show this only if rows are selected
  template.if: '{{selectedRows.length}}'
```

### resetSelectionOn

`resetSelectionOn` is an event which will reset the bulk selection when fired. Usefull after an action in bulk actions menu is clicked.

```yaml theme={null}
# Page/Block
- slug: DataTable
  data: '{{data.items}}'
  bulkActions:
    - onSelect: duplicate rows
      label: Duplicate selection
  resetSelectionOn: reset rows selection
```

```yaml theme={null}
# Automation

- emit:
    event: reset rows selection
```