diff --git a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
index c1e4ef3cd8..50c46cf97a 100644
--- a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
@@ -33,7 +33,11 @@ export const TagsCell: Cell = {
{tags.map((tag) => (
-
-
+
{tag.content}
diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
index ca25564166..7181902c32 100644
--- a/packages/components/src/html/data-grid.html
+++ b/packages/components/src/html/data-grid.html
@@ -212,7 +212,11 @@
'One',
'Lorem ipsum dolor sit amet sime',
'http://example.com',
- 'Simple, Short',
+ [
+ { content: 'Apple', color: 'red', size: 'standard' },
+ { content: 'Pear', color: 'green', type: 'strong' },
+ { content: 'Bug' },
+ ],
'00:00:20',
102045.0,
false,
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index 4c38c09346..ec690e09da 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
},
description: `(optional) Title for sortable columns`,
control: { type: null },
- },
+ },
height: {
table: {
type: { summary: 'string' },
@@ -669,7 +669,7 @@ Expected format: string
## Tags Cell
-Expected format: comma delimited `string`, eg `'one, two, three'` or array of objects with content and color keys, e.g. `{content: 'Apple', color: 'red'}`
+Expected format: comma delimited `string`, eg `'one, two, three'` or array of objects with required content key and optional color, type, size keys, e.g. `{content: 'Apple', color: 'red'}`. Acceptable values for color, type, size are same as for Tag component.