Web Component Usage Bolt Table is a web component that renders a semantic table with Bolt styles. To make a simple table, wrap a semantic <table> element with a <bolt-table> element.
Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
<bolt-table> <table> <thead> <tr> <td></td> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <th>Row 2</th> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> <tr> <th>Row 3</th> <td>R3C1</td> <td>R3C2</td> <td>R3C3</td> </tr> </tbody> <tfoot> <tr> <th>Footer</th> <td>FC1</td> <td>FC2</td> <td>FC3</td> </tr> </tfoot> </table> </bolt-table>
Prop Usage Configure the table with the properties specified in the schema.
Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5
<bolt-table format="numeric" borderless> <table> <thead> <tr> <td></td> <td>Pts</td> <td>Reb</td> <td>Ast</td> <td>Stl</td> <td>Blk</td> </tr> </thead> <tbody> <tr> <th>Michael Jordan</th> <td>70</td> <td>10</td> <td>2</td> <td>5</td> <td>1</td> </tr> <tr> <th>Toni Kukoc</th> <td>21</td> <td>15</td> <td>10</td> <td>3</td> <td>4</td> </tr> <tr> <th>Steve Kerr</th> <td>5</td> <td>2</td> <td>20</td> <td>5</td> <td>0</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>91</td> <td>27</td> <td>32</td> <td>13</td> <td>5</td> </tr> </tfoot> </table> </bolt-table>
Advanced Usage Attributes and utility classes are supported on table headers and cells.
This cell spans 2 columns and has an utility class. Column 3 Column 4
Row 1 R1C1 R1C2 This cell spans 2 columns and has an utility class.
Row 2 R2C1 R2C2 This cell spans 2 columns, 2 rows and has an utility class.
Row 3 R3C1 R3C2
Footer This cell spans 2 columns and has an utility class. FC3 FC4
<bolt-table> <table> <thead> <tr> <td></td> <th colspan="2" class="u-bolt-color-navy-light"> This cell spans 2 columns and has an utility class. </th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td>R1C1</td> <td>R1C2</td> <td colspan="2" class="u-bolt-color-orange-dark"> This cell spans 2 columns and has an utility class. </td> </tr> <tr> <th>Row 2</th> <td>R2C1</td> <td>R2C2</td> <td colspan="2" rowspan="2" class="u-bolt-color-orange-dark"> This cell spans 2 columns, 2 rows and has an utility class. </td> </tr> <tr> <th>Row 3</th> <td>R3C1</td> <td>R3C2</td> </tr> </tbody> <tfoot> <tr> <th>Footer</th> <td colspan="2" class="u-bolt-color-teal"> This cell spans 2 columns and has an utility class. </td> <td>FC3</td> <td>FC4</td> </tr> </tfoot> </table> </bolt-table>
Accepted Data Each table header or cell can accept any Bolt web components, HTML markup, or just plain text.
Item number Description Assemblies
Build 2.0.1.0 — SR-49969 This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. OpenSpan.UpdaterService.Remoting.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.Git.dll
OpenSpan.VersionFinder.exe
OpenSpan.UpdaterService.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.Initializer.exe
Build 2.0.1.0 — SR-49969 SR-44869 OpenSpan.Updater.Git.dll
Build 1.1.360 — SR-44891 SR-43163 This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated.
SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll
<bolt-table first-col-fixed-width> <table> <thead> <tr> <td></td> <th>Item number</th> <th>Description</th> <th>Assemblies</th> </tr> </thead> <tbody> <tr> <th> <bolt-text headline font-size="small" text-transform="uppercase" letter-spacing="wide"> Build 2.0.1.0 — SR-49969 </bolt-text> </th> <td> <button type="button" class="e-bolt-button e-bolt-button--small">SR-49941</button> </td> <td> This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. </td> <td> OpenSpan.UpdaterService.Remoting.dll<br> OpenSpan.Updater.ServerClientInterface.dll<br> OpenSpan.Updater.ScheduledTasks.dll<br> OpenSpan.Updater.PrePostOperation.dll<br> OpenSpan.Updater.Git.dll<br> OpenSpan.VersionFinder.exe<br> OpenSpan.UpdaterService.exe<br> OpenSpan.Updater.X509tool.exe<br> OpenSpan.Updater.UserHelper.exe<br> OpenSpan.Updater.UninstallHelper.exe<br> OpenSpan.Updater.RuntimeLauncher.exe<br> OpenSpan.Updater.InstallHelper.exe<br> OpenSpan.Updater.Initializer.exe </td> </tr> <tr> <th>Build 2.0.1.0 — SR-49969</th> <td>SR-44869</td> <td> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-50.jpg 50w, /images/placeholders/tout-4x3-climber-100.jpg 100w, /images/placeholders/tout-4x3-climber-200.jpg 200w, /images/placeholders/tout-4x3-climber-320.jpg 320w, /images/placeholders/tout-4x3-climber-480.jpg 480w, /images/placeholders/tout-4x3-climber-640.jpg 640w" alt="A Rock Climber" ratio="64/48"></bolt-image> </td> <td>OpenSpan.Updater.Git.dll</td> </tr> <tr> <th rowspan="2">Build 1.1.360 — SR-44891</th> <td>SR-43163</td> <td> This hotfix adds a list of post-update tasks to the <span>RuntimeConfig.xml </span>file. These tasks are run after files that match a pattern you specify are updated. </td> <td> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-50.jpg 50w, /images/placeholders/tout-4x3-climber-100.jpg 100w, /images/placeholders/tout-4x3-climber-200.jpg 200w, /images/placeholders/tout-4x3-climber-320.jpg 320w, /images/placeholders/tout-4x3-climber-480.jpg 480w, /images/placeholders/tout-4x3-climber-640.jpg 640w" alt="A Rock Climber" ratio="64/48"></bolt-image> </td> </tr> <tr> <td> <bolt-chip tag="a" url="#!">SR-44850</bolt-chip> </td> <td> This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. </td> <td>ManagedOpenSsl.dll</td> </tr> </tbody> </table> </bolt-table>
Table Caption Use the <caption> tag to add a caption to your table.
R1C1 R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 R3C2 R3C3
This is a table caption
<bolt-table> <table> <tbody> <tr> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> <tr> <td>R3C1</td> <td>R3C2</td> <td>R3C3</td> </tr> </tbody> <caption>This is a table caption</caption> </table> </bolt-table>