Data Table

# In Power Apps Studio:
1. Components → New component → Import from code
2. Paste YAML definition
3. Component appears in library
4. Configure Items, Columns, and theme properties

// Set data source
cmpDynamicGallery.Items: YourDataSource
cmpDynamicGallery.Width: Parent.Width
cmpDynamicGallery.Height: 600

// Define columns (supports up to 8)
cmpDynamicGallery.Columns: Table(
    {Field: "Actions", Header: "Actions", Align: "Center",
     Mode: "px", WidthPx: 50, AutoMinPx: 50, AutoMaxPx: 50},
    {Field: "CaseID", Header: "Case ID", Align: "Left",
     Mode: "px", WidthPx: 120, AutoMinPx: 100, AutoMaxPx: 150},
    {Field: "Title", Header: "Title", Align: "Left",
     Mode: "auto", WidthPx: 280, AutoMinPx: 220, AutoMaxPx: 360},
    {Field: "Status", Header: "Status", Align: "Center",
     Mode: "px", WidthPx: 120, AutoMinPx: 100, AutoMaxPx: 140}
)

// Enable view toggle between table and card
cmpDynamicGallery.ShowViewToggle: true
cmpDynamicGallery.ViewMode: "table"  // Default: "table" or "card"

// React to view changes
cmpDynamicGallery.OnViewChange:
    Notify(
        "Switched to " & cmpDynamicGallery.SelectedViewMode & " view",
        NotificationType.Information
    )

// Read current view
Set(varCurrentView, cmpDynamicGallery.SelectedViewMode)

// Enable context menu
cmpDynamicGallery.EnableMenu: true

// Define menu items with SVG icons
cmpDynamicGallery.ContextMenuItems: Table(
    {
        ItemKey: "view",
        ItemDisplayName: "View",
        ItemIconSvg: "<svg ...>...</svg>",
        ItemIconColor: "60,60,60,1",
        ItemEnabled: true,
        ItemVisible: true
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconSvg: "<svg ...>...</svg>",
        ItemIconColor: "60,60,60,1",
        ItemEnabled: true,
        ItemVisible: true
    },
    {
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconSvg: "<svg ...>...</svg>",
        ItemIconColor: "248,113,113,1",
        ItemEnabled: true,
        ItemVisible: true
    }
)

// Handle menu selection
cmpDynamicGallery.OnMenuItemSelect:
    Switch(
        cmpDynamicGallery.SelectedMenuItem.ItemKey,
        "view", Navigate(ViewScreen, None, {Item: cmpDynamicGallery.SelectedItem}),
        "edit", Navigate(EditScreen, None, {Item: cmpDynamicGallery.SelectedItem}),
        "delete", Remove(DataSource, cmpDynamicGallery.SelectedItem)
    )

// Status pills (5 built-in statuses + default)
cmpDynamicGallery.StatusField: "Status"
cmpDynamicGallery.StatusConfig: {
    pill: {radius: 20, paddingX: 16, paddingY: 6, fontSize: 11, fontWeight: "Semibold"},
    inProgress: {background: "219,234,254,1", text: "30,64,175,1"},
    completed: {background: "212,244,221,1", text: "15,81,50,1"},
    onHold: {background: "254,243,199,1", text: "146,64,14,1"},
    notStarted: {background: "243,244,246,1", text: "75,85,99,1"},
    default: {background: "240,240,240,1", text: "96,96,96,1"}
}

// Priority badges (3 levels + default)
cmpDynamicGallery.PriorityConfig: {
    high: {background: "254,226,226,1", text: "185,28,28,1"},
    medium: {background: "254,243,199,1", text: "146,64,14,1"},
    low: {background: "220,252,231,1", text: "22,101,52,1"},
    default: {background: "243,244,246,1", text: "75,85,99,1"}
}

// Segmented progress bar (SVG-based, up to 10 segments)
// Uses CompletedSteps and TotalSteps from your data
cmpDynamicGallery.ProgressActiveColor: "2563EB"    // Blue hex without #
cmpDynamicGallery.ProgressInactiveColor: "E2E8F0"  // Gray hex without #

// Your data should include:
// CompletedSteps: 3, TotalSteps: 5

cmpDynamicGallery.ThemeConfig: {
    container: {
        background: "255,255,255,1",
        border: "224,224,224,1",
        borderThickness: 1,
        radius: 12
    },
    header: {
        background: "249,250,251,1",
        border: "224,224,224,1",
        borderThickness: 2,
        textColor: "96,96,96,1",
        fontSize: 11,
        fontWeight: "Semibold",
        height: 50
    },
    row: {
        background: "0,0,0,0",
        hoverBackground: "248,249,250,0.5",
        borderColor: "240,240,240,1",
        borderThickness: 1,
        height: 60
    },
    card: {
        background: "255,255,255,1",
        border: "229,231,235,1",
        borderThickness: 1,
        radius: 12,
        height: 280,
        gap: 16
    },
    text: {
        primary: "32,32,32,1",
        secondary: "96,96,96,1",
        accent: "37,99,235,1",
        fontFamily: "Segoe UI",
        fontSizeNormal: 12,
        fontSizeSmall: 11,
        fontWeightNormal: "Normal",
        fontWeightBold: "Semibold"
    },
    spacing: {
        paddingLeft: 20,
        paddingTop: 16,
        columnGap: 10
    }
}