Insites Docs Web Components V2Data DisplayTable

Table

Last updated on July 04, 2025.

Element: <ins-table>

Defines a table.

 

Static Table

 
Using the attribute static-table, you can manually construct your table rows and columns and apply your own HTML layout & styling
 
To do this, you can nest these sub-components:
 

Insites Base Table Row <ins-table-row>

 
Defines a table <tr> element
 

Insites Base Table Header <ins-table-th>

 
Defines a table <tr> element
 

Insites Base Table Data / Column <ins-table-td>

 
Defines a table <td> element
 

Sample Static Table
Table Header 1 Table Header 2 Row 1 Table Data 1 Row 1 Table Data 2 Row 2 Table Data 1 Row 2 Table Data 2

Code Snippet

<ins-table 
  static-table 
  without-pagination>

  <ins-table-row>

    <ins-table-th>
      Table Header 1
    </ins-table-th>

    <ins-table-th>
      Table Header 2
    </ins-table-th>

  </ins-table-row>

  <ins-table-row>

    <ins-table-td>
      Row 1 Table Data 1
    </ins-table-td>

    <ins-table-td>
      Row 1 Table Data 2
    </ins-table-td>

  </ins-table-row>

  <ins-table-row>
 
   <ins-table-td>
      Row 2 Table Data 1
    </ins-table-td>

    <ins-table-td>
      Row 2 Table Data 2
    </ins-table-td>
 
 </ins-table-row>

</ins-table>
Editable Table

 
Setting the table header attribute editable to true, you can change the functionality of your table row action to be "edit row data".
 
Use the event "onTableBulkAction" to catch the event details.
 

Code Snippet

<ins-table 
  id="fieldTable" 
  default-bulk-action="Update" 
  without-pagination 
  without-search>
</ins-table>

<style>
  // CSS for table tags
  #fieldTable .tagged.Active span { background-color: #24be8d; color: #fff; }
  #fieldTable .tagged span { background-color: #d4d4d4; color: #636363; padding: 6px 10px; font-size: 11px; border-radius: 4px; }
</style>

<script>
  var fieldTable = document.getElementById('fieldTable');
  var dateFormat = "MM/DD/YYYY"

  // set table bulk actions
  fieldTable.bulkActions = ["Update"];

  // set table headers
  fieldTable.tableHeaders = [
    { label: 'Name', type: "string", editable: true },
    { label: 'Birthday', type: "date", editable: true },
    { label: 'Status', type: "select", hasTag: true, editable: true,
        selectOptions: ['Active', 'Inactive'] }
  ];

  // set table data
  fieldTable.tableData = [
    { "id": "sample-001", "Name": "John Doe", "Birthday": "01/02/1990", "Status": "Active" },
    { "id": "sample-002", "Name": "Derek de Guzman", "Birthday": "11/29/1990", "Status": "Inactive" }
  ];

  // add table event listener
  fieldTable.addEventListener('onTableBulkAction', function(event) {
    console.log('Edit table event', event.detail);
    alert("Check console log for event data");
  });
</script>
Add Event Listener

Code Snippet

<script>
  insBaseTable.addEventListener('insPaginationChange', tablePaginationHandler);
  insBaseTable.addEventListener('insTableSearch', tableSearchHandler);
  insBaseTable.addEventListener('insTableSort', tableSortHandler);
  insBaseTable.addEventListener('insTableBulkAction', tableBulkActionHandler);
  insBaseTable.addEventListener('insTableRowAction', tableRowActionHandler);
</script>
Set Initial Properties

Code Snippet

<script>
  var insBaseTable = document.getElementById('insBaseTable');
  var rawData = [];
  var filteredData = [];
  var displayedData = [];
  var tableHeaders = [];
  var totalCount = 0;
  var pageNumber = 1;
  var pageSize = 10;
  var searchKeyword = '';
  var sortedKeyword = '';

  insBaseTable.loadingScreen = true;
  insBaseTable.bulkActions = ['Archive'];
  insBaseTable.rowActions = ['Archive'];
</script>
Complete Example
Table Pagination Handler

Code Snippet

<script>
function tablePaginationHandler(event){
  insBaseTable.loadingScreen = true;
  pageSize = event.detail.pageSize;
  pageNumber = event.detail.pageNumber;
  processTableData()
}
</script>
Table Search Handler

