rehype-responsive-tables

Rehype plugin to stack the first column cells above their rows.

Install

This package is not pure ESM, you can require it.

npm i rehype-responsive-tables

Quick Take

import { strict as assert } from "assert";
import { rehype } from "rehype";
import rehypeFormat from "rehype-format";
import rehypeResponsiveTables from "rehype-responsive-tables";

let input = `
<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </tbody>
</table>
`;

let intended = `
<table class="rrt-table">
  <tbody>
    <tr class="rrt-new-tr">
      <td class="rrt-del-td"></td>
      <td colspan="2"><span class="rrt-new-tr__span-top">a</span></td>
    </tr>
    <tr>
      <td class="rrt-del-td">a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </tbody>
</table>
`;

assert.equal(
  rehype()
    .data("settings", { fragment: true })
    .use(rehypeResponsiveTables, {
      tableClassName: "rrt-table",
    })
    .use(rehypeFormat)
    .processSync(input)
    .toString(),
  intended,
);

Documentation

Please visit codsen.com for a full description of the API. Also, try the GUI playground.

Contributing

To report bugs or request features or assistance, raise an issue on GitHub.

Licence

MIT License.

Copyright © 2010-2024 Roy Revelt and other contributors.