@adobe-commerce/elsie 1.6.0-alpha999 → 1.6.0-beta1

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,761 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { useState } from 'preact/hooks';
+import { Table as TableComponent, TableProps } from '@adobe-commerce/elsie/components/Table';
+
+/**
+ * Use the `Table` component to render data in a structured table.
+ * 
+ * ## Column Structure
+ * Each column in the `columns` array defines a table column with:
+ * - **`key`**: Unique identifier that matches the property names in `rowData` objects
+ * - **`label`**: Display text shown in the column header
+ * - **`sortBy`**: Optional sorting state (`true` for sortable but neutral, `'asc'` for ascending, `'desc'` for descending)
+ * 
+ * ## Row Data Structure
+ * Each object in the `rowData` array represents a table row where:
+ * - **Keys** must match the `key` values from the `columns` array
+ * - **Values** can be:
+ *   - **Strings**: Plain text content
+ *   - **Numbers**: Numeric values (automatically converted to strings for display)
+ *   - **VNode**: Preact `VNode` for complex content (buttons, icons, formatted text, etc.)
+ * 
+ * ## Mobile Layout & Container Queries
+ * The table uses **container queries** instead of media queries for responsive behavior:
+ * - **`mobileLayout`**: Optional prop that controls mobile behavior
+ *   - `'none'` (default): No special mobile layout
+ *   - `'stacked'`: Stacks cells vertically when container width ≤ 600px
+ * - **Container Query Breakpoint**: 600px - triggers when the table's container becomes narrow
+ * - **`data-label`**: Automatically added to cells for accessibility in stacked layout
+ * - **Responsive Behavior**: Table adapts to its container width, not viewport width
+ * 
+ * ## All props
+ * The table below shows all the props for the `Table` component.
+ */
+
+const meta: Meta<TableProps> = {
+  title: 'Components/Table',
+  component: TableComponent,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    columns: {
+      description: 'Array of column definitions for the table. Each column defines the structure and behavior of a table column.',
+      table: {
+        type: { summary: 'Column[]' },
+      },
+      control: 'object',
+    },
+    rowData: {
+      description: 'Array of data objects to display in table rows. Each object represents a table row where keys match column keys and values contain the cell content.',
+      table: {
+        type: { summary: 'RowData[]' },
+      },
+      control: 'object',
+    },
+    mobileLayout: {
+      description: 'Controls responsive layout behavior using container queries. When set to "stacked", cells stack vertically when the table container width ≤ 600px. The `data-label` attribute is automatically added to cells for accessibility.',
+      table: {
+        type: { summary: 'none | stacked' },
+      },
+      control: 'select',
+      options: ['none', 'stacked'],
+      mapping: {
+        none: 'none',
+        stacked: 'stacked',
+      },
+    },
+    caption: {
+      description: 'Optional table caption that provides context and description. Displays above the table and is announced by screen readers.',
+      table: {
+        type: { summary: 'string' },
+      },
+      control: 'text',
+    },
+    onSortChange: {
+      description: 'Callback function triggered when column sorting changes.',
+      table: {
+        type: { summary: '(columnKey: string, direction: Sortable) => void' },
+      },
+      action: 'onSortChange',
+    },
+    expandedRows: {
+      description: 'Set of row indices that are currently expanded. Used to control which rows are shown in expanded state. Row details will only render for rows that have `_rowDetails` content and are included in this set.',
+      table: {
+        type: { summary: 'Set<number>' },
+      },
+      control: 'object',
+    },
+    loading: {
+      description: 'When true, renders skeleton rows instead of actual data. Useful for showing loading state while data is being fetched.',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
+    skeletonRowCount: {
+      description: 'Number of skeleton rows to render when loading is true. Defaults to 10 rows.',
+      table: {
+        type: { summary: 'number' },
+      },
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TableProps>;
+
+// Wrapper component to manage sorting state
+const TableWithState = (args: TableProps) => {
+  const [columns, setColumns] = useState(args.columns);
+
+  const handleSortChange = (columnKey: string, direction: 'asc' | 'desc' | true) => {
+    // call Action onSortChange
+    args.onSortChange?.(columnKey, direction);
+
+    // Update column sort states
+    setColumns(prevColumns =>
+      prevColumns.map(col => {
+        if (col.key === columnKey) {
+          return { ...col, sortBy: direction };
+        } else if (col.sortBy === 'asc' || col.sortBy === 'desc') {
+          return { ...col, sortBy: true }; // Reset other sorted columns to neutral
+        }
+        return col;
+      })
+    );
+  };
+
+  return (
+    <TableComponent
+      {...args}
+      columns={columns}
+      onSortChange={handleSortChange}
+    />
+  );
+};
+
+/**
+ * Simple table.
+ * Demonstrates basic table structure with string and number content types.
+ * 
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'age', label: 'Age' }     
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', age: 20 },
+ *     { name: 'Jane', email: 'jane@example.com', age: 21 }
+ *   ]}
+ * />
+ * ```
+ */
+export const Table: Story = {
+  args: {
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'age', label: 'Age' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { name: 'John', email: 'john@example.com', age: 20, actions: <button>Edit</button> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <button>Edit</button> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <button>Edit</button> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <button>Edit</button> },
+    ],
+  },
+};
+
+/**
+ * Table where all columns are sortable. Demonstrates the three-state sorting cycle: `true` → `'asc'` → `'desc'` → `true`.
+ * Shows how multiple columns can be sortable simultaneously, with only one active sort at a time.
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name', sortBy: true },  
+ *     { key: 'email', label: 'Email', sortBy: true },
+ *     { key: 'age', label: 'Age', sortBy: true }    
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', age: 20 },
+ *     { name: 'Jane', email: 'jane@example.com', age: 21 }
+ *   ]}
+ *   onSortChange={(columnKey, direction) => handleSort(columnKey, direction)}
+ * />
+ * ```
+ */
+export const AllSortable: Story = {
+  render: TableWithState,
+  args: {
+    columns: [
+      { key: 'name', label: 'Name', sortBy: true },
+      { key: 'email', label: 'Email', sortBy: true },
+      { key: 'age', label: 'Age', sortBy: true },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { name: 'John', email: 'john@example.com', age: 20, actions: <button>Edit</button> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <button>Edit</button> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <button>Edit</button> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <button>Edit</button> },
+      { name: 'Jack', email: 'jack@example.com', age: 24, actions: <button>Edit</button> },
+    ],
+  },
+};
+
+/**
+ * Wide table with 10 columns to demonstrate horizontal scrolling and container query behavior.
+ * This table will show how the container query responds when the table becomes too wide for its container.
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'id', label: 'ID' },
+ *     { key: 'name', label: 'Full Name' },
+ *     { key: 'email', label: 'Email Address' },
+ *     { key: 'phone', label: 'Phone Number' },
+ *     { key: 'department', label: 'Department' },
+ *     { key: 'position', label: 'Position' },
+ *     { key: 'salary', label: 'Salary' },
+ *     { key: 'startDate', label: 'Start Date' },
+ *     { key: 'status', label: 'Status' },
+ *     { key: 'actions', label: 'Actions' }
+ *   ]}
+ *   rowData={[
+ *     { id: 1, name: 'John Doe', email: 'john@company.com', phone: '+1-555-0123', department: 'Engineering', position: 'Senior Developer', salary: '$95,000', startDate: '2022-01-15', status: 'Active', actions: <button>Edit</button> }
+ *   ]}
+ * />
+ * ```
+ */
+export const WideTable: Story = {
+  args: {
+    columns: [
+      { key: 'id', label: 'ID' },
+      { key: 'name', label: 'Full Name' },
+      { key: 'email', label: 'Email Address' },
+      { key: 'phone', label: 'Phone Number' },
+      { key: 'department', label: 'Department' },
+      { key: 'position', label: 'Position' },
+      { key: 'salary', label: 'Salary' },
+      { key: 'startDate', label: 'Start Date' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { 
+        id: 1, 
+        name: 'John Doe', 
+        email: 'john.doe@company.com', 
+        phone: '+1-555-0123', 
+        department: 'Engineering', 
+        position: 'Senior Developer', 
+        salary: '$95,000', 
+        startDate: '2022-01-15', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 2, 
+        name: 'Jane Smith', 
+        email: 'jane.smith@company.com', 
+        phone: '+1-555-0124', 
+        department: 'Marketing', 
+        position: 'Marketing Manager', 
+        salary: '$78,000', 
+        startDate: '2021-06-20', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 3, 
+        name: 'Bob Johnson', 
+        email: 'bob.johnson@company.com', 
+        phone: '+1-555-0125', 
+        department: 'Sales', 
+        position: 'Sales Director', 
+        salary: '$110,000', 
+        startDate: '2020-03-10', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 4, 
+        name: 'Alice Brown', 
+        email: 'alice.brown@company.com', 
+        phone: '+1-555-0126', 
+        department: 'HR', 
+        position: 'HR Specialist', 
+        salary: '$65,000', 
+        startDate: '2023-02-28', 
+        status: 'Pending', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 5, 
+        name: 'Charlie Wilson', 
+        email: 'charlie.wilson@company.com', 
+        phone: '+1-555-0127', 
+        department: 'Finance', 
+        position: 'Financial Analyst', 
+        salary: '$72,000', 
+        startDate: '2022-09-12', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+    ],
+  },
+};
+
+/**
+ * Table demonstrating complex VNode content in cells with multi-line text and interactive elements.
+ * This shows how the table handles rich content including buttons, badges, and formatted text.
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'user', label: 'User Info' },
+ *     { key: 'description', label: 'Description' },
+ *     { key: 'status', label: 'Status' },
+ *     { key: 'actions', label: 'Actions' }
+ *   ]}
+ *   rowData={[
+ *     { 
+ *       user: <div><strong>John Doe</strong><br/>john@example.com<br/>Senior Developer</div>,
+ *       description: <div>Lead developer for the<br/>e-commerce platform<br/>with 5+ years experience</div>,
+ *       status: <span>Active</span>,
+ *       actions: <div><button>Edit</button><br/><button>Delete</button><br/><button>View</button></div>
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export const ComplexCells: Story = {
+  args: {
+    columns: [
+      { key: 'user', label: 'User Info' },
+      { key: 'description', label: 'Description' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { 
+        user: (
+          <div>
+            <strong>John Doe</strong><br/>
+            john.doe@company.com<br/>
+            <em>Senior Developer</em>
+          </div>
+        ),
+        description: (
+          <div>
+            Lead developer for the<br/>
+            e-commerce platform<br/>
+            <small>with 5+ years experience</small>
+          </div>
+        ),
+        status: (
+          <span>Active</span>
+        ),
+        actions: (
+          <div>
+            <button>Edit</button>
+            <button>Delete</button>
+            <button>View</button>
+          </div>
+        ),
+      },
+      { 
+        user: (
+          <div>
+            <strong>Jane Smith</strong><br/>
+            jane.smith@company.com<br/>
+            <em>Product Manager</em>
+          </div>
+        ),
+        description: (
+          <div>
+            Manages product roadmap<br/>
+            and feature planning<br/>
+            <small>3+ years in product</small>
+          </div>
+        ),
+        status: (
+          <span>Pending</span>
+        ),
+        actions: (
+          <div>
+            <button>Edit</button>
+            <button>Approve</button>
+            <button>Reject</button>
+          </div>
+        ),
+      },
+      { 
+        user: (
+          <div>
+            <strong>Bob Johnson</strong><br/>
+            bob.johnson@company.com<br/>
+            <em>UX Designer</em>
+          </div>
+        ),
+        description: (
+          <div>
+            Designs user interfaces<br/>
+            and user experiences<br/>
+            <small>Expert in Figma & Sketch</small>
+          </div>
+        ),
+        status: (
+          <span>Inactive</span>
+        ),
+        actions: (
+          <div>
+            <button>Edit</button>
+            <button>Activate</button>
+            <button>Archive</button>
+          </div>
+        ),
+      },
+    ],
+  },
+};
+
+/**
+ * Table with stacked mobile layout that uses container queries. 
+ * This demonstrates how the table adapts to its container width rather than viewport width.
+ * The table will stack vertically when its container becomes narrow (≤600px).
+ * 
+ * **Container Query Behavior**: Uses `mobileLayout="stacked"` to enable responsive stacking.
+ * When the container width ≤ 600px:
+ * - Headers are hidden (`display: none`)
+ * - Cells stack vertically (`display: block`)
+ * - Column labels appear as `data-label` attributes before each cell value
+ * - Perfect for mobile views, sidebars, or constrained layouts
+ * 
+ * ```tsx
+ * <Table
+ *   mobileLayout="stacked"
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'age', label: 'Age' }    
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', age: 20 },
+ *     { name: 'Jane', email: 'jane@example.com', age: 21 }
+ *   ]}
+ * />
+ * ```
+ */
+export const StackedMobileLayout: Story = {
+  args: {
+    mobileLayout: 'stacked',
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'age', label: 'Age' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { name: 'John Doe', email: 'john.doe@example.com', age: 28, status: 'Active', actions: <button>Edit</button> },
+      { name: 'Jane Smith', email: 'jane.smith@example.com', age: 32, status: 'Inactive', actions: <button>Edit</button> },
+      { name: 'Bob Johnson', email: 'bob.johnson@example.com', age: 45, status: 'Active', actions: <button>Edit</button> },
+      { name: 'Alice Brown', email: 'alice.brown@example.com', age: 29, status: 'Pending', actions: <button>Edit</button> },
+    ],
+  },
+};
+
+
+/**
+ * Table with programmatically controlled expandable rows.
+ * Row expansion is controlled by buttons or other interactive elements within the column content.
+ * Developers must manage the `expandedRows` state themselves.
+ * 
+ * **Features**:
+ * - Row details only render when both `_rowDetails` exists and row index is in `expandedRows`
+ * - Row details span the full width of the table
+ * - Supports any VNode content in the `_rowDetails` property
+ * 
+ * ```tsx
+ * const [expandedRows, setExpandedRows] = useState(new Set());
+ * 
+ * const toggleRow = (rowIndex: number) => {
+ *   setExpandedRows(prev => {
+ *     const newSet = new Set(prev);
+ *     if (newSet.has(rowIndex)) {
+ *       newSet.delete(rowIndex);
+ *     } else {
+ *       newSet.add(rowIndex);
+ *     }
+ *     return newSet;
+ *   });
+ * };
+ * 
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'actions', label: 'Actions' }
+ *   ]}
+ *   rowData={[
+ *     { 
+ *       name: 'John', 
+ *       email: 'john@example.com', 
+ *       actions: <button onClick={() => toggleRow(0)}>Toggle Details</button>,
+ *       _rowDetails: <div>Additional information...</div>
+ *     }
+ *   ]}
+ *   expandedRows={expandedRows}
+ * />
+ * ```
+ */
+export const RowDetails: Story = {
+  render: (args) => {
+    const [expandedRows, setExpandedRows] = useState(new Set<number>());
+
+    const toggleRow = (rowIndex: number) => {
+      setExpandedRows(prev => {
+        const newSet = new Set(prev);
+        if (newSet.has(rowIndex)) {
+          newSet.delete(rowIndex);
+        } else {
+          newSet.add(rowIndex);
+        }
+        return newSet;
+      });
+    };
+
+    const rowData = [
+      { 
+        name: 'John Doe', 
+        email: 'john.doe@company.com', 
+        status: 'Active', 
+        actions: (
+          <button onClick={() => toggleRow(0)}>
+            {expandedRows.has(0) ? 'Hide' : 'Show'}
+          </button>
+        ),
+        _rowDetails: (
+          <div>
+            <h3>Employee Details</h3>
+            <p><strong>Department:</strong> Engineering</p>
+            <p><strong>Position:</strong> Senior Developer</p>
+            <p><strong>Start Date:</strong> January 15, 2022</p>
+            <p><strong>Notes:</strong> Excellent performance, leads the frontend team.</p>
+            <div style={{ marginTop: '12px' }}>
+              <button style={{ marginRight: '8px' }}>Update Details</button>
+              <button>View Full Profile</button>
+            </div>
+          </div>
+        )
+      },
+      { 
+        name: 'Jane Smith', 
+        email: 'jane.smith@company.com', 
+        status: 'Pending', 
+        actions: (
+          <button onClick={() => toggleRow(1)}>
+            {expandedRows.has(1) ? 'Hide' : 'Show'}
+          </button>
+        ),
+        _rowDetails: (
+          <div>
+            <h3>Pending Approval</h3>
+            <p><strong>Department:</strong> Marketing</p>
+            <p><strong>Position:</strong> Marketing Manager</p>
+            <p><strong>Application Date:</strong> December 1, 2024</p>
+            <p><strong>Status:</strong> Awaiting HR approval</p>
+            <div style={{ marginTop: '12px' }}>
+              <button style={{ marginRight: '8px', backgroundColor: '#22c55e', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Approve</button>
+              <button style={{ backgroundColor: '#ef4444', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Reject</button>
+            </div>
+          </div>
+        )
+      },
+      { 
+        name: 'Bob Johnson', 
+        email: 'bob.johnson@company.com', 
+        status: 'Inactive', 
+        actions: (
+          <button onClick={() => toggleRow(2)}>
+            {expandedRows.has(2) ? 'Hide' : 'Show'}
+          </button>
+        ),
+        _rowDetails: (
+          <div>
+            <h3>Account Information</h3>
+            <p><strong>Department:</strong> Sales</p>
+            <p><strong>Position:</strong> Sales Director</p>
+            <p><strong>Last Active:</strong> November 20, 2024</p>
+            <p><strong>Reason:</strong> On extended leave</p>
+            <div style={{ marginTop: '12px' }}>
+              <button style={{ marginRight: '8px' }}>Reactivate Account</button>
+              <button>Contact Employee</button>
+            </div>
+          </div>
+        )
+      },
+    ];
+
+    return (
+      <TableComponent
+        {...args}
+        columns={[
+          { key: 'name', label: 'Name' },
+          { key: 'email', label: 'Email' },
+          { key: 'status', label: 'Status' },
+          { key: 'actions', label: 'Actions' },
+        ]}
+        rowData={rowData}
+        expandedRows={expandedRows}
+      />
+    );
+  },
+};
+
+/**
+ * Table in loading state with skeleton rows.
+ * Demonstrates how the table appears while data is being fetched.
+ * Each cell shows a skeleton placeholder that matches the table structure.
+ * 
+ * **Features**:
+ * - Shows skeleton rows instead of actual data when `loading` is true
+ * - Configurable number of skeleton rows via `skeletonRowCount` prop
+ * - Maintains table structure and column headers during loading
+ * - Each cell contains a single-line skeleton component
+ * 
+ * ```tsx
+ * <Table
+ *   loading={true}
+ *   skeletonRowCount={5}
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'status', label: 'Status' }
+ *   ]}
+ *   rowData={[]} // Empty array when loading
+ * />
+ * ```
+ */
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+    skeletonRowCount: 5,
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [], // Empty when loading
+  },
+};
+
+/**
+ * Table with VNode labels in column headers.
+ * Demonstrates how column labels can be VNode elements instead of simple strings.
+ * This allows for rich header content like icons, formatted text, or custom components.
+ *
+ * **Features**:
+ * - Column labels can be VNode elements (JSX components)
+ * - Supports any valid Preact VNode content in headers
+ * - Maintains all table functionality with custom header content
+ * - Useful for adding icons, tooltips, or formatted text to headers
+ *
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: <span><strong>👤 User Name</strong></span> },
+ *     { key: 'email', label: <span style={{ color: '#0066cc' }}>📧 Email</span> },
+ *     { key: 'status', label: <em>Status Info</em> }
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', status: 'Active' }
+ *   ]}
+ * />
+ * ```
+ */
+export const VNodeLabels: Story = {
+  args: {
+    columns: [
+      {
+        key: 'name',
+        label: (
+          <span>
+            <strong>👤 User Name</strong>
+          </span>
+        ),
+      },
+      {
+        key: 'email',
+        label: <span style={{ color: '#0066cc' }}>📧 Email Address</span>,
+      },
+      {
+        key: 'role',
+        label: <em style={{ color: '#666' }}>Role & Department</em>,
+      },
+      {
+        key: 'status',
+        label: (
+          <span
+            style={{
+              padding: '4px 8px',
+              backgroundColor: '#f0f9ff',
+              borderRadius: '4px',
+              fontSize: '12px',
+            }}
+          >
+            📊 Status
+          </span>
+        ),
+      },
+      {
+        key: 'actions',
+        label: <span>⚙️ Actions</span>,
+      },
+    ],
+    rowData: [
+      {
+        name: 'John Doe',
+        email: 'john.doe@company.com',
+        role: 'Senior Developer',
+        status: 'Active',
+        actions: <button>Edit</button>,
+      },
+      {
+        name: 'Jane Smith',
+        email: 'jane.smith@company.com',
+        role: 'Product Manager',
+        status: 'Active',
+        actions: <button>Edit</button>,
+      },
+      {
+        name: 'Bob Johnson',
+        email: 'bob.johnson@company.com',
+        role: 'UX Designer',
+        status: 'Inactive',
+        actions: <button>Edit</button>,
+      },
+    ],
+  },
+};
+