Component library

Info Table component

Last updated 2 November 2026

Defines a 2 column table to display data.

Live demo

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

Attributes

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

Examples

Default State

<ins-info-table></ins-info-table>

Loading State

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

Direct Set Value

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