{
  "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": [
      "--embedded",
      "--feature",
      "--cards",
      "--spreadsheet",
      "--plain"
    ],
    "state": [
      "--stick-header",
      "--striped",
      "--pin-first",
      "--lazy",
      "--loading",
      "--loading-refresh"
    ],
    "size": [
      "--small",
      "--xsmall",
      "--compact",
      "--condensed"
    ],
    "special": [
      "--first-min",
      "--solid",
      "--clickable",
      "--selectable",
      "--highlight",
      "--mark"
    ],
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "indent": "all",
    "icon": "all"
  },
  "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>"
    }
  ]
}