Inboxes

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<!DOCTYPE html>
<html lang="en" xmlns="//www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
  <title>
   Mallet Newsletter: Expanded Table style options, updated Table column inspector, and new dynamic icons
  </title>
  <!--[if !mso]><!-- -->
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <!--<![endif]-->
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <meta content="Mallet Newsletter: Expanded Table style options, updated Table column inspector, and new dynamic icons" property="og:title"/>
  <meta content="Mallet Newsletter: Expanded Table style options, updated Table column inspector, and new dynamic icons" property="og:title"/>
  <meta content="width=device-width,initial-scale=1" name="viewport"/>
  <meta content="HubSpot" name="generator"/>
  <meta content="//retool-7660877.hs-sites.com/-temporary-slug-021716fb-ffe3-41ff-89a0-59dbceedbd31" property="og:url"/>
  <meta name="x-apple-disable-message-reformatting"/>
  <meta content="noindex,follow" name="robots"/>
 </head>
 <body style="background-color:#f5f5f5;">
  <style type="text/css">
   #outlook a {
      padding: 0;
    }
    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }
    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
  <style type="text/css">
   @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
        max-width: 100% ;
      }
      
      .mj-column-per-50 {
        width: 50% !important;
        max-width: 50%;
      }
      .mj-column-per-33-333333333333336 {
        width: 33.333333333333336% !important;
        max-width: 33.333333333333336%;
      }
    }
  </style>
  <style type="text/css">
   @media only screen and (max-width:480px) {
      table.mj-full-width-mobile {
        width: 100% !important;
      }
      td.mj-full-width-mobile {
        width: auto !important;
      }
    }
  </style>
  <style type="text/css">
   * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body {
      -webkit-font-smoothing: antialiased !important;
    }
    ul {
      margin: 0;
    }
    li {
      margin-bottom: 8px;
   
    }
    li:last-child {
      margin-bottom: 0;
    }
    li strong {
      font-weight: 600;
    }
    .link {
      color: #3574E3 !important;
      text-decoration: none !important;
    }
    
    .grey-link {
      color: #979797 !important;
      text-decoration: none !important;
    }  
    @media (max-width: 599px) {
      .hide-mobile table {
        display: none;
        mso-hide: all;
        max-height: 0;
        overflow: hidden;
      }
      .main>table>tbody>tr>td:first-child {
        padding: 20px !important;
      }
      .main {
        border-radius: 6px !important;
      }
    }
  </style>
  <div id="preview_text" style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
   Expanded Table style options, an updated Table column inspector, and new dynamic icons.
  </div>
  <div style="background-color:#f5f5f5;">
   <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="hide-mobile-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div class="hide-mobile" style="margin:0px auto;max-width:600px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
     <tbody>
      <tr>
       <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
         <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
          <tbody>
           <tr>
            <td style="vertical-align:top;padding:0;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
              <tbody>
               <tr>
                <td style="font-size:0px;padding:0;word-break:break-word;">
                 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                 <div style="height:26px;">
                 </div>
                 <!--[if mso | IE]></td></tr></table><![endif]-->
                </td>
               </tr>
              </tbody>
             </table>
            </td>
           </tr>
          </tbody>
         </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="main-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div class="main widget-span widget-type-email_body" data-widget-type="email_body" style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:6px;max-width:600px;">
    <div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text" id="hs_cos_wrapper_hs_email_body" style="color: inherit; font-size: inherit; line-height: inherit;">
     <table align="center" cellspacing="0" role="presentation" style="background: #ffffff; width: 100%; border-radius: 6px; border-width: 0px;">
      <tbody>
       <tr>
        <td style="direction: ltr; font-size: 0px; padding: 48px 30px 28px; text-align: center; border-width: 0px;">
         <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:480px;" ><![endif]-->
         <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
          <table cellspacing="0" role="presentation" style="border-width: 0px;" width="100%">
           <tbody>
            <tr>
             <td style="vertical-align: top; padding: 0px; border-width: 0px;">
              <table cellspacing="0" role="presentation" style="width: 100%; border-width: 0px;" width="100%">
               <tbody>
                <tr style="height: 21px;">
                 <td align="left" style="font-size: 0px; word-break: break-word; height: 21px; border-width: 0px; padding: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 100px; border-width: 0px; padding: 0px;">
                      <img alt="Retool logo" height="20" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3399nw8s4ngfo.cloudfront.net%252Fhtml_email_assets%252Fretool_logo_lockup_200x40.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkMzM5OW53OHM0biJ9:1nFKK4:CzU8BJjE0H6RDDUu8xWbn727nuJ8za3F8wQapIEuqL0" style="border: 0; display: block; outline: none; text-decoration: none; height: 20px; width: 100%; font-size: 13px;" width="100"/>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td style="direction: ltr; font-size: 0px; padding: 0px; text-align: center; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;"><![endif]-->
                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
                   <table cellspacing="0" role="presentation" style="vertical-align: top; border-width: 0px;" width="100%">
                    <tbody>
                     <tr>
                      <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                       <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                        <tbody>
                         <tr>
                          <td style="width: 550px; border-width: 0px; padding: 0px;">
                           <a data-hs-link-id="0" linktext="  " rel="noopener" target="_blank">
                            <img alt="The Mallet" src="https://inboxflows.com/_/image/https%253A%252F%252Fuserimg-bee.customeriomail.com%252Fimages%252Fclient-env-76159%252Fmallet-header.jpg/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZ1c2VyaW1nLWJlZSJ9:1nFKK4:GQbfOee-KyMrH1tguULawcjXMeVuQBemui6hOCSN2Bc" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                           </a>
                          </td>
                         </tr>
                        </tbody>
                       </table>
                      </td>
                     </tr>
                    </tbody>
                   </table>
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 20px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 20px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   👋  Hello, Retool community, and happy new year! The Mallet is back in 2022 covering a few exciting updates including dynamic icons and several new changes to our Table component, like the column inspector and expanded style options. Read on to learn more, and keep up in real time with
                   <a data-hs-link-id="1" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    our changelog
                   </a>
                   .
                  </div>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="16" style="height:16px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: left; color: #262626;">
                   🚀  Product updates
                  </div>
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                  </div>
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" rel="noopener" target="_blank">
                       <img alt="Dynamic icons" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fdyn-icons-min.gif%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Ddyn-icons-min.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1nFKK4:CXgKP3gQ782UwnqmjtKQm75ZKIJYuzR0Dk8o4F4I_gg" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/dyn-icons-min.gif?upscale=true&amp;width=1100&amp;upscale=true&amp;name=dyn-icons-min.gif 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/dyn-icons-min.gif?upscale=true&amp;width=2200&amp;upscale=true&amp;name=dyn-icons-min.gif 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     Dynamic icons
                    </span>
                   </strong>
                   — Anywhere in Retool where you can add an icon, like a prefix/suffix icon for Text Input components, you can now dynamically change it based on any Javascript expression! Type the new command /icon to pop up the new icon picker to choose from over 3,000 searchable icons with support for bold and outline styles. Learn more in the
                   <a data-hs-link-id="1" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    changelog
                   </a>
                   . 👉
                  </div>
                 </td>
                </tr>
                <tr style="height: 20px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 20px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 10px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 10px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" rel="noopener" target="_blank">
                       <img alt="New Table style options" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fupdated-table-columns-inspector.jpeg%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Dupdated-table-columns-inspector.jpeg/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1nFKK4:CXgKP3gQ782UwnqmjtKQm75ZKIJYuzR0Dk8o4F4I_gg" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/updated-table-columns-inspector.jpeg?upscale=true&amp;width=1100&amp;upscale=true&amp;name=updated-table-columns-inspector.jpeg 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/updated-table-columns-inspector.jpeg?upscale=true&amp;width=2200&amp;upscale=true&amp;name=updated-table-columns-inspector.jpeg 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     Updated Table columns inspector
                    </span>
                   </strong>
                   —We’re making a ton of improvements to our Table component, starting with more options and improved ergonomics in our columns inspector. Changes include a more compact column list, reorganized column settings with more room to write code, and the ability to make a column editable directly from the inspector. Check out more details in the
                   <a data-hs-link-id="1" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    changelog
                   </a>
                   . 👉
                  </div>
                 </td>
                </tr>
                <tr style="height: 26px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 26px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 26px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" rel="noopener" target="_blank">
                       <img alt="New Table style options" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fnew-table-styles.jpeg%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Dnew-table-styles.jpeg/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1nFKK4:CXgKP3gQ782UwnqmjtKQm75ZKIJYuzR0Dk8o4F4I_gg" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/new-table-styles.jpeg?upscale=true&amp;width=1100&amp;upscale=true&amp;name=new-table-styles.jpeg 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/new-table-styles.jpeg?upscale=true&amp;width=2200&amp;upscale=true&amp;name=new-table-styles.jpeg 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     New Table style options
                    </span>
                   </strong>
                   —Fully customize the look of your tables with 15 style options. Configure row color dynamically, edit color border visibility, set zebra striping, and achieve more fine-grained control over header, toolbar, and cell styles. Take a look at the full details in the
                   <a data-hs-link-id="1" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    changelog
                   </a>
                   . 👉
                   <br/>
                   <br/>
                   🛠
                   <a data-hs-link-id="2" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    See everything we’ve shipped in the Retool changelog
                   </a>
                  </div>
                 </td>
                </tr>
                <tr style="height: 26px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 26px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 26px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr style="height: 36px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                      <div style="height: 36px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                       <strong>
                        💡
                        <span style="color: #262626;">
                         Community Highlights
                        </span>
                       </strong>
                       <br/>
                       <span>
                       </span>
                       <span style="color: #262626;">
                        <span>
                        </span>
                       </span>
                      </div>
                      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                       <br/>
                       <div>
                        <div>
                         Check out how user
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          bradlymathews
                         </a>
                         built a Retool app to
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          centralize and track the accounting operations
                         </a>
                         for the rental unit in his backyard.
                        </div>
                        <div>
                        </div>
                        <div>
                         See how James Weakley, CEO at Omnata,
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          built SQL Draw
                         </a>
                         (a Slack-based game combining SQL with cartesian geometry, art, creativity, and teamwork) using Retool to power the leaderboard and artwork browser.
                        </div>
                        <div>
                        </div>
                        <div>
                         To get more involved in our user community, including our bi-weekly community newsletter for advanced builders, The Toolshed,
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          sign up for the Retool Community
                         </a>
                         or request access to our
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          power users Slack group
                         </a>
                         .
                        </div>
                       </div>
                      </div>
                     </td>
                    </tr>
                    <tr style="height: 10px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 10px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="16" style="height:16px;"><![endif]-->
                      <div style="height: 10px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr style="height: 20px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                      <div style="height: 20px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr style="height: 2px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                      <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                      </p>
                     </td>
                    </tr>
                    <tr style="height: 36px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                      <div style="height: 36px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                       <strong>
                        📚
                        <span style="color: #262626;">
                         Recommended Reading
                        </span>
                       </strong>
                       <br/>
                       <span>
                       </span>
                       <span style="color: #262626;">
                        <span>
                        </span>
                       </span>
                      </div>
                      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                       <br/>
                       <div>
                        <div>
                         Struggling to grasp advanced concepts in TypeScript? We’ve written up a guide walking you through
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          how to get the best of TypeScript control flow analysis
                         </a>
                         (and stay away from the
                         <code>
                          <span style="background-color: #ededed;">
                           any
                          </span>
                         </code>
                         type).
                        </div>
                        <div>
                        </div>
                        <div>
                         Chris Smith, developer evangelist at Retool, demonstrates how to
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          build and run CRUD operations against a prototype application
                         </a>
                         using Retool with SQL Server for your data store.
                        </div>
                        <div>
                        </div>
                        <div>
                         Chris has also taken to the Retool YouTube channel with a speedy new tutorial covering
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          how to build an admin panel for Supabase
                         </a>
                         in just 10 minutes.
                        </div>
                        <div>
                        </div>
                        <div>
                         See how the Customer Success team at Retool built a
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          Customer Success dashboard
                         </a>
                         to centralize customer data and better support our users.
                        </div>
                        <div>
                        </div>
                        <div>
                         Lastly, in December, we
                         <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                          announced our Series C
                         </a>
                         ! While we’re thrilled about this important milestone, we’re even more invigorated to move closer to our goal of bringing better software to everyone. Our future is made brighter by great builders like you.
                        </div>
                       </div>
                      </div>
                     </td>
                    </tr>
                    <tr style="height: 16px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="16" style="height:16px;"><![endif]-->
                      <div style="height: 16px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr style="height: 16px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                      <div style="height: 16px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr style="height: 2px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                      <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                      </p>
                     </td>
                    </tr>
                    <tr style="height: 16px;">
                     <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                      <div style="height: 16px;">
                      </div>
                      <!--[if mso | IE]></td></tr></table><![endif]-->
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                       That's all for this month. As always, if you need anything (or just want to say hello), feel free to hit reply.
                       <br/>
                       <br/>
                       Kiersten Nordin
                       <br/>
                       PMM @ Retool
                      </div>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
               </tbody>
              </table>
              <!--[if mso | IE]></td></tr></table><![endif]-->
             </td>
            </tr>
           </tbody>
          </table>
         </div>
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
   <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div style="margin:0px auto;max-width:600px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
     <tbody>
      <tr>
       <td style="direction:ltr;font-size:0px;padding:24px 48px;text-align:center;">
        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]-->
        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
         <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
          <tbody>
           <tr>
            <td style="vertical-align:top;padding:0;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
              <tbody>
               <tr>
                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                 <div style="font-family:-apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-size:13px;line-height:18px;text-align:center;color:#979797;">
                  <span class="grey-link footer-company">
                   ©
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" style="color: #979797;text-decoration: none;" target="_blank">
                    Retool, Inc.
                   </a>
                  </span>
                  <span class="grey-link footer-address">
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" style="color: #979797;text-decoration: none;" target="_blank">
                    292 Ivy St. San Francisco, CA 94102
                   </a>
                  </span>
                 </div>
                </td>
               </tr>
               <tr>
                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                 <div style="font-family:-apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-size:13px;line-height:18px;text-align:center;color:#979797;">
                  <span class="footer-address">
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" data-unsubscribe="true" style="color: #979797;text-decoration: none;" target="_blank">
                    Update Email Preferences
                   </a>
                  </span>
                  <span class="footer-bullet">
                   ·
                  </span>
                  <span class="footer-address">
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" data-unsubscribe="true" style="color: #979797;text-decoration: none;" target="_blank">
                    Unsubscribe
                   </a>
                  </span>
                 </div>
                </td>
               </tr>
              </tbody>
             </table>
            </td>
           </tr>
          </tbody>
         </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
  <img alt="" border="0" height="1" src="https://inboxflows.com/_/image/https%253A%252F%252FcWGb504.na1.hubspotlinks.com%252FBto%252FLY%252B113%252FcWGb504%252FVVNYNH26YXhJW92nD6g59_nTWW8kTzPf4F2ZlCW1m0Fbl8fYFPK2l71/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjV0diNTA0Lm5hMSJ9:1nFKK4:C6wViDiu6ope9PEG2ufbVOxY7Ueubywf5sjnu1wCnoI" style="display:none!important;min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important" width="1"/>
 </body>
</html>