Component Library
Sign out

Table: Catalog 

<h3>Table Examples</h3>

<div class="acl-table acl-table--border  acl-table--rounded-corners">
    <div class="acl-table__row acl-table__header">
        <div class="acl-table__header-cell acl-table__header-cell--darken acl-table__header-cell--border-right">Column 1</div>
        <div class="acl-table__header-cell acl-table__header-cell--border-right">Column 2</div>
        <div class="acl-table__header-cell acl-table__header-cell--darken acl-table__header-cell--border-right">Column 3</div>
        <div class="acl-table__header-cell acl-table__header-cell--border-right">Column 4</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--border-right">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="acl-table__cell acl-table__cell--border-right">
            Consectetur adipiscing elit.
        </div>

        <div class="acl-table__cell acl-table__cell--border-right">Lorem</div>
        <div class="acl-table__cell acl-table__cell--border-right ">Ipsum</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--border-right">
            Lorem ipsum dolor sit amet
        </div>
        <div class="acl-table__cell acl-table__cell--border-right">
            Lorem ipsum dolor sit amet.

        </div>
        <div class="acl-table__cell acl-table__cell--border-right">Tempor</div>
        <div class="acl-table__cell acl-table__cell--border-right">Lorem</div>
    </div>

</div>

<div style="margin-bottom: 50px;"></div>
<div class="acl-table acl-table--raised acl-table--rounded-corners">
    <div class="acl-table__row acl-table__header">
        <div class="acl-table__cell">Column 1</div>
        <div class="acl-table__cell">Column 2</div>
        <div class="acl-table__cell ">Column 3</div>
        <div class="acl-table__cell ">Column 4</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>
        <div class="acl-table__cell ">
            Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>

        <div class="acl-table__cell ">Lorem</div>
        <div class="acl-table__cell  ">Ipsum</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet
        </div>
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.

        </div>
        <div class="acl-table__cell ">Tempor</div>
        <div class="acl-table__cell ">Lorem</div>
    </div>

</div>

<div style="margin-bottom: 50px;"></div>
<div class="acl-table">
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>
        <div class="acl-table__cell ">
            Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>

        <div class="acl-table__cell ">Lorem</div>
        <div class="acl-table__cell  ">Ipsum</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet
        </div>
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.

        </div>
        <div class="acl-table__cell ">Tempor</div>
        <div class="acl-table__cell ">Lorem</div>
    </div>

</div>

<!-- Product Table Example -->

<div style="margin-bottom: 50px;"></div>
<div class="acl-table">
    <div class="acl-table__row acl-table__header">
        <div class="acl-table__cell">Product Name</div>
        <div class="acl-table__cell">Tactics</div>
        <div class="acl-table__cell">Base Qty</div>
        <div class="acl-table__cell">Predicted Qty</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell">
            <div class="acl-result-card" style="max-width: 250px">
                <div class="acl-result-card__column">
                    <div class="acl-result-card__image-container">
                        <div class="acl-result-card__image-icon">
                            <div class="acl-result-card__image-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__image-icon-foreground">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                        <img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
                    </div>
                </div>
                <div class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
                    <div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
                        Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
                    </div>

                    <div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
                        DKE-34393
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-table__cell">
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">20% off</span>
            </div>
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">$5 off when you spend
                    $100</span>
            </div>
        </div>

        <div class="acl-table__cell">100</div>
        <div class="acl-table__cell">20</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell">
            <div class="acl-result-card" style="max-width: 250px">
                <div class="acl-result-card__column">
                    <div class="acl-result-card__image-container">
                        <div class="acl-result-card__image-icon">
                            <div class="acl-result-card__image-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__image-icon-foreground">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                        <img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
                    </div>
                </div>
                <div class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
                    <div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
                        Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
                    </div>
                    <div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
                        DKE-34393
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-table__cell">
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">20% off</span>
            </div>
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">$5 off when you
                    spend
                    $100</span>
            </div>
        </div>
        <div class="acl-table__cell">100</div>
        <div class="acl-table__cell">60</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center">
        <div class="acl-table__cell">
            <div class="acl-result-card" style="max-width: 250px">
                <div class="acl-result-card__column">
                    <div class="acl-result-card__image-container">
                        <div class="acl-result-card__image-icon">
                            <div class="acl-result-card__image-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__image-icon-foreground">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                        <img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
                    </div>
                </div>
                <div class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
                    <div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
                        Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
                    </div>
                    <div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
                        DKE-34393
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-table__cell">
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">20% off</span>
            </div>
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">$5 off when you
                    spend
                    $100</span>
            </div>
        </div>
        <div class="acl-table__cell">100</div>
        <div class="acl-table__cell">50</div>
    </div>
