{
  "name": "api-key-table",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/app/api-key-table/api-key-table.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n  <header>\n    <h3>API Keys</h3>\n    <p slot=\"description\">Manage access tokens for external integrations</p>\n    <span slot=\"action\" size=\"sm\">\n      <button-ui text=\"Generate key\" variant=\"primary\" size=\"sm\" icon=\"plus\"></button-ui>\n    </span>\n  </header>\n  <section bleed>\n    <table-ui sortable\n      data='[{\"name\":\"Production API\",\"prefix\":\"sk-live-****-3a7f\",\"created\":\"Jan 15, 2026\",\"lastUsed\":\"2h ago\"},{\"name\":\"Staging API\",\"prefix\":\"sk-test-****-9b2e\",\"created\":\"Mar 1, 2026\",\"lastUsed\":\"3d ago\"},{\"name\":\"CI Pipeline\",\"prefix\":\"sk-live-****-7k4m\",\"created\":\"Apr 10, 2026\",\"lastUsed\":\"1h ago\"}]'>\n      <col-def key=\"name\" label=\"Name\"></col-def>\n      <col-def key=\"prefix\" label=\"Key\"></col-def>\n      <col-def key=\"created\" label=\"Created\"></col-def>\n      <col-def key=\"lastUsed\" label=\"Last used\"></col-def>\n    </table-ui>\n  </section>\n</card-ui>",
  "source": "catalog/ui-patterns/app/api-key-table/api-key-table.contents.html",
  "metadata": {
    "domain": "settings",
    "description": "API keys management table with key name, prefix, created date, last used, and revoke button.",
    "keywords": [
      "api",
      "key",
      "management",
      "table",
      "generate",
      "revoke",
      "token",
      "secret",
      "credential",
      "access",
      "developer",
      "settings",
      "api-keys",
      "api-token",
      "authentication",
      "prefix",
      "created",
      "last-used"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "API Keys"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Manage access tokens for external integrations"
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "plus",
      "size": "sm",
      "text": "Generate key",
      "variant": "primary"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "size": "sm",
      "children": [
        "button"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2",
        "text-3"
      ]
    },
    {
      "id": "col-def",
      "component": "ColDef"
    },
    {
      "id": "col-def-2",
      "component": "ColDef"
    },
    {
      "id": "col-def-3",
      "component": "ColDef"
    },
    {
      "id": "col-def-4",
      "component": "ColDef"
    },
    {
      "id": "table",
      "component": "Table",
      "data": "[{\"name\":\"Production API\",\"prefix\":\"sk-live-****-3a7f\",\"created\":\"Jan 15, 2026\",\"lastUsed\":\"2h ago\"},{\"name\":\"Staging API\",\"prefix\":\"sk-test-****-9b2e\",\"created\":\"Mar 1, 2026\",\"lastUsed\":\"3d ago\"},{\"name\":\"CI Pipeline\",\"prefix\":\"sk-live-****-7k4m\",\"created\":\"Apr 10, 2026\",\"lastUsed\":\"1h ago\"}]",
      "sortable": true,
      "children": [
        "col-def",
        "col-def-2",
        "col-def-3",
        "col-def-4"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "table"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    }
  ]
}