Asset Table

<div class="acl-table">
    <div class="acl-table__row acl-table__header acl-table__header--background-colour-white acl-table__header--text-dark acl-table__header--text-medium acl-table__header--border-bottom acl-table__header--padding-top acl-table__header--padding-bottom acl-table__header--sticky">
        <div class="acl-table__header-cell acl-helper--min-width-50"></div>
        <div class="acl-table__header-cell acl-helper--min-width-50">Name</div>
        <div class="acl-table__header-cell "></div>
        <div class="acl-table__header-cell">Owner</div>
        <div class="acl-table__header-cell">File Size</div>
        <div class="acl-table__header-cell acl-helper--min-width-50"></div>
        <div class="acl-table__header-cell"></div>
    </div>
    <div class="acl-table__row acl-table__row--min-height-60 acl-table__row--align-content-vertical-center acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--align-content-center acl-helper--min-width-50">
            <div class="acl-single-checkbox">
                <input id="checkbox-demo-1" type="checkbox">
                <label for="checkbox-demo-1"></label>
            </div>
        </div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="asset-file-info">
                <img src="/assets/img/file-type-icons/word-icon.svg">
            </div>
        </div>
        <div class="acl-table__cell"> manufacture-doc </div>
        <div class="acl-table__cell ">Dennis Reynolds</div>
        <div class="acl-table__cell">2.0MB</div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic acl-demo-small-icon-button">
                <i class="aforza-icons acl-button__icon-label">acl_download</i>
            </div>
        </div>
        <div class="acl-table__cell download-button-positioning">
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>
                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="acl-table__row acl-table__row--min-height-60 acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--align-content-center acl-helper--min-width-50">
            <div class="acl-single-checkbox">
                <input id="checkbox-demo-2" type="checkbox">
                <label for="checkbox-demo-2"></label>
            </div>
        </div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="asset-file-info">
                <img src="/assets/img/file-type-icons/google-slides.svg">
            </div>
        </div>
        <div class="acl-table__cell "> plaintiff-file </div>
        <div class="acl-table__cell ">Ronald "Mac" McDonald</div>
        <div class="acl-table__cell">25.15MB</div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic acl-demo-small-icon-button">
                <i class="aforza-icons acl-button__icon-label">acl_download</i>
            </div>
        </div>
        <div class="acl-table__cell download-button-positioning">
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-2" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>
                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row -->
    <div class="acl-table__row acl-table__row--min-height-60 acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell acl-table__cell--align-content-center acl-helper--min-width-50">
            <div class="acl-single-checkbox">
                <input id="checkbox-demo-3" type="checkbox">
                <label for="checkbox-demo-3"></label>
            </div>
        </div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="asset-file-info">
                <img src="/assets/img/file-type-icons/google-sheets.svg">
            </div>
        </div>
        <div class="acl-table__cell "> end-of-year-financials </div>
        <div class="acl-table__cell ">Charlie Kelly</div>
        <div class="acl-table__cell">1.9MB</div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic acl-demo-small-icon-button">
                <i class="aforza-icons acl-button__icon-label">acl_download</i>
            </div>
        </div>
        <div class="acl-table__cell download-button-positioning">
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-3" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>
                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row End -->
    <!-- Row -->
    <div class="acl-table__row acl-table__row--min-height-60 acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell acl-helper--min-width-50 acl-table__cell--align-content-center">
            <div class="acl-single-checkbox">
                <input id="checkbox-demo-4" type="checkbox">
                <label for="checkbox-demo-4"></label>
            </div>
        </div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="asset-file-info">
                <img src="/assets/img/file-type-icons/google-forms.svg">
            </div>
        </div>
        <div class="acl-table__cell "> brand-guidelines </div>
        <div class="acl-table__cell ">Deandra Reynolds</div>
        <div class="acl-table__cell">1MB</div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic acl-demo-small-icon-button">
                <i class="aforza-icons acl-button__icon-label">acl_download</i>
            </div>
        </div>
        <div class="acl-table__cell download-button-positioning">
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-4" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>
                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row End -->
    <!-- Row -->
    <div class="acl-table__row acl-table__row--min-height-60 acl-table__row--align-content-vertical-center  acl-table__row--border-bottom">
        <div class="acl-table__cell acl-helper--min-width-50 acl-table__cell--align-content-center">
            <div class="acl-single-checkbox">
                <input id="checkbox-demo-5" type="checkbox">
                <label for="checkbox-demo-5"></label>
            </div>
        </div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="asset-file-info">
                <img src="/assets/img/file-type-icons/file-type.svg">
            </div>
        </div>
        <div class="acl-table__cell "> promotion-strategy </div>
        <div class="acl-table__cell ">Frank Reynolds</div>
        <div class="acl-table__cell">1.5MB</div>
        <div class="acl-table__cell acl-helper--min-width-50">
            <div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic acl-demo-small-icon-button">
                <i class="aforza-icons acl-button__icon-label">acl_download</i>
            </div>
        </div>
        <div class="acl-table__cell download-button-positioning">
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-5" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>
                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row End -->