</div>

<!-- Product Table Example - END -->

<style>
    /* Overriding the default ACL class */
    .acl-table__row {
        /* grid-template-columns: repeat(4, 1fr) */
        grid-template-columns: 3fr 2fr 0.75fr 0.75fr;
    }

    /* Demo styling */
    .acl-chip-label {
        margin: 5px 0;
        max-width: 100px
    }
</style>
 
<h3>Table Examples</h3>

<div class="acl-table acl-table--border  acl-table--rounded-corners">
    <div class="acl-table__row acl-table__header">
        <div class="acl-table__header-cell acl-table__header-cell--darken acl-table__header-cell--border-right">Column 1</div>
        <div class="acl-table__header-cell acl-table__header-cell--border-right">Column 2</div>
        <div class="acl-table__header-cell acl-table__header-cell--darken acl-table__header-cell--border-right">Column 3</div>
        <div class="acl-table__header-cell acl-table__header-cell--border-right">Column 4</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--border-right">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="acl-table__cell acl-table__cell--border-right">
            Consectetur adipiscing elit.
        </div>

        <div class="acl-table__cell acl-table__cell--border-right">Lorem</div>
        <div class="acl-table__cell acl-table__cell--border-right ">Ipsum</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--border-right">
            Lorem ipsum dolor sit amet
        </div>
        <div class="acl-table__cell acl-table__cell--border-right">
            Lorem ipsum dolor sit amet.

        </div>
        <div class="acl-table__cell acl-table__cell--border-right">Tempor</div>
        <div class="acl-table__cell acl-table__cell--border-right">Lorem</div>
    </div>

</div>

<div style="margin-bottom: 50px;"></div>
<div class="acl-table acl-table--raised acl-table--rounded-corners">
    <div class="acl-table__row acl-table__header">
        <div class="acl-table__cell">Column 1</div>
        <div class="acl-table__cell">Column 2</div>
        <div class="acl-table__cell ">Column 3</div>
        <div class="acl-table__cell ">Column 4</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>
        <div class="acl-table__cell ">
            Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>

        <div class="acl-table__cell ">Lorem</div>
        <div class="acl-table__cell  ">Ipsum</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet
        </div>
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.

        </div>
        <div class="acl-table__cell ">Tempor</div>
        <div class="acl-table__cell ">Lorem</div>
    </div>

</div>

<div style="margin-bottom: 50px;"></div>
<div class="acl-table">
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>
        <div class="acl-table__cell ">
            Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </div>

        <div class="acl-table__cell ">Lorem</div>
        <div class="acl-table__cell  ">Ipsum</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet
        </div>
        <div class="acl-table__cell ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.

        </div>
        <div class="acl-table__cell ">Tempor</div>
        <div class="acl-table__cell ">Lorem</div>
    </div>

</div>

<!-- Product Table Example -->

<div style="margin-bottom: 50px;"></div>
<div class="acl-table">
    <div class="acl-table__row acl-table__header">
        <div class="acl-table__cell">Product Name</div>
        <div class="acl-table__cell">Tactics</div>
        <div class="acl-table__cell">Base Qty</div>
        <div class="acl-table__cell">Predicted Qty</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell">
            <div class="acl-result-card" style="max-width: 250px">
                <div class="acl-result-card__column">
                    <div class="acl-result-card__image-container">
                        <div class="acl-result-card__image-icon">
                            <div class="acl-result-card__image-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__image-icon-foreground">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                        <img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
                    </div>
                </div>
                <div
                    class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
                    <div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
                        Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
                    </div>

                    <div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
                        DKE-34393
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-table__cell">
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">20% off</span>
            </div>
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">$5 off when you spend
                    $100</span>
            </div>
        </div>

        <div class="acl-table__cell">100</div>
        <div class="acl-table__cell">20</div>
    </div>
    <div class="acl-table__row  acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell">
            <div class="acl-result-card" style="max-width: 250px">
                <div class="acl-result-card__column">
                    <div class="acl-result-card__image-container">
                        <div class="acl-result-card__image-icon">
                            <div class="acl-result-card__image-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__image-icon-foreground">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                        <img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
                    </div>
                </div>
                <div
                    class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
                    <div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
                        Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
                    </div>
                    <div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
                        DKE-34393
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-table__cell">
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">20% off</span>
            </div>
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">$5 off when you
                    spend
                    $100</span>
            </div>
        </div>
        <div class="acl-table__cell">100</div>
        <div class="acl-table__cell">60</div>
    </div>
    <div class="acl-table__row acl-table__row--align-content-vertical-center">
        <div class="acl-table__cell">
            <div class="acl-result-card" style="max-width: 250px">
                <div class="acl-result-card__column">
                    <div class="acl-result-card__image-container">
                        <div class="acl-result-card__image-icon">
                            <div class="acl-result-card__image-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__image-icon-foreground">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                        <img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
                    </div>
                </div>
                <div
                    class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
                    <div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
                        Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
                    </div>
                    <div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
                        DKE-34393
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-table__cell">
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">20% off</span>
            </div>
            <div class="acl-chip-label acl-chip-label--blue"><span class="acl-chip-label__text">$5 off when you
                    spend
                    $100</span>
            </div>
        </div>
        <div class="acl-table__cell">100</div>
        <div class="acl-table__cell">50</div>
    </div>
