Info Table

Last updated on August 02, 2024.

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.