Add guidance for tables with lots of data

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "accessible-autocomplete": "^2.0.4",
     "clipboard": "^2.0.11",
-    "govuk-frontend": "^5.0.0",
+    "govuk-frontend": "github:alphagov/govuk-frontend#729155478",
     "iframe-resizer": "^4.3.9",
     "lunr": "^2.3.9"
   },

src/components/table/index.md

@@ -56,3 +56,13 @@ If the [width override classes](/styles/layout/#width-override-classes) do not m
 To learn more about this, read guidance on [extending and modifying components in production](/get-started/extending-and-modifying-components/).
 
 {{ example({ group: "components", item: "table", example: "column-widths-custom-classes", html: true, nunjucks: true, open: false, size: "m" }) }}
+
+## Tables with a lot of data
+
+If possible, you should aim to have less data in your tables. If you have a lot of data, try to organise it into multiple tables or mulltiple pages.
+
+If you can't split your data, you can use the CSS class `govuk-table--small-text-until-tablet`. This class reduces the size of the text on small screens so that the large amount of data is easier to read on smaller screens.
+
+You should not use this class on tables unless your table has a lot of data.
+
+{{ example({ group: "components", item: "table", example: "lots-of-data", html: true, nunjucks: true, open: false, size: "m" }) }}

src/components/table/lots-of-data/index.njk

@@ -0,0 +1,81 @@
+---
+title: Lots of data – Table
+layout: layout-example.njk
+---
+
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
+  caption: "Dates and amounts",
+  captionClasses: "govuk-table__caption--m",
+  firstCellIsHeader: true,
+  classes: "govuk-table--small-text-until-tablet",
+  head: [
+    {
+      text: "Date"
+    },
+    {
+      text: "First amount"
+    },
+    {
+      text: "Second amount"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "First 3 weeks"
+      },
+      {
+        text: "£27.45 per week"
+      },
+      {
+        text: "£33.90 per week"
+      }
+    ],
+    [
+      {
+        text: "Next 6 weeks"
+      },
+      {
+        text: "£27.45 per week"
+      },
+      {
+        text: "£33.90 per week"
+      }
+    ],
+    [
+      {
+        text: "Next 24 weeks"
+      },
+      {
+        text: "£27.45 per week"
+      },
+      {
+        text: "£33.90 per week"
+      }
+    ],
+    [
+      {
+        text: "Next 33 weeks"
+      },
+      {
+        text: "£27.45 per week"
+      },
+      {
+        text: "£33.90 per week"
+      }
+    ],
+    [
+      {
+        text: "Total estimated pay"
+      },
+      {
+        text: "£4,282.20"
+      },
+      {
+        text: "£5,288.40"
+      }
+    ]
+  ]
+}) }}