{
  "name": "Table",
  "category": "Data Display",
  "subcategory": "Tables",
  "description": "Minimal styled HTML table with header, row, cell components.",
  "thumbnail": "/preview-cards/table.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Table/Table.razor",
    "UI/Table/TableBody.razor",
    "UI/Table/TableCaption.razor",
    "UI/Table/TableCell.razor",
    "UI/Table/TableHead.razor",
    "UI/Table/TableHeader.razor",
    "UI/Table/TableRow.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-muted",
    "--color-muted-foreground"
  ],
  "api": {
    "name": "Table",
    "category": "Data Display",
    "subcategory": "Tables",
    "description": "Minimal styled HTML table with header, row, cell components.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Table/Table.razor",
      "UI/Table/TableBody.razor",
      "UI/Table/TableCaption.razor",
      "UI/Table/TableCell.razor",
      "UI/Table/TableHead.razor",
      "UI/Table/TableHeader.razor",
      "UI/Table/TableRow.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-muted",
      "--color-muted-foreground"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Table>\n    <TableCaption>A list of recent invoices.</TableCaption>\n    <TableHeader>\n        <TableRow>\n            <TableHead>Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead Class=\"text-right\">Amount</TableHead>\n        </TableRow>\n    </TableHeader>\n    <TableBody>\n        @foreach (var invoice in _invoices)\n        {\n            <TableRow>\n                <TableCell Class=\"font-medium\">@invoice.Id</TableCell>\n                <TableCell>@invoice.Status</TableCell>\n                <TableCell>@invoice.Method</TableCell>\n                <TableCell Class=\"text-right\">@invoice.Amount</TableCell>\n            </TableRow>\n        }\n    </TableBody>\n</Table>"
      },
      {
        "title": "Simple Table",
        "code": "<Table>\n    <TableHeader>\n        <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Role</TableHead>\n            <TableHead>Department</TableHead>\n        </TableRow>\n    </TableHeader>\n    <TableBody>\n        <TableRow>\n            <TableCell Class=\"font-medium\">Alice Johnson</TableCell>\n            <TableCell>Engineer</TableCell>\n            <TableCell>Engineering</TableCell>\n        </TableRow>\n        <TableRow>\n            <TableCell Class=\"font-medium\">Bob Smith</TableCell>\n            <TableCell>Designer</TableCell>\n            <TableCell>Product</TableCell>\n        </TableRow>\n    </TableBody>\n</Table>"
      },
      {
        "title": "Table with Status Badges",
        "code": "<Table>\n    <TableHeader>\n        <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Priority</TableHead>\n            <TableHead>Status</TableHead>\n        </TableRow>\n    </TableHeader>\n    <TableBody>\n        @foreach (var task in _tasks)\n        {\n            <TableRow>\n                <TableCell Class=\"font-medium\">@task.Name</TableCell>\n                <TableCell>@task.Assignee</TableCell>\n                <TableCell><Badge Variant=\"@task.PriorityVariant\">@task.Priority</Badge></TableCell>\n                <TableCell><Badge Variant=\"@task.StatusVariant\">@task.Status</Badge></TableCell>\n            </TableRow>\n        }\n    </TableBody>\n</Table>"
      },
      {
        "title": "Table with Pagination",
        "code": "<Table>\n    <TableHeader>\n        <TableRow>\n            <TableHead>Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead Class=\"text-right\">Amount</TableHead>\n        </TableRow>\n    </TableHeader>\n    <TableBody>\n        @foreach (var invoice in _invoices.Skip(_pageStart).Take(_pageSize))\n        {\n            <TableRow>\n                <TableCell Class=\"font-medium\">@invoice.Id</TableCell>\n                <TableCell>@invoice.Status</TableCell>\n                <TableCell>@invoice.Method</TableCell>\n                <TableCell Class=\"text-right\">@invoice.Amount</TableCell>\n            </TableRow>\n        }\n    </TableBody>\n</Table>\n<Flex Align=\"center\" Justify=\"end\" Gap=\"2\" Class=\"mt-4\">\n    <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\"\n            Disabled=\"@(_tablePage <= 1)\" OnClick=\"@(() => GoTablePage(_tablePage - 1))\">\n        <DynamicIcon Name=\"ChevronLeft\" Class=\"h-4 w-4\" /> Previous\n    </Button>\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Page @_tablePage of @_tablePages</Lumeo.Text>\n    <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\"\n            Disabled=\"@(_tablePage >= _tablePages)\" OnClick=\"@(() => GoTablePage(_tablePage + 1))\">\n        Next <DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4\" />\n    </Button>\n</Flex>"
      }
    ],
    "subComponents": {
      "TableBody": {
        "componentName": "TableBody",
        "fileName": "TableBody.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "TableCaption": {
        "componentName": "TableCaption",
        "fileName": "TableCaption.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "TableCell": {
        "componentName": "TableCell",
        "fileName": "TableCell.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "TableHead": {
        "componentName": "TableHead",
        "fileName": "TableHead.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "TableHeader": {
        "componentName": "TableHeader",
        "fileName": "TableHeader.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "TableRow": {
        "componentName": "TableRow",
        "fileName": "TableRow.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "table",
  "docsUrl": "https://lumeo.nativ.sh/components/table",
  "sourceUrl": [
    {
      "file": "UI/Table/Table.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/Table.razor"
    },
    {
      "file": "UI/Table/TableBody.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/TableBody.razor"
    },
    {
      "file": "UI/Table/TableCaption.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/TableCaption.razor"
    },
    {
      "file": "UI/Table/TableCell.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/TableCell.razor"
    },
    {
      "file": "UI/Table/TableHead.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/TableHead.razor"
    },
    {
      "file": "UI/Table/TableHeader.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/TableHeader.razor"
    },
    {
      "file": "UI/Table/TableRow.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Table/TableRow.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Table/Table.razor",
      "content": "@namespace Lumeo\n\n<div class=\"relative w-full overflow-auto\">\n    <table class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </table>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"w-full caption-bottom text-sm {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Table/TableBody.razor",
      "content": "@namespace Lumeo\n\n<tbody class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</tbody>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"[&_tr:last-child]:border-0 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Table/TableCaption.razor",
      "content": "@namespace Lumeo\n\n<caption class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</caption>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"mt-4 text-sm text-muted-foreground {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Table/TableCell.razor",
      "content": "@namespace Lumeo\n\n<td class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</td>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Table/TableHead.razor",
      "content": "@namespace Lumeo\n\n<th class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</th>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Table/TableHeader.razor",
      "content": "@namespace Lumeo\n\n<thead class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</thead>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"[&_tr]:border-b [&_tr]:border-border/40 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Table/TableRow.razor",
      "content": "@namespace Lumeo\n\n<tr class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</tr>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"border-b border-border/40 transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Table",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "TableBody",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "TableCaption",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "TableCell",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "TableHead",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "TableHeader",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "TableRow",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "TableBody",
      "reason": "sub-component"
    },
    {
      "name": "TableCaption",
      "reason": "sub-component"
    },
    {
      "name": "TableCell",
      "reason": "sub-component"
    },
    {
      "name": "TableHead",
      "reason": "sub-component"
    },
    {
      "name": "TableHeader",
      "reason": "sub-component"
    },
    {
      "name": "TableRow",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Docs.Tests/Catalog/CatalogPageTests.cs",
    "tests/Lumeo.Docs.Tests/Services/RegistryServiceTests.cs",
    "tests/Lumeo.Tests/Components/DataTable/DataTableTests.cs",
    "tests/Lumeo.Tests/Components/Table/TableTests.cs"
  ],
  "mdSummary": "# Table\n\nMinimal styled HTML table with header, row, cell components.\n\n**Package:** `Lumeo` · **Category:** Data Display/Tables\n**Docs:** https://lumeo.nativ.sh/components/table\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Table | ChildContent | `RenderFragment?` | `` |  |\n| Table | Class | `string?` | `` |  |\n| Table | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| TableBody | ChildContent | `RenderFragment?` | `` |  |\n| TableBody | Class | `string?` | `` |  |\n| TableBody | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| TableCaption | ChildContent | `RenderFragment?` | `` |  |\n| TableCaption | Class | `string?` | `` |  |\n| TableCaption | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| TableCell | ChildContent | `RenderFragment?` | `` |  |\n| TableCell | Class | `string?` | `` |  |\n| TableCell | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| TableHead | ChildContent | `RenderFragment?` | `` |  |\n| TableHead | Class | `string?` | `` |  |\n| TableHead | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| TableHeader | ChildContent | `RenderFragment?` | `` |  |\n| TableHeader | Class | `string?` | `` |  |\n| TableHeader | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| TableRow | ChildContent | `RenderFragment?` | `` |  |\n| TableRow | Class | `string?` | `` |  |\n| TableRow | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Table) — RenderFragment slot\n- `ChildContent` (TableBody) — RenderFragment slot\n- `ChildContent` (TableCaption) — RenderFragment slot\n- `ChildContent` (TableCell) — RenderFragment slot\n- `ChildContent` (TableHead) — RenderFragment slot\n- `ChildContent` (TableHeader) — RenderFragment slot\n- `ChildContent` (TableRow) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `TableBody`, `TableCaption`, `TableCell`, `TableHead`, `TableHeader`, `TableRow`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Table />\n```\n\n## CSS variables\n`--color-border`, `--color-muted`, `--color-muted-foreground`\n\n## Files\n- `UI/Table/Table.razor`\n- `UI/Table/TableBody.razor`\n- `UI/Table/TableCaption.razor`\n- `UI/Table/TableCell.razor`\n- `UI/Table/TableHead.razor`\n- `UI/Table/TableHeader.razor`\n- `UI/Table/TableRow.razor`\n"
}