Code Snippet

<script>
function tableSearchHandler(event){
  insBaseTable.loadingScreen = true;
  searchKeyword = event.detail.value;

  if (!searchKeyword) {
    processTableData();
    return;
  }

  filteredData = [];
  rawData.forEach((value) => {
    Object.keys(value).forEach((key) => {
      if (key === 'Default Column'){
        var match = value[key];
        if (match.toLowerCase().includes(searchKeyword.toLowerCase())) {
          filteredData.push(value);
        }
      }
    });
  });

  if (sortedKeyword && filteredData.length > 1) {
    filteredData.sort(dynamicKeySort(sortedKeyword));
  }
  insBaseTable.pageNumber = 1;
  processTableData();

  if (!filteredData.length) {
    insBaseTable.loadingScreen = true;
    insBaseTable.loaderTitle = '';
    insBaseTable.loaderMessage = 'No result found for "' + searchKeyword + '"';
    insBaseTable.loaderIcon = '';
  }
}
</script>
Multiple Tags Example

Code Snippet

<ins-table
  id="multipleTagsEl"
  without-search
  without-pagination>
</ins-table>

<style>
  #multipleTagsEl .ibt-tag.Active { background-color: #24be8d; color: #fff; }
  #multipleTagsEl .ibt-tag.Inactive { background-color: #ff0000; color: #fff; }
  #multipleTagsEl .ibt-tag { background-color: #d4d4d4; color: #636363; padding: 6px 10px; font-size: 11px; border-radius: 4px; line-height: 1; }
</style>

<script>
  var multipleTagsEl = document.getElementById('multipleTagsEl');

  multipleTagsEl.tableHeaders = [
    { label: 'Name', type: "string"},
    { label: 'Status', type: "select", hasTag: true, multipleTags: true, selectOptions: ['Active', 'Inactive'] }
  ];

  multipleTagsEl.tableData = [
    { "Name": "John Doe", "Status": ["Active", "Inactive"] },
    {  "Name": "Maria Clara", "Status": ["Inactive"] },
    {  "Name": "Juan Cruz", "Status": null }
  ];
</script>
Table Sort Handler

Code Snippet

<script>
function tableSortHandler(event){
  sortedKeyword = event.detail.order === 'asc' ? event.detail.keyword : `-${event.detail.keyword}`;
  if (searchKeyword){
    filteredData.sort(dynamicKeySort(sortedKeyword));
  } else {
    rawData.sort(dynamicKeySort(sortedKeyword));
  }
  processTableData();
}
</script>
Table Bulk Action Handler

Code Snippet

<script>
function tableBulkActionHandler(event){
  if (event.detail.action === 'Archive'){
    archiveSelection(event.detail.selections);
  }
}
</script>
Table Row Action Handler

Code Snippet

<script>
function tableRowActionHandler(event){
  if (event.detail.action === 'Archive'){
    archiveItem(event.detail.data);
  }
}
</script>
Process Table Data

Code Snippet

<script>
function processTableData(){
  var last_index = pageNumber * pageSize;
  var first_index = (last_index - pageSize) + 1;

  displayedData = [];

  if (searchKeyword) {

    filteredData.forEach((value, index) => {
      if (index >= first_index && index < last_index) {
        displayedData.push(value);
      } else if (filteredData.length < pageSize){
        displayedData.push(value);
      }
    });
    insBaseTable.totalCount = filteredData.length;

  } else {

    rawData.forEach((value, index) => {
      if (index >= first_index && index < last_index) {
        displayedData.push(value);
      }
    });
    insBaseTable.totalCount = rawData.length;

  }

  insBaseTable.tableData = displayedData;
  insBaseTable.loadingScreen = false;
}
</script>
Dynamic Key Sort

Code Snippet

<script>
function dynamicKeySort(key) {
  var OrderSortIndex = 1;

  if (key[0] === "-") {
    OrderSortIndex = -1;
    key = key.substr(1);
  }

  return function (a, b) {
    var num = (a[key] < b[key]) ? -1 : (a[key] > b[key]) ? 1 : 0;
    return num * OrderSortIndex;
  }
}
</script>
InsBaseTableHeader Demo

Code Snippet

