Mechanomy

Software for Pre-CAD systems design

SortedTable

The SortedTable library creates unit-aware tables with sortable columns.

Here's a quick example table of the physical properties of common materials. Clicking the ↕ arrow sorts the table by that column while clicking on the [unit] allows the units of that column to be changed.

If your website is written in WordPress, see our WordPress demonstration website.

To add a sortableTable to your webpage, the first step is to load the library from Mechanomy as 'raw HTML':

<script defer src="https://dist.mechanomy.com/SortedTableWeb/sortedTable.js"></script>

Then at the location you want the table to display, place this rather lengthy element, again as raw HTML:

<div class="SortedTable"
        id="materialPropertiesUnits
   caption="Mechanical Properties"
     units="lbm/in3:1, kg/m3:0.000036127; psi:1, Pa:6895, MPa:0.006895"
 precision="4"
      data="Material,Specific Weight,Ultimate Tensile Strength,Ultimate Compressive Strength,Ultimate Shear Strength,Tensile Yield Strength,Shear Yield Strength,Modulus of Elasticity,Modulus of Rigidity,Coefficient of Thermal Expansion,Ductility
-,lbm/in3,psi,psi,psi,psi,psi,psi,psi,1e-6/F,pct elongation in 2 inch
Structural Steel (ASTM A36),0.284,58e3,-,-,36e3,21e3,2.90E+07,11.2,6.50E-06,21
Stainless AISI 302 Annealed,0.286,95e3,-,-,38e3,22e3,28e6,10.8e6,9.60E-06,50
Cast Iron Malleable ASTM A-47,0.264,50e3,90e3,48e3,33e3,-,24e6,9.3e6,6.70E-06,10
Aluminum 1100-H14,0.098,16e3,-,10e3,14e3,8e3,10.1e6,3.7e6,13.1e-6,9
Aluminum 6061-T6,0.098,38e3,-,24e3,35e3,20e3,10.1e6,3.7e6,1.31E-05,17
Douglas Fir,0.017,15e3,7.2e3,1.1e3,-,-,1.90E+06,1.00E+05,-,-
Polycarbonate,0.0433,9.5e3,12.5e3,-,9e3,-,3.50E+05,-,6.80E-05,110
Granite,0.100,3e3,35e3,5e3,-,-,1.00E+07,4.00E+06,4.00E-06,-"></div>

Within the sortedTable element:

  • class="sortedTable" identifies this <div> as the location for a sortedTable
  • id="materialPropertiesUnits" uniquely identifies the table on the page; if multiple tables are on the same page they need to have different ids
  • caption="Material Properties" this is the optional table title
  • units="lbm/in3:1, kg/m3:0.000036127; psi:1, Pa:6895, MPa:0.006895" specifies two unit systems that may be used in table columns, following the same format as in the UnitConverter, with unit systems separated by semicolons
  • data ="Material,..." this provides the data for the table with headers on the first line followed by an optional row of default unit, and then the table body. Three formats may be used: tab-newline, comma-newline, and comma-semicolon; the example above delineates columns with commas and rows by newline. For simplicity, the entered data must be square, which is to say that each row must have the same number of entries.

By default the sortedTable will inherit your page's default table appearance, but this can be overidden by adding a <style> tag as these examples show:

Examples

  • NEMA Motor dimensions
<style>
     #nemaSizes table{ border-collapse: collapse; text-align:center; color: black; }
     #nemaSizes th[scope='col'] { font-family:inherit; color: #444444; background-color:#dfecff;/*the header*/ }
     #nemaSizes tr:nth-child(odd){ background-color:inherit; }
     #nemaSizes tr:nth-child(even){ background-color:#f5f5f5; }
</style>
<div class="sortedTable" id="nemaSizes" caption="NEMA Motor Sizes"
units="mm:1, cm:0.1, in:0.03937; N*mm:1, N-m:0.001, ozf*in:0.1416119, lbf*in:0.0088508, lbf*ft:0.7376"
precision="4"
data="Reference, Motor Size, Bolt Hole Square, Motor Shaft Diameter, Motor Shaft Length, Average Torque
-, in, in, in, in, ozf*in
NEMA 17, 1.7, 1.220, 0.197, 0.945, 30
NEMA 12, 1.2, 1.220, 0.197, 0.945, 30
NEMA 23, 2.3, 1.854, 0.250, 0.810, 40"></div>
  • Drill and Tap sizes
<style>
     #drillTapChart table{ border: 2px red solid; text-align:center; color: black; font-size:small}
     #drillTapChart th[scope='col'] { font-family:inherit; color: #444444; background-color:#eeaaaa;/*header*/ }
     #drillTapChart tr:nth-child(odd){ background-color:inherit; }
     #drillTapChart tr:nth-child(even){ background-color:#eee; }
     #drillTapChart td {border: 1px solid black;}
</style>
<div class="sortedTable" id="drillTapChart" caption="Drill and Tap Sizes" precision="3" 
units="in:1, mm:25.4"
data="screw size number,screw size decimal,number of threads per inch, tap drill number,tap drill size,close fit drill number,close fit drill size,free fit drill number,free fit drill size;
  -,in,-,-,in,-,in,-,in;
  #000,0.0340,120,#71,0.0260,#63,0.0370,#57,0.0430;
  #0,0.0600,80,#56,0.0465,#52,0.0635,#50,0.0700;
  #00,0.0470,96,#62,0.0380,#55,0.0520,#53,0.0595;"></div>

Development Status

The SortedTable is currently being maintained. Mechanomy LLC makes this library available under the MIT License:

On third-party JavaScript

No two websites are written or hosted the same way, and the various organizations responsible for these will have a variety of policies on the use of third-party libraries. Our Javascript libraries are cleanly written to provide only the capabilities described. They do not accept personally-identifiable information from your users, nor do they utilize cookies or other local storage technologies to function and generally will not require you to display a cookie banner or other notice (understanding that compliance with any applicable authority remains your duty).

Mechanomy respects you and your users and does not perform any fingerprinting or usage tracking in these libraries. When you place one of our <script> tags on your page, the browsers of visitors to your website will download our library; this request is the only information Mechanomy receives from you or your users.

These libraries are written in vanilla JavaScript and bundled via WebPack.

Please note that libraries loaded from dist.mechanomy.com, as described above, may change at any time according to our development and maintenance needs. While we will endeavor to not change functionality, this cannot always be avoided. If you would like to receive notice of these changes, please email us.

We are also happy to assist you in evaluating these libraries by creating a static prototype of your website for your internal evaluation, please send us a link to the exact page, the desired library and functionality, and any details you know about your web framework or host.