Comparison table image for a docs page

A tech writer needs this when a table has to be an image: for social, or for a PDF handoff. The live docs page can keep the HTML table. The handoff cannot. Adding a row should be adding an array element, not opening a design file to stretch a grid.

This happens when the handoff needs an image, not every time the table is edited. The person doing it already owns the columns and rows. They should not rebuild the grid by hand for one extra row.

The job is one PNG sized to the table. You fill { columns: [], rows: [[]] } in one data file. The component maps the header row and the body rows. You export. The next row is another array element and the same command.

Give Lerret a React component under .lerret/ and a data file. export writes a PNG. Same table, new row, new image.

The component is .lerret/docs/comparison-table.jsx. It draws a header row plus mapped body rows. The columns are data. The rows are data. The table’s own styles handle the rest. You do not set a cell width in a second tool.

Data is { columns: [], rows: [[]] } in one data file. One file, one table, one image. If you later need a second table, that is another artboard and another file. This case is the one table the page needs as an image.

The image is a PNG sized to the table. The header is columns. The body is rows, an array of arrays. The handoff is the PNG. The live docs page can keep the HTML table.

Adding a row is adding an array element. The table’s own styles handle the rest. A design-file table will reflow by hand the first time a cell runs long. You use Lerret because the image is the table data, and the data is an array you already have.

The table is an image for social or a PDF handoff. The component is a header row plus mapped body rows. Adding a row is adding an array element. The table’s own styles handle the rest. The image is a still from a local file.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.