@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

package/assets/ts/README.md

@@ -1,12 +0,0 @@
-# Typescript files
-
-## Compilation
-
-- **assets/ts/modules/{module}.ts** compiles to **assets/js/modules/{module}.js**
-- **assets/ts/components/{component}.ts** compiles to **assets/js/components/{component}.component.js**
-- **assets/ts/{filename}.ts** compiles to **assets/js/{filename}.js**
-
-## Rollup
-
-- **assets/js/components/{component}.component.js** adds the @imports from the assets/js/modules folder and creates a combined file of **assets/js/components/{component}.component.min.js**
-- **assets/js/bundle.js** adds the @imports from the assets/js/modules and assets/js/components folders to create a combined file of **assets/js/components/scripts.bundle.min.js**

package/assets/ts/components/actionbar/README.md

@@ -1,56 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/actionbar/actionbar.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-actionbar`))
-    window.customElements.define(`iam-actionbar`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-actionbar data-selectall data-search>
-
-  <div class="dialog__wrapper">
-    <button class="btn btn-action mb-0 me-0">Quick filter</button>
-    <dialog class="dialog--list">
-      <div class="pb-0">
-        <input type="radio" name="sorta" data-sort="" id="follow-up-oldesta" value="follow-up-oldest">
-        <label for="follow-up-oldesta" class="radio--tick">Option 1</label>
-
-        <input type="radio" name="sorta" data-sort="" id="follow-up-newesta" value="follow-up-newest">
-        <label for="follow-up-newesta" class="radio--tick">Option 2</label>
-
-        <input type="radio" name="sorta" data-sort="" id="date-instructed-oldesta" value="date-instructed-oldest" checked="" autofocus="true">
-        <label for="date-instructed-oldesta" class="radio--tick">Option 3</label>
-
-        <input type="radio" name="sorta" data-sort="" id="date-instructed-newesta" value="date-instructed-newest">
-        <label for="date-instructed-newesta" class="radio--tick mb-0">Option 4</label>
-      </div>
-    </dialog>
-  </div>
-
-  <button class="btn btn-primary btn-sm fa-plus" id="uploadBtn">Upload document</button>
-
-  <button class="btn btn-action fa-pen-to-square" data-single slot="selected">Edit</button>
-  <button class="btn btn-action fa-box-archive" slot="selected">Archive</button>
-  <button class="btn btn-action fa-trash-can" slot="selected">Delete</button>
-  <hr slot="selected" />
-  <button class="btn btn-action" slot="selected">Cancel</button>
-
-</iam-actionbar>
-```
-
-**Properties**
-
-| Option           | Type   | Default Value | Description                                                                               |
-| ---------------- | ------ | ------------- | ----------------------------------------------------------------------------------------- |
-| data-selectall   | -      | -             | Optional flag to include the select all button                                            |
-| data-search      | -      | -             | Optional flag to include the search button and functionality                              |
-| data-switchviews | -      | -             | Optional flag to include the switch views buttons                                         |
-| data-view        | String | square        | Required if you have the above flag set. Can be set to wither 'square','list' or 'small'. |

package/assets/ts/components/applied-filters/README.md

@@ -1,20 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/applied-filters/applied-filters.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-applied-filters`))
-    window.customElements.define(`iam-applied-filters`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-applied-filters></iam-applied-filters>
-```
-
-To add an input to the applied filters an attribute of **data-filter-text** needs to be supplied so that the JavaScript knows to listen for the value to change. This attribute can also be used on a wrapper for mulitple input filters also and dynamic values can also be given. **$value** passes the inputs value as the filter text and **$1,$2,$3...** will pass the corresponding child input value to the text.

package/assets/ts/components/bento-grid/README.md

@@ -1,31 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/accordion/accordion.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-accordion`))
-    window.customElements.define(`iam-accordion`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-accordion class="container">
-  <details id="question1" class="accordion-item">
-    <summary class="accordion-header accordion-button h4">Question 1</summary>
-    <p>Answer </p>
-  </details>
-  <details class="accordion-item">
-    <summary class="accordion-header accordion-button h4">Question 2</summary>
-    <p>Answer </p>
-  </details>
-</iam-accordion>
-```
-
-### Class modifiers
-
-- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.

package/assets/ts/components/carousel/README.md

