{
  "name": "table-toolbar-with-table",
  "kind": "block",
  "primary": "div",
  "page": "/packages/web-components/components/table-toolbar/table-toolbar.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "table with toolbar"
  },
  "html": "<col-ui gap=\"0\">\n        <table-toolbar-ui for=\"demo-table\" text=\"All employees\" count=\"32\" placeholder=\"Search employees…\"></table-toolbar-ui>\n        <card-ui>\n          <section bleed>\n            <table-ui id=\"demo-table\" sortable raw>\n              <table>\n                <thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>\n                <tbody>\n                  <tr><td>Maya Chen</td><td>Designer</td><td><tag-ui size=\"sm\" variant=\"success\">Active</tag-ui></td></tr>\n                  <tr><td>Alex Park</td><td>Engineer</td><td><tag-ui size=\"sm\" variant=\"success\">Active</tag-ui></td></tr>\n                  <tr><td>Jordan Lee</td><td>Product</td><td><tag-ui size=\"sm\" variant=\"warning\">Away</tag-ui></td></tr>\n                </tbody>\n              </table>\n            </table-ui>\n          </section>\n        </card-ui>\n      </col-ui>",
  "source": "packages/web-components/components/table-toolbar/table-toolbar.examples.html",
  "metadata": {
    "domain": "data",
    "description": "Data table with toolbar — table-toolbar-ui above card-wrapped table-ui. Standard data grid pattern with search, filter, sort, and column visibility.",
    "keywords": [
      "table",
      "toolbar",
      "search",
      "filter",
      "sort",
      "columns",
      "data",
      "grid",
      "employees",
      "members",
      "users",
      "card"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "column",
      "component": "Column"
    },
    {
      "id": "text",
      "component": "Text",
      "textContent": "Name",
      "variant": "body"
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "Role",
      "variant": "body"
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "Status",
      "variant": "body"
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "text",
        "text-2",
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "Maya Chen",
      "variant": "body"
    },
    {
      "id": "text-5",
      "component": "Text",
      "textContent": "Designer",
      "variant": "body"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Active",
      "variant": "body"
    },
    {
      "id": "tag",
      "component": "Tag",
      "size": "sm",
      "variant": "success",
      "children": [
        "text-6"
      ]
    },
    {
      "id": "column-8",
      "component": "Column",
      "children": [
        "text-4",
        "text-5",
        "tag"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Alex Park",
      "variant": "body"
    },
    {
      "id": "text-8",
      "component": "Text",
      "textContent": "Engineer",
      "variant": "body"
    },
    {
      "id": "text-9",
      "component": "Text",
      "textContent": "Active",
      "variant": "body"
    },
    {
      "id": "tag-2",
      "component": "Tag",
      "size": "sm",
      "variant": "success",
      "children": [
        "text-9"
      ]
    },
    {
      "id": "column-12",
      "component": "Column",
      "children": [
        "text-7",
        "text-8",
        "tag-2"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "textContent": "Jordan Lee",
      "variant": "body"
    },
    {
      "id": "text-11",
      "component": "Text",
      "textContent": "Product",
      "variant": "body"
    },
    {
      "id": "text-12",
      "component": "Text",
      "textContent": "Away",
      "variant": "body"
    },
    {
      "id": "tag-3",
      "component": "Tag",
      "size": "sm",
      "variant": "warning",
      "children": [
        "text-12"
      ]
    },
    {
      "id": "column-16",
      "component": "Column",
      "children": [
        "text-10",
        "text-11",
        "tag-3"
      ]
    },
    {
      "id": "column-7",
      "component": "Column",
      "children": [
        "column-8",
        "column-12",
        "column-16"
      ]
    },
    {
      "id": "table",
      "component": "Table",
      "children": [
        "column-3",
        "column-7"
      ]
    },
    {
      "id": "demo-table",
      "component": "Table",
      "raw": true,
      "sortable": true,
      "children": [
        "table"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-20"
      ]
    },
    {
      "id": "column-20",
      "component": "Column",
      "children": [
        "demo-table"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "0",
      "children": [
        "column",
        "card"
      ]
    }
  ]
}