diff --git a/packages/core/src/components/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx
index bc5fc71b63..6558ac0c1c 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.mdx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
import Table from "../Table";
import TableHeader from "../../TableHeader/TableHeader";
import TableHeaderCell from "../../TableHeaderCell/TableHeaderCell";
@@ -50,7 +50,7 @@ Tables are used to organize data, making it easier to understand.
### Sizes
-The table is available in 2 different row heights: medium (40px) and large (48 px). Medium size is the default size.
+The table is available in 3 different row heights: small (32px) medium (40px) and large (48 px). Medium size is the default size.
diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
index 04f70daa53..1fc932e2cd 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
@@ -43,7 +43,14 @@ export default {
TableVirtualizedBody
},
argTypes: metaSettings.argTypes,
- decorators: metaSettings.decorators
+ decorators: metaSettings.decorators,
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { TableAvatar, TableErrorState, TableEmptyState }
+ }
+ }
+ }
};
const tableTemplate = (args: ITableProps) =>
;
@@ -177,6 +184,13 @@ export const Overview = {
]
},
+ parameters: {
+ docs: {
+ liveEdit: {
+ isEnabled: false
+ }
+ }
+ },
name: "Overview"
};
@@ -186,13 +200,12 @@ export const Sizes = {
{
id: "sentOn",
title: "Sent on",
- width: 180,
loadingStateType: "medium-text"
},
{
id: "subject",
title: "Subject",
- width: 200,
+
loadingStateType: "long-text"
}
];
@@ -210,6 +223,32 @@ export const Sizes = {
];
return (
<>
+ }
+ emptyState={}
+ columns={columns}
+ >
+
+ {columns.map((headerCell, index) => (
+
+ ))}
+
+
+ {data.map(rowItem => (
+
+ {rowItem.sentOn}
+ {rowItem.subject}
+
+ ))}
+
+
(
-
+
)
@@ -446,7 +485,13 @@ export const TableHeaderFunctionality = {
);
},
-
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { emailTableData, emailColumns }
+ }
+ }
+ },
name: "Table Header Functionality"
};
@@ -482,7 +527,13 @@ export const Loading = {
),
-
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { emailTableData, emailColumns }
+ }
+ }
+ },
name: "Loading"
};
@@ -525,7 +576,13 @@ export const Scroll = {
),
-
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { scrollTableColumns, scrollTableData, priorityColumnToLabelColor, statusColumnToLabelColor }
+ }
+ }
+ },
name: "Scroll"
};
@@ -558,7 +615,13 @@ export const VirtualizedScroll = {
);
},
-
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { virtualizedScrollTableColumns, virtualizedScrollTableData }
+ }
+ }
+ },
name: "Virtualized Scroll"
};
@@ -592,7 +655,13 @@ export const StickyColumn = {
);
},
-
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { stickyColumns, stickyTableData, statusColumnToLabelColor }
+ }
+ }
+ },
name: "Sticky column"
};
@@ -627,6 +696,12 @@ export const HighlightedRow = {
);
},
-
+ parameters: {
+ docs: {
+ liveEdit: {
+ scope: { emailColumns, emailTableData }
+ }
+ }
+ },
name: "Highlighted row"
};