Tablesmith Table Widget

Available to Members Only

Customer Reviews

Based on 2 reviews Write a review

Style tabular data from a comma-separated file into tasteful tables right inside your Muse project.

  • Create separate paragraph styles for Table Header, Table Data and Table Control Elements to coordinate your table with the rest of your Muse project.
  • Lots of style options inside the Style "widgette" flyout panel, including border and row styles, hover options, default sorting... all kinds of fun things.
  • Any time you want to update the data in the table, simply update the file you added inside the widget. The table on your site will update automatically!
  • Once the site is published, visitors can click on a column header to sort the table as they wish. Visitors can even drag and reorder column headers.
  • "Show / Hide Columns" lets visitors, well... show or hide columns.
  • Display the entire table, or configure the table to scroll inside a configured container, or enable "pagination" for visitors to see 10, 25 or 50 rows at a time. 

IN THE DOWNLOAD

  • MSC Widget - Tablesmith.mulib | Import this file into your Muse library panel. This one file contains the full set of widgets needed to create your own tables in Muse. 
  • Sorting Icons folder | Use the Sort Icons widgette to link to the sample arrow images in the Sorting Icons folder.
  • Sample Data  | Link to any of these CSV files from the main Tablesmith widget and play all night long.

    TO GET STARTED

    1. Become a member!
    2. Log in to your Muse Supply Co account and browse to the "My Downloads" area. 
    3. Locate the TABLESMITH - Table Widget directory listing and click on the link. 
    4. Download all the files listed to a convenient and appropriate folder on your computer.
    5. Read the README and PREPARING YOUR CSV FILE documents.
    6. Import the "MSC Widget - Tablesmith.mulib" file into the Library panel of Muse.
    7. Drag the widget set onto your canvas. The widget set contains two parts: the main Tablesmith widget, and the Paragraph Styles card.
    8. In the main Tablesmith widget flyout panel, you can either add one of the sample delimited data files included in the files you downloaded, or you can add your own. (See tips below for preparing your file.) 

    CUSTOMIZING YOUR TABLE

    The widget set is pre-formatted to deliver a tasteful table right out of the box, but the beauty and power of Tablesmith is in its advanced formatting options. 

    1. In Muse, format and save three paragraph styles for tableHeader, tableData and tableControls that match your site's theme. (We've created a video tutorial in case you're new to linking widgets to page elements via paragraph styles.)
    2. In the Styles widgette, format the borders, backgrounds and interactive states of various sections of your table.
    3. In the optional Sort Icons widgette, add the sorting icons provided in the zipped download file folder, or open the template file in PhotoShop and create your own. Or, delete the widgette from your canvas completely -- no harm, no foul. 

    TABLE DEMO and QUICKSTART TUTORIAL

    Once you have your data file formatted properly, it's time to get started in Muse. In this video, Doug shows you many of the exciting features of tables published using the Tablesmith widget, plus he shows you how to get up and running with an out-of-the-box setup.


    PREPARING YOUR DATA FILE

    There really is no data manipulation inside Muse. Sure, the technology exists, but it would come at the expense of processing and design options. Instead, we leave the data manipulation up to software designed specifically for tables, like MicroSoft Excel, Google Sheets or iOS Numbers. 

    In Excel, you'll want to make sure your data is formulated as you want it to appear on your final website.

    • Format your columns of data appropriately, as text, currency, dates, percentages, etc.
    • For United States ZIP codes, select the column in Excel and format the data using Special > ZIP Codes.
    • Clear all "empty" columns and rows by selecting them and deleting their contents, even if they appear empty.
    • Adjust your column headers as you would like them to appear; in many cases, database systems require underscores_instead_of_spaces, which can be unsightly. Designers will most likely want to delete these in Excel.
    • If you know there is data you won't want to publish, such as columns of data not relevant to your project, delete those columns in Excel and save as a new CSV. The less data in your table, the faster it will be on your website!
    • Put your most important columns in the first few columns if possible. This will mean less scrolling for your visitors.
    • Although comma-separated value files are the norm, a great option is the Unicode Text (.txt) file format, especially for datasets containing any expanded international characters.

      and then be sure to select "My file is tab-delimited (.txt)" in the main Table widget flyout panel:

    STYLING YOUR TABLE 

    Once you have your data file formatted properly and loaded into the Tablesmith main table widget, the next step is make that data look pretty. In the next video, Doug shows how the Styles "widgette" integrates with the main Tablesmith widget. Learn how to use paragraph styles and the widgette itself to match your table to the rest of your Muse website project, quickly and easily.

     


    HYPERLINKS IN YOUR TABLE

    Text Links

    If you want to have text in your table that performs as a link, you would use the following construction:

    <a href="http://mylink.com" target="_blank">TEXT TO BECOME A LINK</a>
    • The target="_blank" means that when the visitor clicks on the link, the page will open in a new window.
    • Replace the URL "http://mylink.com" with whatever page you want the link to point to.
    • Replace TEXT TO BECOME A LINK with whatever you want your link to say.

    After you've placed the widgets on your Muse page and you've imported your data file, you can format the links by applying any Hyperlink Style you've created in Muse to the datatable widget container.

    EXAMPLE:

    You want the words "Check this out!" to link to adobe.com. Here is the HTML you would use in the spreadsheet cell where you want the link to appear:

    <a href="http://adobe.com" target="_blank">Check this out!</a>
    Image Links

    If you want to have an image in your table that performs as a link, you would use the following construction:

    <a href="http://mylink.com" target="_blank"><img src="http://mysite.com/myimage.jpg" /></a>
    • The target="_blank" means that when the visitor clicks on the link, the page will open in a new window.
    • Replace the URL "http://mylink.com" with whatever page you want the link to point to.
    • Replace <img src="http://mysite.com/myimage.jpg" /> with the absolute, direct URL to the image you want as your link. Be sure to use images that are the 100% size you want to display in your table. If you are uploading the images to your Assets folder using Muse's Upload functionality, your image source will be <img src="http://mysite.com/assets/myimage.jpg" />
    EXAMPLE:

    You want a button "button.png" that you will upload to your Assets folder to appear in column one, and you want it to point to an offsite link adobe.com when a visitor clicks on it.

    <a href="http://adobe.com" target="_blank"><img src="http://mysite.com/assets/button.jpg" /></a>

    Change Log

    CHANGE LOG v1.33

    • Fixed the bug causing errors when final column of data contained commas,
    • Reorganized the flyout panel again to be more intuitive and to make room for other options.
    • Added option to enable/disable the "Show/Hide Columns" button.
    • Added option to enable/disable the "Drag Column Header" feature.
    • Added the ability to control the length of the Search Bar to the "Styles" widgette.
    • Edited and updated all flyout panel tooltips for the main Table widget.
    • Adjusted some misaligned elements, such as column headers that were "almost" centered, and table controls that were not square with the table itself.
    • Testing the option to include HTML for images, thumbnails, buttons and more. (Let us know if this works for you!)
    • Various and sundry small tinkering.

    CHANGE LOG v1.32

    • Simplified A LOT of the flyout panel options
    • Tweaked A LOT of the background color styles for MUCH greater consistency and continuity. 
    • Fine-tuned A LOT of the placement of elements in the tables. (Such as the (+) and (X) buttons for the hidden data under each row.) 
    • Added the option to designate the file delimiter used in the data file.
    • Removed the need to add the redundant "loading.gif" file
    • Renamed several of the options to increase clarity (For example, changed the option for "Ordered Column" to "Indicate Sorted Column")
    • Added a "Paragraph Styles Card" that automatically load paragraph styles. Simply adjust the word on the card, then update the style in the Paragraph Styles panel. 
    • Expanded content on the Tablesmith product page, with more explanation, more tips, and links to videos.
    • Squished a few little buggies along the way.

    KNOWN ISSUES

    CSV files that were once compressed seem to cause the widget to hang, ultimately resulting in the following prompt:

    ZIPping data can sometimes leave trace data elements in otherwise "empty" cells. That data includes compression information telling software, "Hey software, everything after this point is nothing more than a lot of empty cells." That extraneous code causes the widget to hang while it searches for more data.

    The fix for this is simple:

        1. Open the file in Excel.
        2. Select all "empty" columns.
        3. Right-click and choose "delete".
        4. Select all "empty" rows.
        5. Right-click and choose "delete".
        6. Resave the file as a CSV.

      These steps are demonstrated at approximately 3 minutes into the "Preparing your CSV file" video tutorial.

        MEMBERS ONLY DOWNLOAD

        Members Only

        This widget set is available to our All Access Members. Go to your Downloads list and you'll find this in the Members Only link. 

        Interested in becoming a member? For a low annual fee, you get access to everything on the site -- all widgets, all graphic assets, all content... everything, for a full year. 

         

        Customer Reviews

        Based on 2 reviews Write a review

        Related Products