@@ -1,38 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-filterlist`))
-    window.customElements.define(`iam-filterlist`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-header class="bg-secondary" image="/shutterstock_1229155495.webp">
-  <ul class="breadcrumb" slot="breadcrumb">
-    <li><a href="/">Home</a></li>
-    <li><a href="/top">Top level</a></li>
-  </ul>
-  <h1>Page title</h1>
-  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-</iam-header>
-```
-
-**Properties**
-
-| Option | Type   | Default Value | Description                                     |
-| ------ | ------ | ------------- | ----------------------------------------------- |
-| image  | String | -             | Optional image url to display in the background |
-
-**Slots**
-
-| Option     | Default Value | Description                                                 |
-| ---------- | ------------- | ----------------------------------------------------------- |
-| default    | -             | Will display underneath the heading inside of the white box |
-| breadcrumb | -             | An optional space to add a breadcrumb trail list.           |

package/assets/ts/components/chart/README.md

@@ -1,35 +0,0 @@
-```
-<iam-chart>
-  <table>
-    <thead>
-      <tr>
-        <th>Issue</th>
-        <th>Democrat</th>
-        <th>Republican</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr><td>Inflation</td><td>45%</td><td>18%</td></tr><tr><td>Abortion</td><td>12%</td><td>43%</td></tr>
-      <tr><td>Gun policy</td><td>8%</td><td>14%</td></tr><tr><td>Immigration</td><td>15%</td><td>5%</td></tr>
-      <tr><td>Crime</td><td>13%</td><td>10%</td></tr>
-    </tbody>
-  </table>
-</iam-chart>
-```
-
-**To do**
-
-- Animation
-- Add more chart types
-- optimise code
-- change key
-- Fill in readme with class and attributes
-- flout
-
-**Note**
-
-**Properties**
-
-**Class modifiers**
-
-- .chart--no-animate turns of the animation

package/assets/ts/components/collapsible-side/README.md

@@ -1,38 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/collapsible-side/collapsible-side.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-collapsible-side`))
-    window.customElements.define(`iam-collapsible-side`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-collapsible-side data-title="Configuration">
-
-  <div slot="menu">
-    <label for="test1">Active branch</label>
-    <select class="form-select" name="test1" id="test1">
-      <option value="1" selected>Newcastle</option>
-      <option value="2">Two</option>
-      <option value="2">Three</option>
-      <option value="2">Four</option>
-    </select>
-  </div>
-
-  <hr slot="menu"/>
-  <a href="/" slot="menu">Agency settings</a>
-  <a href="/" slot="menu">Control panel</a>
-  <a href="/" slot="menu" class="selected">Contact us</a>
-
-  <h1>Inspections</h1>
-  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-
-</iam-collapsible-side>
-```

package/assets/ts/components/filterlist/README.md

@@ -1,32 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-filterlist`))
-    window.customElements.define(`iam-filterlist`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-filterlist>
-<ul>
-  <li>Olivia Anderson</li>
-  <li>Ethan Ramirez</li>
-  <li>Sophia Patel</li>
-  <li>Noah Jenkins</li>
-  <li>Ava Thompson</li>
-</ul>
-</iam-filterlist>
-```
-
-**Properties**
-
-| Option          | Type   | Default Value | Description                                                                                                 |
-| --------------- | ------ | ------------- | ----------------------------------------------------------------------------------------------------------- |
-| data-max-height | string | ''            | Optional choice from small, medium or large control of the height of the list. Giving it a scrollable area. |

package/assets/ts/components/header/README.md

@@ -1,38 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-filterlist`))
-    window.customElements.define(`iam-filterlist`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-header class="bg-secondary" image="/shutterstock_1229155495.webp">
-  <ul class="breadcrumb" slot="breadcrumb">
-    <li><a href="/">Home</a></li>
-    <li><a href="/top">Top level</a></li>
-  </ul>
-  <h1>Page title</h1>
-  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-</iam-header>
-```
-
-**Properties**
-
-| Option | Type   | Default Value | Description                                     |
-| ------ | ------ | ------------- | ----------------------------------------------- |
-| image  | String | -             | Optional image url to display in the background |
-
-**Slots**
-
-| Option     | Default Value | Description                                                 |
-| ---------- | ------------- | ----------------------------------------------------------- |
-| default    | -             | Will display underneath the heading inside of the white box |
-| breadcrumb | -             | An optional space to add a breadcrumb trail list.           |

