{
  "name": "sortable-search-paginate-table",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/app/sortable-search-table/sortable-search-table.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n  <header>\n    <text-ui slot=\"heading\" strong>Team Members</text-ui>\n    <span slot=\"action\">\n      <button-ui text=\"Export CSV\" variant=\"outline\" size=\"sm\" icon-leading=\"download\"></button-ui>\n    </span>\n  </header>\n  <section bleed>\n    <!-- table-ui: sortable=column click-to-sort, search=global filter, paginate=N rows per page -->\n    <table-ui id=\"team-table\" sortable search=\" \" paginate=\"10\">\n      <col-def key=\"name\" label=\"Name\" type=\"avatar\"></col-def>\n      <col-def key=\"email\" label=\"Email\" type=\"link\"></col-def>\n      <col-def key=\"role\" label=\"Role\"></col-def>\n      <col-def key=\"status\" label=\"Status\" type=\"badge\"></col-def>\n      <col-def key=\"joined\" label=\"Joined\" type=\"date\"></col-def>\n    </table-ui>\n  </section>\n</card-ui>",
  "source": "catalog/ui-patterns/app/sortable-search-table/sortable-search-table.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Data table with sortable columns, search filter, and pagination — table-ui with col-def children declaring Name, Email, Status (badge), and date columns. Full interactive data table pattern.",
    "keywords": [
      "data",
      "table",
      "sortable",
      "columns",
      "search",
      "pagination",
      "table-ui",
      "col-def",
      "sortable",
      "search",
      "paginate",
      "filter",
      "rows",
      "columns",
      "header",
      "data-table",
      "interactive"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "slot": "heading",
      "strong": true,
      "textContent": "Team Members"
    },
    {
      "id": "button",
      "component": "Button",
      "size": "sm",
      "text": "Export CSV",
      "variant": "outline"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "button"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "col-def",
      "component": "ColDef"
    },
    {
      "id": "col-def-2",
      "component": "ColDef"
    },
    {
      "id": "col-def-3",
      "component": "ColDef"
    },
    {
      "id": "col-def-4",
      "component": "ColDef"
    },
    {
      "id": "col-def-5",
      "component": "ColDef"
    },
    {
      "id": "team-table",
      "component": "Table",
      "paginate": 10,
      "search": " ",
      "sortable": true,
      "children": [
        "col-def",
        "col-def-2",
        "col-def-3",
        "col-def-4",
        "col-def-5"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "team-table"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    }
  ]
}