DataTable Block

Display tabular data with sorting, filtering, and pagination.

Demo

Minimal usage

# 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.
  # 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:
  # 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.
  # 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
  # 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
  • Options of Intl.NumberFormat
  # 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.

  # 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:

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

# 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.

# 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.

# 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].

# 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.

# 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

# 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.

# 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.

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

# Automation

- emit:
    event: reset rows selection