Table Responsive

table-responsive.js

const makeTableResponsive = (mq, t) => {
    var q = window.matchMedia(mq);
    if (q.matches) {
        let headings = [];
        let tables = document.querySelectorAll(t);
        if (tables && tables.length > 0) {
            tables.forEach(table => {
                let thead = table.querySelector("thead");
                let headingTags = thead.querySelectorAll("th");
                let tbody = table.querySelector("tbody");
                let tbodies = tbody.querySelectorAll("tr");
    
                tbody.style.display = "block";
                thead.style.display = "none";
    
                headingTags.forEach((th) => {
                    th.style.display = "block";
                    headings.push(th.innerText);
                });
    
                tbodies.forEach((tr) => {
                    let trstyle = tr.style;
                    trstyle.display = "block";
                    trstyle.border = "1px solid #ccc";
                    trstyle.marginBottom = "30px";
    
                    let tds = tr.querySelectorAll("td");
                    tds.forEach((td, i) => {
                        td.style.display = "flex";
                        td.style.flexDirection = "row-reverse";
                        td.style.justifyContent = "space-between";
                        td.innerHTML += `<span class="font-weight-bold text-primary">${headings[i]}</span>`;
                    });
                });
            })
        }
    }
};


makeTableResponsive('(max-width: 992px)', 'table');