{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-datatable",
  "description": "Data table component",
  "docUrl": "https://design.soracom.io/design-system/elements/datatable/",
  "category": "elements",
  "htmlElements": [
    "table",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--embedded",
        "--feature",
        "--cards",
        "--spreadsheet",
        "--plain"
      ]
    },
    "state": {
      "support": "custom",
      "values": [
        "--stick-header",
        "--striped",
        "--pin-first",
        "--lazy",
        "--loading",
        "--loading-refresh",
        "--selected"
      ]
    },
    "size": {
      "support": "custom",
      "values": [
        "--small",
        "--xsmall",
        "--compact",
        "--condensed"
      ]
    },
    "utility": {
      "support": "custom",
      "values": [
        "--first-min",
        "--solid",
        "--clickable",
        "--selectable",
        "--highlight",
        "--mark",
        "--max",
        "--min",
        "--left",
        "--right",
        "--center",
        "--nowrap",
        "--no-wrap",
        "--wrap",
        "--column",
        "--dashed"
      ]
    },
    "visual-state": {
      "support": "all"
    },
    "icon": {
      "support": "all"
    }
  },
  "structure": {
    "parts": {
      "table": {
        "element": "table",
        "required": true
      },
      "caption": {
        "element": "caption",
        "optional": true,
        "position": [
          "first"
        ]
      },
      "head": {
        "element": "thead",
        "optional": true,
        "position": [
          "before body"
        ]
      },
      "body": {
        "element": "tbody",
        "required": true
      },
      "foot": {
        "element": "tfoot",
        "optional": true,
        "position": [
          "last"
        ]
      },
      "row": {
        "element": "tr",
        "required": true,
        "repeatable": true
      },
      "headerCell": {
        "element": "th",
        "optional": true,
        "repeatable": true
      },
      "cell": {
        "element": "td",
        "required": true,
        "repeatable": true
      }
    },
    "patterns": {
      "table": "<table class=\"ds-datatable\"><thead><tr><th>{heading}</th></tr></thead><tbody><tr><td>{value}</td></tr></tbody></table>",
      "wrapper": "<div class=\"ds-datatable\"><table><thead><tr><th>{heading}</th></tr></thead><tbody><tr><td>{value}</td></tr></tbody></table></div>",
      "responsive": "<table class=\"ds-datatable\"><thead data-label><tr><th>{heading}</th></tr></thead><tbody><tr data-label><td data-label=\"{heading}\">{value}</td></tr></tbody></table>"
    }
  },
  "attributes": {},
  "dataAttributes": [
    {
      "name": "data-label",
      "description": "Enables the responsive stacked layout when present on thead and tbody rows; on cells, its text becomes the mobile column label.",
      "valueType": "string"
    },
    {
      "name": "data-ds-message",
      "description": "Message text that hides the table contents and renders the SDS message state.",
      "valueType": "string"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<table class=\"ds-datatable\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr><tr><td>Item 2</td><td>Inactive</td><td>2024-01-02</td></tr></tbody></table>"
    },
    {
      "name": "embedded",
      "html": "<table class=\"ds-datatable --embedded\"><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>Setting A</td><td>Enabled</td></tr><tr><td>Setting B</td><td>Disabled</td></tr></tbody></table>"
    },
    {
      "name": "striped",
      "html": "<table class=\"ds-datatable --striped\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr><tr><td>Item 2</td><td>Inactive</td><td>2024-01-02</td></tr><tr><td>Item 3</td><td>Active</td><td>2024-01-03</td></tr></tbody></table>"
    },
    {
      "name": "sticky-header",
      "html": "<table class=\"ds-datatable --stick-header\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr><tr><td>Item 2</td><td>Inactive</td><td>2024-01-02</td></tr></tbody></table>"
    },
    {
      "name": "sticky-thead",
      "html": "<div class=\"--20-h\"><table class=\"ds-datatable\"><thead class=\"--sticky\"><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr><tr><td>Item 2</td><td>Inactive</td><td>2024-01-02</td></tr><tr><td>Item 3</td><td>Active</td><td>2024-01-03</td></tr><tr><td>Item 4</td><td>Inactive</td><td>2024-01-04</td></tr></tbody></table></div>"
    },
    {
      "name": "with-caption",
      "html": "<table class=\"ds-datatable\"><caption>Data Summary</caption><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>Total</td><td>100</td></tr><tr><td>Average</td><td>50</td></tr></tbody></table>"
    },
    {
      "name": "feature",
      "html": "<table class=\"ds-datatable --feature\"><thead><tr><th>Plan</th><th>Price</th><th>Features</th></tr></thead><tbody><tr><td>Basic</td><td>$10</td><td>5 users</td></tr><tr><td>Pro</td><td>$25</td><td>25 users</td></tr></tbody></table>"
    },
    {
      "name": "compact",
      "html": "<table class=\"ds-datatable --compact\"><thead><tr><th>ID</th><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>1</td><td>Item A</td><td>100</td></tr><tr><td>2</td><td>Item B</td><td>200</td></tr></tbody></table>"
    },
    {
      "name": "condensed",
      "html": "<table class=\"ds-datatable --condensed\"><thead><tr><th>ID</th><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>1</td><td>Item A</td><td>100</td></tr><tr><td>2</td><td>Item B</td><td>200</td></tr></tbody></table>"
    },
    {
      "name": "plain",
      "html": "<table class=\"ds-datatable --plain\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr><tr><td>Item 2</td><td>Inactive</td><td>2024-01-02</td></tr></tbody></table>"
    },
    {
      "name": "loading",
      "html": "<table class=\"ds-datatable --loading\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr></tbody></table>"
    },
    {
      "name": "loading-refresh",
      "html": "<table class=\"ds-datatable --loading-refresh\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr></tbody></table>"
    },
    {
      "name": "with-message",
      "html": "<table class=\"ds-datatable\" data-ds-message=\"No items found\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td colspan=\"999\"></td></tr></tbody></table>"
    },
    {
      "name": "clickable",
      "html": "<table class=\"ds-datatable\"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr class=\"--clickable\"><td>Clickable Row 1</td><td>Active</td></tr><tr class=\"--clickable\"><td>Clickable Row 2</td><td>Inactive</td></tr></tbody></table>"
    },
    {
      "name": "selectable",
      "html": "<table class=\"ds-datatable\"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr class=\"--selectable --selected\"><td>Selected Row</td><td>Active</td></tr><tr class=\"--selectable\"><td>Unselected Row</td><td>Inactive</td></tr></tbody></table>"
    },
    {
      "name": "spreadsheet",
      "html": "<table class=\"ds-datatable --spreadsheet\"><thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr></tbody></table>"
    },
    {
      "name": "pin-first",
      "html": "<div class=\"--20-h\"><table class=\"ds-datatable --embedded --pin-first\"><thead class=\"--sticky\"><tr><th>Pinned</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th></tr></thead><tbody><tr><td>Fixed</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr></tbody></table></div>"
    },
    {
      "name": "responsive",
      "html": "<table class=\"ds-datatable\"><thead data-label><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr data-label><td data-label=\"Name\">Item 1</td><td data-label=\"Status\">Active</td><td data-label=\"Date\">2024-01-01</td></tr><tr data-label><td data-label=\"Name\">Item 2</td><td data-label=\"Status\">Inactive</td><td data-label=\"Date\">2024-01-02</td></tr></tbody></table>"
    },
    {
      "name": "sortable-headers",
      "html": "<table class=\"ds-datatable\"><thead><tr><th><button class=\"ds-button --label\"><span>Unsorted</span><i class=\"ds-icon --tiny --icon-arrows-top-bottom\"></i></button></th><th><button class=\"ds-button --label\"><span>Ascending</span><i class=\"ds-icon --tiny --icon-arrow-bottom\"></i></button></th><th><button class=\"ds-button --label\"><span>Descending</span><i class=\"ds-icon --tiny --icon-arrow-top\"></i></button></th></tr></thead><tbody><tr><td>A</td><td>1</td><td>X</td></tr><tr><td>B</td><td>2</td><td>Y</td></tr></tbody></table>"
    },
    {
      "name": "with-tfoot",
      "html": "<table class=\"ds-datatable\"><thead><tr><th>Item</th><th>Qty</th><th>Price</th></tr></thead><tbody><tr><td>Widget A</td><td>10</td><td>$100</td></tr><tr><td>Widget B</td><td>5</td><td>$75</td></tr></tbody><tfoot><tr><td>Total</td><td>15</td><td>$175</td></tr></tfoot></table>"
    },
    {
      "name": "cards",
      "html": "<table class=\"ds-datatable --cards\"><thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody><tr><td>Item 1</td><td>Active</td><td>2024-01-01</td></tr><tr><td>Item 2</td><td>Inactive</td><td>2024-01-02</td></tr></tbody></table>"
    }
  ]
}