@idealyst/components 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.3.4",
+    "@idealyst/theme": "^1.3.5",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.3.4",
-    "@idealyst/tooling": "^1.3.4",
+    "@idealyst/theme": "^1.3.5",
+    "@idealyst/tooling": "^1.3.5",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Menu/Menu.styles.tsx

@@ -57,12 +57,12 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         backgroundColor: 'transparent' as const,
-        borderRadius: 4,
-        minHeight: 44,
         variants: {
             size: {
                 paddingVertical: theme.sizes.$menu.paddingVertical,
                 paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+                minHeight: theme.sizes.$menu.minHeight,
+                borderRadius: theme.sizes.$menu.borderRadius,
             },
             intent: {
                 neutral: {
@@ -147,13 +147,13 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
-        marginRight: 8,
         color: theme.colors.text.primary,
         variants: {
             size: {
                 width: theme.sizes.$menu.iconSize,
                 height: theme.sizes.$menu.iconSize,
                 fontSize: theme.sizes.$menu.iconSize,
+                marginRight: theme.sizes.$menu.iconGap,
             },
             intent: {
                 neutral: {},

package/src/Menu/MenuItem.styles.tsx

@@ -25,12 +25,12 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         backgroundColor: 'transparent' as const,
-        borderRadius: 4,
-        minHeight: 44,
         variants: {
             size: {
                 paddingVertical: theme.sizes.$menu.paddingVertical,
                 paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+                minHeight: theme.sizes.$menu.minHeight,
+                borderRadius: theme.sizes.$menu.borderRadius,
             },
             intent: {
                 neutral: {
@@ -110,13 +110,13 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
-        marginRight: 12,
         color: theme.colors.text.primary,
         variants: {
             size: {
                 width: theme.sizes.$menu.iconSize,
                 height: theme.sizes.$menu.iconSize,
                 fontSize: theme.sizes.$menu.iconSize,
+                marginRight: theme.sizes.$menu.iconGap,
             },
             intent: {
                 neutral: {},
@@ -135,6 +135,9 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
     label: (_props: MenuItemDynamicProps) => ({
         flex: 1,
         color: theme.colors.text.primary,
+        _web: {
+            whiteSpace: 'nowrap',
+        },
         variants: {
             size: {
                 fontSize: theme.sizes.$menu.labelFontSize,

package/src/Menu/MenuItem.web.tsx

@@ -18,6 +18,7 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   // Initialize styles with useVariants (for size and disabled)
   menuItemStyles.useVariants({
     size,
+    intent: item.intent || 'neutral',
     disabled: Boolean(item.disabled),
   });
 
@@ -54,22 +55,10 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   // Merge refs
   const mergedRef = useMergeRefs(ref, itemProps.ref);
 
-  // Button reset styles that must be applied directly
-  const buttonResetStyles: React.CSSProperties = {
-    display: 'flex',
-    width: '100%',
-    border: 'none',
-    outline: 'none',
-    cursor: item.disabled ? 'not-allowed' : 'pointer',
-    background: 'transparent',
-    textAlign: 'left',
-  };
-
   return (
     <button
       {...itemProps}
       ref={mergedRef}
-      style={buttonResetStyles}
       onClick={(e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();

package/src/Table/Table.native.tsx

@@ -1,8 +1,11 @@
-import React, { forwardRef, useMemo, ReactNode } from 'react';
-import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
+import React, { forwardRef, useMemo, useState, useCallback, ReactNode } from 'react';
+import { View, ScrollView, Text, TouchableOpacity, Pressable } from 'react-native';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant, SortDirection } from './types';
+import type { MenuItem } from '../Menu/types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import Icon from '../Icon/Icon.native';
+import Menu from '../Menu/Menu.native';
 
 // ============================================================================
 // Sub-component Props
@@ -25,6 +28,10 @@ interface THProps {
   type?: TableType;
   align?: TableAlignVariant;
   width?: number | string;
+  sortable?: boolean;
+  sortDirection?: SortDirection;
+  onSort?: () => void;
+  options?: MenuItem[];
 }
 
 interface TDProps {
@@ -83,29 +90,72 @@ function TH({
   type = 'standard',
   align = 'left',
   width,
+  sortable,
+  sortDirection,
+  onSort,
+  options,
 }: THProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   tableStyles.useVariants({
     size,
     type,
     align,
+    sortable: !!sortable,
+    sortActive: sortDirection != null,
   });
 
   const headerCellStyle = (tableStyles.headerCell as any)({});
+  const sortIndicatorStyle = (tableStyles.sortIndicator as any)({ sortActive: sortDirection != null });
+  const optionsButtonStyle = (tableStyles.optionsButton as any)({});
 
-  return (
+  const sortIconName = sortDirection === 'asc' ? 'arrow-up' :
+    sortDirection === 'desc' ? 'arrow-down' : 'arrow-up-down';
+
+  const content = (
     <View
       style={[
         headerCellStyle,
         { width, flex: width ? undefined : 1 },
       ]}
     >
-      {typeof children === 'string' ? (
-        <Text style={headerCellStyle}>{children}</Text>
-      ) : (
-        children
+      <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: 2 }}>
+        {typeof children === 'string' ? (
+          <Text style={headerCellStyle}>{children}</Text>
+        ) : (
+          children
+        )}
+        {sortable && (
+          <View style={sortIndicatorStyle}>
+            <Icon name={sortIconName} size={size} />
+          </View>
+        )}
+      </View>
+      {options && options.length > 0 && (
+        <Menu
+          items={options}
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          placement="bottom-start"
+          size={size}
+        >
+          <Pressable style={optionsButtonStyle}>
+            <Icon name="dots-vertical" size={size} />
+          </Pressable>
+        </Menu>
       )}
     </View>
   );
+
+  if (sortable) {
+    return (
+      <Pressable onPress={onSort}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
 }
 
 // ============================================================================
@@ -193,6 +243,7 @@ function TableInner<T = any>({
   size = 'md',
   stickyHeader: _stickyHeader = false,
   onRowPress,
+  onSort,
   dividers = false,
   emptyState,
   // Spacing variants from ContainerStyleProps
@@ -212,6 +263,26 @@ function TableInner<T = any>({
   accessibilityRole,
   accessibilityHidden,
 }: TableProps<T>, ref: React.Ref<ScrollView>) {
+  // Sort state
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  const handleSort = useCallback((columnKey: string) => {
+    let newDir: SortDirection;
+    if (sortColumn !== columnKey) {
+      newDir = 'asc';
+    } else if (sortDirection === 'asc') {
+      newDir = 'desc';
+    } else {
+      setSortColumn(null);
+      setSortDirection(null);
+      onSort?.(columnKey, null);
+      return;
+    }
+    setSortColumn(columnKey);
+    setSortDirection(newDir);
+    onSort?.(columnKey, newDir);
+  }, [sortColumn, sortDirection, onSort]);
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeAccessibilityProps({
@@ -276,7 +347,17 @@ function TableInner<T = any>({
       <View style={theadStyle}>
         <View style={{ flexDirection: 'row' }}>
           {cols.map((column) => (
-            <TH key={column.key} size={size} type={type} align={column.align} width={column.width}>
+            <TH
+              key={column.key}
+              size={size}
+              type={type}
+              align={column.align}
+              width={column.width}
+              sortable={column.sortable}
+              sortDirection={sortColumn === column.key ? sortDirection : undefined}
+              onSort={column.sortable ? () => handleSort(column.key) : undefined}
+              options={column.options}
+            >
               {column.title}
             </TH>
           ))}

package/src/Table/Table.styles.tsx

@@ -23,6 +23,8 @@ export type TableDynamicProps = {
     even?: boolean;
     sticky?: boolean;
     align?: CellAlign;
+    sortable?: boolean;
+    sortActive?: boolean;
     gap?: ViewStyleSize;
     padding?: ViewStyleSize;
     paddingVertical?: ViewStyleSize;
@@ -178,6 +180,18 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
                 fontSize: theme.sizes.$table.fontSize,
                 lineHeight: theme.sizes.$table.lineHeight,
             },
+            sortable: {
+                true: {
+                    _web: {
+                        cursor: 'pointer',
+                        userSelect: 'none',
+                        transition: 'background-color 0.15s ease',
+                        _hover: {
+                            backgroundColor: theme.colors.surface.hover,
+                        },
+                    },
+                },
+            },
         },
         _web: {
             position: 'relative',
@@ -185,6 +199,53 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         },
     }),
 
+    sortIndicator: ({ sortActive = false }: TableDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 4,
+        opacity: sortActive ? 1 : 0.4,
+        color: sortActive ? theme.colors.text.primary : theme.colors.text.tertiary,
+        flexShrink: 0,
+        _web: {
+            transition: 'opacity 0.15s ease, color 0.15s ease',
+        },
+        variants: {
+            size: {
+                width: theme.sizes.$table.fontSize,
+                height: theme.sizes.$table.fontSize,
+            },
+        },
+    }),
+
+    optionsButton: (_props: TableDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 4,
+        borderRadius: 4,
+        padding: 2,
+        opacity: 0.4,
+        flexShrink: 0,
+        color: theme.colors.text.tertiary,
+        _web: {
+            cursor: 'pointer',
+            border: 'none',
+            background: 'transparent',
+            transition: 'opacity 0.15s ease, background-color 0.15s ease',
+            _hover: {
+                opacity: 1,
+                backgroundColor: theme.colors.surface.hover,
+            },
+        },
+        variants: {
+            size: {
+                width: theme.sizes.$table.fontSize,
+                height: theme.sizes.$table.fontSize,
+            },
+        },
+    }),
+
     cell: (_props: TableDynamicProps) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,

package/src/Table/Table.web.tsx

@@ -1,8 +1,11 @@
-import { useMemo, useRef, useCallback, ReactNode } from 'react';
+import { useMemo, useRef, useCallback, useState, ReactNode } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant, SortDirection } from './types';
+import type { MenuItem } from '../Menu/types';
 import { getWebAriaProps } from '../utils/accessibility';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import Menu from '../Menu/Menu.web';
 
 // ============================================================================
 // Helpers
@@ -49,6 +52,10 @@ interface THProps {
   onResize?: (width: number) => void;
   minWidth?: number;
   accessibilitySort?: 'ascending' | 'descending' | 'none' | 'other';
+  sortable?: boolean;
+  sortDirection?: SortDirection;
+  onSort?: () => void;
+  options?: MenuItem[];
 }
 
 interface TDProps {
@@ -110,16 +117,37 @@ function TH({
   onResize,
   minWidth = 50,
   accessibilitySort,
+  sortable,
+  sortDirection,
+  onSort,
+  options,
 }: THProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   tableStyles.useVariants({
     size,
     type,
     align,
+    sortable: !!sortable,
+    sortActive: sortDirection != null,
   });
 
   const headerCellProps = getWebProps([(tableStyles.headerCell as any)({})]);
+  const sortIndicatorProps = getWebProps([(tableStyles.sortIndicator as any)({ sortActive: sortDirection != null })]);
+  const optionsButtonProps = getWebProps([(tableStyles.optionsButton as any)({})]);
   const thRef = useRef<HTMLTableCellElement>(null);
 
+  // Derive aria-sort from sortDirection
+  const derivedAriaSort = accessibilitySort ?? (
+    sortDirection === 'asc' ? 'ascending' :
+    sortDirection === 'desc' ? 'descending' :
+    sortable ? 'none' : undefined
+  );
+
+  // Sort indicator icon name
+  const sortIconName = sortDirection === 'asc' ? 'arrow-up' :
+    sortDirection === 'desc' ? 'arrow-down' : 'arrow-up-down';
+
   const handlePointerDown = useCallback((e: React.PointerEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -139,12 +167,10 @@ function TH({
       document.removeEventListener('pointerup', handlePointerUp);
       const finalWidth = th.getBoundingClientRect().width;
       onResize?.(finalWidth);
-      // Remove inline cursor override
       document.body.style.cursor = '';
       document.body.style.userSelect = '';
     };
 
-    // Prevent text selection and set resize cursor globally during drag
     document.body.style.cursor = 'col-resize';
     document.body.style.userSelect = 'none';
     document.addEventListener('pointermove', handlePointerMove);
@@ -156,10 +182,47 @@ function TH({
       {...headerCellProps}
       ref={thRef}
       scope="col"
-      aria-sort={accessibilitySort}
+      aria-sort={derivedAriaSort}
       style={{ width, ...getStickyStyle(sticky, stickyOffset, 11) }}
+      onClick={sortable ? onSort : undefined}
     >
-      {children}
+      <span style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <span style={{ flex: 1, minWidth: 0 }}>
+          {children}
+        </span>
+        {sortable && (
+          <span {...sortIndicatorProps} style={{ display: 'inline-flex', flexShrink: 0 }}>
+            <IconSvg name={sortIconName} size="0.85em" aria-label={sortIconName} />
+          </span>
+        )}
+        {options && options.length > 0 && (
+          <span onClick={(e) => e.stopPropagation()} style={{ display: 'inline-flex', flexShrink: 0 }}>
+            <Menu
+              items={options}
+              open={menuOpen}
+              onOpenChange={setMenuOpen}
+              placement="bottom-start"
+              size={size}
+            >
+              <button
+                {...optionsButtonProps}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: 2,
+                }}
+                aria-label="Column options"
+              >
+                <IconSvg name="dots-vertical" size="0.85em" aria-label="dots-vertical" />
+              </button>
+            </Menu>
+          </span>
+        )}
+      </span>
       {resizable && (
         <span
           onPointerDown={handlePointerDown}
@@ -266,6 +329,7 @@ function Table<T = any>({
   stickyHeader = false,
   onRowPress,
   onColumnResize,
+  onSort,
   dividers = false,
   emptyState,
   // Spacing variants from ContainerStyleProps
@@ -285,6 +349,26 @@ function Table<T = any>({
   accessibilityRole,
   accessibilityHidden,
 }: TableProps<T>) {
+  // Sort state
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  const handleSort = useCallback((columnKey: string) => {
+    let newDir: SortDirection;
+    if (sortColumn !== columnKey) {
+      newDir = 'asc';
+    } else if (sortDirection === 'asc') {
+      newDir = 'desc';
+    } else {
+      setSortColumn(null);
+      setSortDirection(null);
+      onSort?.(columnKey, null);
+      return;
+    }
+    setSortColumn(columnKey);
+    setSortDirection(newDir);
+    onSort?.(columnKey, newDir);
+  }, [sortColumn, sortDirection, onSort]);
   // Generate ARIA props
   const ariaProps = useMemo(() => {
     return getWebAriaProps({
@@ -378,6 +462,10 @@ function Table<T = any>({
                 minWidth={column.minWidth}
                 onResize={onColumnResize ? (w) => onColumnResize(column.key, w) : undefined}
                 accessibilitySort={column.accessibilitySort}
+                sortable={column.sortable}
+                sortDirection={sortColumn === column.key ? sortDirection : undefined}
+                onSort={column.sortable ? () => handleSort(column.key) : undefined}
+                options={column.options}
               >
                 {column.title}
               </TH>

package/src/Table/types.ts

@@ -3,11 +3,13 @@ import type { ReactNode } from 'react';
 import { Size } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 import { AccessibilityProps, SortableAccessibilityProps } from '../utils/accessibility';
+import type { MenuItem } from '../Menu/types';
 
 // Component-specific type aliases for future extensibility
 export type TableSizeVariant = Size;
 export type TableType = 'standard' | 'striped';
 export type TableAlignVariant = 'left' | 'center' | 'right';
+export type SortDirection = 'asc' | 'desc' | null;
 
 export interface TableColumn<T = any> extends SortableAccessibilityProps {
   key: string;
@@ -32,6 +34,16 @@ export interface TableColumn<T = any> extends SortableAccessibilityProps {
    * Minimum width when resizing (default: 50).
    */
   minWidth?: number;
+  /**
+   * Enables click-to-sort cycling on this column header.
+   * Cycles: unsorted → ascending → descending → unsorted.
+   */
+  sortable?: boolean;
+  /**
+   * Menu items to show in a column options dropdown.
+   * Uses the existing MenuItem type from the Menu component.
+   */
+  options?: MenuItem[];
 }
 
 /**
@@ -58,6 +70,11 @@ export interface TableProps<T = any> extends ContainerStyleProps, AccessibilityP
    * Receives the column key and the new width in pixels.
    */
   onColumnResize?: (key: string, width: number) => void;
+  /**
+   * Called when sort state changes via header click.
+   * The Table manages sort state internally; the parent handles data ordering.
+   */
+  onSort?: (columnKey: string, direction: SortDirection) => void;
   /**
    * Content to display when `data` is empty.
    * Renders in place of the table body.

package/src/examples/TableExamples.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Screen, View, Text, Badge, Button } from '@idealyst/components';
 import Table from '../Table';
-import type { TableColumn } from '../Table/types';
+import type { TableColumn, SortDirection } from '../Table/types';
 
 interface User {
   id: number;
@@ -287,9 +287,102 @@ export const TableExamples: React.FC = () => {
           No data to display
         </Text>
       </View>
+
+      <SortableTableExample />
+      <OptionsTableExample />
     </View>
     </Screen>
   );
 };
 
+const SortableTableExample: React.FC = () => {
+  const [sortedProducts, setSortedProducts] = useState([
+    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15 },
+    { id: 2, name: 'Mouse', category: 'Electronics', price: 29.99, stock: 150 },
+    { id: 3, name: 'Keyboard', category: 'Electronics', price: 79.99, stock: 75 },
+    { id: 4, name: 'Monitor', category: 'Electronics', price: 299.99, stock: 30 },
+    { id: 5, name: 'Desk', category: 'Furniture', price: 399.99, stock: 10 },
+  ]);
+
+  const handleSort = (columnKey: string, direction: SortDirection) => {
+    if (!direction) {
+      setSortedProducts([...sortedProducts]);
+      return;
+    }
+    const sorted = [...sortedProducts].sort((a, b) => {
+      const aVal = (a as any)[columnKey];
+      const bVal = (b as any)[columnKey];
+      if (typeof aVal === 'number') return direction === 'asc' ? aVal - bVal : bVal - aVal;
+      return direction === 'asc'
+        ? String(aVal).localeCompare(String(bVal))
+        : String(bVal).localeCompare(String(aVal));
+    });
+    setSortedProducts(sorted);
+  };
+
+  const columns: TableColumn<typeof sortedProducts[0]>[] = [
+    { key: 'name', title: 'Product', dataIndex: 'name', sortable: true },
+    { key: 'category', title: 'Category', dataIndex: 'category', width: '150px', sortable: true },
+    { key: 'price', title: 'Price', dataIndex: 'price', width: '120px', align: 'right', sortable: true, render: (price: number) => `$${price.toFixed(2)}` },
+    { key: 'stock', title: 'Stock', dataIndex: 'stock', width: '100px', align: 'center', sortable: true },
+  ];
+
+  return (
+    <View gap="md">
+      <Text typography="h5">Sortable Table</Text>
+      <Table columns={columns} data={sortedProducts} onSort={handleSort} dividers />
+      <Text typography="caption" color="secondary">
+        Click column headers to cycle sort: unsorted, ascending, descending
+      </Text>
+    </View>
+  );
+};
+
+const OptionsTableExample: React.FC = () => {
+  const data = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
+  ];
+
+  const columns: TableColumn<typeof data[0]>[] = [
+    {
+      key: 'name',
+      title: 'Name',
+      dataIndex: 'name',
+      sortable: true,
+      options: [
+        { id: 'sort-asc', label: 'Sort A-Z', icon: 'sort-ascending', onClick: () => console.log('Sort A-Z') },
+        { id: 'sort-desc', label: 'Sort Z-A', icon: 'sort-descending', onClick: () => console.log('Sort Z-A') },
+        { id: 'sep', label: '', separator: true },
+        { id: 'hide', label: 'Hide Column', icon: 'eye-off', onClick: () => console.log('Hide column') },
+      ],
+    },
+    {
+      key: 'email',
+      title: 'Email',
+      dataIndex: 'email',
+      options: [
+        { id: 'copy', label: 'Copy All Emails', icon: 'content-copy', onClick: () => console.log('Copy emails') },
+      ],
+    },
+    {
+      key: 'role',
+      title: 'Role',
+      dataIndex: 'role',
+      width: '120px',
+    },
+  ];
+
+  return (
+    <View gap="md">
+      <Text typography="h5">Column Options Menu</Text>
+      <Table columns={columns} data={data} dividers />
+      <Text typography="caption" color="secondary">
+        Columns with options show a kebab menu icon in the header
+      </Text>
+    </View>
+  );
+};
+
 export default TableExamples;