Minimal Accessible Responsive Table Plugin - jQuery Easy Table A11Y

Easy Table A11Y is a minimal(~1kb minified), accessible, responsive table jQuery plugin designed to elevate the table-viewing experience on smaller screens like mobile and tablet devices.

It works by transforming multi-column tables into concise two-column formats when viewing on small screens to improve readability without compromising on information.

How to use it:

1. Load the Easy Table A11Y plugin's script after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/easy-table.min.js"></script>

2. Simply call the function easyTableA11y on your HTML table and the plugin will take care of the rest.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Age</th>
      <th>Profession</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>USA</td>
      <td>30</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>Canada</td>
      <td>28</td>
      <td>Teacher</td>
    </tr>
    <tr>
      <td>Mark Johnson</td>
      <td>UK</td>
      <td>35</td>
      <td>Doctor</td>
    </tr>
    <tr>
      <td>Lisa Brown</td>
      <td>Australia</td>
      <td>32</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

$(function () {
  $('table').easyTableA11y()
});

3. On detecting smaller screen dimensions (< 786px), the plugin restructures the HTML table, condensing it into a two-column layout as displayed below:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Age</th>
      <th>Profession</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">John Doe</td>
      <td data-label="Country">USA</td>
      <td data-label="Age">30</td>
      <td data-label="Profession">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Jane Smith</td>
      <td data-label="Country">Canada</td>
      <td data-label="Age">28</td>
      <td data-label="Profession">Teacher</td>
    </tr>
    <tr>
      <td data-label="Name">Mark Johnson</td>
      <td data-label="Country">UK</td>
      <td data-label="Age">35</td>
      <td data-label="Profession">Doctor</td>
    </tr>
    <tr>
      <td data-label="Name">Lisa Brown</td>
      <td data-label="Country">Australia</td>
      <td data-label="Age">32</td>
      <td data-label="Profession">Designer</td>
    </tr>
  </tbody>
</table>

4. Override the default breakpoint:

$(function () {
  $('table').easyTableA11y({
    view: '468px'
  })
});

5. More configuration options:

$(function () {
  $('table').easyTableA11y({
    label: "data-label",
    selector: null,
    css: {
      trBottomBorder: '1px solid #000',
      tdMarginRight: '10px !important',
      tdFontWeight: 'bold'
    }
  })
});

Changelog:

v1.0.2 (2023-08-28)

• Fix initialization of a multiple table.
• Add configurations for plugin.

---

This awesome jQuery plugin is developed by sachinkiranti. For more Advanced Usages, please check the demo page or visit the official website.