<script>
window.addEventListener('load', () => {
  var table = document.getElementById('insBaseTableHeaders');

  table.totalCount = 1;
  table.tableHeaders = [
    { label: "String", type: 'string' },
    { label: "Number", type: 'number' },
    { label: "Currency", type: 'currency' }
  ];

  table.tableData = [
    { id: 1, "String": "John Doe", "Number":  100, "Currency": 99.99 }
  ]
});
</script>

Code Snippet

<ins-table
  id="insBaseTableHeaders"
  heading="Table Search"
  bar-placeholder="Search..."
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-table>
Initial Search Example

Code Snippet

<ins-table
  id="initialTableEl"
  heading="Table Initial Value"
  initial-search="John Doe">
</ins-table>

<script type="text/javascript">
  var initialTableEL = document.getElementById('initialTableEl');
  
  initialTableEL.totalCount = 1;
  initialTableEL.tableHeaders = [
    { label: "String", type: 'string' },
    { label: "Number", type: 'number' },
    { label: "Currency", type: 'currency' }
  ];

  initialTableEL.tableData = [
    { id: 1, "String": "John Doe", "Number":  100, "Currency": 99.99 }
  ];
</script>
Timezone Overlay Example

To enable timezone overlay, tableHeaders column type must be date_time
You can customize the timezones in the overlay using date_format.

 

date_format keys

 

Key Options Description
date_time_format YYYY-MM-DD HH:mm / MM-DD-YYYY H:mm A (see Date and Time Formats) Date and Time format
instance_time any Instance Time
instance_timezone (see Timezones for overlay) Instance Timezone

 

Date and Time Formats

 

Format Output Description
YY 18 Two-digit year
YYYY 2018 Four-digit year
M 1-12 The month, beginning at 1
MM 01-12 The month, 2-digits
MMM Jan-Dec The abbreviated month name
MMMM January-December The full month name
D 1-31 The day of the month
DD 01-31 The day of the month, 2-digits
H 0-23 The hour
HH 00-23 The hour, 2-digits
h 1-12 The hour, 12-hour clock
hh 01-12 The hour, 12-hour clock, 2-digits
m 0-59 The minute
mm 00-59 The minute, 2-digits
s 0-59 The second
ss 00-59 The second, 2-digits
A AM PM Meridiem
a am pm Meridiem

Code Snippet

<ins-table
  id="timezoneOverlayTable"
  no-wrap
  heading="Timezone Overlays"
  without-search
  without-pagination>
</ins-table>

<script>
  var timezoneOverlayTable = document.getElementById('timezoneOverlayTable');
  
  timezoneOverlayTable.tableHeaders = [
    { label: 'Greenwich Mean Time (+0)', type: "date_time", date_format: { date_time_format: "DD/MM/YYYY HH:mm", instance_time: "UTC+0", instance_timezone: "+0000@Greenwich Mean Time: Dublin, Edinburgh, Lisbon, London" } },
    { label: 'Kuala Lumpur, Singapore (+8)', type: "date_time", date_format: { date_time_format: "MM-DD-YYYY h:mm A", instance_time: "UTC+8", instance_timezone: "+0800@Kuala Lumpur, Singapore" } },
    { label: 'Canberra, Melbourne, Sydney (+10)', type: "date_time", date_format: { date_time_format: "YYYY-MM-DD HH:mm:ss", instance_time: "UTC+10", instance_timezone: "+1000@Canberra, Melbourne, Sydney" } },
  ];

  timezoneOverlayTable.tableData = [
    { "Greenwich Mean Time (+0)": "31/01/2000 18:00", "Kuala Lumpur, Singapore (+8)": "01-31-2000 6:00 PM", "Canberra, Melbourne, Sydney (+10)": "2000-01-31 18:00:00" },
    { "Greenwich Mean Time (+0)": "12/12/2010 00:00", "Kuala Lumpur, Singapore (+8)": "12-12-2000 12:00 AM", "Canberra, Melbourne, Sydney (+10)": "2000-12-12 00:00:00" },
    { "Greenwich Mean Time (+0)": "08/11/2020 12:00", "Kuala Lumpur, Singapore (+8)": "11-08-2000 12:00 PM", "Canberra, Melbourne, Sydney (+10)": "2000-11-08 12:00:00" }
  ];