package/assets/ts/components/inline-edit/README.md

@@ -1,31 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-nav`))
-    window.customElements.define(`iam-nav`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-inline-edit id="inlineEdit" data-autosave>
-  <label >Optional label
-    <input type="text" name="text" value="Placeholder text" />
-  </label>
-</iam-inline-edit>
-```
-
-```
-
-**Properties**
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-autosave  | Flag | - | Allows the input field to dispatch the autosave event when unfocusing the input field |
-```

package/assets/ts/components/multiselect/README.md

@@ -1,35 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/fileupload/fileupload.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-fileupload`))
-    window.customElements.define(`iam-fileupload`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-multiselect>
-  <span class="label" slot="label">Users</span>
-  <label class="tag"><input type="checkbox" name="tags" value="IT James Lambert" />James Lambert</label>
-  <label class="tag"><input type="checkbox" name="tags" value="IT Amanda Knight"/>Amanda Knight</label>
-  <label class="tag"><input type="checkbox" name="tags" value="IT Brian Lord"/>Brian Lord</label>
-  <label class="tag"><input type="checkbox" name="tags" value="Claire Lane"/>Claire Lane</label>
-  <label class="tag"><input type="checkbox" name="tags" value="John Smith"/>John Smith</label>
-  <label class="tag"><input type="checkbox" name="tags" value="James Brown"/>James Brown</label>
-  <label class="tag"><input type="checkbox" name="tags" value="Sarah Brown"/>Sarah Brown</label>
-</iam-multiselect>
-```
-
-**Properties**
-
-| Option           | Type | Default Value | Description                                                                                               |
-| ---------------- | ---- | ------------- | --------------------------------------------------------------------------------------------------------- |
-| data-min         | Int  | -             | Set's the minimum amout of tags needed for the input field to validate                                    |
-| data-min         | Int  | -             | Set's the maximum amout of tags allowed to be added                                                       |
-| data-is-required | flag | -             | Makes it so at least one tag must be added for the it to be valid and allow the outer form to be sumitted |

package/assets/ts/components/nav/README.md

@@ -1,57 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-nav`))
-    window.customElements.define(`iam-nav`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<nav>
-<iam-nav>
-  <a href="/" class="brand brand--property" slot="logo">
-    <svg>
-      <title>iamproperty</title>
-      <use xlink:href="/svg/logo.svg#logo-property"></use>
-    </svg>
-  </a>
-
-  <a href="/" class="selected">Lorem ipsum</a>
-  <a href="/">Lorem ipsum</a>
-  <a href="/">Lorem ipsum</a>
-  <a href="/">Lorem ipsum</a>
-
-  <button class="btn btn-primary">Lorem ipsum</button>
-</iam-nav>
-</nav>
-```
-
-**Properties**
-
-| Option           | Type   | Default Value | Description                                             |
-| ---------------- | ------ | ------------- | ------------------------------------------------------- |
-| data-searcd-open | String | -             | Flag that opens the search bar on desktop on page load. |
-
-**Slots**
-
-| Option    | Default Value | Description                                                                           |
-| --------- | ------------- | ------------------------------------------------------------------------------------- |
-| default   | -             | Populates the main nav area                                                           |
-| logo      | -             | A place to add the logo to the site                                                   |
-| secondary | -             | Moves the link upto the top of the navbar on desktop                                  |
-| actions   | -             | A place to add buttons                                                                |
-| dual      | -             | Plave the link or list to the right of the nav, forcing the default slot to the left. |
-| search    | -             | A place to include a form with search functionality                                   |
-
-**Class modifiers**
-
-- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background.
-- Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
-- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.

package/assets/ts/components/notification/README.md

