https://potch.me/js/responsive-tables.js

1const defaultStyles = (className, breakpoint, colSelectors) => `<style>
2@media screen and (max-width: ${breakpoint}) {
3  .${className}, .${className} *:is(thead, tbody, th, td, tr) { display: block; }
4  .${className} thead { display: none; }
5  .${className} tbody *:is(td, th):before {
6    content: var(--${className}-col) ': ';
7    float: left;
8    margin-right: 1rem;
9  }
10  .${className} tbody tr>* { text-align: right !important; }
11  .${className} tbody tr>*:first-child { font-weight: bold; }
12${colSelectors}
13}
14</style>`;
15
16const doc = document;
17const $ = (s, el = doc) => [...el.querySelectorAll(s)];
18const responsiveTables = ({
19  selector = "table",
20  breakpoint = "600px",
21  className = "responsive-table",
22  styles = defaultStyles,
23} = {}) => {
24  // count the number of column selectors we have to generate
25  let maxCols = 1;
26  $(selector).forEach((table) => {
27    table.classList.add(className);
28    $("thead th", table)
29      .map((th) => th.innerText)
30      .forEach((header, i) => {
31        // map the column headers to variables
32        table.style.setProperty(`--${className}-col-${i + 1}`, `"${header}"`);
33        maxCols = Math.max(maxCols, i + 1);
34      });
35  });
36  // generate general column selectors
37  let colSelectors = "";
38  for (let i = 0; i < maxCols; i++) {
39    colSelectors += `.${className} tbody tr *:nth-child(${
40      i + 1
41    }) { --${className}-col: var(--${className}-col-${i + 1}) }`;
42  }
43  doc.head.insertAdjacentHTML(
44    "beforeend",
45    styles(className, breakpoint, colSelectors)
46  );
47};
48
49export default responsiveTables;