{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "table",
    "type": "registry:component",
    "title": "Table",
    "description": "Data table with a sticky-style header, row hover and right-aligned numeric columns. Wrap it to scroll on narrow screens.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Data display",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/table.html",
            "type": "registry:file",
            "target": "components/table.html",
            "content": "<!-- Table\n     Wrap the table in .dp-table-wrap so it scrolls on narrow screens.\n     Use data-align=\"end\" on numeric cells and data-sortable on headers. -->\n\n<div class=\"dp-table-wrap\">\n  <table class=\"dp-table\">\n    <thead>\n      <tr>\n        <th data-sortable>\n          Domain\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"m7 15 5 5 5-5\"></path><path d=\"m7 9 5-5 5 5\"></path>\n          </svg>\n        </th>\n        <th>Country</th>\n        <th data-align=\"end\">Pages</th>\n        <th data-align=\"end\">Visits</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>example.com</td>\n        <td>United States</td>\n        <td data-align=\"end\">1.204</td>\n        <td data-align=\"end\">98.430</td>\n      </tr>\n      <tr>\n        <td>dataprovider.nl</td>\n        <td>Netherlands</td>\n        <td data-align=\"end\">312</td>\n        <td data-align=\"end\">24.108</td>\n      </tr>\n      <tr>\n        <td>acme.io</td>\n        <td>Germany</td>\n        <td data-align=\"end\">87</td>\n        <td data-align=\"end\">5.642</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n"
        },
        {
            "path": "components/table.css",
            "type": "registry:file",
            "target": "components/table.css",
            "content": "/* Table\n   A data table in the console style. Wrap in .dp-table-wrap for horizontal\n   scroll on narrow screens. All colour and type come from tokens.css. */\n\n.dp-table-wrap {\n  width: 100%;\n  overflow-x: auto;\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-lg);\n  background: var(--dp-surface);\n}\n\n.dp-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text);\n}\n\n.dp-table thead th {\n  text-align: left;\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-text-muted);\n  background: var(--dp-surface-subtle);\n  padding: var(--dp-space-3) var(--dp-space-4);\n  border-bottom: 1px solid var(--dp-border);\n  white-space: nowrap;\n}\n\n.dp-table tbody td {\n  padding: var(--dp-space-3) var(--dp-space-4);\n  border-bottom: 1px solid var(--dp-border);\n}\n\n.dp-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n\n.dp-table tbody tr:hover {\n  background: var(--dp-surface-subtle);\n}\n\n/* Numeric columns align right */\n.dp-table [data-align=\"end\"] {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Sortable header */\n.dp-table th[data-sortable] {\n  cursor: pointer;\n}\n\n.dp-table th[data-sortable]:hover {\n  color: var(--dp-navy);\n}\n\n.dp-table th[data-sortable] svg {\n  width: 0.875em;\n  height: 0.875em;\n  vertical-align: -2px;\n  opacity: 0.6;\n}\n"
        }
    ]
}