{
    "component": "table",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "rows": [
                    [
                        {
                            "text": "January"
                        },
                        {
                            "text": "£85",
                            "format": "numeric"
                        },
                        {
                            "text": "£95",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "February"
                        },
                        {
                            "text": "£75",
                            "format": "numeric"
                        },
                        {
                            "text": "£55",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "March"
                        },
                        {
                            "text": "£165",
                            "format": "numeric"
                        },
                        {
                            "text": "£125",
                            "format": "numeric"
                        }
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">January</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">February</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">March</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "table with head",
            "options": {
                "head": [
                    {
                        "text": "Month you apply"
                    },
                    {
                        "text": "Rate for bicycles",
                        "format": "numeric"
                    },
                    {
                        "text": "Rate for vehicles",
                        "format": "numeric"
                    }
                ],
                "rows": [
                    [
                        {
                            "text": "January"
                        },
                        {
                            "text": "£85",
                            "format": "numeric"
                        },
                        {
                            "text": "£95",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "February"
                        },
                        {
                            "text": "£75",
                            "format": "numeric"
                        },
                        {
                            "text": "£55",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "March"
                        },
                        {
                            "text": "£165",
                            "format": "numeric"
                        },
                        {
                            "text": "£125",
                            "format": "numeric"
                        }
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">January</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">February</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">March</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "table with head and caption",
            "options": {
                "caption": "Caption 1: Months and rates",
                "captionClasses": "govuk-table__caption--m",
                "firstCellIsHeader": true,
                "head": [
                    {
                        "text": "Month you apply"
                    },
                    {
                        "text": "Rate for bicycles",
                        "format": "numeric"
                    },
                    {
                        "text": "Rate for vehicles",
                        "format": "numeric"
                    }
                ],
                "rows": [
                    [
                        {
                            "text": "January"
                        },
                        {
                            "text": "£85",
                            "format": "numeric"
                        },
                        {
                            "text": "£95",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "February"
                        },
                        {
                            "text": "£75",
                            "format": "numeric"
                        },
                        {
                            "text": "£55",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "March"
                        },
                        {
                            "text": "£165",
                            "format": "numeric"
                        },
                        {
                            "text": "£125",
                            "format": "numeric"
                        }
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <caption class=\"govuk-table__caption govuk-table__caption--m\">Caption 1: Months and rates</caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">January</th>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">February</th>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">March</th>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "with small text modifier for tables with a lot of data",
            "options": {
                "classes": "govuk-table--small-text-until-tablet",
                "rows": [
                    [
                        {
                            "text": "January"
                        },
                        {
                            "text": "£85",
                            "format": "numeric"
                        },
                        {
                            "text": "£95",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "February"
                        },
                        {
                            "text": "£75",
                            "format": "numeric"
                        },
                        {
                            "text": "£55",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "March"
                        },
                        {
                            "text": "£165",
                            "format": "numeric"
                        },
                        {
                            "text": "£125",
                            "format": "numeric"
                        }
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table govuk-table--small-text-until-tablet\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">January</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">February</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">March</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "classes",
            "options": {
                "classes": "custom-class-goes-here",
                "rows": [
                    [
                        {
                            "text": "Jan"
                        },
                        {
                            "text": "Feb"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table custom-class-goes-here\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Jan</td>\n      <td class=\"govuk-table__cell\">Feb</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "attributes",
            "options": {
                "attributes": {
                    "data-foo": "bar"
                },
                "rows": [
                    [
                        {
                            "text": "Jan"
                        },
                        {
                            "text": "Feb"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Jan</td>\n      <td class=\"govuk-table__cell\">Feb</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "html as text",
            "options": {
                "head": [
                    {
                        "text": "Foo <script>hacking.do(1337)</script>"
                    }
                ],
                "rows": [
                    [
                        {
                            "text": "Foo <script>hacking.do(1337)</script>"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "html",
            "options": {
                "head": [
                    {
                        "html": "Foo <span>bar</span>"
                    }
                ],
                "rows": [
                    [
                        {
                            "html": "Foo <span>bar</span>"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Foo <span>bar</span></td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "head with classes",
            "options": {
                "head": [
                    {
                        "text": "Foo",
                        "classes": "my-custom-class"
                    }
                ],
                "rows": [
                    [
                        {
                            "text": "Jan"
                        },
                        {
                            "text": "Feb"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Jan</td>\n      <td class=\"govuk-table__cell\">Feb</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "head with rowspan and colspan",
            "options": {
                "head": [
                    {
                        "text": "Foo",
                        "rowspan": 2,
                        "colspan": 2
                    }
                ],
                "rows": [
                    [
                        {
                            "text": "Jan"
                        },
                        {
                            "text": "Feb"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Jan</td>\n      <td class=\"govuk-table__cell\">Feb</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "head with attributes",
            "options": {
                "head": [
                    {
                        "text": "Foo",
                        "attributes": {
                            "data-fizz": "buzz"
                        }
                    }
                ],
                "rows": [
                    [
                        {
                            "text": "Jan"
                        },
                        {
                            "text": "Feb"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\">Foo</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Jan</td>\n      <td class=\"govuk-table__cell\">Feb</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "with firstCellIsHeader true",
            "options": {
                "firstCellIsHeader": true,
                "rows": [
                    [
                        {
                            "text": "January"
                        },
                        {
                            "text": "£85",
                            "format": "numeric"
                        },
                        {
                            "text": "£95",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "February"
                        },
                        {
                            "text": "£75",
                            "format": "numeric"
                        },
                        {
                            "text": "£55",
                            "format": "numeric"
                        }
                    ],
                    [
                        {
                            "text": "March"
                        },
                        {
                            "text": "£165",
                            "format": "numeric"
                        },
                        {
                            "text": "£125",
                            "format": "numeric"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">January</th>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">February</th>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">March</th>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "firstCellIsHeader with classes",
            "options": {
                "firstCellIsHeader": true,
                "rows": [
                    [
                        {
                            "text": "Foo",
                            "classes": "my-custom-class"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header my-custom-class\">Foo</th>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "firstCellIsHeader with html",
            "options": {
                "firstCellIsHeader": true,
                "rows": [
                    [
                        {
                            "html": "Foo <span>bar</span>"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "firstCellIsHeader with html as text",
            "options": {
                "firstCellIsHeader": true,
                "rows": [
                    [
                        {
                            "text": "Foo <script>hacking.do(1337)</script>"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "firstCellIsHeader with rowspan and colspan",
            "options": {
                "firstCellIsHeader": true,
                "rows": [
                    [
                        {
                            "text": "Foo",
                            "rowspan": 2,
                            "colspan": 2
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "firstCellIsHeader with attributes",
            "options": {
                "firstCellIsHeader": true,
                "rows": [
                    [
                        {
                            "text": "Foo",
                            "attributes": {
                                "data-fizz": "buzz"
                            }
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"row\" class=\"govuk-table__header\" data-fizz=\"buzz\">Foo</th>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "with falsey items",
            "options": {
                "rows": [
                    [
                        {
                            "text": "A"
                        },
                        {
                            "text": 1
                        }
                    ],
                    false,
                    null,
                    [
                        {
                            "text": "B"
                        },
                        {
                            "text": 2
                        }
                    ],
                    [
                        {
                            "text": "C"
                        },
                        {
                            "text": 3
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">A</td>\n      <td class=\"govuk-table__cell\">1</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">B</td>\n      <td class=\"govuk-table__cell\">2</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">C</td>\n      <td class=\"govuk-table__cell\">3</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "rows with classes",
            "options": {
                "rows": [
                    [
                        {
                            "text": "Foo",
                            "classes": "my-custom-class"
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell my-custom-class\">Foo</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "rows with rowspan and colspan",
            "options": {
                "rows": [
                    [
                        {
                            "text": "Foo",
                            "rowspan": 2,
                            "colspan": 2
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\" colspan=\"2\" rowspan=\"2\">Foo</td>\n    </tr>\n  </tbody>\n</table>"
        },
        {
            "name": "rows with attributes",
            "options": {
                "rows": [
                    [
                        {
                            "text": "Foo",
                            "attributes": {
                                "data-fizz": "buzz"
                            }
                        }
                    ]
                ]
            },
            "hidden": true,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\" data-fizz=\"buzz\">Foo</td>\n    </tr>\n  </tbody>\n</table>"
        }
    ]
}