@@ -1,47 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/notification/notification.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-notification`))
-    window.customElements.define(`iam-notification`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<!-- Inline -->
-<iam-notification data-status="danger" data-dismiss="">
-<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
-</iam-notification>
-
-<!-- Alert -->
-<iam-notification data-type="alert" data-status="danger" data-dismiss="">
-<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
-</iam-notification>
-
-<!-- Toast -->
-<iam-notification data-type="toast" data-status="danger" data-dismiss="">
-<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
-</iam-notification>
-
-```
-
-**Properties**
-
-| Option       | Type    | Default Value | Description                                                                                                         |
-| ------------ | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------- |
-| data-status  | String  | info          | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
-| data-type    | String  | inline        | Choose from alert and toast. This will change the behavour of the component.                                        |
-| data-dismiss | Boolean | -             | Adds a close button which will remove the alert box after clicking it.                                              |
-| data-timeout | Boolean | -             | Adds a timer for how long the notification will appear.                                                             |
-
-**Slots**
-
-| Option  | Default Value | Description                                 |
-| ------- | ------------- | ------------------------------------------- |
-| default | -             | This is the content of the notification box |

package/assets/ts/components/pagination/README.md

@@ -1,37 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/pagination/pagination.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-pagination`))
-    window.customElements.define(`iam-pagination`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-pagination data-total="12"></iam-pagination>
-```
-
-**Properties**
-
-| Option            | Type | Default Value | Description                                                                                                  |
-| ----------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------ |
-| data-total        | int  | 0             | The total amount is needed to work out how many pagination buttons are needed                                |
-| data-page         | int  | 1             | Override the current page value                                                                              |
-| data-show         | int  | 15            | Update how many items can be shown per page                                                                  |
-| data-page-minimal | flag | -             | Will display the minimal variant even on mobile                                                              |
-| data-page-jump    | flag | -             | Adds the page jump dropdown on all viewports                                                                 |
-| data-per-page     | flag | -             | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) |
-| data-item-count   | flag | -             | Will add the total count on tablet and desktop viewports                                                     |
-
-**Dispatched events**
-
-| Event       | Dispatched when                                                                     | Details passed        |
-| ----------- | ----------------------------------------------------------------------------------- | --------------------- |
-| update-show | When a user clicks mobile 'Load more' button                                        | { show: $showAmont }  |
-| update-page | When a user changes the page jump select or clicks on the 'Prev' and 'Next' buttons | { page: $pageNumber } |

package/assets/ts/components/search/README.md

@@ -1,35 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/fileupload/fileupload.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-fileupload`))
-    window.customElements.define(`iam-fileupload`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-search>
-<label>Search existing transactions
-  <span>
-    <input type="text" name="client" autocomplete="off" aria-autocomplete="none" required />
-    <span class="suffix fa-regular fa-search"></span>
-  </span>
-</label>
-<datalist id="properties"></datalist>
-</iam-search>
-```
-
-**Properties**
-
-| Option              | Type   | Default Value | Description                                                                |
-| ------------------- | ------ | ------------- | -------------------------------------------------------------------------- |
-| data-url            | String | -             | Optional value that populates the datalist with extra results from an API  |
-| data-schema         | String | -             | Tells the JavaScript where to look for the array of values in the API JSON |
-| data-value-schema   | String | -             | Tells the JavaScript where to look for the value within the API JSON       |
-| data-display-schema | String | -             | Tells the JavaScript where to look for the title within the API JSON       |

package/assets/ts/components/slider/README.md

@@ -1,26 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/slider/slider.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-slider`))
-    window.customElements.define(`iam-slider`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>
-```
-
-**Note**
-
-The slider component is best put inside of a label and wrapped around an input field. The component is there to enhance the input field.
-
-**Properties**
-
-The properties of the slider are reflected by the attributes of the input field. So the min and max used to create the range are taken from the first input inside of the component.

package/assets/ts/components/table/README.md

@@ -1,40 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/table/table.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-table`))
-    window.customElements.define(`iam-table`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-table class="container">
-  <table>
-    <thead>....</thead>
-    <tbody>...</tbody>
-  </table>
-</iam-tabs>
-```
-
-**Properties**
-
-| Option          | Type             | Default Value | Description                                                                                     |
-| --------------- | ---------------- | ------------- | ----------------------------------------------------------------------------------------------- |
-| data-show       | int              | 15            | Update how many rows can be shown per page                                                      |
-| data-filterby   | string (form ID) |               | Give an optional form ID to connect a form to the table and make it act like a filtering system |
-| data-no-scroll  | flag             | -             | Stops the page from scrolling up to the top of the table                                        |
-| data-expandable | flag             | -             | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly     |
-
-_Pagination properties can also be added to the table component so that they can be passed down to the child pagination element._
-
-**Class modifiers**
-
-- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop).
-- Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
-- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.