</div>

<!-- Product Table Example - END -->


<style>
    /* Overriding the default ACL class */
    .acl-table__row {
        /* grid-template-columns: repeat(4, 1fr) */
        grid-template-columns: 3fr 2fr 0.75fr 0.75fr;
    }


    /* Demo styling */
    .acl-chip-label {
        margin: 5px 0;
        max-width: 100px
    }
</style>
 
/* No context defined. */
  • Content: 
    .acl-table {
	display: grid;
	margin: 0 auto;
	font-family: 'Open Sans';
	font-size: 12px;
	line-height: 17px;

	&__header {
		background: rgba(248, 248, 251, 1);
		font-weight: bold;
		color: #8892b4;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 14px;

		&--background-colour {
			&-white {
				background: $white;
			}
		}

		&--padding {
			&-top {
				padding-top: 10px;
			}

			&-bottom {
				padding-bottom: 10px;
			}
		}

		&--border {
			&-bottom {
				border-bottom: 1px solid #e8ebf8;
			}
		}

		&--text {
			&-dark {
				color: rgba(0, 0, 0, 0.75);
			}

			&-medium {
				font-size: 12px;
				font-weight: 600;
			}
		}

		&--sticky {
			position: sticky !important;
			top: 0;
			z-index: 3;
		}
	}

	&--border {
		border: 1px solid #e8ebf8;
	}

	&--rounded-corners {
		border-radius: 4px;
	}

	&--raised {
		box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.15);
	}

	&__row {
		display: grid;
		&--align-content {
			&-left {
				display: grid;
				justify-content: left;
			}

			&-center {
				display: grid;
				justify-content: center;
			}

			&-right {
				display: grid;
				justify-content: end;
			}

			&-top {
				display: grid;
				align-items: start;
			}

			&-bottom {
				display: grid;
				align-items: end;
			}

			&-vertical-center {
				display: grid;
				align-items: center;
			}
		}

		&--border-bottom {
			&:not(:last-child) {
				border-bottom: 1px solid #e8ebf8;
			}
		}
	}

	&__header-cell,
	&__cell {
		padding: 5px;
		overflow: hidden;
		text-overflow: ellipsis;

		&--align-content {
			&-left {
				display: grid;
				justify-content: left;
			}

			&-center {
				display: grid;
				justify-content: center;
			}

			&-right {
				display: grid;
				justify-content: end;
			}

			&-top {
				display: grid;
				align-items: start;
			}

			&-bottom {
				display: grid;
				align-items: end;
			}

			&-vertical-center {
				display: grid;
				align-items: center;
			}
		}

		&--border-right {
			&:not(:last-child) {
				border-right: 1px solid #e8ebf8;
			}
		}

		&--darken {
			background-color: #f7f6fb; // Candiate for ACL colour variables
		}

		&--overflow-visible {
			overflow: visible;
		}

		&--ellipsis {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;

			&-one-line {
				-webkit-line-clamp: 1;
			}

			&-two-lines {
				-webkit-line-clamp: 2;
			}
		}
	}
}

