Documentation Index
Fetch the complete documentation index at: https://prismeai-legacy.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
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:
# 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 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
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
