;
+};
+
+// Individual variant examples
+export const Neutral: Story = {
+ args: {
+ children: "Neutral",
+ variant: "neutral",
+ style: "filled",
+ size: "md",
+ },
+};
+
+export const Info: Story = {
+ args: {
+ children: "Info",
+ variant: "info",
+ style: "filled",
+ size: "md",
+ },
+};
+
+export const Warning: Story = {
+ args: {
+ children: "Warning",
+ variant: "warning",
+ style: "filled",
+ size: "md",
+ },
+};
+
+export const Error: Story = {
+ args: {
+ children: "Error",
+ variant: "error",
+ style: "filled",
+ size: "md",
+ },
+};
+
+export const Data: Story = {
+ args: {
+ children: "Data",
+ variant: "data",
+ style: "filled",
+ size: "md",
+ },
+};
+
+export const Success: Story = {
+ args: {
+ children: "Success",
+ variant: "success",
+ style: "filled",
+ size: "md",
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ children: "Disabled",
+ variant: "disabled",
+ style: "filled",
+ size: "md",
+ },
+};
+
+// All combinations grid
+export const AllCombinations: Story = {
+ render: () => (
+
+ {STYLES.map((style) => (
+
+
+ {style.charAt(0).toUpperCase() + style.slice(1)} Style
+
+ {SIZES.map((size) => (
+
+
Size: {size.toUpperCase()}
+
+ {VARIANTS.map((variant) => (
+
+ {variant.charAt(0).toUpperCase() + variant.slice(1)}
+
+ ))}
+
+
+ ))}
+
+ ))}
+
+
+ Neutral Filled XS
+
+
+ Neutral Filled MD
+
+
+ Neutral Outline XS
+
+
+ Neutral Outline MD
+
+
+ ),
+};
+
+export const InfoAllStyles: Story = {
+ render: () => (
+
+
+ Info Filled XS
+
+
+ Info Filled MD
+
+
+ Info Outline XS
+
+
+ Info Outline MD
+
+
+ ),
+};
+
+export const WarningAllStyles: Story = {
+ render: () => (
+
+
+ Warning Filled XS
+
+
+ Warning Filled MD
+
+
+ Warning Outline XS
+
+
+ Warning Outline MD
+
+
+ ),
+};
+
+export const ErrorAllStyles: Story = {
+ render: () => (
+
+
+ Error Filled XS
+
+
+ Error Filled MD
+
+
+ Error Outline XS
+
+
+ Error Outline MD
+
+
+ ),
+};
+
+export const DataAllStyles: Story = {
+ render: () => (
+
+
+ Data Filled XS
+
+
+ Data Filled MD
+
+
+ Data Outline XS
+
+
+ Data Outline MD
+
+
+ ),
+};
+
+export const SuccessAllStyles: Story = {
+ render: () => (
+
+
+ Success Filled XS
+
+
+ Success Filled MD
+
+
+ Success Outline XS
+
+
+ Success Outline MD
+
+
+ ),
+};
+
+export const DisabledAllStyles: Story = {
+ render: () => (
+
+
+ Disabled Filled XS
+
+
+ Disabled Filled MD
+
+
+ Disabled Outline XS
+
+
+ Disabled Outline MD
+
+
+ ),
+};
+
+// Grouped by style
+export const AllFilledVariants: Story = {
+ render: () => (
+
+
+
XS Size
+ {VARIANTS.map((variant) => (
+
+ {variant}
+
+ ))}
+
+
+
MD Size
+ {VARIANTS.map((variant) => (
+
+ {variant}
+
+ ))}
+
+
+
+
XS Size
+ {VARIANTS.map((variant) => (
+
+ {variant}
+
+ ))}
+
+
+
MD Size
+ {VARIANTS.map((variant) => (
+
+ {variant}
+
+ ))}
+
+
+
+ Online
+
+
+ Offline
+
+
+ Maintenance
+
+
+ Updating
+
+
+ Inactive
+
+
+ ),
+};
+
+export const ConnectionStates: Story = {
+ render: () => (
+
+
+ Connected
+
+
+ Disconnected
+
+
+ Reconnecting
+
+
+ Authenticating
+
+
+ ),
+};
+
+export const DataQuality: Story = {
+ render: () => (
+
+
+ Live Data
+
+
+ Cached
+
+
+ Stale
+
+
+ Invalid
+
+
+ ),
+};
+
+export const UserStatuses: Story = {
+ render: () => (
+
+
+ Active
+
+
+ Away
+
+
+ Busy
+
+
+ Offline
+
+
+ ),
+};
+
+export const DeploymentStatuses: Story = {
+ render: () => (
+
+
+ Deployed
+
+
+ Building
+
+
+ Queued
+
+
+ Failed
+
+
+ Cancelled
+
+
+ ),
+};
+
+// Legacy export for backwards compatibility
+export const Status = Default;
diff --git a/packages/component-library/src/Switch/index.stories.module.scss b/packages/component-library/src/Switch/index.stories.module.scss
new file mode 100644
index 0000000000..a1c3ffb60d
--- /dev/null
+++ b/packages/component-library/src/Switch/index.stories.module.scss
@@ -0,0 +1,63 @@
+@use "../theme";
+
+.statesGrid {
+ display: flex;
+ flex-direction: column;
+ gap: theme.spacing(4);
+ max-width: 600px;
+}
+
+.stateRow {
+ display: grid;
+ grid-template-columns: 250px 1fr;
+ align-items: center;
+ gap: theme.spacing(4);
+}
+
+.description {
+ font-size: theme.font-size("sm");
+ color: theme.color("muted");
+}
+
+.permissionsList {
+ display: flex;
+ flex-direction: column;
+ gap: theme.spacing(4);
+ max-width: 500px;
+
+ > h3 {
+ margin: 0;
+ font-size: theme.font-size("lg");
+ font-weight: 600;
+ color: theme.color("heading");
+ }
+}
+
+.permissionItem {
+ display: flex;
+ align-items: center;
+ gap: theme.spacing(3);
+ padding: theme.spacing(2) 0;
+}
+
+.lockedBadge {
+ font-size: theme.font-size("xs");
+ padding: theme.spacing(1) theme.spacing(2);
+ background-color: theme.color("states", "warning", "background");
+ color: theme.color("states", "warning", "normal");
+ border-radius: theme.border-radius("sm");
+ font-weight: 500;
+}
+
+.customLabels {
+ display: flex;
+ flex-direction: column;
+ gap: theme.spacing(4);
+ max-width: 400px;
+}
+
+.dynamicLabel {
+ display: inline-flex;
+ align-items: center;
+ gap: theme.spacing(2);
+}
diff --git a/packages/component-library/src/Switch/index.stories.tsx b/packages/component-library/src/Switch/index.stories.tsx
index e36aa4ebc5..f8600866b7 100644
--- a/packages/component-library/src/Switch/index.stories.tsx
+++ b/packages/component-library/src/Switch/index.stories.tsx
@@ -1,8 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
import { Switch as SwitchComponent } from "./index.jsx";
+import styles from "./index.stories.module.scss";
const meta = {
+ title: "forms & controls/Switch",
component: SwitchComponent,
argTypes: {
isDisabled: {
@@ -17,7 +20,20 @@ const meta = {
category: "State",
},
},
+ isSelected: {
+ control: "boolean",
+ table: {
+ category: "State",
+ },
+ },
+ defaultSelected: {
+ control: "boolean",
+ table: {
+ category: "State",
+ },
+ },
onChange: {
+ action: "changed",
table: {
category: "Behavior",
},
@@ -29,13 +45,167 @@ const meta = {
},
},
},
+ tags: ["autodocs"],
} satisfies Meta;
export default meta;
-export const Switch = {
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: "Enable feature",
+ onChange: fn(),
+ },
+};
+
+export const WithLabel: Story = {
args: {
- children: "Click me!",
- isDisabled: false,
- isPending: false,
+ children: "Enable notifications",
+ onChange: fn(),
},
-} satisfies StoryObj;
+};
+
+export const DefaultSelected: Story = {
+ args: {
+ children: "Already enabled",
+ defaultSelected: true,
+ onChange: fn(),
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ children: "Disabled switch",
+ isDisabled: true,
+ onChange: fn(),
+ },
+};
+
+export const DisabledSelected: Story = {
+ args: {
+ children: "Disabled but selected",
+ isDisabled: true,
+ defaultSelected: true,
+ onChange: fn(),
+ },
+};
+
+export const Pending: Story = {
+ args: {
+ children: "Loading...",
+ isPending: true,
+ onChange: fn(),
+ },
+};
+
+export const PendingSelected: Story = {
+ args: {
+ children: "Saving changes...",
+ isPending: true,
+ defaultSelected: true,
+ onChange: fn(),
+ },
+};
+
+export const AllStates: Story = {
+ render: () => (
+
+
+ Normal
+ Default state
+
+
+
+ Selected
+
+ Selected state
+
+
+
+ Disabled
+
+ Disabled state
+
+
+
+ Disabled Selected
+
+ Disabled & selected
+
+
+
+ Pending
+
+ Loading state
+
+
+
+ Pending Selected
+
+ Loading & selected
+
+
+
User Permissions
+ {permissions.map((permission) => (
+
+
+ {permission.label}
+
+ {permission.locked && (
+ Requires upgrade
+ )}
+
+ ))}
+
+
+ {({ isSelected }) => (
+
+ {isSelected ? "🌙 Night mode" : "☀️ Day mode"}
+
+ )}
+
+
+ {({ isSelected }) => (
+
+ Status: {isSelected ? "Active" : "Inactive"}
+
+ )}
+
+
+ {({ isSelected }) => (
+
+ {isSelected ? "✅ Subscribed" : "❌ Unsubscribed"}
+
+ )}
+
+
+ ),
+};
+
+// Legacy export for backwards compatibility
+export const Switch = Default;
diff --git a/packages/component-library/src/TabList/index.stories.tsx b/packages/component-library/src/TabList/index.stories.tsx
index 27dbece720..2eaff9a105 100644
--- a/packages/component-library/src/TabList/index.stories.tsx
+++ b/packages/component-library/src/TabList/index.stories.tsx
@@ -4,6 +4,7 @@ import { TabList as TabListComponent } from "./index.jsx";
import { Tabs as UnstyledTabs } from "../unstyled/Tabs/index.jsx";
const meta = {
+ title: "navigation & menus/TabList",
component: TabListComponent,
argTypes: {
items: {
@@ -31,8 +32,9 @@ export const TabList = {
args: {
label: "Tab List",
items: [
- { id: "foo", children: "Foo" },
- { id: "bar", children: "Bar" },
+ { id: "btc", children: "BTC" },
+ { id: "eth", children: "ETH" },
+ { id: "sol", children: "SOL" },
],
},
} satisfies StoryObj;
diff --git a/packages/component-library/src/Table/index.stories.module.scss b/packages/component-library/src/Table/index.stories.module.scss
new file mode 100644
index 0000000000..65a7e44d43
--- /dev/null
+++ b/packages/component-library/src/Table/index.stories.module.scss
@@ -0,0 +1,159 @@
+@use "../theme";
+
+.wideTable {
+ width: 100%;
+ overflow-x: auto;
+}
+
+.positive {
+ color: theme.color("states", "success", "normal");
+ font-weight: 500;
+}
+
+.negative {
+ color: theme.color("states", "error", "normal");
+ font-weight: 500;
+}
+
+.emptyState {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: theme.spacing(4);
+ padding: theme.spacing(12) theme.spacing(4);
+ text-align: center;
+ color: theme.color("muted");
+
+ > p {
+ margin: 0;
+ font-size: theme.font-size("sm");
+ }
+}
+
+.largeEmptyState {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: theme.spacing(4);
+ padding: theme.spacing(16) theme.spacing(4);
+ text-align: center;
+
+ > h3 {
+ margin: 0;
+ font-size: theme.font-size("xl");
+ font-weight: 600;
+ color: theme.color("heading");
+ }
+
+ > p {
+ margin: 0;
+ font-size: theme.font-size("base");
+ color: theme.color("muted");
+ }
+}
+
+.userCell {
+ display: flex;
+ align-items: center;
+ gap: theme.spacing(3);
+}
+
+.avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: theme.border-radius("full");
+ background-color: theme.color("states", "info", "background");
+ color: theme.color("states", "info", "normal");
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: theme.font-size("sm");
+ font-weight: 600;
+ flex-shrink: 0;
+}
+
+.userName {
+ font-weight: 500;
+ color: theme.color("foreground");
+}
+
+.userEmail {
+ font-size: theme.font-size("sm");
+ color: theme.color("muted");
+}
+
+.actions {
+ display: flex;
+ gap: theme.spacing(2);
+}
+
+.assetCell {
+ display: flex;
+ flex-direction: column;
+ gap: theme.spacing(1);
+
+ > strong {
+ font-weight: 600;
+ color: theme.color("foreground");
+ }
+}
+
+.assetName {
+ font-size: theme.font-size("sm");
+ color: theme.color("muted");
+}
+
+.userSkeleton {
+ display: flex;
+ align-items: center;
+ gap: theme.spacing(3);
+}
+
+.stickyHeaderContainer {
+ height: 400px;
+ overflow-y: auto;
+ border: 1px solid theme.color("border");
+ border-radius: theme.border-radius("md");
+ position: relative;
+}
+
+.stickyHeaderInfo {
+ padding: theme.spacing(3);
+ background-color: theme.color("states", "info", "background");
+ color: theme.color("states", "info", "normal");
+ text-align: center;
+ font-size: theme.font-size("sm");
+
+ > p {
+ margin: 0;
+ }
+}
+
+.stickyColumnsWrapper {
+ width: 100%;
+}
+
+.stickyColumnsContainer {
+ width: 100%;
+ max-width: 800px;
+ overflow-x: auto;
+ border: 1px solid theme.color("border");
+ border-radius: theme.border-radius("md");
+}
+
+.stickyColumnsInfo {
+ padding: theme.spacing(3);
+ background-color: theme.color("states", "info", "background");
+ color: theme.color("states", "info", "normal");
+ text-align: center;
+ font-size: theme.font-size("sm");
+ position: sticky;
+ left: 0;
+ z-index: 10;
+
+ > p {
+ margin: 0;
+ }
+}
diff --git a/packages/component-library/src/Table/index.stories.tsx b/packages/component-library/src/Table/index.stories.tsx
index f56424a500..62520dd37e 100644
--- a/packages/component-library/src/Table/index.stories.tsx
+++ b/packages/component-library/src/Table/index.stories.tsx
@@ -1,8 +1,16 @@
+import * as icons from "@phosphor-icons/react/dist/ssr";
import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
import { Table as TableComponent } from "./index.jsx";
+import styles from "./index.stories.module.scss";
+import { Badge } from "../Badge/index.jsx";
+import { Button } from "../Button/index.jsx";
+import { CopyButton } from "../CopyButton/index.jsx";
+import { Status } from "../Status/index.jsx";
const meta = {
+ title: "data & tables/Table",
component: TableComponent,
parameters: {
layout: "padded",
@@ -29,6 +37,7 @@ const meta = {
},
},
label: {
+ control: "text",
table: {
category: "Accessibility",
},
@@ -57,70 +66,733 @@ const meta = {
category: "Variant",
},
},
+ stickyHeader: {
+ control: "select",
+ options: [undefined, "top", "appHeader"],
+ table: {
+ category: "Layout",
+ },
+ },
dependencies: {
table: {
disable: true,
},
},
},
+ tags: ["autodocs"],
} satisfies Meta;
export default meta;
-export const Table = {
+type Story = StoryObj;
+
+// Basic example
+export const Default: Story = {
args: {
- label: "A Table",
- isUpdating: false,
- isLoading: false,
- fill: true,
- rounded: true,
+ label: "Price feeds table",
columns: [
{
name: "PRICE FEED",
id: "feed",
isRowHeader: true,
- loadingSkeletonWidth: 16,
},
{
name: "PRICE",
id: "price",
fill: true,
- loadingSkeletonWidth: 30,
},
{
name: "CONFIDENCE",
id: "confidence",
- loadingSkeletonWidth: 20,
alignment: "right",
},
],
rows: [
{
id: "BTC/USD",
- href: "#",
data: {
feed: "BTC/USD",
- price: "$100,000",
- confidence: "+/- 5%",
+ price: "$45,234.56",
+ confidence: "±$12.34",
},
},
{
id: "ETH/USD",
- href: "#",
data: {
feed: "ETH/USD",
- price: "$1,000",
- confidence: "+/- 10%",
+ price: "$3,234.56",
+ confidence: "±$2.34",
},
},
{
id: "SOL/USD",
- href: "#",
data: {
feed: "SOL/USD",
- price: "$1,000,000,000",
- confidence: "+/- 0.1%",
+ price: "$123.45",
+ confidence: "±$0.12",
+ },
+ },
+ ],
+ },
+};
+
+// Column configurations
+export const ColumnAlignments: Story = {
+ args: {
+ label: "Column alignments demo",
+ fill: true,
+ rounded: true,
+ columns: [
+ {
+ name: "LEFT ALIGNED",
+ id: "left",
+ alignment: "left",
+ },
+ {
+ name: "CENTER ALIGNED",
+ id: "center",
+ alignment: "center",
+ },
+ {
+ name: "RIGHT ALIGNED",
+ id: "right",
+ alignment: "right",
+ },
+ ],
+ rows: [
+ {
+ id: "1",
+ data: {
+ left: "Left text",
+ center: "Center text",
+ right: "Right text",
+ },
+ },
+ {
+ id: "2",
+ data: {
+ left: "Another left",
+ center: "Another center",
+ right: "Another right",
+ },
+ },
+ ],
+ },
+};
+
+export const ColumnWidths: Story = {
+ args: {
+ label: "Column widths demo",
+ columns: [
+ {
+ name: "FIXED WIDTH",
+ id: "fixed",
+ width: 150,
+ },
+ {
+ name: "FILL SPACE",
+ id: "fill",
+ fill: true,
+ },
+ {
+ name: "SMALL",
+ id: "small",
+ width: 80,
+ },
+ ],
+ rows: [
+ {
+ id: "1",
+ data: {
+ fixed: "150px width",
+ fill: "This column fills the remaining space",
+ small: "80px",
+ },
+ },
+ ],
+ },
+};
+
+export const StickyColumns: Story = {
+ render: () => (
+
+
+
Scroll horizontally to see the first column (NAME) remain sticky
+
+
+
({
+ id: `row-${i.toString()}`,
+ data: {
+ name: `Product ${String(i + 1)}`,
+ sku: `SKU-${String(1000 + i)}`,
+ description: `This is a detailed description for product ${String(i + 1)} that might be quite long`,
+ category: `Category ${String((i % 3) + 1)}`,
+ subcategory: `Subcat ${String((i % 2) + 1)}`,
+ brand: `Brand ${String.fromCodePoint(65 + (i % 4))}`,
+ status: (
+
+ {i % 2 === 0 ? "Active" : "Draft"}
+
+ ),
+ stock: i * 10 + 5,
+ price: `$${String((i + 1) * 99)}.99`,
+ discount: i % 3 === 0 ? "10%" : "-",
+ created: "2024-01-15",
+ updated: "2024-12-01",
+ actions: (
+
+
+ Edit
+
+
+ Delete
+
+
+ ),
+ },
+ }))}
+ />
+
+
;
+};
+
+// Interactive rows
+export const ClickableRows: Story = {
+ args: {
+ label: "Clickable rows table",
+ columns: [
+ {
+ name: "PROJECT",
+ id: "project",
+ isRowHeader: true,
+ },
+ {
+ name: "STATUS",
+ id: "status",
+ },
+ {
+ name: "LAST UPDATED",
+ id: "updated",
+ alignment: "right",
+ },
+ ],
+ rows: [
+ {
+ id: "project-1",
+ href: "#project-1",
+ data: {
+ project: "Frontend App",
+ status: Active ,
+ updated: "2 hours ago",
+ },
+ },
+ {
+ id: "project-2",
+ href: "#project-2",
+ data: {
+ project: "Backend API",
+ status: Maintenance ,
+ updated: "1 day ago",
+ },
+ },
+ {
+ id: "project-3",
+ onAction: fn(),
+ data: {
+ project: "Mobile App",
+ status: Building ,
+ updated: "5 minutes ago",
+ },
+ },
+ ],
+ },
+};
+
+// Empty states
+export const EmptyState: Story = {
+ args: {
+ label: "Empty table",
+ columns: [
+ { name: "NAME", id: "name" },
+ { name: "VALUE", id: "value" },
+ ],
+ rows: [],
+ emptyState: (
+
+
+
No data available
+
Add first item
+
+
+
No results found
+
Try adjusting your search or filters
+
Clear filters
+
+
JD
+
+
John Doe
+
john@example.com
+
+
Admin ,
+ status: (
+
+ Active
+
+ ),
+ lastActive: "2 minutes ago",
+ actions: (
+
+
+ Edit
+
+
+ Delete
+
+
+ ),
+ },
+ },
+ {
+ id: "user-2",
+ data: {
+ user: (
+
+
JS
+
+
Jane Smith
+
jane@example.com
+
+
Editor ,
+ status: (
+
+ Active
+
+ ),
+ lastActive: "1 hour ago",
+ actions: (
+
+
+ Edit
+
+
+ Delete
+
+
+ ),
+ },
+ },
+ {
+ id: "user-3",
+ data: {
+ user: (
+
+
RJ
+
+
Robert Johnson
+
robert@example.com
+
+
Viewer ,
+ status: (
+
+ Inactive
+
+ ),
+ lastActive: "3 days ago",
+ actions: (
+
+
+ Activate
+
+
+ Delete
+
+
+ ),
+ },
+ },
+ ],
+ },
+};
+
+// Financial data table
+export const FinancialDataTable: Story = {
+ args: {
+ label: "Portfolio holdings",
+ columns: [
+ {
+ name: "ASSET",
+ id: "asset",
+ isRowHeader: true,
+ sticky: true,
+ },
+ {
+ name: "QUANTITY",
+ id: "quantity",
+ alignment: "right",
+ },
+ {
+ name: "AVG COST",
+ id: "avgCost",
+ alignment: "right",
+ },
+ {
+ name: "CURRENT PRICE",
+ id: "currentPrice",
+ alignment: "right",
+ },
+ {
+ name: "VALUE",
+ id: "value",
+ alignment: "right",
+ },
+ {
+ name: "P&L",
+ id: "pnl",
+ alignment: "right",
+ },
+ {
+ name: "P&L %",
+ id: "pnlPercent",
+ alignment: "right",
+ },
+ ],
+ rows: [
+ {
+ id: "btc",
+ data: {
+ asset: (
+
+ BTC
+ Bitcoin
+
+ ),
+ quantity: "0.5234",
+ avgCost: "$38,450",
+ currentPrice: "$45,234",
+ value: "$23,675",
+ pnl: +$3,548 ,
+ pnlPercent: +17.6% ,
+ },
+ },
+ {
+ id: "eth",
+ data: {
+ asset: (
+
+ ETH
+ Ethereum
+
+ ),
+ quantity: "5.123",
+ avgCost: "$3,450",
+ currentPrice: "$3,234",
+ value: "$16,568",
+ pnl: -$1,106 ,
+ pnlPercent: -6.3% ,
+ },
+ },
+ ],
+ },
+};
+
+// API data table with copy functionality
+export const ApiEndpointsTable: Story = {
+ args: {
+ label: "API endpoints",
+ columns: [
+ {
+ name: "ENDPOINT",
+ id: "endpoint",
+ isRowHeader: true,
+ fill: true,
+ },
+ {
+ name: "METHOD",
+ id: "method",
+ width: 80,
+ },
+ {
+ name: "DESCRIPTION",
+ id: "description",
+ width: 300,
+ },
+ {
+ name: "COPY",
+ id: "copy",
+ width: 60,
+ alignment: "center",
+ },
+ ],
+ rows: [
+ {
+ id: "get-price",
+ data: {
+ endpoint: /api/v1/price/{`{symbol}`},
+ method: (
+
+ GET
+
+ ),
+ description: "Get current price for a symbol",
+ copy: /api/v1/orders,
+ method: (
+
+ POST
+
+ ),
+ description: "Create a new order",
+ copy: /api/v1/orders/{`{id}`},
+ method: (
+
+ DELETE
+
+ ),
+ description: "Cancel an existing order",
+ copy:
+
+
Scroll down to see the sticky header in action
+
+
({
+ id: `row-${i.toString()}`,
+ data: {
+ index: i + 1,
+ data: `Row ${String(i + 1)} data - scroll to see sticky header`,
+ },
+ }))}
+ />
+