</script>

 

Timezones for overlay

 

Value Description
-1200@International Date Line West (UTC-12:00) International Date Line West
-1100@Midway Island, Samoa (UTC-11:00) Midway Island, Samoa
-1000@Hawaii (UTC-10:00) Hawaii
-0900@Alaska (UTC-09:00) Alaska
-0800@Pacific Time (US & Canada) (UTC-08:00) Pacific Time (US & Canada)
-0800@Tijuana, Baja California (UTC-08:00) Tijuana, Baja California
-0700@Arizona (UTC-07:00) Arizona
-0700@Chihuahua, La Paz, Mazatlan (UTC-07:00) Chihuahua, La Paz, Mazatlan
-0700@Mountain Time (US & Canada) (UTC-07:00) Mountain Time (US & Canada)
-0600@Central America (UTC-06:00) Central America
-0600@Central Time (US & Canada) (UTC-06:00) Central Time (US & Canada)
-0600@Guadalajara, Mexico City, Monterrey (UTC-06:00) Guadalajara, Mexico City, Monterrey
-0600@Saskatchewan (UTC-06:00) Saskatchewan
-0500@Bogota, Lima, Quito, Rio Branco (UTC-05:00) Bogota, Lima, Quito, Rio Branco
-0500@Eastern Time (US & Canada) (UTC-05:00) Eastern Time (US & Canada)
-0500@Indiana (East) (UTC-05:00) Indiana (East)
-0400@Atlantic Time (Canada) (UTC-04:00) Atlantic Time (Canada)
-0400@Caracas, La Paz (UTC-04:00) Caracas, La Paz
-0400@Manaus (UTC-04:00) Manaus
-0400@Santiago (UTC-04:00) Santiago
-0330@Newfoundland (UTC-03:30) Newfoundland
-0300@Brasilia (UTC-03:00) Brasilia
-0300@Buenos Aires, Georgetown (UTC-03:00) Buenos Aires, Georgetown
-0300@Greenland (UTC-03:00) Greenland
-0300@Montevideo (UTC-03:00) Montevideo
-0200@Mid-Atlantic (UTC-02:00) Mid-Atlantic
-0100@Cape Verde Is. (UTC-01:00) Cape Verde Is.
-0100@Azores (UTC-01:00) Azores
+0000@Casablanca, Monrovia, Reykjavik (UTC+00:00) Casablanca, Monrovia, Reykjavik
+0000@Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London (UTC+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London
+0100@Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna (UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna
+0100@Belgrade, Bratislava, Budapest, Ljubljana, Prague (UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague
+0100@Brussels, Copenhagen, Madrid, Paris (UTC+01:00) Brussels, Copenhagen, Madrid, Paris
+0100@Sarajevo, Skopje, Warsaw, Zagreb (UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb
+0100@West Central Africa (UTC+01:00) West Central Africa
+0200@Amman (UTC+02:00) Amman
+0200@Athens, Bucharest, Istanbul (UTC+02:00) Athens, Bucharest, Istanbul
+0200@Beirut (UTC+02:00) Beirut
+0200@Cairo (UTC+02:00) Cairo
+0200@Harare, Pretoria (UTC+02:00) Harare, Pretoria
+0200@Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius (UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius
+0200@Jerusalem (UTC+02:00) Jerusalem
+0200@Minsk (UTC+02:00) Minsk
+0200@Windhoek (UTC+02:00) Windhoek
+0300@Kuwait, Riyadh, Baghdad (UTC+03:00) Kuwait, Riyadh, Baghdad
+0300@Moscow, St. Petersburg, Volgograd (UTC+03:00) Moscow, St. Petersburg, Volgograd
+0300@Nairobi (UTC+03:00) Nairobi
+0300@Tbilisi (UTC+03:00) Tbilisi
+0330@Tehran (UTC+03:30) Tehran
+0400@Abu Dhabi, Muscat (UTC+04:00) Abu Dhabi, Muscat
+0400@Baku (UTC+04:00) Baku
+0400@Yerevan (UTC+04:00) Yerevan
+0430@Kabul (UTC+04:30) Kabul
+0500@Yekaterinburg (UTC+05:00) Yekaterinburg
+0500@Islamabad, Karachi, Tashkent (UTC+05:00) Islamabad, Karachi, Tashkent
+0530@Sri Jayawardenapura (UTC+05:30) Sri Jayawardenapura
+0530@Chennai, Kolkata, Mumbai, New Delhi (UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi
+0545@Kathmandu (UTC+05:45) Kathmandu
+0600@Almaty, Novosibirsk (UTC+06:00) Almaty, Novosibirsk
+0600@Astana, Dhaka (UTC+06:00) Astana, Dhaka
+0630@Yangon (Rangoon) (UTC+06:30) Yangon (Rangoon)
+0700@Bangkok, Hanoi, Jakarta (UTC+07:00) Bangkok, Hanoi, Jakarta
+0700@Krasnoyarsk (UTC+07:00) Krasnoyarsk
+0800@Beijing, Chongqing, Hong Kong, Urumqi (UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi
+0800@Kuala Lumpur, Singapore (UTC+08:00) Kuala Lumpur, Singapore
+0800@Irkutsk, Ulaan Bataar (UTC+08:00) Irkutsk, Ulaan Bataar
+0800@Perth (UTC+08:00) Perth
+0800@Taipei (UTC+08:00) Taipei
+0900@Osaka, Sapporo, Tokyo (UTC+09:00) Osaka, Sapporo, Tokyo
+0900@Seoul (UTC+09:00) Seoul
+0900@Yakutsk (UTC+09:00) Yakutsk
+0930@Adelaide (UTC+09:30) Adelaide
+0930@Darwin (UTC+09:30) Darwin
+1000@Brisbane (UTC+10:00) Brisbane
+1000@Canberra, Melbourne, Sydney (UTC+10:00) Canberra, Melbourne, Sydney
+1000@Hobart (UTC+10:00) Hobart
+1000@Guam, Port Moresby (UTC+10:00) Guam, Port Moresby
+1000@Vladivostok (UTC+10:00) Vladivostok
+1100@Magadan, Solomon Is., New Caledonia (UTC+11:00) Magadan, Solomon Is., New Caledonia
+1200@Auckland, Wellington (UTC+12:00) Auckland, Wellington
+1200@Fiji, Kamchatka, Marshall Is. (UTC+12:00) Fiji, Kamchatka, Marshall Is.
+1300@Nuku'alofa (UTC+13:00) Nuku'alofa

 

Search Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
search-position string right right, left Changes search field position
without-search boolean false true, false Removes search input field
search-bar-placeholder string "" any Defines the short hint that describes the expected value in the input field
initial-search string "" any Sets default value of the table search input field

 

Pagination Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
without-pagination boolean false true, false Removes table pagination display
page-number number 1 any Defines number of pages in table
page-size number 10 any Defines size of pages in table
page-size-options number [10, 20, 50] any Defines size options of pages in table
total-count any 0 any Defines total count value

 

Table Header Data Attributes

 

ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Text label for column header
sortable boolean false true, false Allow column to be sortable
has-tag boolean false true, false Change styling of the column content to be 'tags'. Column value is appended as class value to the column which can be used for styling
has-link boolean false true, false Change styling of the column to have link styling
has-column-action boolean false true, false Shows table row actions on the column. By default, 1st column will always show row actions (if table row actions are available)
has-image boolean false true, false Marks the column to have an image besides the value   - To set image value, data should be as ["column name"_Img]   (ie. Header Label = ['Customer Name'] then Image = ['Customer Name_Img']
type string "string" string, select, number, currency, date Defines the column data type. "Number & Currency" will make the text right aligned.
editable boolean false true, false Makes the table row field values editable. (table needs to have 'bulk-actions')   Supported field types:     * string (default)   * select   * date
select-options array [] any Defines the options for 'select' field type (on editable only)
date-format string "YYYY-MM-DD" any valid date format Defines field date format (on editable only)

 

Events

 

EVENT OBJECT DESCRIPTION
insPaginationChange pageSize, pageNumber Execute a script when pagination is clicked
insTableSearch value Execute a script when an element gets user search input
insTableSort keyword, order Execute a script when table is sorted
insTableBulkAction action,selections,updated_items (for editable table) Execute a script when bulk action button is clicked
insTableRowAction action,header,data (table row data) Execute a script when row action button is clicked
insFieldChange value (for editable table) Execute a script when row field value has changed

 

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.