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?

Send your suggestions using this form.