Insites Docs Web Components V2Data DisplayInfo Table

Info Table

Published on February 17, 2021, updated on June 01, 2021

Element: <ins-info-table>

Defines a 2 column table to display data.

Complete Example

Code Snippet

<ins-info-table 
  id="info" 
  no-wrap 
  heading="This is a sample info table" 
  text-overflow="no-wrap" 
  render-html
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-info-table>

<script>
  var infoTable = document.getElementById('info');
  var infoData = [
    { "Team": "<strong style='color: #24be8d'>Insites</strong>" }, 
    { "Name": "Derek de Guzman" }, 
    { "No Data": "" }, 
    { "Contact": "<span class='icon-phone1'></span> <a href='#'>+63 219 19182210</a>" }, 
    { "Details": "This is a sample content." }
  ]
  infoTable.tableData = infoData;
</script>
Default State

Code Snippet

<ins-info-table></ins-info-table>
Loading State

Code Snippet

<ins-info-table 
  Loading-screen>
</ins-info-table>
Direct Set Value

Code Snippet

<ins-info-table 
  Id="infoTable">
</ins-info-table>

<script>
  var infoTable = document.getElementById('infoTable');
      InfoTable.loadingScreen = true;
      infoTable.loaderTitle = "Processing Data"
      infoTable.loaderMessage = "Just a moment, we're process your data.";
      infoTable.loaderIcon = "processing";
</script>

 

Properties

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
render-html boolean false true, false Allows rendering of html content for the component table-data
no-wrap boolean false true, false Removes table border and shadow styling
heading string "" any Defines table heading
table-data array [] any Defines table data, object key-value pair will be shown as the column values
text-overflow string ellipsis any Change table text-overflow from 'ellipsis' to default
loading-screen boolean false true, false Enables loader in table
loader-title string Just a moment any Defines title of loader
loader-message string We are processing your request any Defines message of loader
loader-icon string processing processing, warning, help, error, success, downloading, uploading Defines icon of loader

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.