{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:ui",
  "title": "Table (MIAN)",
  "description": "Data tables with hover, striping, compact density, selection, numeric alignment and sortable columns.",
  "categories": [
    "data display",
    "table",
    "data table",
    "grid",
    "rows"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/table.css",
      "type": "registry:file",
      "target": "mian/components/table.css",
      "content": ".mn-table-wrap { position: relative; width: 100%; overflow-x: auto; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); }\n.mn-table { width: 100%; border-collapse: collapse; font: 400 var(--mn-text-sm)/1.45 var(--mn-font); color: var(--mn-fg); }\n.mn-table caption { padding: .75rem 1rem; caption-side: bottom; color: var(--mn-muted); font-size: calc(var(--mn-text-sm) - 1px); text-align: start; }\n.mn-table th, .mn-table td { padding: .7rem 1rem; text-align: start; vertical-align: middle; border-bottom: var(--mn-border-w) solid var(--mn-border); }\n.mn-table thead th { height: 2.6rem; font-weight: 500; color: var(--mn-muted); white-space: nowrap; background: color-mix(in oklab, var(--mn-surface-2) 55%, transparent); }\n.mn-table tbody tr:last-child > * { border-bottom: 0; }\n.mn-table tfoot td, .mn-table tfoot th { font-weight: 600; border-top: var(--mn-border-w) solid var(--mn-border); border-bottom: 0; }\n.mn-table-hover tbody tr { transition: background-color var(--mn-duration) var(--mn-ease); }\n.mn-table-hover tbody tr:hover { background: var(--mn-hover); }\n.mn-table-striped tbody tr:nth-child(even) { background: color-mix(in oklab, var(--mn-surface-2) 50%, transparent); }\n.mn-table-compact th, .mn-table-compact td { padding: .4rem .75rem; }\n.mn-table tr[aria-selected=\"true\"] { background: color-mix(in oklab, var(--mn-primary) 8%, transparent); }\n.mn-table .mn-num { text-align: end; font-variant-numeric: tabular-nums; }\n.mn-table th[aria-sort] button { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }\n.mn-table th[aria-sort] button::after { content: \"↕\"; opacity: .45; font-size: .85em; }\n.mn-table th[aria-sort=\"ascending\"] button::after { content: \"↑\"; opacity: 1; }\n.mn-table th[aria-sort=\"descending\"] button::after { content: \"↓\"; opacity: 1; }"
    },
    {
      "path": "mian/examples/table.html",
      "type": "registry:file",
      "target": "mian/examples/table.html",
      "content": "<!-- Sortable -->\n<div class=\"mn-table-wrap\">\n<table class=\"mn-table mn-table-hover\">\n  <caption>Recent invoices</caption>\n  <thead><tr>\n    <th scope=\"col\" aria-sort=\"none\"><button>Invoice</button></th>\n    <th scope=\"col\">Status</th>\n    <th scope=\"col\" aria-sort=\"none\"><button>Method</button></th>\n    <th scope=\"col\" class=\"mn-num\" aria-sort=\"none\"><button>Amount</button></th>\n  </tr></thead>\n  <tbody>\n    <tr><td>INV-001</td><td><span class=\"mn-badge mn-badge-soft mn-success\">Paid</span></td><td>Card</td><td class=\"mn-num\">€250.00</td></tr>\n    <tr><td>INV-002</td><td><span class=\"mn-badge mn-badge-soft mn-warning\">Pending</span></td><td>Transfer</td><td class=\"mn-num\">€150.00</td></tr>\n    <tr><td>INV-003</td><td><span class=\"mn-badge mn-badge-soft mn-danger\">Overdue</span></td><td>PayPal</td><td class=\"mn-num\">€350.00</td></tr>\n    <tr><td>INV-004</td><td><span class=\"mn-badge mn-badge-soft mn-success\">Paid</span></td><td>Card</td><td class=\"mn-num\">€450.00</td></tr>\n  </tbody>\n  <tfoot><tr><td colspan=\"3\">Total</td><td class=\"mn-num\">€1,200.00</td></tr></tfoot>\n</table>\n</div>\n\n<!-- Striped and compact -->\n<div class=\"mn-table-wrap\">\n<table class=\"mn-table mn-table-striped mn-table-compact\">\n  <thead><tr><th scope=\"col\">Noodle</th><th scope=\"col\">Origin</th><th scope=\"col\">Radius</th></tr></thead>\n  <tbody><tr><td>Udon</td><td>Japan</td><td>12px</td></tr><tr><td>Pho</td><td>Vietnam</td><td>8px</td></tr><tr><td>Mee</td><td>Malaysia</td><td>pill</td></tr><tr><td>Shirataki</td><td>Japan</td><td>0</td></tr></tbody>\n</table>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/table",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-table-wrap",
        "mn-table",
        "mn-table-hover · mn-table-striped · mn-table-compact",
        "mn-num",
        "th[aria-sort] > button"
      ],
      "accessibility": [
        "Use real <th scope> headers and a <caption>. Sort state is exposed through aria-sort on the header."
      ],
      "intents": [
        "data table",
        "sortable table",
        "admin table",
        "transactions list",
        "comparison table",
        "dense data"
      ]
    }
  }
}