</div>
<style>
    /* Overriding the default ACL class */
    .acl-table__row {
        /* grid-template-columns: repeat(4, 1fr) */
        grid-template-columns: 0.20fr 0.20fr 1.20fr 0.75fr 0.5fr 0.15fr 0.15fr;
        position: relative;
    }

    /* Demo styling */
    .acl-chip-label {
        margin: 5px 0;
        max-width: 100px
    }

    .asset-file-info {
        display: flex;
        user-select: none;
        justify-content: center;
        align-items: center;
        height: 30px;
        width: 30px;
        border-radius: 4px;
        background-color: #F8F8FB;
        box-shadow: 0 1px 2px 0 rgba(112, 120, 147, 0.2);
    }

    .asset-file-info img {
        height: 18px;
    }

    .download-button-positioning {
        overflow: initial;
        position: absolute;
        right: 0
    }
</style>
<script>
    const results = [{
        id: 'prev',
        value: 'Preview',
    }, {
        id: 'copy',
        value: 'Copy Link'
    }, {
        id: 'download',
        value: 'Download'
    }, {
        id: 'rename',
        value: 'Rename'
    }, {
        id: 'delete',
        value: 'Delete'
    }];
    // Dropdown // 
    const dropdownEl = document.querySelector(".acl-dropdown-demo");
    const dropdown = new acl.ACLDropdown(dropdownEl, results);
    dropdownEl.addEventListener('dropdownitemclicked', function(e) {
        console.log('dropdownitemclicked', e.detail);
    }, false);
    // Dropdown - END //
    // Dropdown // 
    const dropdownEl2 = document.querySelector(".acl-dropdown-demo-2");
    const dropdown2 = new acl.ACLDropdown(dropdownEl2, results);
    dropdownEl.addEventListener('dropdownitemclicked', function(e) {
        console.log('dropdownitemclicked', e.detail);
    }, false);
    // Dropdown - END //
    // Dropdown // 
    const dropdownEl3 = document.querySelector(".acl-dropdown-demo-3");
    const dropdown3 = new acl.ACLDropdown(dropdownEl3, results);
    dropdownEl.addEventListener('dropdownitemclicked', function(e) {
        console.log('dropdownitemclicked', e.detail);
    }, false);
    // Dropdown - END //
    // Dropdown // 
    const dropdownEl4 = document.querySelector(".acl-dropdown-demo-4");
    const dropdown4 = new acl.ACLDropdown(dropdownEl4, results);
    dropdownEl.addEventListener('dropdownitemclicked', function(e) {
        console.log('dropdownitemclicked', e.detail);
    }, false);
    // Dropdown - END //
    // Dropdown // 
    const dropdownEl5 = document.querySelector(".acl-dropdown-demo-5");
    const dropdown5 = new acl.ACLDropdown(dropdownEl5, results);
    dropdownEl.addEventListener('dropdownitemclicked', function(e) {
        console.log('dropdownitemclicked', e.detail);
    }, false);
    // Dropdown - END //
</script>