From 44041ad8431b90f4d16e3adf20750c7ee36bb037 Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Mon, 28 Aug 2023 11:29:34 +1000
Subject: [PATCH 1/2] fix(@dpc-sdp/ripple-ui-core): :bug: check for label

---
 .../components/data-table/RplDataTableRow.vue   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
index 1950e8725e..7516c48afc 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -67,6 +67,12 @@ const handleClick = () => {
 
   state.enabled = !state.enabled
 }
+
+const hasComponent = (r: any) =>
+  typeof r === 'object' && r.hasOwnProperty('component')
+
+const parseLabel = (r: any) =>
+  typeof r === 'object' && r.hasOwnProperty('label') ? r.label : r
 </script>
 
 <template>
@@ -76,16 +82,9 @@ const handleClick = () => {
         :is="i === 0 && verticalHeader ? 'th' : 'td'"
         v-for="(item, i) of items"
         :key="i"
-        :data-label="
-          typeof columns[i] === 'string' ? columns[i] : (columns[i] as tableColumnConfig).label
-        "
+        :data-label="parseLabel(columns[i])"
       >
-        <template
-          v-if="
-            typeof columns[i] === 'object' &&
-            columns[i].hasOwnProperty('component')
-          "
-        >
+        <template v-if="hasComponent(columns[i])">
           <component
             :is="(columns[i] as tableColumnConfig).component"
             :item="item"

From f764919099a61c9ef92e14ab7804a4d6de9deef1 Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Mon, 28 Aug 2023 16:06:16 +1000
Subject: [PATCH 2/2] test(nuxt-app): :white_check_mark: update data table test

---
 .../test/features/landingpage/home.feature    | 140 ----------------
 .../landingpage/page-components.feature       | 158 ++++++++++++++++++
 .../test/fixtures/landingpage/home.json       |  75 +++++----
 .../step_definitions/components/data-table.ts |  33 +++-
 .../components/data-table/RplDataTable.vue    |   2 +-
 5 files changed, 229 insertions(+), 179 deletions(-)
 create mode 100644 examples/nuxt-app/test/features/landingpage/page-components.feature

diff --git a/examples/nuxt-app/test/features/landingpage/home.feature b/examples/nuxt-app/test/features/landingpage/home.feature
index a32ac8eb3e..f76236fd26 100644
--- a/examples/nuxt-app/test/features/landingpage/home.feature
+++ b/examples/nuxt-app/test/features/landingpage/home.feature
@@ -59,143 +59,3 @@ Feature: Home page
     Given the page endpoint for path "/search/cats" returns fixture "/landingpage/home" with status 200
     Then a search banner with ID "1911" should exist with the placeholder "Test search placeholder"
     Then in a search banner with ID "1911", searching for "cats" should take me to "/search/cats"
-
-  @mockserver
-  Scenario: Page component - Basic text
-    Then a wysiwyg content area with ID "969" should exist with the content "Here is some sample rich text content"
-
-  @mockserver
-  Scenario: Page component - Accordion
-    Then an accordion with ID "972" should exist with title "Test accordion title" and have the following accordion items
-      | title        | content                   |
-      | Accordion #1 | Test rich text content #1 |
-      | Accordion #2 | Test rich text content #2 |
-
-  @mockserver
-  Scenario: Page component - Accordion (Open/close all)
-    When I click the open all button on accordion with ID "accordion-972"
-    Then all accordion items in accordion ID "accordion-972" should be visible
-
-    When I click the close all button on accordion with ID "accordion-972"
-    Then all accordion items in accordion ID "accordion-972" should be hidden
-
-  @mockserver
-  Scenario: Page component - Promo card
-    Then a promo card with ID "976" should exist with the following properties
-      | displayStyle | title                | content            | image |
-      | noImage      | Promo card (noImage) | Sample description |       |
-
-    Then a promo card with ID "977" should exist with the following properties
-      | displayStyle | title                  | content            | image                                                                                                     |
-      | thumbnail    | Promo card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
-
-    Then a promo card with ID "978" should exist with the following properties
-      | displayStyle | title                | content            | image                                                                                                     |
-      | profile      | Promo card (profile) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
-
-  @mockserver
-  Scenario: Page component - Nav card
-    Then a nav card with ID "981" should exist with the following properties
-      | displayStyle | title              | content            | image |
-      | noImage      | Nav card (noImage) | Sample description |       |
-
-    Then a nav card with ID "982" should exist with the following properties
-      | displayStyle | title                | content            | image                                                                                                     |
-      | thumbnail    | Nav card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
-
-    Then a nav card with ID "983" should exist with the following properties
-      | displayStyle | title               | content            | image                                                                                                     |
-      | featured     | Nav card (featured) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
-
-
-  @mockserver
-  Scenario: Page component - Key dates card
-    Then a key dates card with ID "988" should exist with the title "Key calendar dates"
-    Then a key dates card with ID "988" should exist with the following dates
-      | title         | date              | summary                  |
-      | An event      | 12th October 2022 | Summary of an event      |
-      | Another event | 13th October 2022 | Summary of another event |
-    Then a key dates card with ID "988" should exist with cta text "Test CTA text" and link to "/test-cta-link"
-
-  @mockserver
-  Scenario: Page component - Timeline
-    Then a timeline with ID "992" should exist with the title "Test timeline title"
-    Then a timeline with ID "992" should exist with the following items
-      | title             | date                     | summary                   | url                 | image                                                                                                                  |
-      | Milestone 1 title | 2 June to 11 November    | Milestone 1 summary field | /test-destination-1 | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg |
-      | Milestone 2 title | 4 October to 17 November | Milestone 2 summary field | /test-destination-2 |                                                                                                                        |
-      | Milestone 3 title |                          | Milestone 3 text          |                     |                                                                                                                        |
-
-  @mockserver
-  Scenario: Page component - Call to action
-    Then a call to action with ID "1024" should exist with the following properties
-      | title                     | summary                 | ctaText       | image                                                                                                                         |
-      | Test call to action title | This is the description | Test CTA text | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Two-men-working-in-hi-vis-clothing.jpg |
-
-  @mockserver
-  Scenario: Page component - Stats grid
-    Then a stats grid with ID "1028" should exist with the following items
-      | label   | value   |
-      | Label 1 | Value 1 |
-      | Label 2 | Value 2 |
-
-  @mockserver
-  Scenario: Page component - Card carousel
-    Given a card carousel with ID "1155" should exist with the following promo cards
-      | title           | date            | content                | url          | image                                                                                                                             |
-      | Sample title    | 1 Dec to 31 Dec | Sample Card Summary    | /sample-page | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg |
-      | Promotion title | 3 Nov 2022      | Promotion Card summary | /promo-page  | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg                 |
-    And the card carousel with ID "1155" should contain a key dates card with the title "Key calendar dates" and the following entries
-      | title        | subtitle       | content       |
-      | April 16th   | Key subtitle 1 | Key content 1 |
-      | December 1st | Key subtitle 2 | Key content 2 |
-
-  @mockserver
-  Scenario: Page component - Card carousel (Slider)
-    When I click the button "Next" on the component with ID "1155"
-    Then the active slide on "1155" should be "2"
-    And the pagination button "Next" on "1155" should be disabled
-    When I click the button "Previous" on the component with ID "1155"
-    Then the active slide on "1155" should be "1"
-    And the pagination button "Previous" on "1155" should be disabled
-
-  @mockserver
-  Scenario: Page component - Media Gallery
-    Given a media gallery with ID "1056" should exist with the following gallery items
-      | title             | caption                  | image                                                                                                                             |
-      | Media title one   | The first media caption  | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg                   |
-      | Media title two   | The second media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg |
-      | Media title three | The third media caption  | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg                       |
-
-  @mockserver
-  Scenario: Page component - Media Gallery (Slider)
-    Given the pagination button "Previous" on "1056" should be disabled
-    When I click the button "Next" on the component with ID "1056"
-    Then the active slide on "1056" should be "2"
-    When I click the button "Next" on the component with ID "1056"
-    Then the active slide on "1056" should be "3"
-    And the pagination button "Next" on "1056" should be disabled
-    When I click the button "Previous" on the component with ID "1056"
-    Then the active slide on "1056" should be "2"
-
-  @mockserver
-  Scenario: Page component - Media Gallery (Modal)
-    When I click the button "View 'Media title one' fullscreen" on the component with ID "1056"
-    Then the "media-gallery" modal should be "visible"
-    When I click the "media-gallery" modal button "Close"
-    Then the "media-gallery" modal should be "hidden"
-
-  @mockserver
-  Scenario: Page component - Data Table
-    Then a data table with ID "1936" should exist with the following structure
-      | type | cell-one             | cell-two             | cell-three             |
-      | th   | Row One Column One   | Row One Column Two   | Row One Column Three   |
-      | td   | Row Two Column One   | Row Two Column Two   | Row Two Column Three   |
-      | td   | Row Three Column One | Row Three Column Two | Row Three Column Three |
-
-  @mockserver
-  Scenario: Page component - Category Grid i.e. compact cards
-    Then a category grid with ID "7052" should exist with the following cards
-      | title    | content          | image                                                                                                                             | url                 |
-      | Card one | Card one summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | /landing-page-cc-2  |
-      | Card two | Card two summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg                   | https://google.com/ |
diff --git a/examples/nuxt-app/test/features/landingpage/page-components.feature b/examples/nuxt-app/test/features/landingpage/page-components.feature
new file mode 100644
index 0000000000..19a3637078
--- /dev/null
+++ b/examples/nuxt-app/test/features/landingpage/page-components.feature
@@ -0,0 +1,158 @@
+Feature: Home page
+
+  Example of mocked page
+  Background:
+    Given the page endpoint for path "/" returns fixture "/landingpage/home" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/"
+
+  @mockserver
+  Scenario: Page component - Basic text
+    Then a wysiwyg content area with ID "969" should exist with the content "Here is some sample rich text content"
+
+  @mockserver
+  Scenario: Page component - Accordion
+    Then an accordion with ID "972" should exist with title "Test accordion title" and have the following accordion items
+      | title        | content                   |
+      | Accordion #1 | Test rich text content #1 |
+      | Accordion #2 | Test rich text content #2 |
+
+  @mockserver
+  Scenario: Page component - Accordion (Open/close all)
+    When I click the open all button on accordion with ID "accordion-972"
+    Then all accordion items in accordion ID "accordion-972" should be visible
+
+    When I click the close all button on accordion with ID "accordion-972"
+    Then all accordion items in accordion ID "accordion-972" should be hidden
+
+  @mockserver
+  Scenario: Page component - Promo card
+    Then a promo card with ID "976" should exist with the following properties
+      | displayStyle | title                | content            | image |
+      | noImage      | Promo card (noImage) | Sample description |       |
+
+    Then a promo card with ID "977" should exist with the following properties
+      | displayStyle | title                  | content            | image                                                                                                     |
+      | thumbnail    | Promo card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
+
+    Then a promo card with ID "978" should exist with the following properties
+      | displayStyle | title                | content            | image                                                                                                     |
+      | profile      | Promo card (profile) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
+
+  @mockserver
+  Scenario: Page component - Nav card
+    Then a nav card with ID "981" should exist with the following properties
+      | displayStyle | title              | content            | image |
+      | noImage      | Nav card (noImage) | Sample description |       |
+
+    Then a nav card with ID "982" should exist with the following properties
+      | displayStyle | title                | content            | image                                                                                                     |
+      | thumbnail    | Nav card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
+
+    Then a nav card with ID "983" should exist with the following properties
+      | displayStyle | title               | content            | image                                                                                                     |
+      | featured     | Nav card (featured) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg |
+
+
+  @mockserver
+  Scenario: Page component - Key dates card
+    Then a key dates card with ID "988" should exist with the title "Key calendar dates"
+    Then a key dates card with ID "988" should exist with the following dates
+      | title         | date              | summary                  |
+      | An event      | 12th October 2022 | Summary of an event      |
+      | Another event | 13th October 2022 | Summary of another event |
+    Then a key dates card with ID "988" should exist with cta text "Test CTA text" and link to "/test-cta-link"
+
+  @mockserver
+  Scenario: Page component - Timeline
+    Then a timeline with ID "992" should exist with the title "Test timeline title"
+    Then a timeline with ID "992" should exist with the following items
+      | title             | date                     | summary                   | url                 | image                                                                                                                  |
+      | Milestone 1 title | 2 June to 11 November    | Milestone 1 summary field | /test-destination-1 | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg |
+      | Milestone 2 title | 4 October to 17 November | Milestone 2 summary field | /test-destination-2 |                                                                                                                        |
+      | Milestone 3 title |                          | Milestone 3 text          |                     |                                                                                                                        |
+
+  @mockserver
+  Scenario: Page component - Call to action
+    Then a call to action with ID "1024" should exist with the following properties
+      | title                     | summary                 | ctaText       | image                                                                                                                         |
+      | Test call to action title | This is the description | Test CTA text | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Two-men-working-in-hi-vis-clothing.jpg |
+
+  @mockserver
+  Scenario: Page component - Stats grid
+    Then a stats grid with ID "1028" should exist with the following items
+      | label   | value   |
+      | Label 1 | Value 1 |
+      | Label 2 | Value 2 |
+
+  @mockserver
+  Scenario: Page component - Card carousel
+    Given a card carousel with ID "1155" should exist with the following promo cards
+      | title           | date            | content                | url          | image                                                                                                                             |
+      | Sample title    | 1 Dec to 31 Dec | Sample Card Summary    | /sample-page | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg |
+      | Promotion title | 3 Nov 2022      | Promotion Card summary | /promo-page  | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg                 |
+    And the card carousel with ID "1155" should contain a key dates card with the title "Key calendar dates" and the following entries
+      | title        | subtitle       | content       |
+      | April 16th   | Key subtitle 1 | Key content 1 |
+      | December 1st | Key subtitle 2 | Key content 2 |
+
+  @mockserver
+  Scenario: Page component - Card carousel (Slider)
+    When I click the button "Next" on the component with ID "1155"
+    Then the active slide on "1155" should be "2"
+    And the pagination button "Next" on "1155" should be disabled
+    When I click the button "Previous" on the component with ID "1155"
+    Then the active slide on "1155" should be "1"
+    And the pagination button "Previous" on "1155" should be disabled
+
+  @mockserver
+  Scenario: Page component - Media Gallery
+    Given a media gallery with ID "1056" should exist with the following gallery items
+      | title             | caption                  | image                                                                                                                             |
+      | Media title one   | The first media caption  | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg                   |
+      | Media title two   | The second media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg |
+      | Media title three | The third media caption  | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg                       |
+
+  @mockserver
+  Scenario: Page component - Media Gallery (Slider)
+    Given the pagination button "Previous" on "1056" should be disabled
+    When I click the button "Next" on the component with ID "1056"
+    Then the active slide on "1056" should be "2"
+    When I click the button "Next" on the component with ID "1056"
+    Then the active slide on "1056" should be "3"
+    And the pagination button "Next" on "1056" should be disabled
+    When I click the button "Previous" on the component with ID "1056"
+    Then the active slide on "1056" should be "2"
+
+  @mockserver
+  Scenario: Page component - Media Gallery (Modal)
+    When I click the button "View 'Media title one' fullscreen" on the component with ID "1056"
+    Then the "media-gallery" modal should be "visible"
+    When I click the "media-gallery" modal button "Close"
+    Then the "media-gallery" modal should be "hidden"
+
+  @mockserver
+  Scenario: Page component - Data Table
+    Given a data table with ID "1936"
+    Then it should have a heading
+    And have 3 rows and 3 columns
+      | type | cell-one             | cell-two             | cell-three             |
+      | th   | Row One Column One   | Row One Column Two   | Row One Column Three   |
+      | td   | Row Two Column One   | Row Two Column Two   | Row Two Column Three   |
+      | td   | Row Three Column One | Row Three Column Two | Row Three Column Three |
+
+  @mockserver
+  Scenario: Page component - Data Table without headings
+    Given a data table with ID "1937"
+    Then it should have no heading
+    And have 2 rows and 3 columns
+      | type | cell-one             | cell-two             | cell-three             |
+      | td   | Row Two Column One   | Row Two Column Two   | Row Two Column Three   |
+      | td   | Row Three Column One | Row Three Column Two | Row Three Column Three |
+
+  @mockserver
+  Scenario: Page component - Category Grid i.e. compact cards
+    Then a category grid with ID "7052" should exist with the following cards
+      | title    | content          | image                                                                                                                             | url                 |
+      | Card one | Card one summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | /landing-page-cc-2  |
+      | Card two | Card two summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg                   | https://google.com/ |
diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
index 52111e355a..27cd014ed4 100644
--- a/examples/nuxt-app/test/fixtures/landingpage/home.json
+++ b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -688,11 +688,28 @@
           "Row One Column Three"
         ],
         "items": [
+          ["Row Two Column One", "Row Two Column Two", "Row Two Column Three"],
           [
-            "Row Two Column One",
-            "Row Two Column Two",
-            "Row Two Column Three"
-          ],
+            "Row Three Column One",
+            "Row Three Column Two",
+            "Row Three Column Three"
+          ]
+        ]
+      }
+    },
+    {
+      "component": "TideLandingPageDataTable",
+      "id": "1937",
+      "props": {
+        "caption": "",
+        "headingType": {
+          "horizontal": false,
+          "vertical": false
+        },
+        "orientation": "row",
+        "columns": [],
+        "items": [
+          ["Row Two Column One", "Row Two Column Two", "Row Two Column Three"],
           [
             "Row Three Column One",
             "Row Three Column Two",
@@ -702,36 +719,36 @@
       }
     },
     {
-      "component":"TideLandingPageCategoryGrid",
-      "id":"7052",
-      "title":"Category Grid",
-      "props":{
-        "items":[
+      "component": "TideLandingPageCategoryGrid",
+      "id": "7052",
+      "title": "Category Grid",
+      "props": {
+        "items": [
           {
-            "title":"Card one",
-            "summary":"Card one summary",
-            "image":{
-              "src":"https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg",
-              "alt":"",
-              "focalPoint":null,
-              "height":667,
-              "title":"",
-              "width":1000
+            "title": "Card one",
+            "summary": "Card one summary",
+            "image": {
+              "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg",
+              "alt": "",
+              "focalPoint": null,
+              "height": 667,
+              "title": "",
+              "width": 1000
             },
-            "url":"/landing-page-cc-2"
+            "url": "/landing-page-cc-2"
           },
           {
-            "title":"Card two",
-            "summary":"Card two summary",
-            "image":{
-              "src":"https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg",
-              "alt":"",
-              "focalPoint":null,
-              "height":667,
-              "title":"",
-              "width":1000
+            "title": "Card two",
+            "summary": "Card two summary",
+            "image": {
+              "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg",
+              "alt": "",
+              "focalPoint": null,
+              "height": 667,
+              "title": "",
+              "width": 1000
             },
-            "url":"https://google.com/"
+            "url": "https://google.com/"
           }
         ]
       }
diff --git a/packages/ripple-test-utils/step_definitions/components/data-table.ts b/packages/ripple-test-utils/step_definitions/components/data-table.ts
index c57b60348c..b16980216a 100644
--- a/packages/ripple-test-utils/step_definitions/components/data-table.ts
+++ b/packages/ripple-test-utils/step_definitions/components/data-table.ts
@@ -1,19 +1,22 @@
-import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor'
+import { Then, Given, DataTable } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a data table with ID {string}', (id: string) => {
+  cy.get(`[data-component-id="${id}"]`).as('component')
+  cy.get('@component')
+    .should('exist')
+    .should('have.attr', 'data-component-type', 'TideLandingPageDataTable')
+})
 
 Then(
-  'a data table with ID {string} should exist with the following structure',
-  (id: string, dataTable: DataTable) => {
+  'have {int} rows and {int} columns',
+  (rowCount: number, colCount: number, dataTable: DataTable) => {
     const table = dataTable.hashes()
 
-    cy.get(`[data-component-id="${id}"]`).as('component')
-    cy.get('@component')
-      .should('exist')
-      .should('have.attr', 'data-component-type', 'TideLandingPageDataTable')
     cy.get('@component').within(() => {
       cy.get(`table tr`).as('rows')
     })
 
-    cy.get('@rows').should('have.length', 3)
+    cy.get('@rows').should('have.length', rowCount)
 
     table.forEach((row, i: number) => {
       cy.get('@rows')
@@ -21,7 +24,7 @@ Then(
         .then((item) => {
           cy.wrap(item).as('item')
           cy.get('@item').find(row.type).as('cell')
-          cy.get('@cell').should('have.length', 3)
+          cy.get('@cell').should('have.length', colCount)
           cy.get('@cell').eq(0).should('contain', row['cell-one'])
           cy.get('@cell').eq(1).should('contain', row['cell-two'])
           cy.get('@cell').eq(2).should('contain', row['cell-three'])
@@ -29,3 +32,15 @@ Then(
     })
   }
 )
+
+Then('it should have a heading', () => {
+  cy.get('@component').within(() => {
+    cy.get('table thead tr').should('exist')
+  })
+})
+
+Then('it should have no heading', () => {
+  cy.get('@component').within(() => {
+    cy.get('table thead tr').should('not.exist')
+  })
+})
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
index f9abe95f49..e621e46f1e 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
@@ -61,7 +61,7 @@ const mappedItems = computed(() => {
             caption
           }}
         </caption>
-        <thead>
+        <thead v-if="columns.length > 0">
           <tr>
             <th v-for="(item, index) in columns" :key="index">
               <template