Version 7 of Table Creator released

Version 7 of Table Creator released

Jul 12, 2022

With this release, comes a whole slew of improvements and new features. It's been in the making for over a year now and the plugin has been completely rewritten from the ground up. Below is an explanation of the new features and some insight into why I choose to design and build it the way I did.

Support for libraries

The biggest change to this release is the ability to use the plugin with libraries. It's been a long-requested feature and it took a lot of trial and error to get right. Accessing a user's other files is not something the Figma development API supports, therefore, it's quite difficult for plugins and widgets to share data between files. Some plugins get around this by asking users to provide the link to the file they wish to use with the plugin and then using the REST API to access the data from that file. Other plugins store that data on a server like JSONbin which is then accessed every time the plugin is opened. However, for Table Creator, I didn't want there to be any friction getting started, so I developed my own system of sharing data between files. This solution offers zero friction to using the plugin and doesn't require any third-party integrations which might otherwise be an issue for enterprise-level use.

Multiple table designs

The next biggest change was the method used to create tables. In the previous version, you could only manage one table design. Now you can manage as many table designs as you want. This is all possible because tables are created from a single component called a template. Templates are unique because when they're imported by other files, or copied and pasted into other files, they contain all the information the plugin needs to create a table from it. This is because the instructions for creating the table are contained within the template itself. This means the plugin doesn't need to update any data about a template when part of that template changes because the template is the data itself.

New table commands

One of Table Creator's greatest features is that it makes resizing tables easy. It does this by turning the first row into a local component and duplicating it for each row. However one of the downsides to this method is that when you duplicate the table, the columns are intrinsically linked. To get around this issue I've created a new command which allows you to remove and re-apply Column Resizing. For example, say you've created a table but now you want to copy it but make one of the columns a different size, you can now select the duplicate table and click the Column Resizing button in the Properties Panel and it will re-apply the column resizing for that table.

Another new feature is the ability to flip a table between using rows and columns. To do this just select a table that you've created and click the Switch Axis button in the Properties Panel. With these new features, you now have a lot of options for how you prefer to create and manipulate tables.

Redesigned user interface

It might be hard to believe but every other version of Table Creator until now was built just using plain old HTML, CSS and JS. This version has been completely redone in Svelte offering a lot more flexibility for me as a developer to be able to make changes which in turn means a better experience for everyone.

Two new fields to specify the width and height of the table now give you the ability to create responsive tables. By default, the plugin will create dynamic tables based on the number of columns and rows you want, however, by specifying a width or height you can create a table which is responsive so the columns and rows resize when you resize the table. You can easily switch between dynamic and responsive by using the keyword "hug" for the table width and height.

The UI has also been condensed and takes up a smaller footprint than before.

Enjoy this post?

Buy Gavin McFarland a coffee

More from Gavin McFarland