SortedTable

The SortedTable element creates sortable, unit-aware tables. Here’s a quick table of the physical properties of random materials.

Clicking on the ↕ arrow sorts the table by that column while clicking on the unit allows the units of that column to be changed.

The table is added through a Custom HTML block in the WordPress Editor (see our limitations notes) by first loading the table library from Mechanomy and then specifying the table data, units, and style.

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

<style>
 #materialPropertiesUnits table{ font-size:medium; border-collapse: collapse; border:1px solid green; text-align:center; color: black; }
 #materialPropertiesUnits th[scope='col'] { font-family:Arial; color: #444444; background-color:#e0eee0; border:1px dashed gray;/*applies to the header*/ }
 #materialPropertiesUnits td { border:1px dashed gray; }
 #materialPropertiesUnits tr:nth-child(odd){ background-color:inherit; }
 #materialPropertiesUnits tr:nth-child(even){ background-color:#f5f5f5; }
</style>

<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>

The patterns will be easier to see if you copy the above into a text editor. The first line loads the sortedTable.js library from Mechanomy’s server. The second provides some optional styling, and the third specifies the table itself, with fields:

• 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" 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 the unit systems separated by a semicolon
• data ="Material,..." provides the table contents. Column headers are on the first line followed by an optional row of default unit, and then the table body. Three formats may be used to delineate columns and rows: tab-newline, comma-newline, comma-semicolon; the example above delineates columns with commas and rows by newline. For simplicity, the entered data must be square.