.acl-table-expandable-row {
	position: relative;
	border-bottom: 1px solid #e8ebf8;

	&__cell {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	&__header {
		padding: 20px 0;
		cursor: pointer;

		&-icon {
			display: flex;
			justify-content: center;
			align-items: start;
			padding-top: 5px;
		}

		&-user-avatar {
			margin-right: 10px;
		}

		&-user-name {
			font-size: 14px;
			font-weight: 600;
			letter-spacing: 0;
			line-height: 19px;
		}

		&-title {
			color: rgba(0, 0, 0, 0.75);
			font-size: 14px;
			font-weight: 600;
			letter-spacing: 0;
		}

		&-subtitle {
			color: rgba(0, 0, 0, 0.5);
			font-size: 12px;
			letter-spacing: 0;
		}

		&-secondary-title {
			font-size: 14px;
			font-weight: 600;
		}

		&-secondary-subtitle {
			color: rgba(0, 0, 0, 0.5);
			font-size: 12px;
		}
	}

	&__chevron {
		display: flex;
		align-items: center;
		user-select: none;
		transition: all 0.08s ease-in-out;

		i {
			color: #707893; // Candidate for style guide.
			font-size: 12px;
		}

		&--rotate {
			transform: rotate(180deg);
		}
	}

	&__user {
		display: flex;
		align-items: center;

		&-details {
			flex-direction: column;
			display: flex;
		}

		&-avatar {
			margin: 0 16px 0 6px;
		}

		&-name {
			font-size: 12px;
			font-weight: 600;
			letter-spacing: 0;
			line-height: 19px;
		}

		&-job-title {
			color: rgba(0, 0, 0, 0.5);
			font-size: 12px;
			letter-spacing: 0;
			line-height: 17px;
		}
	}

	&__link {
		color: $blue;
		font-size: 12px;
		letter-spacing: 0;
		line-height: 19px;
		padding: 5px;
	}

	&__center-align {
		display: flex;
		align-items: center;
	}

	&__title {
		color: rgba(0, 0, 0, 0.75);
		font-size: 12px;
		letter-spacing: 0;
		line-height: 19px;
	}

	&__subtitle {
		color: $black;
		font-size: 12px;
		font-weight: 600;

		span {
			color: rgba(0, 0, 0, 0.5);
			font-size: 12px;
			font-weight: normal;
			margin-left: 15px;
		}
	}

	&__body {
		margin-bottom: 15px;

		&-row {
			margin-bottom: 15px;
		}

		&--hide {
			display: none;
		}
	}
}
  • URL: /components/raw/table/acl-table.scss
  • Filesystem Path: src/components/table/acl-table.scss
  • Size: 4.4 KB
  • Content: 
    class ACLExpandableTableRow {
	constructor(containerEl, isExpanded = false) {
		this.cssClass = Object.freeze({
			CHEVRON_ROTATE: 'acl-table-expandable-row__chevron--rotate',
			BODY_HIDE: 'acl-table-expandable-row__body--hide',
		});

		this.selector = Object.freeze({
			HEADER: '.acl-table-expandable-row__header',
			BODY: '.acl-table-expandable-row__body',
			CHEVRON: '.acl-table-expandable-row__chevron',
		});

		this.containerEl = containerEl;
		this.header = this.containerEl.querySelector(this.selector.HEADER);
		this.body = this.containerEl.querySelector(this.selector.BODY);
		this.cheveron = this.containerEl.querySelector(this.selector.CHEVRON);
		this.isExpanded = isExpanded;

		this.setState(this.isExpanded);
		this.handleEventListeners();
	}

	setState(shouldExpand) {
		if (shouldExpand) {
			if (this.cheveron) this.cheveron.classList.add(this.cssClass.CHEVRON_ROTATE);

			this.body.classList.remove(this.cssClass.BODY_HIDE);
			this.isExpanded = true;
		} else {
			this.header.classList.add();

			if (this.cheveron) this.cheveron.classList.remove(this.cssClass.CHEVRON_ROTATE);

			this.body.classList.add(this.cssClass.BODY_HIDE);
			this.isExpanded = false;
		}
	}

	handleEventListeners() {
		this.header.addEventListener('click', event => {
			if (!event.target.hasAttribute('data-prevent-collapse')) {
				this.setState(!this.isExpanded);
			}
		});
	}

	expandContainer() {
		this.setState(true);
	}

	collapseContainer() {
		this.setState(false);
	}
}

export { ACLExpandableTableRow };
  • URL: /components/raw/table/index.js
  • Filesystem Path: src/components/table/index.js
  • Size: 1.5 KB

No notes defined.