@adyen/bento-mcp 0.0.0 → 0.1.1

package/dist/assets/components/data-grid/data-grid.docs.mdx

@@ -0,0 +1,963 @@
+import { Canvas, Meta, Source, Story } from '@storybook/blocks';
+import * as ComponentStories from './data-grid.stories';
+import DataGridFitContentInCardExample from './__tests__/data-grid-fit-content-in-card-example.vue?raw';
+import DataGridFitContentInModalExample from './__tests__/data-grid-fit-content-in-modal-example.vue?raw';
+import DataGridFitContentInModalFullscreenExample from './__tests__/data-grid-fit-content-in-modal-fullscreen-example.vue?raw';
+
+<Meta of={ComponentStories} />
+
+# Data Grid
+
+<Canvas of={ComponentStories.Default} />
+
+The data grid is used to display set of data of information to the user. Using this they will be able to interact with
+the data items through the use of links or buttons. Depending on how the data grid has been configured they can also
+filter and sort the information.
+
+## Table of contents
+
+- [Use Cases](#use-cases)
+    - [Do not use](#do-not-use)
+- [Configurations](#configurations)
+    - [Columns](#columns)
+        - [Column width](#column-width)
+        - [Fluid Column width](#fluid-column-width)
+        - [Automatic width](#automatic-width)
+        - [Column padding](#column-padding)
+        - [Numeric column](#numeric-column)
+        - [Column (text) overflow](#column-text-overflow)
+        - [Column visibility](#column-visibility)
+        - [Freezing (Column pinning)](#freezing-column-pinning)
+        - [Column reactivity and emits](#column-reactivity-and-emits)
+    - [Data](#data)
+- [Modifiers](#modifiers)
+    - [Custom slots](#custom-slots)
+    - [Sorting](#sorting)
+    - [Filtering](#filtering)
+        - [Usage](#usage)
+        - [Filter search bar](#filter-search-bar)
+    - [Empty state](#empty-state)
+        - [Sticky filters](#sticky-filters)
+    - [Pagination](#pagination)
+        - [Pagination slot](#pagination-slot)
+    - [Lazy loading](#lazy-loading)
+    - [Selection and Bulk Actions](#selection-and-bulk-actions)
+        - [Bulk selection](#bulk-selection)
+    - [Resizing](#resizing)
+    - [Condensed](#condensed)
+    - [Zebra rows](#zebra-rows)
+    - [Slashed zero](#slashed-zero)
+    - [Truncate headers](#truncate-headers)
+    - [Fitting content within a container (`fit-content`)](#fitting-content-within-a-container-fit-content)
+        - [In containers with a fixed height](#in-containers-with-a-fixed-height)
+        - [Inside a `bento-modal`](#inside-a-bento-modal)
+        - [In containers with a dynamic height](#in-containers-with-a-dynamic-height)
+    - [Inside padded containers](#inside-padded-containers)
+    - [Dragging](#dragging)
+    - [Column Panel (Display options)](#column-panel-display-options)
+    - [Nested content slot](#nested-content-slot)
+    - [Sticky horizontal scrollbar](#sticky-horizontal-scrollbar)
+    - [Nested Rows](#nested-rows)
+        - [Prepopulate data with children](#prepopulate-data-with-children)
+        - [Asynchronously populate the children when parent is toggled](#asynchronously-populate-the-children-when-parent-is-toggled)
+    - [Actions](#actions)
+        - [Cell Actions](#cell-actions)
+        - [Row Actions](#row-actions)
+        - [Action types](#action-types)
+- [Components](#components)
+    - [Summary Cell](#summary-cell)
+    - [Tag with Text Cell](#tag-with-text-cell)
+    - [Trend Cell](#trend-cell)
+- [Everything Bagel Example](#everything-bagel-example)
+    - [Server side filtering and sorting](#server-side-filtering-and-sorting)
+- [Accessibility 🚧](#accessibility-🚧)
+    - [Roles, States, and Properties](#roles-states-and-properties)
+- [Resources](#resources)
+
+## Use Cases
+
+Here are some examples:
+
+- Show a user a data set where they can edit and delete items.
+- Show a list of data items that can be ordered by status and filtered by name.
+
+### Do not use
+
+When using the data grid:
+
+- do not add the filter-bar component in the header slot but use the filters prop instead.
+
+## Configurations
+
+### Columns
+
+An array of column definitions must be provided to the data grid.
+
+```
+[{
+    autoWidth?: boolean;
+    field: string;
+    flex?: number;
+    label: string;
+    mandatory?: boolean;
+    minWidth?: number;
+    numeric: boolean;
+    padding?: {
+        left?: boolean;
+        right?: boolean;
+    };
+    sortable?: boolean;
+    width?: number;
+}]
+```
+
+The following properties are required in each definition:
+
+`field` - the name of the key in the data item in the `data` array of items.
+
+`label` - the label of the column header.
+
+While `mandatory` is not required, it is best practice to have at least one `mandatory` column to ensure data always
+stays displayed even if the user hides all columns.
+
+#### Column width
+
+For each column the following width properties can be applied:
+
+`width` - the initial width of the column.
+
+`minWidth` - the minimum width the column.
+
+#### Fluid Column width
+
+You can also set a fluid width for achieving column fluidity & responsiveness (similar to the CSS flexbox). This can be
+by done by setting the following properties:
+
+`minWidth` - the minimum width the column can be resized to.
+
+`flex` - can be between 0 and ∞. It works by dividing the remaining space in the grid among all flex columns in
+proportion to their flex value. It works a lot like the `flex` used in
+[CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
+
+<Canvas of={ComponentStories.Fluid} />
+
+#### Automatic width
+
+You can also set the column's width to automatic by setting `autoWidth` to `true`. This will automatically scale the
+column's width depending on its data. The scaling chooses the largest width for that columns row cells and column header
+label so that the text does not overflow.
+
+Is it important however to make sure you do not use this on all columns especially the ones you know that will have a
+fixed width or that have been specified in the Figma design your designer has provided to you.
+
+#### Column padding
+
+It is possible to remove padding from columns - note that this will affect on all row cells for that column including
+the column header.
+
+This can be done by using the properties:
+
+`padding` - is an object with 2 boolean properties `left` and `right` which can be set to false to remove padding from
+that side for that given column.
+
+#### Numeric column
+
+It's possible to indicate that the column will contain only numeric values. With this, the column name and cell values
+for this column will be aligned to the right
+
+This can be done by using the `numeric` boolean property
+
+#### Column (text) overflow
+
+<Canvas of={ComponentStories.EverythingBagelExample} />
+
+It is possible to customize the text overflow for columns - note that this will affect on all row cells for that column.
+
+This can be done by using the properties:
+
+`overflow` - which can set to `BentoColumnOverflow.WRAP` (default) or `BentoColumnOverflow.ELLIPSIS`.
+
+The result of using the values are explained below:
+
+`BentoColumnOverflow.WRAP` - Wraps the cell's text upon overflow.
+
+`BentoColumnOverflow.ELLIPSIS` - Truncates cell's text with a `...` ellipsis upon overflow. NOTE: when using this option
+set a `title` attribute on the cell's content if using the `item-{columnKey}` slot. This will allow the user to hover
+over the truncated content to see the whole content.
+
+#### Column visibility
+
+It is possible to set a column's visibility by changing the `visible` property in it's Column definition.
+
+`mandatory` columns cannot be hidden and will stay visible even when the user hides all columns.
+
+#### Freezing (Column pinning)
+
+To pin a column to the left-hand side of the screen (i.e. pinning the column in place for horizontal scrolling) you can
+set the `frozen` property to `true` in the it's Column definition
+
+#### Column reactivity and emits
+
+In order to make sure the consumer's column definition and the internal Datagrid are in sync, it required for the
+[**Dragging**](#dragging) and [**Column panel**](#column-panel-display-options) features to update the `columns` prop
+when the `update:columns` emit is fired.
+
+This can easily be done by creating the `columns` array as a
+[Vue reference](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref).
+
+e.g.
+
+```typescript
+const columns = ref([
+    { field: 'payment', label: 'Payment' },
+    { field: 'countryCode', label: 'Country' },
+]);
+```
+
+and then setting this as a [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) on
+the Datagrid:
+
+```html
+<bento-data-grid :data="dataArray" :columns.sync="columns" />
+```
+
+### Data
+
+Data is simply an array of objects that are a string keyed object of data values.
+
+```
+[
+    {
+        "id": "03c0a799-1ced-4017-aea3-0cebb0106335",
+        "name": "Shepherd Kane",
+        "payment": 1604,
+        "company": "VURBO",
+        "registered": "2017-07-17T02:50:50 -02:00",
+    },
+    {
+        "id": "b6d4f1fd-b1f6-40a6-a443-f785c89604ef",
+        "name": "Santos Palmer",
+        "payment": 1635,
+        "company": "POLARAX",
+        "registered": "2020-04-20T09:56:06 -02:00",
+    },
+]
+```
+
+## Modifiers
+
+### Custom slots
+
+The Data Grid provides the following customizeable slots:
+
+- Header: `#header`
+- Table header: `#head-FIELD="{column}"`
+- Table cell: `#item-FIELD="{item}"`
+- Footer: `#footer`
+
+> Please note if you use a `BentoLink` inside a table cell its style will automatically be adjusted for you.
+
+With descriptions:
+
+All descriptions must use the color **Label secondary** (`--b-color-label-secondary`). The use of CSS variables is
+encouraged to be able to support _themes_ (e.g. `dark` & `light`) over the use of JS variables or hard coded values.
+
+<Canvas of={ComponentStories.Slots} />
+
+### Sorting
+
+You can sort columns by using the `sortBy` and `@update:sort-by` / `@sort` events.
+
+`sortBy` is an array of `BentoDatagridSortByColumn` items with a structure of:
+
+```typescript
+{
+    field: string;
+    direction: BentoDatagridSortDirection;
+}
+```
+
+`sortBy` can be used with the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)
+for automatic updating of the `sortBy` ref.
+
+| Prop / Events | Purpose                                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `sortBy`      | Array of `BentoDatagridSortByColumn` items noting the `field` that was sorted and the `direction` it was sorted in. |
+| `@sort`       | Event emitted when the `sortBy` has changed.                                                                        |
+
+<Canvas of={ComponentStories.Sorting} />
+
+### Filtering
+
+You can add filtering to the data grid by adding an array of filter configurations (`BentoFilterBarModel`) to `filters`
+property & filter values (`BentoFilterValues`) to the `filter-values` property (NOTE: in order to watch `filter-values`
+you will need to do a [deep watch](https://vuejs.org/guide/essentials/watchers.html#deep-watchers)).
+
+To see more about what filter can be set on the `filters` property, go to the
+[filter bar documentation](../?path=/docs/components-filter-bar--docs#available-filter-configurations)
+
+You can automatically update `filter-values` using the
+[sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) (in vue 2) or the `v-model`
+(in vue 3) or independently with the `@update:filter-values` event.
+
+| Prop                 | Purpose                                                                                                                                    |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `filters`            | Array of filter objects. Each one of the elements in the array corresponds to a filter that will be created and rendered in the FilterBar. |
+| `filterValues`       | Array of filter values. Each one of the elements in the array corresponds to a filter's value to be set in the filter bar.                 |
+| `filterSearchTerm`   | String that contains the search term used to filter the data with, it is displayed in the search input of the filter bar.                  |
+| `filterSearchConfig` | Sets the configuration options (`hint`, `placeholder`, `debounceTime` and `inputFieldAriaLabel`) for the filter's search bar.              |
+
+<Canvas of={ComponentStories.Filtering} />
+
+#### Usage
+
+`bento-data-grid` filters internally rely on the `bento-toast` component.
+
+If you want to use filtering in your `bento-data-grid` component, then it's needed to initialize the **Bento plugin**
+with the toast enabled by setting the `withToast` property set to `true`
+
+More information with example can be found in [Toast usage documentation](../?path=/docs/components-toast--docs#usage)
+
+#### Filter search bar
+
+It is also possible to filter using the search bar. Typing the word dynamically filters the content to show relevant
+results.
+
+- Can be used with `filterSearchTerm.sync` or independently with `filterSearchTerm` and `@filter-search-input`.
+- When the search is cleared, the event `@filter-search-clear` is emitted, updating `filterSearchTerm` if the `sync`
+  option is set
+
+<Canvas of={ComponentStories.Filtering} />
+
+### Empty state
+
+The empty state will be shown when an empty array is set on the `data` property.
+
+Setting the `emptyState` property can be used to configure the inner `bento-empty-state` component. For more information
+about what properties can be set, [see the EmptyState documentation](../?path=/docs/components-empty-state--docs).
+
+Please note there is limitation for which values can be set on the `emptyState.image` property, please use the following
+UX rules to decide which one to set:
+
+- 'embedded' - When only one single data grid has been rendered on the page.
+- 'basic' - When multiple datagrid are being rendered on the page.
+
+<Canvas of={ComponentStories.NoResults} />
+
+#### Sticky filters
+
+By default, filters will be sticky, showing always on top of the page as the user scrolls, along with the column
+headers. This behavior can be disabled by setting `stickyFilters` to false.
+
+### Pagination
+
+You can add the pagination component to the data grid using the `pagination` prop. This prop accepts an object
+containing all the properties available for the `bento-pagination` component (see the Pagination component story for
+more details).
+
+To handle pagination changes, such as a user navigating to a new page, you have two primary methods:
+
+- **Using the `@update:pagination` event:** This event is emitted whenever the pagination state changes. You can listen
+  for this event to trigger a method that fetches new data or updates the currently displayed data slice.
+- **Using the `.sync` modifier:** You can use the
+  [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) on the `pagination` prop
+  (`:pagination.sync="yourPaginationRef"`) to create a two-way binding with a local reactive property. When the user
+  interacts with the pagination, your local property is automatically updated. You can then use a `watch`er on this
+  property to react to changes, which is a common pattern for triggering API calls for server-side pagination.
+
+<Canvas of={ComponentStories.Pagination} />
+
+#### Pagination slot
+
+You can use the pagination slot to pass content to the default slot in `bento-pagination`, which will be displayed on
+the left side of the component. The slot will only be visible if `hidePageSize` is true, as the slot takes up the same
+space in the component.
+
+### Lazy loading
+
+You can enable lazy loading of data by passing the `lazy-load-type` property. This property defaults to `none` (no lazy
+loading provided), but can take up the following values:
+
+- `automatic`: an infinite scroll will be provided and an `update:show-more` event will be emitted by the data-grd every
+  time the user reaches the bottom of the data list
+- `button`: a `Show more` button will be displayed and the `update:show-more` event will be emitted on button click
+
+Note that the loading state has to be handled by the consumer via the `loading` property.
+
+When the lazy load variant is enabled, the pagination component will be automatically hidden if present.
+
+<Canvas of={ComponentStories.lazyLoading} />
+
+### Selection and Bulk Actions
+
+<Canvas of={ComponentStories.Selection} />
+
+The prop `selectable` enables the selection of rows in the data grid to perform some action on them. The selected items
+will be kept in sync with the component through the `selection` prop, which expects an array of IDs.
+
+Rows can also be disabled for selection, with `isDataItemDisabled` prop.
+
+In order for the action bar to be rendered, you must also pass the actions into the `bulk-actions` prop.
+
+#### Bulk selection
+
+If a data grid is selectable, a checkbox will be rendered as the column header to be able to select every item in the
+page.
+
+By default, this will select every item in the page that is enabled, but in situations where you want to select items
+from other pages too you can pass the `selectableAcrossPages` prop. This will render a selection menu with the option to
+select all items on the page or across all pages (the menu will only render if there is more than one page, therefore
+pagination needs to be set up too with the correct total count).
+
+While selection on the page is handled by the component, to select items across all pages, we emit an event
+`select-all-across-pages` and the data needs to be handled externally, by updating the `selection` array to contain all
+the selected items from different pages.
+
+Here's an example on how to use all selection functionalities:
+
+```html
+<template>
+    <bento-data-grid
+        :data="data"
+        :columns.sync="columns"
+        selectable
+        :selection.sync="selection"
+        :bulk-actions="actions"
+        :is-data-item-disabled="isDataItemDisabledForSelection"
+        selectable-across-pages
+        @select-all-across-pages="onSelectAll"
+        :pagination="pagination"
+    />
+</template>
+<script setup lang="ts">
+    import { BentoDataGrid } from '@adyen/bento-vue2';
+    import type { BentoDatagridData, BentoDatagridDataItem, BentoDatagridSelection } from '@adyen/bento-vue2';
+
+    const data = ref<BentoDatagridData>([
+        {
+            id: '03c0a799-1ced-4017-aea3-0cebb0106335',
+            name: 'Shepherd Kane',
+        },
+        {
+            id: 'b6d4f1fd-b1f6-40a6-a443-f785c89604ef',
+            name: 'Santos Palmer',
+        },
+        {
+            id: '8f9e7877-1ca2-4929-9217-f1ec78709291',
+            name: 'Joyce Johns',
+        },
+    ]);
+
+    // Selection
+    const isDataItemDisabledForSelection = (row: BentoDatagridDataItem) =>
+        row.id === 'b6d4f1fd-b1f6-40a6-a443-f785c89604ef';
+    const selection = ref<BentoDatagridSelection>(['03c0a799-1ced-4017-aea3-0cebb0106335']);
+
+    const onSelectAll = () => {
+        const enabledIdsInThisPage = ['03c0a799-1ced-4017-aea3-0cebb0106335', '8f9e7877-1ca2-4929-9217-f1ec78709291'];
+        const idsFromOtherPages = [
+            'b7d95f8a-953c-4f9a-afcf-ea97d5a2fbf0',
+            'de10f8dc-4f9b-4b78-b30b-27ea6b9c2c20',
+            'a9b5e6c9-35c4-40be-aa2b-2651c9f70f36',
+        ];
+        selection.value = [
+            ...enabledIdsInThisPage
+            ...idsFromOtherPages,
+        ];
+    };
+
+    // Bulk actions
+    const actions = [
+        {
+            title: 'Edit',
+            event: () => true,
+        },
+        {
+            title: 'Delete',
+            critical: true,
+            event: () => true,
+        },
+    ];
+
+    // Pagination object
+    const pagination = { size: 20, totalCount: 100 }
+</script>
+```
+
+| Prop / Events        | Purpose                                                                                                                                                      |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selectable`         | Boolean value that toggles on / off selection functionality.                                                                                                 |
+| `selection`          | Array of selected row IDs.                                                                                                                                   |
+| `update:selection`   | Event that fires upon selecting a row. This allows the use of the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) |
+| `actions`            | Array of actions to be displayed to the user in the action bar                                                                                               |
+| `getDataItemId`      | Function to tell the data grid the unique identifier for the data item, if none provided `row.id` is used.                                                   |
+| `isDataItemDisabled` | Function that tells the data grid if the row is disabled from selection.                                                                                     |
+| `select`             | Event that fires upon selecting a row.                                                                                                                       |
+
+### Resizing
+
+Enables resizing of the columns by dragging the column divider.
+
+| Prop / Events         | Purpose                                         |
+| --------------------- | ----------------------------------------------- |
+| `hasResizableColumns` | enable / disable the ability to resize columns. |
+| `@column-resize`      | Resize event.                                   |
+
+### Condensed
+
+_NOTE: You must sync the `condensed` property using the emits as explained [here](#column-reactivity-and-emits)_.
+
+Enables the condensed view for the data grid. This essentially reduces the row cells to a smaller vertical padding.
+
+### Zebra rows
+
+_NOTE: You must sync the `zebraRows` property using the emits as explained [here](#column-reactivity-and-emits)_.
+
+Enables the zebra-like rows for the data grid, where each even row is displayed in a darker shade than the odd-numbered
+rows.
+
+### Slashed zero
+
+If the `slashedZero` prop is set to `true`, the data grid will render zeroes in a slashed font numeric style.
+
+### Truncate headers
+
+You can pass the `truncateColumnHeaders` prop to the `bento-data-grid` to truncate headers that are breaking into
+multiple lines.
+
+### Fitting content within a container (`fit-content`)
+
+_NOTE: Using a `bento-data-grid` inside a small container (e.g. modal) is not recommended and using alternatives such as
+creating a new view and redirecting are encouraged. If no alternative can be found here are some guidelines._
+
+When you need the data grid to fill the available vertical space of its parent container, you can use the `fit-content`
+prop. This makes the data grid's body scrollable while the headers remain fixed, which is useful for both containers
+with a fixed height and those that are dynamically sized.
+
+<Canvas of={ComponentStories.GridInCard} />
+
+#### In containers with a fixed height
+
+When placing the data grid inside a container with a defined height, like a `bento-card`, the `fit-content` prop allows
+the grid to adapt to that specific height. You must ensure the parent element of the data grid has a `height` defined.
+
+**Example inside a `bento-card`:**
+
+<Source dark language="html" code={DataGridFitContentInCardExample} />
+
+#### Inside a `bento-modal`
+
+<Source dark language="html" code={DataGridFitContentInModalExample} />
+
+#### In containers with a dynamic height
+
+<Source dark language="html" code={DataGridFitContentInModalFullscreenExample} />
+
+### Inside padded containers
+
+When `bento-data-grid` is rendered inside components that already have their own content padding, like
+`bento-accordion`, you can pass the `noSpacingTop` prop to remove the extra spacing.
+
+### Dragging
+
+_NOTE: You must sync the `column` property using the emits as explained [here](#column-reactivity-and-emits)_.
+
+If the `allowColumnDragAndDrop` property is set to true, users can drag and drop columns to re-arrange their order. Also
+note the users can drag and drop column to and from the frozen section.
+
+### Column Panel (Display options)
+
+_NOTE: You must sync the `column` and `condensed` property using the emits as explained
+[here](#column-reactivity-and-emits)_.
+
+Enabling this boolean property will add the Column wiew settings functionality. This allows users to toggle:
+
+- condensed view
+- column visibility
+- column freezing (using the freeze icon)
+
+<Canvas of={ComponentStories.DisplayOptions} />
+
+### Nested content slot
+
+<Canvas of={ComponentStories.NestedContentSlot} />
+
+It's possible to nest content inside of each data row in the Datagrid. In order to do this you have to set the
+`hasNestedContent` to true and then use the `nested-slot` slot to render elements in the slot. This slot passes on the
+`BentoDatagridDataItem` object which you can use to customize the slot.
+
+You can also use the `shouldShowNestedContent` property to filter which rows should show the nested content slot. This
+property accepts a function of type `BentoDatagridShouldShowNestedContentFn`. i.e.
+`(item: BentoDatagridDataItem) => boolean;`.
+
+### Sticky horizontal scrollbar
+
+<Canvas of={ComponentStories.StickyHorizontalScrollbar} />
+
+If you have a very large data grid and prefer not to limit its height, you can enable a sticky horizontal scrollbar
+instead. Simply set the `stickyHorizontalScrollbar` property to `true`.
+
+This ensures users can scroll horizontally without needing to reach the bottom of the data grid.
+
+### Nested Rows
+
+<Canvas of={ComponentStories.NestedRows} />
+
+It's possible to show nested rows (of the same data structure) for each data row in the Datagrid. In order to do this
+you have to set `hasNestedRows` to `true` and do either of the following:
+
+#### Prepopulate data with children
+
+If you set in each data item i.e. `BentoDatagridDataItem`, the `children` attribte to an array of
+`BentoDatagridDataItem` objects. These data rows will be shown when the parent data item is toggled.
+
+#### Asynchronously populate the children when parent is toggled
+
+If you hook into the `nested-content-toggled` you can asynchronously populate the children by updating the `data`
+property of that parent's `BentoDatagridDataItem.children` attribute.
+
+### Actions
+
+#### Cell Actions
+
+<Canvas of={ComponentStories.CellActions} />
+
+Cell Actions are inline buttons that appear within a specific table cell, typically on hover. They are ideal for actions
+directly related to the cell's content.
+
+You can configure these by providing an array or function to the `cellActions` property within a specific column's
+definition. Using the function will allow you to conditionally display actions based on the row's state.
+
+The available configurations for each action object are detailed in the Action Types section below.
+
+#### Row Actions
+
+<Canvas of={ComponentStories.RowActions} />
+
+Row Actions provide a persistent set of buttons in a dedicated column at the end of each row. They are best suited for
+record-level operations, such as editing or deleting an entire entry.
+
+To implement them, pass an array or function to the `rowActions` prop. Using the function will allow you to
+conditionally display actions based on the row's state.
+
+Please see "Types of actions" in the below section to see what type of actions you can render.
+
+#### Action types
+
+The following action types can be used to build the array for both the `cellActions` and `rowActions` properties.
+
+Note: For `rowActions`, the columnKey parameter is not applicable and will not be passed to event handlers.
+
+##### Copy action
+
+| Prop          | type                                                                | value                                                                                           |
+| ------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `variant`     | `string`                                                            | Must be set to 'copy'.                                                                          |
+| `isShort`     | `boolean`                                                           | If set to true, will only show icon.                                                            |
+| `getCopyData` | `(rowDataItem: BentoDatagridDataItem, columnKey: string) => string` | A function that can be used to customize what data is copied upon the user clicking the button. |
+
+##### Edit action
+
+| Prop      | type                                                              | value                                                                   |
+| --------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `variant` | `string`                                                          | Must be set to 'edit'.                                                  |
+| `isShort` | `boolean`                                                         | If set to true, will only show icon.                                    |
+| `event`   | `(rowDataItem: BentoDatagridDataItem, columnKey: string) => void` | Click event that will emit the row data and the column key of the cell. |
+
+##### Open action
+
+| Prop                            | type                                                              | value                                                                                 |
+| ------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `variant`                       | `string`                                                          | Must be set to 'open'.                                                                |
+| `isShort`                       | `boolean`                                                         | If set to true, will only show icon.                                                  |
+| `menuData`                      | `BentoColumnCellActionMenuItem[]`                                 | Can be set to an array of `BentoColumnCellActionMenuItem` to create a menu button.    |
+| `menuData[menuItemIndex].event` | `(rowDataItem: BentoDatagridDataItem, columnKey: string) => void` | The menu item click event that will emit the row data and the column key of the cell. |
+
+##### More action
+
+| Prop                            | type                                                              | value                                                                                 |
+| ------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `variant`                       | `string`                                                          | Must be set to 'more'.                                                                |
+| `isShort`                       | `boolean`                                                         | If set to true, will only show icon.                                                  |
+| `menuData`                      | `BentoColumnCellActionMenuItem[]`                                 | Can be set to an array of `BentoColumnCellActionMenuItem` to create a menu button.    |
+| `menuData[menuItemIndex].event` | `(rowDataItem: BentoDatagridDataItem, columnKey: string) => void` | The menu item click event that will emit the row data and the column key of the cell. |
+
+##### Custom action
+
+| Prop                            | type                                                              | value                                                                                 |
+| ------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `title`                         | `string`                                                          | Sets the button title.                                                                |
+| `critical`                      | `boolean`                                                         | Toggles the critical state of the `BentoButton`.                                      |
+| `disabled`                      | `boolean`                                                         | Toggles the disabled state of the `BentoButton`.                                      |
+| `event`                         | `(rowDataItem: BentoDatagridDataItem, columnKey: string) => void` | Click event that will emit the row data and the column key of the cell.               |
+| `iconLeft`                      | An icon from the `@adyen/ui-assets-icons-16` NPM package.         | e.g. `import StarIcon from '@adyen/ui-assets-icons-16/vue/star';`                     |
+| `iconRight`                     | An icon from the `@adyen/ui-assets-icons-16` NPM package.         | e.g. `import StarIcon from '@adyen/ui-assets-icons-16/vue/star';`                     |
+| `link`                          | An object containing `BentoLink` properties.                      | e.g. `{ to: 'https://adyen.com', external: true }`                                    |
+| `menuData`                      | `BentoColumnCellActionMenuItem[]`                                 | Can be set to an array of `BentoColumnCellActionMenuItem` to create a menu button.    |
+| `menuData[menuItemIndex].event` | `(rowDataItem: BentoDatagridDataItem, columnKey: string) => void` | The menu item click event that will emit the row data and the column key of the cell. |
+
+## Components
+
+### Summary Cell
+
+<Canvas of={ComponentStories.SummaryCell} />
+
+The `bento-data-grid-summary-cell` is a specialized component designed to be used within a data grid cell when the
+underlying data for that cell is an array of items. It elegantly displays a summary (e.g., "2 merchants") and reveals
+the full list in a popover on hover. This is particularly useful for representing one-to-many relationships in your
+data.
+
+When there's only one item in the array, it will be rendered as plain text. If there are multiple items, the summary
+`label` is shown with a dashed underline, which triggers the popover.
+
+To use it, use a specific column's item slot, like `#item-company`. Then pass the relevant array of strings using cell's
+data to the `items` property.
+
+Passing a `searchTerm` (from the filter bar or global search) to the summary cell will add a tooltip to each cell whose
+`items` array contains a match. When the popover is opened, the component automatically highlights the matching items.
+
+You can also use the `tooltipText` property to override the default tooltip text. By default, the tooltip displays
+`"{numberOfResultsInItems} results"`.
+
+### Tag With Text Cell
+
+<Canvas of={ComponentStories.TagWithTextCell} />
+
+The `bento-data-grid-tag-with-text-cell` is a specialized component for `bento-data-grid` that displays a tag alongside
+a text value. This is useful for showing categorized data with labels, such as status indicators with descriptions.
+
+To use it, place `bento-data-grid-tag-with-text-cell` inside a column's item slot (e.g., `#item-endpoint`). Pass a `tag`
+object with [BentoTag properties](../?path=/docs/components-tag--docs#properties) and a `value` string for the text
+content.
+
+### Trend Cell
+
+<Canvas of={ComponentStories.TrendCell} />
+
+The `bento-data-grid-trend-cell` is a specialized component for `bento-data-grid` that displays a percentage value with
+an optional arrow icon. This is useful for showing changes in data, such as growth or decline. It always displays a `%`
+regardless of the value passed and supports up to 10 decimal places.
+
+To use it, place `bento-data-grid-trend-cell` inside a column's item slot (e.g., `#item-yourColumn`). Then pass the
+relevant cell's data to the `items` property.
+
+## Everything Bagel Example
+
+<Canvas of={ComponentStories.EverythingBagelExample} />
+
+Above is an example of using all the above features in one single Datagrid.
+
+This example uses local filtering, searching and sorting of the data using the `setup` function defined below. Please
+note of course this is a contrived example which may require more complex filtering methods for different data types.
+
+As you can see from the example we use the `computed` function to react to changes on the `sortBy`, `filters` and
+`searchTerm` variables.
+
+```typescript
+setup(props) {
+    // References
+    const columns = ref<BentoColumn[]>([
+        { field: 'name', label: 'Name', minWidth: 300, mandatory: true, frozen: true, autoWidth: true, sortable: true },
+        { field: 'company', label: 'Reference' },
+        { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
+    ]);
+    const filtersSet = ref<BentoFilterBarModel>([
+        {
+            field: 'company',
+            label: 'Company',
+            value: null,
+            type: BentoFilterItemType.INPUT,
+        },
+        {
+            field: 'countryCode',
+            label: 'Country',
+            value: undefined,
+            options: {
+                listboxItems: [
+                    {
+                        value: BentoCountryCode.NL,
+                    },
+                    {
+                        value: BentoCountryCode.BE,
+                    },
+                ],
+                variant: 'name',
+            },
+            type: BentoFilterItemType.SELECT_COUNTRY,
+        },
+    ]);
+
+    const sortBy = ref<BentoDatagridSortByColumn[]>([]);
+    const searchTerm = ref('');
+    const isCondensed = ref(false);
+
+    // Methods
+    const getPaymentStatus = (paymentStatus: number) => {
+        switch (paymentStatus) {
+            case 2:
+                return BentoStatusVariant.GREEN;
+            case 1:
+                return BentoStatusVariant.YELLOW;
+            case 0:
+            default:
+                return BentoStatusVariant.RED;
+        }
+    };
+
+    const getPaymentText = (paymentStatus: number) => {
+        switch (paymentStatus) {
+            case 2:
+                return 'Paid';
+            case 1:
+                return 'In progress';
+            case 0:
+            default:
+                return 'Not paid';
+        }
+    };
+
+    const onRowClick = (item: BentoDatagridDataItem) => {
+        action('row-click')(item);
+    };
+
+    // Computed Values
+    // Filtering data
+    const filteredData = computed(() =>
+        // If any filters or search terms have been set
+        filtersSet.value?.length === 0 && searchTerm.value === ''
+            ? props.data
+            : props.data.filter(item => {
+                    const foundFilteredItem =
+                        filtersSet.value?.length > 0
+                            ? filtersSet.value.every(filter =>
+                                filter.value
+                                    ? (item[filter.field] as string)
+                                            .toLowerCase()
+                                            .includes((filter.value as string).toLowerCase())
+                                    : true
+                            )
+                            : true;
+                    const foundSearchFilteredItem = searchTerm.value
+                        ? (item?.company as string)
+                            .toLowerCase()
+                            .includes((searchTerm.value as string).toLowerCase())
+                        : true;
+
+                    return foundFilteredItem && foundSearchFilteredItem;
+                })
+    );
+
+    // Sorting data
+    const filteredAndSortedData = computed(() => {
+        if (sortBy.value?.length === 0) {
+            return filteredData.value;
+        }
+        return sortBy.value[0].direction === BentoDatagridSortDirection.ASCENDING
+            ? filteredData.value.sort((a, b) =>
+                    (a[sortBy.value[0].field] as string).localeCompare(b[sortBy.value[0].field] as string)
+                )
+            : filteredData.value
+                    .sort((a, b) =>
+                        (a[sortBy.value[0].field] as string).localeCompare(b[sortBy.value[0].field] as string)
+                    )
+                    .reverse();
+    });
+
+    return {
+        // Methods
+        getPaymentStatus,
+        getPaymentText,
+
+        // Functions
+        onRowClick,
+
+        // Values
+        columns,
+        filteredAndSortedData,
+        sortBy,
+        filtersSet,
+        searchTerm,
+        isCondensed,
+
+        // Enums
+        BentoDateFormat,
+    };
+},
+```
+
+### Server side filtering and sorting
+
+It can be that you have filtering and sorting set up on a backend API and simply have to pass on these values to query
+string values of the HTTP request.
+
+To do this simply watch the `sortBy`, `filters` and `searchTerm` reative references and perform a HTTP request when a
+change occurs. One thing to note would be to make sure to toggle the `isLoading` which we pass on to the `is-loading`
+property on the Datagrid.
+
+🚧 NOTE: we are working on an erroneous state for the data-grid for a upcoming future release! When this work has been
+completed this documentation will be updated. 🚧
+
+```typescript
+const serverData = ref([]);
+const isLoading = ref(false);
+
+watch(
+    () => [sortBy.value, filtersSet.value, searchTerm.value],
+    async () => {
+        isLoading.value = true;
+        const { data } = await axios.get('/api/api-name/get', {
+            params: {
+                ...filtersSet.value?.reduce((acc, { field, value }) => {
+                    acc[field] = value;
+                    return acc;
+                }, {});
+                // assign params for search and sorting as well
+            },
+            paramsSerializer: params => {
+                return qs.stringify(params);
+            },
+        });
+
+        serverData.value = data;
+        isLoading.value = false;
+    }
+);
+```
+
+Another method would be to wrap up all these reactive refs into a `reactive` reference and deeply watch the reactive ref
+
+```typescript
+const filteringAndSortingVals = reactive({ sortBy: [], filtersSet: [], searchTerm: '' });
+watch(
+    () => [filteringAndSortingVals.sortBy, filteringAndSortingVals.filtersSet, filteringAndSortingVals.searchTerm],
+    async () => {
+        // etc...
+    }
+);
+```
+
+## Accessibility 🚧
+
+The full accessibility implementation for this component is still under development, so changes to this section are to
+be expected. However, as for all the other `bento` components we are adhering to
+[WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard and using the
+[Interactive Tabular Data pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
+
+### Roles, States, and Properties
+
+| ARIA role / attribute | is automatic?                                                                                                               | fallback used | manual override |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------- |
+| `role="grid"`         | Yes, to container.                                                                                                          | -             | -               |
+| `role="rowgroup"`     | Yes, set on the group of columns and rows.                                                                                  | -             | -               |
+| `role="columnheader"` | Yes, set on the column header cells.                                                                                        | -             | -               |
+| `role="gridcell"`     | Yes, set data cells.                                                                                                        | -             | -               |
+| `aria-rowcount`       | Yes, set data grid container to show the number of rows shown.                                                              | -             | -               |
+| `aria-colcount`       | Yes, set data grid container to show the number of columns shown.                                                           | -             | -               |
+| `aria-colindex`       | Yes, set on the columns.                                                                                                    | -             | -               |
+| `aria-label`          | Yes, the data grid container has a label that uses `header` slot text. The column headers using the column `label` property | 'data grid'   | -               |
+| `aria-label (column)` | Yes, set on the columns using the column `label` property.                                                                  | -             | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/ADL-2.0---Components?node-id=1232-26553&t=YcnfGpJjnXqTOdu5-0)
+- [Aria sort](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort)