// Generated by scripts/generate-showcase.mjs. Do not edit directly. page DataTableDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Data Table" state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n {\n \"id\": \"data-table-0-1\",\n \"key\": \"data-table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-table-0-2\",\n \"key\": \"data-table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "[\n {\n \"id\": \"data-table-0-1\",\n \"key\": \"data-table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-table-0-2\",\n \"key\": \"data-table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" state playground_striped = ctx.url.searchParams.get("pg_striped") ?? "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Data Table" description = "Theme-aware, responsive data table component." } view {
Integrations component

Data Table

Theme-aware, responsive data table component.

7 props1 slots5 eventsTheme readyResponsive
Interactive playground

Configure Data Table

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<DataTable
  columns='[
    {
      "id": "data-table-0-1",
      "key": "data-table-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "data-table-0-2",
      "key": "data-table-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  rows='[
    {
      "id": "data-table-0-1",
      "key": "data-table-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "data-table-0-2",
      "key": "data-table-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Component props7 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

01
Live preview
Component usage.wrn
<DataTable
  columns='[
    {
      "id": "data-table-0-1",
      "key": "data-table-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "data-table-0-2",
      "key": "data-table-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  rows='[
    {
      "id": "data-table-0-1",
      "key": "data-table-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "data-table-0-2",
      "key": "data-table-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

02
Live preview
Component usage.wrn
<DataTable
  size="sm"
  columns='[
    {
      "id": "data-table-1-1",
      "key": "data-table-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "data-table-1-2",
      "key": "data-table-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  rows='[
    {
      "id": "data-table-1-1",
      "key": "data-table-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "data-table-1-2",
      "key": "data-table-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

03
Live preview
Component usage.wrn
<DataTable
  size="lg"
  columns='[
    {
      "id": "data-table-2-1",
      "key": "data-table-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "data-table-2-2",
      "key": "data-table-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
  rows='[
    {
      "id": "data-table-2-1",
      "key": "data-table-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "data-table-2-2",
      "key": "data-table-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#data-table-demo",
      "actionHref": "#data-table-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@sortFires when the component emits the sort event.
@selectFires when an item or option is selected.
@changeFires when the component value or selection changes.
@rowClickFires when the component emits the row Click event.
@pageChangeFires when the component emits the page Change event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('sort', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
captionstring"Data Table"No
columnsstring[]No
rowsstring[]No
stripedbooleantrueNo
classstring""No
} }